feat(select): add css vars for divider spacing

Author: owner

src/dev-app/select/BUILD.bazel

@@ -16,6 +16,7 @@ ng_project(
         "//src/material/button",
         "//src/material/card",
         "//src/material/checkbox",
+        "//src/material/divider",
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/input",

src/dev-app/select/select-demo.html

@@ -174,13 +174,14 @@
   </mat-card>
 
   <mat-card>
-    <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
+    <mat-card-subtitle>Appearance comparison (with dividers)</mat-card-subtitle>
     <mat-card-content>
       <p>
         <mat-form-field appearance="fill">
           <mat-label>Fill</mat-label>
           <mat-select [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
+            <mat-divider />
             @for (creature of digimon; track creature) {
               <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
             }
@@ -193,6 +194,7 @@
           <mat-label>Outline</mat-label>
           <mat-select [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
+            <mat-divider />
             @for (creature of digimon; track creature) {
               <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
             }

src/dev-app/select/select-demo.ts

@@ -12,6 +12,7 @@ import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angula
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDividerModule} from '@angular/material/divider';
 import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
 import {FloatLabelType} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -40,6 +41,7 @@ type DisableDrinkOption = 'none' | 'first-middle-last' | 'all';
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatDividerModule,
     MatIconModule,
     MatInputModule,
     MatSelectModule,

src/material/select/_m2-select.scss

@@ -11,6 +11,8 @@
   @return (
     base: (
       select-container-elevation-shadow: elevation.get-box-shadow(8),
+      select-divider-bottom-spacing: 0,
+      select-divider-top-spacing: 0
     ),
     color: private-get-color-palette-color-tokens($theme, primary),
     typography: (

src/material/select/_m3-select.scss

@@ -19,6 +19,8 @@ $prefix: (mat, select);
   @return (
     base: (
       select-container-elevation-shadow: elevation.get-box-shadow(2),
+      select-divider-bottom-spacing: 8px,
+      select-divider-top-spacing: 8px
     ),
     color: (
       select-panel-background-color: map.get($system, surface-container),

src/material/select/select.scss

@@ -52,6 +52,11 @@ $fallbacks: m3-select.get-tokens();
 }
 div.mat-mdc-select-panel {
   box-shadow: token-utils.slot(select-container-elevation-shadow, $fallbacks);
+
+  .mat-divider {
+    margin-top: token-utils.slot(select-divider-top-spacing, $fallbacks);
+    margin-bottom: token-utils.slot(select-divider-bottom-spacing, $fallbacks);
+  }
 }
 
 .mat-mdc-select-disabled {