@auronui/vue 1.0.21 → 1.0.23

package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js

@@ -79,9 +79,53 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			],
 			default: void 0
 		},
-		classNames: { default: void 0 }
+		classNames: { default: void 0 },
+		resetSearchTermOnBlur: {
+			type: Boolean,
+			default: void 0
+		},
+		resetSearchTermOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		openOnFocus: {
+			type: Boolean,
+			default: void 0
+		},
+		openOnClick: {
+			type: Boolean,
+			default: void 0
+		},
+		ignoreFilter: {
+			type: Boolean,
+			default: void 0
+		},
+		resetModelValueOnClear: {
+			type: Boolean,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		dir: { default: void 0 },
+		highlightOnHover: {
+			type: Boolean,
+			default: void 0
+		},
+		by: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 }
 	},
-	emits: ["update:modelValue", "update:open"],
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"highlight"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -159,8 +203,22 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"default-open": props.defaultOpen,
 					disabled: props.isDisabled,
 					required: props.isRequired,
+					multiple: props.multiple,
+					name: props.name,
+					dir: props.dir,
+					as: props.as,
+					"as-child": props.asChild,
+					"reset-search-term-on-blur": props.resetSearchTermOnBlur,
+					"reset-search-term-on-select": props.resetSearchTermOnSelect,
+					"open-on-focus": props.openOnFocus,
+					"open-on-click": props.openOnClick,
+					"ignore-filter": props.ignoreFilter,
+					"reset-model-value-on-clear": props.resetModelValueOnClear,
+					"highlight-on-hover": props.highlightOnHover,
+					by: props.by,
 					"filter-function": effectiveFilter.value,
-					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event))
+					"onUpdate:open": _cache[2] || (_cache[2] = ($event) => emit("update:open", $event)),
+					onHighlight: _cache[3] || (_cache[3] = ($event) => emit("highlight", $event))
 				}, {
 					default: withCtx(() => [usesCustomChrome.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(ComboBoxInput_default, { placeholder: props.placeholder }, null, 8, ["placeholder"]), createVNode(ComboBoxContent_default, null, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item) => {
@@ -183,6 +241,19 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"default-open",
 					"disabled",
 					"required",
+					"multiple",
+					"name",
+					"dir",
+					"as",
+					"as-child",
+					"reset-search-term-on-blur",
+					"reset-search-term-on-select",
+					"open-on-focus",
+					"open-on-click",
+					"ignore-filter",
+					"reset-model-value-on-clear",
+					"highlight-on-hover",
+					"by",
 					"filter-function"
 				]),
 				props.description || props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_4, [props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(props.errorMessage), 1)) : props.description ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(props.description), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)

