@sebgroup/green-core 3.21.0 → 3.21.1

package/components/context-menu/context-menu.component.js

@@ -7,12 +7,12 @@ import {
 } from "../../chunks/chunk.CAV4X6PU.js";
 var _elTriggerBtn, _setupButton, _handleTriggerSlotChange, _renderPopover, _handleItemClick, handleItemClick_fn, _calcMaxHeight;
 import { localized, msg } from "@lit/localize";
-import { css } from "lit";
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { GdsMenuItem } from "../../primitives/menu/menu-item.component.js";
 import { GdsMenu } from "../../primitives/menu/menu.component.js";
+import menuListboxStyle from "../../shared-styles/menu-listbox.style.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
@@ -87,7 +87,7 @@ let GdsContextMenu = class extends withMarginProps(
       @gds-ui-state=${(e) => this.open = e.detail.open}
     >
       <gds-menu
-        class="menu"
+        class="menu-listbox"
         aria-label=${this.label ?? this.buttonLabel}
         @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
       >
@@ -144,14 +144,7 @@ handleItemClick_fn = function() {
   this.open = false;
 };
 _calcMaxHeight = new WeakMap();
-GdsContextMenu.styles = [
-  tokens,
-  css`
-      .menu {
-        overflow: auto;
-      }
-    `
-];
+GdsContextMenu.styles = [tokens, menuListboxStyle];
 GdsContextMenu.shadowRootOptions = {
   mode: "open",
   delegatesFocus: true

package/components/context-menu/context-menu.trans.styles.js

@@ -1,5 +1,7 @@
 import "../../chunks/chunk.CAV4X6PU.js";
-import * as Listbox from "../../primitives/listbox/listbox.trans.styles.js";
+import * as MenuHeading from "../../primitives/menu/menu-heading.trans.styles.js";
+import * as MenuListboxItem from "../../shared-styles/menu-listbox-item.trans.style.js";
+import * as MenuListbox from "../../shared-styles/menu-listbox.trans.style.js";
 import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
 import * as Button from "../button/button.trans.styles.js";
 import * as Popover from "../popover/popover.trans.styles.js";
@@ -7,7 +9,9 @@ import styles from "./context-menu.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-context-menu", styles.toString());
   Popover.register();
-  Listbox.register();
+  MenuListbox.register();
+  MenuListboxItem.register();
+  MenuHeading.register();
   Button.register();
 }
 var context_menu_trans_styles_default = register;

package/components/dropdown/dropdown.component.d.ts

@@ -1,9 +1,12 @@
+import { ListboxKbNavigation } from '../../utils/controllers/listbox-kb-nav-controller';
 import { GdsFormControlElement } from '../form/form-control';
