solid-ui 3.1.3-5 → 3.1.3-7

package/dist/v2/components/forms/select/Select.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/select/Select.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { render as renderPortal } from 'lit/html.js'\nimport { downArrowIcon } from '../shared/downArrow'\nimport { renderListbox } from '../shared/listboxTemplate'\nimport { SelectOption } from '../shared/optionTypes'\nimport { listboxStyles } from '../shared/listboxStyles'\nimport {\n  findOptionIndexByValue,\n  getFirstEnabledIndex,\n  getLastEnabledIndex,\n  getListboxActionFromKey,\n  getNextEnabledIndex\n} from '../shared/keyboard'\n\n/* The following keyboard navigation and ARIA support for Select\n  were generated by AI Model: GPT-5.4 */\n/* Prompt: can you wire up the keyboard interactions and aria attributes for Select */\nexport class Select extends LitElement {\n  private static _nextId = 0\n  private _popupPortalHost: HTMLDivElement | null = null\n  private _popupPortalRoot: ShadowRoot | null = null\n  private _popupPortalContainer: Element | null = null\n  private readonly _handleDocumentPointerDown = (event: Event) => {\n    const eventTarget = event.target\n\n    if (!this._popupOpen || !(eventTarget instanceof Node)) {\n      return\n    }\n\n    const eventPath =\n      'composedPath' in event\n        ? (\n            event as Event & { composedPath: () => EventTarget[] }\n          ).composedPath()\n        : []\n\n    if (eventPath.includes(this)) {\n      return\n    }\n\n    if (\n      (this._popupPortalHost && eventPath.includes(this._popupPortalHost)) ||\n      (this._popupPortalRoot && eventPath.includes(this._popupPortalRoot))\n    ) {\n      return\n    }\n\n    if (!this.contains(eventTarget)) {\n      this._closePopup()\n    }\n  }\n\n  private readonly _handleViewportChange = () => {\n    if (!this._popupOpen) return\n    this._updatePopupPosition()\n  }\n\n  static properties = {\n    label: { type: String, reflect: true },\n    theme: { type: String, reflect: true },\n    options: { type: Array, attribute: false },\n    layout: { type: String, reflect: true },\n    value: { type: String, reflect: true },\n    _popupOpen: { state: true },\n    _activeIndex: { state: true }\n  }\n\n  static styles = [\n    listboxStyles,\n    css`\n      :host {\n        /* default theme */\n        display: block;\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        position: relative;\n        z-index: var(--select-z-index, 400);\n        box-sizing: border-box;\n        --select-open-z-index: 1000;\n        --select-popup-z-index: 1001;\n        --select-popup-background: var(--color-background, #f8f9fb);\n        --select-trigger-background: var(--color-background, #f8f9fb);\n        --select-trigger-toggle-hover-background: var(\n          --color-header-menu-item-hover,\n          #e6dcff\n        );\n        --input-background: var(--color-background, #f8f9fb);\n        --input-text: var(--color-text, #1a1a1a);\n        --input-border: var(--color-border-button-hover, var(--gray-400, #99A1AF));\n        --label-color: var(--grey-purple-700, #1a1a1a);\n        --placeholder-color: var(--grey-purple-700, #5e546d);\n        --select-trigger-text: var(--input-text);\n        --popup-background: var(--select-popup-background);\n        --popup-text: var(--color-text, #1a1a1a);\n        --popup-border: var(--color-border, #e5e7eb);\n        --popup-shadow: var(\n          --box-shadow-sm,\n          0 1px 4px rgba(124, 77, 255, 0.12)\n        );\n      }\n\n      :host([theme='dark']) {\n        display: block;\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        position: relative;\n        z-index: var(--select-z-index, 900);\n        box-sizing: border-box;\n        --select-open-z-index: 1000;\n        --select-popup-z-index: 1001;\n        --select-popup-background: var(--color-background, #1a1a1a);\n        --select-trigger-background: var(--color-background, #1a1a1a);\n        --select-trigger-toggle-hover-background: var(\n          --color-header-menu-item-hover,\n          #e6dcff\n        );\n        --input-background: var(--color-background, #1a1a1a);\n        --input-text: var(--color-text, #f8f9fb);\n        --input-border: var(--color-border-button-hover, var(--gray-400, #99A1AF));\n        --label-color: var(--grey-purple-700, #f8f9fb);\n        --placeholder-color: var(--grey-purple-700, #c7bfd3);\n        --select-trigger-text: var(--input-text);\n        --popup-background: var(--select-popup-background);\n        --popup-text: var(--color-text, #f8f9fb);\n        --popup-border: var(--color-border, #e5e7eb);\n        --popup-shadow: var(\n          --box-shadow-sm,\n          0 1px 4px rgba(124, 77, 255, 0.12)\n        );\n      }\n\n      :host([popup-open]) {\n        z-index: var(--select-open-z-index);\n      }\n\n      .select-field-row {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        width: 100%;\n        min-width: 0;\n      }\n\n      .select-trigger {\n        display: block;\n        position: relative;\n        width: 100%;\n        min-width: 0;\n        min-height: var(--select-trigger-height, var(--min-touch-target, 44px));\n        height: var(--select-trigger-height, var(--min-touch-target, 44px));\n        padding: var(--spacing-xxs, 0.3125rem)\n          calc(26px + (var(--select-trigger-inline-padding, var(--spacing-2xs, 0.625rem)) * 2) + 6px)\n          var(--spacing-xxs, 0.3125rem)\n          var(--select-trigger-inline-padding, var(--spacing-2xs, 0.625rem));\n        border-radius: var(--border-radius-base, 0.3125rem);\n        background: var(--select-trigger-background);\n        border: 1px solid var(--input-border);\n        color: var(--select-trigger-text);\n        cursor: pointer;\n        appearance: none;\n        -webkit-appearance: none;\n        font-family: inherit;\n        font-size: var(--font-size-sm, 0.875rem);\n        font-weight: var(--font-weight-md, 500);\n        line-height: normal;\n        text-align: left;\n        white-space: nowrap;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n\n      .select-trigger:focus-visible {\n        outline: 2px solid var(--color-focus-ring, var(--color-primary, #7C4DFF));\n        outline-offset: 2px;\n      }\n\n      .select-trigger-label {\n        display: block;\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .select-trigger-toggle {\n        position: absolute;\n        right: 6px;\n        top: 50%;\n        transform: translateY(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 26px;\n        height: 26px;\n        padding: 0;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        border-radius: var(--border-radius-base, 0.3125rem);\n        flex-shrink: 0;\n      }\n\n      .select-trigger-toggle:hover {\n        background: var(\n          --select-trigger-toggle-hover-background,\n          var(--color-header-menu-item-hover, #e6dcff)\n        );\n      }\n\n      .select-field-row:focus-within .select-trigger-toggle {\n        background: var(\n          --select-trigger-toggle-hover-background,\n          var(--color-header-menu-item-hover, #e6dcff)\n        );\n      }\n\n      .select-trigger-icon {\n        display: inline-flex;\n        flex: 0 0 auto;\n        align-items: center;\n        justify-content: center;\n        width: 0.75rem;\n        height: 0.4375rem;\n        pointer-events: none;\n      }\n\n      .select-trigger-icon svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      .select-options-section {\n        position: relative;\n        background: var(--popup-background);\n        border-radius: inherit;\n        isolation: isolate;\n      }\n\n      .popup-box {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        min-width: 100%;\n        background: var(--popup-background);\n        opacity: 1;\n        overflow: hidden;\n        color: var(--popup-text);\n        box-shadow: var(--popup-shadow);\n        border: 1px solid var(--popup-border);\n        border-radius: var(--border-radius-md, 0.5rem);\n        box-sizing: border-box;\n        isolation: isolate;\n        z-index: var(--select-popup-z-index);\n      }\n    `\n  ]\n\n  declare label: string\n  declare theme: 'light' | 'dark'\n  declare options: Array<SelectOption>\n  declare layout: 'desktop' | 'mobile'\n  declare value: string\n  declare _popupOpen: boolean\n  declare _activeIndex: number\n\n  private readonly _listboxId = `solid-ui-select-listbox-${Select._nextId++}`\n\n  constructor () {\n    super()\n    this.label = 'Select an option'\n    this.theme = 'light'\n    this.options = []\n    this.layout = 'desktop'\n    this.value = ''\n    this._popupOpen = false\n    this._activeIndex = -1\n  }\n\n  connectedCallback () {\n    super.connectedCallback()\n    document.addEventListener('pointerdown', this._handleDocumentPointerDown)\n    window.addEventListener('resize', this._handleViewportChange)\n    window.addEventListener('scroll', this._handleViewportChange, true)\n  }\n\n  disconnectedCallback () {\n    this._detachPopupPortal()\n    document.removeEventListener('pointerdown', this._handleDocumentPointerDown)\n    window.removeEventListener('resize', this._handleViewportChange)\n    window.removeEventListener('scroll', this._handleViewportChange, true)\n    super.disconnectedCallback()\n  }\n\n  protected updated () {\n    this.toggleAttribute('popup-open', this._popupOpen)\n\n    if (this._popupOpen) {\n      this._updatePopupPosition()\n      if (this._popupPortalRoot) {\n        renderPortal(this._renderPopup(), this._popupPortalRoot)\n      }\n    } else if (this._popupPortalRoot) {\n      renderPortal(null, this._popupPortalRoot)\n    }\n  }\n\n  private _getPopupPortalContainer () {\n    return this.closest('dialog[open]') || document.body\n  }\n\n  private _ensurePopupPortal () {\n    const nextContainer = this._getPopupPortalContainer()\n\n    if (\n      this._popupPortalHost &&\n      this._popupPortalRoot &&\n      this._popupPortalContainer === nextContainer\n    ) {\n      return\n    }\n\n    this._detachPopupPortal()\n\n    this._popupPortalHost = document.createElement('div')\n    this._popupPortalHost.setAttribute('data-solid-ui-select-portal', '')\n    this._popupPortalHost.style.position = 'fixed'\n    this._popupPortalHost.style.inset = '0 auto auto 0'\n    this._popupPortalHost.style.zIndex = '2147483647'\n    this._popupPortalHost.style.pointerEvents = 'none'\n    this._popupPortalHost.style.boxSizing = 'border-box'\n\n    this._popupPortalRoot = this._popupPortalHost.attachShadow({ mode: 'open' })\n    const styleSheets = (Array.isArray(Select.styles) ? Select.styles : [Select.styles])\n      .map((style) => style?.styleSheet)\n      .filter((styleSheet): styleSheet is CSSStyleSheet => Boolean(styleSheet))\n\n    if (styleSheets.length > 0) {\n      this._popupPortalRoot.adoptedStyleSheets = styleSheets\n    }\n\n    nextContainer.appendChild(this._popupPortalHost)\n    this._popupPortalContainer = nextContainer\n  }\n\n  private _detachPopupPortal () {\n    if (this._popupPortalRoot) {\n      renderPortal(null, this._popupPortalRoot)\n    }\n\n    if (this._popupPortalHost?.parentNode) {\n      this._popupPortalHost.parentNode.removeChild(this._popupPortalHost)\n    }\n\n    this._popupPortalHost = null\n    this._popupPortalRoot = null\n    this._popupPortalContainer = null\n  }\n\n  private _updatePopupPosition () {\n    this._ensurePopupPortal()\n\n    const rect = this.getBoundingClientRect()\n    const maxHeight = Math.min(288, Math.max(120, window.innerHeight - rect.bottom - 12))\n\n    if (this._popupPortalHost) {\n      this._popupPortalHost.style.top = `${Math.round(rect.bottom + 2)}px`\n      this._popupPortalHost.style.left = `${Math.round(rect.left)}px`\n      this._popupPortalHost.style.width = `${Math.round(rect.width)}px`\n      this._popupPortalHost.style.maxHeight = `${Math.round(maxHeight)}px`\n      this._popupPortalHost.style.height = '0px'\n    }\n  }\n\n  private _closePopup () {\n    this._popupOpen = false\n    this._activeIndex = -1\n\n    if (this._popupPortalRoot) {\n      renderPortal(null, this._popupPortalRoot)\n    }\n  }\n\n  private _getSelectedIndex () {\n    return findOptionIndexByValue(this.options, this.value)\n  }\n\n  private _getSelectedOption () {\n    const selectedIndex = this._getSelectedIndex()\n\n    if (selectedIndex >= 0) {\n      return this.options[selectedIndex]\n    }\n\n    return this.options[0]\n  }\n\n  private _getDisplayedOptions () {\n    const selectedOption = this._getSelectedOption()\n\n    if (!selectedOption) {\n      return this.options\n    }\n\n    return [\n      selectedOption,\n      ...this.options.filter((option) => option.value !== selectedOption.value)\n    ]\n  }\n\n  private _getActiveOption () {\n    const popupOptions = this._getDisplayedOptions()\n\n    if (this._activeIndex < 0) {\n      return undefined\n    }\n\n    return popupOptions[this._activeIndex]\n  }\n\n  private _selectValueFromDropdown (uri: string) {\n    this.value = uri\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: uri },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this._closePopup()\n  }\n\n  private _selectActiveOption () {\n    const activeOption = this._getActiveOption()\n\n    if (activeOption && !activeOption.disabled) {\n      this._selectValueFromDropdown(activeOption.value)\n    }\n  }\n\n  private _openPopup () {\n    const popupOptions = this._getDisplayedOptions()\n\n    this._popupOpen = true\n    this._updatePopupPosition()\n    this._activeIndex = findOptionIndexByValue(popupOptions, this.value)\n\n    if (this._activeIndex < 0) {\n      this._activeIndex = getFirstEnabledIndex(popupOptions)\n    }\n  }\n\n  private _handleTriggerKeydown (event: KeyboardEvent) {\n    const popupOptions = this._getDisplayedOptions()\n    const action = getListboxActionFromKey(event.key)\n\n    if (action === 'none') {\n      return\n    }\n\n    event.preventDefault()\n\n    switch (action) {\n      case 'close':\n        this._closePopup()\n        break\n      case 'first':\n        if (!this._popupOpen) {\n          this._openPopup()\n        }\n        this._activeIndex = getFirstEnabledIndex(popupOptions)\n        break\n      case 'last':\n        if (!this._popupOpen) {\n          this._openPopup()\n        }\n        this._activeIndex = getLastEnabledIndex(popupOptions)\n        break\n      case 'next':\n        if (!this._popupOpen) {\n          this._openPopup()\n          break\n        }\n        this._activeIndex = getNextEnabledIndex(\n          this._activeIndex,\n          popupOptions,\n          1\n        )\n        break\n      case 'previous':\n        if (!this._popupOpen) {\n          this._openPopup()\n          break\n        }\n        this._activeIndex = getNextEnabledIndex(\n          this._activeIndex,\n          popupOptions,\n          -1\n        )\n        break\n      case 'select':\n        if (!this._popupOpen) {\n          this._openPopup()\n          break\n        }\n        this._selectActiveOption()\n        break\n      default:\n        break\n    }\n  }\n\n  private _getOptionId (option: SelectOption, index: number) {\n    return `${this._listboxId}-option-${index}-${option.value}`\n  }\n\n  private _renderPopup () {\n    const popupOptions = this._getDisplayedOptions()\n    const selectedOption = this._getSelectedOption()\n    const activeOption = this._getActiveOption()\n\n    return html`\n      <div class=\"popup-box\" part=\"popup-box\" style=\"pointer-events: auto; max-height: inherit; overflow: auto;\">\n        <div class=\"select-options-section\">\n          ${renderListbox({\n            selectedOption,\n            activeOption,\n            options: popupOptions,\n            listboxId: this._listboxId,\n            getOptionId: (option, index) => this._getOptionId(option, index),\n            onOptionSelect: (option) =>\n              this._selectValueFromDropdown(option.value)\n          })}\n        </div>\n      </div>\n    `\n  }\n\n  render () {\n    const selectedOption = this._getSelectedOption()\n    const activeOption = this._getActiveOption()\n    const triggerLabel = selectedOption?.label ?? this.label\n    const activeDescendant =\n      this._popupOpen && activeOption\n        ? this._getOptionId(activeOption, this._activeIndex)\n        : undefined\n\n    return html`\n      <div class=\"select-field-row\">\n        <button\n          class=\"select-trigger\"\n          type=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"${this._popupOpen}\"\n          aria-controls=\"${this._listboxId}\"\n          aria-activedescendant=\"${activeDescendant ?? ''}\"\n          part=\"select-trigger\"\n          @click=\"${() => this._popupOpen ? this._closePopup() : this._openPopup()}\"\n          @keydown=\"${this._handleTriggerKeydown}\"\n        >\n          <span class=\"select-trigger-label\" part=\"trigger-label\"\n            >${triggerLabel}</span\n          >\n          <span class=\"select-trigger-toggle\" part=\"trigger-toggle\">\n            <span class=\"select-trigger-icon\" part=\"trigger-icon\" aria-hidden=\"true\"\n              >${downArrowIcon}</span\n            >\n          </span>\n        </button>\n      </div>\n\n      <div\n        class=\"select-root\"\n        aria-label=\"Select a value\"\n        @click=\"${(e: MouseEvent) => {\n          if (e.target === e.currentTarget) this._closePopup()\n        }}\"\n      ></div>\n    `\n  }\n}\n"],"mappings":"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"}

