@auronui/vue 1.4.1 → 1.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOverflowChips.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\n\nconst props = defineProps<{\n  values: SelectItemValue[]\n  getLabel: (value: SelectItemValue) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      // Last chip: use full budget (no badge needed if everything fits).\n      // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SelectOverflowChips.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\nimport type { ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  values: SelectItemValue[]\n  getLabel: (value: SelectItemValue) => string\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      // Last chip: use full budget (no badge needed if everything fits).\n      // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -18,7 +18,8 @@ var SelectOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	__name: "SelectOverflowChips",
 	props: {
 		values: {},
-		getLabel: { type: Function }
+		getLabel: { type: Function },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -63,19 +64,21 @@ var SelectOverflowChips_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					key: val,
 					"data-chip-item": "",
 					size: "sm",
-					style: normalizeStyle(i >= visibleCount.value ? "display: none" : void 0)
+					style: normalizeStyle(i >= visibleCount.value ? "display: none" : void 0),
+					"class-names": props.classNames?.chip
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(__props.getLabel(val)), 1)]),
 					_: 2
-				}, 1032, ["style"]);
+				}, 1032, ["style", "class-names"]);
 			}), 128)), overflowCount.value > 0 ? (openBlock(), createBlock(Chip_default, {
 				key: 0,
 				size: "sm",
-				color: "default"
+				color: "default",
+				"class-names": props.classNames?.chip
 			}, {
 				default: withCtx(() => [createTextVNode(" +" + toDisplayString(overflowCount.value) + " more ", 1)]),
 				_: 1
-			})) : createCommentVNode("", true)], 512);
+			}, 8, ["class-names"])) : createCommentVNode("", true)], 512);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\n\nconst props = defineProps<{\n  values: SelectItemValue[]\n  getLabel: (value: SelectItemValue) => string\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      // Last chip: use full budget (no badge needed if everything fits).\n      // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAKd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAIjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAIvB,MAAM,SAHS,MAAM,MAAM,SAAS,IAGZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AAUrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAhBJ,mBAQO,UAAA,MAAA,WAPc,QAAA,SAAX,KAAK,MAAC;wBADhB,YAQO,cAAA;KANJ,KAAK;KACN,kBAAA;KACA,MAAK;KACJ,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;;4BAEpC,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAMO,cAAA;;IAJL,MAAK;IACL,OAAM;;2BAEL,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectOverflowChips.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/select/SelectOverflowChips.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, nextTick, useTemplateRef, onMounted, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport Chip from '../chip/Chip.vue'\nimport type { SelectItemValue } from './Select.context'\nimport type { ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  values: SelectItemValue[]\n  getLabel: (value: SelectItemValue) => string\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    chip: Partial<{\n      base: ClassValue\n      dot: ClassValue\n      startContent: ClassValue\n      label: ClassValue\n      endContent: ClassValue\n      closeButton: ClassValue\n    }>\n  }>\n}>()\n\nconst containerEl = useTemplateRef<HTMLElement>('container')\nconst visibleCount = ref(props.values.length)\nconst overflowCount = computed(() => Math.max(0, props.values.length - visibleCount.value))\n\n// Prevents re-entrant reflows while we are in the async measurement phase.\nlet measuring = false\n\nasync function reflow() {\n  if (measuring) return\n  measuring = true\n\n  try {\n    const el = containerEl.value\n    if (!el) return\n\n    // Phase 1: show all chips to measure their natural widths\n    visibleCount.value = props.values.length\n    await nextTick()\n\n    const chips = [...el.querySelectorAll<HTMLElement>('[data-chip-item]')]\n    if (!chips.length) return\n\n    const containerW = el.offsetWidth\n    if (!containerW) return\n\n    // BADGE_W = estimated chip width (68px) + CSS gap before it (4px).\n    // The sm Chip has px-2 (16px padding) so \"+N more\" fits in ~52–68px.\n    const BADGE_W = 76\n\n    let usedW = 0\n    let n = 0\n\n    for (let i = 0; i < chips.length; i++) {\n      const gap = i > 0 ? 4 : 0\n      const chipW = chips[i].offsetWidth\n      const isLast = i === chips.length - 1\n      // Last chip: use full budget (no badge needed if everything fits).\n      // Earlier chips: reserve BADGE_W so the badge has room when we do overflow.\n      const budget = isLast ? containerW : containerW - BADGE_W\n\n      if (usedW + gap + chipW > budget) break\n      usedW += gap + chipW\n      n++\n    }\n\n    visibleCount.value = Math.max(1, n)\n  } finally {\n    measuring = false\n  }\n}\n\nonMounted(reflow)\nuseResizeObserver(containerEl, reflow)\n\n// Watch a comma-joined string derived from the values — Vue uses Object.is for\n// primitives, so this only fires when the selection actually changes.\n//\n// WHY NOT { deep: true }: Vue's watch fires the callback whenever the effect\n// re-runs when deep=true (because `if (deep || hasChanged)` short-circuits).\n// Reka passes a new array reference for modelValue on every internal re-render\n// (optionsSet updates, dropdown open/close), so a deep or shallow ref watch\n// fires continuously, causing the reflow loop that produces the oscillation.\nwatch(\n  () => props.values.join('\\x00'),\n  () => reflow(),\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    style=\"display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; flex: 1; min-width: 0;\"\n  >\n    <Chip\n      v-for=\"(val, i) in values\"\n      :key=\"val\"\n      data-chip-item\n      size=\"sm\"\n      :style=\"i >= visibleCount ? 'display: none' : undefined\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      {{ getLabel(val) }}\n    </Chip>\n    <Chip\n      v-if=\"overflowCount > 0\"\n      size=\"sm\"\n      color=\"default\"\n      :class-names=\"props.classNames?.chip\"\n    >\n      +{{ overflowCount }} more\n    </Chip>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAgBd,MAAM,cAAc,eAA4B,YAAW;EAC3D,MAAM,eAAe,IAAI,MAAM,OAAO,OAAM;EAC5C,MAAM,gBAAgB,eAAe,KAAK,IAAI,GAAG,MAAM,OAAO,SAAS,aAAa,MAAM,CAAA;EAG1F,IAAI,YAAY;EAEhB,eAAe,SAAS;AACtB,OAAI,UAAW;AACf,eAAY;AAEZ,OAAI;IACF,MAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAGT,iBAAa,QAAQ,MAAM,OAAO;AAClC,UAAM,UAAS;IAEf,MAAM,QAAQ,CAAC,GAAG,GAAG,iBAA8B,mBAAmB,CAAA;AACtE,QAAI,CAAC,MAAM,OAAQ;IAEnB,MAAM,aAAa,GAAG;AACtB,QAAI,CAAC,WAAY;IAIjB,MAAM,UAAU;IAEhB,IAAI,QAAQ;IACZ,IAAI,IAAI;AAER,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,MAAM,IAAI,IAAI,IAAI;KACxB,MAAM,QAAQ,MAAM,GAAG;KAIvB,MAAM,SAHS,MAAM,MAAM,SAAS,IAGZ,aAAa,aAAa;AAElD,SAAI,QAAQ,MAAM,QAAQ,OAAQ;AAClC,cAAS,MAAM;AACf;;AAGF,iBAAa,QAAQ,KAAK,IAAI,GAAG,EAAC;aAC1B;AACR,gBAAY;;;AAIhB,YAAU,OAAM;AAChB,oBAAkB,aAAa,OAAM;AAUrC,cACQ,MAAM,OAAO,KAAK,KAAO,QACzB,QAAQ,EACd,EAAE,OAAO,QAAQ,CACnB;;uBAIE,mBAsBM,OAtBN,YAsBM,EAAA,UAAA,KAAA,EAlBJ,mBASO,UAAA,MAAA,WARc,QAAA,SAAX,KAAK,MAAC;wBADhB,YASO,cAAA;KAPJ,KAAK;KACN,kBAAA;KACA,MAAK;KACJ,OAAK,eAAE,KAAK,aAAA,QAAY,kBAAqB,KAAA,EAAS;KACtD,eAAa,MAAM,YAAY;;4BAEb,CAAA,gBAAA,gBAAhB,QAAA,SAAS,IAAG,CAAA,EAAA,EAAA,CAAA,CAAA;;;cAGT,cAAA,QAAa,KAAA,WAAA,EADrB,YAOO,cAAA;;IALL,MAAK;IACL,OAAM;IACL,eAAa,MAAM,YAAY;;2BAE/B,CAAA,gBADF,OACE,gBAAG,cAAA,MAAa,GAAG,UACtB,EAAA,CAAA,CAAA"}

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

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

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

@@ -1,3 +1,4 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import FieldLabel_default from "../_shared/FieldLabel.js";
 import { useSelectInject } from "./Select.context.js";
@@ -21,7 +22,8 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -51,7 +53,7 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectTrigger), {
 				id: unref(ctx).triggerId.value,
-				class: normalizeClass(unref(ctx).slots.value.trigger()),
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.trigger(), props.classNames?.trigger)),
 				"data-filled": isFilled.value || void 0,
 				"data-invalid": unref(ctx).isInvalid.value || void 0,
 				"data-readonly": unref(ctx).isReadonly.value || void 0,
