@auronui/vue 1.4.1 → 1.4.2

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

@@ -1,12 +1,10 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { useAutocompleteInject } from "./Autocomplete.context.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { autocompleteVariants, listboxItemVariants } from "@auronui/styles";
 import { AutocompleteItem, injectComboboxRootContext } from "reka-ui";
 //#region src/components/autocomplete/AutocompleteCreateItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	class: "autocomplete-item__text",
-	"data-slot": "item-text"
-};
 var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AutocompleteCreateItem",
 	props: {
@@ -29,7 +27,8 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -38,6 +37,8 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 		const isDisabled = useDeprecatedBooleanProp("AutocompleteCreateItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const ctx = useAutocompleteInject();
 		const comboboxCtx = injectComboboxRootContext();
+		const itemSlots = listboxItemVariants();
+		const itemTextClass = computed(() => autocompleteVariants().itemText());
 		const term = computed(() => ctx.searchTerm.value.trim());
 		const isVisible = computed(() => !!term.value && !ctx.hasExactMatch.value);
 		const displayLabel = computed(() => {
@@ -59,12 +60,15 @@ var AutocompleteCreateItem_vue_vue_type_script_setup_true_lang_default = /* @__P
 				disabled: unref(isDisabled),
 				as: props.as,
 				"as-child": props.asChild,
-				class: normalizeClass(["list-box-item list-box-item--default", props.class]),
+				class: normalizeClass(unref(composeClassName)(unref(itemSlots).item(), props.classNames?.item, props.class)),
 				"data-slot": "list-box-item",
 				"data-create-item": "",
 				onSelect: handleSelect
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { term: term.value }, () => [createElementVNode("span", _hoisted_1, toDisplayString(displayLabel.value), 1)])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { term: term.value }, () => [createElementVNode("span", {
+					class: normalizeClass(unref(composeClassName)(itemTextClass.value, props.classNames?.text)),
+					"data-slot": "item-text"
+				}, toDisplayString(displayLabel.value), 3)])]),
 				_: 3
 			}, 8, [
 				"value",

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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** Whether this item is disabled. @deprecated Use isDisabled instead. */\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  isDisabled: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteCreateItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\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=\"isDisabled\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EA6Bd,MAAM,OAAO;EAIb,MAAM,aAAa,yBACjB,0BAA0B,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC1F;EAEA,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,MAAA,WAAU;IACpB,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"}
+{"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 { listboxItemVariants, autocompleteVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** Whether this item is disabled. @deprecated Use isDisabled instead. */\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  /** Per-slot class overrides */\n  classNames?: Partial<{\n    item: ClassValue\n    text: ClassValue\n  }>\n}>(), {\n  label: undefined,\n  class: undefined,\n  value: undefined,\n  textValue: undefined,\n  isDisabled: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteCreateItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\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 itemSlots = listboxItemVariants()\nconst itemTextClass = computed(() => autocompleteVariants().itemText())\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=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(itemSlots.item(), props.classNames?.item, props.class)\"\n    data-slot=\"list-box-item\"\n    data-create-item\n    @select=\"handleSelect\"\n  >\n    <slot :term=\"term\">\n      <span\n        :class=\"composeClassName(itemTextClass, props.classNames?.text)\"\n        data-slot=\"item-text\"\n      >\n        {{ displayLabel }}\n      </span>\n    </slot>\n  </RekaAutocompleteItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAkCd,MAAM,OAAO;EAIb,MAAM,aAAa,yBACjB,0BAA0B,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC1F;EAEA,MAAM,MAAM,uBAAsB;EAIlC,MAAM,cAAc,2BAA0B;EAE9C,MAAM,YAAY,qBAAoB;EACtC,MAAM,gBAAgB,eAAe,sBAAsB,CAAC,UAAU,CAAA;EAEtE,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,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,UAAS,CAAC,MAAI,EAAI,MAAM,YAAY,MAAM,MAAM,MAAK,CAAA;IAC9E,aAAU;IACV,oBAAA;IACC,UAAQ;;2BASF,CAPP,WAOO,KAAA,QAAA,WAAA,EAPA,MAAM,KAAA,OAAI,QAOV,CANL,mBAKO,QAAA;KAJJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,cAAA,OAAe,MAAM,YAAY,KAAI,CAAA;KAC9D,aAAU;uBAEP,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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport FieldLabel from '../_shared/FieldLabel.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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\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  isDisabled: undefined,\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// Resolve own isDisabled/disabled prop pair, falling back to the parent Autocomplete's\n// resolved isDisabled context value (reactively, via a fallback getter) only when neither\n// is set on this input directly.\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteInput', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n  () => ctx.isDisabled.value,\n)\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    <FieldLabel\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :label=\"ctx.label.value\"\n      :is-required=\"ctx.isRequired.value\"\n      :class=\"ctx.slots.value.label()\"\n    />\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=\"isDisabled\"\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":""}
+{"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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\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  /** Per-slot class overrides */\n  classNames?: Partial<{\n    trigger: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    input: ClassValue\n    clearButton: ClassValue\n    indicator: ClassValue\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  isDisabled: undefined,\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// Resolve own isDisabled/disabled prop pair, falling back to the parent Autocomplete's\n// resolved isDisabled context value (reactively, via a fallback getter) only when neither\n// is set on this input directly.\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteInput', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n  () => ctx.isDisabled.value,\n)\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=\"composeClassName(ctx.slots.value.trigger(), props.classNames?.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    <FieldLabel\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :label=\"ctx.label.value\"\n      :is-required=\"ctx.isRequired.value\"\n      :class=\"composeClassName(ctx.slots.value.label(), props.classNames?.label)\"\n    />\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(ctx.slots.value.startContent(), props.classNames?.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      :class-names=\"{ chip: props.classNames?.chip }\"\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        :class-names=\"props.classNames?.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=\"isDisabled\"\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=\"composeClassName(ctx.slots.value.input(), props.classNames?.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=\"composeClassName(ctx.slots.value.clearButton(), props.classNames?.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=\"composeClassName(ctx.slots.value.indicator(), props.classNames?.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=\"composeClassName(ctx.slots.value.indicator(), props.classNames?.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

@@ -1,3 +1,4 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import Spinner_default from "../spinner/Spinner.js";
 import Chip_default from "../chip/Chip.js";
 import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
@@ -50,7 +51,8 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		anchorAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -68,7 +70,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				reference: props.anchorReference,
 				as: props.anchorAs,
 				"as-child": props.anchorAsChild,
-				class: normalizeClass(unref(ctx).slots.value.trigger()),
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.trigger(), props.classNames?.trigger)),
 				"data-filled": unref(ctx).hasLabel.value ? unref(ctx).isFilled.value || void 0 : void 0,
 				"data-focused": unref(isFocused) || void 0,
 				"data-invalid": unref(ctx).isInvalid.value || void 0,
@@ -83,7 +85,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						for: unref(ctx).inputId.value,
 						label: unref(ctx).label.value,
 						"is-required": unref(ctx).isRequired.value,
-						class: normalizeClass(unref(ctx).slots.value.label())
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.label(), props.classNames?.label))
 					}, null, 8, [
 						"for",
 						"label",
@@ -92,26 +94,36 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					])) : createCommentVNode("", true),
 					_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
 						key: 1,
