@sebgroup/green-core 2.35.1 → 2.36.0

package/gds-element.js

@@ -12,7 +12,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.35.1";
+    this.semanticVersion = "2.36.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-23T13:09:10.498Z",
+  "generatedAt": "2026-03-03T12:20:44.589Z",
   "components": [
     {
       "name": "gds-alert",

package/generated/mcp/dialog/api.md

@@ -9,11 +9,12 @@
 
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
-| `open` | `boolean` | `-` | Whether the dialog is open. The state of the dialog can be controlled either by setting this property or by calling the `show()` and `close()` methods. |
+| `open` | `boolean` | `-` | Whether the dialog is open. The state of the dialog can be controlled either by setting this property or by calling the `show()` and `close()` methods.  When the state is explicitly changed by setting this prop, the state change cannot be cancelled by events. |
 | `heading` | `string \| undefined` | `-` | The dialog's heading. |
 | `variant` | `'default' \| 'slide-out'` | `-` | The dialog's variant. |
 | `placement` | `'initial' \| 'top' \| 'bottom' \| 'left' \| 'right'` | `-` | The dialog's placement. |
 | `scrollable` | `boolean` | `-` | Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if the content exceeds the dialog's height, which can be controlled using the `height` property.  This property have no effect if the `dialog` slot is used. In that case, you need to add overflow styles to the content inside the `dialog` slot. |
+| `closedby` | `'closerequest' \| 'none' \| 'any'` | `-` | Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.  - `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).   The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations   require a user activation in between. This ensures the best mobile UX. - `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).   A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).   Mobile platform close gestures may not work in this mode. - `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already   handles click-outside via its own mechanism. |
 | `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
 | `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
 | `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
@@ -55,16 +56,19 @@
 ### `show(reason?: string): void`
 
 Opens the dialog.
+This is a programmatic API that always opens the dialog.
+Events are dispatched for notification when a reason is provided, but cancellation is not honored.
 
 **Parameters:**
 
 - `reason`: `string` _(optional)_
 
-### `close(reason: string, returnValue: any): void`
+### `close(reason?: string): void`
 
 Closes the dialog.
+This is a programmatic API that always closes the dialog.
+Events are dispatched for notification when a reason is provided, but cancellation is not honored.
 
 **Parameters:**
 
-- `reason`: `string`
-- `returnValue`: `any`
+- `reason`: `string` _(optional)_

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-23T13:09:10.498Z",
+  "generatedAt": "2026-03-03T12:20:44.589Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-23T13:09:10.498Z",
+  "generatedAt": "2026-03-03T12:20:44.589Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/table/api.md

@@ -20,6 +20,7 @@
 | `data` | `(request: Types.Request) => Promise<Types.Response<T>>` | `-` | Asynchronous data provider function. Accepts: function that returns Promise with rows and total count |
 | `density` | `Types.Density` | `-` | Controls row density. Accepts: `comfortable`, `compact`, `spacious` |
 | `selectable` | `boolean` | `-` | Enables row selection functionality. |
+| `disableSelectAll` | `boolean` | `-` | Disables select all checkbox in header. |
 | `responsive` | `boolean` | `-` | Transforms table layout for mobile screens. |
 | `plain` | `boolean` | `-` | Removes table header and footer. |
 | `searchable` | `boolean` | `-` | Adds search input for data filtering. |
@@ -39,7 +40,7 @@
 | `gds-page-change` | `CustomEvent<any>` | Fired when the active page changes. Detail: `{ page: number }` |
 | `gds-rows-change` | `CustomEvent<any>` | Fired when the rows per page value changes. Detail: `{ rows: number }` |
 | `gds-sort-change` | `CustomEvent<any>` | Fired when sorting changes. Detail: `{ sortColumn: string, sortDirection: 'asc' \| 'desc' }` |
-| `gds-table-data-loaded` | `CustomEvent<any>` | Fired when data is successfully loaded. |
+| `gds-table-data-loaded` | `CustomEvent<any>` | Fired when data is successfully loaded. Detail: `{ rows: T[], total: number, page: number, rowsPerPage: number, searchQuery: string, sortColumn?: string, sortDirection?: 'asc' \| 'desc' }` |
 | `gds-table-data-error` | `CustomEvent<any>` | Fired when data loading fails. |
 | `gds-table-selection` | `CustomEvent<any>` | Fired when row selection changes. |
 

package/generated/react/dialog/index.d.ts

