@auronui/vue 1.0.21 → 1.0.23

package/dist/components/autocomplete/AutocompleteContent.vue_vue_type_script_setup_true_lang.js

@@ -13,10 +13,92 @@ var AutocompleteContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	__name: "AutocompleteContent",
 	props: {
 		sideOffset: { default: 8 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		to: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		defer: {
+			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
+		},
+		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: void 0
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			default: void 0
+		},
+		nonce: { default: void 0 },
+		viewportAs: { default: void 0 },
+		viewportAsChild: {
+			type: Boolean,
+			default: void 0
+		}
 	},
-	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 = useAutocompleteInject();
 		const rootContext = injectComboboxRootContext();
 		const slots = useSlots();
@@ -58,14 +140,44 @@ var AutocompleteContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			if (vnodes) walkAndRegister(vnodes);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(AutocompletePortal), null, {
+			return openBlock(), createBlock(unref(AutocompletePortal), {
+				to: props.to,
+				disabled: props.disabled,
+				defer: props.defer,
+				"force-mount": props.forceMount
+			}, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 					default: withCtx(() => [unref(rootContext).open.value && (unref(ctx).hasItems.value || unref(ctx).isFilled.value && !unref(ctx).isLoading.value) ? (openBlock(), createBlock(unref(AutocompleteContent), {
 						key: 0,
-						position: "popper",
+						position: props.position ?? "popper",
 						"side-offset": props.sideOffset,
-						"as-child": "",
-						"data-slot": "popover"
+						"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(["autocomplete__popover", "relative"]),
@@ -98,7 +210,7 @@ var AutocompleteContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 									class: "py-3 text-center text-sm text-default-400",
 									"data-slot": "empty-content"
 								}, {
-									default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[0] || (_cache[0] = createTextVNode(" No results found ", -1))])]),
+									default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[4] || (_cache[4] = createTextVNode(" No results found ", -1))])]),
 									_: 3
 								})) : createCommentVNode("", true)]),
 								_: 3
@@ -110,11 +222,41 @@ var AutocompleteContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 							"aria-busy"
 						])]),
 						_: 3
