@auronui/vue 1.0.13 → 1.0.15

package/dist/cjs/index.cjs

@@ -252,12 +252,12 @@ function useListData(options) {
 //#region src/utils/composeClassName.ts
 /**
 * Merges Tailwind CSS classes, resolving conflicts via tailwind-merge.
-* Uses cx() from tailwind-variants to join classes, then twMerge() to
-* deduplicate conflicting utilities (e.g. "p-4 p-2" → "p-2").
+* Accepts strings, objects ({ 'p-4': true }), arrays, and falsy values —
+* matching the full set of values Vue's :class binding accepts.
 *
 * Requires tailwind-merge 3.5.0 (Tailwind 4 compatible).
 *
-* @param classes - Class strings, undefined, null, or false values
+* @param classes - Any combination of ClassValue inputs
 * @returns Merged class string with conflicts resolved
 */
 function composeClassName(...classes) {
@@ -374,7 +374,7 @@ 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$32 = {
+var _hoisted_2$31 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
 	"aria-hidden": "true",
@@ -408,7 +408,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$32, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
+			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$31, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
 				id: gradId1,
 				x1: "50%",
 				x2: "50%",
@@ -499,12 +499,13 @@ var Skeleton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Skeleton",
 	props: {
 		animationType: { default: "shimmer" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.skeletonVariants)({ animationType: props.animationType }));
-		const classes = (0, vue.computed)(() => composeClassName(slotFns.value.base(), props.class));
+		const classes = (0, vue.computed)(() => composeClassName(slotFns.value.base(), props.class, props.classNames?.base));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				class: (0, vue.normalizeClass)(classes.value),
@@ -622,16 +623,17 @@ var Kbd_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Kbd",
 	props: {
 		variant: { default: "default" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.kbdVariants)({ variant: props.variant }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [_ctx.$slots.abbr ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("abbr", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [_ctx.$slots.abbr ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("abbr", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.abbr())
-			}, [(0, vue.renderSlot)(_ctx.$slots, "abbr")], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)], 2);
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.abbr(), props.classNames?.abbr))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "abbr")], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)], 2);
 		};
 	}
 });
@@ -644,7 +646,8 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: { default: "md" },
 		variant: { default: "primary" },
 		placement: { default: "top-right" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -655,7 +658,7 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			placement: props.placement
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(slotFns.value.anchor()) }, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "label")], 2)], 2)], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.anchor(), props.classNames?.anchor)) }, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "label")], 2)], 2)], 2);
 		};
 	}
 });
@@ -679,7 +682,8 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		closeAriaLabel: { default: "Remove" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["close"],
 	setup(__props, { emit: __emit }) {
@@ -691,27 +695,27 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			variant: props.variant
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [
 				__props.dot ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.dot()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.dot(), props.classNames?.dot)),
 					"aria-hidden": "true"
 				}, null, 2)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 				_ctx.$slots.endContent && !__props.isClosable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				__props.isClosable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
-					class: (0, vue.normalizeClass)(slotFns.value.closeButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.closeButton(), props.classNames?.closeButton)),
 					"aria-label": __props.closeAriaLabel,
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -797,7 +801,8 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["press"],
 	setup(__props, { emit: __emit }) {
@@ -836,7 +841,7 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				role: role.value,
 				tabindex: tabindex.value,
 				"aria-disabled": __props.isDisabled || void 0,
@@ -856,7 +861,8 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -871,7 +877,7 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), __props.divider && "card__header--divided", props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), __props.divider && "card__header--divided", props.class, props.classNames?.header)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -879,7 +885,10 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/card/CardBody.vue
 var CardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CardBody",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCardInject({
@@ -893,7 +902,7 @@ var CardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class, props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -906,7 +915,8 @@ var CardFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -921,7 +931,7 @@ var CardFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), __props.divider && "card__footer--divided", props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), __props.divider && "card__footer--divided", props.class, props.classNames?.footer)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -987,6 +997,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		as: { default: "button" },
 		class: {},
+		classNames: {},
 		value: { default: void 0 }
 	},
 	setup(__props) {
@@ -1026,7 +1037,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), (0, vue.mergeProps)({
 				as: props.as,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				disabled: isDisabled.value || props.isLoading || void 0,
 				"data-disabled": isDisabled.value || void 0,
 				"data-loading": props.isLoading || void 0,
@@ -1036,16 +1047,16 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				default: (0, vue.withCtx)(() => [
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 0,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					props.isLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.spinner()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.spinner(), props.classNames?.spinner)),
 						"aria-hidden": "true",
 						"data-slot": "spinner"
 					}, [(0, vue.createVNode)(Spinner_default, {
@@ -1086,6 +1097,7 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		orientation: { default: "horizontal" },
 		class: {},
+		classNames: {},
 		selectionMode: { default: "single" },
 		modelValue: { default: void 0 }
 	},
@@ -1130,7 +1142,7 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				role: "group"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$55);
@@ -1312,7 +1324,8 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		selectionMode: { default: "multiple" },
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -1352,7 +1365,7 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				role: "group"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$53);
@@ -1378,7 +1391,8 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		color: {},
 		underline: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -1400,12 +1414,12 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				href: props.href,
 				target: resolvedTarget.value,
 				rel: resolvedRel.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"aria-disabled": props.disabled || void 0
 			}, _ctx.$attrs), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), props.isExternal ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.icon()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.icon(), props.classNames?.icon)),
 					"aria-hidden": "true"
 				}, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
@@ -1852,7 +1866,7 @@ var _hoisted_1$52 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$31 = ["for"];
+var _hoisted_2$30 = ["for"];
 var _hoisted_3$19 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -1943,7 +1957,8 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -2003,7 +2018,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -2013,19 +2028,19 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$31)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
 				showInsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 					key: 0,
 					for: inputId.value,
-					class: (0, vue.normalizeClass)(slotFns.value.label())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$6, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$8)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.withDirectives)((0, vue.createElementVNode)("input", (0, vue.mergeProps)(inputAttrs.value, {
 					id: inputId.value,
@@ -2040,17 +2055,17 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": ariaDescribedBy.value,
-					class: slotFns.value.input()
+					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
 				}), null, 16, _hoisted_7$4), [[vue.vModelDynamic, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
 					tabindex: "-1",
-					class: (0, vue.normalizeClass)(slotFns.value.clearButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.clearButton(), props.classNames?.clearButton)),
 					"aria-label": "Clear input",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -2084,7 +2099,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				showPasswordToggleButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 4,
 					type: "button",
-					class: (0, vue.normalizeClass)(slotFns.value.passwordToggle()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.passwordToggle(), props.classNames?.passwordToggle)),
 					"aria-label": isPasswordVisible.value ? "Hide password" : "Show password",
 					"aria-pressed": isPasswordVisible.value,
 					onClick: togglePasswordVisibility
@@ -2100,15 +2115,15 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, null, -1)])]))], 10, _hoisted_8$1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_4$12), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_11)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$52);
 		};
 	}
