@auronui/vue 1.0.20 → 1.0.22

package/dist/components/collapsible/CollapsibleContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :class=\"props.class || undefined\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EASd,MAAM,MAAM,sBAAqB;;uBAI/B,YAoBqB,MAAA,mBAAA,EAAA;IAnBlB,eAAa;IACb,OAAK,eAAE,MAAM,SAAS,KAAA,EAAS;;2BAiBd,CAflB,YAekB,MAAA,wBAAA,EAAA,MAAA;4BADH,CAZL,MAAA,IAAG,CAAC,OAAO,SAAA,WAAA,EADnB,YAaa,MAAA,OAAA,CAAA,KAAA;MAXX,KAAI;MACH,SAAS;OAAA,QAAA;OAAA,SAAA;OAAyB;MAClC,SAAS;OAAA,QAAA;OAAA,SAAA;OAA8B;MACvC,MAAM;OAAA,QAAA;OAAA,SAAA;OAAyB;MAC/B,YAAY;OAAA,UAAA;OAAA,MAAA;OAAkC;MAC/C,OAAA,EAAA,YAAA,UAAyB;MACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;;6BAInE,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA,CACtF,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"CollapsibleContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\n\nconst emit = defineEmits<{\n  'content-found': []\n}>()\n\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"props.class || undefined\"\n    @content-found=\"emit('content-found')\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAcd,MAAM,OAAO;EAIb,MAAM,MAAM,sBAAqB;;uBAI/B,YAuBqB,MAAA,mBAAA,EAAA;IAtBlB,eAAa;IACb,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAM,SAAS,KAAA,EAAS;IAC/B,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;2BAiBF,CAflB,YAekB,MAAA,wBAAA,EAAA,MAAA;4BADH,CAZL,MAAA,IAAG,CAAC,OAAO,SAAA,WAAA,EADnB,YAaa,MAAA,OAAA,CAAA,KAAA;MAXX,KAAI;MACH,SAAS;OAAA,QAAA;OAAA,SAAA;OAAyB;MAClC,SAAS;OAAA,QAAA;OAAA,SAAA;OAA8B;MACvC,MAAM;OAAA,QAAA;OAAA,SAAA;OAAyB;MAC/B,YAAY;OAAA,UAAA;OAAA,MAAA;OAAkC;MAC/C,OAAA,EAAA,YAAA,UAAyB;MACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;;6BAInE,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA,CACtF,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/collapsible/CollapsibleTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTrigger.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\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        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CollapsibleTrigger.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :as=\"props.as\" :as-child=\"props.asChild\" :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\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        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":""}

package/dist/components/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js

@@ -14,13 +14,19 @@ var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			Object,
 			Array
 		] },
-		classNames: {}
+		classNames: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(CollapsibleTrigger), { class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
+			return openBlock(), createBlock(unref(CollapsibleTrigger), {
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger))
+			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
 					class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"data-state": unref(ctx).isOpen.value ? "open" : "closed",
@@ -39,7 +45,11 @@ var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					focusable: "false"
 				}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1)]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\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        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,MAAM,sBAAqB;;uBAI/B,YAuBqB,MAAA,mBAAA,EAAA,EAvBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,SAAO,EAAI,MAAM,OAAO,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA;2BACtG,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,mBAoBO,QAAA;KAnBJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;KAClF,cAAY,MAAA,IAAG,CAAC,OAAO,QAAK,SAAA;KAC7B,eAAY;sCAEZ,mBAcM,OAAA;KAbJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;KACZ,WAAU;QAEV,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}
+{"version":3,"file":"CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :as=\"props.as\" :as-child=\"props.asChild\" :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\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        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAYd,MAAM,MAAM,sBAAqB;;uBAI/B,YAuBqB,MAAA,mBAAA,EAAA;IAvBA,IAAI,MAAM;IAAK,YAAU,MAAM;IAAU,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,SAAO,EAAI,MAAM,OAAO,MAAM,YAAY,QAAO,CAAA;;2BAC/I,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,mBAoBO,QAAA;KAnBJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;KAClF,cAAY,MAAA,IAAG,CAAC,OAAO,QAAK,SAAA;KAC7B,eAAY;sCAEZ,mBAcM,OAAA;KAbJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;KACZ,WAAU;QAEV,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}

package/dist/components/color-area/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorArea.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  xName?: string\n  yName?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n  asChild: false,\n  required: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :x-name=\"props.xName\"\n    :y-name=\"props.yName\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-area/ColorArea.vue_vue_type_script_setup_true_lang.js

@@ -19,9 +19,26 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		},
 		showDots: { default: false },
 		class: {},
