@auronui/vue 1.4.1 → 1.4.2

package/dist/cjs/index.cjs

@@ -1003,16 +1003,16 @@ function createContext(contextName) {
 }
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$61 = ["aria-label"];
-var _hoisted_2$28 = {
+var _hoisted_1$52 = ["aria-label"];
+var _hoisted_2$21 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
 	"aria-hidden": "true",
 	width: "100%",
 	height: "100%"
 };
-var _hoisted_3$17 = { fill: "none" };
-var _hoisted_4$10 = ["fill"];
+var _hoisted_3$12 = { fill: "none" };
+var _hoisted_4$8 = ["fill"];
 var _hoisted_5$3 = ["fill"];
 //#endregion
 //#region src/components/spinner/Spinner.vue
@@ -1038,7 +1038,7 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)(classes.value),
 				role: "status",
 				"aria-label": __props.label
-			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$28, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
+			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$21, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
 				id: gradId1,
 				x1: "50%",
 				x2: "50%",
@@ -1065,42 +1065,41 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				offset: "100%",
 				"stop-color": "currentColor",
 				"stop-opacity": "0.55"
-			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$17, [
+			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$12, [
 				_cache[2] || (_cache[2] = (0, vue.createElementVNode)("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }, null, -1)),
 				(0, vue.createElementVNode)("path", {
 					d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
 					fill: `url(#${gradId1})`,
 					transform: "translate(1.5 1.625)"
-				}, null, 8, _hoisted_4$10),
+				}, null, 8, _hoisted_4$8),
 				(0, vue.createElementVNode)("path", {
 					d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
 					fill: `url(#${gradId2})`,
 					transform: "translate(1.5 1.625)"
 				}, null, 8, _hoisted_5$3)
-			])]))], 10, _hoisted_1$61);
+			])]))], 10, _hoisted_1$52);
 		};
 	}
 });
 //#endregion
-//#region src/components/separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$60 = { class: "separator__content" };
-//#endregion
 //#region src/components/separator/Separator.vue
 var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Separator",
 	props: {
 		orientation: { default: "horizontal" },
 		variant: { default: "default" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slots = (0, vue.useSlots)();
 		const hasLabel = (0, vue.computed)(() => !!slots.default);
-		const classes = (0, vue.computed)(() => composeClassName((0, _auronui_styles.separatorVariants)({
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.separatorVariants)({
 			orientation: props.orientation,
 			variant: props.variant
-		}), props.class));
+		}));
+		const classes = (0, vue.computed)(() => composeClassName(slotFns.value.base(), props.class));
 		return (_ctx, _cache) => {
 			return props.orientation !== "vertical" && !hasLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("hr", {
 				key: 0,
@@ -1116,9 +1115,9 @@ var Separator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				role: "separator",
 				"aria-orientation": "horizontal"
 			}, [
-				_cache[0] || (_cache[0] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1)),
-				(0, vue.createElementVNode)("div", _hoisted_1$60, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-				_cache[1] || (_cache[1] = (0, vue.createElementVNode)("div", { class: "separator__line" }, null, -1))
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.line(), props.classNames?.line)) }, null, 2),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.line(), props.classNames?.line)) }, null, 2)
 			], 2));
 		};
 	}
@@ -1176,7 +1175,7 @@ var Text_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/label/Label.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$59 = ["for"];
+var _hoisted_1$51 = ["for"];
 //#endregion
 //#region src/components/label/Label.vue
 var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1208,13 +1207,13 @@ var Label_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				class: (0, vue.normalizeClass)(classes.value),
 				for: props.for
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$59);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$51);
 		};
 	}
 });
 //#endregion
 //#region src/components/description/Description.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$58 = ["id"];
+var _hoisted_1$50 = ["id"];
 //#endregion
 //#region src/components/description/Description.vue
 var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1230,7 +1229,7 @@ var Description_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
 				id: props.id,
 				class: (0, vue.normalizeClass)(classes.value)
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$58);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$50);
 		};
 	}
 });
@@ -1312,7 +1311,7 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/chip/Chip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$57 = ["aria-label"];
+var _hoisted_1$49 = ["aria-label"];
 //#endregion
 //#region src/components/chip/Chip.vue
 var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1396,7 +1395,7 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					y1: "6",
 					x2: "18",
 					y2: "18"
-				})], -1)])], 10, _hoisted_1$57)) : (0, vue.createCommentVNode)("", true)
+				})], -1)])], 10, _hoisted_1$49)) : (0, vue.createCommentVNode)("", true)
 			], 2);
 		};
 	}
@@ -1429,7 +1428,7 @@ var Surface_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCardProvide, useInject: useCardInject, key: cardContextKey } = createContext("Card");
 //#endregion
 //#region src/components/card/Card.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$56 = [
+var _hoisted_1$48 = [
 	"role",
 	"tabindex",
 	"aria-disabled",
@@ -1512,7 +1511,7 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-disabled": __props.isDisabled || void 0,
 				onClick,
 				onKeydown
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$56);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1$48);
 		};
 	}
 });
@@ -1863,7 +1862,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$55 = ["data-orientation"];
+var _hoisted_1$47 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ButtonGroup.vue
 var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1951,7 +1950,8 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-loading": btn.isLoading,
 					variant: btn.variant,
 					color: btn.color,
-					class: (0, vue.normalizeClass)(btn.class)
+					class: (0, vue.normalizeClass)(btn.class),
+					"class-names": btn.classNames
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(btn.label), 1)]),
 					_: 2
@@ -1961,9 +1961,10 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-loading",
 					"variant",
 					"color",
-					"class"
+					"class",
+					"class-names"
 				]);
-			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$55);
+			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$47);
 		};
 	}
 });
@@ -2040,7 +2041,7 @@ var CloseButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useToggleButtonGroupProvide, useInject: useToggleButtonGroupInject, key: toggleButtonGroupContextKey } = createContext("ToggleButtonGroup");
 //#endregion
 //#region src/components/button/ToggleButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = ["disabled", "data-orientation"];
+var _hoisted_1$46 = ["disabled", "data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButton.vue
 var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2133,7 +2134,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					disabled: effectiveDisabled.value || void 0,
 					"data-orientation": (0, vue.unref)(groupCtx).orientation.value,
 					type: "button"
-				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$54)]),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$46)]),
 				_: 3
 			}, 8, [
 				"disabled",
@@ -2147,7 +2148,7 @@ var ToggleButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$53 = ["data-orientation"];
+var _hoisted_1$45 = ["data-orientation"];
 //#endregion
 //#region src/components/button/ToggleButtonGroup.vue
 var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2243,7 +2244,7 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-disabled",
 					"class"
 				]);
-			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$53);
+			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$45);
 		};
 	}
 });
@@ -2965,8 +2966,8 @@ function useFormField(input) {
 }
 //#endregion
 //#region src/components/_shared/FieldLabel.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["id", "for"];
-var _hoisted_2$27 = {
+var _hoisted_1$44 = ["id", "for"];
+var _hoisted_2$20 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -2995,14 +2996,14 @@ var FieldLabel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: __props.id,
 				for: props.for,
 				class: (0, vue.normalizeClass)(props.class)
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$27, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$52)) : (0, vue.createCommentVNode)("", true);
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$20, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$44)) : (0, vue.createCommentVNode)("", true);
 		};
 	}
 });
 //#endregion
 //#region src/components/_shared/FormFieldHelper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$51 = ["id", "role"];
-var _hoisted_2$26 = ["id"];
+var _hoisted_1$43 = ["id", "role"];
+var _hoisted_2$19 = ["id"];
 //#endregion
 //#region src/components/_shared/FormFieldHelper.vue
 var FormFieldHelper_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -3048,18 +3049,18 @@ var FormFieldHelper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: __props.errorMessageId,
 				class: (0, vue.normalizeClass)(__props.errorClass),
 				role: __props.errorRole
-			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_1$51)) : __props.showDescription ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_1$43)) : __props.showDescription ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: __props.descriptionId,
 				class: (0, vue.normalizeClass)(__props.descriptionClass)
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_2$26)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true);
 		};
 	}
 });
 //#endregion
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$50 = ["data-filled"];
-var _hoisted_2$25 = [
+var _hoisted_1$42 = ["data-filled"];
+var _hoisted_2$18 = [
 	"id",
 	"type",
 	"placeholder",
@@ -3070,8 +3071,8 @@ var _hoisted_2$25 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_3$16 = ["aria-label", "aria-pressed"];
-var _hoisted_4$9 = {
+var _hoisted_3$11 = ["aria-label", "aria-pressed"];
+var _hoisted_4$7 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -3252,7 +3253,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": (0, vue.unref)(ariaDescribedBy),
 					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
-				}), null, 16, _hoisted_2$25), [[vue.vModelDynamic, modelValue.value]]),
+				}), null, 16, _hoisted_2$18), [[vue.vModelDynamic, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
@@ -3299,7 +3300,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-label": isPasswordVisible.value ? "Hide password" : "Show password",
 					"aria-pressed": isPasswordVisible.value,
 					onClick: togglePasswordVisibility
-				}, [isPasswordVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$9, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1), (0, vue.createElementVNode)("line", {
+				}, [isPasswordVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$7, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1), (0, vue.createElementVNode)("line", {
 					x1: "1",
 					y1: "1",
 					x2: "23",
@@ -3308,8 +3309,8 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					cx: "12",
 					cy: "12",
 					r: "3"
-				}, null, -1)])]))], 10, _hoisted_3$16)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$50), (0, vue.createVNode)(FormFieldHelper_default, {
+				}, null, -1)])]))], 10, _hoisted_3$11)) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$42), (0, vue.createVNode)(FormFieldHelper_default, {
 				"has-helper": (0, vue.unref)(hasHelper),
 				"show-error": (0, vue.unref)(showError),
 				"show-description": (0, vue.unref)(showDescription),
@@ -3337,8 +3338,8 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$49 = ["data-filled"];
-var _hoisted_2$24 = [
+var _hoisted_1$41 = ["data-filled"];
+var _hoisted_2$17 = [
 	"id",
 	"rows",
 	"placeholder",
@@ -3500,7 +3501,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": (0, vue.unref)(ariaDescribedBy),
 					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
-				}), null, 16, _hoisted_2$24), [[vue.vModelText, modelValue.value]]),
+				}), null, 16, _hoisted_2$17), [[vue.vModelText, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
@@ -3540,7 +3541,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						y2: "15"
 					})
 				], -1)])], 2)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$49), (0, vue.createVNode)(FormFieldHelper_default, {
+			], 10, _hoisted_1$41), (0, vue.createVNode)(FormFieldHelper_default, {
 				"has-helper": (0, vue.unref)(hasHelper),
 				"show-error": (0, vue.unref)(showError),
 				"show-description": (0, vue.unref)(showDescription),
@@ -3568,7 +3569,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/number-field/NumberField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = ["for"];
+var _hoisted_1$40 = ["for"];
 //#endregion
 //#region src/components/number-field/NumberField.vue
 var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -3682,7 +3683,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					for: resolvedInputId.value,
 					class: (0, vue.normalizeClass)(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
-				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$48)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
+				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$40)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.classNames?.group)),
 					"data-slot": "group"
 				}, [
@@ -3751,7 +3752,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/fieldset/Fieldset.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = ["disabled"];
+var _hoisted_1$39 = ["disabled"];
 //#endregion
 //#region src/components/fieldset/Fieldset.vue
 var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -3784,7 +3785,7 @@ var Fieldset_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [props.legend ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", {
 				key: 0,
 				class: (0, vue.normalizeClass)((0, vue.unref)(styles).legend())
-			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$47);
+			}, (0, vue.toDisplayString)(props.legend), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$39);
 		};
 	}
 });
