@vielzeug/refine 1.5.1 → 1.5.3

package/dist/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { createStableId, define, html, inject, prop, bind, getHost, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport styles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: { originalEvent?: Event; value: number };\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires change - Emitted when value changes. detail: { value: number, originalEvent?: Event }\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRatingEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max!.value) || 5);\n      const raw = Number(props.value!.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const fd = useField({\n      disabled: fCtxProps.disabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        fd.reportValidity();\n      }\n    };\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly!.value && !fCtxProps.disabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max!.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max!.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      // Write through the host attribute; ore handles host reflection.\n      el.setAttribute('value', String(nextValue));\n      emit('change', { originalEvent, value: nextValue });\n      triggerValidation('change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max!.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: fCtxProps.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        :aria-label=\"${props.label}\"\n        :aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) =>\n              html`<button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                :aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                :aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                :data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                :disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>`,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { createStableId, define, html, inject, prop, bind, getHost, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport styles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: { originalEvent?: Event; value: number };\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires change - Emitted when value changes. detail: { value: number, originalEvent?: Event }\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRatingEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max!.value) || 5);\n      const raw = Number(props.value!.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const fd = useField({\n      disabled: fCtxProps.disabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        fd.reportValidity();\n      }\n    };\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly!.value && !fCtxProps.disabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max!.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max!.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      // Write through the host attribute; ore handles host reflection.\n      el.setAttribute('value', String(nextValue));\n      emit('change', { originalEvent, value: nextValue });\n      triggerValidation('change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max!.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: fCtxProps.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        :aria-label=\"${props.label}\"\n        :aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) =>\n              html`<button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                :aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                :aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                :data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                :disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>`,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/select.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/ore.cjs"),r=require("./headless/choice-field.cjs"),i=require("./headless/option-list.cjs"),a=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const o=require("./inputs/shared/form-context.cjs"),s=require("./inputs/select/select.css.cjs");let c=require("@vielzeug/ore"),l=require("@vielzeug/ripple");var u=`ore-select`;(0,c.define)(u,{formAssociated:!0,props:{...t.themableBundle,...t.sizableBundle,...t.disablableBundle,...t.loadableBundle,...t.roundableBundle,error:c.prop.string(),fullwidth:c.prop.bool(!1),helper:c.prop.string(),label:c.prop.string(),"label-placement":c.prop.oneOf([`inset`,`outside`],`inset`),multiple:c.prop.bool(!1),name:c.prop.string(),options:c.prop.json(void 0),placeholder:c.prop.string(),required:c.prop.bool(!1),value:c.prop.string(),variant:c.prop.string()},setup(e){let t=(0,c.getHost)(),s=(0,c.useEmit)(),u=(0,c.useSlots)(),d=t.shadowRoot,f=(0,l.signal)([]),p=(0,l.computed)(()=>!!e.loading.value);function m(e){return{disabled:!!e.disabled,group:e.group,label:e.label??e.value,value:e.value}}let h=(0,l.computed)(()=>{let t=e.options.value;return Array.isArray(t)?t.map(m):f.value}),g=(0,c.inject)(o.FORM_CTX),_=o.useFormContext(e,g),v=null,y=null,b=n.lifecycleSignal(c.onCleanup),x=r.createChoiceField({disabled:_.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`select`,required:e.required,signal:b,validateOn:g?.validateOn,value:e.value});x.attachFormField(a.useField({disabled:x.disabled,onReset:x.reset,toFormValue:e=>e,validationMessage:x.validationMessage,validity:x.validity,value:x.formValue}));let S=i.createOptionList({getBoundary:()=>t,getFocusedOptionElement:()=>y?.querySelector(`[data-focused]`)??null,getItems:()=>h.value,getPanel:()=>y,getReference:()=>v,getTrigger:()=>v,isDisabled:()=>x.disabled.value,onClose:e=>{s(`close`,{reason:e}),x.triggerValidation(`blur`)},onOpen:e=>s(`open`,{reason:e}),signal:b}),{triggerValidation:C}=x,w=x.selectedValues,T=x.disabled,{fieldId:E}=x,D=`listbox-${E}`,{focusedIndex:O,isOpen:k}=S;(0,c.bind)({attr:{"has-error":()=>e.error.value?!0:void 0,open:()=>k.value?!0:void 0,size:_.size,variant:_.variant}});function ee(){let e=d?.querySelector(`slot`);if(!e)return;let t=e.assignedElements({flatten:!0}),n=[];for(let e of t)if(e.tagName===`OPTION`){let t=e;n.push({disabled:t.disabled,label:t.text||t.value,value:t.value})}else if(e.tagName===`OPTGROUP`){let t=e,r=t.label;for(let e of Array.from(t.querySelectorAll(`option`))){let t=e;n.push({disabled:t.disabled,group:r,label:t.text||t.value,value:t.value})}}f.value=n}let A=(0,l.computed)(()=>{if(w.value.length===0)return``;if(e.multiple.value&&w.value.length>1)return`${w.value.length} selected`;let t=w.value[0];return h.value.find(e=>e.value===t)?.label??t}),j=(0,l.computed)(()=>e.multiple.value?w.value.map(e=>({label:h.value.find(t=>t.value===e)?.label??e,value:e})):[]),M=(0,l.computed)(()=>e.multiple.value&&w.value.length>0),N=(0,l.computed)(()=>A.value||e.placeholder.value||``);function P(e){let t=[],n=new Map;for(let t of e){let e=t.group,r=n.get(e);r||(r=[],n.set(e,r)),r.push(t)}let r=0;for(let[e,i]of n){e!==void 0&&t.push({label:e,type:`group`});for(let e of i)t.push({idx:r++,opt:e,type:`option`})}return t}let F=(0,l.computed)(()=>P(h.value));function I(e){return h.value.find(t=>t.value===e)?.label??e}function L(e){let t=w.value,n=t.map(e=>I(e));s(`change`,{labels:n,originalEvent:e,values:t})}function R(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(x.removeValue(t),L(e),C(`change`))}function z(e=`programmatic`){S.open(e),requestAnimationFrame(()=>{let e=w.value.length>0?h.value.findIndex(e=>e.value===w.value[0]):-1;if(e>=0){S.set(e);return}S.navigate(`first`)})}function B(t,n){t.disabled||(e.multiple.value?x.toggleValue(t.value):(x.selectValue(t.value),S.close()),L(n),C(`change`))}function V(e){if(!T.value&&!S.handleKeydown(e))switch(e.key){case` `:case`Enter`:if(e.preventDefault(),k.value){let t=O.value,n=h.value;t>=0&&t<n.length&&B(n[t],e)}else z(`keyboard`);break;case`Tab`:S.close();break}}let H=()=>N.value,U=()=>e.label.value??``,W=()=>e.placeholder.value??``,G=()=>e[`label-placement`].value??`inset`,K=()=>e.color?.value??void 0,q=()=>_.size?.value??void 0,J=()=>_.variant?.value??void 0,Y=()=>e.rounded?.value??void 0,X=()=>e.helper.value??``,Z=()=>e.error.value??``,Q=()=>T.value?!0:void 0,$=()=>e.required.value?!0:void 0,te=()=>e.fullwidth.value?!0:void 0,ne=()=>e.loading.value?!0:void 0,re=()=>T.value?`-1`:`0`;(0,l.watch)(u.elements(),()=>ee(),{immediate:!0});let ie=(0,l.effect)(()=>{k.value?y&&`showPopover`in y&&!y.matches(`:popover-open`)&&y.showPopover():y&&`hidePopover`in y&&y.matches(`:popover-open`)&&y.hidePopover()});return(0,c.onCleanup)(()=>ie.dispose()),(0,c.onMounted)(()=>{let e=null,t=null;return v&&(e=e=>{e.stopPropagation(),!T.value&&(k.value?S.close(`trigger`):z(`click`))},t=e=>{V(e)},v.addEventListener(`click`,e),v.addEventListener(`keydown`,t)),()=>{v&&e&&v.removeEventListener(`click`,e),v&&t&&v.removeEventListener(`keydown`,t)}}),c.html`<slot style="display:none"></slot>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/ore.cjs"),r=require("./headless/choice-field.cjs"),i=require("./headless/option-list.cjs"),a=require("./inputs/shared/form-context.cjs"),o=require("./inputs/select/select.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple"),l=require("@vielzeug/ore/forms");var u=`ore-select`;(0,s.define)(u,{formAssociated:!0,props:{...t.themableBundle,...t.sizableBundle,...t.disablableBundle,...t.loadableBundle,...t.roundableBundle,error:s.prop.string(),fullwidth:s.prop.bool(!1),helper:s.prop.string(),label:s.prop.string(),"label-placement":s.prop.oneOf([`inset`,`outside`],`inset`),multiple:s.prop.bool(!1),name:s.prop.string(),options:s.prop.json(void 0),placeholder:s.prop.string(),required:s.prop.bool(!1),value:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),o=(0,s.useEmit)(),u=(0,s.useSlots)(),d=t.shadowRoot,f=(0,c.signal)([]),p=(0,c.computed)(()=>!!e.loading.value);function m(e){return{disabled:!!e.disabled,group:e.group,label:e.label??e.value,value:e.value}}let h=(0,c.computed)(()=>{let t=e.options.value;return Array.isArray(t)?t.map(m):f.value}),g=(0,s.inject)(a.FORM_CTX),_=a.useFormContext(e,g),v=null,y=null,b=n.lifecycleSignal(s.onCleanup),x=r.createChoiceField({disabled:_.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`select`,required:e.required,signal:b,validateOn:g?.validateOn,value:e.value});x.attachFormField((0,l.useField)({disabled:x.disabled,onReset:x.reset,toFormValue:e=>e,validationMessage:x.validationMessage,validity:x.validity,value:x.formValue}));let S=i.createOptionList({getBoundary:()=>t,getFocusedOptionElement:()=>y?.querySelector(`[data-focused]`)??null,getItems:()=>h.value,getPanel:()=>y,getReference:()=>v,getTrigger:()=>v,isDisabled:()=>x.disabled.value,onClose:e=>{o(`close`,{reason:e}),x.triggerValidation(`blur`)},onOpen:e=>o(`open`,{reason:e}),signal:b}),{triggerValidation:C}=x,w=x.selectedValues,T=x.disabled,{fieldId:E}=x,D=`listbox-${E}`,{focusedIndex:O,isOpen:k}=S;(0,s.bind)({attr:{"has-error":()=>e.error.value?!0:void 0,open:()=>k.value?!0:void 0,size:_.size,variant:_.variant}});function ee(){let e=d?.querySelector(`slot`);if(!e)return;let t=e.assignedElements({flatten:!0}),n=[];for(let e of t)if(e.tagName===`OPTION`){let t=e;n.push({disabled:t.disabled,label:t.text||t.value,value:t.value})}else if(e.tagName===`OPTGROUP`){let t=e,r=t.label;for(let e of Array.from(t.querySelectorAll(`option`))){let t=e;n.push({disabled:t.disabled,group:r,label:t.text||t.value,value:t.value})}}f.value=n}let A=(0,c.computed)(()=>{if(w.value.length===0)return``;if(e.multiple.value&&w.value.length>1)return`${w.value.length} selected`;let t=w.value[0];return h.value.find(e=>e.value===t)?.label??t}),j=(0,c.computed)(()=>e.multiple.value?w.value.map(e=>({label:h.value.find(t=>t.value===e)?.label??e,value:e})):[]),M=(0,c.computed)(()=>e.multiple.value&&w.value.length>0),N=(0,c.computed)(()=>A.value||e.placeholder.value||``);function P(e){let t=[],n=new Map;for(let t of e){let e=t.group,r=n.get(e);r||(r=[],n.set(e,r)),r.push(t)}let r=0;for(let[e,i]of n){e!==void 0&&t.push({label:e,type:`group`});for(let e of i)t.push({idx:r++,opt:e,type:`option`})}return t}let F=(0,c.computed)(()=>P(h.value));function I(e){return h.value.find(t=>t.value===e)?.label??e}function L(e){let t=w.value,n=t.map(e=>I(e));o(`change`,{labels:n,originalEvent:e,values:t})}function R(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(x.removeValue(t),L(e),C(`change`))}function z(e=`programmatic`){S.open(e),requestAnimationFrame(()=>{let e=w.value.length>0?h.value.findIndex(e=>e.value===w.value[0]):-1;if(e>=0){S.set(e);return}S.navigate(`first`)})}function B(t,n){t.disabled||(e.multiple.value?x.toggleValue(t.value):(x.selectValue(t.value),S.close()),L(n),C(`change`))}function V(e){if(!T.value&&!S.handleKeydown(e))switch(e.key){case` `:case`Enter`:if(e.preventDefault(),k.value){let t=O.value,n=h.value;t>=0&&t<n.length&&B(n[t],e)}else z(`keyboard`);break;case`Tab`:S.close();break}}let H=()=>N.value,U=()=>e.label.value??``,W=()=>e.placeholder.value??``,G=()=>e[`label-placement`].value??`inset`,K=()=>e.color?.value??void 0,q=()=>_.size?.value??void 0,J=()=>_.variant?.value??void 0,Y=()=>e.rounded?.value??void 0,X=()=>e.helper.value??``,Z=()=>e.error.value??``,Q=()=>T.value?!0:void 0,$=()=>e.required.value?!0:void 0,te=()=>e.fullwidth.value?!0:void 0,ne=()=>e.loading.value?!0:void 0,re=()=>T.value?`-1`:`0`;(0,c.watch)(u.elements(),()=>ee(),{immediate:!0});let ie=(0,c.effect)(()=>{k.value?y&&`showPopover`in y&&!y.matches(`:popover-open`)&&y.showPopover():y&&`hidePopover`in y&&y.matches(`:popover-open`)&&y.hidePopover()});return(0,s.onCleanup)(()=>ie.dispose()),(0,s.onMounted)(()=>{let e=null,t=null;return v&&(e=e=>{e.stopPropagation(),!T.value&&(k.value?S.close(`trigger`):z(`click`))},t=e=>{V(e)},v.addEventListener(`click`,e),v.addEventListener(`keydown`,t)),()=>{v&&e&&v.removeEventListener(`click`,e),v&&t&&v.removeEventListener(`keydown`,t)}}),s.html`<slot style="display:none"></slot>
       <ore-input
         class="trigger"
         part="trigger"
@@ -26,7 +26,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         ?loading="${ne}"
         ref="${e=>{v=e}}">
         <div slot="prefix" class="chips-row" ?hidden="${()=>!M.value}">
-          ${()=>j.value.map(t=>c.html`<ore-chip
+          ${()=>j.value.map(t=>s.html`<ore-chip
                   value="${t.value}"
                   label="${t.label}"
                   mode="removable"
@@ -56,7 +56,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div class="dropdown-loading" ?hidden="${()=>!p.value}">Loading…</div>
         <div class="dropdown-empty" ?hidden="${()=>p.value||h.value.length>0}">No options</div>
         <div class="options-list" ?hidden="${()=>p.value||h.value.length===0}">
-          ${()=>F.value.map(e=>e.type===`group`?c.html`<div class="optgroup-label" role="presentation">${e.label}</div>`:c.html`<div
+          ${()=>F.value.map(e=>e.type===`group`?s.html`<div class="optgroup-label" role="presentation">${e.label}</div>`:s.html`<div
                     class="option"
                     role="option"
                     id="${`${E}-opt-${e.idx}`}"
@@ -75,5 +75,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     </span>
                   </div>`)}
         </div>
-      </div>`},shadow:{delegatesFocus:!0},styles:[e.reducedMotionMixin,s.default]}),exports.SELECT_TAG=u;
+      </div>`},shadow:{delegatesFocus:!0},styles:[e.reducedMotionMixin,o.default]}),exports.SELECT_TAG=u;
 //# sourceMappingURL=select.cjs.map

package/dist/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onCleanup, onMounted, useEmit, useSlots } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, effect, signal, watch } from '@vielzeug/ripple';\n\nimport type { ChoiceChangeDetail, DropdownCloseReason, OverlayOpenDetail, OverlayOpenReason } from '../../headless';\nimport type { SelectableFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createChoiceField, createOptionList } from '../../headless';\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, loadableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './select.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\nexport type OreSelectOptionInput = {\n  disabled?: boolean;\n  group?: string;\n  label?: string;\n  value: string;\n};\n\ntype FlatRow =\n  | {\n      idx: number;\n      opt: OptionItem;\n      type: 'option';\n    }\n  | {\n      label: string;\n      type: 'group';\n    };\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Component Props ─────────────────────────────────────────────────────────────\n\n/** Select component properties */\n\nexport type OreSelectEvents = {\n  change: ChoiceChangeDetail;\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n};\n\nexport type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'text' | 'frost'>> & {\n  /** Show loading state in dropdown */\n  loading?: boolean;\n  /** Allow selecting multiple options */\n  multiple?: boolean;\n  /** JS options array (alternative to slotted <option> elements) */\n  options?: OreSelectOptionInput[];\n  /** Mark the field as required */\n  required?: boolean;\n};\n\n/**\n * A fully custom form-associated select dropdown with keyboard navigation and ARIA support.\n * Reads `<option>` and `<optgroup>` children from the default slot.\n *\n * @element ore-select\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current selected value(s) (comma-separated for multiple)\n * @attr {string} placeholder - Placeholder when no option selected\n * @attr {string} name - Form field name\n * @attr {boolean} multiple - Enable multi-select\n * @attr {boolean} disabled - Disable the select\n * @attr {boolean} required - Required field\n * @attr {string} helper - Helper text below the select\n * @attr {string} error - Error message\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @fires change - Fired when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n * @fires open - Fired when the dropdown opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the dropdown closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\n *\n * @slot - `<option>` and `<optgroup>` elements\n *\n * @cssprop --select-bg - Background\n * @cssprop --select-border-color - Border color\n * @cssprop --select-radius - Border radius\n * @cssprop --select-padding - Padding\n * @cssprop --select-font-size - Font size\n * @cssprop --select-placeholder-color - Placeholder text color\n *\n * @part trigger - The `ore-input` trigger element that opens the dropdown.\n * @part dropdown - The dropdown listbox panel container.\n *\n * @example\n * ```html\n * <ore-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </ore-select>\n *\n * <ore-select label=\"Tags\" multiple color=\"primary\">\n *   <optgroup label=\"Frontend\">\n *     <option value=\"react\">React</option>\n *     <option value=\"vue\">Vue</option>\n *   </optgroup>\n *   <optgroup label=\"Backend\">\n *     <option value=\"node\">Node.js</option>\n *   </optgroup>\n * </ore-select>\n * ```\n */\nexport const SELECT_TAG = 'ore-select' as const;\ndefine<OreSelectProps>(SELECT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    options: prop.json(undefined as OreSelectOptionInput[] | undefined),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSelectEvents>();\n    const slots = useSlots();\n\n    const shadowRoot = el.shadowRoot;\n    // ────────────────────────────────────────────────────────────────\n    // State & Context\n    // ────────────────────────────────────────────────────────────────\n\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n\n    // Merged options: explicit prop value overrides slotted options\n    function normalizeOption(option: OreSelectOptionInput): OptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        group: option.group,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    const options = computed(() => {\n      const explicitOptions = props.options.value;\n\n      return Array.isArray(explicitOptions) ? explicitOptions.map(normalizeOption) : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const optionList = createOptionList<OptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => options.value,\n      getPanel: () => dropdownEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => choice.disabled.value,\n      onClose: (reason) => {\n        emit('close', { reason });\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      signal: abortSignal,\n    });\n\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedValues;\n    const isDisabled = choice.disabled;\n\n    const { fieldId: selectId } = choice;\n    const listboxId = `listbox-${selectId}`;\n    const { focusedIndex, isOpen } = optionList;\n\n    // Sync host attributes for CSS hooks\n    bind({\n      attr: {\n        'has-error': () => (props.error.value ? true : undefined),\n        open: () => (isOpen.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Option Reading from Slot\n    // ────────────────────────────────────────────────────────────────\n\n    function readOptions() {\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot');\n\n      if (!slot) return;\n\n      const assigned = slot.assignedElements({ flatten: true });\n      const items: OptionItem[] = [];\n\n      for (const el of assigned) {\n        if (el.tagName === 'OPTION') {\n          const opt = el as HTMLOptionElement;\n\n          items.push({ disabled: opt.disabled, label: opt.text || opt.value, value: opt.value });\n        } else if (el.tagName === 'OPTGROUP') {\n          const group = el as HTMLOptGroupElement;\n          const groupLabel = group.label;\n\n          for (const child of Array.from(group.querySelectorAll('option'))) {\n            const opt = child as HTMLOptionElement;\n\n            items.push({ disabled: opt.disabled, group: groupLabel, label: opt.text || opt.value, value: opt.value });\n          }\n        }\n      }\n\n      slottedOptions.value = items;\n    }\n\n    const displayLabel = computed(() => {\n      if (selectedValues.value.length === 0) return '';\n\n      if (props.multiple.value && selectedValues.value.length > 1) {\n        return `${selectedValues.value.length} selected`;\n      }\n\n      const first = selectedValues.value[0];\n\n      return options.value.find((o) => o.value === first)?.label ?? first;\n    });\n    const selectedChipItems = computed(() => {\n      if (!props.multiple.value) return [];\n\n      return selectedValues.value.map((value) => ({\n        label: options.value.find((o) => o.value === value)?.label ?? value,\n        value,\n      }));\n    });\n    const showChips = computed(() => props.multiple.value && selectedValues.value.length > 0);\n    const triggerText = computed(() => displayLabel.value || props.placeholder.value || '');\n\n    function buildFlatList(opts: OptionItem[]): FlatRow[] {\n      const flat: FlatRow[] = [];\n      const groups = new Map<string | undefined, OptionItem[]>();\n\n      for (const opt of opts) {\n        const key = opt.group;\n\n        let group = groups.get(key);\n\n        if (!group) {\n          group = [];\n          groups.set(key, group);\n        }\n\n        group.push(opt);\n      }\n\n      let globalIdx = 0;\n\n      for (const [groupLabel, groupOpts] of groups) {\n        if (groupLabel !== undefined) flat.push({ label: groupLabel, type: 'group' });\n\n        for (const opt of groupOpts) flat.push({ idx: globalIdx++, opt, type: 'option' });\n      }\n\n      return flat;\n    }\n\n    const flatRows = computed(() => buildFlatList(options.value));\n\n    function getLabelForValue(value: string): string {\n      return options.value.find((option) => option.value === value)?.label ?? value;\n    }\n\n    function emitChange(originalEvent?: Event): void {\n      const values = selectedValues.value;\n      const labels = values.map((value) => getLabelForValue(value));\n\n      emit('change', { labels, originalEvent, values });\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      choice.removeValue(value);\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    function openPopup(reason: OverlayOpenReason = 'programmatic') {\n      optionList.open(reason);\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : -1;\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n\n          return;\n        }\n\n        optionList.navigate('first');\n      });\n    }\n\n    // Selection\n\n    function selectOption(opt: OptionItem, e?: Event) {\n      if (opt.disabled) return;\n\n      if (props.multiple.value) {\n        choice.toggleValue(opt.value);\n      } else {\n        choice.selectValue(opt.value);\n        optionList.close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n\n    // Keyboard navigation\n\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      // Let optionList handle arrow key navigation\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            const idx = focusedIndex.value;\n            const opts = options.value;\n\n            if (idx >= 0 && idx < opts.length) selectOption(opts[idx], e);\n          } else {\n            openPopup('keyboard');\n          }\n\n          break;\n        case 'Tab':\n          optionList.close();\n          break;\n      }\n    }\n\n    // ore-input prop helpers\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n    const inputLoading = () => (props.loading.value ? true : undefined);\n    const tabIndexAttr = () => (isDisabled.value ? '-1' : '0');\n\n    watch(slots.elements(), () => readOptions(), { immediate: true });\n\n    const stopPopoverSync = effect(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    onCleanup(() => stopPopoverSync.dispose());\n\n    onMounted(() => {\n      let onTriggerClick: ((event: MouseEvent) => void) | null = null;\n      let onTriggerKeydown: ((event: KeyboardEvent) => void) | null = null;\n\n      if (triggerEl) {\n        onTriggerClick = (event: MouseEvent) => {\n          event.stopPropagation();\n\n          if (isDisabled.value) return;\n\n          if (isOpen.value) optionList.close('trigger');\n          else openPopup('click');\n        };\n        onTriggerKeydown = (event: KeyboardEvent) => {\n          handleTriggerKeydown(event);\n        };\n\n        triggerEl.addEventListener('click', onTriggerClick);\n        triggerEl.addEventListener('keydown', onTriggerKeydown);\n      }\n\n      return () => {\n        if (triggerEl && onTriggerClick) triggerEl.removeEventListener('click', onTriggerClick);\n\n        if (triggerEl && onTriggerKeydown) triggerEl.removeEventListener('keydown', onTriggerKeydown);\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <ore-input\n        class=\"trigger\"\n        part=\"trigger\"\n        readonly\n        tabindex=\"${tabIndexAttr}\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${listboxId}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-invalid=\"${() => (props.error.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?loading=\"${inputLoading}\"\n        ref=\"${(el: HTMLElement) => {\n          triggerEl = el;\n        }}\">\n        <div slot=\"prefix\" class=\"chips-row\" ?hidden=\"${() => !showChips.value}\">\n          ${() =>\n            selectedChipItems.value.map(\n              (item) =>\n                html`<ore-chip\n                  value=\"${item.value}\"\n                  label=\"${item.label}\"\n                  mode=\"removable\"\n                  variant=\"flat\"\n                  size=\"sm\"\n                  color=\"${props.color}\"\n                  @remove=\"${removeChip}\">\n                  ${item.label}\n                </ore-chip>`,\n            )}\n        </div>\n        <span slot=\"suffix\" class=\"trigger-suffix\" aria-hidden=\"true\">\n          <span class=\"loader\"></span>\n          <span class=\"trigger-icon\">\n            <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        popover=\"manual\"\n        ?data-open=\"${isOpen}\"\n        role=\"listbox\"\n        id=\"${listboxId}\"\n        aria-label=\"Options\"\n        ref=\"${(el: HTMLElement) => {\n          dropdownEl = el;\n        }}\">\n        <div class=\"dropdown-loading\" ?hidden=\"${() => !isLoading.value}\">Loading…</div>\n        <div class=\"dropdown-empty\" ?hidden=\"${() => isLoading.value || options.value.length > 0}\">No options</div>\n        <div class=\"options-list\" ?hidden=\"${() => isLoading.value || options.value.length === 0}\">\n          ${() =>\n            flatRows.value.map((row) =>\n              row.type === 'group'\n                ? html`<div class=\"optgroup-label\" role=\"presentation\">${row.label}</div>`\n                : html`<div\n                    class=\"option\"\n                    role=\"option\"\n                    id=\"${`${selectId}-opt-${row.idx}`}\"\n                    data-option-index=\"${String(row.idx)}\"\n                    data-option-value=\"${row.opt.value}\"\n                    aria-selected=\"${() => String(selectedValues.value.includes(row.opt.value))}\"\n                    aria-disabled=\"${() => String(row.opt.disabled)}\"\n                    ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                    ?data-selected=\"${() => selectedValues.value.includes(row.opt.value)}\"\n                    ?data-disabled=\"${() => row.opt.disabled}\"\n                    @click=\"${(e: MouseEvent) => {\n                      e.stopPropagation();\n                      selectOption(row.opt, e);\n                    }}\"\n                    @pointerenter=\"${() => {\n                      optionList.set(row.idx);\n                    }}\">\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">\n                      <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    </span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"yfA4HA,IAAa,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,GAAG,EAAA,gBACH,MAAO,EAAA,KAAK,OAAO,EACnB,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,OAAO,EACpB,MAAO,EAAA,KAAK,OAAO,EACnB,kBAAmB,EAAA,KAAK,MAAM,CAAC,QAAS,SAAS,EAAY,OAAO,EACpE,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,KAAM,EAAA,KAAK,OAAO,EAClB,QAAS,EAAA,KAAK,KAAK,IAAA,EAA+C,EAClE,YAAa,EAAA,KAAK,OAAO,EACzB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,EACnB,QAAS,EAAA,KAAK,OAA4D,CAC5E,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAgC,EAChC,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,EAAa,EAAG,WAKhB,GAAA,EAAA,EAAA,OAAA,CAAsC,CAAC,CAAC,EACxC,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAQ,EAAM,QAAQ,KAAM,EAG7D,SAAS,EAAgB,EAA0C,CACjE,MAAO,CACL,SAAU,EAAQ,EAAO,SACzB,MAAO,EAAO,MACd,MAAO,EAAO,OAAS,EAAO,MAC9B,MAAO,EAAO,KAChB,CACF,CAEA,IAAM,GAAA,EAAA,EAAA,SAAA,KAAyB,CAC7B,IAAM,EAAkB,EAAM,QAAQ,MAEtC,OAAO,MAAM,QAAQ,CAAe,EAAI,EAAgB,IAAI,CAAe,EAAI,EAAe,KAChG,CAAC,EACK,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAE3C,EAAgC,KAChC,EAAiC,KAE/B,EAAc,EAAA,gBAAgB,EAAA,SAAS,EACvC,EAAS,EAAA,kBAAkB,CAC/B,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,MAAO,EAAM,MACb,eAAgB,EAAM,mBACtB,SAAU,EAAM,SAChB,OAAQ,SACR,SAAU,EAAM,SAChB,OAAQ,EACR,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAO,gBACL,EAAA,SAAiB,CACf,SAAU,EAAO,SACjB,QAAS,EAAO,MAChB,YAAc,GAAM,EACpB,kBAAmB,EAAO,kBAC1B,SAAU,EAAO,SACjB,MAAO,EAAO,SAChB,CAAC,CACH,EAEA,IAAM,EAAa,EAAA,iBAA6B,CAC9C,gBAAmB,EACnB,4BAA+B,GAAY,cAA2B,gBAAgB,GAAK,KAC3F,aAAgB,EAAQ,MACxB,aAAgB,EAChB,iBAAoB,EACpB,eAAkB,EAClB,eAAkB,EAAO,SAAS,MAClC,QAAU,GAAW,CACnB,EAAK,QAAS,CAAE,QAAO,CAAC,EACxB,EAAO,kBAAkB,MAAM,CACjC,EACA,OAAS,GAAW,EAAK,OAAQ,CAAE,QAAO,CAAC,EAC3C,OAAQ,CACV,CAAC,EAEK,CAAE,qBAAsB,EACxB,EAAiB,EAAO,eACxB,EAAa,EAAO,SAEpB,CAAE,QAAS,GAAa,EACxB,EAAY,WAAW,IACvB,CAAE,eAAc,UAAW,GAGjC,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,gBAAoB,EAAM,MAAM,MAAQ,GAAO,IAAA,GAC/C,SAAa,EAAO,MAAQ,GAAO,IAAA,GACnC,KAAM,EAAU,KAChB,QAAS,EAAU,OACrB,CACF,CAAC,EAMD,SAAS,IAAc,CACrB,IAAM,EAAO,GAAY,cAA+B,MAAM,EAE9D,GAAI,CAAC,EAAM,OAEX,IAAM,EAAW,EAAK,iBAAiB,CAAE,QAAS,EAAK,CAAC,EAClD,EAAsB,CAAC,EAE7B,IAAK,IAAM,KAAM,EACf,GAAI,EAAG,UAAY,SAAU,CAC3B,IAAM,EAAM,EAEZ,EAAM,KAAK,CAAE,SAAU,EAAI,SAAU,MAAO,EAAI,MAAQ,EAAI,MAAO,MAAO,EAAI,KAAM,CAAC,CACvF,MAAO,GAAI,EAAG,UAAY,WAAY,CACpC,IAAM,EAAQ,EACR,EAAa,EAAM,MAEzB,IAAK,IAAM,KAAS,MAAM,KAAK,EAAM,iBAAiB,QAAQ,CAAC,EAAG,CAChE,IAAM,EAAM,EAEZ,EAAM,KAAK,CAAE,SAAU,EAAI,SAAU,MAAO,EAAY,MAAO,EAAI,MAAQ,EAAI,MAAO,MAAO,EAAI,KAAM,CAAC,CAC1G,CACF,CAGF,EAAe,MAAQ,CACzB,CAEA,IAAM,GAAA,EAAA,EAAA,SAAA,KAA8B,CAClC,GAAI,EAAe,MAAM,SAAW,EAAG,MAAO,GAE9C,GAAI,EAAM,SAAS,OAAS,EAAe,MAAM,OAAS,EACxD,MAAO,GAAG,EAAe,MAAM,OAAO,WAGxC,IAAM,EAAQ,EAAe,MAAM,GAEnC,OAAO,EAAQ,MAAM,KAAM,GAAM,EAAE,QAAU,CAAK,CAAC,EAAE,OAAS,CAChE,CAAC,EACK,GAAA,EAAA,EAAA,SAAA,KACC,EAAM,SAAS,MAEb,EAAe,MAAM,IAAK,IAAW,CAC1C,MAAO,EAAQ,MAAM,KAAM,GAAM,EAAE,QAAU,CAAK,CAAC,EAAE,OAAS,EAC9D,OACF,EAAE,EALgC,CAAC,CAMpC,EACK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,SAAS,OAAS,EAAe,MAAM,OAAS,CAAC,EAClF,GAAA,EAAA,EAAA,SAAA,KAA6B,EAAa,OAAS,EAAM,YAAY,OAAS,EAAE,EAEtF,SAAS,EAAc,EAA+B,CACpD,IAAM,EAAkB,CAAC,EACnB,EAAS,IAAI,IAEnB,IAAK,IAAM,KAAO,EAAM,CACtB,IAAM,EAAM,EAAI,MAEZ,EAAQ,EAAO,IAAI,CAAG,EAErB,IACH,EAAQ,CAAC,EACT,EAAO,IAAI,EAAK,CAAK,GAGvB,EAAM,KAAK,CAAG,CAChB,CAEA,IAAI,EAAY,EAEhB,IAAK,GAAM,CAAC,EAAY,KAAc,EAAQ,CACxC,IAAe,IAAA,IAAW,EAAK,KAAK,CAAE,MAAO,EAAY,KAAM,OAAQ,CAAC,EAE5E,IAAK,IAAM,KAAO,EAAW,EAAK,KAAK,CAAE,IAAK,IAAa,MAAK,KAAM,QAAS,CAAC,CAClF,CAEA,OAAO,CACT,CAEA,IAAM,GAAA,EAAA,EAAA,SAAA,KAA0B,EAAc,EAAQ,KAAK,CAAC,EAE5D,SAAS,EAAiB,EAAuB,CAC/C,OAAO,EAAQ,MAAM,KAAM,GAAW,EAAO,QAAU,CAAK,CAAC,EAAE,OAAS,CAC1E,CAEA,SAAS,EAAW,EAA6B,CAC/C,IAAM,EAAS,EAAe,MACxB,EAAS,EAAO,IAAK,GAAU,EAAiB,CAAK,CAAC,EAE5D,EAAK,SAAU,CAAE,SAAQ,gBAAe,QAAO,CAAC,CAClD,CAEA,SAAS,EAAW,EAAoB,CACtC,EAAM,gBAAgB,EAEtB,IAAM,EAAS,EAA0C,QAAQ,MAE7D,IAAU,IAAA,KAEd,EAAO,YAAY,CAAK,EACxB,EAAW,CAAK,EAChB,EAAkB,QAAQ,EAC5B,CAEA,SAAS,EAAU,EAA4B,eAAgB,CAC7D,EAAW,KAAK,CAAM,EAEtB,0BAA4B,CAC1B,IAAM,EACJ,EAAe,MAAM,OAAS,EAC1B,EAAQ,MAAM,UAAW,GAAW,EAAO,QAAU,EAAe,MAAM,EAAE,EAC5E,GAEN,GAAI,GAAiB,EAAG,CACtB,EAAW,IAAI,CAAa,EAE5B,MACF,CAEA,EAAW,SAAS,OAAO,CAC7B,CAAC,CACH,CAIA,SAAS,EAAa,EAAiB,EAAW,CAC5C,EAAI,WAEJ,EAAM,SAAS,MACjB,EAAO,YAAY,EAAI,KAAK,GAE5B,EAAO,YAAY,EAAI,KAAK,EAC5B,EAAW,MAAM,GAGnB,EAAW,CAAC,EACZ,EAAkB,QAAQ,EAC5B,CAIA,SAAS,EAAqB,EAAkB,CAC1C,MAAW,OAGX,GAAW,cAAc,CAAC,EAE9B,OAAQ,EAAE,IAAV,CACE,IAAK,IACL,IAAK,QAGH,GAFA,EAAE,eAAe,EAEb,EAAO,MAAO,CAChB,IAAM,EAAM,EAAa,MACnB,EAAO,EAAQ,MAEjB,GAAO,GAAK,EAAM,EAAK,QAAQ,EAAa,EAAK,GAAM,CAAC,CAC9D,MACE,EAAU,UAAU,EAGtB,MACF,IAAK,MACH,EAAW,MAAM,EACjB,KACJ,CACF,CAGA,IAAM,MAAmB,EAAY,MAC/B,MAAmB,EAAM,MAAM,OAAS,GACxC,MAAyB,EAAM,YAAY,OAAS,GACpD,MAA4B,EAAM,kBAAkB,CAAC,OAAS,QAC9D,MAAmB,EAAM,OAAO,OAAS,IAAA,GACzC,MAAkB,EAAU,MAAM,OAAS,IAAA,GAC3C,MAAqB,EAAU,SAAS,OAAS,IAAA,GACjD,MAAqB,EAAM,SAAS,OAAS,IAAA,GAC7C,MAAoB,EAAM,OAAO,OAAS,GAC1C,MAAmB,EAAM,MAAM,OAAS,GACxC,MAAuB,EAAW,MAAQ,GAAO,IAAA,GACjD,MAAuB,EAAM,SAAS,MAAQ,GAAO,IAAA,GACrD,OAAwB,EAAM,UAAU,MAAQ,GAAO,IAAA,GACvD,OAAsB,EAAM,QAAQ,MAAQ,GAAO,IAAA,GACnD,OAAsB,EAAW,MAAQ,KAAO,KAEtD,EAAA,EAAA,MAAA,CAAM,EAAM,SAAS,MAAS,GAAY,EAAG,CAAE,UAAW,EAAK,CAAC,EAEhE,IAAM,IAAA,EAAA,EAAA,OAAA,KAA+B,CAC/B,EAAO,MACL,GAAc,gBAAiB,GAAc,CAAC,EAAW,QAAQ,eAAe,GAAG,EAAW,YAAY,EAE1G,GAAc,gBAAiB,GAAc,EAAW,QAAQ,eAAe,GAAG,EAAW,YAAY,CAEjH,CAAC,EAgCD,OA9BA,EAAA,EAAA,UAAA,KAAgB,GAAgB,QAAQ,CAAC,GAEzC,EAAA,EAAA,UAAA,KAAgB,CACd,IAAI,EAAuD,KACvD,EAA4D,KAmBhE,OAjBI,IACF,EAAkB,GAAsB,CACtC,EAAM,gBAAgB,EAElB,GAAW,QAEX,EAAO,MAAO,EAAW,MAAM,SAAS,EACvC,EAAU,OAAO,EACxB,EACA,EAAoB,GAAyB,CAC3C,EAAqB,CAAK,CAC5B,EAEA,EAAU,iBAAiB,QAAS,CAAc,EAClD,EAAU,iBAAiB,UAAW,CAAgB,OAG3C,CACP,GAAa,GAAgB,EAAU,oBAAoB,QAAS,CAAc,EAElF,GAAa,GAAkB,EAAU,oBAAoB,UAAW,CAAgB,CAC9F,CACF,CAAC,EAEM,EAAA,IAAI;;;;;oBAKK,GAAa;;;yBAGR,EAAU;8BACF,EAAW,MAAQ,OAAS,KAAM;8BACnC,OAAO,EAAO,KAAK,EAAE;6BACrB,EAAM,MAAM,MAAQ,OAAS,KAAM;kBACjD,EAAW;kBACX,EAAW;wBACL,EAAiB;4BACb,EAAoB;kBAC9B,EAAW;iBACZ,EAAU;oBACP,EAAa;oBACb,EAAa;mBACd,EAAY;kBACb,EAAW;qBACR,EAAc;qBACd,EAAc;sBACb,GAAe;oBACjB,GAAa;eACjB,GAAoB,CAC1B,EAAY,CACd,EAAE;4DACoD,CAAC,EAAU,MAAM;gBAEnE,EAAkB,MAAM,IACrB,GACC,EAAA,IAAI;2BACO,EAAK,MAAM;2BACX,EAAK,MAAM;;;;2BAIX,EAAM,MAAM;6BACV,EAAW;oBACpB,EAAK,MAAM;4BAEnB,EAAE;;;;;;;;;;;;;sBAaQ,EAAO;;cAEf,EAAU;;eAER,GAAoB,CAC1B,EAAa,CACf,EAAE;qDAC6C,CAAC,EAAU,MAAM;mDACnB,EAAU,OAAS,EAAQ,MAAM,OAAS,EAAE;iDAC9C,EAAU,OAAS,EAAQ,MAAM,SAAW,EAAE;gBAErF,EAAS,MAAM,IAAK,GAClB,EAAI,OAAS,QACT,EAAA,IAAI,mDAAmD,EAAI,MAAM,QACjE,EAAA,IAAI;;;0BAGI,GAAG,EAAS,OAAO,EAAI,MAAM;yCACd,OAAO,EAAI,GAAG,EAAE;yCAChB,EAAI,IAAI,MAAM;yCACZ,OAAO,EAAe,MAAM,SAAS,EAAI,IAAI,KAAK,CAAC,EAAE;yCACrD,OAAO,EAAI,IAAI,QAAQ,EAAE;yCACzB,EAAa,QAAU,EAAI,IAAI;0CAC9B,EAAe,MAAM,SAAS,EAAI,IAAI,KAAK,EAAE;0CAC7C,EAAI,IAAI,SAAS;8BAC9B,GAAkB,CAC3B,EAAE,gBAAgB,EAClB,EAAa,EAAI,IAAK,CAAC,CACzB,EAAE;yCACqB,CACrB,EAAW,IAAI,EAAI,GAAG,CACxB,EAAE;4BACM,EAAI,IAAI,MAAM;;;;yBAK9B,EAAE;;aAGZ,EACA,OAAQ,CAAE,eAAgB,EAAK,EAC/B,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"select.cjs","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onCleanup, onMounted, useEmit, useSlots } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, effect, signal, watch } from '@vielzeug/ripple';\n\nimport type { ChoiceChangeDetail, DropdownCloseReason, OverlayOpenDetail, OverlayOpenReason } from '../../headless';\nimport type { SelectableFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createChoiceField, createOptionList } from '../../headless';\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, loadableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './select.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\ntype OptionItem = {\n  disabled: boolean;\n  group?: string;\n  label: string;\n  value: string;\n};\n\nexport type OreSelectOptionInput = {\n  disabled?: boolean;\n  group?: string;\n  label?: string;\n  value: string;\n};\n\ntype FlatRow =\n  | {\n      idx: number;\n      opt: OptionItem;\n      type: 'option';\n    }\n  | {\n      label: string;\n      type: 'group';\n    };\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Component Props ─────────────────────────────────────────────────────────────\n\n/** Select component properties */\n\nexport type OreSelectEvents = {\n  change: ChoiceChangeDetail;\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n};\n\nexport type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'text' | 'frost'>> & {\n  /** Show loading state in dropdown */\n  loading?: boolean;\n  /** Allow selecting multiple options */\n  multiple?: boolean;\n  /** JS options array (alternative to slotted <option> elements) */\n  options?: OreSelectOptionInput[];\n  /** Mark the field as required */\n  required?: boolean;\n};\n\n/**\n * A fully custom form-associated select dropdown with keyboard navigation and ARIA support.\n * Reads `<option>` and `<optgroup>` children from the default slot.\n *\n * @element ore-select\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} value - Current selected value(s) (comma-separated for multiple)\n * @attr {string} placeholder - Placeholder when no option selected\n * @attr {string} name - Form field name\n * @attr {boolean} multiple - Enable multi-select\n * @attr {boolean} disabled - Disable the select\n * @attr {boolean} required - Required field\n * @attr {string} helper - Helper text below the select\n * @attr {string} error - Error message\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @fires change - Fired when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n * @fires open - Fired when the dropdown opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the dropdown closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\n *\n * @slot - `<option>` and `<optgroup>` elements\n *\n * @cssprop --select-bg - Background\n * @cssprop --select-border-color - Border color\n * @cssprop --select-radius - Border radius\n * @cssprop --select-padding - Padding\n * @cssprop --select-font-size - Font size\n * @cssprop --select-placeholder-color - Placeholder text color\n *\n * @part trigger - The `ore-input` trigger element that opens the dropdown.\n * @part dropdown - The dropdown listbox panel container.\n *\n * @example\n * ```html\n * <ore-select label=\"Role\" value=\"admin\">\n *   <option value=\"admin\">Administrator</option>\n *   <option value=\"editor\">Editor</option>\n *   <option value=\"viewer\">Viewer</option>\n * </ore-select>\n *\n * <ore-select label=\"Tags\" multiple color=\"primary\">\n *   <optgroup label=\"Frontend\">\n *     <option value=\"react\">React</option>\n *     <option value=\"vue\">Vue</option>\n *   </optgroup>\n *   <optgroup label=\"Backend\">\n *     <option value=\"node\">Node.js</option>\n *   </optgroup>\n * </ore-select>\n * ```\n */\nexport const SELECT_TAG = 'ore-select' as const;\ndefine<OreSelectProps>(SELECT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    options: prop.json(undefined as OreSelectOptionInput[] | undefined),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSelectEvents>();\n    const slots = useSlots();\n\n    const shadowRoot = el.shadowRoot;\n    // ────────────────────────────────────────────────────────────────\n    // State & Context\n    // ────────────────────────────────────────────────────────────────\n\n    const slottedOptions = signal<OptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n\n    // Merged options: explicit prop value overrides slotted options\n    function normalizeOption(option: OreSelectOptionInput): OptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        group: option.group,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    const options = computed(() => {\n      const explicitOptions = props.options.value;\n\n      return Array.isArray(explicitOptions) ? explicitOptions.map(normalizeOption) : slottedOptions.value;\n    });\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const optionList = createOptionList<OptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => options.value,\n      getPanel: () => dropdownEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => choice.disabled.value,\n      onClose: (reason) => {\n        emit('close', { reason });\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      signal: abortSignal,\n    });\n\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedValues;\n    const isDisabled = choice.disabled;\n\n    const { fieldId: selectId } = choice;\n    const listboxId = `listbox-${selectId}`;\n    const { focusedIndex, isOpen } = optionList;\n\n    // Sync host attributes for CSS hooks\n    bind({\n      attr: {\n        'has-error': () => (props.error.value ? true : undefined),\n        open: () => (isOpen.value ? true : undefined),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Option Reading from Slot\n    // ────────────────────────────────────────────────────────────────\n\n    function readOptions() {\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot');\n\n      if (!slot) return;\n\n      const assigned = slot.assignedElements({ flatten: true });\n      const items: OptionItem[] = [];\n\n      for (const el of assigned) {\n        if (el.tagName === 'OPTION') {\n          const opt = el as HTMLOptionElement;\n\n          items.push({ disabled: opt.disabled, label: opt.text || opt.value, value: opt.value });\n        } else if (el.tagName === 'OPTGROUP') {\n          const group = el as HTMLOptGroupElement;\n          const groupLabel = group.label;\n\n          for (const child of Array.from(group.querySelectorAll('option'))) {\n            const opt = child as HTMLOptionElement;\n\n            items.push({ disabled: opt.disabled, group: groupLabel, label: opt.text || opt.value, value: opt.value });\n          }\n        }\n      }\n\n      slottedOptions.value = items;\n    }\n\n    const displayLabel = computed(() => {\n      if (selectedValues.value.length === 0) return '';\n\n      if (props.multiple.value && selectedValues.value.length > 1) {\n        return `${selectedValues.value.length} selected`;\n      }\n\n      const first = selectedValues.value[0];\n\n      return options.value.find((o) => o.value === first)?.label ?? first;\n    });\n    const selectedChipItems = computed(() => {\n      if (!props.multiple.value) return [];\n\n      return selectedValues.value.map((value) => ({\n        label: options.value.find((o) => o.value === value)?.label ?? value,\n        value,\n      }));\n    });\n    const showChips = computed(() => props.multiple.value && selectedValues.value.length > 0);\n    const triggerText = computed(() => displayLabel.value || props.placeholder.value || '');\n\n    function buildFlatList(opts: OptionItem[]): FlatRow[] {\n      const flat: FlatRow[] = [];\n      const groups = new Map<string | undefined, OptionItem[]>();\n\n      for (const opt of opts) {\n        const key = opt.group;\n\n        let group = groups.get(key);\n\n        if (!group) {\n          group = [];\n          groups.set(key, group);\n        }\n\n        group.push(opt);\n      }\n\n      let globalIdx = 0;\n\n      for (const [groupLabel, groupOpts] of groups) {\n        if (groupLabel !== undefined) flat.push({ label: groupLabel, type: 'group' });\n\n        for (const opt of groupOpts) flat.push({ idx: globalIdx++, opt, type: 'option' });\n      }\n\n      return flat;\n    }\n\n    const flatRows = computed(() => buildFlatList(options.value));\n\n    function getLabelForValue(value: string): string {\n      return options.value.find((option) => option.value === value)?.label ?? value;\n    }\n\n    function emitChange(originalEvent?: Event): void {\n      const values = selectedValues.value;\n      const labels = values.map((value) => getLabelForValue(value));\n\n      emit('change', { labels, originalEvent, values });\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      choice.removeValue(value);\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    function openPopup(reason: OverlayOpenReason = 'programmatic') {\n      optionList.open(reason);\n\n      requestAnimationFrame(() => {\n        const selectedIndex =\n          selectedValues.value.length > 0\n            ? options.value.findIndex((option) => option.value === selectedValues.value[0])\n            : -1;\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n\n          return;\n        }\n\n        optionList.navigate('first');\n      });\n    }\n\n    // Selection\n\n    function selectOption(opt: OptionItem, e?: Event) {\n      if (opt.disabled) return;\n\n      if (props.multiple.value) {\n        choice.toggleValue(opt.value);\n      } else {\n        choice.selectValue(opt.value);\n        optionList.close();\n      }\n\n      emitChange(e);\n      triggerValidation('change');\n    }\n\n    // Keyboard navigation\n\n    function handleTriggerKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      // Let optionList handle arrow key navigation\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            const idx = focusedIndex.value;\n            const opts = options.value;\n\n            if (idx >= 0 && idx < opts.length) selectOption(opts[idx], e);\n          } else {\n            openPopup('keyboard');\n          }\n\n          break;\n        case 'Tab':\n          optionList.close();\n          break;\n      }\n    }\n\n    // ore-input prop helpers\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n    const inputLoading = () => (props.loading.value ? true : undefined);\n    const tabIndexAttr = () => (isDisabled.value ? '-1' : '0');\n\n    watch(slots.elements(), () => readOptions(), { immediate: true });\n\n    const stopPopoverSync = effect(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    onCleanup(() => stopPopoverSync.dispose());\n\n    onMounted(() => {\n      let onTriggerClick: ((event: MouseEvent) => void) | null = null;\n      let onTriggerKeydown: ((event: KeyboardEvent) => void) | null = null;\n\n      if (triggerEl) {\n        onTriggerClick = (event: MouseEvent) => {\n          event.stopPropagation();\n\n          if (isDisabled.value) return;\n\n          if (isOpen.value) optionList.close('trigger');\n          else openPopup('click');\n        };\n        onTriggerKeydown = (event: KeyboardEvent) => {\n          handleTriggerKeydown(event);\n        };\n\n        triggerEl.addEventListener('click', onTriggerClick);\n        triggerEl.addEventListener('keydown', onTriggerKeydown);\n      }\n\n      return () => {\n        if (triggerEl && onTriggerClick) triggerEl.removeEventListener('click', onTriggerClick);\n\n        if (triggerEl && onTriggerKeydown) triggerEl.removeEventListener('keydown', onTriggerKeydown);\n      };\n    });\n\n    return html`<slot style=\"display:none\"></slot>\n      <ore-input\n        class=\"trigger\"\n        part=\"trigger\"\n        readonly\n        tabindex=\"${tabIndexAttr}\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"${listboxId}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-invalid=\"${() => (props.error.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?loading=\"${inputLoading}\"\n        ref=\"${(el: HTMLElement) => {\n          triggerEl = el;\n        }}\">\n        <div slot=\"prefix\" class=\"chips-row\" ?hidden=\"${() => !showChips.value}\">\n          ${() =>\n            selectedChipItems.value.map(\n              (item) =>\n                html`<ore-chip\n                  value=\"${item.value}\"\n                  label=\"${item.label}\"\n                  mode=\"removable\"\n                  variant=\"flat\"\n                  size=\"sm\"\n                  color=\"${props.color}\"\n                  @remove=\"${removeChip}\">\n                  ${item.label}\n                </ore-chip>`,\n            )}\n        </div>\n        <span slot=\"suffix\" class=\"trigger-suffix\" aria-hidden=\"true\">\n          <span class=\"loader\"></span>\n          <span class=\"trigger-icon\">\n            <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        popover=\"manual\"\n        ?data-open=\"${isOpen}\"\n        role=\"listbox\"\n        id=\"${listboxId}\"\n        aria-label=\"Options\"\n        ref=\"${(el: HTMLElement) => {\n          dropdownEl = el;\n        }}\">\n        <div class=\"dropdown-loading\" ?hidden=\"${() => !isLoading.value}\">Loading…</div>\n        <div class=\"dropdown-empty\" ?hidden=\"${() => isLoading.value || options.value.length > 0}\">No options</div>\n        <div class=\"options-list\" ?hidden=\"${() => isLoading.value || options.value.length === 0}\">\n          ${() =>\n            flatRows.value.map((row) =>\n              row.type === 'group'\n                ? html`<div class=\"optgroup-label\" role=\"presentation\">${row.label}</div>`\n                : html`<div\n                    class=\"option\"\n                    role=\"option\"\n                    id=\"${`${selectId}-opt-${row.idx}`}\"\n                    data-option-index=\"${String(row.idx)}\"\n                    data-option-value=\"${row.opt.value}\"\n                    aria-selected=\"${() => String(selectedValues.value.includes(row.opt.value))}\"\n                    aria-disabled=\"${() => String(row.opt.disabled)}\"\n                    ?data-focused=\"${() => focusedIndex.value === row.idx}\"\n                    ?data-selected=\"${() => selectedValues.value.includes(row.opt.value)}\"\n                    ?data-disabled=\"${() => row.opt.disabled}\"\n                    @click=\"${(e: MouseEvent) => {\n                      e.stopPropagation();\n                      selectOption(row.opt, e);\n                    }}\"\n                    @pointerenter=\"${() => {\n                      optionList.set(row.idx);\n                    }}\">\n                    <span>${row.opt.label}</span>\n                    <span class=\"option-check\" aria-hidden=\"true\">\n                      <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    </span>\n                  </div>`,\n            )}\n        </div>\n      </div>`;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/select.js