-					}, 8, ["side-offset"])) : createCommentVNode("", true)]),
+					}, 8, [
+						"position",
+						"side-offset",
+						"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/autocomplete/AutocompleteContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { AutocompletePortal, AutocompleteContent, AutocompleteViewport, AutocompleteEmpty, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n// AutocompleteRoot internally provides the ComboboxRoot context\nconst rootContext = 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    // AutocompleteItem 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 label = node.props.label as string | undefined\n      if (label) {\n        ctx.registerItem(value, label)\n      } else {\n        // Extract text from the default slot children of this VNode\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    }\n    // Recurse into children\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  <AutocompletePortal>\n    <AnimatePresence>\n      <AutocompleteContent\n        v-if=\"rootContext.open.value && (ctx.hasItems.value || (ctx.isFilled.value && !ctx.isLoading.value))\"\n        position=\"popper\"\n        :side-offset=\"props.sideOffset\"\n        as-child\n        data-slot=\"popover\"\n      >\n        <motion.div\n          :class=\"['autocomplete__popover', 'relative']\"\n          :data-loading=\"ctx.isLoading.value ? '' : undefined\"\n          :data-truncate-items=\"ctx.truncateItems.value ? undefined : 'false'\"\n          :aria-busy=\"ctx.isLoading.value || undefined\"\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          <div\n            :class=\"[\n              'transition-opacity duration-150',\n              ctx.isLoading.value\n                ? 'pointer-events-none opacity-50 grayscale cursor-not-allowed select-none'\n                : '',\n            ]\"\n            :inert=\"ctx.isLoading.value || undefined\"\n            :aria-disabled=\"ctx.isLoading.value || undefined\"\n            :data-disabled=\"ctx.isLoading.value ? '' : undefined\"\n            data-slot=\"list-wrapper\"\n          >\n            <AutocompleteViewport\n              data-slot=\"list-box\"\n            >\n              <slot />\n              <!-- Empty state: only show when the user has typed a query -->\n              <AutocompleteEmpty\n                v-if=\"ctx.isFilled.value && !ctx.isLoading.value\"\n                class=\"py-3 text-center text-sm text-default-400\"\n                data-slot=\"empty-content\"\n              >\n                <slot name=\"empty\">\n                  No results found\n                </slot>\n              </AutocompleteEmpty>\n            </AutocompleteViewport>\n          </div>\n        </motion.div>\n      </AutocompleteContent>\n    </AnimatePresence>\n  </AutocompletePortal>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"AutocompleteContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { AutocompletePortal, AutocompleteContent, AutocompleteViewport, AutocompleteEmpty, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  sideOffset?: number\n  class?: string\n  // AutocompletePortal props\n  to?: string | HTMLElement\n  disabled?: boolean\n  defer?: boolean\n  forceMount?: boolean\n  // AutocompleteContent props\n  position?: 'inline' | 'popper'\n  bodyLock?: boolean\n  hideWhenEmpty?: boolean\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  sideFlip?: boolean\n  align?: 'start' | 'center' | 'end'\n  alignOffset?: number\n  alignFlip?: boolean\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | null | Array<Element | null>\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  arrowPadding?: number\n  hideShiftedArrow?: boolean\n  sticky?: 'partial' | 'always'\n  hideWhenDetached?: boolean\n  positionStrategy?: 'fixed' | 'absolute'\n  updatePositionStrategy?: 'always' | 'optimized'\n  disableUpdateOnLayoutShift?: boolean\n  prioritizePosition?: boolean\n  reference?: object | null\n  as?: string\n  asChild?: boolean\n  disableOutsidePointerEvents?: boolean\n  // AutocompleteViewport props\n  nonce?: string\n  viewportAs?: string\n  viewportAsChild?: boolean\n}>(), {\n  sideOffset: 8,\n  class: undefined,\n  to: undefined,\n  disabled: undefined,\n  defer: undefined,\n  forceMount: undefined,\n  position: undefined,\n  bodyLock: undefined,\n  hideWhenEmpty: 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: undefined,\n  disableOutsidePointerEvents: undefined,\n  nonce: undefined,\n  viewportAs: undefined,\n  viewportAsChild: undefined,\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 = useAutocompleteInject()\n// AutocompleteRoot internally provides the ComboboxRoot context\nconst rootContext = 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    // AutocompleteItem 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 label = node.props.label as string | undefined\n      if (label) {\n        ctx.registerItem(value, label)\n      } else {\n        // Extract text from the default slot children of this VNode\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    }\n    // Recurse into children\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  <AutocompletePortal\n    :to=\"props.to\"\n    :disabled=\"props.disabled\"\n    :defer=\"props.defer\"\n    :force-mount=\"props.forceMount\"\n  >\n    <AnimatePresence>\n      <AutocompleteContent\n        v-if=\"rootContext.open.value && (ctx.hasItems.value || (ctx.isFilled.value && !ctx.isLoading.value))\"\n        :position=\"props.position ?? 'popper'\"\n        :side-offset=\"props.sideOffset\"\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=\"['autocomplete__popover', 'relative']\"\n          :data-loading=\"ctx.isLoading.value ? '' : undefined\"\n          :data-truncate-items=\"ctx.truncateItems.value ? undefined : 'false'\"\n          :aria-busy=\"ctx.isLoading.value || undefined\"\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          <div\n            :class=\"[\n              'transition-opacity duration-150',\n              ctx.isLoading.value\n                ? 'pointer-events-none opacity-50 grayscale cursor-not-allowed select-none'\n                : '',\n            ]\"\n            :inert=\"ctx.isLoading.value || undefined\"\n            :aria-disabled=\"ctx.isLoading.value || undefined\"\n            :data-disabled=\"ctx.isLoading.value ? '' : undefined\"\n            data-slot=\"list-wrapper\"\n          >\n            <AutocompleteViewport\n              data-slot=\"list-box\"\n            >\n              <slot />\n              <!-- Empty state: only show when the user has typed a query -->\n              <AutocompleteEmpty\n                v-if=\"ctx.isFilled.value && !ctx.isLoading.value\"\n                class=\"py-3 text-center text-sm text-default-400\"\n                data-slot=\"empty-content\"\n              >\n                <slot name=\"empty\">\n                  No results found\n                </slot>\n              </AutocompleteEmpty>\n            </AutocompleteViewport>\n          </div>\n        </motion.div>\n      </AutocompleteContent>\n    </AnimatePresence>\n  </AutocompletePortal>\n</template>\n"],"mappings":"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"}

package/dist/components/autocomplete/AutocompleteCreateItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteCreateItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteCreateItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AutocompleteItem as RekaAutocompleteItem, injectComboboxRootContext } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Label for the create item. Accepts a static string or a function receiving\n   * the current search term. Defaults to `Create \"${term}\"`.\n   */\n  label?: string | ((term: string) => string)\n  class?: string\n}>(), {\n  label: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n// Reka's combobox context (provided by AutocompleteRoot) — used to drive the\n// open state and input focus directly, since this item's value equals the\n// current search term and Reka's native select path is unreliable for it.\nconst comboboxCtx = injectComboboxRootContext()\n\nconst term = computed(() => ctx.searchTerm.value.trim())\n\nconst isVisible = computed(() => !!term.value && !ctx.hasExactMatch.value)\n\nconst displayLabel = computed(() => {\n  if (typeof props.label === 'function') return props.label(term.value)\n  return props.label ?? `Create \"${term.value}\"`\n})\n\nfunction handleSelect(event: Event) {\n  // Always manage the creation ourselves — this item's value equals the current\n  // search term, so Reka's native select (set-value + close) is unreliable here.\n  event.preventDefault()\n  ctx.onCreateValue(term.value)\n  if (ctx.multiple.value) {\n    // Keep the dropdown open for the next entry and restore input focus.\n    comboboxCtx.inputElement.value?.focus()\n  } else {\n    // Single mode: close the dropdown, like selecting a regular item.\n    comboboxCtx.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <RekaAutocompleteItem\n    v-if=\"isVisible\"\n    :key=\"term\"\n    :value=\"term\"\n    :text-value=\"term\"\n    :class=\"['list-box-item list-box-item--default', props.class]\"\n    data-slot=\"list-box-item\"\n    data-create-item\n    @select=\"handleSelect\"\n  >\n    <slot :term=\"term\">\n      <span\n        class=\"autocomplete-item__text\"\n        data-slot=\"item-text\"\n      >\n        {{ displayLabel }}\n      </span>\n    </slot>\n  </RekaAutocompleteItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AutocompleteCreateItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteCreateItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AutocompleteItem as RekaAutocompleteItem, injectComboboxRootContext } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Label for the create item. Accepts a static string or a function receiving\n   * the current search term. Defaults to `Create \"${term}\"`.\n   */\n  label?: string | ((term: string) => string)\n  class?: string\n  /** The value of this item when selected. Defaults to the current search term. */\n  value?: string\n  /** A string value that represents this item during typeahead navigation. */\n  textValue?: 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  label: undefined,\n  class: undefined,\n  value: undefined,\n  textValue: undefined,\n  disabled: false,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst ctx = useAutocompleteInject()\n// Reka's combobox context (provided by AutocompleteRoot) — used to drive the\n// open state and input focus directly, since this item's value equals the\n// current search term and Reka's native select path is unreliable for it.\nconst comboboxCtx = injectComboboxRootContext()\n\nconst term = computed(() => ctx.searchTerm.value.trim())\n\nconst isVisible = computed(() => !!term.value && !ctx.hasExactMatch.value)\n\nconst displayLabel = computed(() => {\n  if (typeof props.label === 'function') return props.label(term.value)\n  return props.label ?? `Create \"${term.value}\"`\n})\n\nfunction handleSelect(event: Event) {\n  emit('select', event)\n  // Always manage the creation ourselves — this item's value equals the current\n  // search term, so Reka's native select (set-value + close) is unreliable here.\n  event.preventDefault()\n  ctx.onCreateValue(term.value)\n  if (ctx.multiple.value) {\n    // Keep the dropdown open for the next entry and restore input focus.\n    comboboxCtx.inputElement.value?.focus()\n  } else {\n    // Single mode: close the dropdown, like selecting a regular item.\n    comboboxCtx.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <RekaAutocompleteItem\n    v-if=\"isVisible\"\n    :key=\"term\"\n    :value=\"props.value ?? term\"\n    :text-value=\"props.textValue ?? term\"\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"['list-box-item list-box-item--default', props.class]\"\n    data-slot=\"list-box-item\"\n    data-create-item\n    @select=\"handleSelect\"\n  >\n    <slot :term=\"term\">\n      <span\n        class=\"autocomplete-item__text\"\n        data-slot=\"item-text\"\n      >\n        {{ displayLabel }}\n      </span>\n    </slot>\n  </RekaAutocompleteItem>\n</template>\n"],"mappings":""}

package/dist/components/autocomplete/AutocompleteCreateItem.vue_vue_type_script_setup_true_lang.js

@@ -13,10 +13,23 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 			type: [String, Function],
 			default: void 0
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		value: { default: void 0 },
+		textValue: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		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 = useAutocompleteInject();
 		const comboboxCtx = injectComboboxRootContext();
 		const term = computed(() => ctx.searchTerm.value.trim());
@@ -26,6 +39,7 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 			return props.label ?? `Create "${term.value}"`;
 		});
 		function handleSelect(event) {
+			emit("select", event);
 			event.preventDefault();
 			ctx.onCreateValue(term.value);
 			if (ctx.multiple.value) comboboxCtx.inputElement.value?.focus();
@@ -34,8 +48,11 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 		return (_ctx, _cache) => {
 			return isVisible.value ? (openBlock(), createBlock(unref(AutocompleteItem), {
 				key: term.value,
-				value: term.value,
-				"text-value": term.value,
+				value: props.value ?? term.value,
+				"text-value": props.textValue ?? term.value,
+				disabled: props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(["list-box-item list-box-item--default", props.class]),
 				"data-slot": "list-box-item",
 				"data-create-item": "",
@@ -46,6 +63,9 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 			}, 8, [
 				"value",
 				"text-value",
+				"disabled",
+				"as",
+				"as-child",
 				"class"
 			])) : createCommentVNode("", true);
 		};

package/dist/components/autocomplete/AutocompleteCreateItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteCreateItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteCreateItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AutocompleteItem as RekaAutocompleteItem, injectComboboxRootContext } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Label for the create item. Accepts a static string or a function receiving\n   * the current search term. Defaults to `Create \"${term}\"`.\n   */\n  label?: string | ((term: string) => string)\n  class?: string\n}>(), {\n  label: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n// Reka's combobox context (provided by AutocompleteRoot) — used to drive the\n// open state and input focus directly, since this item's value equals the\n// current search term and Reka's native select path is unreliable for it.\nconst comboboxCtx = injectComboboxRootContext()\n\nconst term = computed(() => ctx.searchTerm.value.trim())\n\nconst isVisible = computed(() => !!term.value && !ctx.hasExactMatch.value)\n\nconst displayLabel = computed(() => {\n  if (typeof props.label === 'function') return props.label(term.value)\n  return props.label ?? `Create \"${term.value}\"`\n})\n\nfunction handleSelect(event: Event) {\n  // Always manage the creation ourselves — this item's value equals the current\n  // search term, so Reka's native select (set-value + close) is unreliable here.\n  event.preventDefault()\n  ctx.onCreateValue(term.value)\n  if (ctx.multiple.value) {\n    // Keep the dropdown open for the next entry and restore input focus.\n    comboboxCtx.inputElement.value?.focus()\n  } else {\n    // Single mode: close the dropdown, like selecting a regular item.\n    comboboxCtx.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <RekaAutocompleteItem\n    v-if=\"isVisible\"\n    :key=\"term\"\n    :value=\"term\"\n    :text-value=\"term\"\n    :class=\"['list-box-item list-box-item--default', props.class]\"\n    data-slot=\"list-box-item\"\n    data-create-item\n    @select=\"handleSelect\"\n  >\n    <slot :term=\"term\">\n      <span\n        class=\"autocomplete-item__text\"\n        data-slot=\"item-text\"\n      >\n        {{ displayLabel }}\n      </span>\n    </slot>\n  </RekaAutocompleteItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAYd,MAAM,MAAM,uBAAsB;EAIlC,MAAM,cAAc,2BAA0B;EAE9C,MAAM,OAAO,eAAe,IAAI,WAAW,MAAM,MAAM,CAAA;EAEvD,MAAM,YAAY,eAAe,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,cAAc,MAAK;EAEzE,MAAM,eAAe,eAAe;AAClC,OAAI,OAAO,MAAM,UAAU,WAAY,QAAO,MAAM,MAAM,KAAK,MAAK;AACpE,UAAO,MAAM,SAAS,WAAW,KAAK,MAAM;IAC7C;EAED,SAAS,aAAa,OAAc;AAGlC,SAAM,gBAAe;AACrB,OAAI,cAAc,KAAK,MAAK;AAC5B,OAAI,IAAI,SAAS,MAEf,aAAY,aAAa,OAAO,OAAM;OAGtC,aAAY,aAAa,MAAK;;;UAOxB,UAAA,SAAA,WAAA,EADR,YAkBuB,MAAA,iBAAA,EAAA;IAhBpB,KAAK,KAAA;IACL,OAAO,KAAA;IACP,cAAY,KAAA;IACZ,OAAK,eAAA,CAAA,wCAA2C,MAAM,MAAK,CAAA;IAC5D,aAAU;IACV,oBAAA;IACC,UAAQ;;2BASF,CAPP,WAOO,KAAA,QAAA,WAAA,EAPA,MAAM,KAAA,OAAI,QAOV,CANL,mBAKO,QALP,YAKO,gBADF,aAAA,MAAY,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"AutocompleteCreateItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteCreateItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AutocompleteItem as RekaAutocompleteItem, injectComboboxRootContext } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * Label for the create item. Accepts a static string or a function receiving\n   * the current search term. Defaults to `Create \"${term}\"`.\n   */\n  label?: string | ((term: string) => string)\n  class?: string\n  /** The value of this item when selected. Defaults to the current search term. */\n  value?: string\n  /** A string value that represents this item during typeahead navigation. */\n  textValue?: 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  label: undefined,\n  class: undefined,\n  value: undefined,\n  textValue: undefined,\n  disabled: false,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst ctx = useAutocompleteInject()\n// Reka's combobox context (provided by AutocompleteRoot) — used to drive the\n// open state and input focus directly, since this item's value equals the\n// current search term and Reka's native select path is unreliable for it.\nconst comboboxCtx = injectComboboxRootContext()\n\nconst term = computed(() => ctx.searchTerm.value.trim())\n\nconst isVisible = computed(() => !!term.value && !ctx.hasExactMatch.value)\n\nconst displayLabel = computed(() => {\n  if (typeof props.label === 'function') return props.label(term.value)\n  return props.label ?? `Create \"${term.value}\"`\n})\n\nfunction handleSelect(event: Event) {\n  emit('select', event)\n  // Always manage the creation ourselves — this item's value equals the current\n  // search term, so Reka's native select (set-value + close) is unreliable here.\n  event.preventDefault()\n  ctx.onCreateValue(term.value)\n  if (ctx.multiple.value) {\n    // Keep the dropdown open for the next entry and restore input focus.\n    comboboxCtx.inputElement.value?.focus()\n  } else {\n    // Single mode: close the dropdown, like selecting a regular item.\n    comboboxCtx.onOpenChange(false)\n  }\n}\n</script>\n\n<template>\n  <RekaAutocompleteItem\n    v-if=\"isVisible\"\n    :key=\"term\"\n    :value=\"props.value ?? term\"\n    :text-value=\"props.textValue ?? term\"\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"['list-box-item list-box-item--default', props.class]\"\n    data-slot=\"list-box-item\"\n    data-create-item\n    @select=\"handleSelect\"\n  >\n    <slot :term=\"term\">\n      <span\n        class=\"autocomplete-item__text\"\n        data-slot=\"item-text\"\n      >\n        {{ displayLabel }}\n      </span>\n    </slot>\n  </RekaAutocompleteItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAIb,MAAM,MAAM,uBAAsB;EAIlC,MAAM,cAAc,2BAA0B;EAE9C,MAAM,OAAO,eAAe,IAAI,WAAW,MAAM,MAAM,CAAA;EAEvD,MAAM,YAAY,eAAe,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,cAAc,MAAK;EAEzE,MAAM,eAAe,eAAe;AAClC,OAAI,OAAO,MAAM,UAAU,WAAY,QAAO,MAAM,MAAM,KAAK,MAAK;AACpE,UAAO,MAAM,SAAS,WAAW,KAAK,MAAM;IAC7C;EAED,SAAS,aAAa,OAAc;AAClC,QAAK,UAAU,MAAK;AAGpB,SAAM,gBAAe;AACrB,OAAI,cAAc,KAAK,MAAK;AAC5B,OAAI,IAAI,SAAS,MAEf,aAAY,aAAa,OAAO,OAAM;OAGtC,aAAY,aAAa,MAAK;;;UAOxB,UAAA,SAAA,WAAA,EADR,YAqBuB,MAAA,iBAAA,EAAA;IAnBpB,KAAK,KAAA;IACL,OAAO,MAAM,SAAS,KAAA;IACtB,cAAY,MAAM,aAAa,KAAA;IAC/B,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAA,CAAA,wCAA2C,MAAM,MAAK,CAAA;IAC5D,aAAU;IACV,oBAAA;IACC,UAAQ;;2BASF,CAPP,WAOO,KAAA,QAAA,WAAA,EAPA,MAAM,KAAA,OAAI,QAOV,CANL,mBAKO,QALP,YAKO,gBADF,aAAA,MAAY,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/autocomplete/AutocompleteInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Chip from '../chip/Chip.vue'\nimport Spinner from '../spinner/Spinner.vue'\nimport AutocompleteOverflowChips from './AutocompleteOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// In multiple mode, hide placeholder once chips are present\nconst effectivePlaceholder = computed(() =>\n  ctx.multiple.value && ctx.selectedValues.value.length > 0 ? undefined : props.placeholder,\n)\n\nconst getLabel = (v: string) => ctx.selectedLabels.value.find(l => l.value === v)?.label ?? v\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :data-multiple-overflow=\"ctx.multiple.value ? ctx.multipleOverflow.value : undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.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    <!-- Multiple/collapse: overflow chip area with truncation -->\n    <AutocompleteOverflowChips\n      v-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\"\n      :values=\"ctx.selectedValues.value\"\n      :get-label=\"getLabel\"\n      :remove-value=\"ctx.removeValue\"\n    />\n    <!-- Multiple/wrap: chips that wrap onto new lines -->\n    <template v-else-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'wrap'\">\n      <Chip\n        v-for=\"item in ctx.selectedLabels.value\"\n        :key=\"item.value\"\n        size=\"sm\"\n        is-closable\n        :close-aria-label=\"`Remove ${item.label}`\"\n        data-slot=\"selected-chip\"\n        @close.stop=\"ctx.removeValue(item.value)\"\n      >\n        {{ item.label }}\n      </Chip>\n    </template>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :placeholder=\"effectivePlaceholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      :style=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\n        ? { flex: '0 0 auto', minWidth: '80px', width: 'auto' }\n        : undefined\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here.\n         In multiple mode also clears selectedValues via ctx.clearAll(). -->\n    <AutocompleteCancel\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n      @click=\"ctx.multiple.value ? ctx.clearAll() : undefined\"\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          data-slot=\"autocomplete-clear-button-icon\"\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    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\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          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AutocompleteInput.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Chip from '../chip/Chip.vue'\nimport Spinner from '../spinner/Spinner.vue'\nimport AutocompleteOverflowChips from './AutocompleteOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: 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 AutocompleteInput as a different element. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Render the AutocompleteTrigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Disable the trigger button. Falls back to context isDisabled. */\n  triggerDisabled?: boolean\n  /** Render the AutocompleteCancel as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n  /** Custom reference element for the AutocompleteAnchor. */\n  anchorReference?: object | null\n  /** Render the AutocompleteAnchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  triggerDisabled: undefined,\n  cancelAs: undefined,\n  cancelAsChild: false,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// In multiple mode, hide placeholder once chips are present\nconst effectivePlaceholder = computed(() =>\n  ctx.multiple.value && ctx.selectedValues.value.length > 0 ? undefined : props.placeholder,\n)\n\nconst getLabel = (v: string) => ctx.selectedLabels.value.find(l => l.value === v)?.label ?? v\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :data-multiple-overflow=\"ctx.multiple.value ? ctx.multipleOverflow.value : undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.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    <!-- Multiple/collapse: overflow chip area with truncation -->\n    <AutocompleteOverflowChips\n      v-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\"\n      :values=\"ctx.selectedValues.value\"\n      :get-label=\"getLabel\"\n      :remove-value=\"ctx.removeValue\"\n    />\n    <!-- Multiple/wrap: chips that wrap onto new lines -->\n    <template v-else-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'wrap'\">\n      <Chip\n        v-for=\"item in ctx.selectedLabels.value\"\n        :key=\"item.value\"\n        size=\"sm\"\n        is-closable\n        :close-aria-label=\"`Remove ${item.label}`\"\n        data-slot=\"selected-chip\"\n        @close.stop=\"ctx.removeValue(item.value)\"\n      >\n        {{ item.label }}\n      </Chip>\n    </template>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :placeholder=\"effectivePlaceholder\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      :style=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\n        ? { flex: '0 0 auto', minWidth: '80px', width: 'auto' }\n        : undefined\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here.\n         In multiple mode also clears selectedValues via ctx.clearAll(). -->\n    <AutocompleteCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n      @click=\"ctx.multiple.value ? ctx.clearAll() : undefined\"\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          data-slot=\"autocomplete-clear-button-icon\"\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    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :disabled=\"props.triggerDisabled\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\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          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":""}

package/dist/components/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.js

@@ -15,10 +15,46 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	__name: "AutocompleteInput",
 	props: {
 		placeholder: { default: void 0 },
-		class: { default: void 0 }
+		class: { 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
+		},
+		triggerAs: { default: void 0 },
+		triggerAsChild: {
+			type: Boolean,
+			default: false
+		},
+		triggerDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		cancelAs: { default: void 0 },
+		cancelAsChild: {
+			type: Boolean,
+			default: false
+		},
+		anchorReference: { default: void 0 },
+		anchorAs: { default: void 0 },
+		anchorAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useAutocompleteInject();
 		const { focused: isFocused } = useFocusWithin(useTemplateRef("anchor"));
 		const showInsideLabel = computed(() => ctx.hasLabel.value && ctx.labelPlacement.value === "inside");
@@ -27,6 +63,9 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(AutocompleteAnchor), {
 				ref: "anchor",
+				reference: props.anchorReference,
+				as: props.anchorAs,
+				"as-child": props.anchorAsChild,
 				class: normalizeClass(unref(ctx).slots.value.trigger()),
 				"data-filled": unref(ctx).hasLabel.value ? unref(ctx).isFilled.value || void 0 : void 0,
 				"data-focused": unref(isFocused) || void 0,
@@ -67,8 +106,12 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					}), 128)) : createCommentVNode("", true),
 					createVNode(unref(AutocompleteInput), {
 						id: unref(ctx).inputId.value,
+						"model-value": props.modelValue,
+						"auto-focus": props.autoFocus,
 						placeholder: effectivePlaceholder.value,
-						disabled: unref(ctx).isDisabled.value,
+						disabled: props.disabled ?? unref(ctx).isDisabled.value,
+						as: props.as,
+						"as-child": props.asChild,
 						readonly: unref(ctx).isReadonly.value,
 						required: unref(ctx).isRequired.value,
 						"aria-invalid": unref(ctx).isInvalid.value || void 0,
@@ -80,11 +123,16 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							width: "auto"
 						} : void 0),
 						"data-slot": "input",