@@ -17,8 +17,9 @@ export declare const GdsDialog: {
         variant?: "default" | "slide-out" | undefined;
         placement?: "top" | "right" | "bottom" | "left" | "initial" | undefined;
         scrollable?: boolean | undefined;
+        closedby?: "none" | "closerequest" | "any" | undefined;
         show?: ((reason?: string) => void) | undefined;
-        close?: ((reason: string) => void) | undefined;
+        close?: ((reason?: string) => void) | undefined;
         disconnectedCallback?: (() => void) | undefined;
         render?: (() => any) | undefined;
         width?: string | undefined;

package/generated/react/index.d.ts

@@ -390,8 +390,8 @@ export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
 export * from './radio-group/index.js';
 export * from './segment/index.js';
-export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
+export * from './sensitive-account/index.js';
 export * from './sensitive-number/index.js';
 export * from './menu-item/index.js';
 export * from './menu-heading/index.js';

package/generated/react/index.js

@@ -390,8 +390,8 @@ export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
 export * from "./radio-group/index.js";
 export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
+export * from "./sensitive-account/index.js";
 export * from "./sensitive-number/index.js";
 export * from "./menu-item/index.js";
 export * from "./menu-heading/index.js";

package/generated/react/table/index.d.ts

@@ -7,7 +7,7 @@ type GdsTableProps = React.ComponentProps<ReturnType<typeof getReactComponent<Gd
     onGdsRowsChange?: (event: CustomEvent<any>) => void;
     /** Fired when sorting changes. Detail: `{ sortColumn: string, sortDirection: 'asc' | 'desc' }` */
     onGdsSortChange?: (event: CustomEvent<any>) => void;
-    /** Fired when data is successfully loaded. */
+    /** Fired when data is successfully loaded. Detail: `{ rows: T[], total: number, page: number, rowsPerPage: number, searchQuery: string, sortColumn?: string, sortDirection?: 'asc' | 'desc' }` */
     onGdsTableDataLoaded?: (event: CustomEvent<any>) => void;
     /** Fired when data loading fails. */
     onGdsTableDataError?: (event: CustomEvent<any>) => void;
@@ -29,6 +29,7 @@ export declare const GdsTable: {
         data?: ((request: import("../../../components/table/table.types").Request) => Promise<import("../../../components/table/table.types").Response<import("../../../components/table/table.types").Row>>) | undefined;
         density?: import("../../../components/table/table.types").Density | undefined;
         selectable?: boolean | undefined;
+        disableSelectAll?: boolean | undefined;
         responsive?: boolean | undefined;
         plain?: boolean | undefined;
         searchable?: boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.35.1",
+  "version": "2.36.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/field-base/field-base.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .field {\n    border-radius: var(--sg-border-radius);\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--sg-border-color);\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field {\n    align-items: stretch;\n    gap: var(--gds-sys-space-xs);\n    background-color: var(--gds-sys-color-background-primary);\n    box-sizing: border-box;\n    color: var(--gds-sys-color-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n    min-block-size: 44px;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-sys-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-sys-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-sys-color-border-negative-01);\n    color: var(--gds-sys-color-content-negative-01);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-sys-color-l3-disabled-01);\n    color: var(--gds-sys-color-content-disabled-01);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-sys-space-l);\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .field {\n    border-radius: 0.25rem;\n    border: solid 1px var(--gds-sys-color-base-600);\n    --border-color: var(--gds-sys-color-base-600);\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field {\n    align-items: stretch;\n    gap: var(--gds-sys-space-xs);\n    background-color: var(--gds-sys-color-background-primary);\n    box-sizing: border-box;\n    color: var(--gds-sys-color-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n    min-block-size: 44px;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-sys-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-sys-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-sys-color-border-negative-01);\n    color: var(--gds-sys-color-content-negative-01);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-sys-color-l3-disabled-01);\n    color: var(--gds-sys-color-content-disabled-01);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-sys-space-l);\n  }\n}";
 export default styles;

package/primitives/listbox/listbox.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
 export default styles;

package/primitives/listbox/option.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--grey-400);\n  }\n  .item:active {\n    background-color: var(--grey-400);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) .item,\n  :host(:focus-visible) .item {\n    background-color: var(--grey-400);\n  }\n  :host(:active) .item {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:active {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  :host(:active) div {\n    background-color: var(--gds-sys-color-base-300);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n}";
 export default styles;

package/primitives/menu/menu-heading.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    background-color: var(--gds-ref-pallet-base300);\n    color: var(--gds-ref-pallet-base800);\n    display: flex;\n    font-size: 0.875rem;\n    font-weight: 500;\n    padding: 0.75rem 1rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host([aria-hidden=true]) {\n    display: none;\n  }\n}";
+const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    background-color: var(--gds-sys-color-base-300);\n    color: var(--gds-sys-color-base-800);\n    display: flex;\n    font-size: 0.875rem;\n    font-weight: 500;\n    padding: 0.75rem 1rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host([aria-hidden=true]) {\n    display: none;\n  }\n}";
 export default styles;

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-e8ed7f";
+const VER_SUFFIX = "-6d91ab";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/utils/helpers/id.d.ts

@@ -1,4 +1 @@
-/**
- * Generate a random id with `gds-` prefix
- */
 export declare const randomId: () => string;

package/utils/helpers/id.js

@@ -1,5 +1,10 @@
 import "../../chunks/chunk.QU3DSPNU.js";
-const randomId = () => "gds-" + Math.random().toString(36).substring(2, 9);
+const randomId = () => {
+  const array = new Uint32Array(2);
+  window.crypto.getRandomValues(array);
+  const id = (array[0].toString(36) + array[1].toString(36)).substring(0, 7);
+  return "gds-" + id;
+};
 export {
   randomId
 };