package/dist/v2/components/forms/select/index.cjs.js

@@ -1,2 +0,0 @@
-const e=require("./Select.cjs.js");var t=`solid-ui-select`;customElements.get(t)||customElements.define(t,e.Select);
-//# sourceMappingURL=index.cjs.js.map

package/dist/v2/components/forms/select/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../../../src/v2/components/forms/select/index.ts"],"sourcesContent":["import { Select } from './Select'\n\nexport { Select }\n\nconst SELECT_TAG_NAME = 'solid-ui-select'\n\nif (!customElements.get(SELECT_TAG_NAME)) {\n  customElements.define(SELECT_TAG_NAME, Select)\n}\n"],"mappings":"mCAIA,IAAM,EAAkB,kBAEnB,eAAe,IAAI,CAAe,GACrC,eAAe,OAAO,EAAiB,EAAA,MAAM"}

package/dist/v2/components/forms/select/index.esm.js

@@ -1,7 +0,0 @@
-import { Select as e } from "./Select.esm.js";
-//#region src/v2/components/forms/select/index.ts
-var t = "solid-ui-select";
-customElements.get(t) || customElements.define(t, e);
-//#endregion
-
-//# sourceMappingURL=index.esm.js.map

package/dist/v2/components/forms/select/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/select/index.ts"],"sourcesContent":["import { Select } from './Select'\n\nexport { Select }\n\nconst SELECT_TAG_NAME = 'solid-ui-select'\n\nif (!customElements.get(SELECT_TAG_NAME)) {\n  customElements.define(SELECT_TAG_NAME, Select)\n}\n"],"mappings":";;AAIA,IAAM,IAAkB;AAEnB,eAAe,IAAI,CAAe,KACrC,eAAe,OAAO,GAAiB,CAAM"}