-		thumbClass: {}
+		thumbClass: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		xName: {},
+		yName: {}
 	},
-	emits: ["update:modelValue", "update:color"],
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"change-end"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -58,8 +75,16 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"y-channel": __props.yChannel,
 				"color-space": __props.colorSpace,
 				disabled: __props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				"x-name": props.xName,
+				"y-name": props.yName,
 				class: normalizeClass(unref(composeClassName)(styles.value.base(), props.class)),
-				"onUpdate:color": onColorUpdate
+				"onUpdate:color": onColorUpdate,
+				onChange: _cache[0] || (_cache[0] = (v) => emit("change", v)),
+				onChangeEnd: _cache[1] || (_cache[1] = (v) => emit("change-end", v))
 			}, {
 				default: withCtx(() => [createVNode(unref(ColorAreaArea), { style: normalizeStyle(areaBgStyle.value) }, {
 					default: withCtx(() => [createVNode(unref(ColorAreaThumb), { class: normalizeClass(unref(composeClassName)(styles.value.thumb(), __props.thumbClass)) }, null, 8, ["class"])]),
@@ -72,6 +97,12 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"y-channel",
 				"color-space",
 				"disabled",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"x-name",
+				"y-name",
 				"class"
 			]);
 		};

package/dist/components/color-area/ColorArea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAiBd,MAAM,OAAO;EAMb,MAAM,YAAY,OAAO,uBAAuB,KAAI;EACpD,MAAM,QAAQ,YACV,OACA,cAAc;GAAE,OAAO,MAAM;GAAY,cAAc,MAAM;GAAc,CAAA;EAE/E,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,eACb,kBAAkB,EAAE,UAAU,MAAM,UAAU,CAAA,CAChD;EAEA,MAAM,cAAc,gBAAgB;GAClC,GAAG,uBAAuB,MAAM,OAAO,MAAM,UAAW,MAAM,SAAU;GACxE,UAAU;GACV,OAAO;GACP,cAAc;GACf,EAAC;EAEF,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY,CACpB;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,EAC3E;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,CAC5E,CAAA;QACI;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAYgB,MAAA,cAAA,EAAA;IAXb,eAAa,MAAA;IACb,aAAW,QAAA;IACX,aAAW,QAAA;IACX,eAAa,QAAA;IACb,UAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,kBAAc;;2BAIC,CAFhB,YAEgB,MAAA,cAAA,EAAA,EAFA,OAAK,eAAE,YAAA,MAAW,EAAA,EAAA;4BACwC,CAAxE,YAAwE,MAAA,eAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ColorArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  xName?: string\n  yName?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n  asChild: false,\n  required: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :x-name=\"props.xName\"\n    :y-name=\"props.yName\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EAQb,MAAM,YAAY,OAAO,uBAAuB,KAAI;EACpD,MAAM,QAAQ,YACV,OACA,cAAc;GAAE,OAAO,MAAM;GAAY,cAAc,MAAM;GAAc,CAAA;EAE/E,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,eACb,kBAAkB,EAAE,UAAU,MAAM,UAAU,CAAA,CAChD;EAEA,MAAM,cAAc,gBAAgB;GAClC,GAAG,uBAAuB,MAAM,OAAO,MAAM,UAAW,MAAM,SAAU;GACxE,UAAU;GACV,OAAO;GACP,cAAc;GACf,EAAC;EAEF,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY,CACpB;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,EAC3E;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,CAC5E,CAAA;QACI;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAoBgB,MAAA,cAAA,EAAA;IAnBb,eAAa,MAAA;IACb,aAAW,QAAA;IACX,aAAW,QAAA;IACX,eAAa,QAAA;IACb,UAAU,QAAA;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,UAAQ,MAAM;IACd,UAAQ,MAAM;IACd,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,kBAAc;IACd,UAAM,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,UAAW,EAAC;IACvC,aAAU,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,cAAe,EAAC;;2BAIhC,CAFhB,YAEgB,MAAA,cAAA,EAAA,EAFA,OAAK,eAAE,YAAA,MAAW,EAAA,EAAA;4BACwC,CAAxE,YAAwE,MAAA,eAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

package/dist/components/color-field/ColorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorField.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :color-space=\"(props.colorSpace as any)\"\n    :channel=\"(props.channel as any)\"\n    :disable-wheel-change=\"props.disableWheelChange\"\n    :locale=\"props.locale\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-field/ColorField.vue_vue_type_script_setup_true_lang.js

@@ -34,9 +34,27 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		placeholder: {},
 		fullWidth: { default: false },
 		class: {},
-		ariaLabel: {}
+		ariaLabel: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		colorSpace: {},
+		channel: {},
+		disableWheelChange: {
+			type: Boolean,
+			default: false
+		},
+		locale: {},
+		step: {}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -70,6 +88,7 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			else {
 				local.color.value = next;
 				emit("update:modelValue", next);
+				emit("update:color", next);
 			}
 		}
 		return (_ctx, _cache) => {
@@ -77,6 +96,15 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"model-value": color.value,
 				disabled: __props.disabled,
 				readonly: __props.readonly,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				"color-space": props.colorSpace,
+				channel: props.channel,
+				"disable-wheel-change": props.disableWheelChange,
+				locale: props.locale,
+				step: props.step,
 				class: normalizeClass(unref(composeClassName)(unref(styles), props.class)),
 				"onUpdate:color": onColorUpdate
 			}, {
@@ -104,6 +132,15 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"model-value",
 				"disabled",
 				"readonly",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"color-space",
+				"channel",
+				"disable-wheel-change",
+				"locale",
+				"step",
 				"class"
 			]);
 		};