@@ -2123,7 +2138,7 @@ var _hoisted_1$51 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$30 = ["for"];
+var _hoisted_2$29 = ["for"];
 var _hoisted_3$18 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -2191,7 +2206,8 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -2243,7 +2259,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -2253,19 +2269,19 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$29)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
 				showInsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 					key: 0,
 					for: inputId.value,
-					class: (0, vue.normalizeClass)(slotFns.value.label())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$7)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", (0, vue.mergeProps)(inputAttrs.value, {
 					id: inputId.value,
@@ -2280,17 +2296,17 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": ariaDescribedBy.value,
-					class: slotFns.value.input()
+					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
 				}), null, 16, _hoisted_7$3), [[vue.vModelText, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
 					tabindex: "-1",
-					class: (0, vue.normalizeClass)(slotFns.value.clearButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.clearButton(), props.classNames?.clearButton)),
 					"aria-label": "Clear textarea",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -2323,15 +2339,15 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				], -1)])], 2)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_4$11), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$51);
 		};
 	}
@@ -2373,7 +2389,8 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		placeholder: {},
 		label: { default: void 0 },
 		ariaLabel: { default: void 0 },
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -2408,7 +2425,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"format-options": props.formatOptions,
 				locale: props.locale,
 				name: props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": props.isInvalid || void 0,
 				"data-disabled": props.isDisabled || void 0,
 				"data-readonly": props.isReadonly || void 0
@@ -2419,10 +2436,10 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: (0, vue.normalizeClass)(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
 				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$50)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.group()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.classNames?.group)),
 					"data-slot": "group"
 				}, [
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldDecrement), { class: (0, vue.normalizeClass)(slotFns.value.decrementButton()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldDecrement), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.decrementButton(), props.classNames?.decrementButton)) }, {
 						default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -2439,10 +2456,10 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						_: 1
 					}, 8, ["class"]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldInput), {
-						class: (0, vue.normalizeClass)(slotFns.value.input()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)),
 						placeholder: props.placeholder
 					}, null, 8, ["class", "placeholder"]),
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldIncrement), { class: (0, vue.normalizeClass)(slotFns.value.incrementButton()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldIncrement), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.incrementButton(), props.classNames?.incrementButton)) }, {
 						default: (0, vue.withCtx)(() => [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -2530,7 +2547,7 @@ var _hoisted_1$48 = {
 	"stroke-linecap": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_2$29 = {
+var _hoisted_2$28 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2568,7 +2585,8 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		name: { default: void 0 },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -2601,18 +2619,18 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: isDisabled.value,
 				name: props.name ?? (0, vue.unref)(groupCtx).name.value,
 				value: props.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"onUpdate:modelValue": handleUpdate
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { 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$48, [..._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$29, [..._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$28, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
 					_: 1
-				}, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+				}, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"model-value",
@@ -2627,7 +2645,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$47 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$28 = { class: "checkbox-group__wrapper" };
+var _hoisted_2$27 = { class: "checkbox-group__wrapper" };
 var _hoisted_3$17 = {
 	key: 1,
 	class: "checkbox-group__description"
@@ -2682,7 +2700,7 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					id: labelId,
 					class: "checkbox-group__label"
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				(0, vue.createElementVNode)("div", _hoisted_2$27, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$17, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_1$47);
 		};
@@ -2703,7 +2721,8 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -2720,9 +2739,9 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: isDisabled.value,
 				"data-variant": finalVariant.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RadioGroupIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, null, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RadioGroupIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, null, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"value",
@@ -2736,7 +2755,7 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$46 = { class: "radio-group__wrapper" };
-var _hoisted_2$27 = {
+var _hoisted_2$26 = {
 	key: 1,
 	class: "radio-group__description"
 };
@@ -2786,7 +2805,7 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: "radio-group__label"
 					}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", _hoisted_1$46, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$27, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -2825,7 +2844,8 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		name: { default: void 0 },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -2857,12 +2877,12 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: isDisabled.value,
 				name: props.name ?? (0, vue.unref)(groupCtx).name.value,
 				value: props.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"onUpdate:modelValue": handleUpdate
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SwitchThumb), { class: (0, vue.normalizeClass)(slotFns.value.thumb()) }, null, 8, ["class"])], 2), _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SwitchThumb), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.thumb(), props.classNames?.thumb)) }, null, 8, ["class"])], 2), _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.content())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)) : (0, vue.createCommentVNode)("", true)]),
 				_: 3
 			}, 16, [
@@ -2878,7 +2898,7 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$45 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$26 = {
+var _hoisted_2$25 = {
 	key: 1,
 	class: "switch-group__description"
 };
@@ -2933,7 +2953,7 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
-				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$25, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_1$45);
 		};
 	}
@@ -2962,7 +2982,8 @@ var InputOTP_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		defaultValue: { default: void 0 },
 		name: { default: void 0 },
 		variant: { default: "primary" },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["update:modelValue", "complete"],
 	setup(__props, { emit: __emit }) {
@@ -2981,15 +3002,15 @@ var InputOTP_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				otp: __props.otp,
 				mask: __props.mask,
 				name: __props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": handleUpdate,
 				onComplete: handleComplete
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.group()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.length, (i) => {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.classNames?.group)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.length, (i) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PinInputInput), {
 						key: i - 1,
 						index: i - 1,
-						class: (0, vue.normalizeClass)(slotFns.value.slot())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.slot(), props.classNames?.slot))
 					}, null, 8, ["index", "class"]);
 				}), 128))], 2)]),
 				_: 1
@@ -12941,7 +12962,7 @@ var _hoisted_1$43 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$25 = {
+var _hoisted_2$24 = {
 	key: 1,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -13001,7 +13022,7 @@ 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$25, [..._cache[1] || (_cache[1] = [
+			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$24, [..._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)
@@ -13029,6 +13050,7 @@ var AlertDialogAction_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		variant: { default: "danger" },
 		size: { default: "md" },
 		class: {},
+		classNames: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -13043,7 +13065,7 @@ var AlertDialogAction_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AlertDialogAction), {
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class, props.classNames?.base))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13059,6 +13081,7 @@ var AlertDialogCancel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		variant: { default: "secondary" },
 		size: { default: "md" },
 		class: {},
+		classNames: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -13073,7 +13096,7 @@ var AlertDialogCancel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AlertDialogCancel), {
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class, props.classNames?.base))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13337,7 +13360,8 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		orientation: { default: "horizontal" },
 		variant: { default: "primary" },
 		activationMode: { default: "automatic" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -13363,7 +13387,7 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"model-value": internalValue.value,
 				orientation: props.orientation,
 				"activation-mode": props.activationMode,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				"onUpdate:modelValue": changeTab
 			}, {
@@ -13393,7 +13417,8 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		loop: { type: Boolean },
 		overflow: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13430,12 +13455,10 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, { immediate: true });
 		(0, _vueuse_core.useResizeObserver)(scrollWrapperEl, () => (0, vue.nextTick)(updateScrollButtons));
 		const containerEl = (0, vue.useTemplateRef)("containerEl");
-		const moreBtnEl = (0, vue.useTemplateRef)("moreBtnEl");
 		const dropdownEl = (0, vue.useTemplateRef)("dropdownEl");
 		const hiddenTabs = (0, vue.ref)([]);
 		const dropdownOpen = (0, vue.ref)(false);
 		const hasOverflow = (0, vue.computed)(() => hiddenTabs.value.length > 0);
-		let moreBtnNaturalWidth = 48;
 		(0, _vueuse_core.onClickOutside)(dropdownEl, () => {
 			dropdownOpen.value = false;
 		});
@@ -13452,7 +13475,19 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				});
 				listEl.offsetWidth;
 			}