package/dist/v2/components/forms/shared/downArrow.cjs.js

@@ -1,9 +0,0 @@
-var e=require("lit-html").html`
-  <svg xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 7"
-    fill="none"
-  >
-    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-`;exports.downArrowIcon=e;
-//# sourceMappingURL=downArrow.cjs.js.map

package/dist/v2/components/forms/shared/downArrow.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"downArrow.cjs.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/downArrow.ts"],"sourcesContent":["import { html } from 'lit-html'\n\nexport const downArrowIcon = html`\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 12 7\"\n    fill=\"none\"\n  >\n    <path d=\"M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955\" stroke=\"#6A7282\" stroke-width=\"1.35776\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n"],"mappings":"AAEA,IAAa,EAAgB,kBAAA,EAAA,IAAI"}

package/dist/v2/components/forms/shared/downArrow.esm.js

@@ -1,14 +0,0 @@
-import { html as e } from "lit-html";
-//#region src/v2/components/forms/shared/downArrow.ts
-var t = e`
-  <svg xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 7"
-    fill="none"
-  >
-    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-`;
-//#endregion
-export { t as downArrowIcon };
-
-//# sourceMappingURL=downArrow.esm.js.map

package/dist/v2/components/forms/shared/downArrow.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"downArrow.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/downArrow.ts"],"sourcesContent":["import { html } from 'lit-html'\n\nexport const downArrowIcon = html`\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 12 7\"\n    fill=\"none\"\n  >\n    <path d=\"M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955\" stroke=\"#6A7282\" stroke-width=\"1.35776\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n"],"mappings":";;AAEA,IAAa,IAAgB,CAAI"}