package/dist/components/color-field/ColorField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAEb,MAAM,KAAK,OAAM;EAGjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAGpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,mBAAmB,EAAE,WAAW,MAAM,WAAW,CAAA;EAGhE,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;;;;uBAMhC,YA2BiB,MAAA,eAAA,EAAA;IA1Bd,eAAa,MAAA;IACb,UAAU,QAAA;IACV,UAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,EAAE,MAAM,MAAK,CAAA;IAC3C,kBAAc;;2BAMK;KAHZ,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;MAFjB,KAAK,MAAA,GAAE;MACR,OAAM;wBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KACT,YAKE,MAAA,gBAAA,EAAA;MAJC,IAAI,MAAA,GAAE;MACN,aAAa,QAAA;MACb,cAAY,QAAA,QAAQ,KAAA,IAAa,MAAM,aAAS;MACjD,OAAM;;;;;;KAGA,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"ColorField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :color-space=\"(props.colorSpace as any)\"\n    :channel=\"(props.channel as any)\"\n    :disable-wheel-change=\"props.disableWheelChange\"\n    :locale=\"props.locale\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAKb,MAAM,KAAK,OAAM;EAGjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAGpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,mBAAmB,EAAE,WAAW,MAAM,WAAW,CAAA;EAGhE,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAoCiB,MAAA,eAAA,EAAA;IAnCd,eAAa,MAAA;IACb,UAAU,QAAA;IACV,UAAU,QAAA;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,eAAc,MAAM;IACpB,SAAU,MAAM;IAChB,wBAAsB,MAAM;IAC5B,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,EAAE,MAAM,MAAK,CAAA;IAC3C,kBAAc;;2BAMK;KAHZ,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;MAFjB,KAAK,MAAA,GAAE;MACR,OAAM;wBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KACT,YAKE,MAAA,gBAAA,EAAA;MAJC,IAAI,MAAA,GAAE;MACN,aAAa,QAAA;MACb,cAAY,QAAA,QAAQ,KAAA,IAAa,MAAM,aAAS;MACjD,OAAM;;;;;;KAGA,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/color-input-group/ColorInputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInputGroup.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorInputGroup.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"props.required\"\n      :color-space=\"(props.colorSpace as any)\"\n      :channel=\"(props.channel as any)\"\n      :disable-wheel-change=\"props.disableWheelChange\"\n      :locale=\"props.locale\"\n      :step=\"props.step\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-input-group/ColorInputGroup.vue_vue_type_script_setup_true_lang.js

@@ -37,9 +37,27 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		fullWidth: { default: false },
 		variant: { default: "primary" },