@@ -1,17 +1,16 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { disablableBundle as t, loadableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 import { lifecycleSignal as o } from "./headless/ore.js";
-import { createChoiceField as ee } from "./headless/choice-field.js";
-import { createOptionList as s } from "./headless/option-list.js";
-import { useField as c } from "./ore/dist/forms/field.js";
-import "./ore/dist/forms.js";
+import { createChoiceField as s } from "./headless/choice-field.js";
+import { createOptionList as c } from "./headless/option-list.js";
 import { FORM_CTX as l, useFormContext as u } from "./inputs/shared/form-context.js";
 import d from "./inputs/select/select.css.js";
 import { bind as f, define as p, getHost as m, html as h, inject as g, onCleanup as _, onMounted as v, prop as y, useEmit as b, useSlots as x } from "@vielzeug/ore";
 import { computed as S, effect as C, signal as w, watch as T } from "@vielzeug/ripple";
+import { useField as E } from "@vielzeug/ore/forms";
 //#region src/inputs/select/select.ts
-var E = "ore-select";
-p(E, {
+var D = "ore-select";
+p(D, {
 	formAssociated: !0,
 	props: {
 		...a,
@@ -45,8 +44,8 @@ p(E, {
 		let y = S(() => {
 			let t = e.options.value;
 			return Array.isArray(t) ? t.map(p) : a.value;
-		}), E = g(l), D = u(e, E), O = null, k = null, A = o(_), j = ee({
-			disabled: D.disabled,
+		}), D = g(l), O = u(e, D), k = null, A = null, j = o(_), M = s({
+			disabled: O.disabled,
 			error: e.error,
 			helper: e.helper,
 			label: e.label,
@@ -54,39 +53,39 @@ p(E, {
 			multiple: e.multiple,
 			prefix: "select",
 			required: e.required,
-			signal: A,
-			validateOn: E?.validateOn,
+			signal: j,
+			validateOn: D?.validateOn,
 			value: e.value
 		});
-		j.attachFormField(c({
-			disabled: j.disabled,
-			onReset: j.reset,
+		M.attachFormField(E({
+			disabled: M.disabled,
+			onReset: M.reset,
 			toFormValue: (e) => e,
-			validationMessage: j.validationMessage,
-			validity: j.validity,
-			value: j.formValue
+			validationMessage: M.validationMessage,
+			validity: M.validity,
+			value: M.formValue
 		}));
-		let M = s({
+		let N = c({
 			getBoundary: () => t,
-			getFocusedOptionElement: () => k?.querySelector("[data-focused]") ?? null,
+			getFocusedOptionElement: () => A?.querySelector("[data-focused]") ?? null,
 			getItems: () => y.value,
-			getPanel: () => k,
-			getReference: () => O,
-			getTrigger: () => O,
-			isDisabled: () => j.disabled.value,
+			getPanel: () => A,
+			getReference: () => k,
+			getTrigger: () => k,
+			isDisabled: () => M.disabled.value,
 			onClose: (e) => {
-				n("close", { reason: e }), j.triggerValidation("blur");
+				n("close", { reason: e }), M.triggerValidation("blur");
 			},
 			onOpen: (e) => n("open", { reason: e }),
-			signal: A
-		}), { triggerValidation: N } = j, P = j.selectedValues, F = j.disabled, { fieldId: I } = j, L = `listbox-${I}`, { focusedIndex: R, isOpen: z } = M;
+			signal: j
+		}), { triggerValidation: P } = M, F = M.selectedValues, I = M.disabled, { fieldId: L } = M, R = `listbox-${L}`, { focusedIndex: z, isOpen: B } = N;
 		f({ attr: {
 			"has-error": () => e.error.value ? !0 : void 0,
-			open: () => z.value ? !0 : void 0,
-			size: D.size,
-			variant: D.variant
+			open: () => B.value ? !0 : void 0,
+			size: O.size,
+			variant: O.variant
 		} });
-		function B() {
+		function V() {
 			let e = i?.querySelector("slot");
 			if (!e) return;
 			let t = e.assignedElements({ flatten: !0 }), n = [];
@@ -111,16 +110,16 @@ p(E, {
 			}
 			a.value = n;
 		}
-		let V = S(() => {
-			if (P.value.length === 0) return "";
-			if (e.multiple.value && P.value.length > 1) return `${P.value.length} selected`;
-			let t = P.value[0];
+		let H = S(() => {
+			if (F.value.length === 0) return "";
+			if (e.multiple.value && F.value.length > 1) return `${F.value.length} selected`;
+			let t = F.value[0];
 			return y.value.find((e) => e.value === t)?.label ?? t;
-		}), H = S(() => e.multiple.value ? P.value.map((e) => ({
+		}), U = S(() => e.multiple.value ? F.value.map((e) => ({
 			label: y.value.find((t) => t.value === e)?.label ?? e,
 			value: e
-		})) : []), U = S(() => e.multiple.value && P.value.length > 0), W = S(() => V.value || e.placeholder.value || "");
-		function G(e) {
+		})) : []), W = S(() => e.multiple.value && F.value.length > 0), G = S(() => H.value || e.placeholder.value || "");
+		function K(e) {
 			let t = [], n = /* @__PURE__ */ new Map();
 			for (let t of e) {
 				let e = t.group, r = n.get(e);
@@ -140,63 +139,63 @@ p(E, {
 			}
 			return t;
 		}
-		let K = S(() => G(y.value));
-		function q(e) {
+		let q = S(() => K(y.value));
+		function J(e) {
 			return y.value.find((t) => t.value === e)?.label ?? e;
 		}
-		function J(e) {
-			let t = P.value, r = t.map((e) => q(e));
+		function Y(e) {
+			let t = F.value, r = t.map((e) => J(e));
 			n("change", {
 				labels: r,
 				originalEvent: e,
 				values: t
 			});
 		}
-		function te(e) {
+		function ee(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (j.removeValue(t), J(e), N("change"));
+			t !== void 0 && (M.removeValue(t), Y(e), P("change"));
 		}
-		function Y(e = "programmatic") {
-			M.open(e), requestAnimationFrame(() => {
-				let e = P.value.length > 0 ? y.value.findIndex((e) => e.value === P.value[0]) : -1;
+		function X(e = "programmatic") {
+			N.open(e), requestAnimationFrame(() => {
+				let e = F.value.length > 0 ? y.value.findIndex((e) => e.value === F.value[0]) : -1;
 				if (e >= 0) {
-					M.set(e);
+					N.set(e);
 					return;
 				}
-				M.navigate("first");
+				N.navigate("first");
 			});
 		}
-		function X(t, n) {
-			t.disabled || (e.multiple.value ? j.toggleValue(t.value) : (j.selectValue(t.value), M.close()), J(n), N("change"));
+		function Z(t, n) {
+			t.disabled || (e.multiple.value ? M.toggleValue(t.value) : (M.selectValue(t.value), N.close()), Y(n), P("change"));
 		}
-		function Z(e) {
-			if (!F.value && !M.handleKeydown(e)) switch (e.key) {
+		function Q(e) {
+			if (!I.value && !N.handleKeydown(e)) switch (e.key) {
 				case " ":
 				case "Enter":
-					if (e.preventDefault(), z.value) {
-						let t = R.value, n = y.value;
-						t >= 0 && t < n.length && X(n[t], e);
-					} else Y("keyboard");
+					if (e.preventDefault(), B.value) {
+						let t = z.value, n = y.value;
+						t >= 0 && t < n.length && Z(n[t], e);
+					} else X("keyboard");
 					break;
 				case "Tab":
-					M.close();
+					N.close();
 					break;
 			}
 		}
-		let Q = () => W.value, ne = () => e.label.value ?? "", re = () => e.placeholder.value ?? "", ie = () => e["label-placement"].value ?? "inset", ae = () => e.color?.value ?? void 0, oe = () => D.size?.value ?? void 0, $ = () => D.variant?.value ?? void 0, se = () => e.rounded?.value ?? void 0, ce = () => e.helper.value ?? "", le = () => e.error.value ?? "", ue = () => F.value ? !0 : void 0, de = () => e.required.value ? !0 : void 0, fe = () => e.fullwidth.value ? !0 : void 0, pe = () => e.loading.value ? !0 : void 0, me = () => F.value ? "-1" : "0";
-		T(r.elements(), () => B(), { immediate: !0 });
+		let $ = () => G.value, te = () => e.label.value ?? "", ne = () => e.placeholder.value ?? "", re = () => e["label-placement"].value ?? "inset", ie = () => e.color?.value ?? void 0, ae = () => O.size?.value ?? void 0, oe = () => O.variant?.value ?? void 0, se = () => e.rounded?.value ?? void 0, ce = () => e.helper.value ?? "", le = () => e.error.value ?? "", ue = () => I.value ? !0 : void 0, de = () => e.required.value ? !0 : void 0, fe = () => e.fullwidth.value ? !0 : void 0, pe = () => e.loading.value ? !0 : void 0, me = () => I.value ? "-1" : "0";
+		T(r.elements(), () => V(), { immediate: !0 });
 		let he = C(() => {
-			z.value ? k && "showPopover" in k && !k.matches(":popover-open") && k.showPopover() : k && "hidePopover" in k && k.matches(":popover-open") && k.hidePopover();
+			B.value ? A && "showPopover" in A && !A.matches(":popover-open") && A.showPopover() : A && "hidePopover" in A && A.matches(":popover-open") && A.hidePopover();
 		});
 		return _(() => he.dispose()), v(() => {
 			let e = null, t = null;
-			return O && (e = (e) => {
-				e.stopPropagation(), !F.value && (z.value ? M.close("trigger") : Y("click"));
+			return k && (e = (e) => {
+				e.stopPropagation(), !I.value && (B.value ? N.close("trigger") : X("click"));
 			}, t = (e) => {
-				Z(e);
-			}, O.addEventListener("click", e), O.addEventListener("keydown", t)), () => {
-				O && e && O.removeEventListener("click", e), O && t && O.removeEventListener("keydown", t);
+				Q(e);
+			}, k.addEventListener("click", e), k.addEventListener("keydown", t)), () => {
+				k && e && k.removeEventListener("click", e), k && t && k.removeEventListener("keydown", t);
 			};
 		}), h`<slot style="display:none"></slot>
       <ore-input
@@ -206,17 +205,17 @@ p(E, {
         tabindex="${me}"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${L}"
-        :aria-disabled="${() => F.value ? "true" : null}"
-        :aria-expanded="${() => String(z.value)}"
+        aria-controls="${R}"
+        :aria-disabled="${() => I.value ? "true" : null}"
+        :aria-expanded="${() => String(B.value)}"
         :aria-invalid="${() => e.error.value ? "true" : null}"
-        :value="${Q}"
-        :label="${ne}"
-        :placeholder="${re}"
-        :label-placement="${ie}"
-        :color="${ae}"
-        :size="${oe}"
-        :variant="${$}"
+        :value="${$}"
+        :label="${te}"
+        :placeholder="${ne}"
+        :label-placement="${re}"
+        :color="${ie}"
+        :size="${ae}"
+        :variant="${oe}"
         :rounded="${se}"
         :helper="${ce}"
         :error="${le}"
@@ -225,17 +224,17 @@ p(E, {
         ?fullwidth="${fe}"
         ?loading="${pe}"
         ref="${(e) => {
-			O = e;
+			k = e;
 		}}">
-        <div slot="prefix" class="chips-row" ?hidden="${() => !U.value}">
-          ${() => H.value.map((t) => h`<ore-chip
+        <div slot="prefix" class="chips-row" ?hidden="${() => !W.value}">
+          ${() => U.value.map((t) => h`<ore-chip
                   value="${t.value}"
                   label="${t.label}"
                   mode="removable"
                   variant="flat"
                   size="sm"
                   color="${e.color}"
-                  @remove="${te}">
+                  @remove="${ee}">
                   ${t.label}
                 </ore-chip>`)}
         </div>
@@ -250,32 +249,32 @@ p(E, {
         class="dropdown"
         part="dropdown"
         popover="manual"
-        ?data-open="${z}"
+        ?data-open="${B}"
         role="listbox"
-        id="${L}"
+        id="${R}"
         aria-label="Options"
         ref="${(e) => {
-			k = e;
+			A = e;
 		}}">
         <div class="dropdown-loading" ?hidden="${() => !d.value}">Loading…</div>
         <div class="dropdown-empty" ?hidden="${() => d.value || y.value.length > 0}">No options</div>
         <div class="options-list" ?hidden="${() => d.value || y.value.length === 0}">
-          ${() => K.value.map((e) => e.type === "group" ? h`<div class="optgroup-label" role="presentation">${e.label}</div>` : h`<div
+          ${() => q.value.map((e) => e.type === "group" ? h`<div class="optgroup-label" role="presentation">${e.label}</div>` : h`<div
                     class="option"
                     role="option"
-                    id="${`${I}-opt-${e.idx}`}"
+                    id="${`${L}-opt-${e.idx}`}"
                     data-option-index="${String(e.idx)}"
                     data-option-value="${e.opt.value}"
-                    aria-selected="${() => String(P.value.includes(e.opt.value))}"
+                    aria-selected="${() => String(F.value.includes(e.opt.value))}"
                     aria-disabled="${() => String(e.opt.disabled)}"
-                    ?data-focused="${() => R.value === e.idx}"
-                    ?data-selected="${() => P.value.includes(e.opt.value)}"
+                    ?data-focused="${() => z.value === e.idx}"
+                    ?data-selected="${() => F.value.includes(e.opt.value)}"
                     ?data-disabled="${() => e.opt.disabled}"
                     @click="${(t) => {
-			t.stopPropagation(), X(e.opt, t);
+			t.stopPropagation(), Z(e.opt, t);
 		}}"
                     @pointerenter="${() => {
-			M.set(e.idx);
+			N.set(e.idx);
 		}}">
                     <span>${e.opt.label}</span>
                     <span class="option-check" aria-hidden="true">
@@ -289,6 +288,6 @@ p(E, {
 	styles: [e, d]
 });
 //#endregion
-export { E as SELECT_TAG };
+export { D as SELECT_TAG };
 
 //# sourceMappingURL=select.js.map