igniteui-theming 1.4.14 → 2.0.1

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

@@ -54,9 +54,9 @@
 /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
 /// @prop {Map} week-number-color [color: ('gray', 500)] - The text color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
-/// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. 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 calendar.
+/// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar date.
+/// @prop {List} month-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar month.
 $light-calendar: (
     content-background: (
         color: 'surface',
@@ -360,9 +360,21 @@ $light-calendar: (
         ),
     ),
 
-    border-radius: rem(4px),
-    date-border-radius: rem(20px),
-    month-border-radius: rem(20px),
+    border-radius: (
+        rem(4px),
+        rem(0),
+        rem(20px),
+    ),
+    date-border-radius: (
+        rem(20px),
+        rem(0),
+        rem(20px),
+    ),
+    month-border-radius: (
+        rem(20px),
+        rem(0),
+        rem(20px),
+    ),
 );
 
 /// Generates a fluent calendar schema.
@@ -380,9 +392,9 @@ $light-calendar: (
 /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
 /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The text color for the selected/current date.
-/// @prop {Number} border-radius [0] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} date-border-radius [0] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar.
+/// @prop {List} date-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar date.
+/// @prop {List} month-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar month.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -491,9 +503,21 @@ $fluent-calendar: extend(
             ),
         ),
 
-        border-radius: rem(0),
-        date-border-radius: rem(0),
-        month-border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+        date-border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+        month-border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -530,9 +554,9 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-focus-background [color: ('primary', 700)] - The focus background color for the selected/current date.
 /// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
-/// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} date-border-radius [4px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} month-border-radius [4px] - The border radius used for calendar month. 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 calendar.
+/// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar date.
+/// @prop {List} month-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar month.
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -765,9 +789,21 @@ $bootstrap-calendar: extend(
             ),
         ),
 
-        border-radius: rem(4px),
-        date-border-radius: rem(4px),
-        month-border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        date-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        month-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -789,9 +825,7 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 500)] - The focus text color for the selected/current date.
 /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
-/// @prop {Number} border-radius [3px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for calendar.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -903,6 +937,10 @@ $indigo-calendar: extend(
             ),
         ),
 
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );

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