-		class: {}
+		class: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		colorSpace: {},
+		channel: {},
+		disableWheelChange: {
+			type: Boolean,
+			default: false
+		},
+		locale: {},
+		step: {}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -76,6 +94,7 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			else {
 				local.color.value = next;
 				emit("update:modelValue", next);
+				emit("update:color", next);
 			}
 		}
 		return (_ctx, _cache) => {
@@ -89,6 +108,15 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"model-value": color.value,
 					disabled: __props.disabled,
 					readonly: __props.readonly,
+					as: props.as,
+					"as-child": props.asChild,
+					name: props.name,
+					required: props.required,
+					"color-space": props.colorSpace,
+					channel: props.channel,
+					"disable-wheel-change": props.disableWheelChange,
+					locale: props.locale,
+					step: props.step,
 					class: normalizeClass(unref(composeClassName)(unref(styles).base(), props.class)),
 					"aria-invalid": __props.errorMessage ? true : void 0,
 					"onUpdate:color": onColorUpdate
@@ -125,6 +153,15 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"model-value",
 					"disabled",
 					"readonly",
+					"as",
+					"as-child",
+					"name",
+					"required",
+					"color-space",
+					"channel",
+					"disable-wheel-change",
+					"locale",
+					"step",
 					"class",
 					"aria-invalid"
 				]),

package/dist/components/color-input-group/ColorInputGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInputGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAqBd,MAAM,OAAO;EAEb,MAAM,KAAK,OAAM;EAEjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,wBAAwB;GAAE,WAAW,MAAM;GAAW,SAAS,MAAM;GAAS,CAAA;EAE7F,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;;;;uBAMhC,mBA8CM,OA9CN,YA8CM;IA5CI,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;KAFjB,KAAK,MAAA,GAAE;KACR,OAAM;uBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IACT,YA8BiB,MAAA,eAAA,EAAA;KA7Bd,eAAa,MAAA;KACb,UAAU,QAAA;KACV,UAAU,QAAA;KACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;KAClD,gBAAc,QAAA,eAAY,OAAU,KAAA;KACpC,kBAAc;;4BAWR;MATP,mBASO,QAAA;OARL,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;OACrB,eAAY;UAEZ,YAGE,qBAAA;OAFC,OAAO,MAAA;OACR,MAAK;;MAGT,YAME,MAAA,gBAAA,EAAA;OALC,IAAI,MAAA,GAAE;OACP,aAAU;OACT,aAAa,QAAA;OACb,cAAY,QAAA,QAAQ,KAAA,IAAS;OAC7B,OAAK,eAAE,MAAA,OAAM,CAAC,OAAK,CAAA;;;;;;;MAGd,QAAA,eAAA,WAAA,EADR,mBAIyB,QAAA;;OAFvB,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;yBACnB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;;;;;;;;;;IAGT,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"ColorInputGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"props.required\"\n      :color-space=\"(props.colorSpace as any)\"\n      :channel=\"(props.channel as any)\"\n      :disable-wheel-change=\"props.disableWheelChange\"\n      :locale=\"props.locale\"\n      :step=\"props.step\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAiCd,MAAM,OAAO;EAKb,MAAM,KAAK,OAAM;EAEjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,wBAAwB;GAAE,WAAW,MAAM;GAAW,SAAS,MAAM;GAAS,CAAA;EAE7F,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,mBAuDM,OAvDN,YAuDM;IArDI,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;KAFjB,KAAK,MAAA,GAAE;KACR,OAAM;uBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IACT,YAuCiB,MAAA,eAAA,EAAA;KAtCd,eAAa,MAAA;KACb,UAAU,QAAA;KACV,UAAU,QAAA;KACV,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,MAAM,MAAM;KACZ,UAAU,MAAM;KAChB,eAAc,MAAM;KACpB,SAAU,MAAM;KAChB,wBAAsB,MAAM;KAC5B,QAAQ,MAAM;KACd,MAAM,MAAM;KACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;KAClD,gBAAc,QAAA,eAAY,OAAU,KAAA;KACpC,kBAAc;;4BAWR;MATP,mBASO,QAAA;OARL,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;OACrB,eAAY;UAEZ,YAGE,qBAAA;OAFC,OAAO,MAAA;OACR,MAAK;;MAGT,YAME,MAAA,gBAAA,EAAA;OALC,IAAI,MAAA,GAAE;OACP,aAAU;OACT,aAAa,QAAA;OACb,cAAY,QAAA,QAAQ,KAAA,IAAS;OAC7B,OAAK,eAAE,MAAA,OAAM,CAAC,OAAK,CAAA;;;;;;;MAGd,QAAA,eAAA,WAAA,EADR,mBAIyB,QAAA;;OAFvB,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;yBACnB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;;;;;;;;;;;;;;;;;;;IAGT,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/color-slider/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst attrs = useAttrs()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorSlider.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  dir?: 'ltr' | 'rtl'\n  inverted?: boolean\n  step?: number\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n  asChild: false,\n  required: false,\n  inverted: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\nconst attrs = useAttrs()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :dir=\"props.dir\"\n    :inverted=\"props.inverted\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-slider/ColorSlider.vue_vue_type_script_setup_true_lang.js

