igniteui-theming 25.0.0 → 25.0.2

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light card schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [color: 'surface'] - The card background color.
 /// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
 /// @prop {Map} subtitle-text-color [color: ('gray', 700)] - The text color of the card subtitle.
@@ -20,7 +20,7 @@
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
 /// @prop {Number} default-size [2] - The default size used for the card component.
-/// @requires {Map} $default-elevation-card
+/// @requires $default-elevation-card
 $light-card: extend(
     $default-elevation-card,
     (
@@ -81,19 +81,12 @@ $light-card: extend(
 );
 
 /// Generates a material card schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} subtitle-text-color [color: ('gray', 900)] - The text color of the card subtitle.
 /// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
-/// @prop {Map} typography [
-///   title: (
-///     value: 'h6',
-///     small: (value: 'subtitle-2')
-///   ),
-///   subtitle: (value: 'subtitle-2'),
-///   content: (value: 'body-2')
-/// ] - The typography styles used for the component.
-/// @requires {Map} $light-card
+/// @prop {Map} typography [title: (value: 'h6'), small: (value: 'subtitle-2'), subtitle: (value: 'subtitle-2'), content: (value: 'body-2')] - The typography styles used for the component.
+/// @requires $light-card
 $material-card: extend(
     $light-card,
     (
@@ -142,18 +135,11 @@ $material-card: extend(
 );
 
 /// Generates a fluent card schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
 /// @prop {List} border-radius [(rem(0px), rem(0), rem(24px))] - The border radius used for card.
-/// @prop {Map} typography [
-///   title: (
-///     value: 'subtitle-1',
-///     small: (value: 'subtitle-2')
-///   ),
-///   subtitle: (value: 'body-2'),
-///   content: (value: 'body-2')
-/// ] - The typography styles used for the component.
-/// @requires {Map} $light-card
+/// @prop {Map} typography [title: (value: 'subtitle-1'), small: (value: 'subtitle-2'), subtitle: (value: 'body-2'), content: (value: 'body-2')] - The typography styles used for the component.
+/// @requires $light-card
 $fluent-card: extend(
     $light-card,
     (
@@ -195,17 +181,10 @@ $fluent-card: extend(
 );
 
 /// Generates a bootstrap card schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
-/// @prop {Map} typography [
-///   title: (
-///     value: 'h5',
-///     small: (value: 'subtitle-2')
-///   ),
-///   subtitle: (value: 'body-1'),
-///   content: (value: 'body-1')
-/// ] - The typography styles used for the component.
-/// @requires {Map} $light-card
+/// @prop {Map} typography [title: (value: 'h5'), small: (value: 'subtitle-2'), subtitle: (value: 'body-1'), content: (value: 'body-1')] - The typography styles used for the component.
+/// @requires $light-card
 $bootstrap-card: extend(
     $light-card,
     (
@@ -239,20 +218,13 @@ $bootstrap-card: extend(
 );
 
 /// Generates an indigo card schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [contrast-color: ('gray', 900)] - The card background color.
 /// @prop {Map} header-text-color [color: ('gray', 800)] - The text color of the card title.
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
 /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for card.
-/// @prop {Map} typography [
-///   title: (
-///     value: 'h6',
-///     small: (value: 'body-2')
-///   ),
-///   subtitle: (value: 'body-2'),
-///   content: (value: 'body-2')
-/// ] - The typography styles used for the component.
-/// @requires {Map} $light-card
+/// @prop {Map} typography [title: (value: 'h6'), small: (value: 'body-2'), subtitle: (value: 'body-2'), content: (value: 'body-2')] - The typography styles used for the component.
+/// @requires $light-card
 $indigo-card: extend(
     $light-card,
     (

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light carousel schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} slide-background [contrast-color: ('gray', 900)] - The slide background color.
 /// @prop {Map} button-background [color: ('gray', 50)] - The previous/next buttons idle background color.
 /// @prop {Map} button-hover-background [color: ('gray', 50)] - The previous/next buttons hover background color.
@@ -32,7 +32,7 @@
 /// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 900)] - The active indicator dot color on hover.
 /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @prop {List} border-radius [(rem(36px), rem(0), rem(36px))] - The border radius used for carousel.
-/// @requires {Map} $default-elevation-carousel
+/// @requires $default-elevation-carousel
 $light-carousel: extend(
     $default-elevation-carousel,
     (
@@ -172,9 +172,9 @@ $light-carousel: extend(
 );
 
 /// Generates a material carousel schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} button-focus-arrow-color [color: ('secondary', 600)] - The previous/next buttons focus arrow color.
-/// @requires {Map} $light-carousel
+/// @requires $light-carousel
 $material-carousel: extend(
     $light-carousel,
     (
@@ -192,14 +192,14 @@ $material-carousel: extend(
 );
 
 /// Generates a fluent carousel schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} button-focus-arrow-color [color: ('primary', 600)] - The previous/next buttons focus arrow color.
 /// @prop {Map} button-disabled-background [color: ('gray', 300)] - The previous/next buttons disabled background color.
 /// @prop {Map} button-disabled-arrow-color [color: ('gray' 500)] - The previous/next buttons disabled color.
 /// @prop {Map} indicator-focus-color [color: ('primary', 600)] - The buttons/indicators border color on focus.
 /// @prop {Map} button-focus-border-color [color: ('gray', 700)] - The navigation buttons border color on focus.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for carousel.
-/// @requires {Map} $light-carousel
+/// @requires $light-carousel
 $fluent-carousel: extend(
     $light-carousel,
     (
@@ -253,14 +253,14 @@ $fluent-carousel: extend(
 );
 
 /// Generates a bootstrap carousel schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} button-focus-arrow-color [color: ('gray', 700)] - The previous/next buttons focus arrow color.
 /// @prop {Map} indicator-focus-color [color: ('primary', 600)] - The buttons/indicators border color on focus.
 /// @prop {Map} button-focus-border-color [color: ('primary', 600, .5)] - The navigation buttons border color on focus.
 /// @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
+/// @requires $light-carousel
+/// @requires $bootstrap-elevation-carousel
 $bootstrap-carousel: extend(
     $light-carousel,
     $bootstrap-elevation-carousel,
@@ -302,7 +302,7 @@ $bootstrap-carousel: extend(
 );
 
 /// Generates an indigo carousel schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} button-arrow-color [color: ('gray', 600)] - The previous/next buttons idle arrow color.
 /// @prop {Map} button-hover-background [color: ('gray', 200)] - The previous/next buttons hover background color.
 /// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
@@ -320,8 +320,8 @@ $bootstrap-carousel: extend(
 /// @prop {Map} indicator-focus-color [color: ('primary', 400, .5)] - The indicators border and dot color on focus.
 /// @prop {Map} button-focus-border-color [color: ('primary', 500)] - The navigation buttons border color on focus.
 /// @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
+/// @requires $light-carousel
+/// @requires $indigo-elevation-carousel
 $indigo-carousel: extend(
     $light-carousel,
     $indigo-elevation-carousel,

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

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light chat component schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [color: ('surface', 500)] - The background color of the chat component.
 /// @prop {Map} header-background [color: ('surface', 500)] - The background color of the chat header.
 /// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header.
@@ -135,8 +135,8 @@ $light-chat: (
 );
 
 /// Generates a light material chat schema.
-/// @type {Map}
-/// @requires {Map} $light-chat
+/// @type Map
+/// @requires $light-chat
 $material-chat: extend(
     $light-chat,
     (
@@ -147,11 +147,11 @@ $material-chat: extend(
 );
 
 /// Generates a light fluent chat schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
 /// @prop {Map} header-color [color: ('gray', 900)] - The text color of the chat header.
 /// @prop {Map} message-actions-color [color: ('primary', 500)] - The icon color of the chat message actions.
-/// @requires {Map} $light-chat
+/// @requires $light-chat
 $fluent-chat: extend(
     $light-chat,
     (
@@ -180,11 +180,11 @@ $fluent-chat: extend(
 );
 
 /// Generates a light bootstrap chat schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
 /// @prop {Map} header-border [color: ('gray', 300)] - The color used for the chat header border.
 /// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
-/// @requires {Map} $light-chat
+/// @requires $light-chat
 $bootstrap-chat: extend(
     $light-chat,
     (
@@ -213,7 +213,7 @@ $bootstrap-chat: extend(
 );
 
 /// Generates a light indigo chat schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} header-color [color: ('gray', 800)] - The text color of the chat header.
 /// @prop {Map} header-border [color: ('primary', 500)] - The color used for the chat header border.
 /// @prop {Map} file-background [color: ('gray', 100)] - The background color of the image message container.
@@ -221,7 +221,7 @@ $bootstrap-chat: extend(
 /// @prop {Map} progress-indicator-color [color: ('info', 500)] - The color of the progress indicator in the chat component.
 /// @prop {Map} image-attachment-icon [color: ('info', 500)] - The color of the message attachment icon.
 /// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
-/// @requires {Map} $light-chat
+/// @requires $light-chat
 $indigo-chat: extend(
     $light-chat,
     (

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

@@ -10,7 +10,7 @@
 // stylelint-disable max-line-length
 
 /// Generates a light checkbox schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
 /// @prop {Number} tick-width [3] - The checked mark width.
 /// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
@@ -112,7 +112,7 @@ $light-checkbox: (
 );
 
 /// Generates a material checkbox schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
 /// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
 /// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
@@ -123,7 +123,7 @@ $light-checkbox: (
 /// @prop {Map} error-color [color: ('error', 800)] - The border and fill colors in invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 800)] - The border and fill colors in invalid state on hover.
 /// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
-/// @requires {Map} $light-checkbox
+/// @requires $light-checkbox
 $material-checkbox: extend(
     $light-checkbox,
     (
@@ -198,7 +198,7 @@ $material-checkbox: extend(
 );
 
 /// Generates a fluent checkbox schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
 /// @prop {Number} tick-width [1.5] - The checked mark width.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
@@ -208,7 +208,7 @@ $material-checkbox: extend(
 /// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
-/// @requires {Map} $light-checkbox
+/// @requires $light-checkbox
 $fluent-checkbox: extend(
     $light-checkbox,
     (
@@ -269,7 +269,7 @@ $fluent-checkbox: extend(
 );
 
 /// Generates a bootstrap checkbox schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} tick-color [contrast-color: ('primary', 900)] - The checked mark color.
 /// @prop {Map} tick-color-hover [contrast-color: ('primary', 900)] - The checked mark color on hover.
 /// @prop {Map} empty-color [color: ('gray', 400)] - The unchecked border color.
@@ -286,7 +286,7 @@ $fluent-checkbox: extend(
 /// @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.
 /// @prop {Map} typography [label: (value: 'body-1')] - The typography styles used for the component.
-/// @requires {Map} $light-checkbox
+/// @requires $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
     (
@@ -396,7 +396,7 @@ $bootstrap-checkbox: extend(
 );
 
 /// Generates an indigo checkbox schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Color} tick-color [contrast-color: ('primary', 500)] - The checked mark color.
 /// @prop {Color} tick-color-hover [contrast-color: ('primary', 500)] - The checked mark color on hover.
 /// @prop {Map} label-color [color: ('gray', 800)]- The text color used for the label text.
@@ -414,7 +414,7 @@ $bootstrap-checkbox: extend(
 /// @prop {Map} error-color-hover [color: ('error', 400)] - The focus outlined color in invalid state.
 /// @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
+/// @requires $light-checkbox
 $indigo-checkbox: extend(
     $light-checkbox,
     (

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light chip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for chip.
 /// @prop {Map} background [color: ('gray', 200)] - The chip background color.
 /// @prop {Color} border-color [transparent] - The chip border color.
@@ -20,8 +20,8 @@
 /// @prop {Color} hover-border-color [transparent] - The chip hover border color.
 /// @prop {Map} selected-text-color [contrast-color: ('gray', 300)] - The selected chip text color.
 /// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
-/// @prop {Color} selected-border-color [transparent] The selected chip border color.
-/// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] The focused chip text color.
+/// @prop {Color} selected-border-color [transparent] - The selected chip border color.
+/// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] - The focused chip text color.
 /// @prop {Color} focus-border-color [transparent] - The chip focus border color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 400)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
@@ -30,13 +30,13 @@
 /// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
 /// @prop {Color} remove-icon-color-focus ["'currentColor'"] - The remove icon color on focus for the chip.
-/// @prop {Map} $disabled-text-color [color: ('gray', 500)] - The disabled chip text color.
-/// @prop {Map} $disabled-background [color: ('gray', 200)] - The disabled chip background color.
-/// @prop {Map} $disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
+/// @prop {Map} disabled-text-color [color: ('gray', 500)] - The disabled chip text color.
+/// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled chip background color.
+/// @prop {Map} disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
 /// @prop {List} size [(rem(20px), rem(24px), rem(32px))] - The size used for the chip height.
 /// @prop {Number} default-size [2] - The default size used for the chip component.
 /// @prop {Map} typography [text: (value: 'body-2')] - The typography styles used for the component.
-/// @prop {Map} $default-elevation-chip
+/// @requires $default-elevation-chip
 $light-chip: extend(
     $default-elevation-chip,
     (
@@ -183,15 +183,15 @@ $light-chip: extend(
 );
 
 /// Generates a material chip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
 /// @prop {Map} background [color: ('gray', 300)] - The chip background color.
-/// @prop {Map} focus-background [color: ('gray', 500)] The focused chip background color.
+/// @prop {Map} focus-background [color: ('gray', 500)] - The focused chip background color.
 /// @prop {Map} selected-background [color: ('gray', 300)] - The selected chip background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 500)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('gray', 500)] - The selected chip focus background color.
-/// @requires {Map} $light-chip
-/// @requires {Map} $default-elevation-chip
+/// @requires $light-chip
+/// @requires $default-elevation-chip
 $material-chip: extend(
     $light-chip,
     $default-elevation-chip,
@@ -245,23 +245,23 @@ $material-chip: extend(
 );
 
 /// Generates a fluent chip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} ghost-background [color: ('primary', 500)] - The chip ghost background color.
 /// @prop {Map} ghost-text-color [contrast-color: ('primary', 500)] - The chip ghost text color.
 /// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 200)] - The chip text hover color.
 /// @prop {Map} selected-text-color [contrast-color: ('primary', 700))] - The selected chip text color.
-/// @prop {Map} focus-background [color: ('primary', 600)] The focused chip background color.
-/// @prop {Map} focus-text-color [contrast-color: ('primary', 700)] The focused chip text color.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focused chip background color.
+/// @prop {Map} focus-text-color [contrast-color: ('primary', 700)] - The focused chip text color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 700)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('primary', 600)] - The selected chip hover background color.
 /// @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 {Map} typography [text: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @requires {Map} $light-chip
-/// @requires {Map} $fluent-elevation-chip
+/// @requires $light-chip
+/// @requires $fluent-elevation-chip
 $fluent-chip: extend(
     $light-chip,
     $fluent-elevation-chip,
@@ -363,20 +363,20 @@ $fluent-chip: extend(
 );
 
 /// Generates a bootstrap chip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} text-color [contrast-color: ('gray', 200)] - The chip text color.
 /// @prop {Map} selected-background [color: ('gray', 200)] - The selected chip background color.
 /// @prop {Map} selected-text-color [contrast-color: ('gray', 200)] - The selected chip text color.
-/// @prop {Map} focus-text-color [contrast-color: ('gray', 200)] The focused chip text color.
-/// @prop {Map} focus-background [color: ('gray', 200)] The focused chip background color.
+/// @prop {Map} focus-text-color [contrast-color: ('gray', 200)] - The focused chip text color.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The focused chip background color.
 /// @prop {Map} focus-selected-background [color: ('gray', 200)] - The selected chip focus background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 200)] - 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 {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for chip.
 /// @prop {Map} focus-outline-color [color: ('gray', 500, 0.38)] - The chip focus outline color.
 /// @prop {Map} focus-selected-outline-color [color: ('gray', 500, 0.38)] - The selected chip focus outline color.
-/// @requires {Map} $light-chip
-/// @requires {Map} $bootstrap-elevation-chip
+/// @requires $light-chip
+/// @requires $bootstrap-elevation-chip
 $bootstrap-chip: extend(
     $light-chip,
     $bootstrap-elevation-chip,
@@ -461,16 +461,16 @@ $bootstrap-chip: extend(
 );
 
 /// Generates an indigo chip schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} size [(rem(20px), rem(24px), rem(28px))] - The size used for the chip height.
 /// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} hover-text-color [color: ('gray', 900)] - The chip text hover color.
-/// @prop {Map} focus-text-color [color: ('gray', 700)] The focused chip text color.
+/// @prop {Map} focus-text-color [color: ('gray', 700)] - The focused chip text color.
 ///
 /// @prop {Map} background [color: ('gray', 50)] - The chip background color.
 /// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
-/// @prop {Map} focus-background [color: ('gray', 50)] The focused chip background color.
+/// @prop {Map} focus-background [color: ('gray', 50)] - The focused chip background color.
 ///
 /// @prop {Map} border-color [color: ('gray', 400)] - The chip border color.
 /// @prop {Map} hover-border-color [color: ('gray', 500)] - The chip hover border color.
@@ -483,7 +483,7 @@ $bootstrap-chip: extend(
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 900)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
 ///
-/// @prop {Map} selected-border-color [color: ('primary', 500)] The selected chip border color.
+/// @prop {Map} selected-border-color [color: ('primary', 500)] - The selected chip border color.
 /// @prop {Map} hover-selected-border-color [color: ('primary', 400)] - The selected chip hover border color.
 /// @prop {Map} focus-selected-border-color [color: ('primary', 500)] - The selected chip focus border color.
 /// @prop {Map} focus-selected-outline-color [color: ('primary', 400, .5)] - The selected chip focus outline color.
@@ -494,8 +494,8 @@ $bootstrap-chip: extend(
 /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The disabled chip text color.
 /// @prop {Map} disabled-background [contrast-color: ('gray', 900)] - The disabled chip background color.
 /// @prop {Map} disabled-border-color [ color: ('gray', 300)] - The disabled chip border color.
-/// @requires {Map} $light-chip
-/// @requires {Map} $indigo-elevation-chip
+/// @requires $light-chip
+/// @requires $indigo-elevation-chip
 $indigo-chip: extend(
     $light-chip,
     $indigo-elevation-chip,

package/sass/themes/schemas/components/light/_column-actions.scss

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light column actions schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} title-color [color: ('primary', 500)]- The text color used for the title of the list.
 /// @prop {Map} background-color [color: ('surface')] - The background color of the panel.
 /// @prop {Map} typography [title: (value: 'subtitle-1')] - The typography styles used for the component.
@@ -39,8 +39,8 @@ $light-column-actions: (
 );
 
 /// Generates a material column actions schema.
-/// @type {Map}
-/// @requires {map} $light-column-actions
+/// @type Map
+/// @requires $light-column-actions
 $material-column-actions: extend(
     $light-column-actions,
     (
@@ -51,8 +51,8 @@ $material-column-actions: extend(
 );
 
 /// Generates a fluent column actions schema.
-/// @type {Map}
-/// @requires {map} $light-column-actions
+/// @type Map
+/// @requires $light-column-actions
 $fluent-column-actions: extend(
     $light-column-actions,
     (
@@ -63,8 +63,8 @@ $fluent-column-actions: extend(
 );
 
 /// Generates a bootstrap column actions schema.
-/// @type {Map}
-/// @requires {map} $light-column-actions
+/// @type Map
+/// @requires $light-column-actions
 $bootstrap-column-actions: extend(
     $light-column-actions,
     (
@@ -75,8 +75,8 @@ $bootstrap-column-actions: extend(
 );
 
 /// Generates an indigo column actions schema.
-/// @type {Map}
-/// @requires {map} $light-column-actions
+/// @type Map
+/// @requires $light-column-actions
 $indigo-column-actions: extend(
     $light-column-actions,
     (

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

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a light combo schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} empty-list-background [color: 'surface'] - The combo list background color.
 /// @prop {Color} search-separator-border-color [transparent] - The combo search box separator color.
 /// @prop {Map} empty-list-placeholder-color [color: ('gray', 700)] - The combo placeholder text color.
@@ -20,7 +20,7 @@
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The combo toggle button foreground color when the combo is disabled.
-/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The combo toggle button background color when the combo is focused in border and line variants.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] - The combo toggle button background color when the combo is focused in border and line variants.
 /// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
 /// @prop {Map} clear-button-foreground [color: ('gray', 900)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 900)] - The combo clear button foreground color when the combo is focused.
@@ -119,10 +119,10 @@ $light-combo: (
 );
 
 /// Generates a material combo schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 400)] - The combo toggle button background color when the combo is focused.
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
-/// @requires {Map} $light-combo
+/// @requires $light-combo
 $material-combo: extend(
     $light-combo,
     (
@@ -140,7 +140,7 @@ $material-combo: extend(
 );
 
 /// Generates a fluent combo schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} toggle-button-background [color: ('gray', 100)] - The combo toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The combo toggle button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 700)] - The combo toggle clear foreground color.
@@ -150,7 +150,7 @@ $material-combo: extend(
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
-/// @requires {Map} $light-combo
+/// @requires $light-combo
 $fluent-combo: extend(
     $light-combo,
     (
@@ -215,7 +215,7 @@ $fluent-combo: extend(
 );
 
 /// Generates a bootstrap combo schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The combo toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
@@ -226,7 +226,7 @@ $fluent-combo: extend(
 /// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
-/// @requires {Map} $light-combo
+/// @requires $light-combo
 $bootstrap-combo: extend(
     $light-combo,
     (
@@ -296,7 +296,7 @@ $bootstrap-combo: extend(
 );
 
 /// Generates an indigo combo schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} empty-list-placeholder-color [color: ('gray', 600)] - The combo placeholder text color.
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 600)] - The combo toggle clear foreground color.
@@ -306,10 +306,10 @@ $bootstrap-combo: extend(
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-background [color: transparent] - The combo toggle button background color.
 /// @prop {Map} toggle-button-background-focus [transparent] - The combo toggle button background color when the combo is focused.
-/// @prop {Map} toggle-button-background-focus--border [transparent] The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-background-focus--border [transparent] - The combo toggle button background color when the combo is focused.
 /// @prop {Color} toggle-button-background-disabled [transparent] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 900, .2)] - The combo toggle button foreground color when the combo is disabled.
-/// @requires {Map} $light-combo
+/// @requires $light-combo
 $indigo-combo: extend(
     $light-combo,
     (