-			const containerWidth = containerEl.value.clientWidth;
+			let moreWidth = 0;
+			const moreEl = dropdownEl.value;
+			if (moreEl) {
+				const prevDisplay = moreEl.style.display;
+				moreEl.style.display = "flex";
+				moreEl.offsetWidth;
+				moreWidth = moreEl.offsetWidth;
+				moreEl.style.display = prevDisplay;
+			}
+			const cs = getComputedStyle(containerEl.value);
+			const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+			const gap = parseFloat(cs.columnGap) || 0;
+			const contentWidth = containerEl.value.clientWidth - padX;
 			const tabWidths = allTabs.map((t) => t.offsetWidth);
 			const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0);
 			if (listEl) {
@@ -13462,11 +13497,11 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					t.style.width = "";
 				});
 			}
-			if (totalWidth <= containerWidth) {
+			if (totalWidth <= contentWidth) {
 				hiddenTabs.value = [];
 				return;
 			}
-			const available = containerWidth - moreBtnNaturalWidth;
+			const available = contentWidth - moreWidth - gap - 1;
 			let accumulated = 0;
 			const newHidden = [];
 			const visibleEls = [];
@@ -13508,13 +13543,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		(0, _vueuse_core.useResizeObserver)(containerEl, () => (0, vue.nextTick)(computeOverflow));
 		(0, vue.onMounted)(() => {
-			const btnEl = moreBtnEl.value?.$el;
-			if (btnEl) {
-				btnEl.style.display = "flex";
-				btnEl.offsetWidth;
-				moreBtnNaturalWidth = btnEl.offsetWidth;
-				btnEl.style.display = "";
-			}
 			(0, vue.nextTick)(computeOverflow);
 		});
 		(0, vue.watch)(() => ctx.currentValue.value, () => {
@@ -13531,7 +13559,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return !props.overflow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsList), {
 				key: 0,
 				loop: props.loop ?? true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), props.class, props.classNames?.tabList))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13573,7 +13601,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "tabs__scroll-wrapper"
 				}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 					loop: props.loop ?? true,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class, props.classNames?.tabList))
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
@@ -13610,7 +13638,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: "tabs__list-container tabs__list-container--dropdown"
 			}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 				loop: props.loop ?? true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class, props.classNames?.tabList))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13619,8 +13647,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: dropdownEl,
 				class: (0, vue.normalizeClass)(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
 			}, [(0, vue.createVNode)(Button_default, {
-				ref_key: "moreBtnEl",
-				ref: moreBtnEl,
 				variant: "secondary",
 				size: "sm",
 				radius: "full",
@@ -13667,7 +13693,8 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		disabled: { type: Boolean },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13677,7 +13704,7 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: props.disabled,
 				"data-tab-value": props.value,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tab(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tab(), props.class, props.classNames?.tab))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13697,7 +13724,8 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		forceMount: { type: Boolean },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13706,7 +13734,7 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsContent), {
 				value: props.value,
 				"force-mount": props.forceMount,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabPanel(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13722,12 +13750,15 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/tabs/TabIndicator.vue
 var TabIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TabIndicator",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useTabsInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabIndicator(), props.class)) }, null, 8, ["class"]);
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabIndicator(), props.class, props.classNames?.tabIndicator)) }, null, 8, ["class"]);
 		};
 	}
 });
@@ -13752,7 +13783,8 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		variant: { default: "default" },
 		size: { default: "md" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -13770,7 +13802,7 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"default-value": props.defaultValue,
 				collapsible: props.collapsible,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => {
 					if (v !== void 0) emit("update:modelValue", v);
 				})
@@ -13798,7 +13830,8 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		disabled: { type: Boolean },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13810,7 +13843,7 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: "reka",
 				value: props.value,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class, props.classNames?.item))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13826,12 +13859,15 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionHeader.vue
 var AccordionHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionHeader",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.heading(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.heading(), props.class, props.classNames?.heading)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, ["class"]);
@@ -13842,15 +13878,18 @@ var AccordionHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionTrigger.vue
 var AccordionTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionTrigger",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
 		const item = useAccordionItemInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", {
-					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "indicator", { open: (0, vue.unref)(item).open.value }, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
@@ -13873,7 +13912,10 @@ var AccordionTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionContent.vue
 var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionContent",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
@@ -13881,7 +13923,7 @@ var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionContent), {
 				"force-mount": true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.class, props.classNames?.body))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(motion).div, {
 					initial: false,
@@ -13903,7 +13945,7 @@ var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					},
 					style: { "overflow": "hidden" }
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.bodyInner()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.bodyInner(), props.classNames?.bodyInner)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 					_: 3
 				}, 8, ["animate"])]),
 				_: 3
@@ -13940,7 +13982,8 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -13978,7 +14021,7 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				open: isControlled.value ? internalOpen.value : void 0,
 				"default-open": !isControlled.value ? props.defaultOpen : void 0,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:open": onUpdateOpen
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -13999,14 +14042,17 @@ var _hoisted_1$41 = ["data-state"];
 //#region src/components/collapsible/CollapsibleTrigger.vue
 var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CollapsibleTrigger",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CollapsibleTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CollapsibleTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", {
-					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"data-state": (0, vue.unref)(ctx).isOpen.value ? "open" : "closed",
 					"aria-hidden": "true"
 				}, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
@@ -14031,7 +14077,10 @@ var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/collapsible/CollapsibleContent.vue
 var CollapsibleContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CollapsibleContent",
-	props: { class: {} },
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
@@ -14060,9 +14109,9 @@ var CollapsibleContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							ease: "easeOut"
 						},
 						style: { "overflow": "hidden" },
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.body())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.classNames?.body))
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.bodyInner()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.bodyInner(), props.classNames?.bodyInner)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 						_: 3
 					}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)]),
 					_: 3
