@progress/kendo-theme-core 14.2.0-dev.0 → 14.2.0-dev.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "14.2.0-dev.0",
+  "version": "14.2.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,6 +45,5 @@
   },
   "directories": {
     "doc": "docs"
-  },
-  "gitHead": "2bc240b1c4ee65e6dc269fe4586ed2cabc5ba318"
+  }
 }

package/scss/border-radii/index.scss

@@ -52,6 +52,10 @@ $kendo-border-radii: $default-border-radii !default;
 $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
 
 
+/// Returns a CSS variable reference for a border-radius token.
+/// @param {String} $key - The border-radius key from $kendo-border-radii.
+/// @return {String} CSS variable reference for the given border-radius token.
+/// @group functions
 @function k-border-radius($key) {
     @return var(--kendo-border-radius-#{$key});
 }

package/scss/color-system/_functions.scss

@@ -90,7 +90,7 @@
 /// @param {String} $theme - The theme the colors will be generated for
 /// @return {Map} - A map with the generated keys and values
 ///
-/// @group color-system
+/// @group functions
 @function k-generate-color-variations( $name, $color, $theme: null ) {
     $result: ();
 
@@ -212,7 +212,7 @@
 /// @param {String} $key - The name of a color/key in the $kendo-colors map
 /// @return {String} - CSS variable with the actual color as a fallback
 ///
-/// @group color-system
+/// @group functions
 @function k-color($key) {
     @return var(--kendo-color-#{$key});
 }

package/scss/components/grid/_layout.scss

@@ -413,8 +413,8 @@
         }
 
         // Highlighted state
-        .k-table-td.k-highlighted,
-        .k-table-row.k-highlighted > .k-table-td {
+        .k-table-td.k-highlighted:not(.k-group-cell),
+        .k-table-row.k-highlighted > .k-table-td:not(.k-group-cell) {
             font-weight: $kendo-grid-highlighted-font-weight;
         }
 

package/scss/components/grid/_theme.scss

@@ -59,23 +59,23 @@
         }
 
         // Selected state
-        .k-table-td.k-selected,
-        .k-table-row.k-selected > .k-table-td {
+        .k-table-td.k-selected:not(.k-group-cell),
+        .k-table-row.k-selected > .k-table-td:not(.k-group-cell) {
             background-color: $kendo-grid-selected-bg;
             color: $kendo-grid-selected-text;
         }
 
         // Highlighted state
-        .k-table-td.k-highlighted,
-        .k-table-row.k-highlighted > .k-table-td {
+        .k-table-td.k-highlighted:not(.k-group-cell),
+        .k-table-row.k-highlighted > .k-table-td:not(.k-group-cell) {
             background-color: $kendo-grid-highlighted-bg;
         }
 
         // Highlighted Selected state
-        .k-table-td.k-highlighted.k-selected,
-        .k-table-row.k-highlighted.k-selected > .k-table-td,
-        .k-table-row.k-highlighted > .k-table-td.k-selected,
-        .k-table-row.k-selected > .k-table-td.k-highlighted {
+        .k-table-td.k-highlighted.k-selected:not(.k-group-cell, .k-grid-content-sticky),
+        .k-table-row.k-highlighted.k-selected > .k-table-td:not(.k-group-cell, .k-grid-content-sticky),
+        .k-table-row.k-highlighted > .k-table-td.k-selected:not(.k-group-cell, .k-grid-content-sticky),
+        .k-table-row.k-selected > .k-table-td.k-highlighted:not(.k-group-cell, .k-grid-content-sticky) {
             background-color: $kendo-grid-selected-highlighted-bg;
         }
 

package/scss/components/list/_layout.scss

@@ -68,6 +68,7 @@
             $_group-label-line-height: map.get( $size-props, item-group-label-line-height );
             $_filter-padding-x: map.get( $size-props, filter-padding-x );
             $_filter-padding-y: map.get( $size-props, filter-padding-y );
+            $_sticky-header-padding-y: map.get( $size-props, sticky-header-padding-y );
 
             #{k-when-default($kendo-list-default-size, $size)}
             &.k-list-#{$size} {
@@ -82,6 +83,22 @@
                     line-height: $_header-line-height;
                 }
 
+                // Sticky header
+                .k-list-sticky-header {
+                    padding-block-end: $_sticky-header-padding-y;
+                }
+
+                .k-list-sticky-header + .k-list-content {
+                    padding-block-start: $_sticky-header-padding-y;
+                }
+
+                .k-list-sticky-header-item {
+                    padding-block: $_item-padding-y;
+                    padding-inline: $_item-padding-x;
+                    font-size: $_item-font-size;
+                    line-height: $_item-line-height;
+                }
+
                 .k-list-filter {
                     padding-inline: $_filter-padding-x;
                     padding-block: $_filter-padding-y;
@@ -155,6 +172,19 @@
         cursor: pointer;
     }
 
+    .k-list-sticky-header:has(+ .k-list-group-sticky-header) {
+        border-block-end: 1px solid;
+    }
+
+    .k-list-sticky-header-item {
+        border-radius: $kendo-list-item-border-radius;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: $kendo-list-item-gap;
+        cursor: pointer;
+    }
+
 
     // List content
     .k-list-content {

package/scss/components/list/_theme.scss

@@ -31,6 +31,41 @@
     }
 
 
+    // Sticky header
+    .k-list-sticky-header {
+        @include fill(
+            $kendo-list-item-text,
+            $kendo-list-item-bg,
+            $kendo-list-header-border,
+        );
+        @include box-shadow( $kendo-list-sticky-header-shadow );
+
+        &:has(+ .k-list-group-sticky-header) {
+            @include box-shadow( none );
+            border-color: $kendo-list-header-border;
+        }
+    }
+
+    .k-list-sticky-header-item {
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg,
+            );
+        }
+
+        &:focus-within,
+        &.k-focus {
+            @include fill(
+                $kendo-list-item-focus-text,
+                $kendo-list-item-focus-bg,
+            );
+            @include focus-indicator( $kendo-list-item-focus-shadow, true );
+        }
+    }
+
+
     // List item
     .k-list-item,
     .k-list-custom-value {

package/scss/components/list/_variables.scss

@@ -24,6 +24,10 @@ $kendo-list-sm-header-padding-y: null !default;
 $kendo-list-md-header-padding-y: null !default;
 $kendo-list-lg-header-padding-y: null !default;
 
+$kendo-list-sm-sticky-header-padding-y: null !default;
+$kendo-list-md-sticky-header-padding-y: null !default;
+$kendo-list-lg-sticky-header-padding-y: null !default;
+
 $kendo-list-header-border-width: null !default;
 
 $kendo-list-header-font-size: null !default;
@@ -128,7 +132,8 @@ $kendo-list-sizes: (
         item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
         item-group-label-line-height: $kendo-list-item-group-label-sm-line-height,
         filter-padding-x: $kendo-list-sm-filter-padding-x,
-        filter-padding-y: $kendo-list-sm-filter-padding-y
+        filter-padding-y: $kendo-list-sm-filter-padding-y,
+        sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y
     ),
     md: (
         font-size: $kendo-list-md-font-size,
@@ -150,7 +155,8 @@ $kendo-list-sizes: (
         item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
         item-group-label-line-height: $kendo-list-item-group-label-md-line-height,
         filter-padding-x: $kendo-list-md-filter-padding-x,
-        filter-padding-y: $kendo-list-md-filter-padding-y
+        filter-padding-y: $kendo-list-md-filter-padding-y,
+        sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y
     ),
     lg: (
         font-size: $kendo-list-lg-font-size,
@@ -172,7 +178,8 @@ $kendo-list-sizes: (
         item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
         item-group-label-line-height: $kendo-list-item-group-label-lg-line-height,
         filter-padding-x: $kendo-list-lg-filter-padding-x,
-        filter-padding-y: $kendo-list-lg-filter-padding-y
+        filter-padding-y: $kendo-list-lg-filter-padding-y,
+        sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y
     )
 ) !default;
 
@@ -187,6 +194,8 @@ $kendo-list-header-text: null !default;
 $kendo-list-header-border: null !default;
 $kendo-list-header-shadow: null !default;
 
+$kendo-list-sticky-header-shadow: null !default;
+
 
 $kendo-list-item-bg: null !default;
 $kendo-list-item-text: null !default;

package/scss/components/table/_theme.scss

@@ -82,8 +82,8 @@
 
 
     // Selected state
-    .k-table-tbody .k-table-row.k-selected > .k-table-td,
-    .k-table-list .k-table-row.k-selected {
+    .k-table-tbody .k-table-row.k-selected > .k-table-td:not(.k-group-cell),
+    .k-table-list .k-table-row.k-selected:not(.k-group-cell) {
         border-color: $kendo-table-selected-border;
         color: $kendo-table-selected-text;
         background-color: $kendo-table-selected-bg;

package/scss/elevation/index.scss

@@ -36,6 +36,10 @@ $kendo-elevation: map.merge($default-elevation, $kendo-elevation);
     @return #{$result};
 }
 
+/// Returns a CSS variable reference for an elevation shadow level.
+/// @param {Number} $level - The elevation level key from $kendo-elevation.
+/// @return {String} CSS variable reference for the given elevation level.
+/// @group functions
 @function k-elevation($level) {
     @return var(--kendo-elevation-#{$level});
 }
@@ -46,10 +50,13 @@ $kendo-elevation-bg-lightness-step: 0.015 !default;
 // Each elevation-bg level increases oklch chroma by level * this value.
 $kendo-elevation-bg-chroma-step: 0.001 !default;
 
-// The background color for a given elevation level is calculated by increasing the lightness and chroma of the base background color
-// by a step multiplied by the elevation level, but only if the base background color is light (for light themes) or dark (for dark themes).
-// This is achieved by multiplying the steps by a clamp function that returns 1 when the background color is in the appropriate range and 0 otherwise.
-// clamp(0, (0.5 - l) * 99999, 1) → 1 when bg is dark, 0 when light
+/// Returns an elevated background color expression using oklch relative color syntax.
+/// The lightness and chroma are increased per elevation level, but only when the
+/// base color is in the appropriate light/dark range.
+/// @param {Number} $level - The elevation level that drives lightness and chroma increase.
+/// @param {Color} $color - The base background color.
+/// @return {String} An oklch relative color expression that represents the elevated background.
+/// @group functions
 @function k-elevation-bg($level, $color) {
     $_result: "oklch(from #{$color} calc(l + #{$level} * #{$kendo-elevation-bg-lightness-step} * clamp(0, (0.5 - l) * 99999, 1)) calc(c + #{$level} * #{$kendo-elevation-bg-chroma-step} * clamp(0, (0.5 - l) * 99999, 1)) h)";
     @return #{$_result};

package/scss/functions/_color.scss

@@ -10,6 +10,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the red channel of a color.
 /// @param {Color} $color - The color to get the red channel for.
 /// @return {Number} - The red channel of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-red( #ff0000 ); // => 255
@@ -23,6 +24,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the green channel of a color.
 /// @param {Color} $color - The color to get the green channel for.
 /// @return {Number} - The green channel of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-green( #00ff00 ); // => 255
@@ -36,6 +38,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the blue channel of a color.
 /// @param {Color} $color - The color to get the blue channel for.
 /// @return {Number} - The blue channel of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-blue( #0000ff ); // => 255
@@ -49,6 +52,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the hue of a color.
 /// @param {Color} $color - The color to get the hue for.
 /// @return {Number} - The hue of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-hue( #e1d7d2 ); // => 20deg
@@ -62,6 +66,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the saturation of a color.
 /// @param {Color} $color - The color to get the saturation for.
 /// @return {Number} - The saturation of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-saturation( #e1d7d2 ); // => 20%
@@ -75,6 +80,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// Returns the lightness of a color.
 /// @param {Color} $color - The color to get the lightness for.
 /// @return {Number} - The lightness of the color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-lightness( #e1d7d2 ); // => 80%
@@ -90,6 +96,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color2 - The second color.
 /// @param {Number} $weight - The weight of the first color in the mix.
 /// @return {Color} - The mixed color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-mix( #f00, #00f ); // => #800080
@@ -101,6 +108,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to darken.
 /// @param {Number} $amount - The amount to darken the color.
 /// @return {Color} - The darkened color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-darken( #f00, 10% ); // => #e60000
@@ -112,6 +120,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to lighten.
 /// @param {Number} $amount - The amount to lighten the color.
 /// @return {Color} - The lightened color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
@@ -123,6 +132,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to adjust the hue for.
 /// @param {Number} $degrees - The amount to adjust the hue.
 /// @return {Color} - The adjusted color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
@@ -134,6 +144,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to saturate.
 /// @param {Number} $amount - The amount to saturate the color.
 /// @return {Color} - The saturated color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
@@ -145,6 +156,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $color - The color to desaturate.
 /// @param {Number} $amount - The amount to desaturate the color.
 /// @return {Color} - The desaturated color.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
@@ -152,6 +164,13 @@ $kendo-dark-color-level-step: 16% !default;
     @return color.adjust( $color, $saturation: - $amount );
 }
 
+/// Mixes a color with white or black based on a level value.
+/// Negative levels tint toward white, positive levels shade toward black.
+/// @param {Color} $color - The color to adjust.
+/// @param {Number} $level [0] - Shade/tint level. Negative = tint, positive = shade. Accepts numeric steps or percentages.
+/// @param {Boolean} $_is-dark-theme [$kendo-is-dark-theme] - Internal dark-theme flag, controls step size.
+/// @return {Color} - The adjusted color.
+/// @group functions
 @function k-color-level( $color, $level: 0, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
     $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
@@ -176,7 +195,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to lighten the color
 /// @return {Color} - The lightened color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
@@ -189,7 +208,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to darken the color
 /// @return {Color} - The darkened color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-color-shade( #f00, 1 ); // => #e60000
@@ -202,7 +221,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to shade or tint the color
 /// @return {Color} - The shaded or tinted color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-shade( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -218,7 +237,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to tint or shade the color
 /// @return {Color} - The tinted or shaded color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-tint( $color, $level: 1, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -234,7 +253,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to darken or lighten the color
 /// @return {Color} - The darkened or lightened color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-darken( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -249,7 +268,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Number} $level - The amount to lighten or darken the color
 /// @return {Color} - The lightened or darkened color
 ///
-/// @group color-system
+/// @group functions
 @function k-try-lighten( $color, $amount, $_is-dark-theme: $kendo-is-dark-theme ) {
     $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
 
@@ -264,7 +283,7 @@ $kendo-dark-color-level-step: 16% !default;
 /// @param {Color} $bg - The background color
 /// @return {Color} - The converted color
 ///
-/// @group color-system
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
@@ -567,7 +586,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to calculate the relative luminance for.
 /// @return {Number} - The relative luminance for the color.
 ///
-/// @group accessibility
+/// @group functions
 ///
 /// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -584,7 +603,7 @@ $wcag-light: white !default;
 /// @param {Color} $foreground - The foreground color
 /// @return {Number} - The contrast ratio between the two colors
 ///
-/// @group accessibility
+/// @group functions
 ///
 /// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -599,7 +618,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to check
 /// @return {Boolean} - True if the color is dark, false otherwise
 ///
-/// @group accessibility
+/// @group functions
 @function k-is-dark( $color ) {
     @return if( k-color-luminance( $color ) < .5, true, false );
 }
@@ -608,7 +627,7 @@ $wcag-light: white !default;
 /// @param {Color} $color - The color to check
 /// @return {Boolean} - True if the color is light, false otherwise
 ///
-/// @group accessibility
+/// @group functions
 @function k-is-light( $color ) {
     @return if( k-color-luminance( $color ) < .5, false, true );
 }
@@ -622,7 +641,7 @@ $wcag-light: white !default;
 /// @param {Number} $min-ratio - The minimum contrast ratio to reach
 /// @return {Color} - The color with the highest contrast ratio
 ///
-/// @group accessibility
+/// @group functions
 @function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
     $foregrounds: $light, $dark, #ffffff, #000000;
     $max-ratio: 0;

package/scss/functions/_default.scss

@@ -7,6 +7,7 @@
 /// @param {String} $default - The default value to compare against.
 /// @param {String | List} $current - The current value to check. Can be a single value or a list of values.
 /// @return {String | Null} - Returns "&," when values match, null otherwise.
+/// @group functions
 
 @function k-when-default($default, $current) {
   @if meta.type-of($current) == "list" {

package/scss/functions/_lang.scss

@@ -3,6 +3,7 @@
 /// @param {Any} $var - The variable to check.
 /// @param {Any} $fallback - The fallback value.
 /// @return {Any} - The value of the variable or the fallback value.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   $foo: null;

package/scss/functions/_list.scss

@@ -4,6 +4,7 @@
 /// @param {List} $list - The list to check.
 /// @param {Any} $value - The value to check for.
 /// @return {Boolean} - Whether `$list` contains `$value`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
@@ -15,6 +16,7 @@
 /// Reverse the order of items in `$list`.
 /// @param {List} $list - The list to reverse.
 /// @return {List} - The reversed list.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"

package/scss/functions/_map.scss

@@ -4,6 +4,7 @@
 /// Returns the value at `$key` in `$map`.
 /// @param {Map} $map - The map to get the value from.
 /// @param {Any} $key - The key to get the value for.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
@@ -18,6 +19,7 @@
 /// @param {Map} $map - The map to merge.
 /// @param {Map} $args - The map to merge into `$map`.
 /// @return {Map} - A map with the keys and values from `$map` and `$args`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
@@ -31,6 +33,7 @@
 /// Returns a deep-map with the keys and values from `$map` and `$args`.
 /// @param {Map} $maps - The maps to deep-merge.
 /// @return {Map} - A map with the keys and values from `$map` and `$args`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
@@ -63,6 +66,7 @@
 /// @param {Any} $key - The key to set the value for.
 /// @param {Any} $value - The value to set.
 /// @return {Map} - A map with the key and value set.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
@@ -78,6 +82,7 @@
 /// Returns negative values of a number or numbers in a list.
 /// @param {Map} $map - The map to get the values from.
 /// @return {Map} - A comma separated list of the values in `$map`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-map-negate( ( 0: 0, 1: 1px, 2: 2px ) ); // => ("-1": -1px, "-2": -2px)

package/scss/functions/_math.scss

@@ -8,6 +8,7 @@
 /// @param {Number} $min - The minimum value.
 /// @param {Number} $max - The maximum value.
 /// @return {Number} - The clamped number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-clamp( 10, 0, 5 ); // => 5
@@ -19,6 +20,7 @@
 /// @param {Number} $x - The base.
 /// @param {Number} $n - The exponent.
 /// @return {Number} - The result of raising `$x` to the power of `$n`.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-pow( 2, 3 ); // => 8
@@ -47,6 +49,7 @@
 /// @param {Number} $number - The number to round.
 /// @param {Number} $precision - The number of decimal places to round to.
 /// @return {Number} - The rounded number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-round( 10.123456789, 3 ); // => 10.123
@@ -63,6 +66,7 @@
 /// Remove the unit from a number.
 /// @param {Number} $number - The number to remove the unit from.
 /// @return {Number} - The unitless number.
+/// @group functions
 ///
 /// @example scss - Usage
 ///   @debug k-math-strip-unit( 10px ); // => 10