@api-client/ui 0.5.24 → 0.5.25

package/build/src/md/menu/internal/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state, queryAssignedElements } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { nanoid } from 'nanoid'\nimport UiList from '../../list/internals/List.js'\nimport UiMenuItem from './MenuItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\nexport default class Menu extends UiList {\n  /**\n   * Whether the menu is currently open\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  /**\n   * Whether the menu is disabled\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Currently active sub-menu\n   */\n  @state() accessor activeSubMenu: UiSubMenu | null = null\n\n  /**\n   * Assigned menu items from light DOM\n   */\n  @queryAssignedElements({ selector: 'ui-menu-item' }) protected accessor assignedMenuItems!: UiMenuItem[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-menu-item'\n    this.ariaExpanded = 'false'\n    this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('tabindex', '-1')\n    if (!this.hasAttribute('popover')) {\n      this.setAttribute('popover', 'auto')\n    }\n    if (!this.id) {\n      this.id = nanoid()\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n  }\n\n  override togglePopover(force?: boolean): boolean {\n    this.open = !this.open\n    this.ariaExpanded = String(this.open)\n    this.tabIndex = this.open ? 0 : -1\n    const result = super.togglePopover(force)\n    if (this.open) {\n      this.positionMenu()\n      this.focus()\n    }\n    return result\n  }\n\n  /**\n   * Shows the menu\n   */\n  show(): void {\n    this.tabIndex = 0 // Make menu focusable\n    this.ariaExpanded = 'true'\n    this.showPopover()\n    this.open = true\n    this.positionMenu()\n    this.focus()\n    this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Hides the menu\n   */\n  hide(): void {\n    this.tabIndex = -1\n    this.ariaExpanded = 'false'\n    this.hidePopover()\n    this.open = false\n    this.closeSubMenu()\n    this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n  }\n\n  positionMenu(): void {\n    // Let CSS anchor positioning handle the positioning automatically\n    // Only intervene if we need to set max-height for overflow cases\n    const box = this.getBoundingClientRect()\n    const menuBottom = box.top + box.height\n    const menuRight = box.left + box.width\n\n    // Reset any previous manual positioning to let CSS anchor positioning work\n    this.style.removeProperty('position-area')\n    this.style.removeProperty('max-height')\n\n    // Detect if menu is positioned above or below the anchor\n    // by checking if the menu is in the upper or lower half of the viewport\n    const viewportMiddle = innerHeight / 2\n    const isMenuInUpperHalf = box.top < viewportMiddle\n\n    // Add CSS class to control animation direction\n    if (isMenuInUpperHalf) {\n      this.classList.add('menu-positioned-above')\n      this.classList.remove('menu-positioned-below')\n    } else {\n      this.classList.add('menu-positioned-below')\n      this.classList.remove('menu-positioned-above')\n    }\n\n    // Only set max-height if the menu would overflow\n    if (menuBottom > innerHeight) {\n      const availableHeight = innerHeight - box.top\n      this.style.maxHeight = `${Math.max(200, availableHeight - 20)}px`\n    }\n\n    if (menuRight > innerWidth) {\n      const availableWidth = innerWidth - box.left\n      // Let CSS anchor positioning handle horizontal flipping\n      // We could set max-width if needed\n      if (availableWidth < 200) {\n        this.style.maxWidth = `${Math.max(180, availableWidth - 20)}px`\n      }\n    }\n  }\n\n  /**\n   * Handles beforetoggle event from popover\n   */\n  protected handleBeforeToggle(e: Event): void {\n    const toggleEvent = e as ToggleEvent\n    if (toggleEvent.newState === 'closed') {\n      this.open = false\n      this.closeSubMenu()\n    }\n  }\n\n  /**\n   * Handles keyboard navigation for the menu\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        break\n      case 'ArrowRight':\n        e.preventDefault()\n        this.openSubMenu()\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.closeSubMenu()\n        break\n      default:\n        // Let the parent UiList handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  @bound\n  handleSubMenuSelect(e: CustomEvent): void {\n    super.notifySelect(e.detail.item, e.detail.index)\n  }\n\n  /**\n   * Opens the sub-menu for the currently active item\n   */\n  protected openSubMenu(): void {\n    const activeItem = this.activeListItem as UiMenuItem\n    if (activeItem?.hasSubMenu) {\n      activeItem.openSubMenu()\n    }\n  }\n\n  /**\n   * Closes the currently open sub-menu\n   */\n  closeSubMenu(): void {\n    if (this.activeSubMenu) {\n      this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect as EventListener)\n      this.activeSubMenu.hide()\n      this.activeSubMenu = null\n    }\n  }\n\n  /**\n   * Sets the active sub-menu\n   */\n  setActiveSubMenu(subMenu: UiSubMenu | null): void {\n    this.activeSubMenu = subMenu\n    subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)\n  }\n\n  override notifySelect(item: UiListItem, index?: number): boolean {\n    // Handle single selection\n    if (item instanceof UiMenuItem) {\n      this.clearSelection()\n      item.selected = true\n    }\n\n    this.hide()\n    return super.notifySelect(item, index)\n  }\n\n  /**\n   * Clears selection from all menu items\n   */\n  protected clearSelection(): void {\n    this.assignedMenuItems.forEach((menuItem) => {\n      menuItem.selected = false\n    })\n  }\n\n  /**\n   * Gets the currently selected menu item\n   */\n  get selectedItem(): UiMenuItem | null {\n    return this.assignedMenuItems.find((item) => item.selected) || null\n  }\n\n  /**\n   * Sets the selected menu item\n   */\n  setSelectedItem(item: UiMenuItem | null): void {\n    this.clearSelection()\n    if (item) {\n      item.selected = true\n    }\n  }\n\n  /**\n   * Handles sub-menu opening\n   */\n  protected handleSubMenuOpen(e: CustomEvent): void {\n    const subMenu = e.detail.subMenu\n    this.setActiveSubMenu(subMenu)\n  }\n\n  /**\n   * Handles slot changes to update menu items\n   */\n  protected handleSlotChange(): void {\n    // Update the items list when slot content changes\n    this.updateItems()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'menu-container': true,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { nanoid } from 'nanoid'\nimport UiList from '../../list/internals/List.js'\nimport UiMenuItem from './MenuItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\nexport default class Menu extends UiList {\n  /**\n   * Whether the menu is currently open\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  /**\n   * Whether the menu is disabled\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Currently active sub-menu\n   */\n  @state() accessor activeSubMenu: UiSubMenu | null = null\n\n  constructor() {\n    super()\n    this.selector = 'ui-menu-item'\n    this.ariaExpanded = 'false'\n    this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('tabindex', '-1')\n    if (!this.hasAttribute('popover')) {\n      this.setAttribute('popover', 'auto')\n    }\n    if (!this.id) {\n      this.id = nanoid()\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n  }\n\n  override togglePopover(force?: boolean): boolean {\n    this.open = !this.open\n    this.ariaExpanded = String(this.open)\n    this.tabIndex = this.open ? 0 : -1\n    const result = super.togglePopover(force)\n    if (this.open) {\n      this.positionMenu()\n      this.focus()\n    }\n    return result\n  }\n\n  protected queryMenuItems(): UiMenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot')\n    if (!slot) return []\n    const { selector } = this\n    return Array.from(slot.assignedElements({ flatten: true })).filter((el) => el.matches(selector)) as UiMenuItem[]\n  }\n\n  show(): void {\n    this.showPopover()\n  }\n\n  hide(): void {\n    this.hidePopover()\n  }\n\n  /**\n   * Shows the menu\n   */\n  override showPopover(): void {\n    this.tabIndex = 0 // Make menu focusable\n    this.ariaExpanded = 'true'\n    super.showPopover()\n    this.open = true\n    this.positionMenu()\n    this.focus()\n    this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Hides the menu\n   */\n  override hidePopover(): void {\n    this.tabIndex = -1\n    this.ariaExpanded = 'false'\n    super.hidePopover()\n    this.open = false\n    this.closeSubMenu()\n    this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n  }\n\n  positionMenu(): void {\n    // Let CSS anchor positioning handle the positioning automatically\n    // Only intervene if we need to set max-height for overflow cases\n    const box = this.getBoundingClientRect()\n    const menuBottom = box.top + box.height\n    const menuRight = box.left + box.width\n\n    // Reset any previous manual positioning to let CSS anchor positioning work\n    this.style.removeProperty('position-area')\n    this.style.removeProperty('max-height')\n\n    // Detect if menu is positioned above or below the anchor\n    // by checking if the menu is in the upper or lower half of the viewport\n    const viewportMiddle = innerHeight / 2\n    const isMenuInUpperHalf = box.top < viewportMiddle\n\n    // Add CSS class to control animation direction\n    if (isMenuInUpperHalf) {\n      this.classList.add('menu-positioned-above')\n      this.classList.remove('menu-positioned-below')\n    } else {\n      this.classList.add('menu-positioned-below')\n      this.classList.remove('menu-positioned-above')\n    }\n\n    // Only set max-height if the menu would overflow\n    if (menuBottom > innerHeight) {\n      const availableHeight = innerHeight - box.top\n      this.style.maxHeight = `${Math.max(200, availableHeight - 20)}px`\n    }\n\n    if (menuRight > innerWidth) {\n      const availableWidth = innerWidth - box.left\n      // Let CSS anchor positioning handle horizontal flipping\n      // We could set max-width if needed\n      if (availableWidth < 200) {\n        this.style.maxWidth = `${Math.max(180, availableWidth - 20)}px`\n      }\n    }\n  }\n\n  /**\n   * Handles beforetoggle event from popover\n   */\n  protected handleBeforeToggle(e: Event): void {\n    const toggleEvent = e as ToggleEvent\n    if (toggleEvent.newState === 'closed') {\n      this.open = false\n      this.closeSubMenu()\n    }\n  }\n\n  /**\n   * Handles keyboard navigation for the menu\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        break\n      case 'ArrowRight':\n        e.preventDefault()\n        this.openSubMenu()\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.closeSubMenu()\n        break\n      default:\n        // Let the parent UiList handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  @bound\n  handleSubMenuSelect(e: CustomEvent): void {\n    super.notifySelect(e.detail.item, e.detail.index)\n  }\n\n  /**\n   * Opens the sub-menu for the currently active item\n   */\n  protected openSubMenu(): void {\n    const activeItem = this.activeListItem as UiMenuItem\n    if (activeItem?.hasSubMenu) {\n      activeItem.openSubMenu()\n    }\n  }\n\n  /**\n   * Closes the currently open sub-menu\n   */\n  closeSubMenu(): void {\n    if (this.activeSubMenu) {\n      this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect as EventListener)\n      this.activeSubMenu.hide()\n      this.activeSubMenu = null\n    }\n  }\n\n  /**\n   * Sets the active sub-menu\n   */\n  setActiveSubMenu(subMenu: UiSubMenu | null): void {\n    this.activeSubMenu = subMenu\n    subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)\n  }\n\n  override notifySelect(item: UiListItem & { selected?: boolean }, index?: number): boolean {\n    // Handle single selection\n    this.clearSelection()\n    item.selected = true\n    this.hide()\n    return super.notifySelect(item, index)\n  }\n\n  /**\n   * Clears selection from all menu items\n   */\n  protected clearSelection(): void {\n    const items = this.queryMenuItems()\n    items.forEach((menuItem) => {\n      menuItem.selected = false\n    })\n  }\n\n  /**\n   * Gets the currently selected menu item\n   */\n  get selectedItem(): UiMenuItem | null {\n    const items = this.queryMenuItems()\n    return items.find((item) => item.selected) || null\n  }\n\n  /**\n   * Sets the selected menu item\n   */\n  setSelectedItem(item: UiMenuItem | null): void {\n    this.clearSelection()\n    if (item) {\n      item.selected = true\n    }\n  }\n\n  /**\n   * Handles sub-menu opening\n   */\n  protected handleSubMenuOpen(e: CustomEvent): void {\n    const subMenu = e.detail.subMenu\n    this.setActiveSubMenu(subMenu)\n  }\n\n  /**\n   * Handles slot changes to update menu items\n   */\n  protected handleSlotChange(): void {\n    // Update the items list when slot content changes\n    this.updateItems()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'menu-container': true,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/select/index.d.ts

@@ -0,0 +1,4 @@
+export { UiSelectElement } from './ui-select.js';
+export { UiOptionElement } from './ui-option.js';
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js';
+//# sourceMappingURL=index.d.ts.map

package/build/src/md/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/md/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA"}

package/build/src/md/select/index.js

@@ -0,0 +1,3 @@
+export { UiSelectElement } from './ui-select.js';
+export { UiOptionElement } from './ui-option.js';
+//# sourceMappingURL=index.js.map

package/build/src/md/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/md/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA","sourcesContent":["export { UiSelectElement } from './ui-select.js'\nexport { UiOptionElement } from './ui-option.js'\nexport type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'\n"]}

package/build/src/md/select/internals/Option.d.ts

@@ -0,0 +1,125 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import UiListItem from '../../list/internals/ListItem.js';
+/**
+ * Material Design 3 Select Option component.
+ *
+ * The `ui-option` component represents a selectable item within a `ui-select` dropdown.
+ * It extends `UiListItem` to provide consistent styling and behavior with other list components.
+ *
+ * @slot - The option content (label, icon, etc.)
+ * @slot start - Content to display at the start of the option (icon, avatar, etc.)
+ * @slot end - Content to display at the end of the option
+ * @slot supporting-text - Supporting text below the main content
+ * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail
+ *
+ * @example
+ * Basic option
+ * ```html
+ * <ui-option value="apple">Apple</ui-option>
+ * ```
+ *
+ * @example
+ * Option with supporting text
+ * ```html
+ * <ui-option value="john" lines="two">
+ *   John Doe
+ *   <span slot="supporting-text">john@example.com</span>
+ * </ui-option>
+ * ```
+ */
+export default class UiOption extends UiListItem {
+    /**
+     * The value associated with this option. Used to identify the option when selected.
+     * This value is what gets set on the parent select element when this option is chosen.
+     *
+     * @example
+     * ```html
+     * <ui-option value="apple">Apple</ui-option>
+     * <ui-option value="banana">Banana</ui-option>
+     * ```
+     */
+    accessor value: string | undefined;
+    /**
+     * Whether this option is currently selected. This is typically managed automatically
+     * by the parent select component, but can be set manually for styling purposes.
+     *
+     * @default false
+     * @example
+     * ```html
+     * <ui-option value="apple" selected>Apple</ui-option>
+     * ```
+     */
+    accessor selected: boolean;
+    /**
+     * Returns the text representation of this option for display purposes.
+     * This method extracts and combines text content from all child nodes,
+     * including special handling for ui-icon elements.
+     *
+     * @readonly
+     * @returns {string} The rendered text value of the option
+     * @example
+     * ```javascript
+     * const option = document.querySelector('ui-option');
+     * console.log('Option text:', option.renderValue);
+     * ```
+     */
+    get renderValue(): string;
+    /**
+     * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
+     * and generates a unique ID if one isn't provided.
+     *
+     * @protected
+     */
+    connectedCallback(): void;
+    /**
+     * Handles property updates and triggers appropriate side effects.
+     * Currently monitors the `selected` property to update selection state.
+     *
+     * @param {PropertyValues<this>} changedProperties - Map of changed properties
+     * @protected
+     */
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Updates the visual and accessibility state when selection changes.
+     * Adds/removes CSS classes and ARIA attributes based on selection state.
+     *
+     * @protected
+     * @example
+     * ```javascript
+     * // This is called automatically when the selected property changes
+     * option.selected = true; // Will trigger updateSelectionState()
+     * ```
+     */
+    protected updateSelectionState(): void;
+    /**
+     * Handles click events on the option. Prevents default behavior and dispatches
+     * a custom 'select' event that the parent select component can listen to.
+     *
+     * @param {MouseEvent} e - The click event
+     * @protected
+     * @fires select - Custom event with option details in event.detail
+     * @example
+     * ```javascript
+     * // Listen for option selection
+     * option.addEventListener('select', (e) => {
+     *   console.log('Selected option:', e.detail.item);
+     *   console.log('Selected value:', e.detail.value);
+     * });
+     * ```
+     */
+    handleClick(e: MouseEvent): void;
+    /**
+     * Renders the option's template. Creates the main structure with focus ring,
+     * ripple effect, and content areas.
+     *
+     * @returns {TemplateResult} The rendered template
+     * @protected
+     */
+    protected render(): TemplateResult;
+    /**
+     * Renders the end section of the option, including the selection check icon
+     * when the option is selected.
+     */
+    protected renderEnd(): TemplateResult;
+}
+//# sourceMappingURL=Option.d.ts.map

package/build/src/md/select/internals/Option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC9C;;;;;;;;;OASG;IACwC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAE7E;;;;;;;;;OASG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;;;;;;;;;OAYG;IACH,IAAI,WAAW,IAAI,MAAM,CAkBxB;IAED;;;;;OAKG;IACM,iBAAiB,IAAI,IAAI;IAQlC;;;;;;OAMG;cACgB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQzE;;;;;;;;;;OAUG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAUtC;;;;;;;;;;;;;;;OAeG;IACM,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAoBzC;;;;;;OAMG;cACgB,MAAM,IAAI,cAAc;IAY3C;;;OAGG;cACgB,SAAS,IAAI,cAAc;CAS/C"}

package/build/src/md/select/internals/Option.js

@@ -0,0 +1,242 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import UiListItem from '../../list/internals/ListItem.js';
+import { nanoid } from 'nanoid';
+let UiOption = (() => {
+    let _classSuper = UiListItem;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    return class UiOption extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: String, reflect: true })];
+            _selected_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
+        /**
+         * The value associated with this option. Used to identify the option when selected.
+         * This value is what gets set on the parent select element when this option is chosen.
+         *
+         * @example
+         * ```html
+         * <ui-option value="apple">Apple</ui-option>
+         * <ui-option value="banana">Banana</ui-option>
+         * ```
+         */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #selected_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selected_initializers, false
+        /**
+         * Returns the text representation of this option for display purposes.
+         * This method extracts and combines text content from all child nodes,
+         * including special handling for ui-icon elements.
+         *
+         * @readonly
+         * @returns {string} The rendered text value of the option
+         * @example
+         * ```javascript
+         * const option = document.querySelector('ui-option');
+         * console.log('Option text:', option.renderValue);
+         * ```
+         */
+        ));
+        /**
+         * Whether this option is currently selected. This is typically managed automatically
+         * by the parent select component, but can be set manually for styling purposes.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <ui-option value="apple" selected>Apple</ui-option>
+         * ```
+         */
+        get selected() { return this.#selected_accessor_storage; }
+        set selected(value) { this.#selected_accessor_storage = value; }
+        /**
+         * Returns the text representation of this option for display purposes.
+         * This method extracts and combines text content from all child nodes,
+         * including special handling for ui-icon elements.
+         *
+         * @readonly
+         * @returns {string} The rendered text value of the option
+         * @example
+         * ```javascript
+         * const option = document.querySelector('ui-option');
+         * console.log('Option text:', option.renderValue);
+         * ```
+         */
+        get renderValue() {
+            const slot = this.shadowRoot?.querySelector('slot:not([name])');
+            if (!slot)
+                return this.value || '';
+            const nodes = slot.assignedNodes({ flatten: true });
+            const content = [];
+            for (const node of nodes) {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    content.push(node.textContent || '');
+                }
+                else if (node.nodeType === Node.ELEMENT_NODE) {
+                    const element = node;
+                    if (element.tagName.toLowerCase() === 'ui-icon') {
+                        content.push(element.getAttribute('icon') || '');
+                    }
+                    else {
+                        content.push(element.textContent || '');
+                    }
+                }
+            }
+            return content.join(' ').trim() || this.value || '';
+        }
+        /**
+         * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
+         * and generates a unique ID if one isn't provided.
+         *
+         * @protected
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('role', 'option');
+            if (!this.id) {
+                this.id = `option-${nanoid(6)}`;
+            }
+        }
+        /**
+         * Handles property updates and triggers appropriate side effects.
+         * Currently monitors the `selected` property to update selection state.
+         *
+         * @param {PropertyValues<this>} changedProperties - Map of changed properties
+         * @protected
+         */
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('selected')) {
+                this.updateSelectionState();
+            }
+        }
+        /**
+         * Updates the visual and accessibility state when selection changes.
+         * Adds/removes CSS classes and ARIA attributes based on selection state.
+         *
+         * @protected
+         * @example
+         * ```javascript
+         * // This is called automatically when the selected property changes
+         * option.selected = true; // Will trigger updateSelectionState()
+         * ```
+         */
+        updateSelectionState() {
+            if (this.selected) {
+                this.classList.add('selected');
+                this.setAttribute('aria-selected', 'true');
+            }
+            else {
+                this.classList.remove('selected');
+                this.setAttribute('aria-selected', 'false');
+            }
+        }
+        /**
+         * Handles click events on the option. Prevents default behavior and dispatches
+         * a custom 'select' event that the parent select component can listen to.
+         *
+         * @param {MouseEvent} e - The click event
+         * @protected
+         * @fires select - Custom event with option details in event.detail
+         * @example
+         * ```javascript
+         * // Listen for option selection
+         * option.addEventListener('select', (e) => {
+         *   console.log('Selected option:', e.detail.item);
+         *   console.log('Selected value:', e.detail.value);
+         * });
+         * ```
+         */
+        handleClick(e) {
+            e.preventDefault();
+            if (this.disabled) {
+                e.stopPropagation();
+                return;
+            }
+            // Let the parent handle the selection
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: {
+                    item: this,
+                    value: this.value,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Renders the option's template. Creates the main structure with focus ring,
+         * ripple effect, and content areas.
+         *
+         * @returns {TemplateResult} The rendered template
+         * @protected
+         */
+        render() {
+            const surfaceClasses = classMap({
+                surface: true,
+                selected: this.selected,
+            });
+            return html `
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
+    `;
+        }
+        /**
+         * Renders the end section of the option, including the selection check icon
+         * when the option is selected.
+         */
+        renderEnd() {
+            return html `
+      <div class="end">
+        ${this.selected ? html `<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
+        <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="end-text" class="trailing-supporting-text"></slot>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _selected_extraInitializers);
+        }
+    };
+})();
+/**
+ * Material Design 3 Select Option component.
+ *
+ * The `ui-option` component represents a selectable item within a `ui-select` dropdown.
+ * It extends `UiListItem` to provide consistent styling and behavior with other list components.
+ *
+ * @slot - The option content (label, icon, etc.)
+ * @slot start - Content to display at the start of the option (icon, avatar, etc.)
+ * @slot end - Content to display at the end of the option
+ * @slot supporting-text - Supporting text below the main content
+ * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail
+ *
+ * @example
+ * Basic option
+ * ```html
+ * <ui-option value="apple">Apple</ui-option>
+ * ```
+ *
+ * @example
+ * Option with supporting text
+ * ```html
+ * <ui-option value="john" lines="two">
+ *   John Doe
+ *   <span slot="supporting-text">john@example.com</span>
+ * </ui-option>
+ * ```
+ */
+export default UiOption;
+//# sourceMappingURL=Option.js.map