@@ -14081,7 +14130,8 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14102,7 +14152,7 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.collapsibleGroupVariants)({}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -14115,7 +14165,8 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Breadcrumbs",
 	props: {
 		maxItems: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14138,7 +14189,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				list = [
 					first,
 					(0, vue.h)("li", {
-						class: slotFns.value.item(),
+						class: composeClassName(slotFns.value.item(), props.classNames?.item),
 						"aria-hidden": "true"
 					}, "…"),
 					...last
@@ -14159,7 +14210,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("nav", {
 				"aria-label": "Breadcrumb",
 				class: (0, vue.normalizeClass)(props.class)
-			}, [(0, vue.createElementVNode)("ol", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), void 0)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderedChildren.value, (child, idx) => {
+			}, [(0, vue.createElementVNode)("ol", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderedChildren.value, (child, idx) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(child), { key: idx });
 			}), 128))], 2)], 2);
 		};
@@ -14168,7 +14219,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/breadcrumbs/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$40 = ["aria-current"];
-var _hoisted_2$24 = ["href"];
+var _hoisted_2$23 = ["href"];
 var _hoisted_3$15 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
@@ -14190,7 +14241,8 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14198,18 +14250,18 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const SeparatorRenderer = (0, vue.computed)(() => ctx.separatorSlot ? () => (0, vue.h)(() => ctx.separatorSlot()) : null);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
-				class: (0, vue.normalizeClass)([(0, vue.unref)(ctx).slotFns.value.item(), props.class]),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class, props.classNames?.item)),
 				"aria-current": props.isLast ? "page" : void 0
 			}, [props.href && !props.isLast ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("a", {
 				key: 0,
 				href: props.href,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$24)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				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$23)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
+				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)(ctx).slotFns.value.separator()),
+				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$15, [..._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$40);
 		};
@@ -14414,7 +14466,7 @@ var _hoisted_1$39 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$23 = {
+var _hoisted_2$22 = {
 	key: 1,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -14507,7 +14559,7 @@ 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$23, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
+						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$22, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
 							cx: "12",
 							cy: "12",
 							r: "9"
@@ -14988,7 +15040,8 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -15010,7 +15063,7 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: props.isDisabled,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", props.selectionMode === "single" ? Array.isArray($event) ? $event[0] : $event : $event))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)((0, vue.unref)(attrs), { class: (0, vue.unref)(composeClassName)(slotFns.value, props.class) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)((0, vue.unref)(attrs), { class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base) }), {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
 				}, 16, ["class"])]),
@@ -15037,7 +15090,8 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		variant: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -15054,13 +15108,13 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: finalDisabled.value,
 				"text-value": props.textValue ?? props.value,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item))
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 					(0, vue.renderSlot)(_ctx.$slots, "default"),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent"),
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxItemIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxItemIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
@@ -15155,7 +15209,7 @@ function hasSlotComponent(nodes, components) {
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$37 = ["for"];
-var _hoisted_2$22 = {
+var _hoisted_2$21 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15190,7 +15244,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).triggerId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$22, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$21, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (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()),
@@ -15473,7 +15527,7 @@ var _hoisted_1$35 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$21 = ["for"];
+var _hoisted_2$20 = ["for"];
 var _hoisted_3$13 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -15516,6 +15570,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		multiple: {
@@ -15594,7 +15649,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -15604,8 +15659,8 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: triggerId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$21)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$20)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
 				"model-value": props.modelValue,
 				"default-value": props.defaultValue,
 				multiple: props.multiple,
@@ -15650,15 +15705,15 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"name"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
 		};
 	}
@@ -15780,7 +15835,7 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$34 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$20 = { "data-slot": "label" };
+var _hoisted_2$19 = { "data-slot": "label" };
 var _hoisted_3$12 = {
 	key: 0,
 	"data-slot": "description"
@@ -15819,7 +15874,7 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$20, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$19, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
 					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$7, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
@@ -16403,7 +16458,7 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$33 = ["aria-invalid"];
-var _hoisted_2$19 = ["id"];
+var _hoisted_2$18 = ["id"];
 var _hoisted_3$11 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -16465,7 +16520,8 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(__props, { emit: __emit }) {
@@ -16528,7 +16584,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-invalid": props.isInvalid || void 0,
 				"data-slot": "combo-box"
 			}, [
@@ -16536,7 +16592,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$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$18)) : (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))],
@@ -16682,7 +16738,7 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 //#endregion
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$31 = ["for"];
-var _hoisted_2$18 = {
+var _hoisted_2$17 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -16718,7 +16774,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).inputId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (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()),
@@ -16966,7 +17022,7 @@ var _hoisted_1$29 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
-var _hoisted_2$17 = {
+var _hoisted_2$16 = {
 	key: 1,
 	class: "list-box-item__indicator",
 	"data-slot": "list-box-item-indicator"
@@ -17045,7 +17101,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$16, [(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",
@@ -17081,7 +17137,7 @@ var _hoisted_1$28 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$16 = ["for"];
+var _hoisted_2$15 = ["for"];
 var _hoisted_3$10 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -17124,6 +17180,7 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		multiple: {
@@ -17395,7 +17452,7 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -17405,8 +17462,8 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$16)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$15)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
 				"model-value": searchTerm.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
 				open: props.multiple ? internalOpen.value : singleOpen.value,
@@ -17442,15 +17499,15 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"ignore-filter"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$5)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$28);
 		};
 	}
@@ -17611,7 +17668,7 @@ var Pagination_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/pagination/PaginationContent.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$26 = ["disabled", "data-disabled"];
-var _hoisted_2$15 = ["disabled", "data-disabled"];
+var _hoisted_2$14 = ["disabled", "data-disabled"];
 //#endregion
 //#region src/components/pagination/PaginationContent.vue
 var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -17652,7 +17709,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$15)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$14)
 			], 2));
 		};
 	}
@@ -20446,7 +20503,9 @@ var _hoisted_1$25 = [
 //#region src/components/table/TableHeader.vue
 var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableHeader",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		function getAriaSort(header) {
@@ -20468,16 +20527,16 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			onHeaderActivate(header, event);
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("thead", { class: (0, vue.normalizeClass)(slotFns.value.header()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getHeaderGroups(), (headerGroup) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("thead", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getHeaderGroups(), (headerGroup) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 					key: headerGroup.id,
 					role: "row",
-					class: (0, vue.normalizeClass)(slotFns.value.row())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row))
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(headerGroup.headers, (header, colIndex) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
 						key: header.id,
 						role: "columnheader",
-						class: (0, vue.normalizeClass)(slotFns.value.column()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 						"data-col-index": colIndex,
 						"data-row-index": -1,
 						"aria-sort": getAriaSort(header),
@@ -20504,7 +20563,7 @@ var _hoisted_1$24 = [
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_2$14 = [
+var _hoisted_2$13 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -20513,7 +20572,9 @@ var _hoisted_2$14 = [
 //#region src/components/table/TableBody.vue
 var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableBody",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		function onRowKeydown(row, event) {
@@ -20526,11 +20587,11 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			else row.toggleSelected();
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)(slotFns.value.body()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getRowModel().rows, (row, rowIndex) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getRowModel().rows, (row, rowIndex) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 					key: row.id,
 					role: "row",
-					class: (0, vue.normalizeClass)(slotFns.value.row()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row)),
 					"aria-rowindex": rowIndex + 1,
 					"aria-selected": (0, vue.unref)(ctx).selectionMode.value !== "none" ? row.getIsSelected() : void 0,
 					"data-state": row.getIsSelected() ? "checked" : void 0,
@@ -20540,7 +20601,7 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 						key: cell.id,
 						role: "gridcell",
-						class: (0, vue.normalizeClass)(slotFns.value.cell()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 						"data-row-index": rowIndex,
 						"data-col-index": colIndex,
 						tabindex: (0, vue.unref)(ctx).activeCell.value && (0, vue.unref)(ctx).activeCell.value.rowIndex === rowIndex && (0, vue.unref)(ctx).activeCell.value.columnIndex === colIndex ? 0 : (0, vue.unref)(ctx).activeCell.value === null && rowIndex === 0 && colIndex === 0 ? 0 : -1
@@ -20552,7 +20613,7 @@ 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$14);
+					}, null, 8, ["render", "props"])])], 10, _hoisted_2$13);
 				}), 128))], 42, _hoisted_1$24);
 			}), 128))], 2);
 		};