package/dist/components/combo-box/ComboBox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId, useSlots, watch } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport ComboBoxInput from './ComboBoxInput.vue'\nimport ComboBoxContent from './ComboBoxContent.vue'\nimport ComboBoxItem from './ComboBoxItem.vue'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n}>()\n\nconst labelId = useId()\n\nconst slots = useSlots()\n// Compound chrome present → pass slot through (advanced). Otherwise render the\n// input/content/items internally (short-form).\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [ComboBoxInput, ComboBoxContent]),\n)\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Registry for slot-rendered items: value → label (populated by ComboBoxItem at mount).\n// Replaced with a new Map instance on each mutation so Vue's ref() reactivity tracks changes.\nconst slotItemRegistry = ref(new Map<string, string>())\n\nfunction registerItem(value: string, label: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.set(value, label)\n  slotItemRegistry.value = next\n}\n\nfunction unregisterItem(value: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.delete(value)\n  slotItemRegistry.value = next\n}\n\n// Resolve a user-facing value (\"us\") to the label text used internally by Reka.\n// Priority: items prop entry > slot registry > identity fallback\nfunction labelFor(value: string | undefined): string {\n  if (!value) return ''\n  const item = props.items.find(i => i.value === value)\n  if (item) return item.label ?? item.textValue ?? value\n  return slotItemRegistry.value.get(value) ?? value\n}\n\n// Resolve a Reka-internal label text back to the user-facing value.\nfunction valueFor(label: string): string {\n  if (!label) return ''\n  // Check items prop first\n  const item = props.items.find(i => (i.label ?? i.textValue ?? i.value) === label)\n  if (item) return item.value\n  // Check slot registry\n  for (const [value, lbl] of slotItemRegistry.value) {\n    if (lbl === label) return value\n  }\n  return label\n}\n\n// internalValue holds the label text that Reka sees as its modelValue.\n// This lets Reka write the label directly into the input without a displayValue function.\nconst internalValue = ref(labelFor(props.modelValue))\n\n// Map a stored value back to its human-readable label for the input display.\n// Used as a no-op pass-through since internalValue already holds the label.\nconst displayValue = computed(() => (val: string): string => val)\n\n// Parent → internal: when the user's v-model changes, resolve to label text\nwatch(() => props.modelValue, (val) => {\n  const next = labelFor(val)\n  if (internalValue.value !== next) internalValue.value = next\n})\n\n// Internal → parent: when Reka emits a label text (after selection), translate to real value\nfunction handleModelValueUpdate(emitted: string) {\n  internalValue.value = emitted\n  emit('update:modelValue', valueFor(emitted))\n}\n\n// When slot items register (children mount after parent), re-resolve internalValue.\n// This covers the case where modelValue is set before children have mounted.\nwatch(slotItemRegistry, () => {\n  const next = labelFor(props.modelValue)\n  if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? '')) {\n    internalValue.value = next\n  }\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n  registerItem,\n  unregisterItem,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      v-model=\"internalValue\"\n      :default-value=\"props.defaultValue ? labelFor(props.defaultValue) : undefined\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"handleModelValueUpdate($event)\"\n      @update:open=\"emit('update:open', $event)\"\n    >\n      <slot v-if=\"usesCustomChrome\" />\n      <template v-else>\n        <ComboBoxInput :placeholder=\"props.placeholder\" />\n        <ComboBoxContent>\n          <ComboBoxItem\n            v-for=\"item in props.items\"\n            :key=\"item.value\"\n            :value=\"item.value\"\n            :is-disabled=\"item.isDisabled\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n            >{{ item.label ?? item.textValue ?? item.value }}</slot>\n          </ComboBoxItem>\n        </ComboBoxContent>\n      </template>\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId, useSlots, watch } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport ComboBoxInput from './ComboBoxInput.vue'\nimport ComboBoxContent from './ComboBoxContent.vue'\nimport ComboBoxItem from './ComboBoxItem.vue'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Reset search term when user blurs the input. */\n  resetSearchTermOnBlur?: boolean\n  /** Reset search term after an item is selected. */\n  resetSearchTermOnSelect?: boolean\n  /** Open dropdown when the input gains focus. */\n  openOnFocus?: boolean\n  /** Open dropdown when the input is clicked. */\n  openOnClick?: boolean\n  /** Disable Reka's built-in filter; handle filtering externally. */\n  ignoreFilter?: boolean\n  /** Reset modelValue when the input is cleared. */\n  resetModelValueOnClear?: boolean\n  /** Allow selecting multiple values. */\n  multiple?: boolean\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Highlight the matching item on hover. */\n  highlightOnHover?: boolean\n  /** Key to compare items by for selection equality. */\n  by?: 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  /** Form field name for native form submission. */\n  name?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n  classNames: undefined,\n  resetSearchTermOnBlur: undefined,\n  resetSearchTermOnSelect: undefined,\n  openOnFocus: undefined,\n  openOnClick: undefined,\n  ignoreFilter: undefined,\n  resetModelValueOnClear: undefined,\n  multiple: false,\n  dir: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n  'highlight': [context: { ref: Element; value: string } | undefined]\n}>()\n\nconst labelId = useId()\n\nconst slots = useSlots()\n// Compound chrome present → pass slot through (advanced). Otherwise render the\n// input/content/items internally (short-form).\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [ComboBoxInput, ComboBoxContent]),\n)\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Registry for slot-rendered items: value → label (populated by ComboBoxItem at mount).\n// Replaced with a new Map instance on each mutation so Vue's ref() reactivity tracks changes.\nconst slotItemRegistry = ref(new Map<string, string>())\n\nfunction registerItem(value: string, label: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.set(value, label)\n  slotItemRegistry.value = next\n}\n\nfunction unregisterItem(value: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.delete(value)\n  slotItemRegistry.value = next\n}\n\n// Resolve a user-facing value (\"us\") to the label text used internally by Reka.\n// Priority: items prop entry > slot registry > identity fallback\nfunction labelFor(value: string | undefined): string {\n  if (!value) return ''\n  const item = props.items.find(i => i.value === value)\n  if (item) return item.label ?? item.textValue ?? value\n  return slotItemRegistry.value.get(value) ?? value\n}\n\n// Resolve a Reka-internal label text back to the user-facing value.\nfunction valueFor(label: string): string {\n  if (!label) return ''\n  // Check items prop first\n  const item = props.items.find(i => (i.label ?? i.textValue ?? i.value) === label)\n  if (item) return item.value\n  // Check slot registry\n  for (const [value, lbl] of slotItemRegistry.value) {\n    if (lbl === label) return value\n  }\n  return label\n}\n\n// internalValue holds the label text that Reka sees as its modelValue.\n// This lets Reka write the label directly into the input without a displayValue function.\nconst internalValue = ref(labelFor(props.modelValue))\n\n// Map a stored value back to its human-readable label for the input display.\n// Used as a no-op pass-through since internalValue already holds the label.\nconst displayValue = computed(() => (val: string): string => val)\n\n// Parent → internal: when the user's v-model changes, resolve to label text\nwatch(() => props.modelValue, (val) => {\n  const next = labelFor(val)\n  if (internalValue.value !== next) internalValue.value = next\n})\n\n// Internal → parent: when Reka emits a label text (after selection), translate to real value\nfunction handleModelValueUpdate(emitted: string) {\n  internalValue.value = emitted\n  emit('update:modelValue', valueFor(emitted))\n}\n\n// When slot items register (children mount after parent), re-resolve internalValue.\n// This covers the case where modelValue is set before children have mounted.\nwatch(slotItemRegistry, () => {\n  const next = labelFor(props.modelValue)\n  if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? '')) {\n    internalValue.value = next\n  }\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n  registerItem,\n  unregisterItem,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      v-model=\"internalValue\"\n      :default-value=\"props.defaultValue ? labelFor(props.defaultValue) : undefined\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :multiple=\"props.multiple\"\n      :name=\"props.name\"\n      :dir=\"props.dir\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :reset-search-term-on-blur=\"props.resetSearchTermOnBlur\"\n      :reset-search-term-on-select=\"props.resetSearchTermOnSelect\"\n      :open-on-focus=\"props.openOnFocus\"\n      :open-on-click=\"props.openOnClick\"\n      :ignore-filter=\"props.ignoreFilter\"\n      :reset-model-value-on-clear=\"props.resetModelValueOnClear\"\n      :highlight-on-hover=\"props.highlightOnHover\"\n      :by=\"props.by\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"handleModelValueUpdate($event)\"\n      @update:open=\"emit('update:open', $event)\"\n      @highlight=\"emit('highlight', $event)\"\n    >\n      <slot v-if=\"usesCustomChrome\" />\n      <template v-else>\n        <ComboBoxInput :placeholder=\"props.placeholder\" />\n        <ComboBoxContent>\n          <ComboBoxItem\n            v-for=\"item in props.items\"\n            :key=\"item.value\"\n            :value=\"item.value\"\n            :is-disabled=\"item.isDisabled\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n            >{{ item.label ?? item.textValue ?? item.value }}</slot>\n          </ComboBoxItem>\n        </ComboBoxContent>\n      </template>\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAiFd,MAAM,OAAO;EAMb,MAAM,UAAU,OAAM;EAEtB,MAAM,QAAQ,UAAS;EAGvB,MAAM,mBAAmB,eACvB,iBAAiB,MAAM,WAAW,EAAE,CAAC,uBAAe,wBAAgB,CAAC,CACvE;EAEA,MAAM,UAAU,eACd,iBAAiB,EACf,WAAW,MAAM,WAClB,CAAA,CACH;EAGA,MAAM,kBAAkB,eAAe;AACrC,OAAI,MAAM,eAAgB,QAAO,MAAM;AACvC,WAAQ,UAAkB,eACxB,SAAS,aAAa,CAAC,SAAS,WAAW,aAAa,CAAA;IAC3D;EAID,MAAM,mBAAmB,oBAAI,IAAI,KAAqB,CAAA;EAEtD,SAAS,aAAa,OAAe,OAAe;GAClD,MAAM,OAAO,IAAI,IAAI,iBAAiB,MAAK;AAC3C,QAAK,IAAI,OAAO,MAAK;AACrB,oBAAiB,QAAQ;;EAG3B,SAAS,eAAe,OAAe;GACrC,MAAM,OAAO,IAAI,IAAI,iBAAiB,MAAK;AAC3C,QAAK,OAAO,MAAK;AACjB,oBAAiB,QAAQ;;EAK3B,SAAS,SAAS,OAAmC;AACnD,OAAI,CAAC,MAAO,QAAO;GACnB,MAAM,OAAO,MAAM,MAAM,MAAK,MAAK,EAAE,UAAU,MAAK;AACpD,OAAI,KAAM,QAAO,KAAK,SAAS,KAAK,aAAa;AACjD,UAAO,iBAAiB,MAAM,IAAI,MAAM,IAAI;;EAI9C,SAAS,SAAS,OAAuB;AACvC,OAAI,CAAC,MAAO,QAAO;GAEnB,MAAM,OAAO,MAAM,MAAM,MAAK,OAAM,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,MAAK;AAChF,OAAI,KAAM,QAAO,KAAK;AAEtB,QAAK,MAAM,CAAC,OAAO,QAAQ,iBAAiB,MAC1C,KAAI,QAAQ,MAAO,QAAO;AAE5B,UAAO;;EAKT,MAAM,gBAAgB,IAAI,SAAS,MAAM,WAAW,CAAA;EAIpD,MAAM,eAAe,gBAAgB,QAAwB,IAAG;AAGhE,cAAY,MAAM,aAAa,QAAQ;GACrC,MAAM,OAAO,SAAS,IAAG;AACzB,OAAI,cAAc,UAAU,KAAM,eAAc,QAAQ;IACzD;EAGD,SAAS,uBAAuB,SAAiB;AAC/C,iBAAc,QAAQ;AACtB,QAAK,qBAAqB,SAAS,QAAQ,CAAA;;AAK7C,QAAM,wBAAwB;GAC5B,MAAM,OAAO,SAAS,MAAM,WAAU;AACtC,OAAI,SAAS,cAAc,SAAS,SAAS,cAAc,MAAM,MAAM,MAAM,cAAc,IACzF,eAAc,QAAQ;IAEzB;AAED,qBAAmB;GACjB,YAAY,MAAM,OAAO,aAAa;GACtC,WAAW,MAAM,OAAO,YAAY;GACpC,WAAW,MAAM,OAAO,YAAY;GACpC,OAAO;GACP;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,MAAM,aAAa,KAAA;IAClC,aAAU;;IAGF,MAAM,SAAA,WAAA,EADd,mBAUQ,SAAA;;KARL,IAAI,MAAA,QAAO;KACZ,aAAU;wCAEP,MAAM,MAAK,GAAG,KACjB,EAAA,EACQ,MAAM,cAAA,WAAA,EADd,mBAGU,QAHV,YAGC,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAGL,YA0Ce,MAAA,aAAA,EAAA;iBAzCJ,cAAA;iFAAa,QAAA,SAAA,OAAA,OAAA,OAAA,MAAA,WAoBD,uBAAuB,OAAM,EAAA;KAnBjD,iBAAe,MAAM,eAAe,SAAS,MAAM,aAAY,GAAI,KAAA;KACnE,MAAM,MAAM;KACZ,gBAAc,MAAM;KACpB,UAAU,MAAM;KAChB,UAAU,MAAM;KAChB,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,KAAK,MAAM;KACX,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,6BAA2B,MAAM;KACjC,+BAA6B,MAAM;KACnC,iBAAe,MAAM;KACrB,iBAAe,MAAM;KACrB,iBAAe,MAAM;KACrB,8BAA4B,MAAM;KAClC,sBAAoB,MAAM;KAC1B,IAAI,MAAM;KACV,mBAAiB,gBAAA;KAEjB,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,OAAM;KACvC,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,aAAc,OAAM;;4BAEJ,CAApB,iBAAA,QAAZ,WAAgC,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,IAAA,WAAA,EAChC,mBAeW,UAAA,EAAA,KAAA,GAAA,EAAA,CAdT,YAAkD,uBAAA,EAAlC,aAAa,MAAM,aAAA,EAAA,MAAA,GAAA,CAAA,cAAA,CAAA,EACnC,YAYkB,yBAAA,MAAA;6BAVa,EAAA,UAAA,KAAA,EAD7B,mBAUe,UAAA,MAAA,WATE,MAAM,QAAd,SAAI;2BADb,YAUe,sBAAA;QARZ,KAAK,KAAK;QACV,OAAO,KAAK;QACZ,eAAa,KAAK;;+BAKqC,CAHxD,WAGwD,KAAA,QAAA,QAAA,EAD/C,MAAI,QAC2C,CAAA,gBAAA,gBAApD,KAAK,SAAS,KAAK,aAAa,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAO9C,MAAM,eAAgB,MAAM,aAAa,MAAM,gBAAA,WAAA,EADvD,mBAiBM,OAjBN,YAiBM,CAZI,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAMI,KANJ,YAMI,gBADC,MAAM,aAAY,EAAA,EAAA,IAGV,MAAM,eAAA,WAAA,EADnB,mBAKI,KALJ,YAKI,gBADC,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/combo-box/ComboBoxContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContent.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = (slots.default as (() => VNode[]) | undefined)?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxContent.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n  /** Portal target selector or element. */\n  to?: string | HTMLElement\n  /** Disable the portal. */\n  portalDisabled?: boolean\n  /** Defer portal rendering. */\n  defer?: boolean\n  /** Force-mount the portal even when closed. */\n  portalForceMount?: boolean\n  /** Force-mount the content even when closed. */\n  forceMount?: boolean\n  /** Positioning strategy: item-aligned or popper. */\n  position?: 'inline' | 'popper'\n  /** Lock body scroll when open. */\n  bodyLock?: boolean\n  /** Hide content when there are no items. */\n  hideWhenEmpty?: boolean\n  /** Side of the anchor to render on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Flip side when colliding. */\n  sideFlip?: boolean\n  /** Side offset in pixels. */\n  sideOffsetProp?: number\n  /** Alignment relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Alignment offset in pixels. */\n  alignOffset?: number\n  /** Flip alignment when colliding. */\n  alignFlip?: boolean\n  /** Avoid collisions with boundary. */\n  avoidCollisions?: boolean\n  /** Boundary element(s) for collision detection. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding from collision boundary. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding from arrow. */\n  arrowPadding?: number\n  /** Hide arrow when shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior on scroll. */\n  sticky?: 'partial' | 'always'\n  /** Hide when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to update position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position updates on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in view. */\n  prioritizePosition?: boolean\n  /** Custom reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  as?: string\n  /** Merge content props onto child element. */\n  asChild?: boolean\n  /** Disable outside pointer events when open. */\n  disableOutsidePointerEvents?: boolean\n  /** Nonce for the viewport's inline style. */\n  viewportNonce?: string\n  /** Render the viewport as a different element. */\n  viewportAs?: string\n  /** Merge viewport props onto child element. */\n  viewportAsChild?: boolean\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n  to: undefined,\n  portalDisabled: undefined,\n  defer: undefined,\n  portalForceMount: undefined,\n  forceMount: undefined,\n  position: undefined,\n  bodyLock: undefined,\n  hideWhenEmpty: undefined,\n  side: undefined,\n  sideFlip: undefined,\n  sideOffsetProp: 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  viewportNonce: undefined,\n  viewportAs: undefined,\n  viewportAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n}>()\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = (slots.default as (() => VNode[]) | undefined)?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal\n    :to=\"props.to\"\n    :disabled=\"props.portalDisabled\"\n    :defer=\"props.defer\"\n    :force-mount=\"props.portalForceMount\"\n  >\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        :position=\"props.position ?? 'popper'\"\n        :side-offset=\"props.sideOffset\"\n        :force-mount=\"props.forceMount\"\n        :body-lock=\"props.bodyLock\"\n        :hide-when-empty=\"props.hideWhenEmpty\"\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 ?? true\"\n        :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n        data-slot=\"popover\"\n        @escape-key-down=\"emit('escape-key-down', $event)\"\n        @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n        @focus-outside=\"emit('focus-outside', $event)\"\n        @interact-outside=\"emit('interact-outside', $event)\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport\n            :nonce=\"props.viewportNonce\"\n            :as=\"props.viewportAs\"\n            :as-child=\"props.viewportAsChild\"\n            data-slot=\"list-box\"\n          >\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js