-import type { GdsOption, OptionsContainer } from '../../primitives/listbox/option.component';
-export * from '../../primitives/listbox/option.component';
-declare class Dropdown extends GdsFormControlElement implements OptionsContainer {
+import { GdsOption } from './option.component';
+import type { OptionsContainer } from './option.component';
+export * from './option.component';
+declare class Dropdown extends GdsFormControlElement implements OptionsContainer, ListboxKbNavigation {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    constructor();
     get type(): string;
     /**
      * The supporting text displayed between the label and the field itself.
@@ -122,8 +125,12 @@ declare class Dropdown extends GdsFormControlElement implements OptionsContainer
      * Intended for use in integration tests.
      */
     test_getFieldElement(): Element | null | undefined;
+    /**
+     * The options that keyboard navigation can move between.
+     * @internal
+     */
+    get navigableItems(): GdsOption[];
     private _elTriggerBtn;
-    private _elListbox;
     private _elSearchInput;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -131,8 +138,23 @@ declare class Dropdown extends GdsFormControlElement implements OptionsContainer
     protected _getValidityAnchor(): HTMLElement;
     /**
      * Update value assignment and request update when the light DOM changes.
+     *
+     * `attributeFilter` deliberately excludes `aria-selected`, which the dropdown itself writes to the
+     * options. Observing it would turn every selection into another mutation record.
      */
     private _handleLightDOMChange;
+    protected updated(): void;
+    /**
+     * Options render a checkbox toggle in multiple mode, and read that off their parent.
+     */
+    private _handleMultipleChange;
+    get value(): any;
+    /**
+     * Writes that land while a selection is being dispatched are ignored. Such a write can only have
+     * observed pre-commit state, so honouring it would let a `change` listener anywhere in the
+     * ancestor chain replace the selection before the consumer's own handler reads it.
+     */
+    set value(value: any);
     /**
      * Emits `gds-ui-state`event and does some other house-keeping when the open state changes.
      */

package/components/dropdown/dropdown.component.js

@@ -5,21 +5,24 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, _toggleOptionValue, toggleOptionValue_fn, _syncOptionSelection, syncOptionSelection_fn, _focusListbox, _isCommitting, _commitSelection, commitSelection_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
-import { property, query, queryAsync } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 import { flip, offset } from "@floating-ui/dom";
 import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
 import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component.js";
 import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component.js";
-import { GdsListbox } from "../../primitives/listbox/listbox.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
+import menuListboxStyle from "../../shared-styles/menu-listbox.style.js";
 import { tokens } from "../../tokens.style.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import {
+  ListboxKbNavController
+} from "../../utils/controllers/listbox-kb-nav-controller.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { watch } from "../../utils/decorators/watch.js";
@@ -34,12 +37,27 @@ import { IconChevronBottom } from "../icon/icons/chevron-bottom.component.js";
 import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import { GdsPopover } from "../popover/popover.component.js";
 import DropdownStyles from "./dropdown.styles.js";
-export * from "../../primitives/listbox/option.component.js";
+import { GdsOption } from "./option.component.js";
+export * from "./option.component.js";
 let Dropdown = class extends GdsFormControlElement {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd(this, _shouldShowFooter);
-    __privateAdd(this, _handleSelectionChange);
+    /**
+     * Derives the next multi-select value from the current value rather than from the DOM, so that
+     * `value` stays the only source of truth. Options are listed in DOM order.
+     */
+    __privateAdd(this, _toggleOptionValue);
+    /**
+     * Pushes `value` onto the options. This is one-way on purpose: the selected state of an option is
+     * a projection of `value`, never a source it is read back from.
+     */
+    __privateAdd(this, _syncOptionSelection);
+    /**
+     * Commits a user initiated value change as one synchronous step, so that no re-render or foreign
+     * listener can land between the new value and the events that report it.
+     */
+    __privateAdd(this, _commitSelection);
     __privateAdd(this, _registerAutoCloseListener);
     __privateAdd(this, _unregisterAutoCloseListener);
     this.supportingText = "";
@@ -80,8 +98,9 @@ let Dropdown = class extends GdsFormControlElement {
         e.stopImmediatePropagation();
       }}
         @input=${(e) => {
-        this.value = e.target.value;
-        __privateGet(this, _dispatchInputEvent).call(this);
+        __privateMethod(this, _commitSelection, commitSelection_fn).call(this, e.target.value, {
+          emitChange: false
+        });
         __privateGet(this, _handleSearchFieldInput).call(this, e);
         __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
       }}
@@ -89,10 +108,10 @@ let Dropdown = class extends GdsFormControlElement {
         if (e.key === "ArrowDown") {
           e.preventDefault();
           __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
-          this._elListbox.then((listbox) => listbox.focus());
+          this.updateComplete.then(() => __privateGet(this, _focusListbox).call(this));
         }
         if (e.key === "Enter") {
-          __privateGet(this, _dispatchChangeEvent).call(this);
+          __privateMethod(this, _commitSelection, commitSelection_fn).call(this, this.value, { emitInput: false });
         }
       }}
       />
