@auronui/vue 1.0.20 → 1.0.22

package/dist/components/select/Select.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst hasLabel = computed(() => !!props.label)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [SelectTrigger, SelectContent]),\n)\n\n// Helper IDs / aria wiring\nconst descriptionId = computed(() => `${triggerId.value}-description`)\nconst errorMessageId = computed(() => `${triggerId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: toRef(props, 'isReadonly'),\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger>\n            <SelectValue :placeholder=\"props.placeholder\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  by: undefined,\n  dir: undefined,\n  autocomplete: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /** Comparison key or function for value matching. */\n  by?: string | ((a: SelectItemValue, b: SelectItemValue) => boolean)\n  /** Text direction for the select. */\n  dir?: 'ltr' | 'rtl'\n  /** Native autocomplete attribute for the hidden input. */\n  autocomplete?: string\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst hasLabel = computed(() => !!props.label)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [SelectTrigger, SelectContent]),\n)\n\n// Helper IDs / aria wiring\nconst descriptionId = computed(() => `${triggerId.value}-description`)\nconst errorMessageId = computed(() => `${triggerId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: toRef(props, 'isReadonly'),\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :by=\"props.by\"\n        :dir=\"props.dir\"\n        :autocomplete=\"props.autocomplete\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger>\n            <SelectValue :placeholder=\"props.placeholder\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAqBd,MAAM,OAAO;EA6Eb,MAAM,QAAQ,UAAS;EACvB,MAAM,cAAc,OAAM;EAC1B,MAAM,YAAY,eAAgB,MAAM,MAA6B,YAAW;EAEhF,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,MAAK;EAE7C,MAAM,QAAQ,UAAS;EAGvB,MAAM,mBAAmB,eACvB,iBAAiB,MAAM,WAAW,EAAE,CAAC,uBAAe,sBAAc,CAAC,CACrE;EAGA,MAAM,gBAAgB,eAAe,GAAG,UAAU,MAAM,cAAa;EACrE,MAAM,iBAAiB,eAAe,GAAG,UAAU,MAAM,QAAO;EAChE,MAAM,YAAY,eAAe,MAAM,aAAa,CAAC,CAAC,MAAM,aAAY;EACxE,MAAM,kBAAkB,eAAe,CAAC,CAAC,MAAM,eAAe,CAAC,UAAU,MAAK;EAC9E,MAAM,YAAY,eAAe,UAAU,SAAS,gBAAgB,MAAK;EACzE,MAAM,kBAAkB,eAAe;AACrC,OAAI,UAAU,MAAO,QAAO,eAAe;AAC3C,OAAI,gBAAgB,MAAO,QAAO,cAAc;IAEjD;EAED,MAAM,UAAU,eACd,eAAe;GACb,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,UAAU,SAAS;GACnB,gBAAgB,MAAM;GACvB,CAAC,CACJ;EAEA,MAAM,mBAAmB,eACjB,SAAS,SAAS,MAAM,mBAAmB,SACnD;EAKA,MAAM,eAAe,yBAAS,IAAI,KAA8B,CAAA;EAChE,MAAM,gBAAgB,OAAwB,UAAkB;AAC9D,gBAAa,IAAI,OAAO,MAAK;;EAE/B,MAAM,aAAa,UAA0E;AAC3F,OAAI,SAAS,KAAM,QAAO;AAC1B,OAAI,MAAM,QAAQ,MAAM,CAItB,QAAO,MACJ,KAAI,MAAK,OAAO,aAAa,IAAI,EAAE,IAAI,EAAE,CAAA,CACzC,QAAO,MAAK,EAAE,SAAS,EAAC,CACxB,KAAK,KAAI;AAEd,UAAO,aAAa,IAAI,MAAM,IAAI,OAAO,MAAK;;EAGhD,SAAS,YAAY,OAAwB;AAE3C,QAAK,sBADW,MAAM,QAAQ,MAAM,WAAW,GAAG,MAAM,aAAa,EAAC,EACpC,QAAO,MAAK,MAAM,MAAM,CAAA;;AAG5D,mBAAiB;GACf,YAAY,MAAM,OAAO,aAAa;GACtC,WAAW,MAAM,OAAO,YAAY;GACpC,YAAY,MAAM,OAAO,aAAa;GACtC,YAAY,MAAM,OAAO,aAAa;GACtC,WAAW,MAAM,OAAO,YAAY;GACpC;GACA,gBAAgB,MAAM,OAAO,iBAAiB;GAC9C;GACA,OAAO,MAAM,OAAO,QAAQ;GAC5B;GACA,OAAO;GACP,UAAU,MAAM,OAAO,WAAW;GAClC;GACA;GACA;GACD,CAAA;;uBAIC,mBA+EM,OAAA;IA9EH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,QAAA,aAAa,KAAA;IAC3B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,kBAAgB,SAAA,SAAY,KAAA;IAC5B,mBAAiB,UAAA,SAAa,KAAA;OAGvB,iBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;IALf,KAAK,UAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uCAC/D,QAAA,MAAK,EAAA,EAAA,EACD,QAAA,cAAA,WAAA,EADI,mBAGF,QAHE,YAGX,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEH,mBA4DM,OAAA,EA5DA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA,EAAA,EAAA,CAChF,YAsCa,MAAA,WAAA,EAAA;IArCV,eAAa,MAAM;IACnB,iBAAe,MAAM;IACrB,UAAU,MAAM;IAChB,MAAM,MAAM;IACZ,gBAAc,MAAM;IACpB,IAAI,MAAM;IACV,KAAK,MAAM;IACX,cAAc,MAAM;IACpB,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,MAAM,MAAM;IACZ,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,OAAM;IACpD,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,OAAM;;2BAGR,CAApB,iBAAA,QAAZ,WAAgC,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EAEhC,mBAmBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAlBT,YAEgB,uBAAA,MAAA;4BADkC,CAAhD,YAAgD,qBAAA,EAAlC,aAAa,MAAM,aAAA,EAAA,MAAA,GAAA,CAAA,cAAA,CAAA,CAAA,CAAA;;QAEnC,YAcgB,uBAAA,MAAA;4BAZe,EAAA,UAAA,KAAA,EAD7B,mBAWa,UAAA,MAAA,WAVI,MAAM,QAAd,SAAI;0BADb,YAWa,oBAAA;OATV,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,cAAY,KAAK,aAAa,KAAK;OACnC,eAAa,KAAK;;8BAK2B,CAH9C,WAG8C,KAAA,QAAA,QAAA,EADrC,MAAI,QACiC,CAAA,gBAAA,gBAA1C,KAAK,SAAS,OAAO,KAAK,MAAK,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;gBAErC,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;;;;;OAMN,UAAA,SAAA,WAAA,EADR,mBAkBM,OAAA;;IAhBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,eAAa,EAAI,MAAM,YAAY,cAAa,CAAA;OAGzE,UAAA,SAAA,WAAA,EADR,mBAMM,OAAA;;IAJH,IAAI,eAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;sBAE5E,QAAA,aAAY,EAAA,IAAA,WAAA,IAGJ,gBAAA,SAAA,WAAA,EADb,mBAMM,OAAA;;IAJH,IAAI,cAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;sBAE1E,QAAA,YAAW,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/select/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n  if (open) {\n    justOpened.value = true\n    setTimeout(() => { justOpened.value = false }, 100)\n  }\n})\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (e.key === 'Tab') {\n    rootContext.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        data-slot=\"popover\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n          @keydown=\"handleKeydown\"\n        >\n          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectContent.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n  /** Keep content mounted even when closed. */\n  forceMount?: boolean\n  /** Lock body scroll when content is open. */\n  bodyLock?: boolean\n  /** Side of the trigger to render the content. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Flip to opposite side when not enough space. */\n  sideFlip?: boolean\n  /** Alignment relative to the trigger. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset from the alignment edge. */\n  alignOffset?: number\n  /** Flip alignment when not enough space. */\n  alignFlip?: boolean\n  /** Avoid collisions with viewport edges. */\n  avoidCollisions?: boolean\n  /** Boundary element(s) for collision detection. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding around collision boundary. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between content and arrow. */\n  arrowPadding?: number\n  /** Hide the arrow when the content is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when scrolling. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when fully detached from trigger. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy for the floating element. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in view over alignment. */\n  prioritizePosition?: boolean\n  /** Virtual or DOM reference element to position against. */\n  reference?: object | null\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Disable pointer events outside the content while open. */\n  disableOutsidePointerEvents?: boolean\n  /** Nonce for the viewport element. */\n  nonce?: string\n  /** Portal target element or selector. */\n  to?: string | HTMLElement\n  /** Disable the portal. */\n  portalDisabled?: boolean\n  /** Defer portal rendering. */\n  defer?: boolean\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n  forceMount: undefined,\n  bodyLock: undefined,\n  side: undefined,\n  sideFlip: undefined,\n  align: undefined,\n  alignOffset: undefined,\n  alignFlip: undefined,\n  avoidCollisions: undefined,\n  collisionBoundary: undefined,\n  collisionPadding: undefined,\n  arrowPadding: undefined,\n  hideShiftedArrow: undefined,\n  sticky: undefined,\n  hideWhenDetached: undefined,\n  positionStrategy: undefined,\n  updatePositionStrategy: undefined,\n  disableUpdateOnLayoutShift: undefined,\n  prioritizePosition: undefined,\n  reference: undefined,\n  as: undefined,\n  asChild: false,\n  disableOutsidePointerEvents: undefined,\n  nonce: undefined,\n  to: undefined,\n  portalDisabled: undefined,\n  defer: undefined,\n})\n\nconst emit = defineEmits<{\n  'close-auto-focus': [event: Event]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n}>()\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n  if (open) {\n    justOpened.value = true\n    setTimeout(() => { justOpened.value = false }, 100)\n  }\n})\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (e.key === 'Tab') {\n    rootContext.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <SelectPortal\n    :to=\"props.to\"\n    :disabled=\"props.portalDisabled\"\n    :defer=\"props.defer\"\n    :force-mount=\"props.forceMount\"\n  >\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        :body-lock=\"props.bodyLock\"\n        :side=\"props.side\"\n        :side-flip=\"props.sideFlip\"\n        :align=\"props.align\"\n        :align-offset=\"props.alignOffset\"\n        :align-flip=\"props.alignFlip\"\n        :avoid-collisions=\"props.avoidCollisions\"\n        :collision-boundary=\"props.collisionBoundary\"\n        :collision-padding=\"props.collisionPadding\"\n        :arrow-padding=\"props.arrowPadding\"\n        :hide-shifted-arrow=\"props.hideShiftedArrow\"\n        :sticky=\"props.sticky\"\n        :hide-when-detached=\"props.hideWhenDetached\"\n        :position-strategy=\"props.positionStrategy\"\n        :update-position-strategy=\"props.updatePositionStrategy\"\n        :disable-update-on-layout-shift=\"props.disableUpdateOnLayoutShift\"\n        :prioritize-position=\"props.prioritizePosition\"\n        :reference=\"(props.reference as any)\"\n        :as=\"props.as\"\n        :as-child=\"props.asChild\"\n        :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n        data-slot=\"popover\"\n        @close-auto-focus=\"emit('close-auto-focus', $event)\"\n        @escape-key-down=\"emit('escape-key-down', $event)\"\n        @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n          @keydown=\"handleKeydown\"\n        >\n          <SelectViewport\n            :nonce=\"props.nonce\"\n            data-slot=\"list-box\"\n          >\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectContent.vue_vue_type_script_setup_true_lang.js