@@ -21349,7 +21410,7 @@ var _hoisted_1$23 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_2$13 = ["colspan"];
+var _hoisted_2$12 = ["colspan"];
 var _hoisted_3$9 = [
 	"aria-rowindex",
 	"aria-selected",
@@ -21374,7 +21435,8 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		scrollElement: {},
 		estimatedRowHeight: {},
-		overscan: {}
+		overscan: {},
+		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -21412,7 +21474,7 @@ 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)(slotFns.value.body()) }, [
+			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$23, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
 					style: (0, vue.normalizeStyle)({
@@ -21420,12 +21482,12 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						padding: 0,
 						border: "none"
 					})
-				}, null, 12, _hoisted_2$13)])) : (0, vue.createCommentVNode)("", true),
+				}, null, 12, _hoisted_2$12)])) : (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,
 						role: "row",
-						class: (0, vue.normalizeClass)(slotFns.value.row()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row)),
 						"aria-rowindex": vItem.index + 1,
 						"aria-selected": (0, vue.unref)(ctx).selectionMode.value !== "none" ? rows.value[vItem.index].getIsSelected() : void 0,
 						"data-state": rows.value[vItem.index].getIsSelected() ? "checked" : void 0,
@@ -21435,7 +21497,7 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 							key: cell.id,
 							role: "gridcell",
-							class: (0, vue.normalizeClass)(slotFns.value.cell()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 							"data-row-index": vItem.index,
 							"data-col-index": colIndex,
 							tabindex: (0, vue.unref)(ctx).activeCell.value !== null && (0, vue.unref)(ctx).activeCell.value.rowIndex === vItem.index && (0, vue.unref)(ctx).activeCell.value.columnIndex === colIndex ? 0 : (0, vue.unref)(ctx).activeCell.value === null && vItem.index === 0 && colIndex === 0 ? 0 : -1
@@ -21461,11 +21523,13 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/table/TableFooter.vue
 var TableFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableFooter",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tfoot", { class: (0, vue.normalizeClass)(slotFns.value.footer()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tfoot", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), props.classNames?.footer)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -21537,7 +21601,8 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		estimatedRowHeight: { default: 44 },
-		virtualizerOverscan: { default: 8 }
+		virtualizerOverscan: { default: 8 },
+		classNames: {}
 	},
 	emits: ["update:rowSelection"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -21652,10 +21717,10 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			handleRowClick
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), _ctx.$attrs.class)) }, [(0, vue.createElementVNode)("div", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), _ctx.$attrs.class, props.classNames?.base)) }, [(0, vue.createElementVNode)("div", {
 				ref_key: "scrollContainerRef",
 				ref: scrollContainerRef,
-				class: (0, vue.normalizeClass)(slotFns.value.scrollContainer()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.scrollContainer(), props.classNames?.scrollContainer)),
 				style: (0, vue.normalizeStyle)(useVirtual.value ? {
 					height: "400px",
 					overflow: "auto"
@@ -21697,13 +21762,18 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/table/TableRow.vue
 var TableRow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableRow",
+	props: {
+		class: {},
+		classNames: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 				role: "row",
-				class: (0, vue.normalizeClass)(slotFns.value.row())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.class, props.classNames?.row))
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
@@ -21717,15 +21787,17 @@ var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableCell",
 	props: {
 		rowIndex: {},
-		columnIndex: {}
+		columnIndex: {},
+		classNames: {}
 	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 				role: "gridcell",
-				class: (0, vue.normalizeClass)(slotFns.value.cell()),
+				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$21);
@@ -21741,15 +21813,17 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableHeaderCell",
 	props: {
 		columnIndex: {},
-		sortDirection: {}
+		sortDirection: {},
+		classNames: {}
 	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
 				role: "columnheader",
-				class: (0, vue.normalizeClass)(slotFns.value.column()),
+				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$20);
@@ -21765,7 +21839,7 @@ var _hoisted_1$19 = {
 	key: 0,
 	class: /* @__PURE__ */ (0, vue.normalizeClass)("avatar__name text-xs font-medium leading-none")
 };
-var _hoisted_2$12 = {
+var _hoisted_2$11 = {
 	key: 1,
 	class: "avatar__icon size-4/5",
 	"aria-hidden": "true",
@@ -21796,7 +21870,8 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21826,7 +21901,7 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const inGroupClass = (0, vue.computed)(() => isInGroup.value ? "-me-2" : void 0);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AvatarRoot), {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), borderedClass.value, inGroupClass.value, props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), borderedClass.value, inGroupClass.value, props.class, props.classNames?.base)),
 				"data-disabled": isDisabled.value || void 0,
 				"data-bordered": finalIsBordered.value || void 0
 			}, {
@@ -21834,13 +21909,13 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					src: props.src,
 					alt: props.alt ?? props.name ?? "",
-					class: (0, vue.normalizeClass)(slotFns.value.image())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.image(), props.classNames?.image))
 				}, null, 8, [
 					"src",
 					"alt",
 					"class"
-				])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.AvatarFallback), (0, vue.mergeProps)({ class: slotFns.value.fallback() }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$12, [..._cache[0] || (_cache[0] = [(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)])]))])]),
+				])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.AvatarFallback), (0, vue.mergeProps)({ class: (0, vue.unref)(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback) }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$11, [..._cache[0] || (_cache[0] = [(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)])]))])]),
 					_: 3
 				}, 16, ["class"])]),
 				_: 3
