@sebgroup/green-core 3.21.0 → 3.21.1

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

@@ -429,18 +429,13 @@ export declare const GdsVideo: {
         tabIndex?: number | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
-    }, "dir" | "slot" | "style" | "title" | "role" | "aria-label" | "property" | "content" | "color" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-multiselectable" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
+    }, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
         children?: React.ReactNode;
     } & {
         dir?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
         title?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
-        "aria-label"?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        content?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         hidden?: boolean | undefined | undefined;
@@ -451,11 +446,16 @@ export declare const GdsVideo: {
         className?: string | undefined | undefined;
         id?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
+        role?: import("react").AriaRole | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         nonce?: string | undefined | undefined;
         tabIndex?: number | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        color?: string | undefined | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -463,7 +463,6 @@ export declare const GdsVideo: {
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         rel?: string | undefined | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuemax"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
@@ -523,6 +522,7 @@ export declare const GdsVideo: {
         "aria-level"?: number | undefined | undefined;
         "aria-modal"?: (boolean | "true" | "false") | undefined;
         "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
         "aria-owns"?: string | undefined | undefined;
         "aria-placeholder"?: string | undefined | 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": "3.21.0",
+  "version": "3.21.1",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -473,6 +473,7 @@
     "./components/filter-chips/filter-chip/filter-chip.js",
     "./components/fab/index.js",
     "./components/fab/fab.js",
+    "./components/dropdown/option.js",
     "./components/dropdown/index.js",
     "./components/dropdown/dropdown.js",
     "./components/divider/index.js",
@@ -533,9 +534,6 @@
     "./primitives/menu/menu-item.js",
     "./primitives/menu/menu-heading.js",
     "./primitives/menu/index.js",
-    "./primitives/listbox/option.js",
-    "./primitives/listbox/listbox.js",
-    "./primitives/listbox/index.js",
     "./primitives/form-control-header/index.js",
     "./primitives/form-control-header/form-control-header.js",
     "./primitives/form-control-footer/index.js",

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

@@ -0,0 +1,14 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
+import menuHeadingStyles from "./menu-heading.trans.styles.scss.js";
+function register() {
+  TransitionalStyles.instance.register(
+    "gds-menu-heading",
+    menuHeadingStyles.toString()
+  );
+}
+var menu_heading_trans_styles_default = register;
+export {
+  menu_heading_trans_styles_default as default,
+  register
+};

package/primitives/menu/menu-item.component.js

@@ -6,9 +6,9 @@ import {
 var _handleOnClick;
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import styles from "../../shared-styles/menu-listbox-item.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { Focusable } from "../../utils/mixins/focusable.js";
-import styles from "../listbox/option.styles.js";
 let GdsMenuItem = class extends Focusable(GdsElement) {
   constructor() {
     super(...arguments);

package/primitives/menu/menu.component.js

@@ -7,6 +7,7 @@ var _slotRef;
 import { createRef, ref } from "lit/directives/ref.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import { MENU_LISTBOX_TRANSITIONAL_STYLE_KEY } from "../../shared-styles/menu-listbox.trans.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import {
   ListboxKbNavController
@@ -22,7 +23,7 @@ let GdsMenu = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
-    TransitionalStyles.instance.apply(this, "gds-listbox");
+    TransitionalStyles.instance.apply(this, MENU_LISTBOX_TRANSITIONAL_STYLE_KEY);
   }
   get navigableItems() {
     if (!__privateGet(this, _slotRef).value)

package/pure.d.ts

@@ -1,4 +1,4 @@
-export * from './primitives/listbox/option.component';
+export * from './components/dropdown/option.component';
 export * from './primitives/menu/menu-heading.component';
 export * from './primitives/menu/menu-item.component';
 export * from './components/alert/alert.component';

package/pure.js

@@ -1,4 +1,4 @@
-export * from "./primitives/listbox/option.component.js";
+export * from "./components/dropdown/option.component.js";
 export * from "./primitives/menu/menu-heading.component.js";
 export * from "./primitives/menu/menu-item.component.js";
 export * from "./components/alert/alert.component.js";

package/{primitives/listbox/option.styles.js → shared-styles/menu-listbox-item.style.js}

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../chunks/chunk.CAV4X6PU.js";
 import { css } from "lit";
 const style = css`
   @layer base, reset;
@@ -66,7 +66,7 @@ const style = css`
     }
   }
 `;
-var option_styles_default = style;
+var menu_listbox_item_style_default = style;
 export {
-  option_styles_default as default
+  menu_listbox_item_style_default as default
 };

package/shared-styles/menu-listbox-item.trans.style.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/shared-styles/menu-listbox-item.trans.style.js

@@ -0,0 +1,15 @@
+import "../chunks/chunk.CAV4X6PU.js";
+import { TransitionalStyles } from "../utils/transitional-styles/transitional-styles.js";
+import itemStyles from "./menu-listbox-item.trans.style.scss.js";
+import rbcbStyles from "./rbcb-toggle.style.js";
+function register() {
+  TransitionalStyles.instance.register(
+    "gds-option",
+    itemStyles.toString() + rbcbStyles.cssText
+  );
+}
+var menu_listbox_item_trans_style_default = register;
+export {
+  menu_listbox_item_trans_style_default as default,
+  register
+};

package/shared-styles/menu-listbox.style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Menu listbox
+ *
+ * The scrollable, vertically stacked container that holds the items of a listbox or a menu.
+ * Used by `gds-dropdown` for its options list and by `gds-context-menu` for its menu.
+ *
+ * Scoped to a class rather than `:host` so it can be applied to a container element inside a
+ * component's shadow root.
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;

package/{primitives/listbox/listbox.styles.js → shared-styles/menu-listbox.style.js}

@@ -1,9 +1,10 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../chunks/chunk.CAV4X6PU.js";
 import { css } from "lit";
-const style = css`
+var menu_listbox_style_default = css`
   @layer base, reset, transitional-styles;
+
   @layer base {
-    :host {
+    .menu-listbox {
       display: flex;
       flex-direction: column;
       overflow: auto;
@@ -11,7 +12,6 @@ const style = css`
     }
   }
 `;
-var listbox_styles_default = style;
 export {
-  listbox_styles_default as default
+  menu_listbox_style_default as default
 };

package/shared-styles/menu-listbox.trans.style.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_LISTBOX_TRANSITIONAL_STYLE_KEY = "gds-menu-listbox";
+export declare function register(): void;
+export default register;

package/shared-styles/menu-listbox.trans.style.js

@@ -0,0 +1,16 @@
+import "../chunks/chunk.CAV4X6PU.js";
+import { TransitionalStyles } from "../utils/transitional-styles/transitional-styles.js";
+import styles from "./menu-listbox.trans.style.scss.js";
+const MENU_LISTBOX_TRANSITIONAL_STYLE_KEY = "gds-menu-listbox";
+function register() {
+  TransitionalStyles.instance.register(
+    MENU_LISTBOX_TRANSITIONAL_STYLE_KEY,
+    styles.toString()
+  );
+}
+var menu_listbox_trans_style_default = register;
+export {
+  MENU_LISTBOX_TRANSITIONAL_STYLE_KEY,
+  menu_listbox_trans_style_default as default,
+  register
+};

package/shared-styles/menu-listbox.trans.style.scss.js

@@ -0,0 +1,2 @@
+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  .menu-listbox {\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  .menu-listbox > 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  .menu-listbox > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host,\n  .menu-listbox {\n    overflow-y: auto;\n  }\n}";
+export default styles;

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

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

package/utils/transitional-styles/transitional-styles.d.ts

@@ -16,6 +16,13 @@ export declare class TransitionalStyles {
     #private;
     static get instance(): TransitionalStyles;
     apply(element: GdsElement, styleKey: string): void;
+    /**
+     * Applies transitional styles to a container inside the host's shadow root, leaving the host's own
+     * stylesheet in place. Use this when only part of a component has a transitional counterpart, or
+     * when the target is a plain element that cannot be a style key owner of its own.
+     */
+    applyScoped(element: GdsElement, styleKey: string, injectKey: string): void;
+    applyScopedToElement(styleKey: string, sheet: string): void;
     applyToElement(styleKey: string, sheet: string): void;
     register(name: string, styles: string): void;
 }

package/utils/transitional-styles/transitional-styles.js

@@ -1,8 +1,9 @@
 import {
   __privateAdd,
-  __privateGet
+  __privateGet,
+  __privateMethod
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _styles, _elements, _useLegacyStylesheets;
+var _styles, _elements, _scopedElements, _useLegacyStylesheets, _followDesignVersion, followDesignVersion_fn;
 import { unsafeCSS } from "lit";
 import * as Button from "../../components/button/button.trans.styles.js";
 import * as ContextMenu from "../../components/context-menu/context-menu.trans.styles.js";
@@ -28,8 +29,14 @@ const registerTransitionalStyles = () => {
 };
 const _TransitionalStyles = class _TransitionalStyles {
   constructor() {
+    /**
+     * Runs `applyTransitional` or `clearTransitional` based on the `designVersion` of the closest
+     * `gds-theme` ancestor, and keeps following it if that version changes later.
+     */
+    __privateAdd(this, _followDesignVersion);
     __privateAdd(this, _styles, /* @__PURE__ */ new Map());
     __privateAdd(this, _elements, /* @__PURE__ */ new Map());
+    __privateAdd(this, _scopedElements, /* @__PURE__ */ new Map());
     __privateAdd(this, _useLegacyStylesheets, !supportsConstructedStylesheets());
   }
   static get instance() {
@@ -49,49 +56,40 @@ const _TransitionalStyles = class _TransitionalStyles {
     __privateGet(this, _elements).set(styleKey, element);
     this.applyToElement(styleKey, style);
   }
+  /**
+   * Applies transitional styles to a container inside the host's shadow root, leaving the host's own
+   * stylesheet in place. Use this when only part of a component has a transitional counterpart, or
+   * when the target is a plain element that cannot be a style key owner of its own.
+   */
+  applyScoped(element, styleKey, injectKey) {
+    if (!element.shadowRoot)
+      return;
+    const style = __privateGet(this, _styles).get(styleKey);
+    if (!style)
+      return;
+    __privateGet(this, _scopedElements).set(styleKey, { element, injectKey });
+    this.applyScopedToElement(styleKey, style);
+  }
+  applyScopedToElement(styleKey, sheet) {
+    const scoped = __privateGet(this, _scopedElements).get(styleKey);
+    if (!scoped || !scoped.element.shadowRoot)
+      return;
+    const { element, injectKey } = scoped;
+    __privateMethod(this, _followDesignVersion, followDesignVersion_fn).call(this, element, () => element._dynamicStylesController.inject(injectKey, unsafeCSS(sheet)), () => element._dynamicStylesController.clear(injectKey));
+  }
   applyToElement(styleKey, sheet) {
     const element = __privateGet(this, _elements).get(styleKey);
     if (!element || !element.shadowRoot)
       return;
-    const applyTransitional = () => {
+    __privateMethod(this, _followDesignVersion, followDesignVersion_fn).call(this, element, () => {
       element._dynamicStylesController.clearInitial();
       element._dynamicStylesController.inject("t-styles", unsafeCSS(sheet));
       element._isUsingTransitionalStyles = true;
-    };
-    const clearTransitional = () => {
+    }, () => {
       element._isUsingTransitionalStyles = false;
       element._dynamicStylesController.clear("t-styles");
       element._dynamicStylesController.restoreInitial();
-    };
-    const gdsThemeSelector = "[gds-element=gds-theme]";
-    let currentRoot = element.getRootNode();
-    let closestGdsTheme = element.closest(gdsThemeSelector);
-    while (closestGdsTheme === null && currentRoot !== document) {
-      closestGdsTheme = currentRoot.host?.closest(
-        gdsThemeSelector
-      );
-      currentRoot = currentRoot.host?.getRootNode();
-    }
-    if (closestGdsTheme) {
-      const theme = closestGdsTheme;
-      const updateStyles = () => {
-        if (theme.designVersion === "2023") {
-          clearTransitional();
-        } else {
-          applyTransitional();
-        }
-      };
-      theme.addEventListener("gds-design-version-changed", updateStyles);
-      element.addEventListener(
-        "gds-element-disconnected",
-        () => theme.removeEventListener("gds-design-version-changed", updateStyles)
-      );
-      if (theme.designVersion === "2023") {
-        clearTransitional();
-        return;
-      }
-    }
-    applyTransitional();
+    });
   }
   register(name, styles) {
     let preparedStyle = styles;
@@ -105,11 +103,45 @@ const _TransitionalStyles = class _TransitionalStyles {
     }
     __privateGet(this, _styles).set(name, preparedStyle);
     this.applyToElement(name, preparedStyle);
+    this.applyScopedToElement(name, preparedStyle);
   }
 };
 _styles = new WeakMap();
 _elements = new WeakMap();
+_scopedElements = new WeakMap();
 _useLegacyStylesheets = new WeakMap();
+_followDesignVersion = new WeakSet();
+followDesignVersion_fn = function(element, applyTransitional, clearTransitional) {
+  const gdsThemeSelector = "[gds-element=gds-theme]";
+  let currentRoot = element.getRootNode();
+  let closestGdsTheme = element.closest(gdsThemeSelector);
+  while (closestGdsTheme === null && currentRoot !== document) {
+    closestGdsTheme = currentRoot.host?.closest(
+      gdsThemeSelector
+    );
+    currentRoot = currentRoot.host?.getRootNode();
+  }
+  if (closestGdsTheme) {
+    const theme = closestGdsTheme;
+    const updateStyles = () => {
+      if (theme.designVersion === "2023") {
+        clearTransitional();
+      } else {
+        applyTransitional();
+      }
+    };
+    theme.addEventListener("gds-design-version-changed", updateStyles);
+    element.addEventListener(
+      "gds-element-disconnected",
+      () => theme.removeEventListener("gds-design-version-changed", updateStyles)
+    );
+    if (theme.designVersion === "2023") {
+      clearTransitional();
+      return;
+    }
+  }
+  applyTransitional();
+};
 let TransitionalStyles = _TransitionalStyles;
 export {
   TransitionalStyles,

package/primitives/listbox/index.d.ts

@@ -1 +0,0 @@
-export * from './listbox';

package/primitives/listbox/index.js

@@ -1 +0,0 @@
-export * from "./listbox.js";

package/primitives/listbox/listbox.component.d.ts

@@ -1,59 +0,0 @@
-import { GdsElement } from '../../gds-element';
-import { ListboxKbNavigation } from '../../utils/controllers/listbox-kb-nav-controller';
-import { GdsOption } from './option.component';
-import type { OptionsContainer } from './option.component';
-/**
- * @element gds-listbox
- * @internal
- *
- * A listbox is a widget that allows the user to select one or more items from a list of choices.
- * This primitive corresponds to the aria listbox role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
- *
- * The listbox handles keyboard navigation and manages focus and selection of options.
- *
- * Can be used together with the `gds-option` primitive.
- *
- * @slot - The default slot. Only `gds-option` elements should be used here.
- */
-export declare class GdsListbox extends GdsElement implements ListboxKbNavigation, OptionsContainer {
-    #private;
-    static styles: import("lit").CSSResult;
-    /**
-     * Controls whether the listbox allows multiple selection or not.
-     */
-    multiple: boolean;
-    /**
-     * Delegate function for comparing option values.
-     */
-    compareWith: (a: any, b: any) => boolean;
-    constructor();
-    get navigableItems(): GdsOption[];
-    /**
-     * Returns a list of all `gds-option` elements in the listbox.
-     */
-    get options(): GdsOption[];
-    /**
-     * Returns a list of all visible `gds-option` elements in the listbox.
-     */
-    get visibleOptionElements(): GdsOption[];
-    /**
-     * Returns a list of all visible `gds-option` elements in the listbox.
-     */
-    get visibleSelectedOptionElements(): GdsOption[];
-    /**
-     * Returns a list of all selected `gds-option` elements in the listbox.
-     */
-    get selection(): GdsOption[];
-    set selection(values: any[]);
-    connectedCallback(): void;
-    /**
-     * Focuses the first selected option in the listbox.
-     * If no option is selected, the first visible option is focused.
-     */
-    focus(): void;
-    render(): any;
-    /**
-     * Re-renders all options in the listbox when the `multiple` property changes.
-     */
-    private _rerenderOptions;
-}

package/primitives/listbox/listbox.component.js

@@ -1,129 +0,0 @@
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet
-} from "../../chunks/chunk.CAV4X6PU.js";
-var _slotRef, _handleSelect;
-import { property } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { GdsElement } from "../../gds-element.js";
-import { gdsCustomElement, html } from "../../scoping.js";
-import { TransitionalStyles } from "../../transitional-styles.js";
-import {
-  ListboxKbNavController
-} from "../../utils/controllers/listbox-kb-nav-controller.js";
-import { watch } from "../../utils/decorators/watch.js";
-import { unwrap } from "../../utils/helpers/unwrap-slots.js";
-import ListboxStyles from "./listbox.styles.js";
-import { GdsOption } from "./option.component.js";
-let GdsListbox = class extends GdsElement {
-  constructor() {
-    super();
-    this.multiple = false;
-    this.compareWith = (a, b) => a === b;
-    __privateAdd(this, _slotRef, createRef());
-    __privateAdd(this, _handleSelect, (e) => {
-      const option = e.target;
-      if (this.multiple)
-        option.selected = !option.selected;
-      else {
-        option.selected = true;
-        Array.from(this.options).forEach((el) => {
-          if (el !== option)
-            el.selected = false;
-        });
-      }
-      ;
-      this.ariaActiveDescendantElement = option;
-      this.dispatchCustomEvent("change", {
-        bubbles: false,
-        composed: false
-      });
-    });
-    new ListboxKbNavController(this);
-  }
-  get navigableItems() {
-    return this.visibleOptionElements;
-  }
-  /**
-   * Returns a list of all `gds-option` elements in the listbox.
-   */
-  get options() {
-    if (!__privateGet(this, _slotRef).value)
-      return [];
-    return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-option"
-    ) || [];
-  }
-  /**
-   * Returns a list of all visible `gds-option` elements in the listbox.
-   */
-  get visibleOptionElements() {
-    return this.options.filter((el) => !el.hidden);
-  }
-  /**
-   * Returns a list of all visible `gds-option` elements in the listbox.
-   */
-  get visibleSelectedOptionElements() {
-    return this.options.filter((el) => el.selected && !el.hidden);
-  }
-  /**
-   * Returns a list of all selected `gds-option` elements in the listbox.
-   */
-  get selection() {
-    return this.options.filter((el) => el.selected);
-  }
-  set selection(values) {
-    this.options.forEach((el) => {
-      el.selected = values.some((v) => this.compareWith(v, el.value));
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "listbox");
-    TransitionalStyles.instance.apply(this, "gds-listbox");
-    this.addEventListener("gds-select", __privateGet(this, _handleSelect));
-  }
-  /**
-   * Focuses the first selected option in the listbox.
-   * If no option is selected, the first visible option is focused.
-   */
-  focus() {
-    ;
-    (this.visibleSelectedOptionElements[0] || this.visibleOptionElements[0])?.focus();
-  }
-  render() {
-    return html`<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
-  }
-  _rerenderOptions() {
-    this.options.forEach((el) => {
-      el.requestUpdate();
-    });
-  }
-};
-_slotRef = new WeakMap();
-_handleSelect = new WeakMap();
-GdsListbox.styles = ListboxStyles;
-__decorateClass([
-  property({
-    type: Boolean,
-    reflect: true,
-    attribute: "aria-multiselectable",
-    converter: {
-      fromAttribute: Boolean,
-      toAttribute: (value) => value.toString()
-    }
-  })
-], GdsListbox.prototype, "multiple", 2);
-__decorateClass([
-  property()
-], GdsListbox.prototype, "compareWith", 2);
-__decorateClass([
-  watch("multiple")
-], GdsListbox.prototype, "_rerenderOptions", 1);
-GdsListbox = __decorateClass([
-  gdsCustomElement("gds-listbox", { dependsOn: [GdsOption] })
-], GdsListbox);
-export {
-  GdsListbox
-};