@vielzeug/refine 1.1.1

package/dist/select.cjs

@@ -0,0 +1,79 @@
+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?inline.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=`ore-select`;(0,s.define)(l,{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,{bind:t,el:o,emit:l,onCleanup:u,onMounted:d,slots:f}){let ee=o.shadowRoot,p=(0,c.signal)([]),m=(0,c.computed)(()=>!!e.loading.value);function h(e){return{disabled:!!e.disabled,group:e.group,label:e.label??e.value,value:e.value}}let g=(0,c.computed)(()=>{let t=e.options.value;return Array.isArray(t)?t.map(h):p.value}),_=(0,s.inject)(a.FORM_CTX),v=a.useFormContext(t,e,_),y=null,b=null,x=n.lifecycleSignal(u),S=null,C=r.createChoiceField({disabled:v.disabled,error:e.error,getFormField:()=>S,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`select`,signal:x,validateOn:_?.validateOn,value:e.value});S=(0,s.useField)({disabled:C.disabled,toFormValue:e=>e,value:C.formValue});let w=i.createOptionList({getBoundary:()=>o,getFocusedOptionElement:()=>b?.querySelector(`[data-focused]`)??null,getItems:()=>g.value,getPanel:()=>b,getReference:()=>y,getTrigger:()=>y,isDisabled:()=>C.disabled.value,onClose:e=>{l(`close`,{reason:e}),C.triggerValidation(`blur`)},onOpen:e=>l(`open`,{reason:e}),signal:x}),{triggerValidation:T}=C,E=C.selectedValues,D=C.disabled,{fieldId:O}=C,k=`listbox-${O}`,{focusedIndex:A,isOpen:j}=w;t({attr:{"has-error":()=>e.error.value?!0:void 0,open:()=>j.value?!0:void 0,size:v.size,variant:v.variant}});function M(){let e=ee?.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})}}p.value=n}let N=(0,c.computed)(()=>{if(E.value.length===0)return``;if(e.multiple.value&&E.value.length>1)return`${E.value.length} selected`;let t=E.value[0];return g.value.find(e=>e.value===t)?.label??t}),P=(0,c.computed)(()=>e.multiple.value?E.value.map(e=>({label:g.value.find(t=>t.value===e)?.label??e,value:e})):[]),F=(0,c.computed)(()=>e.multiple.value&&E.value.length>0),I=(0,c.computed)(()=>N.value||e.placeholder.value||``);function L(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 R=(0,c.computed)(()=>L(g.value));function z(e){return g.value.find(t=>t.value===e)?.label??e}function B(e){let t=E.value;l(`change`,{labels:t.map(e=>z(e)),originalEvent:e,values:t})}function V(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(C.removeValue(t),B(e),T(`change`))}function H(e=`programmatic`){w.open(e),requestAnimationFrame(()=>{let e=E.value.length>0?g.value.findIndex(e=>e.value===E.value[0]):-1;if(e>=0){w.set(e);return}w.navigate(`first`)})}function U(t,n){t.disabled||(e.multiple.value?C.toggleValue(t.value):(C.selectValue(t.value),w.close()),B(n),T(`change`))}function W(e){if(!D.value&&!w.handleKeydown(e))switch(e.key){case` `:case`Enter`:if(e.preventDefault(),j.value){let t=A.value,n=g.value;t>=0&&t<n.length&&U(n[t],e)}else H(`keyboard`);break;case`Tab`:w.close();break}}let G=()=>I.value,K=()=>e.label.value??``,q=()=>e.placeholder.value??``,J=()=>e[`label-placement`].value??`inset`,Y=()=>e.color?.value??void 0,X=()=>v.size?.value??void 0,Z=()=>v.variant?.value??void 0,Q=()=>e.rounded?.value??void 0,te=()=>e.helper.value??``,ne=()=>e.error.value??``,$=()=>D.value?!0:void 0,re=()=>e.required.value?!0:void 0,ie=()=>e.fullwidth.value?!0:void 0,ae=()=>e.loading.value?!0:void 0,oe=()=>D.value?`-1`:`0`;(0,c.watch)(f.elements(),()=>M(),{immediate:!0});let se=(0,c.effect)(()=>{j.value?b&&`showPopover`in b&&!b.matches(`:popover-open`)&&b.showPopover():b&&`hidePopover`in b&&b.matches(`:popover-open`)&&b.hidePopover()});return u(()=>se.dispose()),d(()=>{let e=null,t=null;return y&&(e=e=>{e.stopPropagation(),!D.value&&(j.value?w.close(`trigger`):H(`click`))},t=e=>{W(e)},y.addEventListener(`click`,e),y.addEventListener(`keydown`,t)),()=>{y&&e&&y.removeEventListener(`click`,e),y&&t&&y.removeEventListener(`keydown`,t)}}),s.html`<slot style="display:none"></slot>
+      <ore-input
+        class="trigger"
+        part="trigger"
+        readonly
+        tabindex="${oe}"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="${k}"
+        :aria-disabled="${()=>D.value?`true`:null}"
+        :aria-expanded="${()=>String(j.value)}"
+        :aria-invalid="${()=>e.error.value?`true`:null}"
+        :value="${G}"
+        :label="${K}"
+        :placeholder="${q}"
+        :label-placement="${J}"
+        :color="${Y}"
+        :size="${X}"
+        :variant="${Z}"
+        :rounded="${Q}"
+        :helper="${te}"
+        :error="${ne}"
+        ?disabled="${$}"
+        ?required="${re}"
+        ?fullwidth="${ie}"
+        ?loading="${ae}"
+        ref="${e=>{y=e}}">
+        <div slot="prefix" class="chips-row" ?hidden="${()=>!F.value}">
+          ${()=>P.value.map(t=>s.html`<ore-chip
+                  value="${t.value}"
+                  label="${t.label}"
+                  mode="removable"
+                  variant="flat"
+                  size="sm"
+                  color="${e.color}"
+                  @remove="${V}">
+                  ${t.label}
+                </ore-chip>`)}
+        </div>
+        <span slot="suffix" class="trigger-suffix" aria-hidden="true">
+          <span class="loader"></span>
+          <span class="trigger-icon">
+            <ore-icon name="chevron-down" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+          </span>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        popover="manual"
+        ?data-open="${j}"
+        role="listbox"
+        id="${k}"
+        aria-label="Options"
+        ref="${e=>{b=e}}">
+        <div class="dropdown-loading" ?hidden="${()=>!m.value}">Loading…</div>
+        <div class="dropdown-empty" ?hidden="${()=>m.value||g.value.length>0}">No options</div>
+        <div class="options-list" ?hidden="${()=>m.value||g.value.length===0}">
+          ${()=>R.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="${`${O}-opt-${e.idx}`}"
+                    data-option-index="${String(e.idx)}"
+                    data-option-value="${e.opt.value}"
+                    aria-selected="${()=>String(E.value.includes(e.opt.value))}"
+                    aria-disabled="${()=>String(e.opt.disabled)}"
+                    ?data-focused="${()=>A.value===e.idx}"
+                    ?data-selected="${()=>E.value.includes(e.opt.value)}"
+                    ?data-disabled="${()=>e.opt.disabled}"
+                    @click="${t=>{t.stopPropagation(),U(e.opt,t)}}"
+                    @pointerenter="${()=>{w.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:[e.reducedMotionMixin,o.default]}),exports.SELECT_TAG=l;
+//# sourceMappingURL=select.cjs.map

package/dist/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.cjs","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\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, OreSelectEvents>(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, { bind, el, emit, onCleanup, onMounted, slots }) {\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(bind, props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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

@@ -0,0 +1,289 @@
+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 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?inline.js";
+import { define as f, html as p, inject as m, prop as h, useField as g } from "@vielzeug/ore";
+import { computed as _, effect as v, signal as y, watch as b } from "@vielzeug/ripple";
+//#region src/inputs/select/select.ts
+var x = "ore-select";
+f(x, {
+	formAssociated: !0,
+	props: {
+		...a,
+		...i,
+		...t,
+		...n,
+		...r,
+		error: h.string(),
+		fullwidth: h.bool(!1),
+		helper: h.string(),
+		label: h.string(),
+		"label-placement": h.oneOf(["inset", "outside"], "inset"),
+		multiple: h.bool(!1),
+		name: h.string(),
+		options: h.json(void 0),
+		placeholder: h.string(),
+		required: h.bool(!1),
+		value: h.string(),
+		variant: h.string()
+	},
+	setup(e, { bind: t, el: n, emit: r, onCleanup: i, onMounted: a, slots: d }) {
+		let f = n.shadowRoot, h = y([]), x = _(() => !!e.loading.value);
+		function S(e) {
+			return {
+				disabled: !!e.disabled,
+				group: e.group,
+				label: e.label ?? e.value,
+				value: e.value
+			};
+		}
+		let C = _(() => {
+			let t = e.options.value;
+			return Array.isArray(t) ? t.map(S) : h.value;
+		}), w = m(l), T = u(t, e, w), E = null, D = null, O = o(i), k = null, A = s({
+			disabled: T.disabled,
+			error: e.error,
+			getFormField: () => k,
+			helper: e.helper,
+			label: e.label,
+			labelPlacement: e["label-placement"],
+			multiple: e.multiple,
+			prefix: "select",
+			signal: O,
+			validateOn: w?.validateOn,
+			value: e.value
+		});
+		k = g({
+			disabled: A.disabled,
+			toFormValue: (e) => e,
+			value: A.formValue
+		});
+		let j = c({
+			getBoundary: () => n,
+			getFocusedOptionElement: () => D?.querySelector("[data-focused]") ?? null,
+			getItems: () => C.value,
+			getPanel: () => D,
+			getReference: () => E,
+			getTrigger: () => E,
+			isDisabled: () => A.disabled.value,
+			onClose: (e) => {
+				r("close", { reason: e }), A.triggerValidation("blur");
+			},
+			onOpen: (e) => r("open", { reason: e }),
+			signal: O
+		}), { triggerValidation: M } = A, N = A.selectedValues, P = A.disabled, { fieldId: F } = A, I = `listbox-${F}`, { focusedIndex: L, isOpen: R } = j;
+		t({ attr: {
+			"has-error": () => e.error.value ? !0 : void 0,
+			open: () => R.value ? !0 : void 0,
+			size: T.size,
+			variant: T.variant
+		} });
+		function z() {
+			let e = f?.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
+					});
+				}
+			}
+			h.value = n;
+		}
+		let B = _(() => {
+			if (N.value.length === 0) return "";
+			if (e.multiple.value && N.value.length > 1) return `${N.value.length} selected`;
+			let t = N.value[0];
+			return C.value.find((e) => e.value === t)?.label ?? t;
+		}), V = _(() => e.multiple.value ? N.value.map((e) => ({
+			label: C.value.find((t) => t.value === e)?.label ?? e,
+			value: e
+		})) : []), H = _(() => e.multiple.value && N.value.length > 0), U = _(() => B.value || e.placeholder.value || "");
+		function W(e) {
+			let t = [], n = /* @__PURE__ */ 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 G = _(() => W(C.value));
+		function K(e) {
+			return C.value.find((t) => t.value === e)?.label ?? e;
+		}
+		function q(e) {
+			let t = N.value;
+			r("change", {
+				labels: t.map((e) => K(e)),
+				originalEvent: e,
+				values: t
+			});
+		}
+		function ee(e) {
+			e.stopPropagation();
+			let t = e.detail?.value;
+			t !== void 0 && (A.removeValue(t), q(e), M("change"));
+		}
+		function J(e = "programmatic") {
+			j.open(e), requestAnimationFrame(() => {
+				let e = N.value.length > 0 ? C.value.findIndex((e) => e.value === N.value[0]) : -1;
+				if (e >= 0) {
+					j.set(e);
+					return;
+				}
+				j.navigate("first");
+			});
+		}
+		function Y(t, n) {
+			t.disabled || (e.multiple.value ? A.toggleValue(t.value) : (A.selectValue(t.value), j.close()), q(n), M("change"));
+		}
+		function X(e) {
+			if (!P.value && !j.handleKeydown(e)) switch (e.key) {
+				case " ":
+				case "Enter":
+					if (e.preventDefault(), R.value) {
+						let t = L.value, n = C.value;
+						t >= 0 && t < n.length && Y(n[t], e);
+					} else J("keyboard");
+					break;
+				case "Tab":
+					j.close();
+					break;
+			}
+		}
+		let Z = () => U.value, Q = () => e.label.value ?? "", $ = () => e.placeholder.value ?? "", te = () => e["label-placement"].value ?? "inset", ne = () => e.color?.value ?? void 0, re = () => T.size?.value ?? void 0, ie = () => T.variant?.value ?? void 0, ae = () => e.rounded?.value ?? void 0, oe = () => e.helper.value ?? "", se = () => e.error.value ?? "", ce = () => P.value ? !0 : void 0, le = () => e.required.value ? !0 : void 0, ue = () => e.fullwidth.value ? !0 : void 0, de = () => e.loading.value ? !0 : void 0, fe = () => P.value ? "-1" : "0";
+		b(d.elements(), () => z(), { immediate: !0 });
+		let pe = v(() => {
+			R.value ? D && "showPopover" in D && !D.matches(":popover-open") && D.showPopover() : D && "hidePopover" in D && D.matches(":popover-open") && D.hidePopover();
+		});
+		return i(() => pe.dispose()), a(() => {
+			let e = null, t = null;
+			return E && (e = (e) => {
+				e.stopPropagation(), !P.value && (R.value ? j.close("trigger") : J("click"));
+			}, t = (e) => {
+				X(e);
+			}, E.addEventListener("click", e), E.addEventListener("keydown", t)), () => {
+				E && e && E.removeEventListener("click", e), E && t && E.removeEventListener("keydown", t);
+			};
+		}), p`<slot style="display:none"></slot>
+      <ore-input
+        class="trigger"
+        part="trigger"
+        readonly
+        tabindex="${fe}"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="${I}"
+        :aria-disabled="${() => P.value ? "true" : null}"
+        :aria-expanded="${() => String(R.value)}"
+        :aria-invalid="${() => e.error.value ? "true" : null}"
+        :value="${Z}"
+        :label="${Q}"
+        :placeholder="${$}"
+        :label-placement="${te}"
+        :color="${ne}"
+        :size="${re}"
+        :variant="${ie}"
+        :rounded="${ae}"
+        :helper="${oe}"
+        :error="${se}"
+        ?disabled="${ce}"
+        ?required="${le}"
+        ?fullwidth="${ue}"
+        ?loading="${de}"
+        ref="${(e) => {
+			E = e;
+		}}">
+        <div slot="prefix" class="chips-row" ?hidden="${() => !H.value}">
+          ${() => V.value.map((t) => p`<ore-chip
+                  value="${t.value}"
+                  label="${t.label}"
+                  mode="removable"
+                  variant="flat"
+                  size="sm"
+                  color="${e.color}"
+                  @remove="${ee}">
+                  ${t.label}
+                </ore-chip>`)}
+        </div>
+        <span slot="suffix" class="trigger-suffix" aria-hidden="true">
+          <span class="loader"></span>
+          <span class="trigger-icon">
+            <ore-icon name="chevron-down" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+          </span>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        popover="manual"
+        ?data-open="${R}"
+        role="listbox"
+        id="${I}"
+        aria-label="Options"
+        ref="${(e) => {
+			D = e;
+		}}">
+        <div class="dropdown-loading" ?hidden="${() => !x.value}">Loading…</div>
+        <div class="dropdown-empty" ?hidden="${() => x.value || C.value.length > 0}">No options</div>
+        <div class="options-list" ?hidden="${() => x.value || C.value.length === 0}">
+          ${() => G.value.map((e) => e.type === "group" ? p`<div class="optgroup-label" role="presentation">${e.label}</div>` : p`<div
+                    class="option"
+                    role="option"
+                    id="${`${F}-opt-${e.idx}`}"
+                    data-option-index="${String(e.idx)}"
+                    data-option-value="${e.opt.value}"
+                    aria-selected="${() => String(N.value.includes(e.opt.value))}"
+                    aria-disabled="${() => String(e.opt.disabled)}"
+                    ?data-focused="${() => L.value === e.idx}"
+                    ?data-selected="${() => N.value.includes(e.opt.value)}"
+                    ?data-disabled="${() => e.opt.disabled}"
+                    @click="${(t) => {
+			t.stopPropagation(), Y(e.opt, t);
+		}}"
+                    @pointerenter="${() => {
+			j.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: [e, d]
+});
+//#endregion
+export { x as SELECT_TAG };
+
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../src/inputs/select/select.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\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, OreSelectEvents>(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, { bind, el, emit, onCleanup, onMounted, slots }) {\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(bind, props, formCtx);\n\n    let triggerEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'select',\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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/separator.cjs

@@ -0,0 +1,27 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./content/separator/separator.css?inline.cjs");let n=require("@vielzeug/ore");var r=`ore-separator`;(0,n.define)(r,{props:{color:n.prop.string(),decorative:n.prop.bool(!0),label:n.prop.string(),orientation:n.prop.oneOf([`horizontal`,`vertical`],`horizontal`)},setup(e){let t=()=>e.decorative.value?`none`:`separator`,r=()=>e.decorative.value?`true`:null;return n.html`
+      ${()=>e.label.value?n.html`
+              <div class="separator-wrapper" part="wrapper">
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${t}"
+                  :aria-hidden="${r}"
+                  :aria-orientation="${()=>e.orientation.value}" />
+                <span class="separator-label" part="label">${()=>e.label.value}</span>
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${t}"
+                  :aria-hidden="${r}"
+                  :aria-orientation="${()=>e.orientation.value}" />
+              </div>
+            `:n.html`
+              <hr
+                class="separator"
+                part="separator"
+                :role="${t}"
+                :aria-hidden="${r}"
+                :aria-orientation="${()=>e.orientation.value}" />
+            `}
+    `},styles:[e.colorThemeMixin,t.default]}),exports.SEPARATOR_TAG=r;
+//# sourceMappingURL=separator.cjs.map

package/dist/separator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"6MA2CA,IAAa,EAAgB,6BACH,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;2BAKW,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;;cAGzD,EAAA,IAAI;;;;yBAIS,EAAS;gCACF,EAAW;yCACA,EAAM,YAAY,MAAM;cACrD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}

package/dist/separator.js

@@ -0,0 +1,47 @@
+import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
+import t from "./content/separator/separator.css?inline.js";
+import { define as n, html as r, prop as i } from "@vielzeug/ore";
+//#region src/content/separator/separator.ts
+var a = "ore-separator";
+n(a, {
+	props: {
+		color: i.string(),
+		decorative: i.bool(!0),
+		label: i.string(),
+		orientation: i.oneOf(["horizontal", "vertical"], "horizontal")
+	},
+	setup(e) {
+		let t = () => e.decorative.value ? "none" : "separator", n = () => e.decorative.value ? "true" : null;
+		return r`
+      ${() => e.label.value ? r`
+              <div class="separator-wrapper" part="wrapper">
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${t}"
+                  :aria-hidden="${n}"
+                  :aria-orientation="${() => e.orientation.value}" />
+                <span class="separator-label" part="label">${() => e.label.value}</span>
+                <hr
+                  class="separator"
+                  part="separator"
+                  :role="${t}"
+                  :aria-hidden="${n}"
+                  :aria-orientation="${() => e.orientation.value}" />
+              </div>
+            ` : r`
+              <hr
+                class="separator"
+                part="separator"
+                :role="${t}"
+                :aria-hidden="${n}"
+                :aria-orientation="${() => e.orientation.value}" />
+            `}
+    `;
+	},
+	styles: [e, t]
+});
+//#endregion
+export { a as SEPARATOR_TAG };
+
+//# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":";;;;AA2CA,IAAa,IAAgB;AAC7B,EAA0B,GAAe;CACvC,OAAO;EACL,OAAO,EAAK,OAAmB;EAC/B,YAAY,EAAK,KAAK,EAAI;EAC1B,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,YAAY;CAC3E;CACA,MAAM,GAAO;EACX,IAAM,UAAkB,EAAM,WAAW,QAAQ,SAAS,aACpD,UAAoB,EAAM,WAAW,QAAQ,SAAS;EAE5D,OAAO,CAAI;cAEP,EAAM,MAAM,QACR,CAAI;;;;;2BAKW,EAAS;kCACF,EAAW;6CACA,EAAM,YAAY,MAAM;mEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;6CACA,EAAM,YAAY,MAAM;;gBAGzD,CAAI;;;;yBAIS,EAAS;gCACF,EAAW;2CACA,EAAM,YAAY,MAAM;cACrD;;CAEZ;CACA,QAAQ,CAAC,GAAiB,CAAe;AAC3C,CAAC"}

package/dist/shared/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared TypeScript types, prop bundles, and design-size presets for Refine components.
+ *
+ * Re-exports from three focused modules:
+ * - `./types`       — primitive type aliases and derived form-prop types
+ * - `./prop-bundles` — reusable ore prop bundle objects
+ * - `./size-presets` — sizeVariantMixin size preset constants
+ *
+ * `src/types/` re-exports from this file for the public `@vielzeug/refine/types` entry point.
+ */
+export * from './prop-bundles';
+export * from './size-presets';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/shared/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/shared/prop-bundles.cjs

@@ -0,0 +1,2 @@
+let e=require("@vielzeug/ore");var t={color:e.prop.string()},n={size:e.prop.string()},r={disabled:e.prop.bool(!1)},i={loading:e.prop.bool(!1)},a={rounded:e.prop.string()},o={elevation:e.prop.number()},s={...t,...n,...r,...i,...a};exports.commonProps=s,exports.disablableBundle=r,exports.elevatableBundle=o,exports.loadableBundle=i,exports.roundableBundle=a,exports.sizableBundle=n,exports.themableBundle=t;
+//# sourceMappingURL=prop-bundles.cjs.map