@@ -70,7 +72,7 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						for: unref(ctx).triggerId.value,
 						label: unref(ctx).label.value,
 						"is-required": unref(ctx).isRequired.value,
-						class: normalizeClass(unref(ctx).slots.value.label())
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.label(), props.classNames?.label))
 					}, null, 8, [
 						"for",
 						"label",
@@ -79,12 +81,12 @@ var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					])) : createCommentVNode("", true),
 					_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
 						key: 1,
-						class: normalizeClass(unref(ctx).slots.value.startContent()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "default"),
 					createVNode(unref(SelectIcon), {
-						class: normalizeClass(unref(ctx).slots.value.indicator()),
+						class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "select-default-indicator"
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "selectorIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { composeClassName } from "../../utils/composeClassName.js";
 import { useSelectInject } from "./Select.context.js";
 import SelectOverflowChips_default from "./SelectOverflowChips.js";
 import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
@@ -12,14 +13,15 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useSelectInject();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectValue), {
-				class: normalizeClass(unref(ctx).slots.value.value()),
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slots.value.value(), props.classNames?.value)),
 				placeholder: props.placeholder,
 				as: props.as,
 				"as-child": props.asChild,
@@ -28,8 +30,13 @@ var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				default: withCtx(({ selectedLabel, modelValue }) => [unref(ctx).multiple.value && Array.isArray(modelValue) && modelValue.length > 0 ? (openBlock(), createBlock(SelectOverflowChips_default, {
 					key: 0,
 					values: modelValue,
-					"get-label": unref(ctx).itemLabel
-				}, null, 8, ["values", "get-label"])) : unref(ctx).multiple.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(modelValue)), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
+					"get-label": unref(ctx).itemLabel,
+					"class-names": { chip: props.classNames?.chip }
+				}, null, 8, [
+					"values",
+					"get-label",
+					"class-names"
+				])) : unref(ctx).multiple.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(ctx).itemLabel(modelValue)), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createTextVNode(toDisplayString(props.placeholder), 1)], 64))]),
 				_: 1
 			}, 8, [
 				"class",

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

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

package/dist/components/separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/separator/Separator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { separatorVariants, type SeparatorVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  orientation?: SeparatorVariants['orientation']\n  variant?: SeparatorVariants['variant']\n  class?: string\n}>(), {\n  orientation: 'horizontal',\n  variant: 'default',\n})\n\nconst slots = useSlots()\nconst hasLabel = computed(() => !!slots.default)\nconst classes = computed(() =>\n  composeClassName(separatorVariants({ orientation: props.orientation, variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n  <hr\n    v-if=\"props.orientation !== 'vertical' && !hasLabel\"\n    :class=\"classes\"\n  >\n  <div\n    v-else-if=\"props.orientation === 'vertical'\"\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n  />\n  <div\n    v-else\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  >\n    <div class=\"separator__line\" />\n    <div class=\"separator__content\">\n      <slot />\n    </div>\n    <div class=\"separator__line\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/separator/Separator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { separatorVariants, type SeparatorVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  orientation?: SeparatorVariants['orientation']\n  variant?: SeparatorVariants['variant']\n  class?: string\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    line: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  orientation: 'horizontal',\n  variant: 'default',\n})\n\nconst slots = useSlots()\nconst hasLabel = computed(() => !!slots.default)\nconst slotFns = computed(() => separatorVariants({ orientation: props.orientation, variant: props.variant }))\nconst classes = computed(() =>\n  composeClassName(slotFns.value.base(), props.class)\n)\n</script>\n\n<template>\n  <hr\n    v-if=\"props.orientation !== 'vertical' && !hasLabel\"\n    :class=\"classes\"\n  >\n  <div\n    v-else-if=\"props.orientation === 'vertical'\"\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n  />\n  <div\n    v-else\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  >\n    <div :class=\"composeClassName(slotFns.line(), props.classNames?.line)\" />\n    <div :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </div>\n    <div :class=\"composeClassName(slotFns.line(), props.classNames?.line)\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/separator/Separator.vue_vue_type_script_setup_true_lang.js

@@ -1,23 +1,24 @@
 import { composeClassName } from "../../utils/composeClassName.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, useSlots } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots } from "vue";
 import { separatorVariants } from "@auronui/styles";
 //#region src/components/separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "separator__content" };
 var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Separator",
 	props: {
 		orientation: { default: "horizontal" },
 		variant: { default: "default" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slots = useSlots();
 		const hasLabel = computed(() => !!slots.default);
-		const classes = computed(() => composeClassName(separatorVariants({
+		const slotFns = computed(() => separatorVariants({
 			orientation: props.orientation,
 			variant: props.variant
-		}), props.class));
+		}));
+		const classes = computed(() => composeClassName(slotFns.value.base(), props.class));
 		return (_ctx, _cache) => {
 			return props.orientation !== "vertical" && !hasLabel.value ? (openBlock(), createElementBlock("hr", {
 				key: 0,
@@ -33,9 +34,9 @@ var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				role: "separator",
 				"aria-orientation": "horizontal"
 			}, [
-				_cache[0] || (_cache[0] = createElementVNode("div", { class: "separator__line" }, null, -1)),
-				createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
-				_cache[1] || (_cache[1] = createElementVNode("div", { class: "separator__line" }, null, -1))
+				createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.line(), props.classNames?.line)) }, null, 2),
+				createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [renderSlot(_ctx.$slots, "default")], 2),
+				createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.line(), props.classNames?.line)) }, null, 2)
 			], 2));
 		};
 	}