@@ -25,9 +25,30 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		class: {},
 		trackClass: {},
 		thumbClass: {},
-		outputClass: {}
+		outputClass: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		dir: {},
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		step: {}
 	},
-	emits: ["update:modelValue", "update:color"],
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"change-end"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -55,8 +76,17 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"color-space": __props.colorSpace,
 				orientation: __props.orientation,
 				disabled: __props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				dir: props.dir,
+				inverted: props.inverted,
+				step: props.step,
 				class: unref(composeClassName)(unref(styles).base(), props.class),
-				"onUpdate:color": onColorUpdate
+				"onUpdate:color": onColorUpdate,
+				onChange: _cache[0] || (_cache[0] = (v) => emit("change", v)),
+				onChangeEnd: _cache[1] || (_cache[1] = (v) => emit("change-end", v))
 			}), {
 				default: withCtx(() => [createVNode(unref(ColorSliderTrack), {
 					class: normalizeClass(unref(composeClassName)(unref(styles).track(), __props.trackClass)),
@@ -75,6 +105,13 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"color-space",
 				"orientation",
 				"disabled",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"dir",
+				"inverted",
+				"step",
 				"class"
 			]);
 		};

package/dist/components/color-slider/ColorSlider.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst attrs = useAttrs()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAKb,MAAM,QAAQ,UAAS;EAGvB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EACpD,MAAM,QAAQ,YACV,OACA,cAAc;GAAE,OAAO,MAAM;GAAY,cAAc,MAAM;GAAc,CAAA;EAE/E,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,qBAAoB;EAEnC,MAAM,eAAe,eACnB,yBAAyB,MAAM,OAAO,MAAM,QAAO,CACrD;EAEA,MAAM,iBAAiB,eACrB,KAAK,MAAM,gBAAgB,MAAM,OAAO,MAAM,QAAQ,CAAC,CAAC,UAAS,CACnE;EAEA,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,WAAW,MAAM,SAAS,gBAAgB,MAAM,MAAM,QAAQ,CAAA;QACnE;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAoBkB,MAAA,gBAAA,EApBlB,WACU,MAmBQ,MAnBH,EAAA;IACZ,eAAa,MAAA;IACb,SAAS,QAAA;IACT,eAAa,QAAA;IACb,aAAa,QAAA;IACb,UAAU,QAAA;IACV,OAAO,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK;IAClD,kBAAc;;2BAOI,CALnB,YAKmB,MAAA,iBAAA,EAAA;KAJhB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA;KAClD,OAAK,eAAE,aAAA,MAAY;;4BAEsD,CAA1E,YAA0E,MAAA,iBAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;+BAG/D,QAAA,cAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,QAAM,EAAI,QAAA,YAAW,CAAA;uBACnD,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ColorSlider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  dir?: 'ltr' | 'rtl'\n  inverted?: boolean\n  step?: number\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n  asChild: false,\n  required: false,\n  inverted: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\nconst attrs = useAttrs()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :dir=\"props.dir\"\n    :inverted=\"props.inverted\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EA4Bd,MAAM,OAAO;EAOb,MAAM,QAAQ,UAAS;EAGvB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EACpD,MAAM,QAAQ,YACV,OACA,cAAc;GAAE,OAAO,MAAM;GAAY,cAAc,MAAM;GAAc,CAAA;EAE/E,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,qBAAoB;EAEnC,MAAM,eAAe,eACnB,yBAAyB,MAAM,OAAO,MAAM,QAAO,CACrD;EAEA,MAAM,iBAAiB,eACrB,KAAK,MAAM,gBAAgB,MAAM,OAAO,MAAM,QAAQ,CAAC,CAAC,UAAS,CACnE;EAEA,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,WAAW,MAAM,SAAS,gBAAgB,MAAM,MAAM,QAAQ,CAAA;QACnE;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YA6BkB,MAAA,gBAAA,EA7BlB,WACU,MA4BQ,MA5BH,EAAA;IACZ,eAAa,MAAA;IACb,SAAS,QAAA;IACT,eAAa,QAAA;IACb,aAAa,QAAA;IACb,UAAU,QAAA;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,KAAK,MAAM;IACX,UAAU,MAAM;IAChB,MAAM,MAAM;IACZ,OAAO,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK;IAClD,kBAAc;IACd,UAAM,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,UAAW,EAAC;IACvC,aAAU,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,cAAe,EAAC;;2BAO7B,CALnB,YAKmB,MAAA,iBAAA,EAAA;KAJhB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA;KAClD,OAAK,eAAE,aAAA,MAAY;;4BAEsD,CAA1E,YAA0E,MAAA,iBAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;+BAG/D,QAAA,cAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,QAAM,EAAI,QAAA,YAAW,CAAA;uBACnD,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/color-swatch/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: colorName if given, otherwise hex value.\nconst accessibleLabel = computed(() =>\n  props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n  as?: string\n  asChild?: boolean\n  label?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: explicit label > colorName > hex value.\nconst accessibleLabel = computed(() =>\n  props.label ?? props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/color-swatch/ColorSwatch.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,10 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		colorName: {},
 		shape: {},
 		size: {},
-		class: {}
+		class: {},
+		as: {},
+		asChild: { type: Boolean },
+		label: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21,7 +24,7 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (pickerCtx) return pickerCtx.color.value;
 			return parseColor("#000000");
 		});