package/build/src/md/select/internals/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { nanoid } from 'nanoid'\n\n/**\n * Material Design 3 Select Option component.\n *\n * The `ui-option` component represents a selectable item within a `ui-select` dropdown.\n * It extends `UiListItem` to provide consistent styling and behavior with other list components.\n *\n * @slot - The option content (label, icon, etc.)\n * @slot start - Content to display at the start of the option (icon, avatar, etc.)\n * @slot end - Content to display at the end of the option\n * @slot supporting-text - Supporting text below the main content\n * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail\n *\n * @example\n * Basic option\n * ```html\n * <ui-option value=\"apple\">Apple</ui-option>\n * ```\n *\n * @example\n * Option with supporting text\n * ```html\n * <ui-option value=\"john\" lines=\"two\">\n *   John Doe\n *   <span slot=\"supporting-text\">john@example.com</span>\n * </ui-option>\n * ```\n */\nexport default class UiOption extends UiListItem {\n  /**\n   * The value associated with this option. Used to identify the option when selected.\n   * This value is what gets set on the parent select element when this option is chosen.\n   *\n   * @example\n   * ```html\n   * <ui-option value=\"apple\">Apple</ui-option>\n   * <ui-option value=\"banana\">Banana</ui-option>\n   * ```\n   */\n  @property({ type: String, reflect: true }) accessor value: string | undefined\n\n  /**\n   * Whether this option is currently selected. This is typically managed automatically\n   * by the parent select component, but can be set manually for styling purposes.\n   *\n   * @default false\n   * @example\n   * ```html\n   * <ui-option value=\"apple\" selected>Apple</ui-option>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * Returns the text representation of this option for display purposes.\n   * This method extracts and combines text content from all child nodes,\n   * including special handling for ui-icon elements.\n   *\n   * @readonly\n   * @returns {string} The rendered text value of the option\n   * @example\n   * ```javascript\n   * const option = document.querySelector('ui-option');\n   * console.log('Option text:', option.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    if (!slot) return this.value || ''\n    const nodes = slot.assignedNodes({ flatten: true })\n    const content: string[] = []\n    for (const node of nodes) {\n      if (node.nodeType === Node.TEXT_NODE) {\n        content.push(node.textContent || '')\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        const element = node as HTMLElement\n        if (element.tagName.toLowerCase() === 'ui-icon') {\n          content.push(element.getAttribute('icon') || '')\n        } else {\n          content.push(element.textContent || '')\n        }\n      }\n    }\n    return content.join(' ').trim() || this.value || ''\n  }\n\n  /**\n   * Initializes the option when it's connected to the DOM. Sets up ARIA attributes\n   * and generates a unique ID if one isn't provided.\n   *\n   * @protected\n   */\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'option')\n    if (!this.id) {\n      this.id = `option-${nanoid(6)}`\n    }\n  }\n\n  /**\n   * Handles property updates and triggers appropriate side effects.\n   * Currently monitors the `selected` property to update selection state.\n   *\n   * @param {PropertyValues<this>} changedProperties - Map of changed properties\n   * @protected\n   */\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('selected')) {\n      this.updateSelectionState()\n    }\n  }\n\n  /**\n   * Updates the visual and accessibility state when selection changes.\n   * Adds/removes CSS classes and ARIA attributes based on selection state.\n   *\n   * @protected\n   * @example\n   * ```javascript\n   * // This is called automatically when the selected property changes\n   * option.selected = true; // Will trigger updateSelectionState()\n   * ```\n   */\n  protected updateSelectionState(): void {\n    if (this.selected) {\n      this.classList.add('selected')\n      this.setAttribute('aria-selected', 'true')\n    } else {\n      this.classList.remove('selected')\n      this.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  /**\n   * Handles click events on the option. Prevents default behavior and dispatches\n   * a custom 'select' event that the parent select component can listen to.\n   *\n   * @param {MouseEvent} e - The click event\n   * @protected\n   * @fires select - Custom event with option details in event.detail\n   * @example\n   * ```javascript\n   * // Listen for option selection\n   * option.addEventListener('select', (e) => {\n   *   console.log('Selected option:', e.detail.item);\n   *   console.log('Selected value:', e.detail.value);\n   * });\n   * ```\n   */\n  override handleClick(e: MouseEvent): void {\n    e.preventDefault()\n    if (this.disabled) {\n      e.stopPropagation()\n      return\n    }\n\n    // Let the parent handle the selection\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: {\n          item: this,\n          value: this.value,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * Renders the option's template. Creates the main structure with focus ring,\n   * ripple effect, and content areas.\n   *\n   * @returns {TemplateResult} The rendered template\n   * @protected\n   */\n  protected override render(): TemplateResult {\n    const surfaceClasses = classMap({\n      surface: true,\n      selected: this.selected,\n    })\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <div class=\"${surfaceClasses}\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n    `\n  }\n\n  /**\n   * Renders the end section of the option, including the selection check icon\n   * when the option is selected.\n   */\n  protected override renderEnd(): TemplateResult {\n    return html`\n      <div class=\"end\">\n        ${this.selected ? html`<ui-icon icon=\"check\" class=\"selection-icon\"></ui-icon>` : ''}\n        <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n        <slot name=\"end-text\" class=\"trailing-supporting-text\"></slot>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/select/internals/Option.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=Option.styles.d.ts.map

package/build/src/md/select/internals/Option.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.styles.ts"],"names":[],"mappings":";AAEA,wBAwIC"}

package/build/src/md/select/internals/Option.styles.js

@@ -0,0 +1,139 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    height: 56px;
+    outline: none;
+    cursor: default;
+    position: relative;
+
+    --md-focus-ring-shape-end-end: 0px;
+    --md-focus-ring-shape-end-start: 0px;
+    --md-focus-ring-shape-start-end: 0px;
+    --md-focus-ring-shape-start-start: 0px;
+
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .surface {
+    height: inherit;
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    padding: 8px 16px 8px 16px;
+    gap: 12px;
+  }
+
+  .surface.selected {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .ripple {
+    z-index: 3;
+  }
+
+  .headline {
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: flex;
+    align-items: center;
+  }
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+
+    font-family: var(--md-sys-typescale-body-medium-font);
+    font-weight: var(--md-sys-typescale-body-medium-weight);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+
+    overflow: hidden;
+  }
+
+  .supporting-text ::slotted(*),
+  slot[name='end-text']::slotted(*) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  slot[name='end-text']::slotted(*) {
+    margin-right: 8px;
+    margin-left: 16px;
+  }
+
+  :host slot[name='end']::slotted(*) {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    margin-left: 16px;
+  }
+
+  :host slot[name='start']::slotted(*) {
+    display: block;
+    margin-right: 16px;
+  }
+
+  :host([image='icon']) slot[name='start']::slotted(*) {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([image='avatar']) slot[name='start']::slotted(*) {
+    width: 40px;
+    height: 40px;
+  }
+
+  :host([image='image']) slot[name='start']::slotted(*) {
+    width: 56px;
+    height: 56px;
+  }
+
+  :host([image='video']) slot[name='start']::slotted(*) {
+    width: 114px;
+    height: 64px;
+  }
+
+  .body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .end {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .selection-icon {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host(.highlight) .surface {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+  }
+`;
+//# sourceMappingURL=Option.styles.js.map

package/build/src/md/select/internals/Option.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n    position: relative;\n\n    --md-focus-ring-shape-end-end: 0px;\n    --md-focus-ring-shape-end-start: 0px;\n    --md-focus-ring-shape-start-end: 0px;\n    --md-focus-ring-shape-start-start: 0px;\n\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .surface {\n    height: inherit;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n\n    padding: 8px 16px 8px 16px;\n    gap: 12px;\n  }\n\n  .surface.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  .headline {\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .end {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .selection-icon {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host(.highlight) .surface {\n    background-color: var(--md-sys-color-tertiary-container);\n    color: var(--md-sys-color-on-tertiary-container);\n  }\n`\n"]}