ropav 0.8.1 → 0.10.0

package/README.md

@@ -1,8 +1,8 @@
 # Ropav
 
 A Vue 3 component library built on [Vue Vapor](https://github.com/vuejs/core-vapor), styled by
-[`@ropav/styles`](https://www.npmjs.com/package/@ropav/styles) and Tailwind CSS v4. Published on
-npm as [`ropav`](https://www.npmjs.com/package/ropav).
+[`@ropav/styles`](https://www.npmjs.com/package/@ropav/styles). Published on npm as
+[`ropav`](https://www.npmjs.com/package/ropav).
 
 **[Documentation](https://ropav.netlify.app)** · [Components](https://ropav.netlify.app/components/)
 · [Theming](https://ropav.netlify.app/theming/) · [Storybook](https://ropav-storybook.netlify.app)

package/dist/components/accordion/accordion-body.js

@@ -1,21 +1,14 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAccordionContext } from "./accordion.context.js";
-import { child, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { child, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/accordion/accordion-body.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-slot=accordion-body><div>", 1);
+var t0 = template("<div class=rp-accordion__body data-slot=accordion-body><div>", 1);
 var accordion_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "accordion-body",
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAccordionContext();
 		const n2 = t0();
 		const n1 = child(n2);
-		renderEffect(() => {
-			const _slots = unref(slots);
-			setClass(n2, _slots.body());
-			setClass(n1, unref(composeSlotClassName)(_slots.bodyInner, props.class));
-		});
+		renderEffect(() => setClass(n1, ["rp-accordion__body-inner", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n2;

package/dist/components/accordion/accordion-heading.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAccordionContext } from "./accordion.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/accordion/accordion-heading.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<h3 data-slot=accordion-heading>", 1);
 var accordion_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var accordion_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAccordionContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).heading, props.class)));
+		renderEffect(() => setClass(n1, ["rp-accordion__heading", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/accordion/accordion-indicator.js

@@ -1,7 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAccordionContext, useAccordionItemContext } from "./accordion.context.js";
 import { dataAttr } from "../../utils/assertion.js";
 import icon_chevron_down_default from "../icons/icon-chevron-down.js";
+import { useAccordionItemContext } from "./accordion.context.js";
 import { createComponent, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/accordion/accordion-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-slot=accordion-indicator>", 1);
@@ -10,11 +9,10 @@ var accordion_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAccordionContext();
 		const { isExpanded } = useAccordionItemContext();
 		const n3 = t0();
 		renderEffect(() => {
-			setClass(n3, unref(composeSlotClassName)(unref(slots).indicator, props.class));
+			setClass(n3, ["rp-accordion__indicator", props.class]);
 			setAttr(n3, "data-expanded", unref(dataAttr)(unref(isExpanded)));
 		});
 		setInsertionState(n3);

package/dist/components/accordion/accordion-item.js

@@ -1,7 +1,7 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { provideAccordionItemContext, useAccordionContext } from "./accordion.context.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { provideAccordionItemContext, useAccordionContext } from "./accordion.context.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region src/components/accordion/accordion-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=accordion-item>", 1);

package/dist/components/accordion/accordion-panel.js

@@ -1,6 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAccordionContext, useAccordionItemContext } from "./accordion.context.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { useAccordionItemContext } from "./accordion.context.js";
 import { useDisclosurePanel } from "../../composables/use-disclosure-panel.js";
 import { createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, template, unref } from "vue";
 //#region src/components/accordion/accordion-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -13,7 +12,6 @@ var accordion_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAccordionContext();
 		const { isExpanded, panelId, toggle, triggerId } = useAccordionItemContext();
 		const { setPanelElement } = useDisclosurePanel({ isExpanded });
 		/** Fired when find-in-page reveals the panel; the browser has already dropped `hidden`. */
@@ -27,7 +25,7 @@ var accordion_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			setProp(n1, "id", unref(panelId));
 			setAttr(n1, "aria-hidden", !_isExpanded);
 			setAttr(n1, "aria-labelledby", unref(triggerId));
-			setClass(n1, unref(composeSlotClassName)(unref(slots).panel, _props.class));
+			setClass(n1, ["rp-accordion__panel", _props.class]);
 			setAttr(n1, "data-expanded", unref(dataAttr)(_isExpanded));
 			setProp(n1, "role", _props.role);
 		});

package/dist/components/accordion/accordion-trigger.js

@@ -1,6 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAccordionContext, useAccordionItemContext } from "./accordion.context.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { useAccordionItemContext } from "./accordion.context.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/accordion/accordion-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -10,7 +9,6 @@ var accordion_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAccordionContext();
 		const { isDisabled, isExpanded, onTriggerKeydown, panelId, registerTrigger, toggle, triggerId } = useAccordionItemContext();
 		const triggerEl = shallowRef(null);
 		const setTriggerEl = (element) => {
@@ -31,7 +29,7 @@ var accordion_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 			setProp(n1, "id", unref(triggerId));
 			setAttr(n1, "aria-controls", unref(panelId));
 			setAttr(n1, "aria-expanded", unref(isExpanded));
-			setClass(n1, unref(composeSlotClassName)(unref(slots).trigger, props.class));
+			setClass(n1, ["rp-accordion__trigger", props.class]);
 			setAttr(n1, "data-disabled", _dataAttr(_isDisabled));
 			setAttr(n1, "data-focus-visible", _dataAttr(unref(isFocusVisible)));
 			setAttr(n1, "data-focused", _dataAttr(unref(isFocused)));

package/dist/components/alert/alert-content.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAlertContext } from "./alert.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert/alert-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=alert-content>", 1);
 var alert_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var alert_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).content, props.class)));