-						class: normalizeClass(unref(ctx).slots.value.startContent()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
 					unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "collapse" && unref(ctx).selectedValues.value.length > 0 ? (openBlock(), createBlock(AutocompleteOverflowChips_default, {
 						key: 2,
 						values: unref(ctx).selectedValues.value,
 						"get-label": getLabel,
-						"remove-value": unref(ctx).removeValue
-					}, null, 8, ["values", "remove-value"])) : unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "wrap" ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(unref(ctx).selectedLabels.value, (item) => {
+						"remove-value": unref(ctx).removeValue,
+						"class-names": { chip: props.classNames?.chip }
+					}, null, 8, [
+						"values",
+						"remove-value",
+						"class-names"
+					])) : unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "wrap" ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(unref(ctx).selectedLabels.value, (item) => {
 						return openBlock(), createBlock(Chip_default, {
 							key: item.value,
 							size: "sm",
 							"is-closable": "",
 							"close-aria-label": `Remove ${item.label}`,
 							"data-slot": "selected-chip",
+							"class-names": props.classNames?.chip,
 							onClose: withModifiers(($event) => unref(ctx).removeValue(item.value), ["stop"])
 						}, {
 							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
 							_: 2
-						}, 1032, ["close-aria-label", "onClose"]);
+						}, 1032, [
+							"close-aria-label",
+							"class-names",
+							"onClose"
+						]);
 					}), 128)) : createCommentVNode("", true),
 					createVNode(unref(AutocompleteInput), {
 						id: unref(ctx).inputId.value,
@@ -125,7 +137,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						required: unref(ctx).isRequired.value,
 						"aria-invalid": unref(ctx).isInvalid.value || void 0,
 						"aria-describedby": unref(ctx).ariaDescribedBy.value,
-						class: normalizeClass(unref(ctx).slots.value.input()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.input(), props.classNames?.input)),
 						style: normalizeStyle(unref(ctx).multiple.value && unref(ctx).multipleOverflow.value === "collapse" && unref(ctx).selectedValues.value.length > 0 ? {
 							flex: "0 0 auto",
 							minWidth: "80px",
@@ -152,7 +164,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					createVNode(unref(AutocompleteCancel), {
 						as: props.cancelAs,
 						"as-child": props.cancelAsChild,
-						class: normalizeClass(unref(ctx).slots.value.clearButton()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.clearButton(), props.classNames?.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",
@@ -190,7 +202,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					]),
 					unref(ctx).isLoading.value ? (openBlock(), createElementBlock("span", {
 						key: 4,
-						class: normalizeClass(unref(ctx).slots.value.indicator()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "autocomplete-loading-indicator",
 						role: "status",
 						"aria-live": "polite",
@@ -200,7 +212,7 @@ var AutocompleteInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						as: props.triggerAs,
 						"as-child": props.triggerAsChild,
 						disabled: props.triggerDisabled,
-						class: normalizeClass(unref(ctx).slots.value.indicator()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "autocomplete-default-indicator",
 						"aria-label": "Toggle suggestions"
 					}, {

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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport FieldLabel from '../_shared/FieldLabel.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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\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  isDisabled: undefined,\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// Resolve own isDisabled/disabled prop pair, falling back to the parent Autocomplete's\n// resolved isDisabled context value (reactively, via a fallback getter) only when neither\n// is set on this input directly.\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteInput', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n  () => ctx.isDisabled.value,\n)\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    <FieldLabel\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :label=\"ctx.label.value\"\n      :is-required=\"ctx.isRequired.value\"\n      :class=\"ctx.slots.value.label()\"\n    />\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=\"isDisabled\"\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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"}
+{"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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\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  /** Per-slot class overrides */\n  classNames?: Partial<{\n    trigger: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    input: ClassValue\n    clearButton: ClassValue\n    indicator: ClassValue\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  isDisabled: undefined,\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// Resolve own isDisabled/disabled prop pair, falling back to the parent Autocomplete's\n// resolved isDisabled context value (reactively, via a fallback getter) only when neither\n// is set on this input directly.\nconst isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteInput', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n  () => ctx.isDisabled.value,\n)\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=\"composeClassName(ctx.slots.value.trigger(), props.classNames?.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    <FieldLabel\n      v-if=\"showInsideLabel\"\n      :for=\"ctx.inputId.value\"\n      :label=\"ctx.label.value\"\n      :is-required=\"ctx.isRequired.value\"\n      :class=\"composeClassName(ctx.slots.value.label(), props.classNames?.label)\"\n    />\n    <span\n      v-if=\"$slots.startContent\"\n      :class=\"composeClassName(ctx.slots.value.startContent(), props.classNames?.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      :class-names=\"{ chip: props.classNames?.chip }\"\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        :class-names=\"props.classNames?.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=\"isDisabled\"\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=\"composeClassName(ctx.slots.value.input(), props.classNames?.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=\"composeClassName(ctx.slots.value.clearButton(), props.classNames?.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=\"composeClassName(ctx.slots.value.indicator(), props.classNames?.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=\"composeClassName(ctx.slots.value.indicator(), props.classNames?.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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  /** @deprecated Use isDisabled instead. */\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: undefined,\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 isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\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=\"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":""}
+{"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 { listboxItemVariants, autocompleteVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  /** @deprecated Use isDisabled instead. */\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  /** Per-slot class overrides */\n  classNames?: Partial<{\n    item: ClassValue\n    text: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  isDisabled: undefined,\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 isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\nconst itemSlots = listboxItemVariants()\nconst itemTextClass = computed(() => autocompleteVariants().itemText())\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=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    :class=\"composeClassName(itemSlots.item(), props.classNames?.item)\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      :class=\"composeClassName(itemTextClass, props.classNames?.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=\"composeClassName(itemSlots.indicator(), props.classNames?.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=\"composeClassName(itemSlots.indicator(), props.classNames?.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":""}

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

@@ -1,17 +1,10 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { useAutocompleteInject } from "./Autocomplete.context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+import { autocompleteVariants, listboxItemVariants } from "@auronui/styles";
 import { AutocompleteItem, ComboboxItemIndicator } from "reka-ui";
 //#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	class: "autocomplete-item__text",
-	"data-slot": "item-text"
-};
-var _hoisted_2 = {
-	key: 1,
-	class: "list-box-item__indicator",
-	"data-slot": "list-box-item-indicator"
-};
 var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AutocompleteItem",
 	props: {
@@ -35,7 +28,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		indicatorAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -44,6 +38,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const isDisabled = useDeprecatedBooleanProp("AutocompleteItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const slots = useSlots();
 		const ctx = useAutocompleteInject();
+		const itemSlots = listboxItemVariants();
+		const itemTextClass = computed(() => autocompleteVariants().itemText());
 		function extractText(nodes) {
 			return nodes.map((n) => {
 				if (typeof n.children === "string") return n.children;
@@ -79,18 +75,21 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"as-child": props.asChild,
 				"data-item-value": props.value,
 				"data-selected": isChecked.value || void 0,
-				class: "list-box-item list-box-item--default",
+				class: normalizeClass(unref(composeClassName)(unref(itemSlots).item(), props.classNames?.item)),
 				"data-slot": "list-box-item",
 				onSelect: handleSelect
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
-					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
+					createElementVNode("span", {
+						class: normalizeClass(unref(composeClassName)(itemTextClass.value, props.classNames?.text)),
+						"data-slot": "item-text"
+					}, [renderSlot(_ctx.$slots, "default")], 2),
 					!unref(ctx).multiple.value ? (openBlock(), createBlock(unref(ComboboxItemIndicator), {
 						key: 0,
 						as: props.indicatorAs,
 						"as-child": props.indicatorAsChild,
-						class: "list-box-item__indicator",
+						class: normalizeClass(unref(composeClassName)(unref(itemSlots).indicator(), props.classNames?.indicator)),
 						"data-slot": "list-box-item-indicator"
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
@@ -107,7 +106,15 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["as", "as-child"])) : isChecked.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					])) : isChecked.value ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(composeClassName)(unref(itemSlots).indicator(), props.classNames?.indicator)),
+						"data-slot": "list-box-item-indicator"
+					}, [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -119,7 +126,7 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"stroke-linejoin": "round",
 						"data-slot": "list-box-item-indicator--checkmark",
 						"aria-hidden": "true"
-					}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])])) : createCommentVNode("", true),
+					}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])], 2)) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -130,7 +137,8 @@ var AutocompleteItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"as",
 				"as-child",
 				"data-item-value",