package/dist/v2/components/forms/shared/keyboard.cjs.js

@@ -1,2 +0,0 @@
-function e(e,t,n){if(!t.length||t.every(e=>e.disabled))return-1;let r=t.length,i=e;do i=(i+n+r)%r;while(t[i].disabled);return i}function t(t){return t.length?e(-1,t,1):-1}function n(t){return t.length?e(t.length,t,-1):-1}function r(e,t){return t===void 0?-1:e.findIndex(e=>e.value===t)}function i(e){switch(e){case`ArrowDown`:return`next`;case`ArrowUp`:return`previous`;case`Home`:return`first`;case`End`:return`last`;case`Enter`:case` `:return`select`;case`Escape`:return`close`;default:return`none`}}exports.findOptionIndexByValue=r,exports.getFirstEnabledIndex=t,exports.getLastEnabledIndex=n,exports.getListboxActionFromKey=i,exports.getNextEnabledIndex=e;
-//# sourceMappingURL=keyboard.cjs.js.map

package/dist/v2/components/forms/shared/keyboard.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard.cjs.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/keyboard.ts"],"sourcesContent":["import { SelectOption } from './optionTypes'\n\n/* Move up or down, skip disabled options */\nexport function getNextEnabledIndex (\n  currentIndex: number,\n  options: SelectOption[],\n  direction: 1 | -1\n): number {\n  if (!options.length) {\n    return -1\n  }\n\n  if (options.every(option => option.disabled)) {\n    return -1\n  }\n\n  const optionsCount = options.length\n  let nextIndex = currentIndex\n\n  do {\n    nextIndex = (nextIndex + direction + optionsCount) % optionsCount\n  } while (options[nextIndex].disabled)\n\n  return nextIndex\n}\n\n/* Handle 'Home' and 'End' keys and initial highlight */\nexport function getFirstEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(-1, options, 1)\n}\n\nexport function getLastEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(options.length, options, -1)\n}\n\n/* Sync current value to active index */\nexport function findOptionIndexByValue (\n  options: SelectOption[],\n  value?: string\n): number {\n  if (value === undefined) {\n    return -1\n  }\n  return options.findIndex(option => option.value === value)\n}\n\n/* Map keyboard events to actions */\nexport function getListboxActionFromKey (key: string):\n  | 'open'\n  | 'close'\n  | 'next'\n  | 'previous'\n  | 'first'\n  | 'last'\n  | 'select'\n  | 'none' {\n  switch (key) {\n    case 'ArrowDown':\n      return 'next'\n    case 'ArrowUp':\n      return 'previous'\n    case 'Home':\n      return 'first'\n    case 'End':\n      return 'last'\n    case 'Enter':\n    case ' ':\n      return 'select'\n    case 'Escape':\n      return 'close'\n    default:\n      return 'none'\n  }\n}\n"],"mappings":"AAGA,SAAgB,EACd,EACA,EACA,EACQ,CAKR,GAJI,CAAC,EAAQ,QAIT,EAAQ,MAAM,GAAU,EAAO,QAAQ,EACzC,MAAO,GAGT,IAAM,EAAe,EAAQ,OACzB,EAAY,EAEhB,EACE,IAAa,EAAY,EAAY,GAAgB,QAC9C,EAAQ,GAAW,UAE5B,OAAO,CACT,CAGA,SAAgB,EAAsB,EAAiC,CAKrE,OAJK,EAAQ,OAIN,EAAoB,GAAI,EAAS,CAAC,EAHhC,EAIX,CAEA,SAAgB,EAAqB,EAAiC,CAKpE,OAJK,EAAQ,OAIN,EAAoB,EAAQ,OAAQ,EAAS,EAAE,EAH7C,EAIX,CAGA,SAAgB,EACd,EACA,EACQ,CAIR,OAHI,IAAU,IAAA,GACL,GAEF,EAAQ,UAAU,GAAU,EAAO,QAAU,CAAK,CAC3D,CAGA,SAAgB,EAAyB,EAQ9B,CACT,OAAQ,EAAR,CACE,IAAK,YACH,MAAO,OACT,IAAK,UACH,MAAO,WACT,IAAK,OACH,MAAO,QACT,IAAK,MACH,MAAO,OACT,IAAK,QACL,IAAK,IACH,MAAO,SACT,IAAK,SACH,MAAO,QACT,QACE,MAAO,MACX,CACF"}