@@ -8,10 +8,97 @@ var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	__name: "ComboBoxContent",
 	props: {
 		sideOffset: { default: 8 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		to: { default: void 0 },
+		portalDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		defer: {
+			type: Boolean,
+			default: void 0
+		},
+		portalForceMount: {
+			type: Boolean,
+			default: void 0
+		},
+		forceMount: {
+			type: Boolean,
+			default: void 0
+		},
+		position: { default: void 0 },
+		bodyLock: {
+			type: Boolean,
+			default: void 0
+		},
+		hideWhenEmpty: {
+			type: Boolean,
+			default: void 0
+		},
+		side: { default: void 0 },
+		sideFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		sideOffsetProp: { 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
+		},
+		viewportNonce: { default: void 0 },
+		viewportAs: { default: void 0 },
+		viewportAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: [
+		"escape-key-down",
+		"pointer-down-outside",
+		"focus-outside",
+		"interact-outside"
+	],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useComboBoxInject();
 		const comboboxRootContext = injectComboboxRootContext();
 		const slots = useSlots();
@@ -49,14 +136,45 @@ var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			if (vnodes) walkAndRegister(vnodes);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ComboboxPortal), null, {
+			return openBlock(), createBlock(unref(ComboboxPortal), {
+				to: props.to,
+				disabled: props.portalDisabled,
+				defer: props.defer,
+				"force-mount": props.portalForceMount
+			}, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 					default: withCtx(() => [unref(comboboxRootContext).open.value ? (openBlock(), createBlock(unref(ComboboxContent), {
 						key: 0,
-						position: "popper",
+						position: props.position ?? "popper",
 						"side-offset": props.sideOffset,
-						"as-child": "",
-						"data-slot": "popover"
+						"force-mount": props.forceMount,
+						"body-lock": props.bodyLock,
+						"hide-when-empty": props.hideWhenEmpty,
+						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 ?? true,
+						"disable-outside-pointer-events": props.disableOutsidePointerEvents,
+						"data-slot": "popover",
+						onEscapeKeyDown: _cache[0] || (_cache[0] = ($event) => emit("escape-key-down", $event)),
+						onPointerDownOutside: _cache[1] || (_cache[1] = ($event) => emit("pointer-down-outside", $event)),
+						onFocusOutside: _cache[2] || (_cache[2] = ($event) => emit("focus-outside", $event)),
+						onInteractOutside: _cache[3] || (_cache[3] = ($event) => emit("interact-outside", $event))
 					}, {
 						default: withCtx(() => [createVNode(unref(motion).div, {
 							class: normalizeClass(unref(ctx).slots.value.popover()),
@@ -74,18 +192,58 @@ var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 							},
 							transition: { duration: .15 }
 						}, {
-							default: withCtx(() => [createVNode(unref(ComboboxViewport), { "data-slot": "list-box" }, {
+							default: withCtx(() => [createVNode(unref(ComboboxViewport), {
+								nonce: props.viewportNonce,
+								as: props.viewportAs,
+								"as-child": props.viewportAsChild,
+								"data-slot": "list-box"
+							}, {
 								default: withCtx(() => [renderSlot(_ctx.$slots, "default"), renderSlot(_ctx.$slots, "empty")]),
 								_: 3
-							})]),
+							}, 8, [
+								"nonce",
+								"as",
+								"as-child"
+							])]),
 							_: 3
 						}, 8, ["class"])]),
 						_: 3
-					}, 8, ["side-offset"])) : createCommentVNode("", true)]),
+					}, 8, [
+						"position",
+						"side-offset",
+						"force-mount",
+						"body-lock",
+						"hide-when-empty",
+						"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"
+					])) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
-			});
+			}, 8, [
+				"to",
+				"disabled",
+				"defer",
+				"force-mount"
+			]);
 		};
 	}
 });

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = (slots.default as (() => VNode[]) | undefined)?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal>\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport data-slot=\"list-box\">\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;EAItD,MAAM,QAAQ,UAAS;EAEvB,SAAS,gBAAgB,OAAwB;AAC/C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,gBAAgB,EAAE,SAAmB;AAC3E,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,SAAS,gBAAgB,OAAgB;AACvC,QAAK,MAAM,QAAQ,OAAO;AAExB,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,UAAU,UAAU;KACtD,MAAM,QAAQ,KAAK,MAAM;KACzB,MAAM,WAAW,KAAK;AACtB,SAAI,YAAY,OAAO,aAAa,YAAY,aAAa,UAAU;MACrE,MAAM,SAAU,SAA2C;AAC3D,UAAI,OAAO,WAAW,YAAY;OAChC,MAAM,OAAO,gBAAgB,QAAQ,CAAC,CAAC,MAAK;AAC5C,WAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;gBAE/B,OAAO,aAAa,UAAU;MACvC,MAAM,OAAO,SAAS,MAAK;AAC3B,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;gBAC7B,MAAM,QAAQ,SAAS,EAAE;MAClC,MAAM,OAAO,gBAAgB,SAAoB,CAAC,MAAK;AACvD,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;;AAI1C,QAAI,MAAM,QAAQ,KAAK,SAAS,CAC9B,iBAAgB,KAAK,SAAmB;;;AAM9C,oBAAkB;GAChB,MAAM,SAAU,MAAM,WAA0C;AAChE,OAAI,OAAQ,iBAAgB,OAAM;IACnC;;uBAIC,YAuBiB,MAAA,eAAA,EAAA,MAAA;2BADG,CArBlB,YAqBkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAlBV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAmBkB,MAAA,gBAAA,EAAA;;MAjBhB,UAAS;MACR,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAaG,CAXb,YAWa,MAAA,OAAA,CAAA,KAAA;OAVV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAKZ,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,aAAU,YAAU,EAAA;+BAC5B,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}
+{"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n  /** Portal target selector or element. */\n  to?: string | HTMLElement\n  /** Disable the portal. */\n  portalDisabled?: boolean\n  /** Defer portal rendering. */\n  defer?: boolean\n  /** Force-mount the portal even when closed. */\n  portalForceMount?: boolean\n  /** Force-mount the content even when closed. */\n  forceMount?: boolean\n  /** Positioning strategy: item-aligned or popper. */\n  position?: 'inline' | 'popper'\n  /** Lock body scroll when open. */\n  bodyLock?: boolean\n  /** Hide content when there are no items. */\n  hideWhenEmpty?: boolean\n  /** Side of the anchor to render on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Flip side when colliding. */\n  sideFlip?: boolean\n  /** Side offset in pixels. */\n  sideOffsetProp?: number\n  /** Alignment relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Alignment offset in pixels. */\n  alignOffset?: number\n  /** Flip alignment when colliding. */\n  alignFlip?: boolean\n  /** Avoid collisions with boundary. */\n  avoidCollisions?: boolean\n  /** Boundary element(s) for collision detection. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding from collision boundary. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding from arrow. */\n  arrowPadding?: number\n  /** Hide arrow when shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior on scroll. */\n  sticky?: 'partial' | 'always'\n  /** Hide when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to update position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position updates on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in view. */\n  prioritizePosition?: boolean\n  /** Custom reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  as?: string\n  /** Merge content props onto child element. */\n  asChild?: boolean\n  /** Disable outside pointer events when open. */\n  disableOutsidePointerEvents?: boolean\n  /** Nonce for the viewport's inline style. */\n  viewportNonce?: string\n  /** Render the viewport as a different element. */\n  viewportAs?: string\n  /** Merge viewport props onto child element. */\n  viewportAsChild?: boolean\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n  to: undefined,\n  portalDisabled: undefined,\n  defer: undefined,\n  portalForceMount: undefined,\n  forceMount: undefined,\n  position: undefined,\n  bodyLock: undefined,\n  hideWhenEmpty: undefined,\n  side: undefined,\n  sideFlip: undefined,\n  sideOffsetProp: 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  viewportNonce: undefined,\n  viewportAs: undefined,\n  viewportAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n}>()\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n  for (const node of nodes) {\n    // ComboBoxItem VNodes have a `value` prop; extract their text children\n    if (node.props && typeof node.props.value === 'string') {\n      const value = node.props.value as string\n      const children = node.children\n      if (children && typeof children === 'object' && 'default' in children) {\n        const slotFn = (children as Record<string, () => VNode[]>).default\n        if (typeof slotFn === 'function') {\n          const text = extractNodeText(slotFn()).trim()\n          if (text) ctx.registerItem(value, text)\n        }\n      } else if (typeof children === 'string') {\n        const text = children.trim()\n        if (text) ctx.registerItem(value, text)\n      } else if (Array.isArray(children)) {\n        const text = extractNodeText(children as VNode[]).trim()\n        if (text) ctx.registerItem(value, text)\n      }\n    }\n    // Recurse into children arrays\n    if (Array.isArray(node.children)) {\n      walkAndRegister(node.children as VNode[])\n    }\n  }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n  const vnodes = (slots.default as (() => VNode[]) | undefined)?.()\n  if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n  <ComboboxPortal\n    :to=\"props.to\"\n    :disabled=\"props.portalDisabled\"\n    :defer=\"props.defer\"\n    :force-mount=\"props.portalForceMount\"\n  >\n    <AnimatePresence>\n      <ComboboxContent\n        v-if=\"comboboxRootContext.open.value\"\n        :position=\"props.position ?? 'popper'\"\n        :side-offset=\"props.sideOffset\"\n        :force-mount=\"props.forceMount\"\n        :body-lock=\"props.bodyLock\"\n        :hide-when-empty=\"props.hideWhenEmpty\"\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 ?? true\"\n        :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n        data-slot=\"popover\"\n        @escape-key-down=\"emit('escape-key-down', $event)\"\n        @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n        @focus-outside=\"emit('focus-outside', $event)\"\n        @interact-outside=\"emit('interact-outside', $event)\"\n      >\n        <motion.div\n          :class=\"ctx.slots.value.popover()\"\n          :initial=\"{ opacity: 0, scale: 0.95 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :exit=\"{ opacity: 0, scale: 0.95 }\"\n          :transition=\"{ duration: 0.15 }\"\n        >\n          <ComboboxViewport\n            :nonce=\"props.viewportNonce\"\n            :as=\"props.viewportAs\"\n            :as-child=\"props.viewportAsChild\"\n            data-slot=\"list-box\"\n          >\n            <slot />\n            <slot name=\"empty\" />\n          </ComboboxViewport>\n        </motion.div>\n      </ComboboxContent>\n    </AnimatePresence>\n  </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAwGd,MAAM,OAAO;EAOb,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;EAItD,MAAM,QAAQ,UAAS;EAEvB,SAAS,gBAAgB,OAAwB;AAC/C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,gBAAgB,EAAE,SAAmB;AAC3E,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,SAAS,gBAAgB,OAAgB;AACvC,QAAK,MAAM,QAAQ,OAAO;AAExB,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,UAAU,UAAU;KACtD,MAAM,QAAQ,KAAK,MAAM;KACzB,MAAM,WAAW,KAAK;AACtB,SAAI,YAAY,OAAO,aAAa,YAAY,aAAa,UAAU;MACrE,MAAM,SAAU,SAA2C;AAC3D,UAAI,OAAO,WAAW,YAAY;OAChC,MAAM,OAAO,gBAAgB,QAAQ,CAAC,CAAC,MAAK;AAC5C,WAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;gBAE/B,OAAO,aAAa,UAAU;MACvC,MAAM,OAAO,SAAS,MAAK;AAC3B,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;gBAC7B,MAAM,QAAQ,SAAS,EAAE;MAClC,MAAM,OAAO,gBAAgB,SAAoB,CAAC,MAAK;AACvD,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;;AAI1C,QAAI,MAAM,QAAQ,KAAK,SAAS,CAC9B,iBAAgB,KAAK,SAAmB;;;AAM9C,oBAAkB;GAChB,MAAM,SAAU,MAAM,WAA0C;AAChE,OAAI,OAAQ,iBAAgB,OAAM;IACnC;;uBAIC,YA2DiB,MAAA,eAAA,EAAA;IA1Dd,IAAI,MAAM;IACV,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,eAAa,MAAM;;2BAsDF,CApDlB,YAoDkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAjDV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAkDkB,MAAA,gBAAA,EAAA;;MAhDf,UAAU,MAAM,YAAQ;MACxB,eAAa,MAAM;MACnB,eAAa,MAAM;MACnB,aAAW,MAAM;MACjB,mBAAiB,MAAM;MACvB,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,WAAO;MACvB,kCAAgC,MAAM;MACvC,aAAU;MACT,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;MAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;MACzD,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAkB,OAAM;MAC3C,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;6BAkBrC,CAhBb,YAgBa,MAAA,OAAA,CAAA,KAAA;OAfV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAUZ,CARnB,YAQmB,MAAA,iBAAA,EAAA;QAPhB,OAAO,MAAM;QACb,IAAI,MAAM;QACV,YAAU,MAAM;QACjB,aAAU;;+BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBoxEmpty.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxEmpty.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n</script>\n\n<template>\n  <ComboboxEmpty\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxEmpty.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\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  as: undefined,\n  asChild: false,\n})\n</script>\n\n<template>\n  <ComboboxEmpty\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js

@@ -3,15 +3,25 @@ import { ComboboxEmpty } from "reka-ui";
 //#region src/components/combo-box/ComboBoxEmpty.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxEmpty_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ComboBoxEmpty",
+	props: {
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props) {
+		const props = __props;
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxEmpty), {
+				as: props.as,
+				"as-child": props.asChild,
 				class: "py-3 text-center text-sm text-default-400",
 				"data-slot": "empty-content"
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			});
+			}, 8, ["as", "as-child"]);
 		};
 	}
 });

