igniteui-theming 1.4.7 → 1.4.9

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -30,8 +30,8 @@
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
 /// @prop {Number} border-width [0] - The border width used for drop-down component.
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
-/// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for drop-down component.
+/// @prop {List} item-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the drop-down items.
 /// @requires {Map} $default-elevation-drop-down
 $light-drop-down: extend(
     $default-elevation-drop-down,
@@ -133,8 +133,16 @@ $light-drop-down: extend(
             ),
         ),
         border-width: 0,
-        border-radius: rem(4px),
-        item-border-radius: rem(0),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        item-border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -147,8 +155,7 @@ $light-drop-down: extend(
 /// @prop {Map} selected-focus-item-background [color: ('gray', 200)] - The drop-down selected item focus background color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
-/// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $fluent-elevation-drop-down
 $fluent-drop-down: extend(
@@ -191,7 +198,11 @@ $fluent-drop-down: extend(
                 200,
             ),
         ),
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -208,8 +219,6 @@ $fluent-drop-down: extend(
 /// @prop {Map} selected-focus-item-background [color: ('primary', 600)] - The drop-down selected item focus background color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color('primary', 600)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
-/// @prop {Number} border-radius [4px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [0] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} border-width [1px] - The border width used for drop-down component.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $bootstrap-elevation-drop-down
@@ -300,8 +309,8 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
 /// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
-/// @prop {Number} border-radius [2px] - The border radius used for drop-down component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [2px] - The border radius used for the drop-down items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
+/// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $indigo-elevation-drop-down
 $indigo-drop-down: extend(
@@ -370,7 +379,15 @@ $indigo-drop-down: extend(
                 400,
             ),
         ),
-        border-radius: rem(2px),
-        item-border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
+        item-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_expansion-panel.scss

@@ -17,7 +17,7 @@
 /// @prop {Map} header-icon-color [color: ('gray', 800)] - The panel header icon color.
 /// @prop {Map} body-color [color: ('gray', 900)] - The panel body text color.
 /// @prop {Map} disabled-color [color: ('gray', 500)] - The panel disabled text color.
-/// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for expansion-panel.
 /// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
 $light-expansion-panel: (
     header-background: (
@@ -75,7 +75,11 @@ $light-expansion-panel: (
     ),
 
     expanded-margin: rem(8px),
-    border-radius: rem(0),
+    border-radius: (
+        rem(0),
+        rem(0),
+        rem(16px),
+    ),
 );
 
 /// Generates a fluent expansion panel schema.
@@ -106,7 +110,6 @@ $fluent-expansion-panel: extend(
 /// @type {Map}
 /// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
 /// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
-/// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-expansion-panel
 $bootstrap-expansion-panel: extend(
     $light-expansion-panel,
@@ -133,7 +136,7 @@ $bootstrap-expansion-panel: extend(
 /// @prop {Map} header-description-color [color: ('gray', 500)] - The panel header description text color.
 /// @prop {Map} header-icon-color [color: ('gray', 600)] - The panel header icon color.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The panel disabled text color.
-/// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(16px))] - The border radius used for expansion-panel.
 /// @requires {Map} $light-expansion-panel
 $indigo-expansion-panel: extend(
     $light-expansion-panel,
@@ -167,6 +170,10 @@ $indigo-expansion-panel: extend(
             ),
         ),
 
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_grid.scss

@@ -89,9 +89,9 @@
 /// @prop {Map} root-summaries-text-color [contrast-color: ('gray', 300)] - The text color of the summary groups located the footer.
 /// @prop {Map} row-drag-color [color: ('gray', 200))] - The color of the drag handle.
 /// @prop {Map} row-ghost-background [color: ('primary', 50))] - The background color of the dragged row.
-/// @prop {number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid.
-/// @prop {number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
-/// @prop {Number} drop-area-border-radius [16px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} grid-elevation [2] - The elevation level, between 0-24, to be used for the grid.
+/// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
+/// @prop {List} drop-area-border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for drop-area.
 /// @requires {Map} $default-elevation-grid
 $light-grid: extend(
     $default-elevation-grid,
@@ -626,7 +626,11 @@ $light-grid: extend(
             ),
         ),
 
-        drop-area-border-radius: rem(16px),
+        drop-area-border-radius: (
+            rem(16px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
@@ -653,7 +657,7 @@ $light-grid: extend(
 /// @prop {Map} row-ghost-background [color: 'surface'] - The background color of the dragged row.
 /// @prop {number} grid-elevation [0] - The elevation level, between 0-24, to be used for the grid.
 /// @prop {number} drag-elevation [1] - The elevation level, between 0-24, to be used for movable elements (ex. column header).
-/// @prop {Number} drop-area-border-radius [2px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} drop-area-border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for drop-area.
 /// @prop {Map} filtering-background-or [color: ('error', .5)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} filtering-background-or--focus [color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 300)] - The background of the selected cell inside a selected row/column.
@@ -828,7 +832,11 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
-        drop-area-border-radius: rem(2px),
+        drop-area-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
@@ -845,7 +853,7 @@ $fluent-grid: extend(
 /// @prop {Map} row-selected-hover-background [color: ('primary', 100)] - The selected row hover background.
 /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The color of the pinned border.
 /// @prop {Map} resize-line-color [color: ('primary', 500)] - The table header resize line color.
-/// @prop {Number} drop-area-border-radius [4px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} drop-area-border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for drop-area.
 /// @prop {Map} cell-selected-within-background [color: ('primary', 100)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('primary', 100)] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('primary', 100)] - The selected row hover text color.
@@ -984,7 +992,11 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        drop-area-border-radius: rem(4px),
+        drop-area-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
@@ -1021,7 +1033,6 @@ $bootstrap-grid: extend(
 /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color.
 /// @prop {Map} drop-area-text-color [contrast-color: ('gray', 200)] - The drop area text color.
 /// @prop {Map} drop-area-icon-color [contrast-color: ('gray', 200)] - The drop area icon color.
-/// @prop {Number} drop-area-border-radius [16px] - The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} root-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the footer.
 /// @prop {Map} body-summaries-background [color: ('gray', 100)] - The background color of the summary groups located the body.
 /// @prop {Map} group-row-background [color: ('gray', 100)] - The grid group row background color.

package/sass/themes/schemas/components/light/_input-group.scss

@@ -51,9 +51,9 @@
 /// @prop {Map} error-shadow-color [color: ('error', 500, .38)] - The shadow/border color for error state for bootstrap input group.
 /// @prop {Map} placeholder-color [color: ('gray', 700)] - The placeholder color of an input group.
 /// @prop {Map} disabled-placeholder-color [color: ('gray', 500)] - The disabled placeholder color of an input group.
-/// @prop {Number} box-border-radius [4px 4px 0 0] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-border-radius [4px] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} search-border-radius [4px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} box-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for box input.
+/// @prop {List} border-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for border input.
+/// @prop {List} search-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for search input.
 /// @prop {Map} input-prefix-color--filled [color: ('gray', 900)] - The input prefix color in the filled state.
 /// @prop {Color} input-prefix-background--filled [inherit] - The background color of an input prefix in the filled state.
 /// @prop {Map} input-prefix-color--focused [color: ('gray', 900)] - The input prefix color in the focused state.
@@ -280,9 +280,21 @@ $light-input-group: extend(
                 100,
             ),
         ),
-        box-border-radius: rem(4px),
-        border-border-radius: rem(4px),
-        search-border-radius: rem(4px),
+        box-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        border-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        search-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
         success-shadow-color: (
             color: (
                 'success',
@@ -314,9 +326,9 @@ $light-input-group: extend(
 /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
 /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
 /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
-/// @prop {Number} box-border-radius [2px] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-border-radius [2px] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} box-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for box input.
+/// @prop {List} border-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for border input.
+/// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input.
 /// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border.
 /// @prop {Map} input-prefix-color--filled [color: ('gray', 700)] - The input prefix color in the filled state.
 /// @prop {Map} input-prefix-color--focused [color: ('gray', 700)] - The input prefix color in the focused state.
@@ -461,9 +473,21 @@ $fluent-input-group: extend(
                 100,
             ),
         ),
-        box-border-radius: rem(2px),
-        border-border-radius: rem(2px),
-        search-border-radius: rem(2px),
+        box-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
+        border-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
+        search-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -478,9 +502,6 @@ $fluent-input-group: extend(
 /// @prop {Map} warning-secondary-color [color: ('warn', 500)] - The warning color used in the warning state.
 /// @prop {Map} error-secondary-color [color: ('error')] - The error color used in the error state.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The input text color in the disabled state.
-/// @prop {Number} box-border-radius [4px] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-border-radius [4px] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} search-border-radius [4px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} interim-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors during the to-focused transition.
 /// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group.
 /// @prop {Map} input-prefix-color [color: ('gray', 800)] - The input prefix color in the idle state.
@@ -644,9 +665,9 @@ $bootstrap-input-group: extend(
 /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input.
 /// @prop {Number} search-hover-elevation [1] - The elevation level, between 0-24, to be used for the hover state of the search input.
 /// @prop {Number} search-disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state of the search input.
-/// @prop {Number} box-border-radius [0] - The border radius used for box input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-border-radius [0] - The border radius used for border input. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} search-border-radius [2px] - The border radius used for search input. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} box-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for box input.
+/// @prop {List} border-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for border input.
+/// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input.
 /// @prop {Map} placeholder-color [color: ('gray', 300)] - The placeholder color of an input group.
 /// @prop {Map} disabled-placeholder-color [color: ('gray', 300)] - The disabled placeholder color of an input group.
 /// @prop {Map} input-prefix-color--filled [color: ('gray', 600)] - The input prefix color in the filled state.
@@ -781,9 +802,21 @@ $indigo-input-group: extend(
                 300,
             ),
         ),
-        box-border-radius: rem(0),
-        border-border-radius: rem(0),
-        search-border-radius: rem(2px),
+        box-border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+        border-border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+        search-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
         idle-secondary-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_list.scss

@@ -30,8 +30,8 @@
 /// @prop {Color} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
 /// @prop {Color} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
 /// @prop {Color} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
-/// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [()] - The border radius used for list component.
+/// @prop {List} item-border-radius [()] - The border radius used for list item.
 /// @prop {Number} border-color [transparent] - The list border color.
 /// @prop {Color} border-width [0] - The list border width.
 $light-list: (
@@ -117,8 +117,16 @@ $light-list: (
 
     border-width: 0,
 
-    border-radius: rem(0),
-    item-border-radius: rem(0),
+    border-radius: (
+        rem(0),
+        rem(0),
+        rem(24px),
+    ),
+    item-border-radius: (
+        rem(0),
+        rem(0),
+        rem(24px),
+    ),
 );
 
 /// Generates a fluent list schema.
@@ -133,8 +141,7 @@ $fluent-list: $light-list;
 /// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
 /// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
 /// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
-/// @prop {Number} border-radius [4px] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [0] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for list component.
 /// @prop {Number} border-color [color: ('gray', 300)] - The list border color.
 /// @prop {Color} border-width [rem(1px)] - The list border width.
 /// @requires {Map} $light-list
@@ -184,7 +191,11 @@ $bootstrap-list: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -205,8 +216,7 @@ $bootstrap-list: extend(
 /// @prop {Color} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
 /// @prop {Color} item-thumbnail-color-hover [color: ('gray', 600)] - The list item thumbnail hover color.
 /// @prop {Color} item-thumbnail-color-active [color: ('gray', 600)] - The list item thumbnail active color.
-/// @prop {Number} border-radius [0] - The border radius used for list component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [2px] - The border radius used for list item. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} item-border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for list item.
 /// @requires {Map} $light-list
 $indigo-list: extend(
     $light-list,
@@ -316,6 +326,10 @@ $indigo-list: extend(
             ),
         ),
 
-        item-border-radius: rem(2px),
+        item-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_navdrawer.scss

@@ -22,8 +22,8 @@
 /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
 /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
-/// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [4px] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
+/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
 /// @requires {Map} $default-elevation-navdrawer
 $light-navdrawer: extend(
     $default-elevation-navdrawer,
@@ -105,8 +105,16 @@ $light-navdrawer: extend(
             ),
         ),
 
-        border-radius: rem(0),
-        item-border-radius: rem(4px),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(36px),
+        ),
+        item-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -133,8 +141,7 @@ $bootstrap-navdrawer: $light-navdrawer;
 /// @prop {Map} item-hover-text-color [contrast-color: ('gray', 700)] - The item's hover text color.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 700)] - The item's hover icon color.
 /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
-/// @prop {Number} border-radius [0] - The border radius used for the navdrawer component. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} item-border-radius [24px] - The border radius used for the navdrawer items. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} item-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
 /// @requires {Map} $light-navdrawer
 /// @requires {Map} $indigo-elevation-navdrawer
 $indigo-navdrawer: extend(
@@ -209,6 +216,10 @@ $indigo-navdrawer: extend(
             ),
         ),
 
-        item-border-radius: rem(24px),
+        item-border-radius: (
+            rem(24px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_progress.scss

@@ -17,7 +17,7 @@
 /// @prop {Map} fill-color-success [color: ('success')] - The track success fill color.
 /// @prop {Map} stripes-color [color: ('gray', 50, .7)] - The track stripes color.
 /// @prop {Map} text-color [color: ('gray', 700)] - The track value text color.
-/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} track-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the progress bar track.
 $light-progress-linear: extend(
     (
         track-color: (
@@ -73,13 +73,16 @@ $light-progress-linear: extend(
             ),
         ),
 
-        track-border-radius: rem(0),
+        track-border-radius: (
+            rem(0),
+            rem(0),
+            rem(8px),
+        ),
     )
 );
 
 /// Generates a fluent progress-linear schema.
 /// @type {Map}
-/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires $light-progress-linear
 $fluent-progress-linear: $light-progress-linear;
 
@@ -87,7 +90,7 @@ $fluent-progress-linear: $light-progress-linear;
 /// @type {Map}
 /// @prop {Map} track-color [color: ('gray', 200)] - The main track color.
 /// @prop {Map} stripes-color [color: ('gray', 50, .15)] - The track stripes color.
-/// @prop {Number} track-border-radius [4px] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} track-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the progress bar track.
 /// @requires $light-progress-linear
 $bootstrap-progress-linear: extend(
     $light-progress-linear,
@@ -107,7 +110,11 @@ $bootstrap-progress-linear: extend(
             ),
         ),
 
-        track-border-radius: rem(4px),
+        track-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(8px),
+        ),
     )
 );
 
@@ -115,7 +122,6 @@ $bootstrap-progress-linear: extend(
 /// @type {Map}
 /// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
 /// @prop {Map} stripes-color [color: ('gray', 50, .45)] - The track stripes color.
-/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires $light-progress-linear
 $indigo-progress-linear: extend(
     $light-progress-linear,
@@ -142,7 +148,7 @@ $indigo-progress-linear: extend(
 /// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
 /// @prop {Map} progress-circle-color [color: ('primary', 500)] - The progress circle fill color.
 /// @prop {Map} text-color [color: ('gray', 700)] - The value text color.
-/// @prop {Number} track-border-radius [0] - The border radius used for the progress bar track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} track-border-radius [rem(0)] - The border radius used for the progress bar track.
 $light-progress-circular: extend(
     (
         base-circle-color: (

package/sass/themes/schemas/components/light/_select.scss

@@ -15,10 +15,17 @@
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The select toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is filled.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The select toggle button background color when the select is focused in material border variant.
 $light-select: (
+    toggle-button-background-focus--border: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
     toggle-button-background: (
         color: (
             'gray',
@@ -53,7 +60,7 @@ $light-select: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            300,
+            100,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -69,7 +76,6 @@ $light-select: (
 /// @prop {Map} toggle-button-background [color: ('gray', 100)] - The select toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @requires {Map} $light-select
 $fluent-select: extend(
@@ -93,12 +99,6 @@ $fluent-select: extend(
                 700,
             ),
         ),
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -110,7 +110,6 @@ $fluent-select: extend(
 
 /// Generates a bootstrap select schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
@@ -119,12 +118,6 @@ $fluent-select: extend(
 $bootstrap-select: extend(
     $light-select,
     (
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -154,18 +147,13 @@ $bootstrap-select: extend(
 
 /// Generates an indigo select schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
+/// @prop {Color} toggle-button-background-disabled [transparent] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The select toggle button foreground color when the select is disabled.
 /// @requires {Map} $light-select
 $indigo-select: extend(
     $light-select,
     (
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
+        toggle-button-background-disabled: transparent,
         toggle-button-foreground-disabled: (
             color: (
                 'gray',