package/dist/v2/components/forms/shared/keyboard.esm.js

@@ -1,34 +0,0 @@
-//#region src/v2/components/forms/shared/keyboard.ts
-function e(e, t, n) {
-	if (!t.length || t.every((e) => e.disabled)) return -1;
-	let r = t.length, i = e;
-	do
-		i = (i + n + r) % r;
-	while (t[i].disabled);
-	return i;
-}
-function t(t) {
-	return t.length ? e(-1, t, 1) : -1;
-}
-function n(t) {
-	return t.length ? e(t.length, t, -1) : -1;
-}
-function r(e, t) {
-	return t === void 0 ? -1 : e.findIndex((e) => e.value === t);
-}
-function i(e) {
-	switch (e) {
-		case "ArrowDown": return "next";
-		case "ArrowUp": return "previous";
-		case "Home": return "first";
-		case "End": return "last";
-		case "Enter":
-		case " ": return "select";
-		case "Escape": return "close";
-		default: return "none";
-	}
-}
-//#endregion
-export { r as findOptionIndexByValue, t as getFirstEnabledIndex, n as getLastEnabledIndex, i as getListboxActionFromKey, e as getNextEnabledIndex };
-
-//# sourceMappingURL=keyboard.esm.js.map

package/dist/v2/components/forms/shared/keyboard.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/keyboard.ts"],"sourcesContent":["import { SelectOption } from './optionTypes'\n\n/* Move up or down, skip disabled options */\nexport function getNextEnabledIndex (\n  currentIndex: number,\n  options: SelectOption[],\n  direction: 1 | -1\n): number {\n  if (!options.length) {\n    return -1\n  }\n\n  if (options.every(option => option.disabled)) {\n    return -1\n  }\n\n  const optionsCount = options.length\n  let nextIndex = currentIndex\n\n  do {\n    nextIndex = (nextIndex + direction + optionsCount) % optionsCount\n  } while (options[nextIndex].disabled)\n\n  return nextIndex\n}\n\n/* Handle 'Home' and 'End' keys and initial highlight */\nexport function getFirstEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(-1, options, 1)\n}\n\nexport function getLastEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(options.length, options, -1)\n}\n\n/* Sync current value to active index */\nexport function findOptionIndexByValue (\n  options: SelectOption[],\n  value?: string\n): number {\n  if (value === undefined) {\n    return -1\n  }\n  return options.findIndex(option => option.value === value)\n}\n\n/* Map keyboard events to actions */\nexport function getListboxActionFromKey (key: string):\n  | 'open'\n  | 'close'\n  | 'next'\n  | 'previous'\n  | 'first'\n  | 'last'\n  | 'select'\n  | 'none' {\n  switch (key) {\n    case 'ArrowDown':\n      return 'next'\n    case 'ArrowUp':\n      return 'previous'\n    case 'Home':\n      return 'first'\n    case 'End':\n      return 'last'\n    case 'Enter':\n    case ' ':\n      return 'select'\n    case 'Escape':\n      return 'close'\n    default:\n      return 'none'\n  }\n}\n"],"mappings":";AAGA,SAAgB,EACd,GACA,GACA,GACQ;CAKR,IAJI,CAAC,EAAQ,UAIT,EAAQ,OAAM,MAAU,EAAO,QAAQ,GACzC,OAAO;CAGT,IAAM,IAAe,EAAQ,QACzB,IAAY;CAEhB;EACE,KAAa,IAAY,IAAY,KAAgB;QAC9C,EAAQ,GAAW;CAE5B,OAAO;AACT;AAGA,SAAgB,EAAsB,GAAiC;CAKrE,OAJK,EAAQ,SAIN,EAAoB,IAAI,GAAS,CAAC,IAHhC;AAIX;AAEA,SAAgB,EAAqB,GAAiC;CAKpE,OAJK,EAAQ,SAIN,EAAoB,EAAQ,QAAQ,GAAS,EAAE,IAH7C;AAIX;AAGA,SAAgB,EACd,GACA,GACQ;CAIR,OAHI,MAAU,KAAA,IACL,KAEF,EAAQ,WAAU,MAAU,EAAO,UAAU,CAAK;AAC3D;AAGA,SAAgB,EAAyB,GAQ9B;CACT,QAAQ,GAAR;EACE,KAAK,aACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK;EACL,KAAK,KACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF"}