@@ -9,10 +9,81 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	props: {
 		position: { default: "popper" },
 		sideOffset: { default: 8 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		forceMount: {
+			type: Boolean,
+			default: void 0
+		},
+		bodyLock: {
+			type: Boolean,
+			default: void 0
+		},
+		side: { default: void 0 },
+		sideFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		align: { default: void 0 },
+		alignOffset: { default: void 0 },
+		alignFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		avoidCollisions: {
+			type: Boolean,
+			default: void 0
+		},
+		collisionBoundary: { default: void 0 },
+		collisionPadding: { default: void 0 },
+		arrowPadding: { default: void 0 },
+		hideShiftedArrow: {
+			type: Boolean,
+			default: void 0
+		},
+		sticky: { default: void 0 },
+		hideWhenDetached: {
+			type: Boolean,
+			default: void 0
+		},
+		positionStrategy: { default: void 0 },
+		updatePositionStrategy: { default: void 0 },
+		disableUpdateOnLayoutShift: {
+			type: Boolean,
+			default: void 0
+		},
+		prioritizePosition: {
+			type: Boolean,
+			default: void 0
+		},
+		reference: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			default: void 0
+		},
+		nonce: { default: void 0 },
+		to: { default: void 0 },
+		portalDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		defer: {
+			type: Boolean,
+			default: void 0
+		}
 	},
