igniteui-theming 1.1.2 → 1.1.4

package/sass/themes/_mixins.scss

@@ -39,6 +39,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Add theme colors as CSS variables to a given scope.
 /// @access public
+/// @group themes
 /// @param {map} $theme - The component theme to be used.
 /// @param {map} $scope [null] - The CSS variables scope to be used. (optional)
 /// @requires {mixin} css-vars-from-theme
@@ -74,6 +75,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Truncates text to a specific number of lines.
 /// @access public
+/// @group utilities
 /// @param {number|string} $lines - The number of lines to show
 /// @param {Boolean} $inline - Sets whether an element displays inline-box or box
 /// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically
@@ -88,6 +90,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Applies text-overflow ellipsis to e text element.
 /// This won't work on display flex elements.
+/// @group utilities
 /// @access public
 @mixin ellipsis() {
     white-space: nowrap;
@@ -96,6 +99,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 }
 
 /// Hides the element from the DOM.
+/// @group utilities
 /// @access public
 /// @example scss - Sample usage
 ///   input[type="checkbox"] {
@@ -115,6 +119,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 }
 
 /// Adds the required CSS properties so that the scope can react to size changes.
+/// @group themes
 /// @access public
 @mixin sizable() {
     --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);

package/sass/themes/charts/_category-chart-theme.scss

@@ -68,7 +68,7 @@
 /// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
 /// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_data-chart-theme.scss

@@ -26,7 +26,7 @@
 /// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area.
 /// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
 /// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_doughnut-chart-theme.scss

@@ -21,7 +21,7 @@
 /// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice.
 /// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice.
 /// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_financial-chart-theme.scss

@@ -72,7 +72,7 @@
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 /// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
 /// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_funnel-chart-theme.scss

@@ -23,7 +23,7 @@
 /// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
 /// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
 ///
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_gauge-theme.scss

@@ -35,7 +35,7 @@
 /// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
 /// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -43,7 +43,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
 @function linear-gauge-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $rest...
 ) {
@@ -76,7 +76,7 @@
     );
 }
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {Map} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).
 /// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).