package/dist/components/combo-box/ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n</script>\n\n<template>\n  <ComboboxEmpty\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":";;;;;;;uBAKE,YAKgB,MAAA,cAAA,EAAA;IAJd,OAAM;IACN,aAAU;;2BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ComboBoxEmpty.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxEmpty } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\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  as: undefined,\n  asChild: false,\n})\n</script>\n\n<template>\n  <ComboboxEmpty\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    class=\"py-3 text-center text-sm text-default-400\"\n    data-slot=\"empty-content\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBAYZ,YAOgB,MAAA,cAAA,EAAA;IANb,IAAI,MAAM;IACV,YAAU,MAAM;IACjB,OAAM;IACN,aAAU;;2BAEF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBoxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :display-value=\"ctx.displayValue.value\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      class=\"combo-box__clear-button\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Custom reference element for the anchor. */\n  anchorReference?: object | null\n  /** Render the anchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n  /** Function to compute the display value from the current model value. */\n  displayValue?: (value: string) => string\n  /** Two-way bound search input value. */\n  modelValue?: string\n  /** Auto-focus the input on mount. */\n  autoFocus?: boolean\n  /** Disable the input. Falls back to context isDisabled. */\n  disabled?: boolean\n  /** Render the input as a different element. */\n  as?: string\n  /** Merge input props onto child element. */\n  asChild?: boolean\n  /** Disable the trigger button. */\n  triggerDisabled?: boolean\n  /** Render the trigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Render the cancel button as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n  displayValue: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerDisabled: undefined,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  cancelAs: undefined,\n  cancelAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :display-value=\"props.displayValue ?? ctx.displayValue.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      class=\"combo-box__clear-button\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :disabled=\"props.triggerDisabled\"\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\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          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxInput.vue_vue_type_script_setup_true_lang.js