@@ -21920,7 +21995,8 @@ var AspectRatio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AspectRatio",
 	props: {
 		ratio: { default: 1 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21928,7 +22004,7 @@ var AspectRatio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AspectRatio), {
 				ratio: __props.ratio,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "aspect-ratio"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -21948,7 +22024,8 @@ var SplitterGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		id: { default: void 0 },
 		direction: { default: "horizontal" },
 		autoSaveId: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -21959,7 +22036,7 @@ var SplitterGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: __props.id,
 				direction: __props.direction ?? "horizontal",
 				"auto-save-id": __props.autoSaveId,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.class, props.classNames?.group)),
 				"data-slot": "splitter-group"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -21988,7 +22065,8 @@ var SplitterPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		collapsedSize: { default: void 0 },
 		order: { default: void 0 },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["collapse", "expand"],
 	setup(__props) {
@@ -22003,7 +22081,7 @@ var SplitterPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				collapsible: __props.collapsible,
 				"collapsed-size": __props.collapsedSize,
 				order: __props.order,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panel(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panel(), props.class, props.classNames?.panel)),
 				"data-slot": "splitter-panel",
 				onCollapse: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("collapse")),
 				onExpand: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("expand"))
@@ -22033,7 +22111,8 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["dragging"],
 	setup(__props) {
@@ -22044,11 +22123,11 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SplitterResizeHandle), {
 				id: __props.id,
 				disabled: __props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handle(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handle(), props.class, props.classNames?.handle)),
 				"data-slot": "splitter-handle",
 				onDragging: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("dragging", $event))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.handleBar()) }, null, 2)])]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handleBar(), props.classNames?.handleBar)) }, null, 2)])]),
 				_: 3
 			}, 8, [
 				"id",
@@ -22075,7 +22154,8 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		orientation: { default: "horizontal" },
 		size: { default: "md" },
 		color: { default: "accent" },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -22110,7 +22190,7 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-label": `Step ${currentStep.value} of ${__props.totalSteps}`,
 				"data-slot": "stepper"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$18);
@@ -22126,7 +22206,8 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperItem",
 	props: {
 		step: {},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -22139,7 +22220,7 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
 				"data-status": status.value,
 				"data-step": __props.step,
 				"data-slot": "stepper-item"
@@ -22157,7 +22238,10 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperIndicator.vue
 var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperIndicator",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
@@ -22167,7 +22251,7 @@ var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.class, props.classNames?.indicator)),
 				"aria-hidden": "true",
 				"data-slot": "stepper-indicator"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
@@ -22178,14 +22262,17 @@ var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperTitle.vue
 var StepperTitle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperTitle",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)({ size: ctx?.size.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.title(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.title(), props.class, props.classNames?.title)),
 				"data-slot": "stepper-title"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22195,13 +22282,16 @@ var StepperTitle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperDescription.vue
 var StepperDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperDescription",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)());
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.class, props.classNames?.description)),
 				"data-slot": "stepper-description"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22211,13 +22301,16 @@ var StepperDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperContent.vue
 var StepperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperContent",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)());
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class, props.classNames?.content)),
 				"data-slot": "stepper-content"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22227,14 +22320,17 @@ var StepperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperSeparator.vue
 var StepperSeparator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperSeparator",
-	props: { class: { default: void 0 } },
+	props: {
+		class: { default: void 0 },
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)({ orientation: ctx?.orientation.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.class, props.classNames?.separator)),
 				role: "none",
 				"data-slot": "stepper-separator"
 			}, null, 2);
@@ -22269,7 +22365,8 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		size: { default: "md" },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:expanded"],
 	setup(__props, { emit: __emit }) {
@@ -22292,7 +22389,7 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				multiple: __props.multiple,
 				"selection-behavior": __props.selectionBehavior,
 				"propagate-select": __props.propagateSelect,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.root(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.root(), props.class, props.classNames?.root)),
 				"data-slot": "tree",
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", v)),
 				"onUpdate:expanded": _cache[1] || (_cache[1] = (v) => emit("update:expanded", v))
@@ -22325,7 +22422,8 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		level: {},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["select", "toggle"],
 	setup(__props) {
@@ -22341,13 +22439,13 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TreeItem), {
 				value: __props.value,
 				level: __props.level,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
 				"data-slot": "tree-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("select")),
 				onToggle: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("toggle"))
 			}, {
 				default: (0, vue.withCtx)((s) => [(0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.itemContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.itemContent(), props.classNames?.itemContent)),
 					style: (0, vue.normalizeStyle)(indentStyle.value),
 					"data-selected": s.isSelected ? "" : void 0,
 					"data-expanded": s.isExpanded ? "" : void 0
@@ -22386,7 +22484,8 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22394,7 +22493,7 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 				type: "button",
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).itemToggle(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).itemToggle(), props.class, props.classNames?.itemToggle)),
 				"data-expanded": __props.isExpanded ? "" : void 0,
 				"data-no-children": !__props.hasChildren ? "" : void 0,
 				tabindex: "-1",
@@ -22415,7 +22514,7 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$14 = ["data-orientation", "data-disabled"];
-var _hoisted_2$11 = {
+var _hoisted_2$10 = {
 	key: 0,
 	"data-slot": "label"
 };
@@ -22458,7 +22557,8 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -22506,12 +22606,12 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const positionAxis = (0, vue.computed)(() => props.orientation === "vertical" ? "bottom" : "left");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-disabled": __props.disabled || 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$11, (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$10, (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)(slotFns.value.output())
+				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$8, [
 				(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRoot), {
@@ -22527,9 +22627,9 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "relative flex items-center select-none touch-none w-full",
 					"data-orientation": __props.orientation
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderTrack), { class: (0, vue.normalizeClass)(slotFns.value.track()) }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderTrack), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)) }, {
 						default: (0, vue.withCtx)(() => [
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRange), { class: (0, vue.normalizeClass)(slotFns.value.fill()) }, null, 8, ["class"]),
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRange), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.fill(), props.classNames?.fill)) }, null, 8, ["class"]),
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tickPositions.value, (pct, i) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 									key: `tick-${i}`,
@@ -22542,7 +22642,7 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.marks || [], (mark) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 									key: `mark-${mark.value}`,
-									class: (0, vue.normalizeClass)([slotFns.value.marks(), "absolute"]),
+									class: (0, vue.normalizeClass)([(0, vue.unref)(composeClassName)(slotFns.value.marks(), props.classNames?.marks), "absolute"]),
 									style: (0, vue.normalizeStyle)({ [positionAxis.value]: toPercent(mark.value) + "%" }),
 									"data-slider-mark": ""
 								}, (0, vue.toDisplayString)(mark.label), 7);
@@ -22552,7 +22652,7 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(internalValue.value, (_, idx) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SliderThumb), {
 							key: idx,
-							class: (0, vue.normalizeClass)(slotFns.value.thumb()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.thumb(), props.classNames?.thumb)),
 							"aria-label": __props.label || "Value"
 						}, null, 8, ["class", "aria-label"]);
 					}), 128))]),
@@ -22606,7 +22706,8 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22631,25 +22732,25 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, [__props.label || __props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.labelWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.labelWrapper(), props.classNames?.labelWrapper))
 			}, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 			}, (0, vue.toDisplayString)(__props.label), 3)) : (0, vue.createCommentVNode)("", true), __props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