package/dist/components/separator/Separator.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/separator/Separator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { separatorVariants, type SeparatorVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  orientation?: SeparatorVariants['orientation']\n  variant?: SeparatorVariants['variant']\n  class?: string\n}>(), {\n  orientation: 'horizontal',\n  variant: 'default',\n})\n\nconst slots = useSlots()\nconst hasLabel = computed(() => !!slots.default)\nconst classes = computed(() =>\n  composeClassName(separatorVariants({ orientation: props.orientation, variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n  <hr\n    v-if=\"props.orientation !== 'vertical' && !hasLabel\"\n    :class=\"classes\"\n  >\n  <div\n    v-else-if=\"props.orientation === 'vertical'\"\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n  />\n  <div\n    v-else\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  >\n    <div class=\"separator__line\" />\n    <div class=\"separator__content\">\n      <slot />\n    </div>\n    <div class=\"separator__line\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAQ,UAAS;EACvB,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,QAAO;EAC/C,MAAM,UAAU,eACd,iBAAiB,kBAAkB;GAAE,aAAa,MAAM;GAAa,SAAS,MAAM;GAAS,CAAC,EAAE,MAAM,MAAK,CAC7G;;UAKU,MAAM,gBAAW,cAAA,CAAoB,SAAA,SAAA,WAAA,EAD7C,mBAGC,MAAA;;IADE,OAAK,eAAE,QAAA,MAAO;kBAGJ,MAAM,gBAAW,cAAA,WAAA,EAD9B,mBAKE,OAAA;;IAHC,OAAK,eAAE,QAAA,MAAO;IACf,MAAK;IACL,oBAAiB;gCAEnB,mBAWM,OAAA;;IATH,OAAK,eAAE,QAAA,MAAO;IACf,MAAK;IACL,oBAAiB;;8BAEjB,mBAA+B,OAAA,EAA1B,OAAM,mBAAiB,EAAA,MAAA,GAAA;IAC5B,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;8BAEV,mBAA+B,OAAA,EAA1B,OAAM,mBAAiB,EAAA,MAAA,GAAA"}
+{"version":3,"file":"Separator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/separator/Separator.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { separatorVariants, type SeparatorVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  orientation?: SeparatorVariants['orientation']\n  variant?: SeparatorVariants['variant']\n  class?: string\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    line: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  orientation: 'horizontal',\n  variant: 'default',\n})\n\nconst slots = useSlots()\nconst hasLabel = computed(() => !!slots.default)\nconst slotFns = computed(() => separatorVariants({ orientation: props.orientation, variant: props.variant }))\nconst classes = computed(() =>\n  composeClassName(slotFns.value.base(), props.class)\n)\n</script>\n\n<template>\n  <hr\n    v-if=\"props.orientation !== 'vertical' && !hasLabel\"\n    :class=\"classes\"\n  >\n  <div\n    v-else-if=\"props.orientation === 'vertical'\"\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n  />\n  <div\n    v-else\n    :class=\"classes\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  >\n    <div :class=\"composeClassName(slotFns.line(), props.classNames?.line)\" />\n    <div :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </div>\n    <div :class=\"composeClassName(slotFns.line(), props.classNames?.line)\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAcd,MAAM,QAAQ,UAAS;EACvB,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,QAAO;EAC/C,MAAM,UAAU,eAAe,kBAAkB;GAAE,aAAa,MAAM;GAAa,SAAS,MAAM;GAAS,CAAC,CAAA;EAC5G,MAAM,UAAU,eACd,iBAAiB,QAAQ,MAAM,MAAM,EAAE,MAAM,MAAK,CACpD;;UAKU,MAAM,gBAAW,cAAA,CAAoB,SAAA,SAAA,WAAA,EAD7C,mBAGC,MAAA;;IADE,OAAK,eAAE,QAAA,MAAO;kBAGJ,MAAM,gBAAW,cAAA,WAAA,EAD9B,mBAKE,OAAA;;IAHC,OAAK,eAAE,QAAA,MAAO;IACf,MAAK;IACL,oBAAiB;gCAEnB,mBAWM,OAAA;;IATH,OAAK,eAAE,QAAA,MAAO;IACf,MAAK;IACL,oBAAiB;;IAEjB,mBAAyE,OAAA,EAAnE,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA,MAAA,EAAA;IACpE,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACxE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA;IAEV,mBAAyE,OAAA,EAAnE,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA,MAAA,EAAA"}

package/dist/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref } from 'vue'\nimport { stepperVariants, type StepperVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { stepperContextKey, type StepStatus } from './Stepper.context'\nimport StepperItem from './StepperItem.vue'\nimport StepperIndicator from './StepperIndicator.vue'\nimport StepperTitle from './StepperTitle.vue'\nimport StepperDescription from './StepperDescription.vue'\nimport StepperSeparator from './StepperSeparator.vue'\nimport StepperContent from './StepperContent.vue'\n\ntype StepperShorthandItem = { title?: string; description?: string }\n\nconst props = withDefaults(defineProps<{\n  modelValue?: number\n  defaultValue?: number\n  totalSteps?: number\n  orientation?: StepperVariants['orientation']\n  size?: StepperVariants['size']\n  color?: StepperVariants['color']\n  class?: ClassValue\n  /** Per-slot class name overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render steps from an array instead of the compound slot API */\n  items?: StepperShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: 1,\n  totalSteps: 0,\n  orientation: 'horizontal',\n  size: 'md',\n  color: 'accent',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [step: number]\n}>()\n\nconst internalStep = ref(props.defaultValue ?? 1)\nconst currentStep = computed({\n  get: () => props.modelValue ?? internalStep.value,\n  set: (val) => {\n    internalStep.value = val\n    emit('update:modelValue', val)\n  },\n})\n\nconst slotFns = computed(() =>\n  stepperVariants({\n    orientation: props.orientation,\n    size: props.size,\n    color: props.color,\n  }),\n)\n\nfunction getStepStatus(step: number): StepStatus {\n  const curr = currentStep.value\n  if (step < curr) return 'completed'\n  if (step === curr) return 'current'\n  return 'pending'\n}\n\nconst resolvedTotalSteps = computed(() => props.items ? props.items.length : props.totalSteps)\n\nprovide(stepperContextKey, {\n  currentStep: computed(() => currentStep.value),\n  orientation: computed(() => props.orientation ?? 'horizontal'),\n  size: computed(() => props.size ?? 'md'),\n  color: computed(() => props.color ?? 'accent'),\n  totalSteps: resolvedTotalSteps,\n  getStepStatus,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-label=\"`Step ${currentStep} of ${resolvedTotalSteps}`\"\n    data-slot=\"stepper\"\n  >\n    <template v-if=\"props.items\">\n      <StepperItem\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx + 1\"\n        :step=\"idx + 1\"\n      >\n        <StepperIndicator>{{ idx + 1 }}</StepperIndicator>\n        <StepperSeparator v-if=\"idx < props.items.length - 1\" />\n        <StepperContent>\n          <StepperTitle v-if=\"item.title\">{{ item.title }}</StepperTitle>\n          <StepperDescription v-if=\"item.description\">{{ item.description }}</StepperDescription>\n        </StepperContent>\n      </StepperItem>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref } from 'vue'\nimport { stepperVariants, type StepperVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { stepperContextKey, type StepStatus } from './Stepper.context'\nimport StepperItem from './StepperItem.vue'\nimport StepperIndicator from './StepperIndicator.vue'\nimport StepperTitle from './StepperTitle.vue'\nimport StepperDescription from './StepperDescription.vue'\nimport StepperSeparator from './StepperSeparator.vue'\nimport StepperContent from './StepperContent.vue'\n\ntype StepperShorthandItem = { title?: string; description?: string }\n\nconst props = withDefaults(defineProps<{\n  modelValue?: number\n  defaultValue?: number\n  totalSteps?: number\n  orientation?: StepperVariants['orientation']\n  size?: StepperVariants['size']\n  color?: StepperVariants['color']\n  class?: ClassValue\n  /** Per-slot class name overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    item: ClassValue\n    indicator: ClassValue\n    separator: ClassValue\n    content: ClassValue\n    title: ClassValue\n    description: ClassValue\n  }>\n  /** Shorthand API: render steps from an array instead of the compound slot API */\n  items?: StepperShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: 1,\n  totalSteps: 0,\n  orientation: 'horizontal',\n  size: 'md',\n  color: 'accent',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [step: number]\n}>()\n\nconst internalStep = ref(props.defaultValue ?? 1)\nconst currentStep = computed({\n  get: () => props.modelValue ?? internalStep.value,\n  set: (val) => {\n    internalStep.value = val\n    emit('update:modelValue', val)\n  },\n})\n\nconst slotFns = computed(() =>\n  stepperVariants({\n    orientation: props.orientation,\n    size: props.size,\n    color: props.color,\n  }),\n)\n\nfunction getStepStatus(step: number): StepStatus {\n  const curr = currentStep.value\n  if (step < curr) return 'completed'\n  if (step === curr) return 'current'\n  return 'pending'\n}\n\nconst resolvedTotalSteps = computed(() => props.items ? props.items.length : props.totalSteps)\n\nprovide(stepperContextKey, {\n  currentStep: computed(() => currentStep.value),\n  orientation: computed(() => props.orientation ?? 'horizontal'),\n  size: computed(() => props.size ?? 'md'),\n  color: computed(() => props.color ?? 'accent'),\n  totalSteps: resolvedTotalSteps,\n  getStepStatus,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-label=\"`Step ${currentStep} of ${resolvedTotalSteps}`\"\n    data-slot=\"stepper\"\n  >\n    <template v-if=\"props.items\">\n      <StepperItem\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx + 1\"\n        :step=\"idx + 1\"\n        :class-names=\"{ item: props.classNames?.item }\"\n      >\n        <StepperIndicator :class-names=\"{ indicator: props.classNames?.indicator }\">{{ idx + 1 }}</StepperIndicator>\n        <StepperSeparator\n          v-if=\"idx < props.items.length - 1\"\n          :class-names=\"{ separator: props.classNames?.separator }\"\n        />\n        <StepperContent :class-names=\"{ content: props.classNames?.content }\">\n          <StepperTitle v-if=\"item.title\" :class-names=\"{ title: props.classNames?.title }\">{{ item.title }}</StepperTitle>\n          <StepperDescription\n            v-if=\"item.description\"\n            :class-names=\"{ description: props.classNames?.description }\"\n          >{{ item.description }}</StepperDescription>\n        </StepperContent>\n      </StepperItem>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/stepper/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -72,27 +72,37 @@ var Stepper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			}, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item, idx) => {
 				return openBlock(), createBlock(StepperItem_default, {
 					key: idx + 1,
-					step: idx + 1
+					step: idx + 1,
+					"class-names": { item: props.classNames?.item }
 				}, {
 					default: withCtx(() => [
-						createVNode(StepperIndicator_default, null, {
+						createVNode(StepperIndicator_default, { "class-names": { indicator: props.classNames?.indicator } }, {
 							default: withCtx(() => [createTextVNode(toDisplayString(idx + 1), 1)]),
 							_: 2
-						}, 1024),
-						idx < props.items.length - 1 ? (openBlock(), createBlock(StepperSeparator_default, { key: 0 })) : createCommentVNode("", true),
-						createVNode(StepperContent_default, null, {
-							default: withCtx(() => [item.title ? (openBlock(), createBlock(StepperTitle_default, { key: 0 }, {
+						}, 1032, ["class-names"]),
+						idx < props.items.length - 1 ? (openBlock(), createBlock(StepperSeparator_default, {
+							key: 0,
+							"class-names": { separator: props.classNames?.separator }
+						}, null, 8, ["class-names"])) : createCommentVNode("", true),
+						createVNode(StepperContent_default, { "class-names": { content: props.classNames?.content } }, {
+							default: withCtx(() => [item.title ? (openBlock(), createBlock(StepperTitle_default, {
+								key: 0,
+								"class-names": { title: props.classNames?.title }
+							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
 								_: 2
-							}, 1024)) : createCommentVNode("", true), item.description ? (openBlock(), createBlock(StepperDescription_default, { key: 1 }, {
+							}, 1032, ["class-names"])) : createCommentVNode("", true), item.description ? (openBlock(), createBlock(StepperDescription_default, {
+								key: 1,
+								"class-names": { description: props.classNames?.description }
+							}, {
 								default: withCtx(() => [createTextVNode(toDisplayString(item.description), 1)]),
 								_: 2
-							}, 1024)) : createCommentVNode("", true)]),
+							}, 1032, ["class-names"])) : createCommentVNode("", true)]),
 							_: 2
-						}, 1024)
+						}, 1032, ["class-names"])
 					]),
 					_: 2
-				}, 1032, ["step"]);
+				}, 1032, ["step", "class-names"]);
 			}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1);
 		};
 	}