@@ -157,13 +176,12 @@ let Dropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleClearButton, (e) => {
       e.preventDefault();
       e.stopPropagation();
-      this.value = void 0;
-      this.dispatchCustomEvent("gds-input-cleared", {
-        bubbles: true,
-        composed: true
+      __privateMethod(this, _commitSelection, commitSelection_fn).call(this, void 0, {
+        beforeDispatch: () => this.dispatchCustomEvent("gds-input-cleared", {
+          bubbles: true,
+          composed: true
+        })
       });
-      __privateGet(this, _dispatchInputEvent).call(this);
-      __privateGet(this, _dispatchChangeEvent).call(this);
     });
     /**
      * Event handler for filtering the options in the dropdown.
@@ -191,13 +209,10 @@ let Dropdown = class extends GdsFormControlElement {
      * If found, focus should be moved to the listbox.
      */
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
-      this._elListbox?.then((listbox) => {
-        if (e.key === "ArrowDown" || e.key === "Tab") {
-          e.preventDefault();
-          listbox.focus();
-          return;
-        }
-      });
+      if (e.key === "ArrowDown" || e.key === "Tab") {
+        e.preventDefault();
+        __privateGet(this, _focusListbox).call(this);
+      }
     });
     /**
      * Check for Tab in the listbox.
@@ -215,23 +230,35 @@ let Dropdown = class extends GdsFormControlElement {
       if (triggerButton)
         triggerButton.ariaActiveDescendantElement = e.target;
     });
-    __privateAdd(this, _dispatchInputEvent, () => {
-      this.updateComplete.then(
-        () => this.dispatchStandardEvent("input", {
-          bubbles: true,
-          composed: true
-        })
-      );
+    __privateAdd(this, _handleOptionSelect, (e) => {
+      const option = e.target;
+      if (!this.options.includes(option))
+        return;
+      if (this.multiple) {
+        __privateMethod(this, _commitSelection, commitSelection_fn).call(this, __privateMethod(this, _toggleOptionValue, toggleOptionValue_fn).call(this, option));
+      } else {
+        __privateMethod(this, _commitSelection, commitSelection_fn).call(this, option.value, {
+          beforeDispatch: () => {
+            if (__privateGet(this, _dispatchUISateEvent).call(this, false, "close")) {
+              this.open = false;
+              setTimeout(() => this._elTriggerBtn?.focus(), 0);
+            }
+          }
+        });
+      }
     });
-    __privateAdd(this, _dispatchChangeEvent, () => {
-      this.updateComplete.then(
-        () => this.dispatchCustomEvent("change", {
-          detail: { value: this.value },
-          bubbles: true,
-          composed: true
-        })
-      );
+    /**
+     * The listbox container is the popover's first slotted child, so it receives programmatic focus
+     * and hands it on to an option. Deferred because the popover can open before the dropdown has
+     * rendered the open state, which is what un-hides the options.
+     */
+    __privateAdd(this, _focusListbox, () => {
+      this.updateComplete.then(() => {
+        const items = this.navigableItems;
+        (items.find((o) => o.selected) || items[0])?.focus();
+      });
     });
+    __privateAdd(this, _isCommitting, false);
     /**
      * A listener to close the dropdown when any other element is focused.
      */
@@ -247,6 +274,7 @@ let Dropdown = class extends GdsFormControlElement {
         this._elTriggerBtn?.focus();
       }
     });
