igniteui-theming 25.0.0 → 25.0.2

package/sass/themes/schemas/components/dark/calendar/_year-month-view.scss

@@ -4,19 +4,19 @@
 @use '../../light/calendar/year-month-view' as *;
 
 /// Generates a dark material year/month schema.
-/// @type {Map}
-/// @requires {Map} $material-year-month
-/// @requires {Map} $dark-material-base
+/// @type Map
+/// @requires $material-year-month
+/// @requires $dark-material-base
 $dark-material-year-month: extend($material-year-month, $dark-material-base);
 
 /// Generates a dark fluent year/month schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
 /// @prop {Map} ym-selected-background [color: ('primary', 800)] - The background color of the selected month/year.
 /// @prop {Map} ym-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month/year.
 /// @prop {Map} ym-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month/year.
-/// @requires {Map} $fluent-year-month
-/// @requires {Map} $dark-fluent-base
+/// @requires $fluent-year-month
+/// @requires $dark-fluent-base
 $dark-fluent-year-month: extend(
     $fluent-year-month,
     $dark-fluent-base,
@@ -49,10 +49,10 @@ $dark-fluent-year-month: extend(
 );
 
 /// Generates a dark bootstrap year/month schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-hover-background [color: ('gray', 100)] - The :hover background color of the month/year.
 /// @prop {Map} ym-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month/year.
-/// @requires {Map} $bootstrap-year-month
+/// @requires $bootstrap-year-month
 $dark-bootstrap-year-month: extend(
     $bootstrap-year-month,
     $dark-bootstrap-base,
@@ -73,7 +73,7 @@ $dark-bootstrap-year-month: extend(
 );
 
 /// Generates a dark indigo year/month schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month/year.
 /// @prop {Map} ym-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month/year.
 /// @prop {Map} ym-selected-current-outline-color [color: ('primary', 300)] - The outline color of the selected current month/year.
@@ -85,8 +85,8 @@ $dark-bootstrap-year-month: extend(
 /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the current month/year.
 /// @prop {Map} ym-current-outline-color [color: ('primary', 300)] - The outline color of the current month/year.
 /// @prop {Map} ym-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month/year.
-/// @requires {Map} $indigo-year-month
-/// @requires {Map} $dark-indigo-base
+/// @requires $indigo-year-month
+/// @requires $dark-indigo-base
 $dark-indigo-year-month: extend(
     $indigo-year-month,
     $dark-indigo-base,

package/sass/themes/schemas/components/elevation/_button-group.scss

@@ -17,13 +17,13 @@ $default-elevation-button-group: (
 );
 
 /// @type Map
-/// @requires {Map} $_flat-button-group
+/// @requires $_flat-button-group
 $fluent-elevation-button-group: $_flat-button-group;
 
 /// @type Map
-/// @requires {Map} $_flat-button-group
+/// @requires $_flat-button-group
 $bootstrap-elevation-button-group: $_flat-button-group;
 
 /// @type Map
-/// @requires {Map} $_flat-button-group
+/// @requires $_flat-button-group
 $indigo-elevation-button-group: $_flat-button-group;

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

@@ -17,9 +17,9 @@ $flat-carousel: (
 );
 
 /// @type Map
-/// @requires {Map} $flat-carousel
+/// @requires $flat-carousel
 $bootstrap-elevation-carousel: $flat-carousel;
 
 /// @type Map
-/// @requires {Map} $flat-carousel
+/// @requires $flat-carousel
 $indigo-elevation-carousel: $flat-carousel;

package/sass/themes/schemas/components/light/_action-strip.scss

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light action-strip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Color} icon-color ["'currentColor'"] - The color used for the actions icons.
 /// @prop {Map} background [color: ('gray', 100, .38)] - The color used for the action strip component content background.
 /// @prop {Map} actions-background [color: ('gray', 200)] - The color used for actions background.
@@ -47,9 +47,9 @@ $light-action-strip: extend(
 );
 
 /// Generates a material action strip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} actions-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for action strip actions container.
-/// @requires {Map} $light-action-strip
+/// @requires $light-action-strip
 $material-action-strip: extend(
     $light-action-strip,
     (
@@ -68,9 +68,9 @@ $material-action-strip: extend(
 );
 
 /// Generates a fluent action strip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} actions-border-radius [(rem(0), rem(0), rem(24px))] - The border radius used for action strip actions container.
-/// @requires {Map} $light-action-strip
+/// @requires $light-action-strip
 $fluent-action-strip: extend(
     $light-action-strip,
     (
@@ -89,9 +89,9 @@ $fluent-action-strip: extend(
 );
 
 /// Generates a bootstrap action strip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} actions-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for action strip actions container.
-/// @requires {Map} $light-action-strip
+/// @requires $light-action-strip
 $bootstrap-action-strip: extend(
     $light-action-strip,
     (
@@ -110,11 +110,11 @@ $bootstrap-action-strip: extend(
 );
 
 /// Generates an indigo action strip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} icon-color [contrast-color: 'primary'] - The color used for the actions icons.
 /// @prop {Map} actions-background [color: ('primary')] - The color used for actions background.
 /// @prop {List} actions-border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for action strip actions container.
-/// @requires {Map} $light-action-strip
+/// @requires $light-action-strip
 $indigo-action-strip: extend(
     $light-action-strip,
     (

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

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light avatar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [color: ('gray', 400)] - The background color of the avatar.
 /// @prop {Map} color [color: ('gray', 800)] - The text color of the avatar.
 /// @prop {Map} icon-color [color: ('gray', 800)] - The icon color of the avatar.
@@ -50,8 +50,8 @@ $light-avatar: (
 );
 
 /// Generates a material avatar schema.
-/// @type {Map}
-/// @requires {Map} $light-avatar
+/// @type Map
+/// @requires $light-avatar
 $material-avatar: extend(
     $light-avatar,
     (
@@ -62,8 +62,8 @@ $material-avatar: extend(
 );
 
 /// Generates a fluent avatar schema.
-/// @type {Map}
-/// @requires {Map} $light-avatar
+/// @type Map
+/// @requires $light-avatar
 $fluent-avatar: extend(
     $light-avatar,
     (
@@ -74,9 +74,9 @@ $fluent-avatar: extend(
 );
 
 /// Generates a bootstrap avatar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
-/// @requires {Map} $light-avatar
+/// @requires $light-avatar
 $bootstrap-avatar: extend(
     $light-avatar,
     (
@@ -88,14 +88,14 @@ $bootstrap-avatar: extend(
 );
 
 /// Generates an indigo avatar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [color: ('gray', 300)]- The background color of the avatar.
 /// @prop {Map} color [color: ('gray', 700)] - The text color of the avatar.
 /// @prop {Map} icon-color [color: ('gray', 600)] - The icon color of the avatar.
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(20px), rem(28px), rem(36px))] - The size used for the avatar width and height.
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
-/// @requires {Map} $light-avatar
+/// @requires $light-avatar
 $indigo-avatar: extend(
     $light-avatar,
     (

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

@@ -9,17 +9,17 @@
 ////
 
 /// Generates a light badge schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The icon color used for the badge component.
 /// @prop {Map} text-color [contrast-color: ('primary', 900)] - The text color used for the badge component.
 /// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color used for the badge component.
 /// @prop {Map} background-color [color: ('primary', 500)] - The background color used for the badge component.
-/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, used for the badge shadow.
 /// @prop {Number} border-radius [0] - The border-radius used for the badge component.
 /// @prop {List} size [(rem(16px), rem(22px), rem(26px))] - The size used for the badge.
 /// @prop {Number} default-size [2] - The default size used for the badge component (medium).
 /// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
-/// @requires {Map} $default-elevation-badge
+/// @requires $default-elevation-badge
 $light-badge: extend(
     $default-elevation-badge,
     (
@@ -77,10 +77,10 @@ $light-badge: extend(
 );
 
 /// Generates a material badge schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background-color [color: ('primary', 800)] - The background color used for the badge component.
 /// @prop {List} dot-size [(rem(8px), rem(10px), rem(12px))] - The size used for the dot type badge.
-/// @requires {Map} $light-badge
+/// @requires $light-badge
 $material-badge: extend(
     $light-badge,
     (
@@ -106,9 +106,9 @@ $material-badge: extend(
 );
 
 /// Generates a fluent badge schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} dot-size [(rem(6px), rem(10px), rem(12px))] - The size used for the dot type badge.
-/// @requires {Map} $light-badge
+/// @requires $light-badge
 $fluent-badge: extend(
     $light-badge,
     (
@@ -127,12 +127,12 @@ $fluent-badge: extend(
 );
 
 /// Generates a bootstrap badge schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} icon-color [contrast-color: ('primary', 100)] - The icon color used.
 /// @prop {Map} text-color [contrast-color: ('primary', 100)] - The text color used.
 /// @prop {List} border-radius [(rem(2px), rem(4px), rem(4px))] - The border radius used for badge.
 /// @prop {List} dot-size [(rem(6px), rem(10px), rem(14px))] - The size used for the dot type badge.
-/// @requires {Map} $light-badge
+/// @requires $light-badge
 $bootstrap-badge: extend(
     $light-badge,
     (
@@ -173,14 +173,14 @@ $bootstrap-badge: extend(
 );
 
 /// Generates an indigo badge schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} border-color [color: ('gray', 100)] - The border color used for the badge component.
 /// @prop {List} size [(rem(14px), rem(18px), rem(22px))] - The size used for the badge.
 /// @prop {List} dot-size [(rem(6px), rem(8px), rem(10px))] - The size used for the dot type badge.
 /// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 /// @prop {Number} default-size [3] - The default size used for the badge component (large).
-/// @requires {Map} $light-badge
-/// @requires {Map} $indigo-elevation-badge
+/// @requires $light-badge
+/// @requires $indigo-elevation-badge
 $indigo-badge: extend(
     $light-badge,
     $indigo-elevation-badge,

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

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light banner schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
 /// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
 /// @prop {Map} typography [message: (value: 'body-2')] - The typography styles used for the component.
@@ -33,11 +33,11 @@ $light-banner: (
 );
 
 /// Generates a material banner schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
 /// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
-/// @requires {Map} $light-banner
+/// @requires $light-banner
 $material-banner: extend(
     $light-banner,
     (
@@ -69,12 +69,12 @@ $material-banner: extend(
 );
 
 /// Generates a fluent banner schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
 /// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @prop {Map} typography [message: (value: 'caption')] - The typography styles used for the component.
-/// @requires {Map} $light-banner
+/// @requires $light-banner
 $fluent-banner: extend(
     $light-banner,
     (
@@ -112,11 +112,11 @@ $fluent-banner: extend(
 );
 
 /// Generates a bootstrap banner schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
-/// @requires {Map} $light-banner
+/// @requires $light-banner
 $bootstrap-banner: extend(
     $light-banner,
     (
@@ -148,13 +148,13 @@ $bootstrap-banner: extend(
 );
 
 /// Generates an indigo banner schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} banner-background [color: ('gray', 200)] - The color used for the banner background.
 /// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
 /// @prop {Number} border-radius [rem(6px)] - The border radius of the banner
-/// @requires {Map} $light-banner
+/// @requires $light-banner
 $indigo-banner: extend(
     $light-banner,
     (

package/sass/themes/schemas/components/light/_bottom-nav.scss

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light bottom navigation scheme.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [color: ('gray', 50)] - The background color used for the bottom nav.
 /// @prop {Map} icon-color [color: ('gray', 700)] - The icon color used in idle state.
 /// @prop {Map} icon-selected-color [color: ('primary', 500)] - The icon color used for the selected item.
@@ -20,7 +20,7 @@
 /// @prop {Color} border-color [transparent] - The border color of the bottom navigation.
 /// @prop {Map} typography [label: (value: 'caption')] - The typography styles used for the component.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
-/// @requires {Map} $default-elevation-bottom-nav
+/// @requires $default-elevation-bottom-nav
 $light-bottom-nav: extend(
     $default-elevation-bottom-nav,
     (
@@ -81,10 +81,10 @@ $light-bottom-nav: extend(
 );
 
 /// Generates a material bottom navigation schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} icon-selected-color [color: ('primary', 800)] - The icon color used for the selected item.
 /// @prop {Map} label-selected-color [color: ('primary', 800)] - The label color used for the selected item.
-/// @requires {Map} $light-bottom-nav
+/// @requires $light-bottom-nav
 $material-bottom-nav: extend(
     $light-bottom-nav,
     (
@@ -107,10 +107,10 @@ $material-bottom-nav: extend(
 );
 
 /// Generates a fluent bottom navigation schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav.
-/// @requires {Map} $light-bottom-nav
-/// @requires {Map} $fluent-elevation-bottom-nav
+/// @requires $light-bottom-nav
+/// @requires $fluent-elevation-bottom-nav
 $fluent-bottom-nav: extend(
     $light-bottom-nav,
     $fluent-elevation-bottom-nav,
@@ -122,8 +122,8 @@ $fluent-bottom-nav: extend(
 );
 
 /// Generates a bootstrap bottom navigation schema.
-/// @type {Map}
-/// @requires {Map} $light-bottom-nav
+/// @type Map
+/// @requires $light-bottom-nav
 $bootstrap-bottom-nav: extend(
     $light-bottom-nav,
     (
@@ -134,7 +134,7 @@ $bootstrap-bottom-nav: extend(
 );
 
 /// Generates an indigo bottom navigation schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color of the bottom navigation.
 /// @prop {Map} background [color: 'surface'] - The background color used for the bottom nav.
 /// @prop {Map} icon-color [color: ('gray', 600)] - The icon color used in idle state.
@@ -142,8 +142,8 @@ $bootstrap-bottom-nav: extend(
 /// @prop {Map} icon-disabled-color [color: ('gray', 900, .2)] - The disabled color of the icon.
 /// @prop {Map} label-disabled-color [color: ('gray', 900, .2)] - The disabled color of the label.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
-/// @requires {Map} $light-bottom-nav
-/// @requires {Map} $indigo-elevation-bottom-nav
+/// @requires $light-bottom-nav
+/// @requires $indigo-elevation-bottom-nav
 $indigo-bottom-nav: extend(
     $light-bottom-nav,
     $indigo-elevation-bottom-nav,

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light button group schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Color} idle-shadow-color [transparent] - The outline color of button group items.
 /// @prop {Color} selected-shadow-color [transparent] - The outline color of selected button group items.
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The text color for button group items.
@@ -25,7 +25,7 @@
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @prop {Number} default-size [2] - The default size used for the button-group component.
 /// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
-/// @requires {Map} $default-elevation-button-group
+/// @requires $default-elevation-button-group
 $light-button-group: extend(
     $default-elevation-button-group,
     (
@@ -120,7 +120,7 @@ $light-button-group: extend(
 );
 
 /// Generates a material button group schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} item-icon-color [color: ('gray', 700)] - The icon color for button group items.
 /// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 800)] - The hover icon color for button group items.
@@ -145,8 +145,8 @@ $light-button-group: extend(
 /// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @prop {Number} default-size [3] - The default size used for the button-group component.
-/// @requires {Map} $light-button-group
-/// @requires {Map} $default-elevation-button-group
+/// @requires $light-button-group
+/// @requires $default-elevation-button-group
 $material-button-group: extend(
     $light-button-group,
     $default-elevation-button-group,
@@ -320,7 +320,7 @@ $material-button-group: extend(
 );
 
 /// Generates a fluent button group schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} item-text-color [color: ('gray', 900)] - The text color for button group items.
 /// @prop {Map} item-icon-color [color: ('gray', 900)] - The icon color for button group items.
 /// @prop {Map} item-background [contrast-color: ('gray', 900)] - The background color for button group items.
@@ -348,8 +348,8 @@ $material-button-group: extend(
 /// @prop {Map} disabled-selected-border-color [color: ('gray', 600)] - The disabled border color for a selected item from the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
-/// @requires {Map} $light-button-group
-/// @requires {Map} $fluent-elevation-button-group
+/// @requires $light-button-group
+/// @requires $fluent-elevation-button-group
 $fluent-button-group: extend(
     $light-button-group,
     $fluent-elevation-button-group,
@@ -546,7 +546,7 @@ $fluent-button-group: extend(
 );
 
 /// Generates a bootstrap button group schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} idle-shadow-color [color: ('primary', 600, .5)] - The outline color of button group items.
 /// @prop {Map} selected-shadow-color [color: ('primary', 600, .5)] - The outline color of selected button group items.
 /// @prop {Map} item-background [color: ('primary', 500)] - The background color for button group items.
@@ -577,8 +577,8 @@ $fluent-button-group: extend(
 /// @prop {Map} disabled-selected-icon-color [color: ('primary', 200)] - The disabled icon color for a selected item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('primary', 100)] - The disabled border color for a selected item from the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @requires {Map} $light-button-group
-/// @requires {Map} $bootstrap-elevation-button-group
+/// @requires $light-button-group
+/// @requires $bootstrap-elevation-button-group
 $bootstrap-button-group: extend(
     $light-button-group,
     $bootstrap-elevation-button-group,
@@ -797,7 +797,7 @@ $bootstrap-button-group: extend(
 );
 
 /// Generates an indigo light button-group schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} item-icon-color [color: ('gray', 600)] - The icon color for button group items.
 /// @prop {Map} idle-shadow-color [color: ('gray', 900, .15)] - The outline color of button group items.
 /// @prop {Map} selected-shadow-color [color: ('primary', 400, .5)] - The outline color of selected button group items.
@@ -823,8 +823,8 @@ $bootstrap-button-group: extend(
 /// @prop {Map} disabled-selected-icon-color [contrast-color: ('primary', 500, .3)] - The disabled icon color for a selected item in the button group.
 /// @prop {Map} disabled-selected-border-color [color: ('primary', 400, .5)] - The disabled border color for a selected item from the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @requires {Map} $light-button-group
-/// @requires {Map} $indigo-elevation-button-group
+/// @requires $light-button-group
+/// @requires $indigo-elevation-button-group
 $indigo-button-group: extend(
     $light-button-group,
     $indigo-elevation-button-group,