package/dist/components/stepper/Stepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/stepper/Stepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref } from 'vue'\nimport { stepperVariants, type StepperVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { stepperContextKey, type StepStatus } from './Stepper.context'\nimport StepperItem from './StepperItem.vue'\nimport StepperIndicator from './StepperIndicator.vue'\nimport StepperTitle from './StepperTitle.vue'\nimport StepperDescription from './StepperDescription.vue'\nimport StepperSeparator from './StepperSeparator.vue'\nimport StepperContent from './StepperContent.vue'\n\ntype StepperShorthandItem = { title?: string; description?: string }\n\nconst props = withDefaults(defineProps<{\n  modelValue?: number\n  defaultValue?: number\n  totalSteps?: number\n  orientation?: StepperVariants['orientation']\n  size?: StepperVariants['size']\n  color?: StepperVariants['color']\n  class?: ClassValue\n  /** Per-slot class name overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render steps from an array instead of the compound slot API */\n  items?: StepperShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: 1,\n  totalSteps: 0,\n  orientation: 'horizontal',\n  size: 'md',\n  color: 'accent',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [step: number]\n}>()\n\nconst internalStep = ref(props.defaultValue ?? 1)\nconst currentStep = computed({\n  get: () => props.modelValue ?? internalStep.value,\n  set: (val) => {\n    internalStep.value = val\n    emit('update:modelValue', val)\n  },\n})\n\nconst slotFns = computed(() =>\n  stepperVariants({\n    orientation: props.orientation,\n    size: props.size,\n    color: props.color,\n  }),\n)\n\nfunction getStepStatus(step: number): StepStatus {\n  const curr = currentStep.value\n  if (step < curr) return 'completed'\n  if (step === curr) return 'current'\n  return 'pending'\n}\n\nconst resolvedTotalSteps = computed(() => props.items ? props.items.length : props.totalSteps)\n\nprovide(stepperContextKey, {\n  currentStep: computed(() => currentStep.value),\n  orientation: computed(() => props.orientation ?? 'horizontal'),\n  size: computed(() => props.size ?? 'md'),\n  color: computed(() => props.color ?? 'accent'),\n  totalSteps: resolvedTotalSteps,\n  getStepStatus,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-label=\"`Step ${currentStep} of ${resolvedTotalSteps}`\"\n    data-slot=\"stepper\"\n  >\n    <template v-if=\"props.items\">\n      <StepperItem\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx + 1\"\n        :step=\"idx + 1\"\n      >\n        <StepperIndicator>{{ idx + 1 }}</StepperIndicator>\n        <StepperSeparator v-if=\"idx < props.items.length - 1\" />\n        <StepperContent>\n          <StepperTitle v-if=\"item.title\">{{ item.title }}</StepperTitle>\n          <StepperDescription v-if=\"item.description\">{{ item.description }}</StepperDescription>\n        </StepperContent>\n      </StepperItem>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAwBd,MAAM,OAAO;EAIb,MAAM,eAAe,IAAI,MAAM,gBAAgB,EAAC;EAChD,MAAM,cAAc,SAAS;GAC3B,WAAW,MAAM,cAAc,aAAa;GAC5C,MAAM,QAAQ;AACZ,iBAAa,QAAQ;AACrB,SAAK,qBAAqB,IAAG;;GAEhC,CAAA;EAED,MAAM,UAAU,eACd,gBAAgB;GACd,aAAa,MAAM;GACnB,MAAM,MAAM;GACZ,OAAO,MAAM;GACd,CAAC,CACJ;EAEA,SAAS,cAAc,MAA0B;GAC/C,MAAM,OAAO,YAAY;AACzB,OAAI,OAAO,KAAM,QAAO;AACxB,OAAI,SAAS,KAAM,QAAO;AAC1B,UAAO;;EAGT,MAAM,qBAAqB,eAAe,MAAM,QAAQ,MAAM,MAAM,SAAS,MAAM,WAAU;AAE7F,UAAQ,mBAAmB;GACzB,aAAa,eAAe,YAAY,MAAM;GAC9C,aAAa,eAAe,MAAM,eAAe,aAAa;GAC9D,MAAM,eAAe,MAAM,QAAQ,KAAK;GACxC,OAAO,eAAe,MAAM,SAAS,SAAS;GAC9C,YAAY;GACZ;GACD,CAAA;;uBAIC,mBAoBM,OAAA;IAnBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,cAAU,QAAU,YAAA,MAAW,MAAO,mBAAA;IACvC,aAAU;OAEM,MAAM,SAAA,UAAA,KAAA,EACpB,mBAWc,UAAA,EAAA,KAAA,GAAA,EAAA,WAVU,MAAM,QAApB,MAAM,QAAG;wBADnB,YAWc,qBAAA;KATX,KAAK,MAAG;KACR,MAAM,MAAG;;4BAEwC;MAAlD,YAAkD,0BAAA,MAAA;8BAAnB,CAAA,gBAAA,gBAAV,MAAG,EAAA,EAAA,EAAA,CAAA,CAAA;;;MACA,MAAM,MAAM,MAAM,SAAM,KAAA,WAAA,EAAhD,YAAwD,0BAAA,EAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MACxD,YAGiB,wBAAA,MAAA;8BAFgD,CAA3C,KAAK,SAAA,WAAA,EAAzB,YAA+D,sBAAA,EAAA,KAAA,GAAA,EAAA;+BAAf,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;iDACnB,KAAK,eAAA,WAAA,EAA/B,YAAuF,4BAAA,EAAA,KAAA,GAAA,EAAA;+BAArB,CAAA,gBAAA,gBAAnB,KAAK,YAAW,EAAA,EAAA,CAAA,CAAA;;;;;;;;eAIrE,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"Stepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/stepper/Stepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref } from 'vue'\nimport { stepperVariants, type StepperVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { stepperContextKey, type StepStatus } from './Stepper.context'\nimport StepperItem from './StepperItem.vue'\nimport StepperIndicator from './StepperIndicator.vue'\nimport StepperTitle from './StepperTitle.vue'\nimport StepperDescription from './StepperDescription.vue'\nimport StepperSeparator from './StepperSeparator.vue'\nimport StepperContent from './StepperContent.vue'\n\ntype StepperShorthandItem = { title?: string; description?: string }\n\nconst props = withDefaults(defineProps<{\n  modelValue?: number\n  defaultValue?: number\n  totalSteps?: number\n  orientation?: StepperVariants['orientation']\n  size?: StepperVariants['size']\n  color?: StepperVariants['color']\n  class?: ClassValue\n  /** Per-slot class name overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    item: ClassValue\n    indicator: ClassValue\n    separator: ClassValue\n    content: ClassValue\n    title: ClassValue\n    description: ClassValue\n  }>\n  /** Shorthand API: render steps from an array instead of the compound slot API */\n  items?: StepperShorthandItem[]\n}>(), {\n  modelValue: undefined,\n  defaultValue: 1,\n  totalSteps: 0,\n  orientation: 'horizontal',\n  size: 'md',\n  color: 'accent',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [step: number]\n}>()\n\nconst internalStep = ref(props.defaultValue ?? 1)\nconst currentStep = computed({\n  get: () => props.modelValue ?? internalStep.value,\n  set: (val) => {\n    internalStep.value = val\n    emit('update:modelValue', val)\n  },\n})\n\nconst slotFns = computed(() =>\n  stepperVariants({\n    orientation: props.orientation,\n    size: props.size,\n    color: props.color,\n  }),\n)\n\nfunction getStepStatus(step: number): StepStatus {\n  const curr = currentStep.value\n  if (step < curr) return 'completed'\n  if (step === curr) return 'current'\n  return 'pending'\n}\n\nconst resolvedTotalSteps = computed(() => props.items ? props.items.length : props.totalSteps)\n\nprovide(stepperContextKey, {\n  currentStep: computed(() => currentStep.value),\n  orientation: computed(() => props.orientation ?? 'horizontal'),\n  size: computed(() => props.size ?? 'md'),\n  color: computed(() => props.color ?? 'accent'),\n  totalSteps: resolvedTotalSteps,\n  getStepStatus,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-label=\"`Step ${currentStep} of ${resolvedTotalSteps}`\"\n    data-slot=\"stepper\"\n  >\n    <template v-if=\"props.items\">\n      <StepperItem\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx + 1\"\n        :step=\"idx + 1\"\n        :class-names=\"{ item: props.classNames?.item }\"\n      >\n        <StepperIndicator :class-names=\"{ indicator: props.classNames?.indicator }\">{{ idx + 1 }}</StepperIndicator>\n        <StepperSeparator\n          v-if=\"idx < props.items.length - 1\"\n          :class-names=\"{ separator: props.classNames?.separator }\"\n        />\n        <StepperContent :class-names=\"{ content: props.classNames?.content }\">\n          <StepperTitle v-if=\"item.title\" :class-names=\"{ title: props.classNames?.title }\">{{ item.title }}</StepperTitle>\n          <StepperDescription\n            v-if=\"item.description\"\n            :class-names=\"{ description: props.classNames?.description }\"\n          >{{ item.description }}</StepperDescription>\n        </StepperContent>\n      </StepperItem>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAIb,MAAM,eAAe,IAAI,MAAM,gBAAgB,EAAC;EAChD,MAAM,cAAc,SAAS;GAC3B,WAAW,MAAM,cAAc,aAAa;GAC5C,MAAM,QAAQ;AACZ,iBAAa,QAAQ;AACrB,SAAK,qBAAqB,IAAG;;GAEhC,CAAA;EAED,MAAM,UAAU,eACd,gBAAgB;GACd,aAAa,MAAM;GACnB,MAAM,MAAM;GACZ,OAAO,MAAM;GACd,CAAC,CACJ;EAEA,SAAS,cAAc,MAA0B;GAC/C,MAAM,OAAO,YAAY;AACzB,OAAI,OAAO,KAAM,QAAO;AACxB,OAAI,SAAS,KAAM,QAAO;AAC1B,UAAO;;EAGT,MAAM,qBAAqB,eAAe,MAAM,QAAQ,MAAM,MAAM,SAAS,MAAM,WAAU;AAE7F,UAAQ,mBAAmB;GACzB,aAAa,eAAe,YAAY,MAAM;GAC9C,aAAa,eAAe,MAAM,eAAe,aAAa;GAC9D,MAAM,eAAe,MAAM,QAAQ,KAAK;GACxC,OAAO,eAAe,MAAM,SAAS,SAAS;GAC9C,YAAY;GACZ;GACD,CAAA;;uBAIC,mBA2BM,OAAA;IA1BH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,cAAU,QAAU,YAAA,MAAW,MAAO,mBAAA;IACvC,aAAU;OAEM,MAAM,SAAA,UAAA,KAAA,EACpB,mBAkBc,UAAA,EAAA,KAAA,GAAA,EAAA,WAjBU,MAAM,QAApB,MAAM,QAAG;wBADnB,YAkBc,qBAAA;KAhBX,KAAK,MAAG;KACR,MAAM,MAAG;KACT,eAAW,EAAA,MAAU,MAAM,YAAY,MAAI;;4BAEgE;MAA5G,YAA4G,0BAAA,EAAzF,eAAW,EAAA,WAAe,MAAM,YAAY,WAAS,EAAA,EAAA;8BAAiB,CAAA,gBAAA,gBAAV,MAAG,EAAA,EAAA,EAAA,CAAA,CAAA;;;MAE1E,MAAM,MAAM,MAAM,SAAM,KAAA,WAAA,EADhC,YAGE,0BAAA;;OADC,eAAW,EAAA,WAAe,MAAM,YAAY,WAAS;;MAExD,YAMiB,wBAAA,EANA,eAAW,EAAA,SAAa,MAAM,YAAY,SAAO,EAAA,EAAA;8BACiD,CAA7F,KAAK,SAAA,WAAA,EAAzB,YAAiH,sBAAA;;QAAhF,eAAW,EAAA,OAAW,MAAM,YAAY,OAAK;;+BAAoB,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;kEAEvF,KAAK,eAAA,WAAA,EADb,YAG4C,4BAAA;;QADzC,eAAW,EAAA,aAAiB,MAAM,YAAY,aAAW;;+BACrC,CAAA,gBAAA,gBAAnB,KAAK,YAAW,EAAA,EAAA,CAAA,CAAA;;;;;;;;eAI1B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/switch/SwitchGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchGroup.js","names":[],"sources":["../../../src/components/switch/SwitchGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { switchGroupVariants, type SwitchGroupVariants, type SwitchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useSwitchGroupProvide } from './switch-group.context'\nimport SwitchInput from './Switch.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype SwitchShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  size?: SwitchVariants['size']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: SwitchGroupVariants['orientation']\n  isInvalid?: boolean\n  errorMessage?: string\n  label?: string\n  description?: string\n  class?: string\n  /** Shorthand API: render switches from an array instead of the compound slot API */\n  items?: SwitchShorthandItem[]\n}>(), {\n  size: 'md',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  errorMessage: undefined,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'SwitchGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Switches\nuseSwitchGroupProvide({\n  size: toRef(props, 'size'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupSlots = computed(() =>\n  switchGroupVariants({ orientation: props.orientation })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupSlots.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"switch-group__label\"\n    >{{ props.label }}</span>\n    <div :class=\"groupSlots.items()\">\n      <template v-if=\"props.items\">\n        <SwitchInput\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 }}</SwitchInput>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"switch-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"switch-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SwitchGroup.js","names":[],"sources":["../../../src/components/switch/SwitchGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { switchGroupVariants, type SwitchGroupVariants, type SwitchVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSwitchGroupProvide } from './switch-group.context'\nimport SwitchInput from './Switch.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype SwitchShorthandItem = {\n  value: string\n  label?: string\n  disabled?: boolean\n  class?: ClassValue\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    thumb: ClassValue\n    content: ClassValue\n  }>\n}\n\nconst props = withDefaults(defineProps<{\n  size?: SwitchVariants['size']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: SwitchGroupVariants['orientation']\n  isInvalid?: boolean\n  errorMessage?: string\n  label?: string\n  description?: string\n  class?: string\n  /** Shorthand API: render switches from an array instead of the compound slot API */\n  items?: SwitchShorthandItem[]\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    items: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n    /** Applied to every shorthand-rendered Switch, before any per-item override */\n    switch: Partial<{\n      base: ClassValue\n      control: ClassValue\n      thumb: ClassValue\n      content: ClassValue\n    }>\n  }>\n}>(), {\n  size: 'md',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  errorMessage: undefined,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'SwitchGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Switches\nuseSwitchGroupProvide({\n  size: toRef(props, 'size'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupSlots = computed(() =>\n  switchGroupVariants({ orientation: props.orientation })\n)\n\n// Group-wide switch classNames apply first; per-item classNames win on conflict.\nfunction itemClassNames(item: SwitchShorthandItem) {\n  return {\n    base: composeClassName(props.classNames?.switch?.base, item.classNames?.base),\n    control: composeClassName(props.classNames?.switch?.control, item.classNames?.control),\n    thumb: composeClassName(props.classNames?.switch?.thumb, item.classNames?.thumb),\n    content: composeClassName(props.classNames?.switch?.content, item.classNames?.content),\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupSlots.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"composeClassName(groupSlots.label(), props.classNames?.label)\"\n    >{{ props.label }}</span>\n    <div :class=\"composeClassName(groupSlots.items(), props.classNames?.items)\">\n      <template v-if=\"props.items\">\n        <SwitchInput\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 }}</SwitchInput>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      :class=\"composeClassName(groupSlots.errorMessage(), props.classNames?.errorMessage)\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      :class=\"composeClassName(groupSlots.description(), props.classNames?.description)\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/switch/SwitchGroup.vue_vue_type_script_setup_true_lang.js

@@ -10,14 +10,6 @@ var _hoisted_1 = [
 	"aria-invalid",
 	"data-orientation"
 ];
-var _hoisted_2 = {
-	key: 1,
-	class: "switch-group__error-message"
-};
-var _hoisted_3 = {
-	key: 2,
-	class: "switch-group__description"
-};
 var SwitchGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SwitchGroup",
 	props: {
@@ -42,7 +34,8 @@ var SwitchGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		label: { default: void 0 },
 		description: { default: void 0 },
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -66,6 +59,14 @@ var SwitchGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		});
 		const labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`;
 		const groupSlots = computed(() => switchGroupVariants({ orientation: props.orientation }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.switch?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.switch?.control, item.classNames?.control),
+				thumb: composeClassName(props.classNames?.switch?.thumb, item.classNames?.thumb),
+				content: composeClassName(props.classNames?.switch?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				role: "group",
@@ -77,19 +78,32 @@ var SwitchGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				props.label ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					id: labelId,
-					class: "switch-group__label"
-				}, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(groupSlots.value.items()) }, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
+					class: normalizeClass(unref(composeClassName)(groupSlots.value.label(), props.classNames?.label))
+				}, toDisplayString(props.label), 3)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(composeClassName)(groupSlots.value.items(), props.classNames?.items)) }, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
 					return openBlock(), createBlock(Switch_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"]);
+					}, 1032, [
+						"value",
+						"is-disabled",
+						"class",
+						"class-names"
+					]);
 				}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
-				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)
+				props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(composeClassName)(groupSlots.value.errorMessage(), props.classNames?.errorMessage))
+				}, toDisplayString(props.errorMessage), 3)) : props.description ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(composeClassName)(groupSlots.value.description(), props.classNames?.description))
+				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}

package/dist/components/switch/SwitchGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/switch/SwitchGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { switchGroupVariants, type SwitchGroupVariants, type SwitchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useSwitchGroupProvide } from './switch-group.context'\nimport SwitchInput from './Switch.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype SwitchShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  size?: SwitchVariants['size']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: SwitchGroupVariants['orientation']\n  isInvalid?: boolean\n  errorMessage?: string\n  label?: string\n  description?: string\n  class?: string\n  /** Shorthand API: render switches from an array instead of the compound slot API */\n  items?: SwitchShorthandItem[]\n}>(), {\n  size: 'md',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  errorMessage: undefined,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'SwitchGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Switches\nuseSwitchGroupProvide({\n  size: toRef(props, 'size'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupSlots = computed(() =>\n  switchGroupVariants({ orientation: props.orientation })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupSlots.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"switch-group__label\"\n    >{{ props.label }}</span>\n    <div :class=\"groupSlots.items()\">\n      <template v-if=\"props.items\">\n        <SwitchInput\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 }}</SwitchInput>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"switch-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"switch-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;EAGhC,MAAM,aAAa,yBACjB,eAAe,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC/E;AAGA,wBAAsB;GACpB,MAAM,MAAM,OAAO,OAAO;GAC1B,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACpC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,sBAAsB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE5E,MAAM,aAAa,eACjB,oBAAoB,EAAE,aAAa,MAAM,aAAa,CAAA,CACxD;;uBAIE,mBA+BM,OAAA;IA9BJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,gBAAc,MAAM,aAAa,KAAA;IACjC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,MAAI,EAAI,MAAM,MAAK,CAAA;;IAG/C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACL,OAAM;uBACJ,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAUM,OAAA,EAVA,OAAK,eAAE,WAAA,MAAW,OAAK,CAAA,EAAA,EAAA,CACX,MAAM,SAAA,UAAA,KAAA,EACpB,mBAK6C,UAAA,EAAA,KAAA,GAAA,EAAA,WAJ5B,MAAM,QAAd,SAAI;yBADb,YAK6C,gBAAA;MAH1C,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,eAAa,KAAK;;6BACU,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA;IAGT,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":"SwitchGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/switch/SwitchGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { switchGroupVariants, type SwitchGroupVariants, type SwitchVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useSwitchGroupProvide } from './switch-group.context'\nimport SwitchInput from './Switch.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype SwitchShorthandItem = {\n  value: string\n  label?: string\n  disabled?: boolean\n  class?: ClassValue\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    thumb: ClassValue\n    content: ClassValue\n  }>\n}\n\nconst props = withDefaults(defineProps<{\n  size?: SwitchVariants['size']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: SwitchGroupVariants['orientation']\n  isInvalid?: boolean\n  errorMessage?: string\n  label?: string\n  description?: string\n  class?: string\n  /** Shorthand API: render switches from an array instead of the compound slot API */\n  items?: SwitchShorthandItem[]\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    items: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n    /** Applied to every shorthand-rendered Switch, before any per-item override */\n    switch: Partial<{\n      base: ClassValue\n      control: ClassValue\n      thumb: ClassValue\n      content: ClassValue\n    }>\n  }>\n}>(), {\n  size: 'md',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  errorMessage: undefined,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'SwitchGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Switches\nuseSwitchGroupProvide({\n  size: toRef(props, 'size'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupSlots = computed(() =>\n  switchGroupVariants({ orientation: props.orientation })\n)\n\n// Group-wide switch classNames apply first; per-item classNames win on conflict.\nfunction itemClassNames(item: SwitchShorthandItem) {\n  return {\n    base: composeClassName(props.classNames?.switch?.base, item.classNames?.base),\n    control: composeClassName(props.classNames?.switch?.control, item.classNames?.control),\n    thumb: composeClassName(props.classNames?.switch?.thumb, item.classNames?.thumb),\n    content: composeClassName(props.classNames?.switch?.content, item.classNames?.content),\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupSlots.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"composeClassName(groupSlots.label(), props.classNames?.label)\"\n    >{{ props.label }}</span>\n    <div :class=\"composeClassName(groupSlots.items(), props.classNames?.items)\">\n      <template v-if=\"props.items\">\n        <SwitchInput\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 }}</SwitchInput>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      :class=\"composeClassName(groupSlots.errorMessage(), props.classNames?.errorMessage)\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      :class=\"composeClassName(groupSlots.description(), props.classNames?.description)\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ;EA4Cd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;EAGhC,MAAM,aAAa,yBACjB,eAAe,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC/E;AAGA,wBAAsB;GACpB,MAAM,MAAM,OAAO,OAAO;GAC1B,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACpC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,sBAAsB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE5E,MAAM,aAAa,eACjB,oBAAoB,EAAE,aAAa,MAAM,aAAa,CAAA,CACxD;EAGA,SAAS,eAAe,MAA2B;AACjD,UAAO;IACL,MAAM,iBAAiB,MAAM,YAAY,QAAQ,MAAM,KAAK,YAAY,KAAK;IAC7E,SAAS,iBAAiB,MAAM,YAAY,QAAQ,SAAS,KAAK,YAAY,QAAQ;IACtF,OAAO,iBAAiB,MAAM,YAAY,QAAQ,OAAO,KAAK,YAAY,MAAM;IAChF,SAAS,iBAAiB,MAAM,YAAY,QAAQ,SAAS,KAAK,YAAY,QAAQ;IACxF;;;uBAKA,mBAiCM,OAAA;IAhCJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,gBAAc,MAAM,aAAa,KAAA;IACjC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,MAAI,EAAI,MAAM,MAAK,CAAA;;IAG/C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uBAClE,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAYM,OAAA,EAZA,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA,EAAA,EAAA,CACvD,MAAM,SAAA,UAAA,KAAA,EACpB,mBAO6C,UAAA,EAAA,KAAA,GAAA,EAAA,WAN5B,MAAM,QAAd,SAAI;yBADb,YAO6C,gBAAA;MAL1C,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,eAAa,KAAK;MAClB,OAAK,eAAE,KAAK,MAAK;MACjB,eAAa,eAAe,KAAI;;6BACJ,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA;IAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAAA;;KAD7B,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;uBAChF,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAAA;;KAD5B,OAAK,eAAE,MAAA,iBAAgB,CAAC,WAAA,MAAW,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;uBAC9E,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}