-	setup(__props) {
+	emits: [
+		"close-auto-focus",
+		"escape-key-down",
+		"pointer-down-outside"
+	],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useSelectInject();
 		const rootContext = injectSelectRootContext();
 		const justOpened = ref(false);
@@ -28,12 +99,41 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			if (e.key === "Tab") rootContext.onOpenChange(false);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(SelectPortal), null, {
+			return openBlock(), createBlock(unref(SelectPortal), {
+				to: props.to,
+				disabled: props.portalDisabled,
+				defer: props.defer,
+				"force-mount": props.forceMount
+			}, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 					default: withCtx(() => [createVNode(unref(SelectContent), {
 						position: props.position,
 						"side-offset": props.sideOffset,
-						"data-slot": "popover"
+						"body-lock": props.bodyLock,
+						side: props.side,
+						"side-flip": props.sideFlip,
+						align: props.align,
+						"align-offset": props.alignOffset,
+						"align-flip": props.alignFlip,
+						"avoid-collisions": props.avoidCollisions,
+						"collision-boundary": props.collisionBoundary,
+						"collision-padding": props.collisionPadding,
+						"arrow-padding": props.arrowPadding,
+						"hide-shifted-arrow": props.hideShiftedArrow,
+						sticky: props.sticky,
+						"hide-when-detached": props.hideWhenDetached,
+						"position-strategy": props.positionStrategy,
+						"update-position-strategy": props.updatePositionStrategy,
+						"disable-update-on-layout-shift": props.disableUpdateOnLayoutShift,
+						"prioritize-position": props.prioritizePosition,
+						reference: props.reference,
+						as: props.as,
+						"as-child": props.asChild,
+						"disable-outside-pointer-events": props.disableOutsidePointerEvents,
+						"data-slot": "popover",
+						onCloseAutoFocus: _cache[0] || (_cache[0] = ($event) => emit("close-auto-focus", $event)),
+						onEscapeKeyDown: _cache[1] || (_cache[1] = ($event) => emit("escape-key-down", $event)),
+						onPointerDownOutside: _cache[2] || (_cache[2] = ($event) => emit("pointer-down-outside", $event))
 					}, {
 						default: withCtx(() => [withDirectives(createVNode(unref(motion).div, {
 							class: normalizeClass([unref(ctx).slots.value.popover(), { "select__popover--opening": justOpened.value }]),
@@ -47,18 +147,50 @@ var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							transition: { duration: .15 },
 							onKeydown: handleKeydown
 						}, {
-							default: withCtx(() => [createVNode(unref(SelectViewport), { "data-slot": "list-box" }, {
+							default: withCtx(() => [createVNode(unref(SelectViewport), {
+								nonce: props.nonce,
+								"data-slot": "list-box"
+							}, {
 								default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 								_: 3
-							})]),
+							}, 8, ["nonce"])]),
 							_: 3
 						}, 8, ["class", "animate"]), [[vShow, unref(rootContext).open.value]])]),
 						_: 3
-					}, 8, ["position", "side-offset"])]),
+					}, 8, [
+						"position",
+						"side-offset",
+						"body-lock",
+						"side",
+						"side-flip",
+						"align",
+						"align-offset",
+						"align-flip",
+						"avoid-collisions",
+						"collision-boundary",
+						"collision-padding",
+						"arrow-padding",
+						"hide-shifted-arrow",
+						"sticky",
+						"hide-when-detached",
+						"position-strategy",
+						"update-position-strategy",
+						"disable-update-on-layout-shift",
+						"prioritize-position",
+						"reference",
+						"as",
+						"as-child",
+						"disable-outside-pointer-events"
+					])]),
 					_: 3
 				})]),
 				_: 3
-			});
+			}, 8, [
+				"to",
+				"disabled",
+				"defer",
+				"force-mount"
+			]);
 		};
 	}
 });

package/dist/components/select/SelectContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n  if (open) {\n    justOpened.value = true\n    setTimeout(() => { justOpened.value = false }, 100)\n  }\n})\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (e.key === 'Tab') {\n    rootContext.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <SelectPortal>\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        data-slot=\"popover\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n          @keydown=\"handleKeydown\"\n        >\n          <SelectViewport data-slot=\"list-box\">\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAUd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;EAI5C,MAAM,aAAa,IAAI,MAAK;AAC5B,cAAY,YAAY,KAAK,QAAQ,SAAS;AAC5C,OAAI,MAAM;AACR,eAAW,QAAQ;AACnB,qBAAiB;AAAE,gBAAW,QAAQ;OAAS,IAAG;;IAErD;EAED,SAAS,cAAc,GAAkB;AACvC,OAAI,EAAE,QAAQ,MACZ,aAAY,aAAa,MAAK;;;uBAMhC,YAoCe,MAAA,aAAA,EAAA,MAAA;2BADK,CAlClB,YAkCkB,MAAA,wBAAA,EAAA,MAAA;4BADA,CAhBhB,YAgBgB,MAAA,cAAA,EAAA;MAfb,UAAU,MAAM;MAChB,eAAa,MAAM;MACpB,aAAU;;6BAYG,CAAA,eAVb,YAUa,MAAA,OAAA,CAAA,KAAA;OARV,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,EAAA,EAAA,4BAAkC,WAAA,OAAU,CAAA,CAAA;OAC3E,SAAS,MAAA,YAAW,CAAC,KAAK,QAAK;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAA,SAAA;QAAA,OAAA;QAAA;OAC/B,YAAY,EAAA,UAAA,KAAkB;OAC9B,WAAS;;8BAIO,CAFjB,YAEiB,MAAA,eAAA,EAAA,EAFD,aAAU,YAAU,EAAA;+BAC1B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;4CAPF,MAAA,YAAW,CAAC,KAAK,MAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  SelectViewport,\n  SelectPortal,\n  injectSelectRootContext,\n} from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { ref, watch } from 'vue'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  position?: 'item-aligned' | 'popper'\n  sideOffset?: number\n  class?: string\n  /** Keep content mounted even when closed. */\n  forceMount?: boolean\n  /** Lock body scroll when content is open. */\n  bodyLock?: boolean\n  /** Side of the trigger to render the content. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Flip to opposite side when not enough space. */\n  sideFlip?: boolean\n  /** Alignment relative to the trigger. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset from the alignment edge. */\n  alignOffset?: number\n  /** Flip alignment when not enough space. */\n  alignFlip?: boolean\n  /** Avoid collisions with viewport edges. */\n  avoidCollisions?: boolean\n  /** Boundary element(s) for collision detection. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding around collision boundary. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between content and arrow. */\n  arrowPadding?: number\n  /** Hide the arrow when the content is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when scrolling. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when fully detached from trigger. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy for the floating element. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in view over alignment. */\n  prioritizePosition?: boolean\n  /** Virtual or DOM reference element to position against. */\n  reference?: object | null\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Disable pointer events outside the content while open. */\n  disableOutsidePointerEvents?: boolean\n  /** Nonce for the viewport element. */\n  nonce?: string\n  /** Portal target element or selector. */\n  to?: string | HTMLElement\n  /** Disable the portal. */\n  portalDisabled?: boolean\n  /** Defer portal rendering. */\n  defer?: boolean\n}>(), {\n  position: 'popper',\n  sideOffset: 8,\n  class: undefined,\n  forceMount: undefined,\n  bodyLock: undefined,\n  side: undefined,\n  sideFlip: undefined,\n  align: undefined,\n  alignOffset: undefined,\n  alignFlip: undefined,\n  avoidCollisions: undefined,\n  collisionBoundary: undefined,\n  collisionPadding: undefined,\n  arrowPadding: undefined,\n  hideShiftedArrow: undefined,\n  sticky: undefined,\n  hideWhenDetached: undefined,\n  positionStrategy: undefined,\n  updatePositionStrategy: undefined,\n  disableUpdateOnLayoutShift: undefined,\n  prioritizePosition: undefined,\n  reference: undefined,\n  as: undefined,\n  asChild: false,\n  disableOutsidePointerEvents: undefined,\n  nonce: undefined,\n  to: undefined,\n  portalDisabled: undefined,\n  defer: undefined,\n})\n\nconst emit = defineEmits<{\n  'close-auto-focus': [event: Event]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n}>()\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\n// Suppress scroll-behavior:smooth for the first frame after open so Reka's\n// programmatic scrollTop jump to the selected item is instant.\nconst justOpened = ref(false)\nwatch(() => rootContext.open.value, (open) => {\n  if (open) {\n    justOpened.value = true\n    setTimeout(() => { justOpened.value = false }, 100)\n  }\n})\n\nfunction handleKeydown(e: KeyboardEvent) {\n  if (e.key === 'Tab') {\n    rootContext.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <SelectPortal\n    :to=\"props.to\"\n    :disabled=\"props.portalDisabled\"\n    :defer=\"props.defer\"\n    :force-mount=\"props.forceMount\"\n  >\n    <AnimatePresence>\n      <!--\n      No force-mount on SelectContent. With force-mount=true, Reka's\n      SelectContentImpl (which contains DismissableLayer with\n      disableOutsidePointerEvents=true) would mount immediately on page load and\n      block all pointer events — including clicks on the trigger button.\n\n      Without force-mount, when open=false, Reka teleports slot content into a\n      DocumentFragment (after SelectContent's own onMounted). Components inside\n      the slot (SelectItem) still get created and their setup() runs, so\n      textValue-based registrations fire at setup time.\n\n      v-show (not v-if) on the visual wrapper ensures SelectItem components are\n      always instantiated when inside the DocumentFragment — their setup() fires\n      and populates itemRegistry. The animated chrome is visually hidden via\n      v-show when closed; enter/exit animation runs via motion.div bindings.\n    -->\n      <SelectContent\n        :position=\"props.position\"\n        :side-offset=\"props.sideOffset\"\n        :body-lock=\"props.bodyLock\"\n        :side=\"props.side\"\n        :side-flip=\"props.sideFlip\"\n        :align=\"props.align\"\n        :align-offset=\"props.alignOffset\"\n        :align-flip=\"props.alignFlip\"\n        :avoid-collisions=\"props.avoidCollisions\"\n        :collision-boundary=\"props.collisionBoundary\"\n        :collision-padding=\"props.collisionPadding\"\n        :arrow-padding=\"props.arrowPadding\"\n        :hide-shifted-arrow=\"props.hideShiftedArrow\"\n        :sticky=\"props.sticky\"\n        :hide-when-detached=\"props.hideWhenDetached\"\n        :position-strategy=\"props.positionStrategy\"\n        :update-position-strategy=\"props.updatePositionStrategy\"\n        :disable-update-on-layout-shift=\"props.disableUpdateOnLayoutShift\"\n        :prioritize-position=\"props.prioritizePosition\"\n        :reference=\"(props.reference as any)\"\n        :as=\"props.as\"\n        :as-child=\"props.asChild\"\n        :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n        data-slot=\"popover\"\n        @close-auto-focus=\"emit('close-auto-focus', $event)\"\n        @escape-key-down=\"emit('escape-key-down', $event)\"\n        @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      >\n        <motion.div\n          v-show=\"rootContext.open.value\"\n          :class=\"[ctx.slots.value.popover(), { 'select__popover--opening': justOpened }]\"\n          :animate=\"rootContext.open.value ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n          @keydown=\"handleKeydown\"\n        >\n          <SelectViewport\n            :nonce=\"props.nonce\"\n            data-slot=\"list-box\"\n          >\n            <slot />\n          </SelectViewport>\n        </motion.div>\n      </SelectContent>\n    </AnimatePresence>\n  </SelectPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAwFd,MAAM,OAAO;EAMb,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;EAI5C,MAAM,aAAa,IAAI,MAAK;AAC5B,cAAY,YAAY,KAAK,QAAQ,SAAS;AAC5C,OAAI,MAAM;AACR,eAAW,QAAQ;AACnB,qBAAiB;AAAE,gBAAW,QAAQ;OAAS,IAAG;;IAErD;EAED,SAAS,cAAc,GAAkB;AACvC,OAAI,EAAE,QAAQ,MACZ,aAAY,aAAa,MAAK;;;uBAMhC,YAoEe,MAAA,aAAA,EAAA;IAnEZ,IAAI,MAAM;IACV,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,eAAa,MAAM;;2BA+DF,CA7DlB,YA6DkB,MAAA,wBAAA,EAAA,MAAA;4BADA,CA3ChB,YA2CgB,MAAA,cAAA,EAAA;MA1Cb,UAAU,MAAM;MAChB,eAAa,MAAM;MACnB,aAAW,MAAM;MACjB,MAAM,MAAM;MACZ,aAAW,MAAM;MACjB,OAAO,MAAM;MACb,gBAAc,MAAM;MACpB,cAAY,MAAM;MAClB,oBAAkB,MAAM;MACxB,sBAAoB,MAAM;MAC1B,qBAAmB,MAAM;MACzB,iBAAe,MAAM;MACrB,sBAAoB,MAAM;MAC1B,QAAQ,MAAM;MACd,sBAAoB,MAAM;MAC1B,qBAAmB,MAAM;MACzB,4BAA0B,MAAM;MAChC,kCAAgC,MAAM;MACtC,uBAAqB,MAAM;MAC3B,WAAY,MAAM;MAClB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,kCAAgC,MAAM;MACvC,aAAU;MACT,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;MACjD,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;MAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;;6BAe7C,CAAA,eAbb,YAaa,MAAA,OAAA,CAAA,KAAA;OAXV,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,EAAA,EAAA,4BAAkC,WAAA,OAAU,CAAA,CAAA;OAC3E,SAAS,MAAA,YAAW,CAAC,KAAK,QAAK;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAA,SAAA;QAAA,OAAA;QAAA;OAC/B,YAAY,EAAA,UAAA,KAAkB;OAC9B,WAAS;;8BAOO,CALjB,YAKiB,MAAA,eAAA,EAAA;QAJd,OAAO,MAAM;QACd,aAAU;;+BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;4CAVF,MAAA,YAAW,CAAC,KAAK,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/select/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: SelectItemValue\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? String(props.value)\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectItem.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: SelectItemValue\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n  /** Whether this item is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n}>()\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :text-value=\"props.textValue ?? String(props.value)\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js

@@ -11,10 +11,21 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useSelectInject();
 		const textRef = useTemplateRef("textRef");
 		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
@@ -26,10 +37,13 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectItem), {
 				value: props.value,
-				disabled: props.isDisabled,
+				disabled: props.disabled ?? props.isDisabled,
 				"text-value": props.textValue ?? String(props.value),
+				as: props.as,
+				"as-child": props.asChild,
 				class: "list-box-item list-box-item--default",
-				"data-slot": "list-box-item"
+				"data-slot": "list-box-item",
+				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
@@ -44,7 +58,7 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						class: "list-box-item__indicator",
 						"data-slot": "list-box-item-indicator"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
 							height: "12",
@@ -65,7 +79,9 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}, 8, [
 				"value",
 				"disabled",
-				"text-value"
+				"text-value",
+				"as",
+				"as-child"
 			]);
 		};
 	}

package/dist/components/select/SelectItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: SelectItemValue\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.isDisabled\"\n    :text-value=\"props.textValue ?? String(props.value)\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAiBd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAKrD,MAAI,MAAM,cAAc,KAAA,EACtB,KAAI,aAAa,MAAM,OAAO,MAAM,UAAS;AAG/C,kBAAgB;GAKd,MAAM,KAAM,QAAQ,OAAwC;GAC5D,MAAM,QAAQ,MAAM,aAAa,IAAI,aAAa,MAAM,IAAI,OAAO,MAAM,MAAK;AAC9E,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAkCa,MAAA,WAAA,EAAA;IAjCV,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAY,MAAM,aAAa,OAAO,MAAM,MAAK;IAClD,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
+{"version":3,"file":"SelectItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue'\nimport { SelectItem, SelectItemText, SelectItemIndicator } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  value: SelectItemValue\n  /**\n   * Explicit human-readable label for this item. When provided, the registry is\n   * populated immediately at setup time (before the dropdown is ever opened),\n   * so SelectValue can display the correct label for a pre-set modelValue.\n   * When omitted, the label is read from slot DOM text on first mount.\n   */\n  textValue?: string\n  isDisabled?: boolean\n  class?: string\n  /** Whether this item is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n}>()\n\nconst ctx = useSelectInject()\nconst textRef = useTemplateRef<HTMLElement>('textRef')\n\n// Register immediately with textValue if provided — this runs at setup time,\n// before mount, so SelectValue shows the correct label for a pre-set modelValue\n// even before the dropdown has ever been opened.\nif (props.textValue !== undefined) {\n  ctx.registerItem(props.value, props.textValue)\n}\n\nonMounted(() => {\n  // textRef points to the SelectItemText component instance (not a DOM element).\n  // Access $el to get the underlying span element and read its text content.\n  // This refines the registry entry with actual DOM text (handles slot-text items\n  // that don't have an explicit textValue prop).\n  const el = (textRef.value as { $el?: HTMLElement } | null)?.$el\n  const label = props.textValue ?? el?.textContent?.trim() ?? String(props.value)\n  ctx.registerItem(props.value, label)\n})\n</script>\n\n<template>\n  <SelectItem\n    :value=\"props.value\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :text-value=\"props.textValue ?? String(props.value)\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <SelectItemText ref=\"textRef\">\n      <slot />\n    </SelectItemText>\n    <SelectItemIndicator\n      class=\"list-box-item__indicator\"\n      data-slot=\"list-box-item-indicator\"\n    >\n      <slot name=\"selectedIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </SelectItemIndicator>\n    <slot name=\"endContent\" />\n  </SelectItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EA0Bd,MAAM,OAAO;EAIb,MAAM,MAAM,iBAAgB;EAC5B,MAAM,UAAU,eAA4B,UAAS;AAKrD,MAAI,MAAM,cAAc,KAAA,EACtB,KAAI,aAAa,MAAM,OAAO,MAAM,UAAS;AAG/C,kBAAgB;GAKd,MAAM,KAAM,QAAQ,OAAwC;GAC5D,MAAM,QAAQ,MAAM,aAAa,IAAI,aAAa,MAAM,IAAI,OAAO,MAAM,MAAK;AAC9E,OAAI,aAAa,MAAM,OAAO,MAAK;IACpC;;uBAIC,YAqCa,MAAA,WAAA,EAAA;IApCV,OAAO,MAAM;IACb,UAAU,MAAM,YAAY,MAAM;IAClC,cAAY,MAAM,aAAa,OAAO,MAAM,MAAK;IACjD,IAAI,MAAM;IACV,YAAU,MAAM;IACjB,OAAM;IACN,aAAU;IACT,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAEF;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,YAEiB,MAAA,eAAA,EAAA;eAFG;MAAJ,KAAI;;6BACV,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAEV,YAqBsB,MAAA,oBAAA,EAAA;MApBpB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}

package/dist/components/select/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","names":[],"sources":["../../../src/components/select/SelectTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { SelectTrigger, SelectIcon, injectSelectRootContext } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nwithDefaults(defineProps<{\n  class?: string\n}>(), {\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\nconst isFilled = computed(() => {\n  const v = rootContext?.modelValue?.value\n  if (v == null) return false\n  if (Array.isArray(v)) return v.length > 0\n  return v !== ''\n})\n\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// Guard re-open when Reka returns focus to the trigger after close (value\n// selection, Escape, Tab). Set to true whenever open transitions true→false,\n// reset after a microtask once the focus-return event has been processed.\nconst skipNextFocus = ref(false)\n\n// flush:'sync' fires the moment open.value changes (synchronously, before any\n// Vue scheduling), so skipNextFocus is true before Reka's FocusScope can call\n// trigger.focus(). setTimeout defers the reset until after all pending\n// microtasks (render + focus-return) have flushed.\nwatch(() => rootContext.open.value, (open, wasOpen) => {\n  if (!open && wasOpen) {\n    skipNextFocus.value = true\n    setTimeout(() => { skipNextFocus.value = false }, 0)\n  }\n}, { flush: 'sync' })\n\nfunction handleFocus() {\n  if (ctx.isDisabled.value || ctx.isReadonly.value || skipNextFocus.value || rootContext.open.value) return\n  rootContext.onOpenChange(true)\n}\n</script>\n\n<template>\n  <SelectTrigger\n    :id=\"ctx.triggerId.value\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"isFilled || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :aria-invalid=\"ctx.isInvalid.value || undefined\"\n    :aria-describedby=\"ctx.ariaDescribedBy.value\"\n    data-slot=\"trigger\"\n    @focus=\"handleFocus\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.triggerId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <slot />\n    <SelectIcon\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"select-default-indicator\"\n    >\n      <slot name=\"selectorIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectTrigger.js","names":[],"sources":["../../../src/components/select/SelectTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { SelectTrigger, SelectIcon, injectSelectRootContext } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  /** Whether the trigger is disabled. */\n  disabled?: boolean\n  /** Virtual or DOM reference element to position against. */\n  reference?: object | null\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  class: undefined,\n  disabled: undefined,\n  reference: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\nconst isFilled = computed(() => {\n  const v = rootContext?.modelValue?.value\n  if (v == null) return false\n  if (Array.isArray(v)) return v.length > 0\n  return v !== ''\n})\n\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// Guard re-open when Reka returns focus to the trigger after close (value\n// selection, Escape, Tab). Set to true whenever open transitions true→false,\n// reset after a microtask once the focus-return event has been processed.\nconst skipNextFocus = ref(false)\n\n// flush:'sync' fires the moment open.value changes (synchronously, before any\n// Vue scheduling), so skipNextFocus is true before Reka's FocusScope can call\n// trigger.focus(). setTimeout defers the reset until after all pending\n// microtasks (render + focus-return) have flushed.\nwatch(() => rootContext.open.value, (open, wasOpen) => {\n  if (!open && wasOpen) {\n    skipNextFocus.value = true\n    setTimeout(() => { skipNextFocus.value = false }, 0)\n  }\n}, { flush: 'sync' })\n\nfunction handleFocus() {\n  if (ctx.isDisabled.value || ctx.isReadonly.value || skipNextFocus.value || rootContext.open.value) return\n  rootContext.onOpenChange(true)\n}\n</script>\n\n<template>\n  <SelectTrigger\n    :id=\"ctx.triggerId.value\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"isFilled || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :aria-invalid=\"ctx.isInvalid.value || undefined\"\n    :aria-describedby=\"ctx.ariaDescribedBy.value\"\n    :disabled=\"props.disabled\"\n    :reference=\"(props.reference as any)\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    data-slot=\"trigger\"\n    @focus=\"handleFocus\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.triggerId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <slot />\n    <SelectIcon\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"select-default-indicator\"\n    >\n      <slot name=\"selectorIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectTrigger.vue_vue_type_script_setup_true_lang.js

@@ -9,8 +9,21 @@ var _hoisted_2 = {
 };
 var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SelectTrigger",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		reference: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useSelectInject();
 		const rootContext = injectSelectRootContext();
 		const isFilled = computed(() => {
@@ -42,6 +55,10 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"data-readonly": unref(ctx).isReadonly.value || void 0,
 				"aria-invalid": unref(ctx).isInvalid.value || void 0,
 				"aria-describedby": unref(ctx).ariaDescribedBy.value,
+				disabled: props.disabled,
+				reference: props.reference,
+				as: props.as,
+				"as-child": props.asChild,
 				"data-slot": "trigger",
 				onFocus: handleFocus
 			}, {
@@ -84,7 +101,11 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"data-invalid",
 				"data-readonly",
 				"aria-invalid",
-				"aria-describedby"
+				"aria-describedby",
+				"disabled",
+				"reference",
+				"as",
+				"as-child"
 			]);
 		};
 	}

package/dist/components/select/SelectTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/select/SelectTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { SelectTrigger, SelectIcon, injectSelectRootContext } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nwithDefaults(defineProps<{\n  class?: string\n}>(), {\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\nconst isFilled = computed(() => {\n  const v = rootContext?.modelValue?.value\n  if (v == null) return false\n  if (Array.isArray(v)) return v.length > 0\n  return v !== ''\n})\n\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// Guard re-open when Reka returns focus to the trigger after close (value\n// selection, Escape, Tab). Set to true whenever open transitions true→false,\n// reset after a microtask once the focus-return event has been processed.\nconst skipNextFocus = ref(false)\n\n// flush:'sync' fires the moment open.value changes (synchronously, before any\n// Vue scheduling), so skipNextFocus is true before Reka's FocusScope can call\n// trigger.focus(). setTimeout defers the reset until after all pending\n// microtasks (render + focus-return) have flushed.\nwatch(() => rootContext.open.value, (open, wasOpen) => {\n  if (!open && wasOpen) {\n    skipNextFocus.value = true\n    setTimeout(() => { skipNextFocus.value = false }, 0)\n  }\n}, { flush: 'sync' })\n\nfunction handleFocus() {\n  if (ctx.isDisabled.value || ctx.isReadonly.value || skipNextFocus.value || rootContext.open.value) return\n  rootContext.onOpenChange(true)\n}\n</script>\n\n<template>\n  <SelectTrigger\n    :id=\"ctx.triggerId.value\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"isFilled || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :aria-invalid=\"ctx.isInvalid.value || undefined\"\n    :aria-describedby=\"ctx.ariaDescribedBy.value\"\n    data-slot=\"trigger\"\n    @focus=\"handleFocus\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.triggerId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <slot />\n    <SelectIcon\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"select-default-indicator\"\n    >\n      <slot name=\"selectorIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAWA,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;EAE5C,MAAM,WAAW,eAAe;GAC9B,MAAM,IAAI,aAAa,YAAY;AACnC,OAAI,KAAK,KAAM,QAAO;AACtB,OAAI,MAAM,QAAQ,EAAE,CAAE,QAAO,EAAE,SAAS;AACxC,UAAO,MAAM;IACd;EAED,MAAM,kBAAkB,eAChB,IAAI,SAAS,SAAS,IAAI,eAAe,UAAU,SAC3D;EAKA,MAAM,gBAAgB,IAAI,MAAK;AAM/B,cAAY,YAAY,KAAK,QAAQ,MAAM,YAAY;AACrD,OAAI,CAAC,QAAQ,SAAS;AACpB,kBAAc,QAAQ;AACtB,qBAAiB;AAAE,mBAAc,QAAQ;OAAS,EAAC;;KAEpD,EAAE,OAAO,QAAQ,CAAA;EAEpB,SAAS,cAAc;AACrB,OAAI,IAAI,WAAW,SAAS,IAAI,WAAW,SAAS,cAAc,SAAS,YAAY,KAAK,MAAO;AACnG,eAAY,aAAa,KAAI;;;uBAK7B,YAgDgB,MAAA,cAAA,EAAA;IA/Cb,IAAI,MAAA,IAAG,CAAC,UAAU;IAClB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;IAC9B,eAAa,SAAA,SAAY,KAAA;IACzB,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;IACrC,iBAAe,MAAA,IAAG,CAAC,WAAW,SAAS,KAAA;IACvC,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;IACrC,oBAAkB,MAAA,IAAG,CAAC,gBAAgB;IACvC,aAAU;IACT,SAAO;;2BASU;KANV,gBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;MALf,KAAK,MAAA,IAAG,CAAC,UAAU;MACnB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;yCAC3B,MAAA,IAAG,CAAC,MAAM,MAAK,EAAA,EAAA,EACX,MAAA,IAAG,CAAC,WAAW,SAAA,WAAA,EADD,mBAGZ,QAHY,YAGrB,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KAEKA,KAAAA,OAAO,gBAAA,WAAA,EADf,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,cAAY,CAAA;MACpC,aAAU;SAEV,WAA4B,KAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE9B,WAAQ,KAAA,QAAA,UAAA;KACR,YAoBa,MAAA,WAAA,EAAA;MAnBV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,WAAS,CAAA;MACjC,aAAU;;6BAiBH,CAfP,WAeO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAdL,mBAaM,OAAA;OAZJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectTrigger.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/select/SelectTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { SelectTrigger, SelectIcon, injectSelectRootContext } from 'reka-ui'\nimport { useSelectInject } from './Select.context'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  /** Whether the trigger is disabled. */\n  disabled?: boolean\n  /** Virtual or DOM reference element to position against. */\n  reference?: object | null\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  class: undefined,\n  disabled: undefined,\n  reference: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst ctx = useSelectInject()\nconst rootContext = injectSelectRootContext()\n\nconst isFilled = computed(() => {\n  const v = rootContext?.modelValue?.value\n  if (v == null) return false\n  if (Array.isArray(v)) return v.length > 0\n  return v !== ''\n})\n\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// Guard re-open when Reka returns focus to the trigger after close (value\n// selection, Escape, Tab). Set to true whenever open transitions true→false,\n// reset after a microtask once the focus-return event has been processed.\nconst skipNextFocus = ref(false)\n\n// flush:'sync' fires the moment open.value changes (synchronously, before any\n// Vue scheduling), so skipNextFocus is true before Reka's FocusScope can call\n// trigger.focus(). setTimeout defers the reset until after all pending\n// microtasks (render + focus-return) have flushed.\nwatch(() => rootContext.open.value, (open, wasOpen) => {\n  if (!open && wasOpen) {\n    skipNextFocus.value = true\n    setTimeout(() => { skipNextFocus.value = false }, 0)\n  }\n}, { flush: 'sync' })\n\nfunction handleFocus() {\n  if (ctx.isDisabled.value || ctx.isReadonly.value || skipNextFocus.value || rootContext.open.value) return\n  rootContext.onOpenChange(true)\n}\n</script>\n\n<template>\n  <SelectTrigger\n    :id=\"ctx.triggerId.value\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"isFilled || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :aria-invalid=\"ctx.isInvalid.value || undefined\"\n    :aria-describedby=\"ctx.ariaDescribedBy.value\"\n    :disabled=\"props.disabled\"\n    :reference=\"(props.reference as any)\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    data-slot=\"trigger\"\n    @focus=\"handleFocus\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.triggerId.value\"\n      :class=\"ctx.slots.value.label()\"\n    >{{ ctx.label.value }}<span\n      v-if=\"ctx.isRequired.value\"\n      aria-hidden=\"true\"\n    > *</span></label>\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"ctx.slots.value.startContent()\"\n      data-slot=\"start-content\"\n    >\n      <slot name=\"startContent\" />\n    </span>\n    <slot />\n    <SelectIcon\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"select-default-indicator\"\n    >\n      <slot name=\"selectorIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAkBd,MAAM,MAAM,iBAAgB;EAC5B,MAAM,cAAc,yBAAwB;EAE5C,MAAM,WAAW,eAAe;GAC9B,MAAM,IAAI,aAAa,YAAY;AACnC,OAAI,KAAK,KAAM,QAAO;AACtB,OAAI,MAAM,QAAQ,EAAE,CAAE,QAAO,EAAE,SAAS;AACxC,UAAO,MAAM;IACd;EAED,MAAM,kBAAkB,eAChB,IAAI,SAAS,SAAS,IAAI,eAAe,UAAU,SAC3D;EAKA,MAAM,gBAAgB,IAAI,MAAK;AAM/B,cAAY,YAAY,KAAK,QAAQ,MAAM,YAAY;AACrD,OAAI,CAAC,QAAQ,SAAS;AACpB,kBAAc,QAAQ;AACtB,qBAAiB;AAAE,mBAAc,QAAQ;OAAS,EAAC;;KAEpD,EAAE,OAAO,QAAQ,CAAA;EAEpB,SAAS,cAAc;AACrB,OAAI,IAAI,WAAW,SAAS,IAAI,WAAW,SAAS,cAAc,SAAS,YAAY,KAAK,MAAO;AACnG,eAAY,aAAa,KAAI;;;uBAK7B,YAoDgB,MAAA,cAAA,EAAA;IAnDb,IAAI,MAAA,IAAG,CAAC,UAAU;IAClB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;IAC9B,eAAa,SAAA,SAAY,KAAA;IACzB,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;IACrC,iBAAe,MAAA,IAAG,CAAC,WAAW,SAAS,KAAA;IACvC,gBAAc,MAAA,IAAG,CAAC,UAAU,SAAS,KAAA;IACrC,oBAAkB,MAAA,IAAG,CAAC,gBAAgB;IACtC,UAAU,MAAM;IAChB,WAAY,MAAM;IAClB,IAAI,MAAM;IACV,YAAU,MAAM;IACjB,aAAU;IACT,SAAO;;2BASU;KANV,gBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;MALf,KAAK,MAAA,IAAG,CAAC,UAAU;MACnB,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;yCAC3B,MAAA,IAAG,CAAC,MAAM,MAAK,EAAA,EAAA,EACX,MAAA,IAAG,CAAC,WAAW,SAAA,WAAA,EADD,mBAGZ,QAHY,YAGrB,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KAEKA,KAAAA,OAAO,gBAAA,WAAA,EADf,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,cAAY,CAAA;MACpC,aAAU;SAEV,WAA4B,KAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE9B,WAAQ,KAAA,QAAA,UAAA;KACR,YAoBa,MAAA,WAAA,EAAA;MAnBV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,WAAS,CAAA;MACjC,aAAU;;6BAiBH,CAfP,WAeO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAdL,mBAaM,OAAA;OAZJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/select/SelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!-- Multiple mode: chips with overflow truncation -->\n      <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n        <SelectOverflowChips\n          :values=\"(modelValue as SelectItemValue[])\"\n          :get-label=\"ctx.itemLabel\"\n        />\n      </template>\n      <!-- Multiple mode: nothing selected yet -->\n      <template v-else-if=\"ctx.multiple.value\">\n        {{ props.placeholder }}\n      </template>\n      <!--\n        Single mode label resolution:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n        2. itemRegistry label — populated at setup time for items with explicit textValue\n        3. Placeholder when no value is selected\n      -->\n      <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectValue.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!-- Multiple mode: chips with overflow truncation -->\n      <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n        <SelectOverflowChips\n          :values=\"(modelValue as SelectItemValue[])\"\n          :get-label=\"ctx.itemLabel\"\n        />\n      </template>\n      <!-- Multiple mode: nothing selected yet -->\n      <template v-else-if=\"ctx.multiple.value\">\n        {{ props.placeholder }}\n      </template>\n      <!--\n        Single mode label resolution:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n        2. itemRegistry label — populated at setup time for items with explicit textValue\n        3. Placeholder when no value is selected\n      -->\n      <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":""}

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,12 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	__name: "SelectValue",
 	props: {
 		placeholder: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		}
 	},
 	setup(__props) {
 		const props = __props;
@@ -16,6 +21,8 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return openBlock(), createBlock(unref(SelectValue), {
 				class: normalizeClass(unref(ctx).slots.value.value()),
 				placeholder: props.placeholder,
+				as: props.as,
+				"as-child": props.asChild,
 				"data-slot": "value"
 			}, {
 				default: withCtx(({ selectedLabel, modelValue }) => [unref(ctx).multiple.value && Array.isArray(modelValue) && modelValue.length > 0 ? (openBlock(), createBlock(SelectOverflowChips_default, {
@@ -24,7 +31,12 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					"get-label": unref(ctx).itemLabel
 				}, null, 8, ["values", "get-label"])) : unref(ctx).multiple.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(modelValue)), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
 				_: 1
-			}, 8, ["class", "placeholder"]);
+			}, 8, [
+				"class",
+				"placeholder",
+				"as",
+				"as-child"
+			]);
 		};
 	}
 });

package/dist/components/select/SelectValue.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!-- Multiple mode: chips with overflow truncation -->\n      <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n        <SelectOverflowChips\n          :values=\"(modelValue as SelectItemValue[])\"\n          :get-label=\"ctx.itemLabel\"\n        />\n      </template>\n      <!-- Multiple mode: nothing selected yet -->\n      <template v-else-if=\"ctx.multiple.value\">\n        {{ props.placeholder }}\n      </template>\n      <!--\n        Single mode label resolution:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n        2. itemRegistry label — populated at setup time for items with explicit textValue\n        3. Placeholder when no value is selected\n      -->\n      <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,MAAM,iBAAgB;;uBAI1B,YAiCc,MAAA,YAAA,EAAA;IAhCX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACpB,aAAU;;IAEC,SAAO,SAOL,EAPS,eAAe,iBAAU,CAE7B,MAAA,IAAG,CAAC,SAAS,SAAS,MAAM,QAAQ,WAAU,IAAK,WAAW,SAAM,KAAA,WAAA,EAClF,YAGE,6BAAA;;KAFC,QAAS;KACT,aAAW,MAAA,IAAG,CAAC;4CAIC,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EAAlC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,IAQD,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAA1D,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAc,KAAI,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAEF,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAA1G,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,WAAU,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAE7B,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"SelectValue.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectValue.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SelectValue } from 'reka-ui'\nimport { useSelectInject, type SelectItemValue } from './Select.context'\nimport SelectOverflowChips from './SelectOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst ctx = useSelectInject()\n</script>\n\n<template>\n  <SelectValue\n    :class=\"ctx.slots.value.value()\"\n    :placeholder=\"props.placeholder\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    data-slot=\"value\"\n  >\n    <template #default=\"{ selectedLabel, modelValue }\">\n      <!-- Multiple mode: chips with overflow truncation -->\n      <template v-if=\"ctx.multiple.value && Array.isArray(modelValue) && modelValue.length > 0\">\n        <SelectOverflowChips\n          :values=\"(modelValue as SelectItemValue[])\"\n          :get-label=\"ctx.itemLabel\"\n        />\n      </template>\n      <!-- Multiple mode: nothing selected yet -->\n      <template v-else-if=\"ctx.multiple.value\">\n        {{ props.placeholder }}\n      </template>\n      <!--\n        Single mode label resolution:\n        1. Reka's native selectedLabel — populated via optionsSet once items mount\n        2. itemRegistry label — populated at setup time for items with explicit textValue\n        3. Placeholder when no value is selected\n      -->\n      <template v-else-if=\"selectedLabel && selectedLabel.length > 0\">\n        {{ selectedLabel.join(', ') }}\n      </template>\n      <template v-else-if=\"modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== '')\">\n        {{ ctx.itemLabel(modelValue as SelectItemValue | SelectItemValue[]) }}\n      </template>\n      <template v-else>\n        {{ props.placeholder }}\n      </template>\n    </template>\n  </SelectValue>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAcd,MAAM,MAAM,iBAAgB;;uBAI1B,YAmCc,MAAA,YAAA,EAAA;IAlCX,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,OAAK,CAAA;IAC5B,aAAa,MAAM;IACnB,IAAI,MAAM;IACV,YAAU,MAAM;IACjB,aAAU;;IAEC,SAAO,SAOL,EAPS,eAAe,iBAAU,CAE7B,MAAA,IAAG,CAAC,SAAS,SAAS,MAAM,QAAQ,WAAU,IAAK,WAAW,SAAM,KAAA,WAAA,EAClF,YAGE,6BAAA;;KAFC,QAAS;KACT,aAAW,MAAA,IAAG,CAAC;4CAIC,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EAAlC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,IAQD,iBAAiB,cAAc,SAAM,KAAA,WAAA,EAA1D,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAc,KAAI,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,IAEF,cAAU,SAAa,MAAM,QAAQ,WAAU,GAAI,WAAW,SAAM,IAAO,eAAU,OAAA,WAAA,EAA1G,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAA,IAAG,CAAC,UAAU,WAAU,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAE7B,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,MAAM,YAAW,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}