+    new ListboxKbNavController(this);
   }
   get type() {
     return "gds-dropdown";
@@ -307,9 +335,17 @@ let Dropdown = class extends GdsFormControlElement {
   test_getFieldElement() {
     return this.shadowRoot?.querySelector("#field");
   }
+  /**
+   * The options that keyboard navigation can move between.
+   * @internal
+   */
+  get navigableItems() {
+    return this.options.filter((o) => !o.hidden);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("blur", __privateGet(this, _handleBlur));
+    TransitionalStyles.instance.applyScoped(this, "gds-dropdown", "t-listbox");
     this.updateComplete.then(() => {
       this._handleLightDOMChange();
       this._handleOpenChange();
@@ -412,17 +448,19 @@ let Dropdown = class extends GdsFormControlElement {
               @input=${__privateGet(this, _handleSearchFieldInput)}
             />`
     )}
-        <gds-listbox
+        <div
           id="listbox"
-          .multiple="${ifDefined(this.multiple)}"
-          .compareWith="${this.compareWith}"
-          .selection="${this.multiple ? this.value : [this.value]}"
-          @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
+          class="menu-listbox"
+          role="listbox"
+          aria-multiselectable="${this.multiple}"
+          tabindex="-1"
+          @focus="${__privateGet(this, _focusListbox)}"
+          @gds-select="${__privateGet(this, _handleOptionSelect)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
           <slot></slot>
-        </gds-listbox>
+        </div>
       </gds-popover>
 
       ${when(
@@ -453,16 +491,37 @@ let Dropdown = class extends GdsFormControlElement {
     if (this.multiple) {
       return;
     }
+    if (this.options.length === 0 && !this.placeholder) {
+      return;
+    }
     if (this.value === void 0) {
       if (this.placeholder)
         this.value = this.placeholder.value;
       else
         this.value = this.options[0]?.value;
     } else if (!this.combobox && !this.placeholder && this.options.find((o) => this.compareWith(o.value, this.value)) === void 0) {
-      this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
   }
+  updated() {
+    __privateMethod(this, _syncOptionSelection, syncOptionSelection_fn).call(this);
+  }
+  _handleMultipleChange() {
+    this.options.forEach((o) => o.requestUpdate());
+  }
+  get value() {
+    return super.value;
+  }
+  /**
+   * Writes that land while a selection is being dispatched are ignored. Such a write can only have
+   * observed pre-commit state, so honouring it would let a `change` listener anywhere in the
+   * ancestor chain replace the selection before the consumer's own handler reads it.
+   */
+  set value(value) {
+    if (__privateGet(this, _isCommitting))
+      return;
+    super.value = value;
+  }
   _handleOpenChange() {
     const open = this.open;
     this.options.forEach((o) => o.hidden = !open);
@@ -497,24 +556,42 @@ _handleSearchFieldInput = new WeakMap();
 _handleSearchFieldKeyDown = new WeakMap();
 _handleListboxKeyDown = new WeakMap();
 _handleOptionFocusChange = new WeakMap();
-_handleSelectionChange = new WeakSet();
-handleSelectionChange_fn = function() {
-  this._elListbox.then((listbox) => {
-    if (this.multiple)
-      this.value = listbox.selection.map((s) => s.value);
-    else {
-      this.value = listbox.selection[0]?.value;
-      if (__privateGet(this, _dispatchUISateEvent).call(this, false, "close")) {
-        this.open = false;
-        setTimeout(() => this._elTriggerBtn?.focus(), 0);
-      }
-    }
-    __privateGet(this, _dispatchInputEvent).call(this);
-    __privateGet(this, _dispatchChangeEvent).call(this);
+_handleOptionSelect = new WeakMap();
+_toggleOptionValue = new WeakSet();
+toggleOptionValue_fn = function(option) {
+  const current = Array.isArray(this.value) ? this.value : [];
+  const isSelected = (v) => current.some((c) => this.compareWith(c, v));
+  const select = !isSelected(option.value);
+  return this.options.filter((o) => o === option ? select : isSelected(o.value)).map((o) => o.value);
+};
+_syncOptionSelection = new WeakSet();
+syncOptionSelection_fn = function() {
+  const values = this.multiple ? Array.isArray(this.value) ? this.value : [] : [this.value];
+  this.options.forEach((o) => {
+    o.selected = values.some((v) => this.compareWith(v, o.value));
   });
 };
-_dispatchInputEvent = new WeakMap();
-_dispatchChangeEvent = new WeakMap();
+_focusListbox = new WeakMap();
+_isCommitting = new WeakMap();
+_commitSelection = new WeakSet();
+commitSelection_fn = function(value, options = {}) {
+  const { emitInput = true, emitChange = true, beforeDispatch } = options;
+  this.value = value;
+  __privateSet(this, _isCommitting, true);
+  try {
+    beforeDispatch?.();
+    if (emitInput)
+      this.dispatchStandardEvent("input", { bubbles: true, composed: true });
+    if (emitChange)
+      this.dispatchCustomEvent("change", {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      });
+  } finally {
+    __privateSet(this, _isCommitting, false);
+  }
+};
 _registerAutoCloseListener = new WeakSet();
 registerAutoCloseListener_fn = function() {
   this.addEventListener("blur", __privateGet(this, _blurCloseListener));
@@ -529,7 +606,12 @@ unregisterAutoCloseListener_fn = function() {
 };
 _blurCloseListener = new WeakMap();
 _tabCloseListener = new WeakMap();
-Dropdown.styles = [tokens, formControlHostStyle, DropdownStyles];
+Dropdown.styles = [
+  tokens,
+  formControlHostStyle,
+  menuListboxStyle,
+  DropdownStyles
+];
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], Dropdown.prototype, "supportingText", 2);
@@ -582,20 +664,21 @@ __decorateClass([
 __decorateClass([
   query("#trigger")
 ], Dropdown.prototype, "_elTriggerBtn", 2);
-__decorateClass([
-  queryAsync("#listbox")
-], Dropdown.prototype, "_elListbox", 2);
 __decorateClass([
   query("#searchinput")
 ], Dropdown.prototype, "_elSearchInput", 2);
 __decorateClass([
   observeLightDOM({
     attributes: true,
+    attributeFilter: ["gds-element", "value", "isplaceholder"],
     childList: true,
     subtree: true,
     characterData: true
   })
 ], Dropdown.prototype, "_handleLightDOMChange", 1);
+__decorateClass([
+  watch("multiple")
+], Dropdown.prototype, "_handleMultipleChange", 1);
 __decorateClass([
   watch("open")
 ], Dropdown.prototype, "_handleOpenChange", 1);
@@ -617,7 +700,7 @@ GdsDropdown = __decorateClass([
       GdsFormControlHeader,
       GdsFormControlFooter,
       GdsFieldBase,
-      GdsListbox,
+      GdsOption,
       GdsPopover,
       IconCheckmark,
       IconChevronBottom,

package/components/dropdown/dropdown.trans.styles.js

@@ -1,10 +1,15 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import * as FieldBase from "../../primitives/field-base/field-base.trans.styles.js";
-import * as Listbox from "../../primitives/listbox/listbox.trans.styles.js";
+import * as MenuHeading from "../../primitives/menu/menu-heading.trans.styles.js";
+import * as MenuListboxItem from "../../shared-styles/menu-listbox-item.trans.style.js";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
 import * as Button from "../button/button.trans.styles.js";
 import * as Popover from "../popover/popover.trans.styles.js";
+import styles from "./dropdown.trans.styles.scss.js";
 function register() {
-  Listbox.register();
+  TransitionalStyles.instance.register("gds-dropdown", styles.toString());
+  MenuListboxItem.register();
+  MenuHeading.register();
   Popover.register();
   Button.register();
   FieldBase.register();

package/{primitives/listbox/listbox.trans.styles.scss.js → components/dropdown/dropdown.trans.styles.scss.js}

@@ -1,2 +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    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  #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  #listbox > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  #listbox > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  #listbox {\n    overflow-y: auto;\n  }\n}";
 export default styles;

package/components/dropdown/index.d.ts

@@ -1,3 +1,3 @@
 export * from './dropdown';
-export * from '../../primitives/listbox/option';
+export * from './option';
 export * from '../../primitives/menu/menu-heading';

package/components/dropdown/index.js

@@ -1,3 +1,3 @@
 export * from "./dropdown.js";
-export * from "../../primitives/listbox/option.js";
+export * from "./option.js";
 export * from "../../primitives/menu/menu-heading.js";

package/{primitives/listbox → components/dropdown}/option.component.d.ts

@@ -10,7 +10,7 @@ declare const GdsOption_base: (new (...args: any[]) => import("lit").LitElement)
  * A listbox option is an option in a listbox widget.
  * This primitive corresponds to the aria `option` role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
  *
- * Can be used together with the `gds-listbox` primitive.
+ * Can be used together with the `gds-dropdown` component.
  *
  * @slot - The default slot. Custom content can be used to display the option.
  *

package/{primitives/listbox → components/dropdown}/option.component.js

@@ -8,16 +8,16 @@ import {
 var _hidden, _emitSelect, emitSelect_fn;
 import { property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import { IconCheckmark } from "../../components/icon/icons/checkmark.component.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import menuListboxItemStyles from "../../shared-styles/menu-listbox-item.style.js";
 import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
 import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/index.js";
 import { Focusable } from "../../utils/mixins/focusable.js";
-import OptionStyles from "./option.styles.js";
+import { IconCheckmark } from "../icon/icons/checkmark.component.js";
 let GdsOption = class extends Focusable(GdsElement) {
   constructor() {
     super();
@@ -94,7 +94,7 @@ emitSelect_fn = function(e) {
     }
   });
 };
-GdsOption.styles = [tokens, rbcbToggleStyles, OptionStyles];
+GdsOption.styles = [tokens, rbcbToggleStyles, menuListboxItemStyles];
 __decorateClass([
   property()
 ], GdsOption.prototype, "value", 2);
@@ -107,7 +107,13 @@ __decorateClass([
 __decorateClass([
   property({
     attribute: "aria-selected",
-    reflect: true
+    reflect: true,
+    // `aria-selected` is an enumerated attribute, not a boolean one: it is authored as the literal
+    // strings "true" and "false", and has to stay present in both states.
+    converter: {
+      fromAttribute: (value) => value === "true",
+      toAttribute: (value) => value ? "true" : "false"
+    }
   })
 ], GdsOption.prototype, "selected", 2);
 __decorateClass([

package/components/index.d.ts

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

package/components/index.js

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