-				class: (0, vue.normalizeClass)(slotFns.value.value())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.value(), props.classNames?.value))
 			}, (0, vue.toDisplayString)(formattedValue.value), 3)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressRoot), {
 				"model-value": isInd.value ? null : props.value,
 				max: __props.maxValue,
-				class: (0, vue.normalizeClass)(slotFns.value.track()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 				"aria-label": __props.label || "Progress"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressIndicator), {
-					class: (0, vue.normalizeClass)(slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					style: (0, vue.normalizeStyle)(isInd.value ? {} : { transform: `translateX(-${100 - percentage.value}%)` })
 				}, null, 8, ["class", "style"])]),
 				_: 1
@@ -22665,7 +22766,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$12 = ["r", "stroke-width"];
-var _hoisted_2$10 = [
+var _hoisted_2$9 = [
 	"r",
 	"stroke-width",
 	"stroke-dasharray",
@@ -22697,7 +22798,8 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22725,24 +22827,24 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ProgressRoot), {
 				"model-value": isInd.value ? null : __props.value,
 				max: __props.maxValue,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-label": __props.label || "Progress",
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-					class: (0, vue.normalizeClass)(slotFns.value.svg()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.svg(), props.classNames?.svg)),
 					viewBox: "0 0 32 32",
 					fill: "none",
 					"aria-hidden": "true"
 				}, [(0, vue.createElementVNode)("circle", {
-					class: (0, vue.normalizeClass)(slotFns.value.track()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
 					"stroke-width": __props.strokeWidth,
 					fill: "none"
 				}, null, 10, _hoisted_1$12), (0, vue.createElementVNode)("circle", {
-					class: (0, vue.normalizeClass)(slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
@@ -22753,9 +22855,9 @@ 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$10)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, null, 10, _hoisted_2$9)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.value())
+					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)]),
 				_: 3
 			}, 8, [
@@ -22770,11 +22872,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/meter/Meter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = {
-	key: 0,
-	"data-slot": "label"
-};
-var _hoisted_2$9 = [
+var _hoisted_1$11 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -22798,7 +22896,8 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		formatOptions: {},
 		size: {},
 		color: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22816,11 +22915,15 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			color: props.color
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [
-				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$11, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true),
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [
+				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					"data-slot": "label",
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+				}, (0, vue.toDisplayString)(__props.label), 3)) : (0, vue.createCommentVNode)("", true),
 				__props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.output())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.output(), props.classNames?.output))
 				}, (0, vue.toDisplayString)(formattedValue.value), 3)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", {
 					role: "meter",
@@ -22829,11 +22932,11 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-valuemax": __props.maxValue,
 					"aria-valuetext": formattedValue.value,
 					"aria-label": __props.label || "Meter",
-					class: (0, vue.normalizeClass)(slotFns.value.track())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track))
 				}, [(0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.fill()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.fill(), props.classNames?.fill)),
 					style: (0, vue.normalizeStyle)({ width: percentage.value + "%" })
-				}, null, 6)], 10, _hoisted_2$9)
+				}, null, 6)], 10, _hoisted_1$11)
 			], 2);
 		};
 	}
@@ -22860,7 +22963,8 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: { default: 40 },
 		offset: { default: 0 },
 		visibility: { default: "auto" },
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22878,7 +22982,7 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				ref_key: "container",
 				ref: container,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-top-scroll": topScroll.value ? "true" : void 0,
 				"data-bottom-scroll": bottomScroll.value ? "true" : void 0,
@@ -23644,7 +23748,8 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -23675,16 +23780,16 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.readonly,
 				disabled: __props.disabled,
 				"calendar-label": __props.calendarLabel,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 			}, {
-				default: (0, vue.withCtx)(({ grid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+				default: (0, vue.withCtx)(({ grid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 					default: (0, vue.withCtx)(() => [
 						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerPrev), {
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": "Previous years"
 						}, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-								class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 								xmlns: "http://www.w3.org/2000/svg",
 								width: "16",
 								height: "16",
@@ -23698,16 +23803,16 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 							_: 1
 						}, 8, ["class"]),
-						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 							default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.renderSlot)(_ctx.$slots, "heading", { headingValue }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(headingValue), 1)])]),
 							_: 3
 						}, 8, ["class"]),
 						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": "Next years"
 						}, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-								class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 								xmlns: "http://www.w3.org/2000/svg",
 								width: "16",
 								height: "16",
@@ -23723,12 +23828,12 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						}, 8, ["class"])
 					]),
 					_: 3
-				}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.yearGrid()) }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.yearGridBody()) }, {
+				}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGrid(), props.classNames?.yearGrid)) }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridBody(), props.classNames?.yearGridBody)) }, {
 						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid.rows, (row, rowIndex) => {
 							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerGridRow), {
 								key: rowIndex,
-								class: (0, vue.normalizeClass)(slotFns.value.yearGridRow())
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridRow(), props.classNames?.yearGridRow))
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (yearValue) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerCell), {
@@ -23738,7 +23843,7 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 										default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerCellTrigger), {
 											year: yearValue,
 											as: "button",
-											class: (0, vue.normalizeClass)(slotFns.value.yearCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearCell(), props.classNames?.yearCell))
 										}, null, 8, ["year", "class"])]),
 										_: 2
 									}, 1032, ["date"]);
@@ -23812,7 +23917,8 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -23865,16 +23971,16 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
-					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -23888,21 +23994,21 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									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_1$9)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -23921,14 +24027,14 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid, (month) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarGrid), {
 							key: month.value.toString(),
-							class: (0, vue.normalizeClass)(slotFns.value.grid())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.grid(), props.classNames?.grid))
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridHead), { class: (0, vue.normalizeClass)(slotFns.value.gridHeader()) }, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridRow), { class: (0, vue.normalizeClass)(slotFns.value.gridRow()) }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridHead), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridHeader(), props.classNames?.gridHeader)) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridRow), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow)) }, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekDays, (day) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarHeadCell), {
 											key: day,
-											class: (0, vue.normalizeClass)(slotFns.value.headerCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headerCell(), props.classNames?.headerCell))
 										}, {
 											default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(day), 1)]),
 											_: 2
@@ -23937,22 +24043,22 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 2
 								}, 1032, ["class"])]),
 								_: 2