@@ -4157,7 +4158,7 @@ var EditableCancelTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useCheckboxGroupProvide, useInject: useCheckboxGroupInject, key: checkboxGroupContextKey } = createContext("CheckboxGroup");
 //#endregion
 //#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = {
+var _hoisted_1$38 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -4169,7 +4170,7 @@ var _hoisted_1$46 = {
 	"stroke-linecap": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_2$23 = {
+var _hoisted_2$16 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -4314,12 +4315,12 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					as: props.indicatorAs,
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator))
 				}, {
-					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$46, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
+					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$38, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
 						y2: "12"
-					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$23, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
+					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$16, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
 					_: 1
 				}, 8, [
 					"force-mount",
@@ -4347,20 +4348,11 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = [
+var _hoisted_1$37 = [
 	"aria-labelledby",
 	"aria-invalid",
 	"data-orientation"
 ];
-var _hoisted_2$22 = { class: "checkbox-group__wrapper" };
-var _hoisted_3$15 = {
-	key: 1,
-	class: "checkbox-group__error-message"
-};
-var _hoisted_4$8 = {
-	key: 2,
-	class: "checkbox-group__description"
-};
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue
 var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -4387,7 +4379,8 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: { default: void 0 },
 		errorMessage: { default: void 0 },
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -4410,32 +4403,53 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			name: (0, vue.toRef)(props, "name")
 		});
 		const labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`;
-		const groupClasses = (0, vue.computed)(() => (0, _auronui_styles.checkboxGroupVariants)({ variant: props.variant }));
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.checkboxGroupVariants)({ variant: props.variant }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.checkbox?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.checkbox?.control, item.classNames?.control),
+				indicator: composeClassName(props.classNames?.checkbox?.indicator, item.classNames?.indicator),
+				content: composeClassName(props.classNames?.checkbox?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				role: "group",
 				"aria-labelledby": props.label ? labelId : void 0,
 				"aria-invalid": props.isInvalid || void 0,
 				"data-orientation": props.orientation,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupClasses.value, props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
 			}, [
 				props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					id: labelId,
-					class: "checkbox-group__label"
-				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("div", _hoisted_2$22, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+				}, (0, vue.toDisplayString)(props.label), 3)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.wrapper(), props.classNames?.wrapper)) }, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(Checkbox_default, {
 						key: item.value,
 						value: item.value,
-						"is-disabled": item.disabled
+						"is-disabled": item.disabled,
+						class: (0, vue.normalizeClass)(item.class),
+						"class-names": itemClassNames(item)
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
 						_: 2
-					}, 1032, ["value", "is-disabled"]);
-				}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
-				props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$15, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$8, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$45);
+					}, 1032, [
+						"value",
+						"is-disabled",
+						"class",
+						"class-names"
+					]);
+				}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 2),
+				props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 1,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
+				}, (0, vue.toDisplayString)(props.errorMessage), 3)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 2,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
+				}, (0, vue.toDisplayString)(props.description), 3)) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$37);
 		};
 	}
 });
@@ -4556,17 +4570,6 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = { class: "radio-group__wrapper" };
-var _hoisted_2$21 = {
-	key: 1,
-	class: "radio-group__error-message"
-};
-var _hoisted_3$14 = {
-	key: 2,
-	class: "radio-group__description"
-};
-//#endregion
 //#region src/components/radio/RadioGroup.vue
 var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "RadioGroup",
@@ -4610,7 +4613,8 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -4624,7 +4628,15 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			isInvalid: (0, vue.toRef)(props, "isInvalid")
 		});
 		const labelId = `radio-group-label-${Math.random().toString(36).slice(2, 8)}`;
-		const groupClasses = (0, vue.computed)(() => (0, _auronui_styles.radioGroupVariants)({ variant: props.variant }));
+		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.radioGroupVariants)({ variant: props.variant }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.radio?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.radio?.control, item.classNames?.control),
+				indicator: composeClassName(props.classNames?.radio?.indicator, item.classNames?.indicator),
+				content: composeClassName(props.classNames?.radio?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RadioGroupRoot), {
 				"model-value": props.modelValue,
@@ -4639,26 +4651,39 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				as: props.as,
 				required: (0, vue.unref)(isRequired),
 				"aria-labelledby": props.label ? labelId : void 0,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupClasses.value, props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $event != null && emit("update:modelValue", String($event)))
 			}, {
 				default: (0, vue.withCtx)(() => [
 					props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 0,
 						id: labelId,
-						class: "radio-group__label"
-					}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("div", _hoisted_1$44, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+					}, (0, vue.toDisplayString)(props.label), 3)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.wrapper(), props.classNames?.wrapper)) }, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(Radio_default, {
 							key: item.value,
 							value: item.value,
-							"is-disabled": item.disabled
+							"is-disabled": item.disabled,
+							class: (0, vue.normalizeClass)(item.class),
+							"class-names": itemClassNames(item)
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
 							_: 2
-						}, 1032, ["value", "is-disabled"]);
-					}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
-					props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$21, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$14, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+						}, 1032, [
+							"value",
+							"is-disabled",
+							"class",
+							"class-names"
+						]);
+					}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 2),
+					props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 1,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
+					}, (0, vue.toDisplayString)(props.errorMessage), 3)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 2,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
+					}, (0, vue.toDisplayString)(props.description), 3)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -4831,19 +4856,11 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$43 = [
+var _hoisted_1$36 = [
 	"aria-labelledby",
 	"aria-invalid",
 	"data-orientation"
 ];
-var _hoisted_2$20 = {
-	key: 1,
-	class: "switch-group__error-message"
-};
-var _hoisted_3$13 = {
-	key: 2,
-	class: "switch-group__description"
-};
 //#endregion
 //#region src/components/switch/SwitchGroup.vue
 var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -4870,7 +4887,8 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: { default: void 0 },
 		description: { default: void 0 },
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -4894,6 +4912,14 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const labelId = `switch-group-label-${Math.random().toString(36).slice(2, 8)}`;
 		const groupSlots = (0, vue.computed)(() => (0, _auronui_styles.switchGroupVariants)({ orientation: props.orientation }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.switch?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.switch?.control, item.classNames?.control),
+				thumb: composeClassName(props.classNames?.switch?.thumb, item.classNames?.thumb),
+				content: composeClassName(props.classNames?.switch?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				role: "group",
@@ -4905,20 +4931,33 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					id: labelId,
-					class: "switch-group__label"
-				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(groupSlots.value.items()) }, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupSlots.value.label(), props.classNames?.label))
+				}, (0, vue.toDisplayString)(props.label), 3)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupSlots.value.items(), props.classNames?.items)) }, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(Switch_default, {
 						key: item.value,
 						value: item.value,
-						"is-disabled": item.disabled
+						"is-disabled": item.disabled,
+						class: (0, vue.normalizeClass)(item.class),
+						"class-names": itemClassNames(item)
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
 						_: 2
-					}, 1032, ["value", "is-disabled"]);
+					}, 1032, [
+						"value",
+						"is-disabled",
+						"class",
+						"class-names"
+					]);
 				}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 2),
-				props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$20, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$43);
+				props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 1,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupSlots.value.errorMessage(), props.classNames?.errorMessage))
+				}, (0, vue.toDisplayString)(props.errorMessage), 3)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 2,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(groupSlots.value.description(), props.classNames?.description))
+				}, (0, vue.toDisplayString)(props.description), 3)) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$36);
 		};
 	}
 });
@@ -14496,7 +14535,8 @@ var modalVariants = (0, tailwind_variants.tv)({
 		header: "modal__header",
 		heading: "modal__heading",
 		icon: "modal__icon",
-		trigger: "modal__trigger"
+		trigger: "modal__trigger",
+		portal: "modal__portal"
 	},
 	variants: {
 		scroll: {
@@ -14569,9 +14609,6 @@ var ModalOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/modal/ModalContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$42 = { class: "modal__portal" };
-//#endregion
 //#region src/components/modal/ModalContent.vue
 var ModalContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ModalContent",
@@ -14626,7 +14663,7 @@ var ModalContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				defer: props.defer,
 				"force-mount": props.forceMount
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$42, [(0, vue.createVNode)(ModalOverlay_default), (0, vue.createVNode)((0, vue.unref)(reka_ui.DialogContent), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(styles).portal()) }, [(0, vue.createVNode)(ModalOverlay_default), (0, vue.createVNode)((0, vue.unref)(reka_ui.DialogContent), {
 					as: props.as,
 					"as-child": props.asChild,
 					"force-mount": props.forceMount,
@@ -14683,7 +14720,7 @@ var ModalContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"class",
 					"data-placement",
 					"aria-hidden"
-				])])]),
+				])], 2)]),
 				_: 3
 			}, 8, [
 				"to",
@@ -14999,7 +15036,7 @@ var AlertDialogOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$41 = ["data-placement"];
+var _hoisted_1$35 = ["data-placement"];
 //#endregion
 //#region src/components/alert-dialog/AlertDialogContent.vue
 var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -15065,7 +15102,7 @@ var AlertDialogContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"disable-outside-pointer-events",
 					"class",
 					"data-placement"
-				])], 10, _hoisted_1$41)]),
+				])], 10, _hoisted_1$35)]),
 				_: 3
 			}, 8, [
 				"to",
@@ -15111,10 +15148,12 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		thumbAs: {},
 		thumbAsChild: { type: Boolean },
 		cornerAs: {},
-		cornerAsChild: { type: Boolean }
+		cornerAsChild: { type: Boolean },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const slotFns = (0, _auronui_styles.scrollAreaVariants)();
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ScrollAreaRoot), {
 				type: props.type,
@@ -15122,14 +15161,14 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				dir: props.dir,
 				as: props.as,
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)("scroll-area__root", props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).root(), props.class, props.classNames?.root))
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ScrollAreaViewport), {
 						nonce: props.viewportNonce,
 						as: props.viewportAs,
 						"as-child": props.viewportAsChild,
-						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)("scroll-area__viewport", props.viewportClass))
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).viewport(), props.viewportClass, props.classNames?.viewport))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 						_: 3
@@ -15145,18 +15184,23 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"force-mount": props.scrollbarForceMount,
 						as: props.scrollbarAs,
 						"as-child": props.scrollbarAsChild,
-						class: "scroll-area__scrollbar scroll-area__scrollbar--vertical"
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).scrollbar(), "scroll-area__scrollbar--vertical", props.classNames?.scrollbar))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ScrollAreaThumb), {
 							as: props.thumbAs,
 							"as-child": props.thumbAsChild,
-							class: "scroll-area__thumb"
-						}, null, 8, ["as", "as-child"])]),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).thumb(), props.classNames?.thumb))
+						}, null, 8, [
+							"as",
+							"as-child",
+							"class"
+						])]),
 						_: 1
 					}, 8, [
 						"force-mount",
 						"as",
-						"as-child"
+						"as-child",
+						"class"
 					])) : (0, vue.createCommentVNode)("", true),
 					props.orientation === "horizontal" || props.orientation === "both" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ScrollAreaScrollbar), {
 						key: 1,
@@ -15164,25 +15208,34 @@ var ScrollArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"force-mount": props.scrollbarForceMount,
 						as: props.scrollbarAs,
 						"as-child": props.scrollbarAsChild,
-						class: "scroll-area__scrollbar scroll-area__scrollbar--horizontal"
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).scrollbar(), "scroll-area__scrollbar--horizontal", props.classNames?.scrollbar))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ScrollAreaThumb), {
 							as: props.thumbAs,
 							"as-child": props.thumbAsChild,
-							class: "scroll-area__thumb"
-						}, null, 8, ["as", "as-child"])]),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).thumb(), props.classNames?.thumb))
+						}, null, 8, [
+							"as",
+							"as-child",
+							"class"
+						])]),
 						_: 1
 					}, 8, [
 						"force-mount",
 						"as",
-						"as-child"
+						"as-child",
+						"class"
 					])) : (0, vue.createCommentVNode)("", true),
 					props.orientation === "both" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ScrollAreaCorner), {
 						key: 2,
 						as: props.cornerAs,
 						"as-child": props.cornerAsChild,
-						class: "scroll-area__corner"
-					}, null, 8, ["as", "as-child"])) : (0, vue.createCommentVNode)("", true)
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).corner(), props.classNames?.corner))
+					}, null, 8, [
+						"as",
+						"as-child",
+						"class"
+					])) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -15291,7 +15344,7 @@ var AlertDialogDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert-dialog/AlertDialogIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = {
+var _hoisted_1$34 = {
 	key: 0,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -15301,7 +15354,7 @@ var _hoisted_1$40 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$19 = {
+var _hoisted_2$15 = {
 	key: 1,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -15311,7 +15364,7 @@ var _hoisted_2$19 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$12 = {
+var _hoisted_3$10 = {
 	key: 2,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -15321,7 +15374,7 @@ var _hoisted_3$12 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_4$7 = {
+var _hoisted_4$6 = {
 	key: 3,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -15353,7 +15406,7 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).icon({ status: resolvedStatus() }), props.class)),
 				"aria-hidden": "true"
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$40, [..._cache[0] || (_cache[0] = [
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [resolvedStatus() === "danger" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$34, [..._cache[0] || (_cache[0] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -15361,15 +15414,15 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m9 9 6 6" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m15 9-6 6" }, null, -1)
-			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$19, [..._cache[1] || (_cache[1] = [
+			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$15, [..._cache[1] || (_cache[1] = [
 				(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
-			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$12, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
+			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$10, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
-			}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$7, [..._cache[3] || (_cache[3] = [
+			}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$6, [..._cache[3] || (_cache[3] = [
 				(0, vue.createElementVNode)("circle", {
 					cx: "12",
 					cy: "12",
@@ -15708,7 +15761,7 @@ var DrawerOverlay_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/drawer/DrawerContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$39 = ["data-placement", "data-state"];
+var _hoisted_1$33 = ["data-placement", "data-state"];
 //#endregion
 //#region src/components/drawer/DrawerContent.vue
 var DrawerContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -15786,7 +15839,7 @@ var DrawerContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), props.class)),
 					"data-placement": (0, vue.unref)(ctx).placement.value,
 					"data-state": (0, vue.unref)(ctx).dockOpen.value ? "open" : "closed"
-				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$39), [[vue.vShow, (0, vue.unref)(ctx).dockOpen.value]])]),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$33), [[vue.vShow, (0, vue.unref)(ctx).dockOpen.value]])]),
 				_: 3
 			}, 8, ["name"])) : (0, vue.unref)(ctx).inline.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DialogContent), {
 				key: 1,
@@ -16194,13 +16247,6 @@ var HoverCardArrow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/tabs/tabs.context.ts
 var { useProvide: useTabsProvide, useInject: useTabsInject, key: tabsContextKey } = createContext("Tabs");
 //#endregion
-//#region src/components/tabs/TabList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$38 = {
-	key: 0,
-	class: "tabs__overflow-menu",
-	role: "menu"
-};
-//#endregion
 //#region src/components/tabs/TabList.vue
 var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TabList",
@@ -16370,7 +16416,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"class"
 			])) : props.overflow === "arrows" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
-				class: (0, vue.normalizeClass)(["tabs__list-container tabs__list-container--arrows", {
+				class: (0, vue.normalizeClass)([(0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabListContainer(), "tabs__list-container--arrows"), {
 					"has-left": canScrollLeft.value,
 					"has-right": canScrollRight.value
 				}])
@@ -16403,7 +16449,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				(0, vue.createElementVNode)("div", {
 					ref_key: "scrollWrapperEl",
 					ref: scrollWrapperEl,
-					class: "tabs__scroll-wrapper"
+					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.scrollWrapper())
 				}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 					loop: props.loop ?? true,
 					as: props.as,
@@ -16417,7 +16463,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"as",
 					"as-child",
 					"class"
-				])], 512),
+				])], 2),
 				(0, vue.createVNode)(Button_default, {
 					variant: "secondary",
 					size: "sm",
@@ -16447,7 +16493,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 2,
 				ref_key: "containerEl",
 				ref: containerEl,
-				class: "tabs__list-container tabs__list-container--dropdown"
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabListContainer(), "tabs__list-container--dropdown"))
 			}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 				loop: props.loop ?? true,
 				as: props.as,
@@ -16464,12 +16510,12 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			]), (0, vue.createElementVNode)("div", {
 				ref_key: "dropdownEl",
 				ref: dropdownEl,
-				class: (0, vue.normalizeClass)(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
+				class: (0, vue.normalizeClass)([(0, vue.unref)(ctx).slotFns.value.more(), { "tabs__more--visible": hasOverflow.value }])
 			}, [(0, vue.createVNode)(Button_default, {
 				variant: "secondary",
 				size: "sm",
 				radius: "full",
-				class: "tabs__more-btn",
+				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.moreBtn()),
 				"aria-expanded": dropdownOpen.value,
 				"aria-haspopup": "menu",
 				onClick: _cache[2] || (_cache[2] = ($event) => dropdownOpen.value = !dropdownOpen.value)
@@ -16488,20 +16534,28 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-linejoin": "round"
 				})], -1))]),
 				_: 1
-			}, 8, ["aria-expanded"]), dropdownOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$38, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(hiddenTabs.value, (tab) => {
+			}, 8, ["class", "aria-expanded"]), dropdownOpen.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.overflowMenu()),
+				role: "menu"
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(hiddenTabs.value, (tab) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Button_default, {
 					key: tab.value,
 					variant: "ghost",
 					radius: "lg",
-					class: "tabs__overflow-item",
+					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.overflowItem()),
 					role: "menuitem",
 					"is-disabled": tab.disabled,
 					onClick: ($event) => selectOverflowTab(tab.value)
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(tab.label), 1)]),
 					_: 2
-				}, 1032, ["is-disabled", "onClick"]);
-			}), 128))])) : (0, vue.createCommentVNode)("", true)], 2)], 512)) : (0, vue.createCommentVNode)("", true);
+				}, 1032, [
+					"class",
+					"is-disabled",
+					"onClick"
+				]);
+			}), 128))], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 2)) : (0, vue.createCommentVNode)("", true);
 		};
 	}
 });
@@ -16619,7 +16673,9 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		dir: {},
 		unmountOnHide: { type: Boolean },
 		as: {},
-		asChild: { type: Boolean }
+		asChild: { type: Boolean },
+		loop: { type: Boolean },
+		overflow: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -16656,26 +16712,47 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-orientation": props.orientation,
 				"onUpdate:modelValue": changeTab
 			}, {
-				default: (0, vue.withCtx)(() => [props.items ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)(TabList_default, null, {
+				default: (0, vue.withCtx)(() => [props.items ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)(TabList_default, {
+					loop: props.loop,
+					overflow: props.overflow,
+					"class-names": { tabList: props.classNames?.tabList }
+				}, {
 					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(Tab_default, {
 							key: item.value,
 							value: item.value,
-							"is-disabled": item.disabled
+							"is-disabled": item.disabled,
+							class: (0, vue.normalizeClass)(item.class),
+							"class-names": item.classNames
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label), 1)]),
 							_: 2
-						}, 1032, ["value", "is-disabled"]);
+						}, 1032, [
+							"value",
+							"is-disabled",
+							"class",
+							"class-names"
+						]);
 					}), 128))]),
 					_: 1
-				}), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
+				}, 8, [
+					"loop",
+					"overflow",
+					"class-names"
+				]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(TabPanel_default, {
 						key: item.value,
-						value: item.value
+						value: item.value,
+						class: (0, vue.normalizeClass)(item.panelClass),
+						"class-names": item.panelClassNames
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.content), 1)]),
 						_: 2
-					}, 1032, ["value"]);
+					}, 1032, [
+						"value",
+						"class",
+						"class-names"
+					]);
 				}), 128))], 64)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
 				_: 3
 			}, 8, [
@@ -16997,20 +17074,31 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					return (0, vue.openBlock)(), (0, vue.createBlock)(AccordionItem_default, {
 						key: item.value,
 						value: item.value,
-						"is-disabled": item.disabled
+						"is-disabled": item.disabled,
+						"class-names": { item: props.classNames?.item }
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(AccordionHeader_default, null, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(AccordionTrigger_default, null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(AccordionTrigger_default, { "class-names": {
+								trigger: props.classNames?.trigger,
+								indicator: props.classNames?.indicator
+							} }, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.title), 1)]),
 								_: 2
-							}, 1024)]),
+							}, 1032, ["class-names"])]),
 							_: 2
-						}, 1024), (0, vue.createVNode)(AccordionContent_default, null, {
+						}, 1024), (0, vue.createVNode)(AccordionContent_default, { "class-names": {
+							body: props.classNames?.body,
+							bodyInner: props.classNames?.bodyInner
+						} }, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.content), 1)]),
 							_: 2
-						}, 1024)]),
+						}, 1032, ["class-names"])]),
 						_: 2
-					}, 1032, ["value", "is-disabled"]);
+					}, 1032, [
+						"value",
+						"is-disabled",
+						"class-names"
+					]);
 				}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
 				_: 3
 			}, 8, [
@@ -17133,7 +17221,7 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/collapsible/CollapsibleTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$37 = ["data-state"];
+var _hoisted_1$32 = ["data-state"];
 //#endregion
 //#region src/components/collapsible/CollapsibleTrigger.vue
 var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -17175,7 +17263,7 @@ var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-linejoin": "round",
 					"aria-hidden": "true",
 					focusable: "false"
-				}, [(0, vue.createElementVNode)("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1$37)]),
+				}, [(0, vue.createElementVNode)("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1$32)]),
 				_: 3
 			}, 8, [
 				"as",
@@ -17294,13 +17382,19 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"default-open": item.defaultOpen,
 					"is-disabled": item.disabled
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(CollapsibleTrigger_default, null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(CollapsibleTrigger_default, { "class-names": {
+						trigger: props.classNames?.trigger,
+						indicator: props.classNames?.indicator
+					} }, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.title), 1)]),
 						_: 2
-					}, 1024), (0, vue.createVNode)(CollapsibleContent_default, null, {
+					}, 1032, ["class-names"]), (0, vue.createVNode)(CollapsibleContent_default, { "class-names": {
+						body: props.classNames?.body,
+						bodyInner: props.classNames?.bodyInner
+					} }, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.content), 1)]),
 						_: 2
-					}, 1024)]),
+					}, 1032, ["class-names"])]),
 					_: 2
 				}, 1032, ["default-open", "is-disabled"]);
 			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 2);
@@ -17312,9 +17406,9 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useBreadcrumbsProvide, useInject: useBreadcrumbsInject, key: breadcrumbsContextKey } = createContext("Breadcrumbs");
 //#endregion
 //#region src/components/breadcrumbs/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$36 = ["aria-current"];
-var _hoisted_2$18 = ["href"];
-var _hoisted_3$11 = {
+var _hoisted_1$31 = ["aria-current"];
+var _hoisted_2$14 = ["href"];
+var _hoisted_3$9 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -17356,14 +17450,14 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				href: props.href,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.link(), props.classNames?.link))
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$18)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$14)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.link(), props.classNames?.link))
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)), !props.isLast ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 2,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.separator(), props.classNames?.separator)),
 				"aria-hidden": "true"
-			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$11, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$36);
+			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$9, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31);
 		};
 	}
 });
@@ -17440,11 +17534,20 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				return (0, vue.openBlock)(), (0, vue.createBlock)(BreadcrumbItem_default, {
 					key: idx,
 					href: item.href,
-					"is-last": idx === renderedItems.value.length - 1
+					"is-last": idx === renderedItems.value.length - 1,
+					"class-names": {
+						item: props.classNames?.item,
+						link: props.classNames?.link,
+						separator: props.classNames?.separator
+					}
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label), 1)]),
 					_: 2
-				}, 1032, ["href", "is-last"]);
+				}, 1032, [
+					"href",
+					"is-last",
+					"class-names"
+				]);
 			}), 128)) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(renderedChildren.value, (child, idx) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(child), { key: idx });
 			}), 128))], 2)], 2);
@@ -17759,7 +17862,7 @@ var ToolbarToggleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/alert/Alert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$35 = {
+var _hoisted_1$30 = {
 	key: 0,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -17769,7 +17872,7 @@ var _hoisted_1$35 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$17 = {
+var _hoisted_2$13 = {
 	key: 1,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -17779,7 +17882,7 @@ var _hoisted_2$17 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$10 = {
+var _hoisted_3$8 = {
 	key: 2,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -17789,7 +17892,7 @@ var _hoisted_3$10 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_4$6 = {
+var _hoisted_4$5 = {
 	key: 3,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -17854,7 +17957,7 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						(0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, vue.createElementVNode)("span", {
 							class: (0, vue.normalizeClass)(styles.value.indicator()),
 							"aria-hidden": "true"
-						}, [__props.severity === "default" || __props.severity === "primary" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$35, [..._cache[0] || (_cache[0] = [
+						}, [__props.severity === "default" || __props.severity === "primary" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$30, [..._cache[0] || (_cache[0] = [
 							(0, vue.createElementVNode)("circle", {
 								cx: "12",
 								cy: "12",
@@ -17862,15 +17965,15 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 8h.01" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M11 12h1v4h1" }, null, -1)
-						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$17, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
+						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$13, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
 							cx: "12",
 							cy: "12",
 							r: "9"
-						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$10, [..._cache[2] || (_cache[2] = [
+						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$8, [..._cache[2] || (_cache[2] = [
 							(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
-						])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$6, [..._cache[3] || (_cache[3] = [
+						])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_4$5, [..._cache[3] || (_cache[3] = [
 							(0, vue.createElementVNode)("circle", {
 								cx: "12",
 								cy: "12",
@@ -18290,9 +18393,6 @@ function useToast() {
 	};
 }
 //#endregion
-//#region src/components/toast/ToastViewport.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$34 = { class: "flex shrink-0 items-center gap-1 ml-auto" };
-//#endregion
 //#region src/components/toast/ToastViewport.vue
 var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ToastViewport",
@@ -18306,7 +18406,8 @@ var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		disableSwipe: { type: Boolean },
 		swipeThreshold: {},
 		as: {},
-		asChild: { type: Boolean }
+		asChild: { type: Boolean },
+		classNames: {}
 	},
 	setup(__props) {
 		/**
@@ -18365,28 +18466,41 @@ var ToastViewport_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							duration: toast.duration,
 							position: toast.position,
 							variant: toast.variant,
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.classNames?.toast)),
 							"onUpdate:open": (open) => handleOpenChange(toast.id, open)
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(styles.value.content()) }, [(0, vue.createVNode)(ToastTitle_default, null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(styles.value.content(), props.classNames?.content)) }, [(0, vue.createVNode)(ToastTitle_default, { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.classNames?.title)) }, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(toast.title), 1)]),
 								_: 2
-							}, 1024), toast.description ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastDescription_default, { key: 0 }, {
+							}, 1032, ["class"]), toast.description ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastDescription_default, {
+								key: 0,
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.classNames?.description))
+							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(toast.description), 1)]),
 								_: 2
-							}, 1024)) : (0, vue.createCommentVNode)("", true)], 2), (0, vue.createElementVNode)("div", _hoisted_1$34, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
+							}, 1032, ["class"])) : (0, vue.createCommentVNode)("", true)], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)("flex shrink-0 items-center gap-1 ml-auto", props.classNames?.actions)) }, [toast.action ? ((0, vue.openBlock)(), (0, vue.createBlock)(ToastAction_default, {
 								key: 0,
 								"alt-text": toast.action.label,
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.classNames?.action)),
 								onClick: toast.action.onClick
 							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(toast.action.label), 1)]),
 								_: 2
-							}, 1032, ["alt-text", "onClick"])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)(ToastClose_default, { onClick: ($event) => (0, vue.unref)(dismiss)(toast.id) }, null, 8, ["onClick"])])]),
+							}, 1032, [
+								"alt-text",
+								"class",
+								"onClick"
+							])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)(ToastClose_default, {
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.classNames?.close)),
+								onClick: ($event) => (0, vue.unref)(dismiss)(toast.id)
+							}, null, 8, ["class", "onClick"])], 2)]),
 							_: 2
 						}, 1032, [
 							"open",
 							"duration",
 							"position",
 							"variant",
+							"class",
 							"onUpdate:open"
 						]);
 					}), 128)), (0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -18521,13 +18635,13 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/list-box/ListBox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = {
+var _hoisted_1$29 = {
 	key: 0,
 	"data-slot": "list-box-loading",
 	role: "status",
 	"aria-live": "polite"
 };
-var _hoisted_2$16 = {
+var _hoisted_2$12 = {
 	key: 1,
 	class: "flex justify-center p-2",
 	"data-slot": "list-box-load-more"
@@ -18693,14 +18807,19 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, () => [(0, vue.createVNode)(ListBoxItem_default, {
 								value: option.value,
 								"is-disabled": option.disabled,
-								"text-value": option.textValue
+								"text-value": option.textValue,
+								"class-names": {
+									item: props.classNames?.item,
+									indicator: props.classNames?.indicator
+								}
 							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(option.label ?? option.value), 1)]),
 								_: 2
 							}, 1032, [
 								"value",
 								"is-disabled",
-								"text-value"
+								"text-value",
+								"class-names"
 							])])]),
 							_: 3
 						}, 8, [
@@ -18713,14 +18832,19 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								key: item.value,
 								value: item.value,
 								"is-disabled": item.disabled,
-								"text-value": item.textValue
+								"text-value": item.textValue,
+								"class-names": {
+									item: props.classNames?.item,
+									indicator: props.classNames?.indicator
+								}
 							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
 								_: 2
 							}, 1032, [
 								"value",
 								"is-disabled",
-								"text-value"
+								"text-value",
+								"class-names"
 							]);
 						}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 2 })]),
 						_: 3
@@ -18730,8 +18854,8 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"style",
 						"class"
 					]),
-					props.loadMode === "scroll" && props.isLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$33, [(0, vue.renderSlot)(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = (0, vue.createTextVNode)("Loading…", -1))])])) : (0, vue.createCommentVNode)("", true),
-					props.loadMode === "button" && props.hasMore ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "loadMore", {
+					props.loadMode === "scroll" && props.isLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$29, [(0, vue.renderSlot)(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = (0, vue.createTextVNode)("Loading…", -1))])])) : (0, vue.createCommentVNode)("", true),
+					props.loadMode === "button" && props.hasMore ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$12, [(0, vue.renderSlot)(_ctx.$slots, "loadMore", {
 						loadMore: requestLoadMore,
 						isLoading: props.isLoading,
 						hasMore: props.hasMore
@@ -18876,7 +19000,8 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -18906,7 +19031,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectTrigger), {
 				id: (0, vue.unref)(ctx).triggerId.value,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.trigger()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.trigger(), props.classNames?.trigger)),
 				"data-filled": isFilled.value || void 0,
 				"data-invalid": (0, vue.unref)(ctx).isInvalid.value || void 0,
 				"data-readonly": (0, vue.unref)(ctx).isReadonly.value || void 0,
@@ -18925,7 +19050,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						for: (0, vue.unref)(ctx).triggerId.value,
 						label: (0, vue.unref)(ctx).label.value,
 						"is-required": (0, vue.unref)(ctx).isRequired.value,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.label(), props.classNames?.label))
 					}, null, 8, [
 						"for",
 						"label",
@@ -18934,12 +19059,12 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					])) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "default"),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectIcon), {
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "select-default-indicator"
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
@@ -18976,7 +19101,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/select/SelectOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$32 = {
+var _hoisted_1$28 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -18994,7 +19119,8 @@ var SelectOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "SelectOverflowChips",
 	props: {
 		values: {},
-		getLabel: { type: Function }
+		getLabel: { type: Function },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -19034,24 +19160,26 @@ var SelectOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$32, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$28, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
 					size: "sm",
-					style: (0, vue.normalizeStyle)(i >= visibleCount.value ? "display: none" : void 0)
+					style: (0, vue.normalizeStyle)(i >= visibleCount.value ? "display: none" : void 0),
+					"class-names": props.classNames?.chip
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.getLabel(val)), 1)]),
 					_: 2
-				}, 1032, ["style"]);
+				}, 1032, ["style", "class-names"]);
 			}), 128)), overflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 				key: 0,
 				size: "sm",
-				color: "default"
+				color: "default",
+				"class-names": props.classNames?.chip
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)(" +" + (0, vue.toDisplayString)(overflowCount.value) + " more ", 1)]),
 				_: 1
-			})) : (0, vue.createCommentVNode)("", true)], 512);
+			}, 8, ["class-names"])) : (0, vue.createCommentVNode)("", true)], 512);
 		};
 	}
 });
@@ -19066,14 +19194,15 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useSelectInject();
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectValue), {
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.value()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.value(), props.classNames?.value)),
 				placeholder: props.placeholder,
 				as: props.as,
 				"as-child": props.asChild,
@@ -19082,8 +19211,13 @@ var SelectValue_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				default: (0, vue.withCtx)(({ selectedLabel, modelValue }) => [(0, vue.unref)(ctx).multiple.value && Array.isArray(modelValue) && modelValue.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(SelectOverflowChips_default, {
 					key: 0,
 					values: modelValue,
-					"get-label": (0, vue.unref)(ctx).itemLabel
-				}, null, 8, ["values", "get-label"])) : (0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(modelValue)), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 4 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
+					"get-label": (0, vue.unref)(ctx).itemLabel,
+					"class-names": { chip: props.classNames?.chip }
+				}, null, 8, [
+					"values",
+					"get-label",
+					"class-names"
+				])) : (0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64)) : selectedLabel && selectedLabel.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(selectedLabel.join(", ")), 1)], 64)) : modelValue != null && (Array.isArray(modelValue) ? modelValue.length > 0 : modelValue !== "") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).itemLabel(modelValue)), 1)], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 4 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.placeholder), 1)], 64))]),
 				_: 1
 			}, 8, [
 				"class",
@@ -19306,7 +19440,8 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -19315,6 +19450,7 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isDisabled = useDeprecatedBooleanProp("SelectItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const ctx = useSelectInject();
 		const textRef = (0, vue.useTemplateRef)("textRef");
+		const itemSlots = (0, _auronui_styles.listboxItemVariants)();
 		if (props.textValue !== void 0) ctx.registerItem(props.value, props.textValue);
 		(0, vue.onMounted)(() => {
 			const el = textRef.value?.$el;
@@ -19328,7 +19464,7 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"text-value": props.textValue ?? String(props.value),
 				as: props.as,
 				"as-child": props.asChild,
-				class: "list-box-item list-box-item--default",
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).item(), props.classNames?.item)),
 				"data-slot": "list-box-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
@@ -19342,7 +19478,7 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						_: 3
 					}, 512),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectItemIndicator), {
-						class: "list-box-item__indicator",
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).indicator(), props.classNames?.indicator)),
 						"data-slot": "list-box-item-indicator"
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
@@ -19359,7 +19495,7 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}),
+					}, 8, ["class"]),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -19368,7 +19504,8 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"disabled",
 				"text-value",
 				"as",
-				"as-child"
+				"as-child",
+				"class"
 			]);
 		};
 	}
@@ -19530,23 +19667,39 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
 				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => emit("update:open", $event))
 			}, {
-				default: (0, vue.withCtx)(() => [usesCustomChrome.value ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(SelectTrigger_default, null, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(SelectValue_default, { placeholder: props.placeholder }, null, 8, ["placeholder"])]),
+				default: (0, vue.withCtx)(() => [usesCustomChrome.value ? (0, vue.renderSlot)(_ctx.$slots, "default", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(SelectTrigger_default, { "class-names": {
+					trigger: props.classNames?.trigger,
+					label: props.classNames?.label,
+					startContent: props.classNames?.startContent,
+					indicator: props.classNames?.triggerIndicator
+				} }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(SelectValue_default, {
+						placeholder: props.placeholder,
+						"class-names": {
+							value: props.classNames?.value,
+							chip: props.classNames?.chip
+						}
+					}, null, 8, ["placeholder", "class-names"])]),
 					_: 1
-				}), (0, vue.createVNode)(SelectContent_default, null, {
+				}, 8, ["class-names"]), (0, vue.createVNode)(SelectContent_default, null, {
 					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(props.items, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(SelectItem_default, {
 							key: item.value,
 							value: item.value,
 							"text-value": item.textValue ?? item.label,
-							"is-disabled": item.isDisabled
+							"is-disabled": item.isDisabled,
+							"class-names": {
+								item: props.classNames?.item,
+								indicator: props.classNames?.indicator
+							}
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? String(item.value)), 1)])]),
 							_: 2
 						}, 1032, [
 							"value",
 							"text-value",
-							"is-disabled"
+							"is-disabled",
+							"class-names"
 						]);
 					}), 128)), (0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
@@ -19857,13 +20010,13 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$31 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$15 = { "data-slot": "label" };
-var _hoisted_3$9 = {
+var _hoisted_1$27 = { class: "flex flex-1 flex-col" };
+var _hoisted_2$11 = { "data-slot": "label" };
+var _hoisted_3$7 = {
 	key: 0,
 	"data-slot": "description"
 };
-var _hoisted_4$5 = {
+var _hoisted_4$4 = {
 	key: 0,
 	"data-slot": "shortcut",
 	class: "ml-auto text-xs text-muted font-mono"
@@ -19909,8 +20062,8 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$31, [(0, vue.createElementVNode)("span", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$9, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
-					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$5, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1$27, [(0, vue.createElementVNode)("span", _hoisted_2$11, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$7, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$4, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -20643,13 +20796,13 @@ var ContextMenuContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/context-menu/ContextMenuItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$14 = { "data-slot": "label" };
-var _hoisted_3$8 = {
+var _hoisted_1$26 = { class: "flex flex-1 flex-col" };
+var _hoisted_2$10 = { "data-slot": "label" };
+var _hoisted_3$6 = {
 	key: 0,
 	"data-slot": "description"
 };
-var _hoisted_4$4 = {
+var _hoisted_4$3 = {
 	key: 0,
 	"data-slot": "shortcut",
 	class: "ml-auto text-xs text-muted font-mono"
@@ -20695,8 +20848,8 @@ var ContextMenuItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$30, [(0, vue.createElementVNode)("span", _hoisted_2$14, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$8, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
-					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$4, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1$26, [(0, vue.createElementVNode)("span", _hoisted_2$10, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$6, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$3, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -21461,13 +21614,13 @@ var MenubarContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/menubar/MenubarItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$29 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$13 = { "data-slot": "label" };
-var _hoisted_3$7 = {
+var _hoisted_1$25 = { class: "flex flex-1 flex-col" };
+var _hoisted_2$9 = { "data-slot": "label" };
+var _hoisted_3$5 = {
 	key: 0,
 	"data-slot": "description"
 };
-var _hoisted_4$3 = {
+var _hoisted_4$2 = {
 	key: 0,
 	"data-slot": "shortcut",
 	class: "ml-auto text-xs text-muted font-mono"
@@ -21513,8 +21666,8 @@ var MenubarItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$29, [(0, vue.createElementVNode)("span", _hoisted_2$13, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$7, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
-					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$3, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1$25, [(0, vue.createElementVNode)("span", _hoisted_2$9, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$2, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -22527,7 +22680,7 @@ var ComboBoxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"display-value": props.displayValue ?? (0, vue.unref)(ctx).displayValue.value,
 						as: props.as,
 						"as-child": props.asChild,
-						class: "combo-box__input",
+						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.input()),
 						"data-slot": "input",
 						autocomplete: "off",
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
@@ -22538,12 +22691,13 @@ var ComboBoxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"disabled",
 						"display-value",
 						"as",
-						"as-child"
+						"as-child",
+						"class"
 					]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxCancel), {
 						as: props.cancelAs,
 						"as-child": props.cancelAsChild,
-						class: "combo-box__clear-button",
+						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.clearButton()),
 						"data-slot": "clear-button",
 						"aria-label": "Clear"
 					}, {
@@ -22570,7 +22724,11 @@ var ComboBoxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							y2: "18"
 						})], -1))])]),
 						_: 3
-					}, 8, ["as", "as-child"]),
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxTrigger), {
 						disabled: props.triggerDisabled,
 						as: props.triggerAs,
@@ -22880,7 +23038,8 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		indicatorAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -22889,6 +23048,7 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isDisabled = useDeprecatedBooleanProp("ComboBoxItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const slots = (0, vue.useSlots)();
 		const ctx = useComboBoxInject();
+		const itemSlots = (0, _auronui_styles.listboxItemVariants)();
 		function extractText(nodes) {
 			return nodes.map((n) => {
 				if (typeof n.children === "string") return n.children;
@@ -22915,7 +23075,7 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				as: props.as,
 				"as-child": props.asChild,
 				"data-item-value": props.value,
-				class: "list-box-item list-box-item--default",
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).item(), props.classNames?.item)),
 				"data-slot": "list-box-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
@@ -22925,7 +23085,7 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
 						as: props.indicatorAs,
 						"as-child": props.indicatorAsChild,
-						class: "list-box-item__indicator",
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).indicator(), props.classNames?.indicator)),
 						"data-slot": "list-box-item-indicator"
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
@@ -22942,7 +23102,11 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["as", "as-child"]),
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					]),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -22952,20 +23116,21 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"disabled",
 				"as",
 				"as-child",
-				"data-item-value"
+				"data-item-value",
+				"class"
 			]);
 		};
 	}
 });
 //#endregion
 //#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = ["aria-invalid"];
-var _hoisted_2$12 = ["id"];
-var _hoisted_3$6 = {
+var _hoisted_1$24 = ["aria-invalid"];
+var _hoisted_2$8 = ["id"];
+var _hoisted_3$4 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_4$2 = {
+var _hoisted_4$1 = {
 	key: 1,
 	"data-slot": "helper-wrapper"
 };
@@ -23147,7 +23312,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					id: (0, vue.unref)(labelId),
 					"data-slot": "label"
-				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$6, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$12)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$8)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
 					modelValue: internalValue.value,
 					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
@@ -23178,11 +23343,19 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							return (0, vue.openBlock)(), (0, vue.createBlock)(ComboBoxItem_default, {
 								key: item.value,
 								value: item.value,
-								"is-disabled": item.isDisabled
+								"is-disabled": item.isDisabled,
+								"class-names": {
+									item: props.classNames?.item,
+									indicator: props.classNames?.indicator
+								}
 							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.textValue ?? item.value), 1)])]),
 								_: 2
-							}, 1032, ["value", "is-disabled"]);
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"class-names"
+							]);
 						}), 128))]),
 						_: 3
 					})], 64))]),
@@ -23209,8 +23382,8 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"by",
 					"filter-function"
 				]),
-				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$2, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$1, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$1, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$28);
+				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$1, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$1, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$1, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1$24);
 		};
 	}
 });
@@ -23245,7 +23418,7 @@ var ComboBoxEmpty_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useAutocompleteProvide, useInject: useAutocompleteInject, key: autocompleteContextKey } = createContext("Autocomplete");
 //#endregion
 //#region src/components/autocomplete/AutocompleteOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = {
+var _hoisted_1$23 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -23264,7 +23437,8 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 	props: {
 		values: {},
 		getLabel: { type: Function },
-		removeValue: { type: Function }
+		removeValue: { type: Function },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -23304,26 +23478,32 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$27, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$23, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
 					size: "sm",
 					"is-closable": "",
 					style: (0, vue.normalizeStyle)(i >= visibleCount.value ? "display: none" : void 0),
+					"class-names": props.classNames?.chip,
 					onClose: (0, vue.withModifiers)(($event) => __props.removeValue(val), ["stop"])
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.getLabel(val)), 1)]),
 					_: 2
-				}, 1032, ["style", "onClose"]);
+				}, 1032, [
+					"style",
+					"class-names",
+					"onClose"
+				]);
 			}), 128)), overflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 				key: 0,
 				size: "sm",
-				color: "default"
+				color: "default",
+				"class-names": props.classNames?.chip
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)(" +" + (0, vue.toDisplayString)(overflowCount.value) + " more ", 1)]),
 				_: 1
-			})) : (0, vue.createCommentVNode)("", true)], 512);
+			}, 8, ["class-names"])) : (0, vue.createCommentVNode)("", true)], 512);
 		};
 	}
 });
@@ -23371,7 +23551,8 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		anchorAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -23389,7 +23570,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				reference: props.anchorReference,
 				as: props.anchorAs,
 				"as-child": props.anchorAsChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.trigger()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.trigger(), props.classNames?.trigger)),
 				"data-filled": (0, vue.unref)(ctx).hasLabel.value ? (0, vue.unref)(ctx).isFilled.value || void 0 : void 0,
 				"data-focused": (0, vue.unref)(isFocused) || void 0,
 				"data-invalid": (0, vue.unref)(ctx).isInvalid.value || void 0,
@@ -23404,7 +23585,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						for: (0, vue.unref)(ctx).inputId.value,
 						label: (0, vue.unref)(ctx).label.value,
 						"is-required": (0, vue.unref)(ctx).isRequired.value,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.label(), props.classNames?.label))
 					}, null, 8, [
 						"for",
 						"label",
@@ -23413,26 +23594,36 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					])) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "collapse" && (0, vue.unref)(ctx).selectedValues.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(AutocompleteOverflowChips_default, {
 						key: 2,
 						values: (0, vue.unref)(ctx).selectedValues.value,
 						"get-label": getLabel,
-						"remove-value": (0, vue.unref)(ctx).removeValue
-					}, null, 8, ["values", "remove-value"])) : (0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "wrap" ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, (0, vue.renderList)((0, vue.unref)(ctx).selectedLabels.value, (item) => {
+						"remove-value": (0, vue.unref)(ctx).removeValue,
+						"class-names": { chip: props.classNames?.chip }
+					}, null, 8, [
+						"values",
+						"remove-value",
+						"class-names"
+					])) : (0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "wrap" ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 3 }, (0, vue.renderList)((0, vue.unref)(ctx).selectedLabels.value, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 							key: item.value,
 							size: "sm",
 							"is-closable": "",
 							"close-aria-label": `Remove ${item.label}`,
 							"data-slot": "selected-chip",
+							"class-names": props.classNames?.chip,
 							onClose: (0, vue.withModifiers)(($event) => (0, vue.unref)(ctx).removeValue(item.value), ["stop"])
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label), 1)]),
 							_: 2
-						}, 1032, ["close-aria-label", "onClose"]);
+						}, 1032, [
+							"close-aria-label",
+							"class-names",
+							"onClose"
+						]);
 					}), 128)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteInput), {
 						id: (0, vue.unref)(ctx).inputId.value,
@@ -23446,7 +23637,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						required: (0, vue.unref)(ctx).isRequired.value,
 						"aria-invalid": (0, vue.unref)(ctx).isInvalid.value || void 0,
 						"aria-describedby": (0, vue.unref)(ctx).ariaDescribedBy.value,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.input()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.input(), props.classNames?.input)),
 						style: (0, vue.normalizeStyle)((0, vue.unref)(ctx).multiple.value && (0, vue.unref)(ctx).multipleOverflow.value === "collapse" && (0, vue.unref)(ctx).selectedValues.value.length > 0 ? {
 							flex: "0 0 auto",
 							minWidth: "80px",
@@ -23473,7 +23664,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteCancel), {
 						as: props.cancelAs,
 						"as-child": props.cancelAsChild,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.clearButton()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.clearButton(), props.classNames?.clearButton)),
 						"data-empty": !(0, vue.unref)(ctx).isFilled.value || (0, vue.unref)(ctx).isReadonly.value || (0, vue.unref)(ctx).isDisabled.value ? "true" : void 0,
 						"data-slot": "clear-button",
 						"aria-label": "Clear",
@@ -23511,7 +23702,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					]),
 					(0, vue.unref)(ctx).isLoading.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 4,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "autocomplete-loading-indicator",
 						role: "status",
 						"aria-live": "polite",
@@ -23521,7 +23712,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						as: props.triggerAs,
 						"as-child": props.triggerAsChild,
 						disabled: props.triggerDisabled,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.indicator()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slots.value.indicator(), props.classNames?.indicator)),
 						"data-slot": "autocomplete-default-indicator",
 						"aria-label": "Toggle suggestions"
 					}, {
@@ -23563,7 +23754,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = [
+var _hoisted_1$22 = [
 	"inert",
 	"aria-disabled",
 	"data-disabled"
@@ -23775,7 +23966,7 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 3
 								})) : (0, vue.createCommentVNode)("", true)]),
 								_: 3
-							})], 10, _hoisted_1$26)]),
+							})], 10, _hoisted_1$22)]),
 							_: 3
 						}, 8, [
 							"data-loading",
@@ -23822,17 +24013,6 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = {
-	class: "autocomplete-item__text",
-	"data-slot": "item-text"
-};
-var _hoisted_2$11 = {
-	key: 1,
-	class: "list-box-item__indicator",
-	"data-slot": "list-box-item-indicator"
-};
-//#endregion
 //#region src/components/autocomplete/AutocompleteItem.vue
 var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AutocompleteItem",
@@ -23857,7 +24037,8 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		indicatorAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -23866,6 +24047,8 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isDisabled = useDeprecatedBooleanProp("AutocompleteItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const slots = (0, vue.useSlots)();
 		const ctx = useAutocompleteInject();
+		const itemSlots = (0, _auronui_styles.listboxItemVariants)();
+		const itemTextClass = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)().itemText());
 		function extractText(nodes) {
 			return nodes.map((n) => {
 				if (typeof n.children === "string") return n.children;
@@ -23901,18 +24084,21 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"as-child": props.asChild,
 				"data-item-value": props.value,
 				"data-selected": isChecked.value || void 0,
-				class: "list-box-item list-box-item--default",
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).item(), props.classNames?.item)),
 				"data-slot": "list-box-item",
 				onSelect: handleSelect
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("span", _hoisted_1$25, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					(0, vue.createElementVNode)("span", {
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(itemTextClass.value, props.classNames?.text)),
+						"data-slot": "item-text"
+					}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 					!(0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
 						key: 0,
 						as: props.indicatorAs,
 						"as-child": props.indicatorAsChild,
-						class: "list-box-item__indicator",
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).indicator(), props.classNames?.indicator)),
 						"data-slot": "list-box-item-indicator"
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
@@ -23929,7 +24115,15 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["as", "as-child"])) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$11, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					])) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 1,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).indicator(), props.classNames?.indicator)),
+						"data-slot": "list-box-item-indicator"
+					}, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -23941,7 +24135,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"stroke-linejoin": "round",
 						"data-slot": "list-box-item-indicator--checkmark",
 						"aria-hidden": "true"
-					}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])])) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
 				_: 3
@@ -23952,7 +24146,8 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"as",
 				"as-child",
 				"data-item-value",
-				"data-selected"
+				"data-selected",
+				"class"
 			]);
 		};
 	}
@@ -24320,16 +24515,36 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					isLoading: isLoading.value,
 					items: internalItems.value
-				}) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(AutocompleteInput_default, { placeholder: props.placeholder }, null, 8, ["placeholder"]), (0, vue.createVNode)(AutocompleteContent_default, null, {
+				}) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)(AutocompleteInput_default, {
+					placeholder: props.placeholder,
+					"class-names": {
+						chip: props.classNames?.chip,
+						trigger: props.classNames?.trigger,
+						label: props.classNames?.label,
+						startContent: props.classNames?.startContent,
+						input: props.classNames?.input,
+						clearButton: props.classNames?.clearButton,
+						indicator: props.classNames?.triggerIndicator
+					}
+				}, null, 8, ["placeholder", "class-names"]), (0, vue.createVNode)(AutocompleteContent_default, null, {
 					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(internalItems.value, (item) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(AutocompleteItem_default, {
 							key: item.value,
 							value: item.value,
-							"is-disabled": item.isDisabled
+							"is-disabled": item.isDisabled,
+							"class-names": {
+								item: props.classNames?.item,
+								text: props.classNames?.text,
+								indicator: props.classNames?.indicator
+							}
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "item", { item }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.textValue ?? item.value), 1)])]),
 							_: 2
-						}, 1032, ["value", "is-disabled"]);
+						}, 1032, [
+							"value",
+							"is-disabled",
+							"class-names"
+						]);
 					}), 128))]),
 					_: 3
 				})], 64))]),
@@ -24375,12 +24590,6 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/autocomplete/AutocompleteCreateItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = {
-	class: "autocomplete-item__text",
-	"data-slot": "item-text"
-};
-//#endregion
 //#region src/components/autocomplete/AutocompleteCreateItem.vue
 var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AutocompleteCreateItem",
@@ -24404,7 +24613,8 @@ var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		asChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {}
 	},
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
@@ -24413,6 +24623,8 @@ var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isDisabled = useDeprecatedBooleanProp("AutocompleteCreateItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const ctx = useAutocompleteInject();
 		const comboboxCtx = (0, reka_ui.injectComboboxRootContext)();
+		const itemSlots = (0, _auronui_styles.listboxItemVariants)();
+		const itemTextClass = (0, vue.computed)(() => (0, _auronui_styles.autocompleteVariants)().itemText());
 		const term = (0, vue.computed)(() => ctx.searchTerm.value.trim());
 		const isVisible = (0, vue.computed)(() => !!term.value && !ctx.hasExactMatch.value);
 		const displayLabel = (0, vue.computed)(() => {
@@ -24434,12 +24646,15 @@ var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: (0, vue.unref)(isDisabled),
 				as: props.as,
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)(["list-box-item list-box-item--default", props.class]),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(itemSlots).item(), props.classNames?.item, props.class)),
 				"data-slot": "list-box-item",
 				"data-create-item": "",
 				onSelect: handleSelect
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { term: term.value }, () => [(0, vue.createElementVNode)("span", _hoisted_1$24, (0, vue.toDisplayString)(displayLabel.value), 1)])]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { term: term.value }, () => [(0, vue.createElementVNode)("span", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(itemTextClass.value, props.classNames?.text)),
+					"data-slot": "item-text"
+				}, (0, vue.toDisplayString)(displayLabel.value), 3)])]),
 				_: 3
 			}, 8, [
 				"value",
@@ -24565,8 +24780,8 @@ var Pagination_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/pagination/PaginationContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = ["disabled", "data-disabled"];
-var _hoisted_2$10 = ["disabled", "data-disabled"];
+var _hoisted_1$21 = ["disabled", "data-disabled"];
+var _hoisted_2$7 = ["disabled", "data-disabled"];
 //#endregion
 //#region src/components/pagination/PaginationContent.vue
 var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -24608,7 +24823,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasPreviousPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "Before page",
 					onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(ctx).onCursorChange((0, vue.unref)(ctx).beforeCursor.value, null))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$23),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$21),
 				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(styles.value.summary?.()) }, [(0, vue.renderSlot)(_ctx.$slots, "page-info", {}, () => [(0, vue.createTextVNode)("Page " + (0, vue.toDisplayString)((0, vue.unref)(ctx).page.value), 1)])], 2),
 				(0, vue.createElementVNode)("button", {
 					type: "button",
@@ -24617,7 +24832,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasNextPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "After page",
 					onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(ctx).onCursorChange(null, (0, vue.unref)(ctx).afterCursor.value))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$10)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$7)
 			], 2));
 		};
 	}
@@ -27450,7 +27665,7 @@ function useTableKeyboardNav(options) {
 }
 //#endregion
 //#region src/components/table/TableHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = [
+var _hoisted_1$20 = [
 	"data-col-index",
 	"aria-sort",
 	"data-allows-sorting",
@@ -27507,7 +27722,7 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						render: header.column.columnDef.header,
 						props: header.getContext()
-					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$22);
+					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$20);
 				}), 128))], 2);
 			}), 128))], 2);
 		};
@@ -27515,14 +27730,14 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = [
+var _hoisted_1$19 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_2$9 = [
+var _hoisted_2$6 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -27572,8 +27787,8 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, () => [(0, vue.createVNode)((0, vue.unref)(FlexRender), {
 						render: cell.column.columnDef.cell,
 						props: cell.getContext()
-					}, null, 8, ["render", "props"])])], 10, _hoisted_2$9);
-				}), 128))], 42, _hoisted_1$21);
+					}, null, 8, ["render", "props"])])], 10, _hoisted_2$6);
+				}), 128))], 42, _hoisted_1$19);
 			}), 128))], 2);
 		};
 	}
@@ -28365,19 +28580,19 @@ function useVirtualizer(options) {
 }
 //#endregion
 //#region src/components/table/TableVirtualBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = {
+var _hoisted_1$18 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_2$8 = ["colspan"];
-var _hoisted_3$5 = [
+var _hoisted_2$5 = ["colspan"];
+var _hoisted_3$3 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_4$1 = [
+var _hoisted_4 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -28434,14 +28649,14 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__expose({ scrollToIndex: (index) => virtualizer.value.scrollToIndex(index, { align: "auto" }) });
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [
-				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$20, [(0, vue.createElementVNode)("td", {
+				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$18, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
 					style: (0, vue.normalizeStyle)({
 						height: `${paddingTop.value}px`,
 						padding: 0,
 						border: "none"
 					})
-				}, null, 12, _hoisted_2$8)])) : (0, vue.createCommentVNode)("", true),
+				}, null, 12, _hoisted_2$5)])) : (0, vue.createCommentVNode)("", true),
 				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(virtualItems.value, (vItem) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 						key: rows.value[vItem.index].id,
@@ -28463,8 +28678,8 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						}, [(0, vue.createVNode)((0, vue.unref)(FlexRender), {
 							render: cell.column.columnDef.cell,
 							props: cell.getContext()
-						}, null, 8, ["render", "props"])], 10, _hoisted_4$1);
-					}), 128))], 42, _hoisted_3$5);
+						}, null, 8, ["render", "props"])], 10, _hoisted_4);
+					}), 128))], 42, _hoisted_3$3);
 				}), 128)),
 				paddingBottom.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_5, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
@@ -28539,7 +28754,7 @@ var TableCheckboxCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/Table.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = [
+var _hoisted_1$17 = [
 	"aria-label",
 	"aria-rowcount",
 	"aria-colcount"
@@ -28685,7 +28900,7 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					overflow: "auto"
 				} : void 0)
 			}, [(0, vue.createElementVNode)("table", {
-				class: "table",
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)),
 				ref_key: "rootRef",
 				ref: rootRef,
 				role: "grid",
@@ -28694,27 +28909,47 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-colcount": columnCount.value,
 				onKeydown: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(keyboardNav).onKeydown && (0, vue.unref)(keyboardNav).onKeydown(...args))
 			}, [
-				(0, vue.createVNode)(TableHeader_default),
-				!useVirtual.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(TableBody_default, { key: 0 }, {
+				(0, vue.createVNode)(TableHeader_default, { "class-names": {
+					header: props.classNames?.header,
+					row: props.classNames?.row,
+					column: props.classNames?.column
+				} }, null, 8, ["class-names"]),
+				!useVirtual.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(TableBody_default, {
+					key: 0,
+					"class-names": {
+						body: props.classNames?.body,
+						row: props.classNames?.row,
+						cell: props.classNames?.cell
+					}
+				}, {
 					cell: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, "cell", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(slotProps)))]),
 					_: 3
-				})) : ((0, vue.openBlock)(), (0, vue.createBlock)(TableVirtualBody_default, {
+				}, 8, ["class-names"])) : ((0, vue.openBlock)(), (0, vue.createBlock)(TableVirtualBody_default, {
 					key: 1,
 					ref_key: "virtualBodyRef",
 					ref: virtualBodyRef,
 					"scroll-element": scrollContainerRef.value,
 					"estimated-row-height": __props.estimatedRowHeight,
-					overscan: __props.virtualizerOverscan
+					overscan: __props.virtualizerOverscan,
+					"class-names": {
+						body: props.classNames?.body,
+						row: props.classNames?.row,
+						cell: props.classNames?.cell
+					}
 				}, null, 8, [
 					"scroll-element",
 					"estimated-row-height",
-					"overscan"
+					"overscan",
+					"class-names"
 				])),
-				_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createBlock)(TableFooter_default, { key: 2 }, {
+				_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createBlock)(TableFooter_default, {
+					key: 2,
+					"class-names": { footer: props.classNames?.footer }
+				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "footer")]),
 					_: 3
-				})) : (0, vue.createCommentVNode)("", true)
-			], 40, _hoisted_1$19)], 6)], 2);
+				}, 8, ["class-names"])) : (0, vue.createCommentVNode)("", true)
+			], 42, _hoisted_1$17)], 6)], 2);
 		};
 	}
 });
@@ -28746,7 +28981,7 @@ var TableRow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = ["data-row-index", "data-col-index"];
+var _hoisted_1$16 = ["data-row-index", "data-col-index"];
 //#endregion
 //#region src/components/table/TableCell.vue
 var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -28766,13 +29001,13 @@ var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 				"data-row-index": __props.rowIndex,
 				"data-col-index": __props.columnIndex
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$18);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$16);
 		};
 	}
 });
 //#endregion
 //#region src/components/table/TableHeaderCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = ["data-col-index", "aria-sort"];
+var _hoisted_1$15 = ["data-col-index", "aria-sort"];
 //#endregion
 //#region src/components/table/TableHeaderCell.vue
 var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -28792,7 +29027,7 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 				"data-col-index": __props.columnIndex,
 				"aria-sort": __props.sortDirection
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$17);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$15);
 		};
 	}
 });
@@ -28800,20 +29035,6 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/avatar/avatar-group.context.ts
 var { useProvide: useAvatarGroupProvide, useInject: useAvatarGroupInject, key: avatarGroupContextKey } = createContext("AvatarGroup");
 //#endregion
-//#region src/components/avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = {
-	key: 0,
-	class: /* @__PURE__ */ (0, vue.normalizeClass)("avatar__name text-xs font-medium leading-none")
-};
-var _hoisted_2$7 = {
-	key: 1,
-	class: "avatar__icon size-4/5",
-	"aria-hidden": "true",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	xmlns: "http://www.w3.org/2000/svg"
-};
-//#endregion
 //#region src/components/avatar/Avatar.vue
 var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Avatar",
@@ -28914,7 +29135,17 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"delay-ms": props.delayMs,
 					class: (0, vue.unref)(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback)
 				}, props.src && !props.showFallback && props.delayMs === void 0 ? { "delay-ms": 600 } : {}), {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$16, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$7, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 0,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.name(), "text-xs font-medium leading-none", props.classNames?.name))
+					}, (0, vue.toDisplayString)(initials.value), 3)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
+						key: 1,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.icon(), "size-4/5", props.classNames?.icon)),
+						"aria-hidden": "true",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						xmlns: "http://www.w3.org/2000/svg"
+					}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])], 2))])]),
 					_: 3
 				}, 16, [
 					"as",
@@ -28934,9 +29165,6 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region src/components/avatar/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = { class: "avatar__name text-xs font-medium leading-none" };
-//#endregion
 //#region src/components/avatar/AvatarGroup.vue
 var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AvatarGroup",
@@ -28958,7 +29186,8 @@ var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		total: {},
 		renderCount: {},
 		class: {},
-		avatars: {}
+		avatars: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -28971,6 +29200,7 @@ var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			isInGroup: (0, vue.ref)(true)
 		});
 		const containerClass = (0, vue.computed)(() => composeClassName("flex items-center flex-row", props.class));
+		const nameSlotClass = (0, vue.computed)(() => composeClassName((0, _auronui_styles.avatarVariants)({ size: props.size }).name(), "text-xs font-medium leading-none"));
 		const visibleAvatars = (0, vue.computed)(() => {
 			if (!props.avatars) return [];
 			return props.max !== void 0 ? props.avatars.slice(0, props.max) : props.avatars;
@@ -28998,7 +29228,7 @@ var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const overflowCount = (props.total ?? allNodes.length) - props.max;
 			if (overflowCount <= 0) return visibleNodes;
 			const counterLabel = props.renderCount ? props.renderCount(overflowCount) : `+${overflowCount}`;
-			const counterNode = (0, vue.h)(Avatar_default, {}, { fallback: () => (0, vue.h)("span", { class: "avatar__name text-xs font-medium leading-none" }, counterLabel) });
+			const counterNode = (0, vue.h)(Avatar_default, { classNames: props.classNames }, { fallback: () => (0, vue.h)("span", { class: nameSlotClass.value }, counterLabel) });
 			return [...visibleNodes, counterNode];
 		}
 		return (_ctx, _cache) => {
@@ -29006,11 +29236,14 @@ var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				role: "group",
 				class: (0, vue.normalizeClass)(containerClass.value)
 			}, [props.avatars ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleAvatars.value, (avatar, idx) => {
-				return (0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, (0, vue.mergeProps)({ key: idx }, { ref_for: true }, avatar), null, 16);
-			}), 128)), avatarOverflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, { key: 0 }, {
-				fallback: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_1$15, (0, vue.toDisplayString)(avatarOverflowLabel.value), 1)]),
+				return (0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, (0, vue.mergeProps)({ key: idx }, { ref_for: true }, avatar, { "class-names": props.classNames }), null, 16, ["class-names"]);
+			}), 128)), avatarOverflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, {
+				key: 0,
+				"class-names": props.classNames
+			}, {
+				fallback: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(nameSlotClass.value) }, (0, vue.toDisplayString)(avatarOverflowLabel.value), 3)]),
 				_: 1
-			})) : (0, vue.createCommentVNode)("", true)], 64)) : props.max !== void 0 ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(getSlicedNodes(), (node, _i) => {
+			}, 8, ["class-names"])) : (0, vue.createCommentVNode)("", true)], 64)) : props.max !== void 0 ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(getSlicedNodes(), (node, _i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(node), { key: _i });
 			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 2 })], 2);
 		};
@@ -29523,27 +29756,37 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item, idx) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(StepperItem_default, {
 					key: idx + 1,
-					step: idx + 1
+					step: idx + 1,
+					"class-names": { item: props.classNames?.item }
 				}, {
 					default: (0, vue.withCtx)(() => [
-						(0, vue.createVNode)(StepperIndicator_default, null, {
+						(0, vue.createVNode)(StepperIndicator_default, { "class-names": { indicator: props.classNames?.indicator } }, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(idx + 1), 1)]),
 							_: 2
-						}, 1024),
-						idx < props.items.length - 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperSeparator_default, { key: 0 })) : (0, vue.createCommentVNode)("", true),
-						(0, vue.createVNode)(StepperContent_default, null, {
-							default: (0, vue.withCtx)(() => [item.title ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperTitle_default, { key: 0 }, {
+						}, 1032, ["class-names"]),
+						idx < props.items.length - 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperSeparator_default, {
+							key: 0,
+							"class-names": { separator: props.classNames?.separator }
+						}, null, 8, ["class-names"])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.createVNode)(StepperContent_default, { "class-names": { content: props.classNames?.content } }, {
+							default: (0, vue.withCtx)(() => [item.title ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperTitle_default, {
+								key: 0,
+								"class-names": { title: props.classNames?.title }
+							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.title), 1)]),
 								_: 2
-							}, 1024)) : (0, vue.createCommentVNode)("", true), item.description ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperDescription_default, { key: 1 }, {
+							}, 1032, ["class-names"])) : (0, vue.createCommentVNode)("", true), item.description ? ((0, vue.openBlock)(), (0, vue.createBlock)(StepperDescription_default, {
+								key: 1,
+								"class-names": { description: props.classNames?.description }
+							}, {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.description), 1)]),
 								_: 2
-							}, 1024)) : (0, vue.createCommentVNode)("", true)]),
+							}, 1032, ["class-names"])) : (0, vue.createCommentVNode)("", true)]),
 							_: 2
-						}, 1024)
+						}, 1032, ["class-names"])
 					]),
 					_: 2
-				}, 1032, ["step"]);
+				}, 1032, ["step", "class-names"]);
 			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$13);
 		};
 	}
@@ -29781,11 +30024,11 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$10 = ["data-orientation", "data-disabled"];
-var _hoisted_2$6 = {
+var _hoisted_2$4 = {
 	key: 0,
 	"data-slot": "label"
 };
-var _hoisted_3$4 = { class: "relative flex items-center gap-2" };
+var _hoisted_3$2 = { class: "relative flex items-center gap-2" };
 //#endregion
 //#region src/components/slider/Slider.vue
 var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -29919,10 +30162,10 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-disabled": (0, vue.unref)(isDisabled) || void 0
-			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$6, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
+			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$4, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 				key: 1,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.output(), props.classNames?.output))
-			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$4, [
+			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$2, [
 				(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRoot), {
 					modelValue: internalValue.value,
@@ -30150,7 +30393,7 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/progress-circle/ProgressCircle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$8 = ["r", "stroke-width"];
-var _hoisted_2$5 = [
+var _hoisted_2$3 = [
 	"r",
 	"stroke-width",
 	"stroke-dasharray",
@@ -30262,7 +30505,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-dashoffset": offset.value,
 					transform: "rotate(-90 16 16)",
 					style: { "transition": "stroke-dashoffset 300ms ease-out" }
-				}, null, 10, _hoisted_2$5)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, null, 10, _hoisted_2$3)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.value(), props.classNames?.value))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(formattedValue.value), 1)])], 2)) : (0, vue.createCommentVNode)("", true)]),
@@ -30610,8 +30853,8 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/calendar/Calendar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = ["aria-label"];
-var _hoisted_2$4 = ["aria-label"];
-var _hoisted_3$3 = ["aria-label"];
+var _hoisted_2$2 = ["aria-label"];
+var _hoisted_3$1 = ["aria-label"];
 //#endregion
 //#region src/components/calendar/Calendar.vue
 var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -30920,7 +31163,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$4)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$2)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -31000,6 +31243,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-read-only": (0, vue.unref)(isReadOnly),
 					"is-disabled": (0, vue.unref)(isDisabled),
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.class, props.classNames?.base)),
+					"class-names": props.classNames?.yearView,
 					"onUpdate:modelValue": onYearSelect
 				}, {
 					heading: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
@@ -31007,7 +31251,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 						"aria-label": `Switch to ${nextViewLabel.value} view`,
 						onClick: cycleView
-					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$3)]),
+					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$1)]),
 					_: 1
 				}, 8, [
 					"placeholder",
@@ -31016,7 +31260,8 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value",
 					"is-read-only",
 					"is-disabled",
-					"class"
+					"class",
+					"class-names"
 				])) : (0, vue.createCommentVNode)("", true)
 			], 64);
 		};
@@ -31025,8 +31270,8 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$4 = ["aria-label"];
-var _hoisted_2$3 = ["aria-label"];
-var _hoisted_3$2 = ["aria-label"];
+var _hoisted_2$1 = ["aria-label"];
+var _hoisted_3 = ["aria-label"];
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue
 var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -31339,7 +31584,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$3)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$1)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -31441,7 +31686,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$2)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
@@ -33685,7 +33930,8 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-read-only": __props.isReadOnly,
 					"is-required": __props.isRequired,
 					name: __props.name,
-					"hide-time-zone": __props.hideTimeZone
+					"hide-time-zone": __props.hideTimeZone,
+					"class-names": props.classNames?.dateInput
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
 						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
@@ -33764,7 +34010,8 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-read-only",
 					"is-required",
 					"name",
-					"hide-time-zone"
+					"hide-time-zone",
+					"class-names"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
@@ -33812,7 +34059,8 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							locale: __props.locale,
 							"number-of-months": __props.visibleMonths,
 							readonly: __props.isReadOnly,
-							disabled: __props.isDisabled
+							disabled: __props.isDisabled,
+							"class-names": props.classNames?.calendar
 						}, null, 8, [
 							"modelValue",
 							"default-value",
@@ -33824,7 +34072,8 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"locale",
 							"number-of-months",
 							"readonly",
-							"disabled"
+							"disabled",
+							"class-names"
 						]),
 						(0, vue.renderSlot)(_ctx.$slots, "calendarBottomContent")
 					]),
@@ -34299,7 +34548,7 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/_shared/TimeScroller.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = ["aria-label", "onScrollPassive"];
-var _hoisted_2$2 = [
+var _hoisted_2 = [
 	"data-selected",
 	"aria-selected",
 	"onClick"
@@ -34314,7 +34563,8 @@ var TimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		modelValue: {},
 		granularity: { default: "minute" },
 		hourCycle: { default: 24 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -34411,13 +34661,14 @@ var TimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (typeof item === "string") return item;
 			return String(item).padStart(2, "0");
 		}
+		const slotFns = (0, _auronui_styles.dateTimePickerVariants)();
 		__expose({
 			columnRefs,
 			columns
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)(["date-time-picker__scroller-wrap", props.class]),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).scrollerWrap(), props.class, props.classNames?.scrollerWrap)),
 				"data-slot": "time-scroller"
 			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(columns.value, (col, i) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -34426,7 +34677,7 @@ var TimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					ref: (el) => {
 						if (el) columnRefs.value[i] = el;
 					},
-					class: "date-time-picker__scroller-column",
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).scrollerColumn(), props.classNames?.scrollerColumn)),
 					"aria-label": columnLabel(col.key),
 					"data-slot": "scroller-column",
 					role: "listbox",
@@ -34435,13 +34686,13 @@ var TimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderItems(col), (item, idx) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: idx,
-						class: "date-time-picker__scroller-item",
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).scrollerItem(), props.classNames?.scrollerItem)),
 						"data-selected": isSelected(col.key, item) ? "true" : void 0,
 						"aria-selected": isSelected(col.key, item),
 						role: "option",
 						onClick: ($event) => onItemClick(col.key, item)
-					}, (0, vue.toDisplayString)(itemLabel(item)), 9, _hoisted_2$2);
-				}), 128))], 40, _hoisted_1$3);
+					}, (0, vue.toDisplayString)(itemLabel(item)), 11, _hoisted_2);
+				}), 128))], 42, _hoisted_1$3);
 			}), 128))], 2);
 		};
 	}
@@ -34663,6 +34914,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-required": __props.isRequired,
 					name: __props.name,
 					"hide-time-zone": __props.hideTimeZone,
+					"class-names": props.classNames?.dateInput,
 					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
@@ -34739,7 +34991,8 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"is-read-only",
 					"is-required",
 					"name",
-					"hide-time-zone"
+					"hide-time-zone",
+					"class-names"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
@@ -34790,7 +35043,8 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"is-date-unavailable": __props.isDateUnavailable,
 							locale: __props.locale,
 							readonly: __props.isReadOnly,
-							disabled: __props.isDisabled
+							disabled: __props.isDisabled,
+							"class-names": props.classNames?.calendar
 						}, null, 8, [
 							"modelValue",
 							"default-value",
@@ -34800,7 +35054,8 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"is-date-unavailable",
 							"locale",
 							"readonly",
-							"disabled"
+							"disabled",
+							"class-names"
 						])], 2),
 						(0, vue.createElementVNode)("div", {
 							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.divider(), props.classNames?.divider)),
@@ -34814,11 +35069,13 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"model-value": internalValue.value,
 							granularity: __props.granularity,
 							"hour-cycle": __props.hourCycle,
+							"class-names": props.classNames?.timeScroller,
 							"onUpdate:modelValue": _cache[2] || (_cache[2] = (val) => onTimeUpdate(val))
 						}, null, 8, [
 							"model-value",
 							"granularity",
-							"hour-cycle"
+							"hour-cycle",
+							"class-names"
 						]), (0, vue.createElementVNode)("div", {
 							class: (0, vue.normalizeClass)(slotFns.value.timeDone()),
 							"data-slot": "time-done"
@@ -35063,6 +35320,7 @@ var TimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"hide-time-zone": __props.hideTimeZone,
 					required: __props.required,
 					dir: __props.dir,
+					"class-names": props.classNames?.timeField,
 					"onUpdate:modelValue": _cache[1] || (_cache[1] = (val) => onFieldChange(val))
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)(PopoverTrigger_default, {
@@ -35124,7 +35382,8 @@ var TimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone",
 					"required",
-					"dir"
+					"dir",
+					"class-names"
 				]), (0, vue.createVNode)(PopoverContent_default, {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
@@ -35153,11 +35412,13 @@ var TimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"model-value": internalValue.value,
 						granularity: __props.granularity === "hour" ? "minute" : __props.granularity,
 						"hour-cycle": __props.hourCycle,
+						"class-names": props.classNames?.timeScroller,
 						"onUpdate:modelValue": _cache[2] || (_cache[2] = (val) => onScrollerChange(val))
 					}, null, 8, [
 						"model-value",
 						"granularity",
-						"hour-cycle"
+						"hour-cycle",
+						"class-names"
 					]), (0, vue.createElementVNode)("div", {
 						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.timeDone(), props.classNames?.timeDone)),
 						"data-slot": "time-done"
@@ -35488,15 +35749,6 @@ var ColorSlider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/color-field/ColorField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = ["for"];
-var _hoisted_2$1 = {
-	key: 1,
-	class: "color-field__description"
-};
-var _hoisted_3$1 = {
-	key: 2,
-	class: "color-field__error-message",
-	role: "alert"
-};
 //#endregion
 //#region src/components/color-field/ColorField.vue
 var ColorField_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -35548,7 +35800,8 @@ var ColorField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		locale: {},
-		step: {}
+		step: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
@@ -35604,27 +35857,35 @@ var ColorField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"disable-wheel-change": props.disableWheelChange,
 				locale: props.locale,
 				step: props.step,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).base(), props.class)),
 				"onUpdate:color": onColorUpdate
 			}, {
 				default: (0, vue.withCtx)(() => [
 					__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 						key: 0,
 						for: (0, vue.unref)(id),
-						class: "color-field__label"
-					}, (0, vue.toDisplayString)(__props.label), 9, _hoisted_1$2)) : (0, vue.createCommentVNode)("", true),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).label(), props.classNames?.label))
+					}, (0, vue.toDisplayString)(__props.label), 11, _hoisted_1$2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.ColorFieldInput), {
 						id: (0, vue.unref)(id),
 						placeholder: __props.placeholder,
 						"aria-label": __props.label ? void 0 : props.ariaLabel ?? "Color value",
-						class: "color-field__input"
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).input(), props.classNames?.input))
 					}, null, 8, [
 						"id",
 						"placeholder",
-						"aria-label"
+						"aria-label",
+						"class"
 					]),
-					__props.description && !__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$1, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("", true),
-					__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$1, (0, vue.toDisplayString)(__props.errorMessage), 1)) : (0, vue.createCommentVNode)("", true)
+					__props.description && !__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 1,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).description(), props.classNames?.description))
+					}, (0, vue.toDisplayString)(__props.description), 3)) : (0, vue.createCommentVNode)("", true),
+					__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 2,
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).errorMessage(), props.classNames?.errorMessage)),
+						role: "alert"
+					}, (0, vue.toDisplayString)(__props.errorMessage), 3)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 1
 			}, 8, [
@@ -35841,17 +36102,7 @@ var ColorSwatchPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/color-input-group/ColorInputGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "color-input-group__wrapper" };
-var _hoisted_2 = ["for"];
-var _hoisted_3 = {
-	key: 1,
-	class: "color-input-group__description"
-};
-var _hoisted_4 = {
-	key: 2,
-	class: "color-input-group__error-message",
-	role: "alert"
-};
+var _hoisted_1$1 = ["for"];
 //#endregion
 //#region src/components/color-input-group/ColorInputGroup.vue
 var ColorInputGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -35904,7 +36155,8 @@ var ColorInputGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		locale: {},
-		step: {}
+		step: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
@@ -35950,12 +36202,12 @@ var ColorInputGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).wrapper(), props.classNames?.wrapper)) }, [
 				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 					key: 0,
 					for: (0, vue.unref)(id),
-					class: "color-input-group__label"
-				}, (0, vue.toDisplayString)(__props.label), 9, _hoisted_2)) : (0, vue.createCommentVNode)("", true),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).label(), props.classNames?.label))
+				}, (0, vue.toDisplayString)(__props.label), 11, _hoisted_1$1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.ColorFieldRoot), {
 					"model-value": color.value,
 					disabled: (0, vue.unref)(isDisabled),
@@ -36017,9 +36269,16 @@ var ColorInputGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"class",
 					"aria-invalid"
 				]),
-				__props.description && !__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("", true),
-				__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(__props.errorMessage), 1)) : (0, vue.createCommentVNode)("", true)
-			]);
+				__props.description && !__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 1,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).description(), props.classNames?.description))
+				}, (0, vue.toDisplayString)(__props.description), 3)) : (0, vue.createCommentVNode)("", true),
+				__props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 2,
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(styles).errorMessage(), props.classNames?.errorMessage)),
+					role: "alert"
+				}, (0, vue.toDisplayString)(__props.errorMessage), 3)) : (0, vue.createCommentVNode)("", true)
+			], 2);
 		};
 	}
 });