+		renderEffect(() => setClass(n1, ["rp-alert__content", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert/alert-description.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAlertContext } from "./alert.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert/alert-description.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-slot=alert-description>", 1);
 var alert_description_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var alert_description_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).description, props.class)));
+		renderEffect(() => setClass(n1, ["rp-alert__description", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert/alert-indicator.js

@@ -1,8 +1,8 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import danger_icon_default from "../icons/danger-icon.js";
 import info_icon_default from "../icons/info-icon.js";
 import success_icon_default from "../icons/success-icon.js";
 import warning_icon_default from "../icons/warning-icon.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useAlertContext } from "./alert.context.js";
 import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref, useSlots } from "vue";
 //#region src/components/alert/alert-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/alert/alert-title.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useAlertContext } from "./alert.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert/alert-title.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<p data-slot=alert-title>", 1);
 var alert_title_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var alert_title_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).title, props.class)));
+		renderEffect(() => setClass(n1, ["rp-alert__title", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert-dialog/alert-dialog-body.js

@@ -1,5 +1,4 @@
-import { useAlertDialogContext } from "./alert-dialog.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert-dialog/alert-dialog-body.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=alert-dialog-body>", 1);
 var alert_dialog_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var alert_dialog_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertDialogContext();
-		const styles = computed(() => slots.value.body({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-alert-dialog__body", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert-dialog/alert-dialog-footer.js

@@ -1,5 +1,4 @@
-import { useAlertDialogContext } from "./alert-dialog.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert-dialog/alert-dialog-footer.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=alert-dialog-footer>", 1);
 var alert_dialog_footer_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var alert_dialog_footer_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertDialogContext();
-		const styles = computed(() => slots.value.footer({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-alert-dialog__footer", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert-dialog/alert-dialog-header.js

@@ -1,5 +1,4 @@
-import { useAlertDialogContext } from "./alert-dialog.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/alert-dialog/alert-dialog-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=alert-dialog-header>", 1);
 var alert_dialog_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var alert_dialog_header_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertDialogContext();
-		const styles = computed(() => slots.value.header({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-alert-dialog__header", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/alert-dialog/alert-dialog-heading.js

@@ -1,4 +1,3 @@
-import { useAlertDialogContext } from "./alert-dialog.context.js";
 import { useFieldIdsContext } from "../../composables/use-field-ids.js";
 import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, unref } from "vue";
 //#region src/components/alert-dialog/alert-dialog-heading.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -10,7 +9,6 @@ var alert_dialog_heading_vue_vue_type_script_setup_true_vapor_true_lang_default
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertDialogContext();
 		const id = useFieldIdsContext()?.claimHeadingId();
 		/**
 		* Two by default.
@@ -19,10 +17,9 @@ var alert_dialog_heading_vue_vue_type_script_setup_true_vapor_true_lang_default
 		* starts one level below the page title rather than continuing the page's outline.
 		*/
 		const tag = computed(() => `h${props.level ?? 2}`);
-		const styles = computed(() => slots.value.heading({ class: props.class }));
 		return createDynamicComponent(() => tag.value, {
 			id: () => unref(id),
-			class: () => styles.value,
+			class: () => ["rp-alert-dialog__heading", props.class],
 			"data-slot": "alert-dialog-heading"
 		}, extend(() => {
 			return createSlot("default", null, null, 4);

package/dist/components/alert-dialog/alert-dialog-trigger.js

@@ -1,8 +1,7 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
-import { useAlertDialogContext } from "./alert-dialog.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 //#region src/components/alert-dialog/alert-dialog-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
 var alert_dialog_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -10,9 +9,7 @@ var alert_dialog_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useAlertDialogContext();
 		const responder = usePressResponder();
-		const styles = computed(() => slots.value.trigger({ class: props.class }));
 		const setElement = (element) => {
 			responder?.registerElement(element ?? null);
 		};
@@ -23,7 +20,7 @@ var alert_dialog_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default
 			const _dataAttr = unref(dataAttr);
 			const _responder = unref(responder);
 			setDynamicProps(n1, [{
-				class: styles.value,
+				class: ["rp-alert-dialog__trigger", props.class],
 				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
 				"data-pressed": _dataAttr(_responder?.isPressed.value),
 				"data-slot": "alert-dialog-trigger",

package/dist/components/autocomplete/autocomplete-indicator.js

@@ -1,6 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import icon_chevron_down_default from "../icons/icon-chevron-down.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
 import { useAutocompleteContext } from "./autocomplete.context.js";

package/dist/components/badge/badge-label.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useBadgeContext } from "./badge.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/badge/badge-label.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-slot=badge-label>", 1);
 var badge_label_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var badge_label_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useBadgeContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).label, props.class)));
+		renderEffect(() => setClass(n1, ["rp-badge__label", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/badge/badge-root.js

@@ -1,5 +1,4 @@
 import { composeSlotClassName } from "../../utils/compose.js";
-import { provideBadgeContext } from "./badge.context.js";
 import BadgeAutoLabel from "./badge-auto-label.js";
 import { computed, createComponent, createSlot, defineVaporComponent, extend, renderEffect, setClass, setInsertionState, template, unref } from "vue";
 import { badgeVariants } from "@ropav/styles";
@@ -22,7 +21,6 @@ var badge_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 			size: props.size,
 			variant: props.variant
 		}));
-		provideBadgeContext({ slots });
 		const n2 = t0();
 		renderEffect(() => setClass(n2, unref(composeSlotClassName)(slots.value.base, props.class)));
 		setInsertionState(n2);

package/dist/components/breadcrumbs/breadcrumbs-item.js

@@ -1,7 +1,7 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import icon_chevron_right_default from "../icons/icon-chevron-right.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import link_root_default from "../link/link-root.js";
 import { useBreadcrumbsContext } from "./breadcrumbs.context.js";
 import { computed, createComponent, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, unref, watch } from "vue";

package/dist/components/calendar/calendar-cell-indicator.js

@@ -1,5 +1,4 @@
-import { useCalendarContext } from "./calendar.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/calendar/calendar-cell-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span aria-hidden=true data-slot=calendar-cell-indicator>", 1);
 var calendar_cell_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var calendar_cell_indicator_vue_vue_type_script_setup_true_vapor_true_lang_defau
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
-		const styles = computed(() => slots.value.cellIndicator({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-calendar__cell-indicator", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/calendar/calendar-cell.js

@@ -1,7 +1,7 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
-import { useCalendarContext, useCalendarGridContext, useCalendarStateContext } from "./calendar.context.js";
 import { useCalendarCell } from "../../composables/use-calendar-cell.js";
+import { useCalendarGridContext, useCalendarStateContext } from "./calendar.context.js";
 import { child, computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, unref } from "vue";
 import { isSameMonth } from "@internationalized/date";
 //#region src/components/calendar/calendar-cell.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -15,7 +15,6 @@ var calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
 		const { calendar, state } = useCalendarStateContext();
 		const { startDate } = useCalendarGridContext();
 		const element = shallowRef(null);
@@ -37,7 +36,6 @@ var calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		}, state, calendar.shared);
 		const interaction = useInteractionStates({ isDisabled: () => cell.isDisabled.value || cell.isUnavailable.value });
 		const isFocusVisible = computed(() => interaction.isFocusVisible.value && cell.isFocused.value);
-		const styles = computed(() => slots.value.cell({ class: props.class }));
 		const slotProps = computed(() => ({
 			date: props.date,
 			formattedDate: cell.formattedDate.value,
@@ -60,7 +58,7 @@ var calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			const _dataAttr = unref(dataAttr);
 			setDynamicProps(n4, [_cell.cellAttrs.value]);
 			setDynamicProps(n3, [{
-				class: styles.value,
+				class: ["rp-calendar__cell", props.class],
 				"data-disabled": _dataAttr(_cell.isDisabled.value),
 				"data-focus-visible": _dataAttr(isFocusVisible.value),
 				"data-focused": _dataAttr(_cell.isFocused.value),

package/dist/components/calendar/calendar-header-cell.js

@@ -1,5 +1,4 @@
-import { useCalendarContext } from "./calendar.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/calendar/calendar-header-cell.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<th data-slot=calendar-header-cell>", 1);
 var calendar_header_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var calendar_header_cell_vue_vue_type_script_setup_true_vapor_true_lang_default
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
-		const styles = computed(() => slots.value.headerCell({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-calendar__header-cell", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/calendar/calendar-header.js

@@ -1,5 +1,4 @@
-import { useCalendarContext } from "./calendar.context.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/calendar/calendar-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=calendar-header>", 1);
 var calendar_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -7,10 +6,8 @@ var calendar_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
-		const styles = computed(() => slots.value.header({ class: props.class }));
 		const n1 = t0();
-		renderEffect(() => setClass(n1, styles.value));
+		renderEffect(() => setClass(n1, ["rp-calendar__header", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/calendar/calendar-heading.js

@@ -1,6 +1,6 @@
-import { useCalendarContext, useCalendarStateContext } from "./calendar.context.js";
+import { useCalendarStateContext } from "./calendar.context.js";
 import { useCalendarHeading } from "../../composables/use-calendar-heading.js";
-import { computed, defineVaporComponent, renderEffect, setClass, setText, template, toDisplayString, txt, unref } from "vue";
+import { defineVaporComponent, renderEffect, setClass, setText, template, toDisplayString, txt, unref } from "vue";
 //#region src/components/calendar/calendar-heading.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<h2 aria-hidden=true data-slot=calendar-heading> ", 1);
 var calendar_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -12,17 +12,15 @@ var calendar_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
 		const { state } = useCalendarStateContext();
 		const heading = useCalendarHeading({
 			format: () => props.format,
 			offset: () => props.offset
 		}, state);
-		const styles = computed(() => slots.value.heading({ class: props.class }));
 		const n0 = t0();
 		const x0 = txt(n0);
 		renderEffect(() => {
-			setClass(n0, styles.value);
+			setClass(n0, ["rp-calendar__heading", props.class]);
 			setText(x0, toDisplayString(unref(heading)));
 		});
 		return n0;

package/dist/components/calendar/calendar-nav-button.js

@@ -2,7 +2,7 @@ import { dataAttr } from "../../utils/assertion.js";
 import icon_chevron_left_default from "../icons/icon-chevron-left.js";
 import icon_chevron_right_default from "../icons/icon-chevron-right.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
-import { useCalendarContext, useCalendarStateContext } from "./calendar.context.js";
+import { useCalendarStateContext } from "./calendar.context.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/calendar/calendar-nav-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
@@ -14,11 +14,8 @@ var calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCalendarContext();
 		const { calendar } = useCalendarStateContext();
 		const button = computed(() => props.slot === "previous" ? calendar.prevButton : calendar.nextButton);
-		const styles = computed(() => slots.value.navButton({ class: props.class }));
-		const iconStyles = computed(() => slots.value.navButtonIcon());
 		const interaction = useInteractionStates({ isDisabled: () => button.value.isDisabled.value });
 		const onFocus = () => {
 			interaction.onFocus();
@@ -40,7 +37,7 @@ var calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			const _interaction = unref(interaction);
 			const _button_isDisabled = _button.isDisabled;
 			setDynamicProps(n8, [{
-				class: styles.value,
+				class: ["rp-calendar__nav-button", props.class],
 				"data-disabled": _dataAttr(_button_isDisabled.value),
 				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
 				"data-hovered": _dataAttr(_interaction.isHovered.value),
@@ -54,12 +51,12 @@ var calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_default =
 		createSlot("default", null, () => {
 			return createIf(() => props.slot === "previous", () => {
 				return createComponent(unref(icon_chevron_left_default), {
-					class: () => iconStyles.value,
+					class: "rp-calendar__nav-button-icon",
 					"data-slot": "calendar-nav-button-icon"
 				});
 			}, () => {
 				return createComponent(unref(icon_chevron_right_default), {
-					class: () => iconStyles.value,
+					class: "rp-calendar__nav-button-icon",
 					"data-slot": "calendar-nav-button-icon"
 				});
 			}, 261);

package/dist/components/calendar/calendar-root.js

@@ -2,8 +2,8 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useControllableState } from "../../composables/use-controllable-state.js";
 import { useLocale } from "../../composables/use-locale.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
-import { provideCalendarContext, provideCalendarStateContext, useCalendarOwnerContext } from "./calendar.context.js";
 import { useCalendar } from "../../composables/use-calendar.js";
+import { provideCalendarContext, provideCalendarStateContext, useCalendarOwnerContext } from "./calendar.context.js";
 import { getDefaultYearBounds } from "../../utils/calendar.js";
 import { useCalendarState } from "../../composables/use-calendar-state.js";
 import { provideYearPickerContext } from "../calendar-year-picker/calendar-year-picker.context.js";

package/dist/components/calendar/index.js

@@ -1,5 +1,5 @@
-import { provideCalendarOwnerContext, provideCalendarStateContext, useCalendarOwnerContext, useCalendarStateContext } from "./calendar.context.js";
 import calendar_cell_indicator_default from "./calendar-cell-indicator.js";
+import { provideCalendarOwnerContext, provideCalendarStateContext, useCalendarOwnerContext, useCalendarStateContext } from "./calendar.context.js";
 import calendar_cell_default from "./calendar-cell.js";
 import calendar_grid_body_default from "./calendar-grid-body.js";
 import calendar_grid_header_default from "./calendar-grid-header.js";

package/dist/components/card/card-content.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useCardContext } from "./card.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/card/card-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=card-content>", 1);
 var card_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var card_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCardContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).content, props.class)));
+		renderEffect(() => setClass(n1, ["rp-card__content", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/card/card-description.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useCardContext } from "./card.context.js";
-import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/card/card-description.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<p data-slot=card-description>", 1);
 var card_description_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var card_description_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCardContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).description, props.class)));
+		renderEffect(() => setClass(n1, ["rp-card__description", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;