igniteui-theming 1.4.14 → 2.0.1

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/_icon.scss

@@ -10,11 +10,9 @@
 /// Generates a light icon schema.
 /// @type {Map}
 /// @prop {Color} color ["'currentColor'"] - The icon color.
-/// @prop {String} size [rem(24px)] - The icon size.
 /// @prop {Color} disabled-color ["'currentColor'"] - The disabled icon color.
 $light-icon: (
     color: "'currentColor'",
-    size: rem(24px),
     disabled-color: "'currentColor'",
 );
 

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/_snackbar.scss

@@ -14,7 +14,7 @@
 /// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color used in the snackbar.
 /// @prop {Map} button-color [color: ('secondary', 500)] - The button color used in the snackbar.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar.
-/// @prop {Number} border-radius [4px] - The border radius used for snackbar. 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 snackbar.
 /// @requires {Map} $default-elevation-snackbar
 $light-snackbar: extend(
     $default-elevation-snackbar,
@@ -41,19 +41,27 @@ $light-snackbar: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
 /// Generates a fluent snackbar schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for snackbar.
 ///
 /// @requires $light-snackbar
 $fluent-snackbar: extend(
     $light-snackbar,
     (
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -97,7 +105,7 @@ $bootstrap-snackbar: extend(
 /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
 /// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
-/// @prop {Number} border-radius [6px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
 ///
 ///
 /// @requires $light-snackbar
@@ -126,6 +134,10 @@ $indigo-snackbar: extend(
             ),
         ),
 
-        border-radius: rem(6px),
+        border-radius: (
+            rem(6px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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

@@ -12,7 +12,7 @@
 /// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
 /// @prop {Map} handle-color [color: ('gray', 400)] - The color for the bar drag handle.
 /// @prop {Map} expander-color [color: ('gray', 400)] - The color for the arrow expander's.
-/// @prop {Number} border-radius [2px] - The border radius used for splitter. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(2px))] - The border radius used for splitter.
 /// @prop {Map} focus-color [color: ('secondary', 500)] - The color used for focused splitter bar.
 /// @prop {Number} size [4px] - The size of the splitter, it's width for vertical and height for horizontal splitter.
 $light-splitter: (
@@ -46,7 +46,11 @@ $light-splitter: (
 
     size: 4px,
 
-    border-radius: rem(2px),
+    border-radius: (
+        rem(2px),
+        rem(0),
+        rem(2px),
+    ),
 );
 
 /// Generates a fluent splitter schema.

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

@@ -66,8 +66,8 @@
 /// @prop {Map} complete-step-separator-color [color: ('gray', 900)] - The separator border-color between the completed steps.
 /// @prop {String} step-separator-style ['dashed'] - The separator border-style of between the steps.
 /// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
-/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(100px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(0), rem(0), rem(100px))] - The header border radius.
 $light-stepper: (
     // Step incomplete
     step-background: transparent,
@@ -400,8 +400,8 @@ $light-stepper: (
     ),
     step-separator-style: 'dashed',
     complete-step-separator-style: 'solid',
-    border-radius-indicator: rem(100px),
-    border-radius-step-header: rem(0)
+    border-radius-indicator: (rem(100px), rem(0), rem(100px)),
+    border-radius-step-header: (rem(0), rem(0), rem(100px))
 );
 
 /// Generates a fluent stepper schema.
@@ -415,8 +415,8 @@ $light-stepper: (
 /// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
 /// @prop {Color} disabled-indicator-background [transparent] - The background color of the disabled step indicator.
 /// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator.
-/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius.
 /// @requires {Map} $light-stepper
 $fluent-stepper: extend(
     $light-stepper,
@@ -455,8 +455,16 @@ $fluent-stepper: extend(
         // Disabled
         disabled-indicator-background: transparent,
         disabled-indicator-outline: transparent,
-        border-radius-indicator: rem(2px),
-        border-radius-step-header: rem(2px),
+        border-radius-indicator: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
+        border-radius-step-header: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
     )
 );
 
@@ -482,8 +490,8 @@ $fluent-stepper: extend(
 /// @prop {Map} invalid-step-focus-background [color: ('gray', 300, .5)] - The background of the invalid step header on hover.
 /// @prop {Map} current-step-focus-background [color: ('gray', 300, .5)] - The background of the current step header on hover.
 /// @prop {Map} complete-step-focus-background [color: ('gray', 300, .5)] - The background of the complete step header on hover.
-/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius.
 /// @requires {Map} $light-stepper
 $bootstrap-stepper: extend(
     $light-stepper,
@@ -606,8 +614,16 @@ $bootstrap-stepper: extend(
         ),
         step-separator-style: 'solid',
         complete-step-separator-style: 'solid',
-        border-radius-indicator: rem(2px),
-        border-radius-step-header: rem(2px),
+        border-radius-indicator: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
+        border-radius-step-header: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
     )
 );
 
@@ -625,8 +641,6 @@ $bootstrap-stepper: extend(
 /// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
 /// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
 /// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
-/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires $light-stepper
 $indigo-stepper: extend(
     $light-stepper,