@@ -18,7 +18,7 @@
 /// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} border-radius [4px] - The border radius used for card. 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 card.
 /// @requires {Map} $default-elevation-card
 $light-card: extend(
     $default-elevation-card,
@@ -63,7 +63,11 @@ $light-card: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -72,7 +76,7 @@ $light-card: extend(
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
 /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} border-radius [2px] - The border radius used for card. 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 card.
 /// @requires {Map} $light-card
 /// @requires {Map} $fluent-elevation-card
 $fluent-card: extend(
@@ -86,7 +90,11 @@ $fluent-card: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -100,7 +108,6 @@ $fluent-card: extend(
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
 /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-card
 /// @requires {Map} $bootstrap-elevation-card
 $bootstrap-card: extend(
@@ -160,7 +167,7 @@ $bootstrap-card: extend(
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
 /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
 /// @requires {Map} $indigo-elevation-card
 $indigo-card: extend(
@@ -202,6 +209,10 @@ $indigo-card: extend(
             ),
         ),
 
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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

@@ -22,7 +22,7 @@
 /// @prop {Map} indicator-active-dot-color [color: ('gray', 50)] - The active indicator dot color.
 /// @prop {Map} indicator-active-border-color [color: ('gray', 50)] - The active indicator border color.
 /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
-/// @prop {Number} border-radius [0] - The border radius used for carousel. 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 carousel.
 /// @requires {Map} $default-elevation-carousel
 $light-carousel: extend(
     $default-elevation-carousel,
@@ -98,13 +98,16 @@ $light-carousel: extend(
             ),
         ),
 
-        border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
 /// Generates a fluent carousel schema.
 /// @type {Map}
-/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $fluent-elevation-carousel
@@ -112,7 +115,7 @@ $fluent-carousel: extend($light-carousel, $fluent-elevation-carousel);
 
 /// Generates a bootstrap carousel schema.
 /// @type {Map}
-/// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for carousel.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $bootstrap-elevation-carousel
@@ -120,7 +123,11 @@ $bootstrap-carousel: extend(
     $light-carousel,
     $bootstrap-elevation-carousel,
     (
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
@@ -134,7 +141,6 @@ $bootstrap-carousel: extend(
 /// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
 /// @prop {Map} indicator-dot-color [color: ('surface', 500, .6)] - The idle indicator dot color.
 /// @prop {Map} indicator-active-dot-color [color: 'surface'] - The active indicator dot color.
-/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $indigo-elevation-carousel

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

@@ -22,8 +22,8 @@
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
-/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-ripple [24px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 $light-checkbox: (
     tick-color: (
         color: (
@@ -91,8 +91,16 @@ $light-checkbox: (
             500,
         ),
     ),
-    border-radius: rem(2px),
-    border-radius-ripple: rem(24px),
+    border-radius: (
+        rem(2px),
+        rem(0),
+        rem(10px),
+    ),
+    border-radius-ripple: (
+        rem(24px),
+        rem(0),
+        rem(24px),
+    ),
 );
 
 /// Generates a fluent checkbox schema.
@@ -104,8 +112,8 @@ $light-checkbox: (
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
-/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $fluent-checkbox: extend(
     $light-checkbox,
@@ -152,8 +160,16 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
-        border-radius: rem(2px),
-        border-radius-ripple: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -165,8 +181,8 @@ $fluent-checkbox: extend(
 /// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
 /// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
-/// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {List} border-radius-ripple [(rem(4px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
@@ -207,8 +223,16 @@ $bootstrap-checkbox: extend(
                 100,
             ),
         ),
-        border-radius: rem(4px),
-        border-radius-ripple: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -223,8 +247,8 @@ $bootstrap-checkbox: extend(
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
 /// @prop {Map} error-color-hover [color: ('error', 200)] - The focus outlined color in invalid state.
-/// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {List} border-radius-ripple [(rem(3px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $indigo-checkbox: extend(
     $light-checkbox,
@@ -277,7 +301,15 @@ $indigo-checkbox: extend(
                 200,
             ),
         ),
-        border-radius: rem(3px),
-        border-radius-ripple: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(3px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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

@@ -10,7 +10,7 @@
 
 /// Generates a light chip schema.
 /// @type {Map}
-/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for chip.
 /// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
 /// @prop {Map} background [color: ('gray', 300)] - The chip background color.
 /// @prop {Color} border-color [transparent] - The chip border color.
@@ -151,7 +151,11 @@ $light-chip: extend(
 
         focus-selected-border-color: transparent,
 
-        border-radius: rem(16px),
+        border-radius: (
+            rem(16px),
+            rem(0),
+            rem(16px),
+        ),
         disabled-text-color: (
             color: (
                 'gray',
@@ -191,7 +195,6 @@ $light-chip: extend(
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 700)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
 /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-chip
 /// @requires {Map} $fluent-elevation-chip
 $fluent-chip: extend(
@@ -302,7 +305,7 @@ $fluent-chip: extend(
 /// @prop {Map} focus-selected-background [color: ('gray', 400)] - The selected chip focus background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 400)] - The selected chip text focus color.
 /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @prop {Number} border-radius [4px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for chip.
 /// @prop {Map} focus-outline-color [color: ('gray', 200)] - The chip focus outline color.
 /// @prop {Map} focus-selected-outline-color [color: ('primary', 200)] - The selected chip focus outline color.
 /// @requires {Map} $light-chip
@@ -381,14 +384,17 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
 /// Generates an indigo chip schema.
 /// @type {Map}
 /// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} background [color: ('surface')] - The chip background color.
 /// @prop {Map} ghost-background [color: ('surface')] - The chip ghost background color.

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

@@ -15,7 +15,7 @@
 /// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
 /// @prop {Color} border-color [transparent] - The border color for dialog component.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
-/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @requires {Map} $default-elevation-dialog
 $light-dialog: extend(
     $default-elevation-dialog,
@@ -40,19 +40,27 @@ $light-dialog: extend(
 
         border-color: transparent,
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
 /// @requires {Map} $light-dialog
 $fluent-dialog: extend(
     $light-dialog,
     (
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(36px),
+        ),
         message-color: (
             color: (
                 'gray',
@@ -66,7 +74,6 @@ $fluent-dialog: extend(
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color for dialog component.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
-/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-dialog
 /// @requires {Map} $bootstrap-elevation-dialog
 $bootstrap-dialog: extend(
@@ -85,7 +92,7 @@ $bootstrap-dialog: extend(
 /// Generates an indigo dialog schema.
 /// @type {Map}
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
-/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @requires {Map} $light-dialog
 $indigo-dialog: extend(
     $light-dialog,
@@ -97,6 +104,10 @@ $indigo-dialog: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );

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),
+        ),
     )
 );