@auronui/vue 1.4.0 → 1.4.2

package/dist/components/radio/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -6,15 +6,6 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { radioGroupVariants } from "@auronui/styles";
 import { RadioGroupRoot } from "reka-ui";
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "radio-group__wrapper" };
-var _hoisted_2 = {
-	key: 1,
-	class: "radio-group__error-message"
-};
-var _hoisted_3 = {
-	key: 2,
-	class: "radio-group__description"
-};
 var RadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "RadioGroup",
 	props: {
@@ -57,7 +48,8 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			default: void 0
 		},
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -71,7 +63,15 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			isInvalid: toRef(props, "isInvalid")
 		});
 		const labelId = `radio-group-label-${Math.random().toString(36).slice(2, 8)}`;
-		const groupClasses = computed(() => radioGroupVariants({ variant: props.variant }));
+		const slotFns = computed(() => radioGroupVariants({ variant: props.variant }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.radio?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.radio?.control, item.classNames?.control),
+				indicator: composeClassName(props.classNames?.radio?.indicator, item.classNames?.indicator),
+				content: composeClassName(props.classNames?.radio?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(RadioGroupRoot), {
 				"model-value": props.modelValue,
@@ -86,26 +86,39 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				as: props.as,
 				required: unref(isRequired),
 				"aria-labelledby": props.label ? labelId : void 0,
-				class: normalizeClass(unref(composeClassName)(groupClasses.value, props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $event != null && emit("update:modelValue", String($event)))
 			}, {
 				default: withCtx(() => [
 					props.label ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						id: labelId,
-						class: "radio-group__label"
-					}, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_1, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+					}, toDisplayString(props.label), 3)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.wrapper(), props.classNames?.wrapper)) }, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
 						return openBlock(), createBlock(Radio_default, {
 							key: item.value,
 							value: item.value,
-							"is-disabled": item.disabled
+							"is-disabled": item.disabled,
+							class: normalizeClass(item.class),
+							"class-names": itemClassNames(item)
 						}, {
 							default: withCtx(() => [createTextVNode(toDisplayString(item.label ?? item.value), 1)]),
 							_: 2
-						}, 1032, ["value", "is-disabled"]);
-					}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
-					props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(props.errorMessage), 1)) : props.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+						}, 1032, [
+							"value",
+							"is-disabled",
+							"class",
+							"class-names"
+						]);
+					}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
+					props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
+					}, toDisplayString(props.errorMessage), 3)) : props.description ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.description(), props.classNames?.description))
+					}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, [

package/dist/components/radio/RadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/radio/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { RadioGroupRoot } from 'reka-ui'\nimport { radioGroupVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useRadioGroupProvide } from './radio-group.context'\nimport Radio from './Radio.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype RadioShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  variant?: RadioGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  /** Text direction forwarded to RadioGroupRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** Whether keyboard navigation loops from last to first item. */\n  loop?: boolean\n  /** Whether RadioGroupRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render RadioGroupRoot as. */\n  as?: string\n  isRequired?: boolean\n  /**\n   * Whether the radio group is required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  class?: string\n  /** Shorthand API: render radio options from an array instead of the compound slot API */\n  items?: RadioShorthandItem[]\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  dir: undefined,\n  loop: true,\n  asChild: false,\n  as: undefined,\n  isRequired: undefined,\n  required: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'RadioGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'RadioGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\n// Provide context to child Radio components\nuseRadioGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n})\n\nconst labelId = `radio-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupClasses = computed(() =>\n  radioGroupVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :model-value=\"props.modelValue\"\n    :default-value=\"props.defaultValue\"\n    :disabled=\"isDisabled\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :name=\"props.name\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :loop=\"props.loop\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"isRequired\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :class=\"composeClassName(groupClasses, props.class)\"\n    @update:model-value=\"$event != null && emit('update:modelValue', String($event))\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"radio-group__label\"\n    >{{ props.label }}</span>\n    <div class=\"radio-group__wrapper\">\n      <template v-if=\"props.items\">\n        <Radio\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n        >{{ item.label ?? item.value }}</Radio>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"radio-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"radio-group__description\"\n    >{{ props.description }}</span>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAkDd,MAAM,OAAO;EAIb,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;AAGA,uBAAqB;GACnB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACrC,CAAA;EAED,MAAM,UAAU,qBAAqB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE3E,MAAM,eAAe,eACnB,mBAAmB,EAAE,SAAS,MAAM,SAAS,CAAA,CAC/C;;uBAIE,YAwCiB,MAAA,eAAA,EAAA;IAvCd,eAAa,MAAM;IACnB,iBAAe,MAAM;IACrB,UAAU,MAAA,WAAU;IACpB,gBAAc,MAAM,aAAa,KAAA;IACjC,MAAM,MAAM;IACZ,aAAa,MAAM;IACnB,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAA,WAAU;IACpB,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,OAAK,eAAE,MAAA,iBAAgB,CAAC,aAAA,OAAc,MAAM,MAAK,CAAA;IACjD,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,UAAM,QAAY,KAAI,qBAAsB,OAAO,OAAM,CAAA;;2BAMrD;KAHjB,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;MAFtB,IAAI;MACL,OAAM;wBACJ,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KACf,mBAUM,OAVN,YAUM,CATY,MAAM,SAAA,UAAA,KAAA,EACpB,mBAKuC,UAAA,EAAA,KAAA,GAAA,EAAA,WAJtB,MAAM,QAAd,SAAI;0BADb,YAKuC,eAAA;OAHpC,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,eAAa,KAAK;;8BACU,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;iBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;KAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAHhC,YAGgC,gBAA5B,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAH/B,YAG+B,gBAA3B,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/radio/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { RadioGroupRoot } from 'reka-ui'\nimport { radioGroupVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useRadioGroupProvide } from './radio-group.context'\nimport Radio from './Radio.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype RadioShorthandItem = {\n  value: string\n  label?: string\n  disabled?: boolean\n  class?: ClassValue\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}\n\nconst props = withDefaults(defineProps<{\n  variant?: RadioGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  /** Text direction forwarded to RadioGroupRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** Whether keyboard navigation loops from last to first item. */\n  loop?: boolean\n  /** Whether RadioGroupRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render RadioGroupRoot as. */\n  as?: string\n  isRequired?: boolean\n  /**\n   * Whether the radio group is required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  class?: string\n  /** Shorthand API: render radio options from an array instead of the compound slot API */\n  items?: RadioShorthandItem[]\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    wrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n    /** Applied to every shorthand-rendered Radio, before any per-item override */\n    radio: Partial<{\n      base: ClassValue\n      control: ClassValue\n      indicator: ClassValue\n      content: ClassValue\n    }>\n  }>\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  dir: undefined,\n  loop: true,\n  asChild: false,\n  as: undefined,\n  isRequired: undefined,\n  required: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'RadioGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'RadioGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\n// Provide context to child Radio components\nuseRadioGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n})\n\nconst labelId = `radio-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst slotFns = computed(() =>\n  radioGroupVariants({ variant: props.variant })\n)\n\n// Group-wide radio classNames apply first; per-item classNames win on conflict.\nfunction itemClassNames(item: RadioShorthandItem) {\n  return {\n    base: composeClassName(props.classNames?.radio?.base, item.classNames?.base),\n    control: composeClassName(props.classNames?.radio?.control, item.classNames?.control),\n    indicator: composeClassName(props.classNames?.radio?.indicator, item.classNames?.indicator),\n    content: composeClassName(props.classNames?.radio?.content, item.classNames?.content),\n  }\n}\n</script>\n\n<template>\n  <RadioGroupRoot\n    :model-value=\"props.modelValue\"\n    :default-value=\"props.defaultValue\"\n    :disabled=\"isDisabled\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :name=\"props.name\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :loop=\"props.loop\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"isRequired\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @update:model-value=\"$event != null && emit('update:modelValue', String($event))\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ props.label }}</span>\n    <div :class=\"composeClassName(slotFns.wrapper(), props.classNames?.wrapper)\">\n      <template v-if=\"props.items\">\n        <Radio\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :class=\"item.class\"\n          :class-names=\"itemClassNames(item)\"\n        >{{ item.label ?? item.value }}</Radio>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n    >{{ props.description }}</span>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAgEd,MAAM,OAAO;EAIb,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;AAGA,uBAAqB;GACnB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACrC,CAAA;EAED,MAAM,UAAU,qBAAqB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE3E,MAAM,UAAU,eACd,mBAAmB,EAAE,SAAS,MAAM,SAAS,CAAA,CAC/C;EAGA,SAAS,eAAe,MAA0B;AAChD,UAAO;IACL,MAAM,iBAAiB,MAAM,YAAY,OAAO,MAAM,KAAK,YAAY,KAAK;IAC5E,SAAS,iBAAiB,MAAM,YAAY,OAAO,SAAS,KAAK,YAAY,QAAQ;IACrF,WAAW,iBAAiB,MAAM,YAAY,OAAO,WAAW,KAAK,YAAY,UAAU;IAC3F,SAAS,iBAAiB,MAAM,YAAY,OAAO,SAAS,KAAK,YAAY,QAAQ;IACvF;;;uBAKA,YA0CiB,MAAA,eAAA,EAAA;IAzCd,eAAa,MAAM;IACnB,iBAAe,MAAM;IACrB,UAAU,MAAA,WAAU;IACpB,gBAAc,MAAM,aAAa,KAAA;IACjC,MAAM,MAAM;IACZ,aAAa,MAAM;IACnB,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAA,WAAU;IACpB,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,UAAM,QAAY,KAAI,qBAAsB,OAAO,OAAM,CAAA;;2BAMrD;KAHjB,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;MAFtB,IAAI;MACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;wBAC/D,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KACf,mBAYM,OAAA,EAZA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACxD,MAAM,SAAA,UAAA,KAAA,EACpB,mBAOuC,UAAA,EAAA,KAAA,GAAA,EAAA,WANtB,MAAM,QAAd,SAAI;0BADb,YAOuC,eAAA;OALpC,KAAK,KAAK;OACV,OAAO,KAAK;OACZ,eAAa,KAAK;OAClB,OAAK,eAAE,KAAK,MAAK;OACjB,eAAa,eAAe,KAAI;;8BACJ,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;iBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA;KAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAAA;;MAD7B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;wBAC7E,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAAA;;MAD5B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;wBAC3E,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/scroll-area/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../src/components/scroll-area/ScrollArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n} from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  viewportClass?: string\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n  scrollHideDelay?: number\n  orientation?: 'vertical' | 'horizontal' | 'both'\n  /** Text direction for the scroll area */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element */\n  as?: string\n  /** Merge root props onto child element */\n  asChild?: boolean\n  /** Nonce for the viewport's inline style */\n  viewportNonce?: string\n  /** Render viewport as a different element */\n  viewportAs?: string\n  /** Merge viewport props onto child element */\n  viewportAsChild?: boolean\n  /** Keep scrollbar mounted when hidden */\n  scrollbarForceMount?: boolean\n  /** Render scrollbar as a different element */\n  scrollbarAs?: string\n  /** Merge scrollbar props onto child element */\n  scrollbarAsChild?: boolean\n  /** Render thumb as a different element */\n  thumbAs?: string\n  /** Merge thumb props onto child element */\n  thumbAsChild?: boolean\n  /** Render corner as a different element */\n  cornerAs?: string\n  /** Merge corner props onto child element */\n  cornerAsChild?: boolean\n}>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaRoot\n    :type=\"props.type\"\n    :scroll-hide-delay=\"props.scrollHideDelay\"\n    :dir=\"props.dir\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('scroll-area__root', props.class)\"\n  >\n    <ScrollAreaViewport\n      :nonce=\"props.viewportNonce\"\n      :as=\"props.viewportAs\"\n      :as-child=\"props.viewportAsChild\"\n      :class=\"composeClassName('scroll-area__viewport', props.viewportClass)\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'vertical' || props.orientation === 'both'\"\n      orientation=\"vertical\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      class=\"scroll-area__scrollbar scroll-area__scrollbar--vertical\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        class=\"scroll-area__thumb\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'horizontal' || props.orientation === 'both'\"\n      orientation=\"horizontal\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      class=\"scroll-area__scrollbar scroll-area__scrollbar--horizontal\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        class=\"scroll-area__thumb\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaCorner\n      v-if=\"props.orientation === 'both'\"\n      :as=\"props.cornerAs\"\n      :as-child=\"props.cornerAsChild\"\n      class=\"scroll-area__corner\"\n    />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../src/components/scroll-area/ScrollArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n} from 'reka-ui'\nimport { scrollAreaVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  viewportClass?: string\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n  scrollHideDelay?: number\n  orientation?: 'vertical' | 'horizontal' | 'both'\n  /** Text direction for the scroll area */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element */\n  as?: string\n  /** Merge root props onto child element */\n  asChild?: boolean\n  /** Nonce for the viewport's inline style */\n  viewportNonce?: string\n  /** Render viewport as a different element */\n  viewportAs?: string\n  /** Merge viewport props onto child element */\n  viewportAsChild?: boolean\n  /** Keep scrollbar mounted when hidden */\n  scrollbarForceMount?: boolean\n  /** Render scrollbar as a different element */\n  scrollbarAs?: string\n  /** Merge scrollbar props onto child element */\n  scrollbarAsChild?: boolean\n  /** Render thumb as a different element */\n  thumbAs?: string\n  /** Merge thumb props onto child element */\n  thumbAsChild?: boolean\n  /** Render corner as a different element */\n  cornerAs?: string\n  /** Merge corner props onto child element */\n  cornerAsChild?: boolean\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    root: ClassValue\n    viewport: ClassValue\n    scrollbar: ClassValue\n    thumb: ClassValue\n    corner: ClassValue\n  }>\n}>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n  orientation: 'vertical',\n})\n\nconst slotFns = scrollAreaVariants()\n</script>\n\n<template>\n  <ScrollAreaRoot\n    :type=\"props.type\"\n    :scroll-hide-delay=\"props.scrollHideDelay\"\n    :dir=\"props.dir\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.root(), props.class, props.classNames?.root)\"\n  >\n    <ScrollAreaViewport\n      :nonce=\"props.viewportNonce\"\n      :as=\"props.viewportAs\"\n      :as-child=\"props.viewportAsChild\"\n      :class=\"composeClassName(slotFns.viewport(), props.viewportClass, props.classNames?.viewport)\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'vertical' || props.orientation === 'both'\"\n      orientation=\"vertical\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      :class=\"composeClassName(slotFns.scrollbar(), 'scroll-area__scrollbar--vertical', props.classNames?.scrollbar)\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        :class=\"composeClassName(slotFns.thumb(), props.classNames?.thumb)\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'horizontal' || props.orientation === 'both'\"\n      orientation=\"horizontal\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      :class=\"composeClassName(slotFns.scrollbar(), 'scroll-area__scrollbar--horizontal', props.classNames?.scrollbar)\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        :class=\"composeClassName(slotFns.thumb(), props.classNames?.thumb)\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaCorner\n      v-if=\"props.orientation === 'both'\"\n      :as=\"props.cornerAs\"\n      :as-child=\"props.cornerAsChild\"\n      :class=\"composeClassName(slotFns.corner(), props.classNames?.corner)\"\n    />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":""}

package/dist/components/scroll-area/ScrollArea.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { composeClassName } from "../../utils/composeClassName.js";
 import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { scrollAreaVariants } from "@auronui/styles";
 import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
 //#region src/components/scroll-area/ScrollArea.vue?vue&type=script&setup=true&lang.ts
 var ScrollArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -22,10 +23,12 @@ var ScrollArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		thumbAs: {},
 		thumbAsChild: { type: Boolean },
 		cornerAs: {},
-		cornerAsChild: { type: Boolean }
+		cornerAsChild: { type: Boolean },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const slotFns = scrollAreaVariants();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ScrollAreaRoot), {
 				type: props.type,
@@ -33,14 +36,14 @@ var ScrollArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				dir: props.dir,
 				as: props.as,
 				"as-child": props.asChild,
-				class: normalizeClass(unref(composeClassName)("scroll-area__root", props.class))
+				class: normalizeClass(unref(composeClassName)(unref(slotFns).root(), props.class, props.classNames?.root))
 			}, {
 				default: withCtx(() => [
 					createVNode(unref(ScrollAreaViewport), {
 						nonce: props.viewportNonce,
 						as: props.viewportAs,
 						"as-child": props.viewportAsChild,
-						class: normalizeClass(unref(composeClassName)("scroll-area__viewport", props.viewportClass))
+						class: normalizeClass(unref(composeClassName)(unref(slotFns).viewport(), props.viewportClass, props.classNames?.viewport))
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 						_: 3
@@ -56,18 +59,23 @@ var ScrollArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						"force-mount": props.scrollbarForceMount,
 						as: props.scrollbarAs,
 						"as-child": props.scrollbarAsChild,
-						class: "scroll-area__scrollbar scroll-area__scrollbar--vertical"
+						class: normalizeClass(unref(composeClassName)(unref(slotFns).scrollbar(), "scroll-area__scrollbar--vertical", props.classNames?.scrollbar))
 					}, {
 						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), {
 							as: props.thumbAs,
 							"as-child": props.thumbAsChild,
-							class: "scroll-area__thumb"
-						}, null, 8, ["as", "as-child"])]),
+							class: normalizeClass(unref(composeClassName)(unref(slotFns).thumb(), props.classNames?.thumb))
+						}, null, 8, [
+							"as",
+							"as-child",
+							"class"
+						])]),
 						_: 1
 					}, 8, [
 						"force-mount",
 						"as",
-						"as-child"
+						"as-child",
+						"class"
 					])) : createCommentVNode("", true),
 					props.orientation === "horizontal" || props.orientation === "both" ? (openBlock(), createBlock(unref(ScrollAreaScrollbar), {
 						key: 1,
@@ -75,25 +83,34 @@ var ScrollArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						"force-mount": props.scrollbarForceMount,
 						as: props.scrollbarAs,
 						"as-child": props.scrollbarAsChild,
-						class: "scroll-area__scrollbar scroll-area__scrollbar--horizontal"
+						class: normalizeClass(unref(composeClassName)(unref(slotFns).scrollbar(), "scroll-area__scrollbar--horizontal", props.classNames?.scrollbar))
 					}, {
 						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), {
 							as: props.thumbAs,
 							"as-child": props.thumbAsChild,
-							class: "scroll-area__thumb"
-						}, null, 8, ["as", "as-child"])]),
+							class: normalizeClass(unref(composeClassName)(unref(slotFns).thumb(), props.classNames?.thumb))
+						}, null, 8, [
+							"as",
+							"as-child",
+							"class"
+						])]),
 						_: 1
 					}, 8, [
 						"force-mount",
 						"as",
-						"as-child"
+						"as-child",
+						"class"
 					])) : createCommentVNode("", true),
 					props.orientation === "both" ? (openBlock(), createBlock(unref(ScrollAreaCorner), {
 						key: 2,
 						as: props.cornerAs,
 						"as-child": props.cornerAsChild,
-						class: "scroll-area__corner"
-					}, null, 8, ["as", "as-child"])) : createCommentVNode("", true)
+						class: normalizeClass(unref(composeClassName)(unref(slotFns).corner(), props.classNames?.corner))
+					}, null, 8, [
+						"as",
+						"as-child",
+						"class"
+					])) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, [

package/dist/components/scroll-area/ScrollArea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/scroll-area/ScrollArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n} from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  viewportClass?: string\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n  scrollHideDelay?: number\n  orientation?: 'vertical' | 'horizontal' | 'both'\n  /** Text direction for the scroll area */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element */\n  as?: string\n  /** Merge root props onto child element */\n  asChild?: boolean\n  /** Nonce for the viewport's inline style */\n  viewportNonce?: string\n  /** Render viewport as a different element */\n  viewportAs?: string\n  /** Merge viewport props onto child element */\n  viewportAsChild?: boolean\n  /** Keep scrollbar mounted when hidden */\n  scrollbarForceMount?: boolean\n  /** Render scrollbar as a different element */\n  scrollbarAs?: string\n  /** Merge scrollbar props onto child element */\n  scrollbarAsChild?: boolean\n  /** Render thumb as a different element */\n  thumbAs?: string\n  /** Merge thumb props onto child element */\n  thumbAsChild?: boolean\n  /** Render corner as a different element */\n  cornerAs?: string\n  /** Merge corner props onto child element */\n  cornerAsChild?: boolean\n}>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaRoot\n    :type=\"props.type\"\n    :scroll-hide-delay=\"props.scrollHideDelay\"\n    :dir=\"props.dir\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('scroll-area__root', props.class)\"\n  >\n    <ScrollAreaViewport\n      :nonce=\"props.viewportNonce\"\n      :as=\"props.viewportAs\"\n      :as-child=\"props.viewportAsChild\"\n      :class=\"composeClassName('scroll-area__viewport', props.viewportClass)\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'vertical' || props.orientation === 'both'\"\n      orientation=\"vertical\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      class=\"scroll-area__scrollbar scroll-area__scrollbar--vertical\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        class=\"scroll-area__thumb\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'horizontal' || props.orientation === 'both'\"\n      orientation=\"horizontal\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      class=\"scroll-area__scrollbar scroll-area__scrollbar--horizontal\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        class=\"scroll-area__thumb\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaCorner\n      v-if=\"props.orientation === 'both'\"\n      :as=\"props.cornerAs\"\n      :as-child=\"props.cornerAsChild\"\n      class=\"scroll-area__corner\"\n    />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;;uBAwCZ,YAqDiB,MAAA,eAAA,EAAA;IApDd,MAAM,MAAM;IACZ,qBAAmB,MAAM;IACzB,KAAK,MAAM;IACX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAA,qBAAsB,MAAM,MAAK,CAAA;;2BASpC;KAPrB,YAOqB,MAAA,mBAAA,EAAA;MANlB,OAAO,MAAM;MACb,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAA,yBAA0B,MAAM,cAAa,CAAA;;6BAE7D,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;KAIF,MAAM,gBAAW,cAAmB,MAAM,gBAAW,UAAA,WAAA,EAD7D,YAasB,MAAA,oBAAA,EAAA;;MAXpB,aAAY;MACX,eAAa,MAAM;MACnB,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM;;6BAMJ,CAJF,YAIE,MAAA,gBAAA,EAAA;OAHC,IAAI,MAAM;OACV,YAAU,MAAM;OACjB,OAAM;;;;;;;;KAKF,MAAM,gBAAW,gBAAqB,MAAM,gBAAW,UAAA,WAAA,EAD/D,YAasB,MAAA,oBAAA,EAAA;;MAXpB,aAAY;MACX,eAAa,MAAM;MACnB,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM;;6BAMJ,CAJF,YAIE,MAAA,gBAAA,EAAA;OAHC,IAAI,MAAM;OACV,YAAU,MAAM;OACjB,OAAM;;;;;;;;KAKF,MAAM,gBAAW,UAAA,WAAA,EADzB,YAKE,MAAA,iBAAA,EAAA;;MAHC,IAAI,MAAM;MACV,YAAU,MAAM;MACjB,OAAM"}
+{"version":3,"file":"ScrollArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/scroll-area/ScrollArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n} from 'reka-ui'\nimport { scrollAreaVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n  viewportClass?: string\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n  scrollHideDelay?: number\n  orientation?: 'vertical' | 'horizontal' | 'both'\n  /** Text direction for the scroll area */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element */\n  as?: string\n  /** Merge root props onto child element */\n  asChild?: boolean\n  /** Nonce for the viewport's inline style */\n  viewportNonce?: string\n  /** Render viewport as a different element */\n  viewportAs?: string\n  /** Merge viewport props onto child element */\n  viewportAsChild?: boolean\n  /** Keep scrollbar mounted when hidden */\n  scrollbarForceMount?: boolean\n  /** Render scrollbar as a different element */\n  scrollbarAs?: string\n  /** Merge scrollbar props onto child element */\n  scrollbarAsChild?: boolean\n  /** Render thumb as a different element */\n  thumbAs?: string\n  /** Merge thumb props onto child element */\n  thumbAsChild?: boolean\n  /** Render corner as a different element */\n  cornerAs?: string\n  /** Merge corner props onto child element */\n  cornerAsChild?: boolean\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    root: ClassValue\n    viewport: ClassValue\n    scrollbar: ClassValue\n    thumb: ClassValue\n    corner: ClassValue\n  }>\n}>(), {\n  type: 'hover',\n  scrollHideDelay: 600,\n  orientation: 'vertical',\n})\n\nconst slotFns = scrollAreaVariants()\n</script>\n\n<template>\n  <ScrollAreaRoot\n    :type=\"props.type\"\n    :scroll-hide-delay=\"props.scrollHideDelay\"\n    :dir=\"props.dir\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.root(), props.class, props.classNames?.root)\"\n  >\n    <ScrollAreaViewport\n      :nonce=\"props.viewportNonce\"\n      :as=\"props.viewportAs\"\n      :as-child=\"props.viewportAsChild\"\n      :class=\"composeClassName(slotFns.viewport(), props.viewportClass, props.classNames?.viewport)\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'vertical' || props.orientation === 'both'\"\n      orientation=\"vertical\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      :class=\"composeClassName(slotFns.scrollbar(), 'scroll-area__scrollbar--vertical', props.classNames?.scrollbar)\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        :class=\"composeClassName(slotFns.thumb(), props.classNames?.thumb)\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaScrollbar\n      v-if=\"props.orientation === 'horizontal' || props.orientation === 'both'\"\n      orientation=\"horizontal\"\n      :force-mount=\"props.scrollbarForceMount\"\n      :as=\"props.scrollbarAs\"\n      :as-child=\"props.scrollbarAsChild\"\n      :class=\"composeClassName(slotFns.scrollbar(), 'scroll-area__scrollbar--horizontal', props.classNames?.scrollbar)\"\n    >\n      <ScrollAreaThumb\n        :as=\"props.thumbAs\"\n        :as-child=\"props.thumbAsChild\"\n        :class=\"composeClassName(slotFns.thumb(), props.classNames?.thumb)\"\n      />\n    </ScrollAreaScrollbar>\n\n    <ScrollAreaCorner\n      v-if=\"props.orientation === 'both'\"\n      :as=\"props.cornerAs\"\n      :as-child=\"props.cornerAsChild\"\n      :class=\"composeClassName(slotFns.corner(), props.classNames?.corner)\"\n    />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EA8Cd,MAAM,UAAU,oBAAmB;;uBAIjC,YAqDiB,MAAA,eAAA,EAAA;IApDd,MAAM,MAAM;IACZ,qBAAmB,MAAM;IACzB,KAAK,MAAM;IACX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;;2BASvD;KAPrB,YAOqB,MAAA,mBAAA,EAAA;MANlB,OAAO,MAAM;MACb,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,UAAQ,EAAI,MAAM,eAAe,MAAM,YAAY,SAAQ,CAAA;;6BAEpF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;KAIF,MAAM,gBAAW,cAAmB,MAAM,gBAAW,UAAA,WAAA,EAD7D,YAasB,MAAA,oBAAA,EAAA;;MAXpB,aAAY;MACX,eAAa,MAAM;MACnB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,WAAS,EAAA,oCAAwC,MAAM,YAAY,UAAS,CAAA;;6BAM3G,CAJF,YAIE,MAAA,gBAAA,EAAA;OAHC,IAAI,MAAM;OACV,YAAU,MAAM;OAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;;;;;;;;;;;;;KAK7D,MAAM,gBAAW,gBAAqB,MAAM,gBAAW,UAAA,WAAA,EAD/D,YAasB,MAAA,oBAAA,EAAA;;MAXpB,aAAY;MACX,eAAa,MAAM;MACnB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,WAAS,EAAA,sCAA0C,MAAM,YAAY,UAAS,CAAA;;6BAM7G,CAJF,YAIE,MAAA,gBAAA,EAAA;OAHC,IAAI,MAAM;OACV,YAAU,MAAM;OAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;;;;;;;;;;;;;KAK7D,MAAM,gBAAW,UAAA,WAAA,EADzB,YAKE,MAAA,iBAAA,EAAA;;MAHC,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,QAAO,CAAC,QAAM,EAAI,MAAM,YAAY,OAAM,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: undefined,\n  isReadonly: undefined,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  by: undefined,\n  dir: undefined,\n  autocomplete: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Select', 'isReadOnly', () => props.isReadOnly, 'isReadonly', () => props.isReadonly,\n)\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /** Comparison key or function for value matching. */\n  by?: string | ((a: SelectItemValue, b: SelectItemValue) => boolean)\n  /** Text direction for the select. */\n  dir?: 'ltr' | 'rtl'\n  /** Native autocomplete attribute for the hidden input. */\n  autocomplete?: string\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.({}), [SelectTrigger, SelectContent]),\n)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => triggerId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => isReadOnly.value,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: isReadOnly.value,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: isReadOnly,\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :by=\"props.by\"\n        :dir=\"props.dir\"\n        :autocomplete=\"props.autocomplete\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger>\n            <SelectValue :placeholder=\"props.placeholder\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: undefined,\n  isReadonly: undefined,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  by: undefined,\n  dir: undefined,\n  autocomplete: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Select', 'isReadOnly', () => props.isReadOnly, 'isReadonly', () => props.isReadonly,\n)\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n    item: ClassValue\n    indicator: ClassValue\n    trigger: ClassValue\n    startContent: ClassValue\n    /** The chevron/indicator icon inside the trigger (distinct from `indicator`, which styles each item's checkmark). */\n    triggerIndicator: ClassValue\n    value: 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  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /** Comparison key or function for value matching. */\n  by?: string | ((a: SelectItemValue, b: SelectItemValue) => boolean)\n  /** Text direction for the select. */\n  dir?: 'ltr' | 'rtl'\n  /** Native autocomplete attribute for the hidden input. */\n  autocomplete?: string\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.({}), [SelectTrigger, SelectContent]),\n)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => triggerId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => isReadOnly.value,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: isReadOnly.value,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: isReadOnly,\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :by=\"props.by\"\n        :dir=\"props.dir\"\n        :autocomplete=\"props.autocomplete\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger\n            :class-names=\"{ trigger: props.classNames?.trigger, label: props.classNames?.label, startContent: props.classNames?.startContent, indicator: props.classNames?.triggerIndicator }\"\n          >\n            <SelectValue\n              :placeholder=\"props.placeholder\"\n              :class-names=\"{ value: props.classNames?.value, chip: props.classNames?.chip }\"\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n              :class-names=\"{ item: props.classNames?.item, indicator: props.classNames?.indicator }\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -168,23 +168,39 @@ var Select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
 				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
 			}, {
-				default: withCtx(() => [usesCustomChrome.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(SelectTrigger_default, null, {
-					default: withCtx(() => [createVNode(SelectValue_default, { placeholder: props.placeholder }, null, 8, ["placeholder"])]),
+				default: withCtx(() => [usesCustomChrome.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(SelectTrigger_default, { "class-names": {
+					trigger: props.classNames?.trigger,
+					label: props.classNames?.label,
+					startContent: props.classNames?.startContent,
+					indicator: props.classNames?.triggerIndicator
+				} }, {
+					default: withCtx(() => [createVNode(SelectValue_default, {
+						placeholder: props.placeholder,
+						"class-names": {
+							value: props.classNames?.value,
+							chip: props.classNames?.chip
+						}
+					}, null, 8, ["placeholder", "class-names"])]),
 					_: 1
-				}), createVNode(SelectContent_default, null, {
+				}, 8, ["class-names"]), createVNode(SelectContent_default, null, {
 					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item) => {
 						return openBlock(), createBlock(SelectItem_default, {
 							key: item.value,
 							value: item.value,
 							"text-value": item.textValue ?? item.label,
-							"is-disabled": item.isDisabled
+							"is-disabled": item.isDisabled,
+							"class-names": {
+								item: props.classNames?.item,
+								indicator: props.classNames?.indicator
+							}
 						}, {
 							default: withCtx(() => [renderSlot(_ctx.$slots, "item", { item }, () => [createTextVNode(toDisplayString(item.label ?? String(item.value)), 1)])]),
 							_: 2
 						}, 1032, [
 							"value",
 							"text-value",
-							"is-disabled"
+							"is-disabled",
+							"class-names"
 						]);
 					}), 128)), renderSlot(_ctx.$slots, "default")]),
 					_: 3

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

@@ -1 +1 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: undefined,\n  isReadonly: undefined,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  by: undefined,\n  dir: undefined,\n  autocomplete: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Select', 'isReadOnly', () => props.isReadOnly, 'isReadonly', () => props.isReadonly,\n)\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /** Comparison key or function for value matching. */\n  by?: string | ((a: SelectItemValue, b: SelectItemValue) => boolean)\n  /** Text direction for the select. */\n  dir?: 'ltr' | 'rtl'\n  /** Native autocomplete attribute for the hidden input. */\n  autocomplete?: string\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.({}), [SelectTrigger, SelectContent]),\n)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => triggerId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => isReadOnly.value,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: isReadOnly.value,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: isReadOnly,\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :by=\"props.by\"\n        :dir=\"props.dir\"\n        :autocomplete=\"props.autocomplete\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger>\n            <SelectValue :placeholder=\"props.placeholder\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, toRef, useAttrs, useId, useSlots } from 'vue'\nimport { SelectRoot } from 'reka-ui'\nimport { selectVariants, type SelectVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSelectProvide, type SelectItemValue, type SelectItemData } from './Select.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport SelectTrigger from './SelectTrigger.vue'\nimport SelectValue from './SelectValue.vue'\nimport SelectContent from './SelectContent.vue'\nimport SelectItem from './SelectItem.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: undefined,\n  isReadonly: undefined,\n  isRequired: false,\n  multiple: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  by: undefined,\n  dir: undefined,\n  autocomplete: undefined,\n  items: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: SelectItemValue | SelectItemValue[]]\n  'update:open': [value: boolean]\n}>()\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Select', 'isReadOnly', () => props.isReadOnly, 'isReadonly', () => props.isReadonly,\n)\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: SelectVariants['variant']\n  /** Field height. @default 'md' */\n  size?: SelectVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: SelectVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the trigger (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: SelectVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class name overrides via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n    item: ClassValue\n    indicator: ClassValue\n    trigger: ClassValue\n    startContent: ClassValue\n    /** The chevron/indicator icon inside the trigger (distinct from `indicator`, which styles each item's checkmark). */\n    triggerIndicator: ClassValue\n    value: 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  /* ─── Select-specific ─────────────────────────────────────── */\n  /** Two-way bound selected value. Accepts string or numeric keys. */\n  modelValue?: SelectItemValue | SelectItemValue[]\n  /** Initial selected value (uncontrolled). Accepts string or numeric keys. */\n  defaultValue?: SelectItemValue | SelectItemValue[]\n  /** Allow selecting multiple values. modelValue becomes string[]. @default false */\n  multiple?: boolean\n  /** Controls open state of the dropdown. */\n  open?: boolean\n  /** Initial open state of the dropdown (uncontrolled). */\n  defaultOpen?: boolean\n  /** Comparison key or function for value matching. */\n  by?: string | ((a: SelectItemValue, b: SelectItemValue) => boolean)\n  /** Text direction for the select. */\n  dir?: 'ltr' | 'rtl'\n  /** Native autocomplete attribute for the hidden input. */\n  autocomplete?: string\n  /**\n   * Data-driven items for the terse API. When provided (and no SelectTrigger /\n   * SelectContent is passed as a child), the trigger, value, and popover are\n   * rendered internally. Use the `#item` slot to customize per-item rendering.\n   */\n  items?: SelectItemData[]\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst triggerId = computed(() => (attrs.id as string | undefined) ?? generatedId)\n\nconst slots = useSlots()\n// Tier 3 (advanced): consumer supplied explicit compound chrome → pass through.\n// Tier 1/2 (terse): render trigger/value/content internally.\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.({}), [SelectTrigger, SelectContent]),\n)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => triggerId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => isReadOnly.value,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst slotFns = computed(() =>\n  selectVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: isReadOnly.value,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\n// Persistent item registry. SelectItem populates on first mount; entries\n// survive SelectContent unmount so SelectValue can render the label while\n// the popover is closed.\nconst itemRegistry = reactive(new Map<SelectItemValue, string>())\nconst registerItem = (value: SelectItemValue, label: string) => {\n  itemRegistry.set(value, label)\n}\nconst itemLabel = (value: SelectItemValue | SelectItemValue[] | undefined | null): string => {\n  if (value == null) return ''\n  if (Array.isArray(value)) {\n    // Fall back to the stringified value (handles numeric keys) when no label is\n    // registered. Filter empty strings only — never use filter(Boolean), which\n    // would drop a registered label for the numeric key 0.\n    return value\n      .map(v => String(itemRegistry.get(v) ?? v))\n      .filter(s => s.length > 0)\n      .join(', ')\n  }\n  return itemRegistry.get(value) ?? String(value)\n}\n\nfunction removeValue(value: SelectItemValue) {\n  const current = Array.isArray(props.modelValue) ? props.modelValue : []\n  emit('update:modelValue', current.filter(v => v !== value))\n}\n\nuseSelectProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  isReadonly: isReadOnly,\n  isRequired: toRef(props, 'isRequired'),\n  fullWidth: toRef(props, 'fullWidth'),\n  hasLabel,\n  labelPlacement: toRef(props, 'labelPlacement'),\n  triggerId,\n  label: toRef(props, 'label'),\n  ariaDescribedBy,\n  slots: slotFns,\n  multiple: toRef(props, 'multiple'),\n  registerItem,\n  itemLabel,\n  removeValue,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :for=\"triggerId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <SelectRoot\n        :model-value=\"props.modelValue\"\n        :default-value=\"props.defaultValue\"\n        :multiple=\"props.multiple\"\n        :open=\"props.open\"\n        :default-open=\"props.defaultOpen\"\n        :by=\"props.by\"\n        :dir=\"props.dir\"\n        :autocomplete=\"props.autocomplete\"\n        :disabled=\"props.isDisabled\"\n        :required=\"props.isRequired\"\n        :name=\"props.name\"\n        @update:model-value=\"emit('update:modelValue', $event as SelectItemValue | SelectItemValue[])\"\n        @update:open=\"emit('update:open', $event)\"\n      >\n        <!-- Tier 3: consumer-provided compound chrome -->\n        <slot v-if=\"usesCustomChrome\" />\n        <!-- Tier 1/2: internally rendered chrome -->\n        <template v-else>\n          <SelectTrigger\n            :class-names=\"{ trigger: props.classNames?.trigger, label: props.classNames?.label, startContent: props.classNames?.startContent, indicator: props.classNames?.triggerIndicator }\"\n          >\n            <SelectValue\n              :placeholder=\"props.placeholder\"\n              :class-names=\"{ value: props.classNames?.value, chip: props.classNames?.chip }\"\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem\n              v-for=\"item in props.items\"\n              :key=\"item.value\"\n              :value=\"item.value\"\n              :text-value=\"item.textValue ?? item.label\"\n              :is-disabled=\"item.isDisabled\"\n              :class-names=\"{ item: props.classNames?.item, indicator: props.classNames?.indicator }\"\n            >\n              <slot\n                name=\"item\"\n                :item=\"item\"\n              >{{ item.label ?? String(item.value) }}</slot>\n            </SelectItem>\n            <slot />\n          </SelectContent>\n        </template>\n      </SelectRoot>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

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

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

@@ -1,6 +1,8 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { useSelectInject } from "./Select.context.js";
-import { createBlock, createElementVNode, createVNode, defineComponent, onMounted, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
+import { createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onMounted, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
+import { listboxItemVariants } from "@auronui/styles";
 import { SelectItem, SelectItemIndicator, SelectItemText } from "reka-ui";
 //#region src/components/select/SelectItem.vue?vue&type=script&setup=true&lang.ts
 var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -21,7 +23,8 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -30,6 +33,7 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const isDisabled = useDeprecatedBooleanProp("SelectItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const ctx = useSelectInject();
 		const textRef = useTemplateRef("textRef");
+		const itemSlots = listboxItemVariants();
 		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		onMounted(() => {
 			const el = textRef.value?.$el;
@@ -43,7 +47,7 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"text-value": props.textValue ?? String(props.value),
 				as: props.as,
 				"as-child": props.asChild,
-				class: "list-box-item list-box-item--default",
+				class: normalizeClass(unref(composeClassName)(unref(itemSlots).item(), props.classNames?.item)),
 				"data-slot": "list-box-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
@@ -57,7 +61,7 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						_: 3
 					}, 512),
 					createVNode(unref(SelectItemIndicator), {
-						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[1] || (_cache[1] = createElementVNode("svg", {
@@ -74,7 +78,7 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}),
+					}, 8, ["class"]),
 					renderSlot(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -83,7 +87,8 @@ var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"disabled",
 				"text-value",
 				"as",
-				"as-child"
+				"as-child",
+				"class"
 			]);
 		};
 	}

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

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