-		const accessibleLabel = computed(() => props.colorName ?? colorToHex(resolvedColor.value));
+		const accessibleLabel = computed(() => props.label ?? props.colorName ?? colorToHex(resolvedColor.value));
 		const styles = computed(() => colorSwatchVariants({
 			shape: props.shape,
 			size: props.size
@@ -30,10 +33,14 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return openBlock(), createBlock(unref(ColorSwatch), {
 				color: resolvedColor.value,
 				label: accessibleLabel.value,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(styles.value, props.class))
 			}, null, 8, [
 				"color",
 				"label",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

package/dist/components/color-swatch/ColorSwatch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: colorName if given, otherwise hex value.\nconst accessibleLabel = computed(() =>\n  props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EASd,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,gBAAgB,eAAsB;AAC1C,OAAI,MAAM,MACR,QAAO,OAAO,MAAM,UAAU,WAAW,WAAW,MAAM,MAAM,GAAG,MAAM;AAE3E,OAAI,UACF,QAAO,UAAU,MAAM;AAEzB,UAAO,WAAW,UAAS;IAC5B;EAID,MAAM,kBAAkB,eACtB,MAAM,aAAa,WAAW,cAAc,MAAM,CACpD;EAEA,MAAM,SAAS,eACb,oBAAoB;GAAE,OAAO,MAAM;GAAO,MAAM,MAAM;GAAM,CAAC,CAC/D;;uBAIE,YAIE,MAAA,YAAA,EAAA;IAHC,OAAO,cAAA;IACP,OAAO,gBAAA;IACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,OAAQ,MAAM,MAAK,CAAA"}
+{"version":3,"file":"ColorSwatch.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n  as?: string\n  asChild?: boolean\n  label?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: explicit label > colorName > hex value.\nconst accessibleLabel = computed(() =>\n  props.label ?? props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAYd,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,gBAAgB,eAAsB;AAC1C,OAAI,MAAM,MACR,QAAO,OAAO,MAAM,UAAU,WAAW,WAAW,MAAM,MAAM,GAAG,MAAM;AAE3E,OAAI,UACF,QAAO,UAAU,MAAM;AAEzB,UAAO,WAAW,UAAS;IAC5B;EAID,MAAM,kBAAkB,eACtB,MAAM,SAAS,MAAM,aAAa,WAAW,cAAc,MAAM,CACnE;EAEA,MAAM,SAAS,eACb,oBAAoB;GAAE,OAAO,MAAM;GAAO,MAAM,MAAM;GAAM,CAAC,CAC/D;;uBAIE,YAME,MAAA,YAAA,EAAA;IALC,OAAO,cAAA;IACP,OAAO,gBAAA;IACP,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,OAAQ,MAAM,MAAK,CAAA"}