package/dist/v2/components/forms/shared/listboxStyles.cjs.js

@@ -1,95 +0,0 @@
-var e=require("lit").css`
-  :host { /* default theme */
-      --input-background: var(--color-background, #F8F9FB);
-      --item-text: var(--color-text-heading, #000000);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    :host([theme='dark']) {
-      --input-background: var(--color-background, #1A1A1A);
-      --item-text: var(--color-text-heading, #F8F9FB);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    .listbox {
-      position: relative;
-      top: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.0625rem;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      border: none;
-      border-radius: inherit;
-      background: var(--input-background);
-      background-color: var(--input-background);
-      opacity: 1;
-      overflow: hidden;
-      padding: 0.25rem;
-      z-index: var(--listbox-z-index);
-      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
-    }
-
-    .listbox-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2xs, 0.625rem);
-      width: 100%;
-      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);
-      padding: 0.5rem var(--spacing-xs, 0.75rem);
-      border: none;
-      border-radius: var(--border-radius-sm, 0.2rem);
-      background: transparent;
-      color: var(--item-text);
-      cursor: pointer;
-      font: inherit;
-      font-size: var(--font-size-sm, 0.875rem);
-      font-weight: var(--font-weight-normal, 400);
-      line-height: normal;
-      text-align: left;
-      text-decoration: none;
-      box-sizing: border-box;
-    }
-
-    .listbox-item:hover {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item:focus {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item-active {
-      background: var(--item-selected-background);
-      color: var(--item-selected-text);
-      border-radius: var(--border-radius-sm, 0.2rem);
-      outline: none;
-    }
-
-    .listbox-item-active:hover,
-    .listbox-item-active:focus {
-      color: var(--item-text);
-    }
-
-    .listbox-item-disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-    }
-
-    .listbox-item-disabled:hover {
-      background: transparent;
-      border-radius: 0;
-    }
-`;exports.listboxStyles=e;
-//# sourceMappingURL=listboxStyles.cjs.js.map

package/dist/v2/components/forms/shared/listboxStyles.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"listboxStyles.cjs.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/listboxStyles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const listboxStyles = css`\n  :host { /* default theme */\n      --input-background: var(--color-background, #F8F9FB);\n      --item-text: var(--color-text-heading, #000000);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    :host([theme='dark']) {\n      --input-background: var(--color-background, #1A1A1A);\n      --item-text: var(--color-text-heading, #F8F9FB);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    .listbox {\n      position: relative;\n      top: 0;\n      left: 0;\n      right: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 0.0625rem;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      border: none;\n      border-radius: inherit;\n      background: var(--input-background);\n      background-color: var(--input-background);\n      opacity: 1;\n      overflow: hidden;\n      padding: 0.25rem;\n      z-index: var(--listbox-z-index);\n      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n    }\n\n    .listbox-item {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-2xs, 0.625rem);\n      width: 100%;\n      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);\n      padding: 0.5rem var(--spacing-xs, 0.75rem);\n      border: none;\n      border-radius: var(--border-radius-sm, 0.2rem);\n      background: transparent;\n      color: var(--item-text);\n      cursor: pointer;\n      font: inherit;\n      font-size: var(--font-size-sm, 0.875rem);\n      font-weight: var(--font-weight-normal, 400);\n      line-height: normal;\n      text-align: left;\n      text-decoration: none;\n      box-sizing: border-box;\n    }\n\n    .listbox-item:hover {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item:focus {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item-active {\n      background: var(--item-selected-background);\n      color: var(--item-selected-text);\n      border-radius: var(--border-radius-sm, 0.2rem);\n      outline: none;\n    }\n\n    .listbox-item-active:hover,\n    .listbox-item-active:focus {\n      color: var(--item-text);\n    }\n\n    .listbox-item-disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n\n    .listbox-item-disabled:hover {\n      background: transparent;\n      border-radius: 0;\n    }\n`\n"],"mappings":"AAEA,IAAa,EAAgB,aAAA,EAAA,GAAG"}

package/dist/v2/components/forms/shared/listboxStyles.esm.js

@@ -1,100 +0,0 @@
-import { css as e } from "lit";
-//#region src/v2/components/forms/shared/listboxStyles.ts
-var t = e`
-  :host { /* default theme */
-      --input-background: var(--color-background, #F8F9FB);
-      --item-text: var(--color-text-heading, #000000);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    :host([theme='dark']) {
-      --input-background: var(--color-background, #1A1A1A);
-      --item-text: var(--color-text-heading, #F8F9FB);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    .listbox {
-      position: relative;
-      top: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.0625rem;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      border: none;
-      border-radius: inherit;
-      background: var(--input-background);
-      background-color: var(--input-background);
-      opacity: 1;
-      overflow: hidden;
-      padding: 0.25rem;
-      z-index: var(--listbox-z-index);
-      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
-    }
-
-    .listbox-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2xs, 0.625rem);
-      width: 100%;
-      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);
-      padding: 0.5rem var(--spacing-xs, 0.75rem);
-      border: none;
-      border-radius: var(--border-radius-sm, 0.2rem);
-      background: transparent;
-      color: var(--item-text);
-      cursor: pointer;
-      font: inherit;
-      font-size: var(--font-size-sm, 0.875rem);
-      font-weight: var(--font-weight-normal, 400);
-      line-height: normal;
-      text-align: left;
-      text-decoration: none;
-      box-sizing: border-box;
-    }
-
-    .listbox-item:hover {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item:focus {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item-active {
-      background: var(--item-selected-background);
-      color: var(--item-selected-text);
-      border-radius: var(--border-radius-sm, 0.2rem);
-      outline: none;
-    }
-
-    .listbox-item-active:hover,
-    .listbox-item-active:focus {
-      color: var(--item-text);
-    }
-
-    .listbox-item-disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-    }
-
-    .listbox-item-disabled:hover {
-      background: transparent;
-      border-radius: 0;
-    }
-`;
-//#endregion
-export { t as listboxStyles };
-
-//# sourceMappingURL=listboxStyles.esm.js.map

package/dist/v2/components/forms/shared/listboxStyles.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"listboxStyles.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/listboxStyles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const listboxStyles = css`\n  :host { /* default theme */\n      --input-background: var(--color-background, #F8F9FB);\n      --item-text: var(--color-text-heading, #000000);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    :host([theme='dark']) {\n      --input-background: var(--color-background, #1A1A1A);\n      --item-text: var(--color-text-heading, #F8F9FB);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    .listbox {\n      position: relative;\n      top: 0;\n      left: 0;\n      right: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 0.0625rem;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      border: none;\n      border-radius: inherit;\n      background: var(--input-background);\n      background-color: var(--input-background);\n      opacity: 1;\n      overflow: hidden;\n      padding: 0.25rem;\n      z-index: var(--listbox-z-index);\n      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n    }\n\n    .listbox-item {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-2xs, 0.625rem);\n      width: 100%;\n      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);\n      padding: 0.5rem var(--spacing-xs, 0.75rem);\n      border: none;\n      border-radius: var(--border-radius-sm, 0.2rem);\n      background: transparent;\n      color: var(--item-text);\n      cursor: pointer;\n      font: inherit;\n      font-size: var(--font-size-sm, 0.875rem);\n      font-weight: var(--font-weight-normal, 400);\n      line-height: normal;\n      text-align: left;\n      text-decoration: none;\n      box-sizing: border-box;\n    }\n\n    .listbox-item:hover {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item:focus {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item-active {\n      background: var(--item-selected-background);\n      color: var(--item-selected-text);\n      border-radius: var(--border-radius-sm, 0.2rem);\n      outline: none;\n    }\n\n    .listbox-item-active:hover,\n    .listbox-item-active:focus {\n      color: var(--item-text);\n    }\n\n    .listbox-item-disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n\n    .listbox-item-disabled:hover {\n      background: transparent;\n      border-radius: 0;\n    }\n`\n"],"mappings":";;AAEA,IAAa,IAAgB,CAAG"}

package/dist/v2/components/forms/shared/listboxTemplate.cjs.js

@@ -1,24 +0,0 @@
-let e=require("lit");function t(t){let{options:n,selectedOption:r,activeOption:i,listboxId:a,getOptionId:o,onOptionSelect:s}=t;return e.html`
-    <ul
-      class="listbox"
-      id="${a??``}"
-      part="listbox"
-      role="listbox"
-      aria-orientation="vertical"
-    >
-      ${n.map((t,n)=>{let a=t.value===r?.value,c=t.value===i?.value;return e.html`
-          <li
-            id="${o?.(t,n)??``}"
-            class="listbox-item${a?` listbox-item-selected`:``}${c?` listbox-item-active`:``}${t.disabled?` listbox-item-disabled`:``}"
-            part="option${a?` selected-option`:``}${c?` active-option`:``}${t.disabled?` disabled-option`:``}"
-            role="option"
-            aria-selected="${a}"
-            aria-disabled="${t.disabled?`true`:`false`}"
-            @click="${()=>{t.disabled||s(t)}}"
-          >
-            ${t.label}
-          </li>
-        `})}
-    </ul>
-  `}exports.renderListbox=t;
-//# sourceMappingURL=listboxTemplate.cjs.js.map

package/dist/v2/components/forms/shared/listboxTemplate.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"listboxTemplate.cjs.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/listboxTemplate.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { SelectOption } from './optionTypes'\n\nexport interface RenderListboxArgs {\n  options: SelectOption[]\n  selectedOption?: SelectOption\n  activeOption?: SelectOption\n  listboxId?: string\n  getOptionId?: (option: SelectOption, index: number) => string\n  onOptionSelect: (option: SelectOption) => void\n}\n\nexport function renderListbox (args: RenderListboxArgs) {\n  const {\n    options,\n    selectedOption,\n    activeOption,\n    listboxId,\n    getOptionId,\n    onOptionSelect\n  } = args\n\n  return html`\n    <ul\n      class=\"listbox\"\n      id=\"${listboxId ?? ''}\"\n      part=\"listbox\"\n      role=\"listbox\"\n      aria-orientation=\"vertical\"\n    >\n      ${options.map((option, index) => {\n        const isSelected = option.value === selectedOption?.value\n        const isActive = option.value === activeOption?.value\n        const optionId = getOptionId?.(option, index)\n\n        return html`\n          <li\n            id=\"${optionId ?? ''}\"\n            class=\"listbox-item${isSelected ? ' listbox-item-selected' : ''}${isActive ? ' listbox-item-active' : ''}${option.disabled ? ' listbox-item-disabled' : ''}\"\n            part=\"option${isSelected ? ' selected-option' : ''}${isActive ? ' active-option' : ''}${option.disabled ? ' disabled-option' : ''}\"\n            role=\"option\"\n            aria-selected=\"${isSelected}\"\n            aria-disabled=\"${option.disabled ? 'true' : 'false'}\"\n            @click=\"${() => {\n              if (!option.disabled) {\n                onOptionSelect(option)\n              }\n            }}\"\n          >\n            ${option.label}\n          </li>\n        `\n      })}\n    </ul>\n  `\n}\n"],"mappings":"qBAYA,SAAgB,EAAe,EAAyB,CACtD,GAAM,CACJ,UACA,iBACA,eACA,YACA,cACA,kBACE,EAEJ,MAAO,GAAA,IAAI;;;YAGD,GAAa,GAAG;;;;;QAKpB,EAAQ,KAAK,EAAQ,IAAU,CAC/B,IAAM,EAAa,EAAO,QAAU,GAAgB,MAC9C,EAAW,EAAO,QAAU,GAAc,MAGhD,MAAO,GAAA,IAAI;;kBAFM,IAAc,EAAQ,CAAK,GAItB,GAAG;iCACA,EAAa,yBAA2B,KAAK,EAAW,uBAAyB,KAAK,EAAO,SAAW,yBAA2B,GAAG;0BAC7I,EAAa,mBAAqB,KAAK,EAAW,iBAAmB,KAAK,EAAO,SAAW,mBAAqB,GAAG;;6BAEjH,EAAW;6BACX,EAAO,SAAW,OAAS,QAAQ;0BACpC,CACT,EAAO,UACV,EAAe,CAAM,CAEzB,EAAE;;cAEA,EAAO,MAAM;;SAGrB,CAAC,EAAE;;GAGT"}

