igniteui-theming 1.4.11 → 1.4.13

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 {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.
+/// @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.
 /// @requires {Map} $default-elevation-drop-down
 $light-drop-down: extend(
     $default-elevation-drop-down,
@@ -133,16 +133,8 @@ $light-drop-down: extend(
             ),
         ),
         border-width: 0,
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(20px),
-        ),
-        item-border-radius: (
-            rem(0),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(4px),
+        item-border-radius: rem(0),
     )
 );
 
@@ -155,7 +147,8 @@ $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 {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
+/// @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.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $fluent-elevation-drop-down
 $fluent-drop-down: extend(
@@ -198,11 +191,7 @@ $fluent-drop-down: extend(
                 200,
             ),
         ),
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(2px),
     )
 );
 
@@ -219,6 +208,8 @@ $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
@@ -309,8 +300,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 {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.
+/// @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.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $indigo-elevation-drop-down
 $indigo-drop-down: extend(
@@ -379,15 +370,7 @@ $indigo-drop-down: extend(
                 400,
             ),
         ),
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(20px),
-        ),
-        item-border-radius: (
-            rem(2px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(2px),
+        item-border-radius: rem(2px),
     )
 );

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 {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for expansion-panel.
+/// @prop {Number} border-radius [0] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
 $light-expansion-panel: (
     header-background: (
@@ -75,11 +75,7 @@ $light-expansion-panel: (
     ),
 
     expanded-margin: rem(8px),
-    border-radius: (
-        rem(0),
-        rem(0),
-        rem(16px),
-    ),
+    border-radius: rem(0),
 );
 
 /// Generates a fluent expansion panel schema.
@@ -110,6 +106,7 @@ $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,
@@ -136,7 +133,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 {List} border-radius [(rem(3px), rem(0), rem(16px))] - The border radius used for expansion-panel.
+/// @prop {Number} border-radius [3px] - The border radius used for expansion-panel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-expansion-panel
 $indigo-expansion-panel: extend(
     $light-expansion-panel,
@@ -170,10 +167,6 @@ $indigo-expansion-panel: extend(
             ),
         ),
 
-        border-radius: (
-            rem(3px),
-            rem(0),
-            rem(16px),
-        ),
+        border-radius: rem(3px),
     )
 );

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 {List} drop-area-border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for drop-area.
+/// @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.
 /// @requires {Map} $default-elevation-grid
 $light-grid: extend(
     $default-elevation-grid,
@@ -626,11 +626,7 @@ $light-grid: extend(
             ),
         ),
 
-        drop-area-border-radius: (
-            rem(16px),
-            rem(0),
-            rem(16px),
-        ),
+        drop-area-border-radius: rem(16px),
     )
 );
 
@@ -657,7 +653,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 {List} drop-area-border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for drop-area.
+/// @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 {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.
@@ -832,11 +828,7 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
-        drop-area-border-radius: (
-            rem(2px),
-            rem(0),
-            rem(16px),
-        ),
+        drop-area-border-radius: rem(2px),
     )
 );
 
@@ -853,7 +845,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 {List} drop-area-border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for drop-area.
+/// @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 {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.
@@ -992,11 +984,7 @@ $bootstrap-grid: extend(
             ),
         ),
 
-        drop-area-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(16px),
-        ),
+        drop-area-border-radius: rem(4px),
     )
 );
 
@@ -1033,6 +1021,7 @@ $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 {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 {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 {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,21 +280,9 @@ $light-input-group: extend(
                 100,
             ),
         ),
-        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),
-        ),
+        box-border-radius: rem(4px),
+        border-border-radius: rem(4px),
+        search-border-radius: rem(4px),
         success-shadow-color: (
             color: (
                 'success',
@@ -326,9 +314,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 {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 {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 {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.
@@ -473,21 +461,9 @@ $fluent-input-group: extend(
                 100,
             ),
         ),
-        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),
-        ),
+        box-border-radius: rem(2px),
+        border-border-radius: rem(2px),
+        search-border-radius: rem(2px),
     )
 );
 