-				"data-selected"
+				"data-selected",
+				"class"
 			]);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteItem.vue_vue_type_script_setup_true_lang.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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  /** @deprecated Use isDisabled instead. */\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: undefined,\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 isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\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=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAIb,MAAM,aAAa,yBACjB,oBAAoB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACpF;EAEA,MAAM,QAAe,UAAS;EAC9B,MAAM,MAAM,uBAAsB;EAElC,SAAS,YAAY,OAAwB;AAC3C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,YAAY,EAAE,SAAmB;AACvE,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,MAAM,cAAc,eAAuB;GACzC,MAAM,SAA+B,MAAM,WAA0C;AACrF,OAAI,CAAC,OAAQ,QAAO,MAAM;AAC1B,UAAO,YAAY,OAAO,CAAC,MAAM,IAAI,MAAM;IAC5C;EAGD,MAAM,YAAY,eAAe,IAAI,SAAS,SAAS,IAAI,WAAW,MAAM,MAAM,CAAA;AAElF,kBAAgB;AACd,OAAI,aAAa,MAAM,OAAO,YAAY,MAAK;IAChD;AAED,oBAAkB;AAChB,OAAI,eAAe,MAAM,MAAK;IAC/B;EAED,SAAS,aAAa,OAAc;AAClC,QAAK,UAAU,MAAK;AACpB,OAAI,IAAI,SAAS,OAAO;AAGtB,UAAM,gBAAe;AACrB,QAAI,iBAAiB,MAAM,MAAK;;;;uBAMlC,YAoEmB,MAAA,iBAAA,EAAA;IAnEhB,OAAO,YAAA;IACP,cAAY,MAAM,aAAa,YAAA;IAC/B,UAAU,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,mBAAiB,MAAM;IACvB,iBAAe,UAAA,SAAa,KAAA;IAC7B,OAAM;IACN,aAAU;IACT,UAAQ;;2BAEmB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,mBAGgB,QAHhB,YAGgB,CAAf,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;MAGA,MAAA,IAAG,CAAC,SAAS,SAAA,WAAA,EADtB,YAwBwB,MAAA,sBAAA,EAAA;;MAtBrB,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;kCAM1B,UAAA,SAAA,WAAA,EADb,mBAsBO,QAtBP,YAsBO,CAjBL,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;MAbJ,OAAM;MACN,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,QAAO;MACP,gBAAa;MACb,kBAAe;MACf,mBAAgB;MAChB,aAAU;MACV,eAAY;SAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
+{"version":3,"file":"AutocompleteItem.vue_vue_type_script_setup_true_lang.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 { listboxItemVariants, autocompleteVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useAutocompleteInject } from './Autocomplete.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  /** @deprecated Use isDisabled instead. */\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  /** Per-slot class overrides */\n  classNames?: Partial<{\n    item: ClassValue\n    text: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  isDisabled: undefined,\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 isDisabled = useDeprecatedBooleanProp(\n  'AutocompleteItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst slots: Slots = useSlots()\nconst ctx = useAutocompleteInject()\nconst itemSlots = listboxItemVariants()\nconst itemTextClass = computed(() => autocompleteVariants().itemText())\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=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-item-value=\"props.value\"\n    :data-selected=\"isChecked || undefined\"\n    :class=\"composeClassName(itemSlots.item(), props.classNames?.item)\"\n    data-slot=\"list-box-item\"\n    @select=\"handleSelect\"\n  >\n    <slot name=\"startContent\" />\n    <span\n      :class=\"composeClassName(itemTextClass, props.classNames?.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=\"composeClassName(itemSlots.indicator(), props.classNames?.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=\"composeClassName(itemSlots.indicator(), props.classNames?.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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteOverflowChips.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AutocompleteOverflowChips.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      :class-names=\"props.classNames?.chip\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -19,7 +19,8 @@ var AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @
 	props: {
 		values: {},
 		getLabel: { type: Function },
-		removeValue: { type: Function }
+		removeValue: { type: Function },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -66,19 +67,25 @@ var AutocompleteOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @
 					size: "sm",
 					"is-closable": "",
 					style: normalizeStyle(i >= visibleCount.value ? "display: none" : void 0),
+					"class-names": props.classNames?.chip,
 					onClose: withModifiers(($event) => __props.removeValue(val), ["stop"])
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(__props.getLabel(val)), 1)]),
 					_: 2
-				}, 1032, ["style", "onClose"]);
+				}, 1032, [
+					"style",
+					"class-names",
+					"onClose"
+				]);
 			}), 128)), overflowCount.value > 0 ? (openBlock(), createBlock(Chip_default, {
 				key: 0,
 				size: "sm",
-				color: "default"
+				color: "default",
+				"class-names": props.classNames?.chip
 			}, {
 				default: withCtx(() => [createTextVNode(" +" + toDisplayString(overflowCount.value) + " more ", 1)]),
 				_: 1
-			})) : createCommentVNode("", true)], 512);
+			}, 8, ["class-names"])) : createCommentVNode("", true)], 512);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAMd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAGjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAEvB,MAAM,SADS,MAAM,MAAM,SAAS,IACZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AACrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAsBM,OAtBN,YAsBM,EAAA,UAAA,KAAA,EAlBJ,mBAUO,UAAA,MAAA,WATc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAUO,cAAA;KARJ,KAAK;KACN,kBAAA;KACA,MAAK;KACL,eAAA;KACC,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;KACtD,SAAK,eAAA,WAAO,QAAA,YAAY,IAAG,EAAA,CAAA,OAAA,CAAA;;4BAET,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAMO,cAAA;;IAJL,MAAK;IACL,OAAM;;2BAEL,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}
+{"version":3,"file":"AutocompleteOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/autocomplete/AutocompleteOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  values: string[]\n  getLabel: (value: string) => string\n  removeValue: (value: string) => void\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      is-closable\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      :class-names=\"props.classNames?.chip\"\n      @close.stop=\"removeValue(val)\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAiBd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAGjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAEvB,MAAM,SADS,MAAM,MAAM,SAAS,IACZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AACrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAwBM,OAxBN,YAwBM,EAAA,UAAA,KAAA,EApBJ,mBAWO,UAAA,MAAA,WAVc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAWO,cAAA;KATJ,KAAK;KACN,kBAAA;KACA,MAAK;KACL,eAAA;KACC,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;KACtD,eAAa,MAAM,YAAY;KAC/B,SAAK,eAAA,WAAO,QAAA,YAAY,IAAG,EAAA,CAAA,OAAA,CAAA;;4BAET,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAOO,cAAA;;IALL,MAAK;IACL,OAAM;IACL,eAAa,MAAM,YAAY;;2BAE/B,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  /** AvatarRoot props */\n  as?: string\n  asChild?: boolean\n  /** AvatarImage props */\n  referrerPolicy?: string\n  crossOrigin?: string\n  imageAs?: string\n  imageAsChild?: boolean\n  /** AvatarFallback props */\n  delayMs?: number\n  fallbackAs?: string\n  fallbackAsChild?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\nconst emit = defineEmits<{\n  'loading-status-change': [status: string]\n}>()\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :as=\"props.imageAs\"\n      :as-child=\"props.imageAsChild\"\n      :referrer-policy=\"(props.referrerPolicy as any)\"\n      :cross-origin=\"(props.crossOrigin as any)\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n      @loading-status-change=\"emit('loading-status-change', $event)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :as=\"props.fallbackAs\"\n      :as-child=\"props.fallbackAsChild\"\n      :delay-ms=\"props.delayMs\"\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback && props.delayMs === undefined ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"'avatar__name text-xs font-medium leading-none'\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          class=\"avatar__icon size-4/5\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from 'reka-ui'\nimport { avatarVariants, type AvatarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useAvatarGroupInject } from './avatar-group.context'\n\nconst props = withDefaults(defineProps<{\n  src?: string\n  alt?: string\n  name?: string\n  size?: AvatarVariants['size']\n  color?: AvatarVariants['color']\n  variant?: AvatarVariants['variant']\n  isBordered?: boolean\n  isDisabled?: boolean\n  showFallback?: boolean\n  /** AvatarRoot props */\n  as?: string\n  asChild?: boolean\n  /** AvatarImage props */\n  referrerPolicy?: string\n  crossOrigin?: string\n  imageAs?: string\n  imageAsChild?: boolean\n  /** AvatarFallback props */\n  delayMs?: number\n  fallbackAs?: string\n  fallbackAsChild?: boolean\n  class?: ClassValue\n  /** Per-slot class name overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    image: ClassValue\n    fallback: ClassValue\n    icon: ClassValue\n    name: ClassValue\n  }>\n}>(), {\n  isBordered: false,\n  isDisabled: false,\n  showFallback: false,\n})\n\nconst emit = defineEmits<{\n  'loading-status-change': [status: string]\n}>()\n\n// Inject AvatarGroup context with ref-based fallbacks (mirrors Button.vue pattern)\nconst groupCtx = useAvatarGroupInject({\n  size: ref('md'),\n  isBordered: ref(false),\n  isDisabled: ref(false),\n  isGrid: ref(false),\n  isInGroup: ref(false),\n})\n\n// Prop precedence rules (matching ButtonGroup D-13):\n// - group disabled ALWAYS wins over child prop\n// - other props: child prop wins over group value (child ?? group)\nconst finalSize = computed(() => props.size ?? groupCtx.size.value)\nconst finalIsBordered = computed(() => props.isBordered || groupCtx.isBordered.value)\nconst isDisabled = computed(() => groupCtx.isDisabled.value || props.isDisabled)\nconst isInGroup = computed(() => groupCtx.isInGroup.value)\n\n// Compute initials from name: first letter of up to 2 words\nconst initials = computed(() => {\n  if (!props.name) return ''\n  const parts = props.name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n})\n\nconst slotFns = computed(() =>\n  avatarVariants({\n    size: finalSize.value,\n    color: props.color,\n    variant: props.variant,\n  })\n)\n\n// Border class applied manually since the styles don't have isBordered variant\nconst borderedClass = computed(() =>\n  finalIsBordered.value ? 'ring-2 ring-offset-2 ring-default' : undefined\n)\n\n// InGroup class for negative margin overlap\nconst inGroupClass = computed(() =>\n  isInGroup.value ? '-me-2' : undefined\n)\n</script>\n\n<template>\n  <AvatarRoot\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), borderedClass, inGroupClass, props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-bordered=\"finalIsBordered || undefined\"\n  >\n    <AvatarImage\n      v-if=\"props.src && !props.showFallback\"\n      :src=\"props.src\"\n      :alt=\"props.alt ?? props.name ?? ''\"\n      :as=\"props.imageAs\"\n      :as-child=\"props.imageAsChild\"\n      :referrer-policy=\"(props.referrerPolicy as any)\"\n      :cross-origin=\"(props.crossOrigin as any)\"\n      :class=\"composeClassName(slotFns.image(), props.classNames?.image)\"\n      @loading-status-change=\"emit('loading-status-change', $event)\"\n    />\n    <!--\n      delayMs: only pass a value when we have a src — Reka UI treats delayMs=undefined\n      as \"show immediately\" (canRender starts true). Passing delayMs=0 is falsy but\n      not undefined, so the timeout never fires and fallback stays hidden forever.\n    -->\n    <AvatarFallback\n      :as=\"props.fallbackAs\"\n      :as-child=\"props.fallbackAsChild\"\n      :delay-ms=\"props.delayMs\"\n      :class=\"composeClassName(slotFns.fallback(), props.classNames?.fallback)\"\n      v-bind=\"props.src && !props.showFallback && props.delayMs === undefined ? { 'delay-ms': 600 } : {}\"\n    >\n      <slot name=\"fallback\">\n        <span\n          v-if=\"initials\"\n          :class=\"composeClassName(slotFns.name(), 'text-xs font-medium leading-none', props.classNames?.name)\"\n        >{{ initials }}</span>\n        <svg\n          v-else\n          :class=\"composeClassName(slotFns.icon(), 'size-4/5', props.classNames?.icon)\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n        </svg>\n      </slot>\n    </AvatarFallback>\n  </AvatarRoot>\n</template>\n"],"mappings":""}