-							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridBody), { class: (0, vue.normalizeClass)(slotFns.value.gridBody()) }, {
+							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(month.rows, (week, weekIndex) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarGridRow), {
 										key: weekIndex,
-										class: (0, vue.normalizeClass)(slotFns.value.gridRow())
+										class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
 									}, {
 										default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(week, (day) => {
 											return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarCell), {
 												key: day.toString(),
 												date: day,
-												class: (0, vue.normalizeClass)(slotFns.value.cell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
 											}, {
 												default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarCellTrigger), {
 													day,
 													month: month.value,
-													class: (0, vue.normalizeClass)(slotFns.value.cellButton())
+													class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cellButton(), props.classNames?.cellButton))
 												}, null, 8, [
 													"day",
 													"month",
@@ -23999,20 +24105,20 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24026,21 +24132,21 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									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$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24056,12 +24162,12 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.monthGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.monthGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGrid(), props.classNames?.monthGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridBody(), props.classNames?.monthGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(monthGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.monthGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridRow(), props.classNames?.monthGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (monthValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerCell), {
@@ -24071,7 +24177,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerCellTrigger), {
 												month: monthValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.monthCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthCell(), props.classNames?.monthCell))
 											}, null, 8, ["month", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24102,12 +24208,12 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)(props.class),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onYearSelect
 				}, {
 					heading: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 						type: "button",
-						class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+						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$7)]),
@@ -24170,7 +24276,8 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -24224,16 +24331,16 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
-					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24247,21 +24354,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									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_1$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24280,14 +24387,14 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid, (month) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarGrid), {
 							key: month.value.toString(),
-							class: (0, vue.normalizeClass)(slotFns.value.grid())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.grid(), props.classNames?.grid))
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridHead), { class: (0, vue.normalizeClass)(slotFns.value.gridHeader()) }, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridRow), { class: (0, vue.normalizeClass)(slotFns.value.gridRow()) }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridHead), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridHeader(), props.classNames?.gridHeader)) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridRow), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow)) }, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekDays, (day) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarHeadCell), {
 											key: day,
-											class: (0, vue.normalizeClass)(slotFns.value.headerCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headerCell(), props.classNames?.headerCell))
 										}, {
 											default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(day), 1)]),
 											_: 2
@@ -24296,22 +24403,22 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 2
 								}, 1032, ["class"])]),
 								_: 2
-							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridBody), { class: (0, vue.normalizeClass)(slotFns.value.gridBody()) }, {
+							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(month.rows, (week, weekIndex) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarGridRow), {
 										key: weekIndex,
-										class: (0, vue.normalizeClass)(slotFns.value.gridRow())
+										class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
 									}, {
 										default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(week, (day) => {
 											return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarCell), {
 												key: day.toString(),
 												date: day,
-												class: (0, vue.normalizeClass)(slotFns.value.cell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
 											}, {
 												default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarCellTrigger), {
 													day,
 													month: month.value,
-													class: (0, vue.normalizeClass)(slotFns.value.cellButton())
+													class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cellButton(), props.classNames?.cellButton))
 												}, null, 8, [
 													"day",
 													"month",
@@ -24359,20 +24466,20 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24386,21 +24493,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									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$7)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24416,12 +24523,12 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.monthGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.monthGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGrid(), props.classNames?.monthGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridBody(), props.classNames?.monthGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(monthGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.monthGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridRow(), props.classNames?.monthGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (monthValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerCell), {
@@ -24431,7 +24538,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerCellTrigger), {
 												month: monthValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.monthCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthCell(), props.classNames?.monthCell))
 											}, null, 8, ["month", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24461,20 +24568,20 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onYearSelect,
 					"onUpdate:placeholder": _cache[3] || (_cache[3] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: yearGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: yearGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous decade"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24488,21 +24595,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									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$6)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next decade"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24518,12 +24625,12 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.yearGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.yearGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGrid(), props.classNames?.yearGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridBody(), props.classNames?.yearGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(yearGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.yearGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridRow(), props.classNames?.yearGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (yearValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerCell), {
@@ -24533,7 +24640,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerCellTrigger), {
 												year: yearValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.yearCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearCell(), props.classNames?.yearCell))
 											}, null, 8, ["year", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24615,6 +24722,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -24756,7 +24864,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -24767,8 +24875,8 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -24789,7 +24897,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -24802,21 +24910,21 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$2, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$3)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments, (segment, _i) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DateFieldInput), {
 							key: _i,
 							part: segment.part,
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -24824,7 +24932,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -24855,16 +24963,16 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6$2)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$7);
 		};
 	}
@@ -24925,6 +25033,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -25066,7 +25175,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -25078,8 +25187,8 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(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)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(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)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -25100,7 +25209,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -25113,15 +25222,15 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$1, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$2)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list",
 						"data-type": "start"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments.start, (segment, _i) => {
@@ -25129,19 +25238,19 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							key: `start-${_i}`,
 							part: segment.part,
 							type: "start",
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
 						}, 1032, ["part", "class"]);
 					}), 128))], 2),
 					(0, vue.createElementVNode)("span", {
-						class: (0, vue.normalizeClass)(slotFns.value.separator()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.classNames?.separator)),
 						"aria-hidden": "true",
 						"data-slot": "separator"
 					}, "–", 2),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list",
 						"data-type": "end"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments.end, (segment, _i) => {
@@ -25149,7 +25258,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							key: `end-${_i}`,
 							part: segment.part,
 							type: "end",
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -25157,7 +25266,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -25188,16 +25297,16 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6$1)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$6);
 		};
 	}
@@ -25258,6 +25367,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -25400,7 +25510,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -25411,8 +25521,8 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -25433,7 +25543,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -25446,21 +25556,21 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$1)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments, (segment, _i) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TimeFieldInput), {
 							key: _i,
 							part: segment.part,
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -25468,7 +25578,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -25499,16 +25609,16 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
 		};
 	}
@@ -25573,7 +25683,8 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -25618,7 +25729,7 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"number-of-months": __props.visibleMonths,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
@@ -25647,12 +25758,12 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"hide-time-zone": __props.hideTimeZone
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -25719,7 +25830,7 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
@@ -25838,7 +25949,8 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -25878,7 +25990,7 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"number-of-months": __props.visibleMonths,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-range-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateRangeField_default, {
@@ -25907,12 +26019,12 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"hide-time-zone": __props.hideTimeZone
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date range picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -25979,7 +26091,7 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
@@ -26242,6 +26354,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		name: {},
 		class: {},
+		classNames: {},
 		granularity: { default: "minute" },
 		hourCycle: {},
 		hideTimeZone: {
@@ -26364,7 +26477,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				name: __props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-time-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
@@ -26390,12 +26503,12 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date time picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -26459,17 +26572,17 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.stepHeader()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
 						"data-slot": "step-header"
 					}, [
 						(0, vue.createElementVNode)("button", {
 							type: "button",
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"data-hidden": activeStep.value === "date" ? "true" : void 0,
 							"aria-label": "Previous step",
 							"data-slot": "back-button",
@@ -26485,19 +26598,19 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"stroke-linejoin": "round",
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1$3),
-						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.stepTitle()) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepTitle(), props.classNames?.stepTitle)) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
 						(0, vue.createElementVNode)("button", {
 							type: "button",
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
 							"data-slot": "forward-button",
 							onClick: goForward
 						}, [activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
-							class: (0, vue.normalizeClass)(slotFns.value.doneLabel())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.doneLabel(), props.classNames?.doneLabel))
 						}, "Done", 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$2, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2$2)
 					], 2), (0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.panelWrap()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panelWrap(), props.classNames?.panelWrap)),
 						style: { "overflow": "hidden" }
 					}, [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), { mode: "popLayout" }, {
 						default: (0, vue.withCtx)(() => [activeStep.value === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {