@vielzeug/refine 1.7.0 → 2.0.0

package/dist/register.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Internal all-components entry used by the standalone bundle and docs theme.
+ *
+ * Applications register components through explicit subpaths; the IIFE bundle
+ * is the intentional all-components distribution for script-tag consumers.
+ */
+import * as content from './content';
+import * as disclosure from './disclosure';
+import * as feedback from './feedback';
+import * as inputs from './inputs';
+import * as layout from './layout';
+import * as overlay from './overlay';
+export declare const components: {
+    content: typeof content;
+    disclosure: typeof disclosure;
+    feedback: typeof feedback;
+    inputs: typeof inputs;
+    layout: typeof layout;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAGrC,eAAO,MAAM,UAAU;;;;;;;CAA6D,CAAC"}

package/dist/select.cjs

@@ -1,41 +1,44 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./headless/ore.cjs"),a=require("./headless/choice-field.cjs"),o=require("./headless/option-list.cjs"),s=require("./inputs/shared/form-context.cjs"),c=require("./inputs/select/select.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/ore/forms");var f=`ore-select`;(0,l.define)(f,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,...r.loadableBundle,...r.roundableBundle,error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),multiple:l.prop.bool(!1),name:l.prop.string(),options:l.prop.json(void 0),placeholder:l.prop.string(),required:l.prop.bool(!1),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),r=(0,l.useSlots)(),c=t.shadowRoot,f=(0,u.signal)([]),p=(0,u.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,u.computed)(()=>{let t=e.options.value;return Array.isArray(t)?t.map(m):f.value}),g=(0,l.inject)(s.FORM_CTX),_=s.useFormContext(e,g),v=null,y=null,b=i.lifecycleSignal(l.onCleanup),x=a.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,d.useField)({disabled:x.disabled,onReset:x.reset,toFormValue:e=>e,validationMessage:x.validationMessage,validity:x.validity,value:x.formValue}));let S=o.createOptionList({getBoundary:()=>t,getFocusedOptionElement:()=>y?.querySelector(`[data-focused]`)??null,getItems:()=>h.value,getPanel:()=>y,getReference:()=>v,getTrigger:()=>v,isDisabled:()=>x.disabled.value,onClose:e=>{n(`close`,{reason:e}),x.triggerValidation(`blur`)},onOpen:e=>n(`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,l.bind)({attr:{"has-error":()=>e.error.value?!0:void 0,open:()=>k.value?!0:void 0,size:_.size,variant:_.variant}});function A(){let e=c?.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 j=(0,u.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}),M=(0,u.computed)(()=>e.multiple.value?w.value.map(e=>({label:h.value.find(t=>t.value===e)?.label??e,value:e})):[]),N=(0,u.computed)(()=>e.multiple.value&&w.value.length>0),P=(0,u.computed)(()=>j.value||e.placeholder.value||``);function F(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 I=(0,u.computed)(()=>F(h.value));function L(e){return h.value.find(t=>t.value===e)?.label??e}function R(e){let t=w.value,r=t.map(e=>L(e));n(`change`,{labels:r,originalEvent:e,values:t})}function z(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(x.removeValue(t),R(e),C(`change`))}function B(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 V(t,n){t.disabled||(e.multiple.value?x.toggleValue(t.value):(x.selectValue(t.value),S.close()),R(n),C(`change`))}function H(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&&V(n[t],e)}else B(`keyboard`);break;case`Tab`:S.close();break}}let U=()=>P.value,W=()=>e.label.value??``,G=()=>e.placeholder.value??``,K=()=>e[`label-placement`].value??`inset`,q=()=>e.color?.value??void 0,J=()=>_.size?.value??void 0,Y=()=>_.variant?.value??void 0,X=()=>e.rounded?.value??void 0,Z=()=>e.helper.value??``,Q=()=>e.error.value??``,$=()=>T.value?!0:void 0,ee=()=>e.required.value?!0:void 0,te=()=>e.fullwidth.value?!0:void 0,ne=()=>T.value?`-1`:`0`;(0,u.watch)(r.elements(),()=>A(),{immediate:!0});let re=(0,u.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,l.onCleanup)(()=>re.dispose()),(0,l.onMounted)(()=>{let e=null,t=null;return v&&(e=e=>{e.stopPropagation(),!T.value&&(k.value?S.close(`trigger`):B(`click`))},t=e=>{H(e)},v.addEventListener(`click`,e),v.addEventListener(`keydown`,t)),()=>{v&&e&&v.removeEventListener(`click`,e),v&&t&&v.removeEventListener(`keydown`,t)}}),l.html`<slot style="display:none"></slot>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/choice-field.cjs"),n=require("./styles/mixins/accessibility.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/theme.css.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./core/option-list.cjs"),c=require("./inputs/select/select.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/ripple/watch");var f=`ore-select`;(0,l.define)(f,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,...a.loadableBundle,...a.roundableBundle,error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),multiple:l.prop.bool(!1),name:l.prop.string(),options:l.prop.json(void 0),placeholder:l.prop.string(),required:l.prop.bool(!1),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(n){let r=(0,l.getHost)(),i=(0,l.useEmit)(),a=(0,l.useSlots)(),c=r.shadowRoot,f=(0,u.signal)([]),p=(0,u.computed)(()=>!!n.loading.value);function m(e){return{disabled:!!e.disabled,group:e.group,label:e.label??e.value,value:e.value}}let h=(0,u.computed)(()=>{let e=n.options.value;return Array.isArray(e)?e.map(m):f.value}),g=null,_=null,v=e.lifecycleSignal(l.onCleanup),y=t.createChoiceField({disabled:n.disabled,error:n.error,helper:n.helper,label:n.label,labelPlacement:n[`label-placement`],multiple:n.multiple,prefix:`select`,required:n.required,signal:v,value:n.value});y.attachFormField((0,l.useField)({disabled:y.disabled,onReset:y.reset,toFormValue:e=>e,validationMessage:y.validationMessage,validity:y.validity,value:y.formValue}));let b=s.createListboxDropdown({getBoundary:()=>r,getFocusedOptionElement:()=>_?.querySelector(`[data-focused]`)??null,getItems:()=>h.value,getPanel:()=>_,getReference:()=>g,getTrigger:()=>g,isDisabled:()=>y.disabled.value,onClose:e=>{i(`open-change`,{open:!1,reason:e}),y.triggerValidation(`blur`)},onOpen:e=>i(`open-change`,{open:!0,reason:e}),signal:v}),{triggerValidation:x}=y,S=y.selectedValues,C=y.disabled;o.defineFieldValue(r,()=>y.formValue.value,e=>{y.setValues(e?e.split(`,`):[])});let{fieldId:w}=y,T=`listbox-${w}`,{focusedIndex:E,isOpen:D}=b;(0,l.bind)({attr:{"has-error":()=>n.error.value?!0:void 0,open:()=>D.value?!0:void 0,size:n.size,variant:n.variant}});function O(){let e=c?.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 k=(0,u.computed)(()=>{if(S.value.length===0)return``;if(n.multiple.value&&S.value.length>1)return`${S.value.length} selected`;let e=S.value[0];return h.value.find(t=>t.value===e)?.label??e}),A=(0,u.computed)(()=>n.multiple.value?S.value.map(e=>({label:h.value.find(t=>t.value===e)?.label??e,value:e})):[]),j=(0,u.computed)(()=>n.multiple.value&&S.value.length>0),M=(0,u.computed)(()=>k.value||n.placeholder.value||``);function N(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 P=(0,u.computed)(()=>N(h.value));function F(){o.setFieldValue(r,y.formValue.value),o.dispatchNativeFieldEvent(r,`input`),o.dispatchNativeFieldEvent(r,`change`)}function I(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(y.removeValue(t),F(),x(`change`))}function L(e=`programmatic`){b.open(e),requestAnimationFrame(()=>{let e=S.value.length>0?h.value.findIndex(e=>e.value===S.value[0]):-1;if(e>=0){b.set(e);return}b.navigate(`first`)})}function R(e,t){e.disabled||(n.multiple.value?y.toggleValue(e.value):(y.selectValue(e.value),b.close()),F(),x(`change`))}function z(e){if(!C.value&&!b.handleKeydown(e))switch(e.key){case` `:case`Enter`:if(e.preventDefault(),D.value){let t=E.value,n=h.value;t>=0&&t<n.length&&R(n[t],e)}else L(`keyboard`);break;case`Tab`:b.close()}}let B=()=>M.value,V=()=>n.label.value??``,H=()=>n.placeholder.value??``,U=()=>n[`label-placement`].value??`inset`,W=()=>n.color?.value??void 0,G=()=>n.size?.value??void 0,K=()=>n.variant?.value??void 0,q=()=>n.rounded?.value??void 0,J=()=>n.helper.value??``,Y=()=>n.error.value??``,X=()=>C.value?!0:void 0,Z=()=>n.required.value?!0:void 0,Q=()=>n.fullwidth.value?!0:void 0,$=()=>C.value?`-1`:`0`;(0,d.watch)(a.elements(),()=>O(),{immediate:!0});let ee=(0,u.effect)(()=>{D.value?_&&`showPopover`in _&&!_.matches(`:popover-open`)&&_.showPopover():_&&`hidePopover`in _&&_.matches(`:popover-open`)&&_.hidePopover()});return(0,l.onCleanup)(()=>ee.dispose()),(0,l.onMounted)(()=>{let e=null,t=null;return g&&(e=e=>{e.stopPropagation(),!C.value&&(D.value?b.close(`trigger`):L(`click`))},t=e=>{z(e)},g.addEventListener(`click`,e),g.addEventListener(`keydown`,t)),()=>{g&&e&&g.removeEventListener(`click`,e),g&&t&&g.removeEventListener(`keydown`,t)}}),l.html`
+      <slot style="display:none"></slot>
       <ore-input
         class="trigger"
         part="trigger"
         readonly
-        tabindex="${ne}"
+        tabindex="${$}"
         role="combobox"
         aria-haspopup="listbox"
-        aria-controls="${D}"
-        :aria-disabled="${()=>T.value?`true`:null}"
-        :aria-expanded="${()=>String(k.value)}"
-        :aria-invalid="${()=>e.error.value?`true`:null}"
-        :value="${U}"
-        :label="${W}"
-        :placeholder="${G}"
-        :label-placement="${K}"
-        :color="${q}"
-        :size="${J}"
-        :variant="${Y}"
-        :rounded="${X}"
-        :helper="${Z}"
-        :error="${Q}"
-        ?disabled="${$}"
-        ?required="${ee}"
-        ?fullwidth="${te}"
-        ?success="${()=>e.success.value}"
-        ref="${e=>{v=e}}">
-        <div slot="prefix" class="chips-row" ?hidden="${()=>!N.value}">
-          ${()=>M.value.map(t=>l.html`<ore-chip
-                  value="${t.value}"
-                  label="${t.label}"
+        aria-controls="${T}"
+        aria-disabled="${()=>C.value?`true`:null}"
+        aria-expanded="${()=>String(D.value)}"
+        aria-invalid="${()=>n.error.value?`true`:null}"
+        value="${B}"
+        label="${V}"
+        placeholder="${H}"
+        label-placement="${U}"
+        color="${W}"
+        size="${G}"
+        variant="${K}"
+        rounded="${q}"
+        helper="${J}"
+        error="${Y}"
+        ?disabled="${X}"
+        ?required="${Z}"
+        ?fullwidth="${Q}"
+        ?success="${()=>n.success.value}"
+        ref="${e=>{g=e}}">
+        <div slot="prefix" class="chips-row" ?hidden="${()=>!j.value}">
+          ${()=>A.value.map(e=>l.html`
+                <ore-chip
+                  value="${e.value}"
+                  label="${e.label}"
                   mode="removable"
                   variant="flat"
                   size="sm"
-                  color="${e.color}"
-                  @remove="${z}">
-                  ${t.label}
-                </ore-chip>`)}
+                  color="${n.color}"
+                  @remove="${I}">
+                  ${e.label}
+                </ore-chip>
+              `)}
         </div>
         <span slot="suffix" class="trigger-suffix" aria-hidden="true">
           <span class="loader"></span>
@@ -48,32 +51,37 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         class="dropdown"
         part="dropdown"
         popover="manual"
-        ?data-open="${k}"
+        ?data-open="${D}"
         role="listbox"
-        id="${D}"
+        id="${T}"
         aria-label="Options"
-        ref="${e=>{y=e}}">
+        ref="${e=>{_=e}}">
         <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}">
-          ${()=>I.value.map(e=>e.type===`group`?l.html`<div class="optgroup-label" role="presentation">${e.label}</div>`:l.html`<div
-                    class="option"
-                    role="option"
-                    id="${`${E}-opt-${e.idx}`}"
-                    data-option-index="${String(e.idx)}"
-                    data-option-value="${e.opt.value}"
-                    aria-selected="${()=>String(w.value.includes(e.opt.value))}"
-                    aria-disabled="${()=>String(e.opt.disabled)}"
-                    ?data-focused="${()=>O.value===e.idx}"
-                    ?data-selected="${()=>w.value.includes(e.opt.value)}"
-                    ?data-disabled="${()=>e.opt.disabled}"
-                    @click="${t=>{t.stopPropagation(),V(e.opt,t)}}"
-                    @pointerenter="${()=>{S.set(e.idx)}}">
-                    <span>${e.opt.label}</span>
-                    <span class="option-check" aria-hidden="true">
-                      <ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                    </span>
-                  </div>`)}
+          ${()=>P.value.map(e=>e.type===`group`?l.html`
+                    <div class="optgroup-label" role="presentation">${e.label}</div>
+                  `:l.html`
+                    <div
+                      class="option"
+                      role="option"
+                      id="${`${w}-opt-${e.idx}`}"
+                      data-option-index="${String(e.idx)}"
+                      data-option-value="${e.opt.value}"
+                      aria-selected="${()=>String(S.value.includes(e.opt.value))}"
+                      aria-disabled="${()=>String(e.opt.disabled)}"
+                      ?data-focused="${()=>E.value===e.idx}"
+                      ?data-selected="${()=>S.value.includes(e.opt.value)}"
+                      ?data-disabled="${()=>e.opt.disabled}"
+                      @click="${t=>{t.stopPropagation(),R(e.opt,t)}}"
+                      @pointerenter="${()=>{b.set(e.idx)}}">
+                      <span>${e.opt.label}</span>
+                      <span class="option-check" aria-hidden="true">
+                        <ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                      </span>
+                    </div>
+                  `)}
         </div>
-      </div>`},shadow:{delegatesFocus:!0},styles:[n.colorThemeMixin,e.reducedMotionMixin,t.roundedVariantMixin,c.default]}),exports.SELECT_TAG=f;
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[i.colorThemeMixin,n.reducedMotionMixin,r.roundedVariantMixin,c.default]}),exports.SELECT_TAG=f;
 //# 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 { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } 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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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    success: 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 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        ?success=\"${() => props.success.value}\"\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: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onCleanup, onMounted, useEmit, useSlots } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, effect, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { OverlayOpenChangeDetail, OverlayOpenReason } from '../../core';\nimport type { SelectableFieldProps } from '../../shared';\nimport type { VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createChoiceField } from '../../core';\nimport { createListboxDropdown } from '../../core/_internal';\nimport '../../feedback/chip/chip';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, loadableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\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: Event;\n  input: Event;\n  'open-change': OverlayOpenChangeDetail;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 input - Fired when selection changes.\n * @fires change - Fired when selection changes.\n * @fires open-change - Fired when the dropdown state changes. detail: { open, reason }\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    success: 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    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: props.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      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 = createListboxDropdown<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('open-change', { open: false, reason });\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      signal: abortSignal,\n    });\n\n    const { triggerValidation } = choice;\n    const selectedValues = choice.selectedValues;\n    const isDisabled = choice.disabled;\n\n    defineFieldValue(\n      el,\n      () => choice.formValue.value,\n      (value) => {\n        choice.setValues(value ? value.split(',') : []);\n      },\n    );\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: props.size,\n        variant: props.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 emitChange(): void {\n      setFieldValue(el, choice.formValue.value);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\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();\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();\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 = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.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 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`\n      <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        ?success=\"${() => props.success.value}\"\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) => html`\n                <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            )}\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`\n                    <div class=\"optgroup-label\" role=\"presentation\">${row.label}</div>\n                  `\n                : html`\n                    <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            )}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n});\n"],"mappings":"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"}