@@ -95,7 +95,7 @@
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
 /// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.
 /// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -103,7 +103,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
 @function radial-gauge-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $rest...
 ) {

package/sass/themes/charts/_geo-map-theme.scss

@@ -12,10 +12,10 @@
 /// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -23,7 +23,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-map-theme);
 @function geo-map-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $plot-area-background: null
 ) {

package/sass/themes/charts/_graph-theme.scss

@@ -12,7 +12,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.
 /// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.
@@ -34,7 +34,7 @@
 /// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
 /// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
 /// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -42,7 +42,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-chart-theme);
 @function bullet-graph-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
 
     $backing-brush: null,

package/sass/themes/charts/_pie-chart-theme.scss

@@ -24,7 +24,7 @@
 /// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
 /// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
 /// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_shape-chart-theme.scss

@@ -54,7 +54,7 @@
 /// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
 /// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis.
 /// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_sparkline-theme.scss

@@ -11,7 +11,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 ///
 /// @param {Color} $brush [null] - Sets the sparkline brush.
@@ -34,7 +34,7 @@
 /// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
 /// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
 /// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -42,7 +42,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-sparkline-theme);
 @function sparkline-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
 
     $brush: null,

package/sass/themes/schemas/charts/dark/_category-chart.scss

@@ -10,24 +10,19 @@
 /// Generates a dark category-chart schema based on a mix of $material-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $material-category-chart
-/// @requires $base-dark-category-chart
-/// @see $default-palette
 $dark-material-category-chart: $material-category-chart;
 
 /// Generates a dark fluent category-chart schema based on a mix of $fluent-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $fluent-category-chart
-/// @requires $base-dark-category-chart
 $dark-fluent-category-chart: $fluent-category-chart;
 
 /// Generates a bootstrap category-chart schema based on a mix of $bootstrap-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $bootstrap-category-chart
-/// @requires $base-dark-category-chart
 $dark-bootstrap-category-chart: $bootstrap-category-chart;
 
 /// Generates an indigo category-chart schema based on a mix of $indigo-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $indigo-category-chart
-/// @requires $base-dark-category-chart
 $dark-indigo-category-chart: $indigo-category-chart;

package/sass/themes/schemas/charts/dark/_doughnut-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark doughnut chart schema.
 /// @type {Map}
 /// @requires {function} extend
-/// @see $default-palette
 $dark-material-doughnut-chart: $material-doughnut-chart;
 
 /// Generates a dark fluent doughnut-chart schema.

package/sass/themes/schemas/charts/dark/_financial-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark financial chart schema.
 /// @type {Map}
 /// @requires $material-financial-chart
-/// @see $default-palette
 $dark-material-financial-chart: $material-financial-chart;
 
 /// Generates a dark fluent financial-chart schema.

package/sass/themes/schemas/charts/dark/_funnel-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark funnel chart schema.
 /// @type {Map}
 /// @requires $material-funnel-chart
-/// @see $default-palette
 $dark-material-funnel-chart: $material-funnel-chart;
 
 /// Generates a dark fluent funnel-chart schema.
@@ -24,5 +23,5 @@ $dark-bootstrap-funnel-chart: $bootstrap-funnel-chart;
 
 /// Generates a dark indigo funnel-chart schema.
 /// @type {Map}
-/// @requires $ndigo-funnel-chart
+/// @requires $indigo-funnel-chart
 $dark-indigo-funnel-chart: $indigo-funnel-chart;

package/sass/themes/schemas/charts/dark/_index.scss

@@ -10,6 +10,14 @@
 @use './shape-chart' as *;
 @use './sparkline' as *;
 
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates the global charts dark material schema.
+/// @type {Map}
 $dark-material-schema: (
     category-chart: $dark-material-category-chart,
     data-chart: $dark-material-data-chart,
@@ -24,6 +32,9 @@ $dark-material-schema: (
     shape-chart: $dark-material-shape-chart,
     sparkline: $dark-material-sparkline,
 );
+
+/// Generates the global charts dark bootstrap schema.
+/// @type {Map}
 $dark-bootstrap-schema: (
     category-chart: $dark-bootstrap-category-chart,
     data-chart: $dark-bootstrap-data-chart,
@@ -38,6 +49,9 @@ $dark-bootstrap-schema: (
     shape-chart: $dark-bootstrap-shape-chart,
     sparkline: $dark-bootstrap-sparkline,
 );
+
+/// Generates the global charts dark fluent schema.
+/// @type {Map}
 $dark-fluent-schema: (
     category-chart: $dark-fluent-category-chart,
     data-chart: $dark-fluent-data-chart,
@@ -52,6 +66,9 @@ $dark-fluent-schema: (
     shape-chart: $dark-fluent-shape-chart,
     sparkline: $dark-fluent-sparkline,
 );
+
+/// Generates the global charts dark indigo schema.
+/// @type {Map}
 $dark-indigo-schema: (
     category-chart: $dark-indigo-category-chart,
     data-chart: $dark-indigo-data-chart,

package/sass/themes/schemas/charts/dark/_shape-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark shape chart schema.
 /// @type {Map}
 /// @requires $material-shape-chart
-/// @see $default-palette
 $dark-material-shape-chart: $material-shape-chart;
 
 /// Generates a dark fluent shape-chart schema.

package/sass/themes/schemas/charts/dark/_sparkline.scss

@@ -9,7 +9,6 @@
 /// Generates a dark sparkline schema.
 /// @type {Map}
 /// @requires $material-sparkline
-/// @see $default-palette
 $dark-material-sparkline: $material-sparkline;
 
 /// Generates a dark fluent sparkline schema.

package/sass/themes/schemas/charts/light/_category-chart.scss

@@ -61,7 +61,6 @@
 /// @property {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
 /// @property {Color} y-axis-tick-stroke [color: ('gray', 500)] - Sets the color to apply to tickmarks along the Y-axis.
 /// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
-/// @see $default-palette
 $material-category-chart: (
     'margin': (
         expand-shorthand: (null)

package/sass/themes/schemas/charts/light/_data-chart.scss

@@ -19,7 +19,6 @@
 /// @property {Color} plot-area-background [color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area.
 /// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title.
 /// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle.
-/// @see $default-palette
 $material-data-chart: (
     'margin': null,
     'title-text-color': (

package/sass/themes/schemas/charts/light/_doughnut-chart.scss

@@ -17,7 +17,6 @@
 /// @property {Number} selected-slice-opacity [null] - Sets the opacity of the selected slice.
 /// @property {Color} selected-slice-stroke [null] - Sets the stroke color of the selected slice.
 /// @property {Number} selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
-/// @see $default-palette
 $material-doughnut-chart: (
     'brushes': series,
     'outlines': series,

package/sass/themes/schemas/charts/light/_financial-chart.scss

@@ -65,7 +65,6 @@
 /// @prop {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 /// @prop {String} zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
 /// @prop {Number} zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
-/// @see $default-palette
 $material-financial-chart: (
     'margin': null,
     'title-alignment': null,

package/sass/themes/schemas/charts/light/_funnel-chart.scss

@@ -16,7 +16,6 @@
 /// @property {Number} outline-thickness [null] - Sets the thickness of outline around slices.
 /// @property {Color} text-color [null] - Sets the Color used for the inner labels.
 /// @property {String} text-style [null] - Sets the text style for inner labels.
-/// @see $default-palette
 $material-funnel-chart: (
     'brushes': series,
     'outlines': series,

package/sass/themes/schemas/charts/light/_gauge.scss

@@ -23,7 +23,6 @@
 /// @property {Color} scale-brush [(color: 'surface', darken: 8%)] - Sets the color to use to fill the scale of the linear gauge.
 /// @property {Color} tick-brush [(color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks.
 /// @property {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
-/// @see $default-palette
 $material-gauge: (
     'backing-brush': (
         color: 'surface',

package/sass/themes/schemas/charts/light/_geo-map.scss

@@ -9,7 +9,6 @@
 /// Generates a material geo map schema.
 /// @type {Map}
 /// @prop {String} plot-area-background [null] - Gets or sets the brush used as the background for the current Map object's plot area.
-/// @see $default-palette
 $material-geo-map: (
     'plot-area-background': (
         color: 'surface'

package/sass/themes/schemas/charts/light/_graph.scss

@@ -28,7 +28,6 @@
 /// @prop {Color} value-brush [(color: ('gray', 800))] - Sets the brush to use for the actual value element.
 /// @prop {Color} value-outline [null] - Sets the brush to use for the outline of actual value element.
 /// @prop {Number} value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
-/// @see $default-palette
 $material-graph: (
     'backing-brush': (
         color: 'surface',

package/sass/themes/schemas/charts/light/_index.scss

@@ -10,6 +10,14 @@
 @use './shape-chart' as *;
 @use './sparkline' as *;
 
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates the global charts light material schema.
+/// @type {Map}
 $light-material-schema: (
     category-chart: $material-category-chart,
     data-chart: $material-data-chart,
@@ -24,6 +32,9 @@ $light-material-schema: (
     shape-chart: $material-shape-chart,
     sparkline: $material-sparkline,
 );
+
+/// Generates the global charts light bootstrap schema.
+/// @type {Map}
 $light-bootstrap-schema: (
     category-chart: $bootstrap-category-chart,
     data-chart: $bootstrap-data-chart,
@@ -38,6 +49,9 @@ $light-bootstrap-schema: (
     shape-chart: $bootstrap-shape-chart,
     sparkline: $bootstrap-sparkline,
 );
+
+/// Generates the global charts light fluent schema.
+/// @type {Map}
 $light-fluent-schema: (
     category-chart: $fluent-category-chart,
     data-chart: $fluent-data-chart,
@@ -52,6 +66,9 @@ $light-fluent-schema: (
     shape-chart: $fluent-shape-chart,
     sparkline: $fluent-sparkline,
 );
+
+/// Generates the global charts light indigo schema.
+/// @type {Map}
 $light-indigo-schema: (
     category-chart: $indigo-category-chart,
     data-chart: $indigo-data-chart,

package/sass/themes/schemas/charts/light/_shape-chart.scss

@@ -48,7 +48,6 @@
 /// @property {String} y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
 /// @property {Color} y-axis-title-color [null] - Sets color of title on the Y-axis.
 /// @property {List} y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
-/// @see $default-palette
 $material-shape-chart: (
     'margin': null,
     'title-alignment': null,

package/sass/themes/schemas/charts/light/_sparkline.scss

@@ -26,7 +26,6 @@
 /// @prop {Color} horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
 /// @prop {Color} vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
 /// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline.
-/// @see $default-palette
 $material-sparkline: (
     'brush': (
         color: ('primary', 500)

package/sass/typography/_types.scss

@@ -4,6 +4,7 @@
 
 /// A list consisting of 13 different category type styles
 /// @type List
+/// @access private
 $ITypeScale: (
     h1,
     h2,
@@ -22,6 +23,7 @@ $ITypeScale: (
 
 /// A set of style rules for all categories
 /// @type Map
+/// @access private
 $ITypeStyle: (
     font-family: var(--ig-font-family),
     font-size: null,
@@ -36,6 +38,7 @@ $ITypeStyle: (
 
 /// A list of all category type styles that can be maped to native elements
 /// @type Map
+/// @access private
 $IElementCategories: (
     h1: 'h1',
     h2: 'h2',

package/sass/typography/charts/_index.scss

@@ -7,6 +7,11 @@
 @use '../../themes/charts/pie-chart-theme' as *;
 @use '../../themes/charts/shape-chart-theme' as *;
 
+/// Includes all chart related typography styles for a given type-scale and target.
+/// @group typography
+/// @param {Map} $type-scale - The type-scale to be used when including typography styles.
+/// @param {String} $target ['angular'] - The target platform. Could be 'angular', 'webc', or 'blazor'.
+/// @access public
 @mixin charts-typography($type-scale, $target: 'angular') {
     @include category-chart-typography($type-scale: $type-scale, $target: $target);
     @include data-chart-typography($type-scale: $type-scale, $target: $target);

package/sass/utils/_css.scss

@@ -3,6 +3,7 @@
 
 /// Expands the provided list of values in all four directions.
 /// Works similar to how to browser expands shorthands for margins.
+/// @access private
 /// @param {List} $list - The of values to be expanded. Supports up to four values.
 /// @param {string} $prop [margin] - The name of the property.
 /// @returns {Map} - Returns an expanded list of values.

package/sass/utils/_map.scss

@@ -23,6 +23,7 @@
 }
 
 /// Extends a Map with the values of another Map, disregarding null values in the process.
+/// @group utilities
 /// @access public
 /// @param {Map...} $maps - The maps to get extended.
 /// @requires {function} clean
@@ -38,6 +39,7 @@
 }
 
 /// Prefixes the keys in a map with the specified prefix and separator.
+/// @access private
 /// @param {Map} $map - The target map.
 /// @param {String} $prefix - The string used to prefix all keys in the map.
 /// @param {String} $separator [-] - The string used as a separator between the prefix and the key.

package/sass/utils/_math.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 
 /// Rounds a number to a certain precision
+/// @group utilities
 /// @access public
 /// @param {Number} $number - The number to be rounded
 /// @param {Number} $precision [2] - Specifies the number of the digits after the decimal separator

package/sass/utils/_string.scss

@@ -4,6 +4,8 @@
 @use 'sass:meta';
 
 /// Splits a string into a list by a given separator.
+/// @access public
+/// @group utilities
 /// @param {String} $string - The string to split.
 /// @param {String} $separator - The string separator to split the string by.
 @function split($string, $separator) {
@@ -23,6 +25,8 @@
 }
 
 /// Returns a new string with one, some, or all matches of a string replaced by a replacement.
+/// @access public
+/// @group utilities
 /// @param {String} $string - The target string.
 /// @param {String} $search - The term to search form.
 /// @param {String} $replace - The string to replace the search term with.
@@ -41,6 +45,8 @@
 }
 
 /// Converts a string to a number.
+/// @access private
+/// @group utilities
 /// @param {String} $value - The target string.
 @function to-number($value) {
     @if meta.type-of($value) == 'number' {