package/dist/v2/components/forms/shared/listboxTemplate.esm.js

@@ -1,37 +0,0 @@
-import { html as e } from "lit";
-//#region src/v2/components/forms/shared/listboxTemplate.ts
-function t(t) {
-	let { options: n, selectedOption: r, activeOption: i, listboxId: a, getOptionId: o, onOptionSelect: s } = t;
-	return e`
-    <ul
-      class="listbox"
-      id="${a ?? ""}"
-      part="listbox"
-      role="listbox"
-      aria-orientation="vertical"
-    >
-      ${n.map((t, n) => {
-		let a = t.value === r?.value, c = t.value === i?.value;
-		return e`
-          <li
-            id="${o?.(t, n) ?? ""}"
-            class="listbox-item${a ? " listbox-item-selected" : ""}${c ? " listbox-item-active" : ""}${t.disabled ? " listbox-item-disabled" : ""}"
-            part="option${a ? " selected-option" : ""}${c ? " active-option" : ""}${t.disabled ? " disabled-option" : ""}"
-            role="option"
-            aria-selected="${a}"
-            aria-disabled="${t.disabled ? "true" : "false"}"
-            @click="${() => {
-			t.disabled || s(t);
-		}}"
-          >
-            ${t.label}
-          </li>
-        `;
-	})}
-    </ul>
-  `;
-}
-//#endregion
-export { t as renderListbox };
-
-//# sourceMappingURL=listboxTemplate.esm.js.map

package/dist/v2/components/forms/shared/listboxTemplate.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"listboxTemplate.esm.js","names":[],"sources":["../../../../../src/v2/components/forms/shared/listboxTemplate.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { SelectOption } from './optionTypes'\n\nexport interface RenderListboxArgs {\n  options: SelectOption[]\n  selectedOption?: SelectOption\n  activeOption?: SelectOption\n  listboxId?: string\n  getOptionId?: (option: SelectOption, index: number) => string\n  onOptionSelect: (option: SelectOption) => void\n}\n\nexport function renderListbox (args: RenderListboxArgs) {\n  const {\n    options,\n    selectedOption,\n    activeOption,\n    listboxId,\n    getOptionId,\n    onOptionSelect\n  } = args\n\n  return html`\n    <ul\n      class=\"listbox\"\n      id=\"${listboxId ?? ''}\"\n      part=\"listbox\"\n      role=\"listbox\"\n      aria-orientation=\"vertical\"\n    >\n      ${options.map((option, index) => {\n        const isSelected = option.value === selectedOption?.value\n        const isActive = option.value === activeOption?.value\n        const optionId = getOptionId?.(option, index)\n\n        return html`\n          <li\n            id=\"${optionId ?? ''}\"\n            class=\"listbox-item${isSelected ? ' listbox-item-selected' : ''}${isActive ? ' listbox-item-active' : ''}${option.disabled ? ' listbox-item-disabled' : ''}\"\n            part=\"option${isSelected ? ' selected-option' : ''}${isActive ? ' active-option' : ''}${option.disabled ? ' disabled-option' : ''}\"\n            role=\"option\"\n            aria-selected=\"${isSelected}\"\n            aria-disabled=\"${option.disabled ? 'true' : 'false'}\"\n            @click=\"${() => {\n              if (!option.disabled) {\n                onOptionSelect(option)\n              }\n            }}\"\n          >\n            ${option.label}\n          </li>\n        `\n      })}\n    </ul>\n  `\n}\n"],"mappings":";;AAYA,SAAgB,EAAe,GAAyB;CACtD,IAAM,EACJ,YACA,mBACA,iBACA,cACA,gBACA,sBACE;CAEJ,OAAO,CAAI;;;YAGD,KAAa,GAAG;;;;;QAKpB,EAAQ,KAAK,GAAQ,MAAU;EAC/B,IAAM,IAAa,EAAO,UAAU,GAAgB,OAC9C,IAAW,EAAO,UAAU,GAAc;EAGhD,OAAO,CAAI;;kBAFM,IAAc,GAAQ,CAAK,KAItB,GAAG;iCACA,IAAa,2BAA2B,KAAK,IAAW,yBAAyB,KAAK,EAAO,WAAW,2BAA2B,GAAG;0BAC7I,IAAa,qBAAqB,KAAK,IAAW,mBAAmB,KAAK,EAAO,WAAW,qBAAqB,GAAG;;6BAEjH,EAAW;6BACX,EAAO,WAAW,SAAS,QAAQ;4BACpC;GACd,AAAK,EAAO,YACV,EAAe,CAAM;EAEzB,EAAE;;cAEA,EAAO,MAAM;;;CAGrB,CAAC,EAAE;;;AAGT"}