@@ -502,6 +478,9 @@ $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.
@@ -665,9 +644,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 {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 {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 {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.
@@ -802,21 +781,9 @@ $indigo-input-group: extend(
                 300,
             ),
         ),
-        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),
-        ),
+        box-border-radius: rem(0),
+        border-border-radius: rem(0),
+        search-border-radius: rem(2px),
         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 {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-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 {Number} border-color [transparent] - The list border color.
 /// @prop {Color} border-width [0] - The list border width.
 $light-list: (
@@ -117,16 +117,8 @@ $light-list: (
 
     border-width: 0,
 
-    border-radius: (
-        rem(0),
-        rem(0),
-        rem(24px),
-    ),
-    item-border-radius: (
-        rem(0),
-        rem(0),
-        rem(24px),
-    ),
+    border-radius: rem(0),
+    item-border-radius: rem(0),
 );
 
 /// Generates a fluent list schema.
@@ -141,7 +133,8 @@ $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 {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for list component.
+/// @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 {Number} border-color [color: ('gray', 300)] - The list border color.
 /// @prop {Color} border-width [rem(1px)] - The list border width.
 /// @requires {Map} $light-list
@@ -191,11 +184,7 @@ $bootstrap-list: extend(
             ),
         ),
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
@@ -216,7 +205,8 @@ $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 {List} item-border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for list item.
+/// @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.
 /// @requires {Map} $light-list
 $indigo-list: extend(
     $light-list,
@@ -326,10 +316,6 @@ $indigo-list: extend(
             ),
         ),
 
-        item-border-radius: (
-            rem(2px),
-            rem(0),
-            rem(24px),
-        ),
+        item-border-radius: rem(2px),
     )
 );

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 {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.
+/// @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.
 /// @requires {Map} $default-elevation-navdrawer
 $light-navdrawer: extend(
     $default-elevation-navdrawer,
@@ -105,16 +105,8 @@ $light-navdrawer: extend(
             ),
         ),
 
-        border-radius: (
-            rem(0),
-            rem(0),
-            rem(36px),
-        ),
-        item-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(0),
+        item-border-radius: rem(4px),
     )
 );
 
@@ -141,7 +133,8 @@ $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 {List} item-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
+/// @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.
 /// @requires {Map} $light-navdrawer
 /// @requires {Map} $indigo-elevation-navdrawer
 $indigo-navdrawer: extend(
@@ -216,10 +209,6 @@ $indigo-navdrawer: extend(
             ),
         ),
 
-        item-border-radius: (
-            rem(24px),
-            rem(0),
-            rem(24px),
-        ),
+        item-border-radius: 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 {List} track-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the progress bar track.
+/// @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.
 $light-progress-linear: extend(
     (
         track-color: (
@@ -73,16 +73,13 @@ $light-progress-linear: extend(
             ),
         ),
 
-        track-border-radius: (
-            rem(0),
-            rem(0),
-            rem(8px),
-        ),
+        track-border-radius: rem(0),
     )
 );
 
 /// 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;
 
@@ -90,7 +87,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 {List} track-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the progress bar track.
+/// @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.
 /// @requires $light-progress-linear
 $bootstrap-progress-linear: extend(
     $light-progress-linear,
@@ -110,11 +107,7 @@ $bootstrap-progress-linear: extend(
             ),
         ),
 
-        track-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(8px),
-        ),
+        track-border-radius: rem(4px),
     )
 );
 
@@ -122,6 +115,7 @@ $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,
@@ -148,7 +142,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 {List} track-border-radius [rem(0)] - The border radius used for the progress bar track.
+/// @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.
 $light-progress-circular: extend(
     (
         base-circle-color: (

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

@@ -15,17 +15,11 @@
 /// @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 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-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-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 and line variants.
 $light-select: (
-    toggle-button-background-focus--border: (
-        color: (
-            'gray',
-            300,
-        ),
-    ),
     toggle-button-background: (
         color: (
             'gray',
@@ -60,7 +54,7 @@ $light-select: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            100,
+            300,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -76,6 +70,7 @@ $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(
@@ -99,6 +94,12 @@ $fluent-select: extend(
                 700,
             ),
         ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -110,6 +111,7 @@ $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.
@@ -118,6 +120,12 @@ $fluent-select: extend(
 $bootstrap-select: extend(
     $light-select,
     (
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -147,13 +155,18 @@ $bootstrap-select: extend(
 
 /// Generates an indigo select schema.
 /// @type {Map}
-/// @prop {Color} toggle-button-background-disabled [transparent] - The select toggle button background color when the select is disabled.
+/// @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', 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: transparent,
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',