-						autocomplete: "off"
+						autocomplete: "off",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
 					}, null, 8, [
 						"id",
+						"model-value",
+						"auto-focus",
 						"placeholder",
 						"disabled",
+						"as",
+						"as-child",
 						"readonly",
 						"required",
 						"aria-invalid",
@@ -93,13 +141,15 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"style"
 					]),
 					createVNode(unref(AutocompleteCancel), {
+						as: props.cancelAs,
+						"as-child": props.cancelAsChild,
 						class: normalizeClass(unref(ctx).slots.value.clearButton()),
 						"data-empty": !unref(ctx).isFilled.value || unref(ctx).isReadonly.value || unref(ctx).isDisabled.value ? "true" : void 0,
 						"data-slot": "clear-button",
 						"aria-label": "Clear",
-						onClick: _cache[0] || (_cache[0] = ($event) => unref(ctx).multiple.value ? unref(ctx).clearAll() : void 0)
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(ctx).multiple.value ? unref(ctx).clearAll() : void 0)
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "clearIcon", {}, () => [_cache[2] || (_cache[2] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "10",
 							height: "10",
@@ -123,7 +173,12 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							y2: "18"
 						})], -1))])]),
 						_: 3
-					}, 8, ["class", "data-empty"]),
+					}, 8, [
+						"as",
+						"as-child",
+						"class",
+						"data-empty"
+					]),
 					unref(ctx).isLoading.value ? (openBlock(), createElementBlock("span", {
 						key: 4,
 						class: normalizeClass(unref(ctx).slots.value.indicator()),
@@ -133,11 +188,14 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"aria-label": "Loading suggestions"
 					}, [createVNode(Spinner_default, { size: "sm" })], 2)) : (openBlock(), createBlock(unref(AutocompleteTrigger), {
 						key: 5,
+						as: props.triggerAs,
+						"as-child": props.triggerAsChild,
+						disabled: props.triggerDisabled,
 						class: normalizeClass(unref(ctx).slots.value.indicator()),
 						"data-slot": "autocomplete-default-indicator",
 						"aria-label": "Toggle suggestions"
 					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[2] || (_cache[2] = createElementVNode("svg", {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "triggerIcon", {}, () => [_cache[3] || (_cache[3] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -150,10 +208,18 @@ var AutocompleteInput_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, [
+						"as",
+						"as-child",
+						"disabled",
+						"class"
+					]))
 				]),
 				_: 3
 			}, 8, [
+				"reference",
+				"as",
+				"as-child",
 				"class",
 				"data-filled",
 				"data-focused",

package/dist/components/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Chip from '../chip/Chip.vue'\nimport Spinner from '../spinner/Spinner.vue'\nimport AutocompleteOverflowChips from './AutocompleteOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n})\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// In multiple mode, hide placeholder once chips are present\nconst effectivePlaceholder = computed(() =>\n  ctx.multiple.value && ctx.selectedValues.value.length > 0 ? undefined : props.placeholder,\n)\n\nconst getLabel = (v: string) => ctx.selectedLabels.value.find(l => l.value === v)?.label ?? v\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :data-multiple-overflow=\"ctx.multiple.value ? ctx.multipleOverflow.value : undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.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    <!-- Multiple/collapse: overflow chip area with truncation -->\n    <AutocompleteOverflowChips\n      v-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\"\n      :values=\"ctx.selectedValues.value\"\n      :get-label=\"getLabel\"\n      :remove-value=\"ctx.removeValue\"\n    />\n    <!-- Multiple/wrap: chips that wrap onto new lines -->\n    <template v-else-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'wrap'\">\n      <Chip\n        v-for=\"item in ctx.selectedLabels.value\"\n        :key=\"item.value\"\n        size=\"sm\"\n        is-closable\n        :close-aria-label=\"`Remove ${item.label}`\"\n        data-slot=\"selected-chip\"\n        @close.stop=\"ctx.removeValue(item.value)\"\n      >\n        {{ item.label }}\n      </Chip>\n    </template>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :placeholder=\"effectivePlaceholder\"\n      :disabled=\"ctx.isDisabled.value\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      :style=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\n        ? { flex: '0 0 auto', minWidth: '80px', width: 'auto' }\n        : undefined\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here.\n         In multiple mode also clears selectedValues via ctx.clearAll(). -->\n    <AutocompleteCancel\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n      @click=\"ctx.multiple.value ? ctx.clearAll() : undefined\"\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          data-slot=\"autocomplete-clear-button-icon\"\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    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\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          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"AutocompleteInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/autocomplete/AutocompleteInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue'\nimport { useFocusWithin } from '@vueuse/core'\nimport { AutocompleteInput, AutocompleteTrigger, AutocompleteCancel, AutocompleteAnchor } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport Chip from '../chip/Chip.vue'\nimport Spinner from '../spinner/Spinner.vue'\nimport AutocompleteOverflowChips from './AutocompleteOverflowChips.vue'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: 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 AutocompleteInput as a different element. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Render the AutocompleteTrigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Disable the trigger button. Falls back to context isDisabled. */\n  triggerDisabled?: boolean\n  /** Render the AutocompleteCancel as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n  /** Custom reference element for the AutocompleteAnchor. */\n  anchorReference?: object | null\n  /** Render the AutocompleteAnchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  triggerDisabled: undefined,\n  cancelAs: undefined,\n  cancelAsChild: false,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useAutocompleteInject()\n\n// Track focused state via useFocusWithin (NOT manual @focus/@blur listeners) — the\n// inner Reka <AutocompleteInput> wraps the native <input>; useFocusWithin observes\n// the actual DOM subtree of the anchor, so isFocused flips reliably regardless of\n// how Reka forwards refs/attrs.\nconst anchorRef = useTemplateRef<HTMLElement>('anchor')\nconst { focused: isFocused } = useFocusWithin(anchorRef)\n\n// Render the inside-label only when (a) a label is set and (b) labelPlacement is 'inside'\nconst showInsideLabel = computed(\n  () => ctx.hasLabel.value && ctx.labelPlacement.value === 'inside',\n)\n\n// In multiple mode, hide placeholder once chips are present\nconst effectivePlaceholder = computed(() =>\n  ctx.multiple.value && ctx.selectedValues.value.length > 0 ? undefined : props.placeholder,\n)\n\nconst getLabel = (v: string) => ctx.selectedLabels.value.find(l => l.value === v)?.label ?? v\n</script>\n\n<template>\n  <AutocompleteAnchor\n    ref=\"anchor\"\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.trigger()\"\n    :data-filled=\"ctx.hasLabel.value ? (ctx.isFilled.value || undefined) : undefined\"\n    :data-focused=\"isFocused || undefined\"\n    :data-invalid=\"ctx.isInvalid.value || undefined\"\n    :data-disabled=\"ctx.isDisabled.value || undefined\"\n    :data-readonly=\"ctx.isReadonly.value || undefined\"\n    :data-multiple-overflow=\"ctx.multiple.value ? ctx.multipleOverflow.value : undefined\"\n    data-slot=\"trigger\"\n  >\n    <label\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.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    <!-- Multiple/collapse: overflow chip area with truncation -->\n    <AutocompleteOverflowChips\n      v-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\"\n      :values=\"ctx.selectedValues.value\"\n      :get-label=\"getLabel\"\n      :remove-value=\"ctx.removeValue\"\n    />\n    <!-- Multiple/wrap: chips that wrap onto new lines -->\n    <template v-else-if=\"ctx.multiple.value && ctx.multipleOverflow.value === 'wrap'\">\n      <Chip\n        v-for=\"item in ctx.selectedLabels.value\"\n        :key=\"item.value\"\n        size=\"sm\"\n        is-closable\n        :close-aria-label=\"`Remove ${item.label}`\"\n        data-slot=\"selected-chip\"\n        @close.stop=\"ctx.removeValue(item.value)\"\n      >\n        {{ item.label }}\n      </Chip>\n    </template>\n    <AutocompleteInput\n      :id=\"ctx.inputId.value\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :placeholder=\"effectivePlaceholder\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :readonly=\"ctx.isReadonly.value\"\n      :required=\"ctx.isRequired.value\"\n      :aria-invalid=\"ctx.isInvalid.value || undefined\"\n      :aria-describedby=\"ctx.ariaDescribedBy.value\"\n      :class=\"ctx.slots.value.input()\"\n      :style=\"ctx.multiple.value && ctx.multipleOverflow.value === 'collapse' && ctx.selectedValues.value.length > 0\n        ? { flex: '0 0 auto', minWidth: '80px', width: 'auto' }\n        : undefined\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: only shown when filled and not in a readonly/disabled state.\n         Reka's AutocompleteCancel does not set data-empty itself, so we drive it here.\n         In multiple mode also clears selectedValues via ctx.clearAll(). -->\n    <AutocompleteCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      :class=\"ctx.slots.value.clearButton()\"\n      :data-empty=\"(!ctx.isFilled.value || ctx.isReadonly.value || ctx.isDisabled.value) ? 'true' : undefined\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n      @click=\"ctx.multiple.value ? ctx.clearAll() : undefined\"\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          data-slot=\"autocomplete-clear-button-icon\"\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    </AutocompleteCancel>\n    <!-- Inline loading spinner: replaces the dropdown indicator while loadItems is pending -->\n    <span\n      v-if=\"ctx.isLoading.value\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-loading-indicator\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label=\"Loading suggestions\"\n    >\n      <Spinner size=\"sm\" />\n    </span>\n    <!-- Dropdown trigger indicator (hidden while loading) -->\n    <AutocompleteTrigger\n      v-else\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :disabled=\"props.triggerDisabled\"\n      :class=\"ctx.slots.value.indicator()\"\n      data-slot=\"autocomplete-default-indicator\"\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          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </AutocompleteTrigger>\n  </AutocompleteAnchor>\n</template>\n"],"mappings":"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"}

package/dist/components/autocomplete/AutocompleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  isDisabled: false,\n  class: undefined,\n})\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// In multiple mode, track whether this item is in the selected array\nconst isChecked = computed(() => ctx.multiple.value && ctx.isSelected(props.value))\n\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n\nfunction handleSelect(event: Event) {\n  if (ctx.multiple.value) {\n    // Prevent Reka from overwriting the combobox value with the selected item's text.\n    // Without this, Reka's internal handler fires after ours and sets searchTerm = displayText.\n    event.preventDefault()\n    ctx.onMultipleSelect(props.value)\n  }\n}\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"displayText\"\n    :disabled=\"props.isDisabled\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <!-- Single mode: Reka's ComboboxItemIndicator handles the checkmark natively -->\n    <ComboboxItemIndicator\n      v-if=\"!ctx.multiple.value\"\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    </ComboboxItemIndicator>\n    <!-- Multiple mode: check against our selectedValues array instead -->\n    <span\n      v-else-if=\"isChecked\"\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    </span>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AutocompleteItem.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type Slots, type VNode } from 'vue'\nimport { AutocompleteItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useAutocompleteInject } from './Autocomplete.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  isDisabled?: boolean\n  class?: string\n  /** A string value for typeahead matching. Defaults to display text. */\n  textValue?: string\n  /** Whether the item is disabled. Alias for isDisabled. */\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  /** Render the ComboboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  isDisabled: false,\n  class: undefined,\n  textValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  indicatorAs: undefined,\n  indicatorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\n\nfunction extractText(nodes: VNode[]): string {\n  return nodes.map(n => {\n    if (typeof n.children === 'string') return n.children\n    if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n    return ''\n  }).join('')\n}\n\nconst displayText = computed((): string => {\n  const vnodes: VNode[] | undefined = (slots.default as (() => VNode[]) | undefined)?.()\n  if (!vnodes) return props.value\n  return extractText(vnodes).trim() || props.value\n})\n\n// In multiple mode, track whether this item is in the selected array\nconst isChecked = computed(() => ctx.multiple.value && ctx.isSelected(props.value))\n\nonMounted(() => {\n  ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n  ctx.unregisterItem(props.value)\n})\n\nfunction handleSelect(event: Event) {\n  emit('select', event)\n  if (ctx.multiple.value) {\n    // Prevent Reka from overwriting the combobox value with the selected item's text.\n    // Without this, Reka's internal handler fires after ours and sets searchTerm = displayText.\n    event.preventDefault()\n    ctx.onMultipleSelect(props.value)\n  }\n}\n</script>\n\n<template>\n  <AutocompleteItem\n    :value=\"displayText\"\n    :text-value=\"props.textValue ?? displayText\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    class=\"list-box-item list-box-item--default\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      class=\"autocomplete-item__text\"\n      data-slot=\"item-text\"\n    ><slot /></span>\n    <!-- Single mode: Reka's ComboboxItemIndicator handles the checkmark natively -->\n    <ComboboxItemIndicator\n      v-if=\"!ctx.multiple.value\"\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\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    </ComboboxItemIndicator>\n    <!-- Multiple mode: check against our selectedValues array instead -->\n    <span\n      v-else-if=\"isChecked\"\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    </span>\n    <slot name=\"endContent\" />\n  </AutocompleteItem>\n</template>\n"],"mappings":""}