@@ -6,35 +6,89 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	__name: "ComboBoxInput",
 	props: {
 		placeholder: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		anchorReference: { default: void 0 },
+		anchorAs: { default: void 0 },
+		anchorAsChild: {
+			type: Boolean,
+			default: false
+		},
+		displayValue: {
+			type: Function,
+			default: void 0
+		},
+		modelValue: { default: void 0 },
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		triggerDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		triggerAs: { default: void 0 },
+		triggerAsChild: {
+			type: Boolean,
+			default: false
+		},
+		cancelAs: { default: void 0 },
+		cancelAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useComboBoxInject();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxAnchor), {
+				reference: props.anchorReference,
+				as: props.anchorAs,
+				"as-child": props.anchorAsChild,
 				class: normalizeClass(unref(ctx).slots.value.inputGroup()),
 				"data-slot": "input-group"
 			}, {
 				default: withCtx(() => [
 					createVNode(unref(ComboboxInput), {
 						placeholder: props.placeholder,
-						disabled: unref(ctx).isDisabled.value,
-						"display-value": unref(ctx).displayValue.value,
+						"model-value": props.modelValue,
+						"auto-focus": props.autoFocus,
+						disabled: props.disabled ?? unref(ctx).isDisabled.value,
+						"display-value": props.displayValue ?? unref(ctx).displayValue.value,
+						as: props.as,
+						"as-child": props.asChild,
 						class: "combo-box__input",
 						"data-slot": "input",
-						autocomplete: "off"
+						autocomplete: "off",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
 					}, null, 8, [
 						"placeholder",
+						"model-value",
+						"auto-focus",
 						"disabled",
-						"display-value"
+						"display-value",
+						"as",
+						"as-child"
 					]),
 					createVNode(unref(ComboboxCancel), {
+						as: props.cancelAs,
+						"as-child": props.cancelAsChild,
 						class: "combo-box__clear-button",
 						"data-slot": "clear-button",
 						"aria-label": "Clear"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "10",
 							height: "10",
@@ -57,13 +111,16 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							y2: "18"
 						})], -1))])]),
 						_: 3
-					}),
+					}, 8, ["as", "as-child"]),
 					createVNode(unref(ComboboxTrigger), {
+						disabled: props.triggerDisabled,
+						as: props.triggerAs,
+						"as-child": props.triggerAsChild,
 						class: normalizeClass(unref(ctx).slots.value.trigger()),
 						"data-slot": "selector-button",
 						"aria-label": "Toggle suggestions"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[2] || (_cache[2] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -77,10 +134,20 @@ var ComboBoxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1))])]),
 						_: 3
-					}, 8, ["class"])
+					}, 8, [
+						"disabled",
+						"as",
+						"as-child",
+						"class"
+					])
 				]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"reference",
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });