ropav 0.8.1 → 0.10.0

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

@@ -3,7 +3,6 @@ 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 { useCalendarStateContext } from "../calendar/calendar.context.js";
-import { useRangeCalendarContext } from "./range-calendar.context.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/range-calendar/range-calendar-nav-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
@@ -15,11 +14,8 @@ var range_calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useRangeCalendarContext();
 		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();
@@ -41,7 +37,7 @@ var range_calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 			const _interaction = unref(interaction);
 			const _button_isDisabled = _button.isDisabled;
 			setDynamicProps(n8, [{
-				class: styles.value,
+				class: ["rp-range-calendar__nav-button", props.class],
 				"data-disabled": _dataAttr(_button_isDisabled.value),
 				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
 				"data-hovered": _dataAttr(_interaction.isHovered.value),
@@ -55,12 +51,12 @@ var range_calendar_nav_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 		createSlot("default", null, () => {
 			return createIf(() => props.slot === "previous", () => {
 				return createComponent(unref(icon_chevron_left_default), {
-					class: () => iconStyles.value,
+					class: "rp-range-calendar__nav-button-icon",
 					"data-slot": "range-calendar-nav-button-icon"
 				});
 			}, () => {
 				return createComponent(unref(icon_chevron_right_default), {
-					class: () => iconStyles.value,
+					class: "rp-range-calendar__nav-button-icon",
 					"data-slot": "range-calendar-nav-button-icon"
 				});
 			}, 261);

package/dist/components/search-field/index.js

@@ -1,5 +1,5 @@
-import { provideSearchFieldContext, useSearchFieldContext } from "./search-field.context.js";
 import search_field_clear_button_default from "./search-field-clear-button.js";
+import { provideSearchFieldContext, useSearchFieldContext } from "./search-field.context.js";
 import search_field_group_default from "./search-field-group.js";
 import search_field_input_default from "./search-field-input.js";
 import search_field_root_default from "./search-field-root.js";

package/dist/components/search-field/search-field-clear-button.js

@@ -1,14 +1,11 @@
 import close_button_root_default from "../close-button/close-button-root.js";
-import { useSearchFieldContext } from "./search-field.context.js";
-import { computed, createComponent, createSlot, defineVaporComponent, extend, unref } from "vue";
+import { createComponent, createSlot, defineVaporComponent, extend, normalizeClass, unref } from "vue";
 //#region src/components/search-field/search-field-clear-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var search_field_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "search-field-clear-button",
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useSearchFieldContext();
-		const styles = computed(() => slots.value.clearButton({ class: props.class }));
 		/**
 		* `slot="clear"` is a live CSS contract, not a leftover of React Aria's slot system: the
 		* stylesheet strips the trailing radius and padding off the control through
@@ -21,7 +18,7 @@ var search_field_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 		*/
 		const clearSlot = { slot: "clear" };
 		return createComponent(unref(close_button_root_default), {
-			class: () => styles.value,
+			class: () => normalizeClass(["rp-search-field__clear-button", props.class]),
 			"data-slot": "search-field-clear-button",
 			$: [() => clearSlot]
 		}, extend(() => {

package/dist/components/search-field/search-field-input.js

@@ -2,7 +2,6 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
-import { useSearchFieldContext } from "./search-field.context.js";
 import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 //#region src/components/search-field/search-field-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<input>", 1);
@@ -17,14 +16,12 @@ var search_field_input_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { slots } = useSearchFieldContext();
 		const control = useTextFieldControlContext();
 		const element = shallowRef(null);
 		const setElement = (next) => {
 			element.value = next instanceof HTMLInputElement ? next : null;
 			control?.registerElement(element.value);
 		};
-		const styles = computed(() => slots.value.input({ class: props.class }));
 		const attrs = computed(() => {
 			const merged = { ...control?.attrs.value };
 			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
@@ -86,7 +83,7 @@ var search_field_input_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			const _control = unref(control);
 			const _interaction = unref(interaction);
 			setDynamicProps(n0, [{
-				class: styles.value,
+				class: ["rp-search-field__input", props.class],
 				"data-disabled": _dataAttr(_control?.isDisabled.value),
 				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
 				"data-focused": _dataAttr(_interaction.isFocused.value),

package/dist/components/search-field/search-field-search-icon.js

@@ -1,17 +1,14 @@
 import icon_search_default from "../icons/icon-search.js";
-import { useSearchFieldContext } from "./search-field.context.js";
-import { computed, createComponent, createSlot, defineVaporComponent, unref } from "vue";
+import { createComponent, createSlot, defineVaporComponent, normalizeClass, unref } from "vue";
 //#region src/components/search-field/search-field-search-icon.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var search_field_search_icon_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "search-field-search-icon",
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useSearchFieldContext();
-		const styles = computed(() => slots.value.searchIcon({ class: props.class }));
 		return createSlot("default", null, () => {
 			return createComponent(unref(icon_search_default), {
-				class: () => styles.value,
+				class: () => normalizeClass(["rp-search-field__search-icon", props.class]),
 				"data-slot": "search-field-search-icon"
 			}, null, true);
 		});

package/dist/components/segmented-control/segmented-control-indicator.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSharedElement, useSharedElementScope } from "../../composables/use-shared-element.js";
 import { useSegmentedControlContext, useSegmentedControlItemContext } from "./segmented-control.context.js";
 import { createIf, defineVaporComponent, renderEffect, setAttr, setClass, setStaticTemplateRef, shallowRef, template, unref } from "vue";

package/dist/components/select/select-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 { useSelectContext } from "./select.context.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref, useSlots } from "vue";
 //#region src/components/select/select-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/sidebar/sidebar-collapsible-trigger.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useSidebarCollapsibleContext, useSidebarContext } from "./sidebar.context.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";

package/dist/components/sidebar/sidebar-collapsible.js

@@ -1,6 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useControllableState } from "../../composables/use-controllable-state.js";
 import { provideSidebarCollapsibleContext, useSidebarContext } from "./sidebar.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";

package/dist/components/sidebar/sidebar-group-label.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSidebarContext, useSidebarGroupContext } from "./sidebar.context.js";
 import { createSlot, defineVaporComponent, onScopeDispose, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region src/components/sidebar/sidebar-group-label.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/sidebar/sidebar-group.js

@@ -1,6 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { provideSidebarGroupContext, useSidebarContext } from "./sidebar.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, shallowRef, template, unref } from "vue";
 //#region src/components/sidebar/sidebar-group.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/sidebar/sidebar-item-icon.js

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

package/dist/components/sidebar/sidebar-item-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 { useSidebarCollapsibleContext, useSidebarContext } from "./sidebar.context.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref, useSlots } from "vue";
 //#region src/components/sidebar/sidebar-item-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/sidebar/sidebar-item-label.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSidebarContext } from "./sidebar.context.js";
 import { createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/sidebar/sidebar-item-label.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/sidebar/sidebar-item-trailing.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSidebarContext } from "./sidebar.context.js";
 import { createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/sidebar/sidebar-item-trailing.vue?vue&type=script&setup=true&vapor=true&lang.ts

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

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { usePress } from "../../composables/use-press.js";
 import { openLink } from "../../utils/open-link.js";

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

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import drawer_backdrop_default from "../drawer/drawer-backdrop.js";
 import drawer_content_default from "../drawer/drawer-content.js";
 import drawer_dialog_default from "../drawer/drawer-dialog.js";
@@ -33,8 +33,8 @@ var sidebar_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			}, () => {
 				return createComponent(drawer_backdrop_default, null, () => {
 					return createComponent(drawer_content_default, { placement: () => unref(side) }, () => {
-						return createComponent(drawer_dialog_default, { class: "p-0" }, () => {
-							const n3 = createComponent(drawer_heading_default, { class: "sr-only" }, () => {
+						return createComponent(drawer_dialog_default, { class: "rp-drawer__dialog--flush" }, () => {
+							const n3 = createComponent(drawer_heading_default, { class: "rp-drawer__heading--hidden" }, () => {
 								const n2 = t0();
 								renderEffect(() => setText(n2, toDisplayString(label.value)));
 								return n2;

package/dist/components/sidebar/sidebar-rail.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useMove } from "../../composables/use-move.js";
 import { useSidebarContext } from "./sidebar.context.js";

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

@@ -13,6 +13,13 @@ var sidebar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 	__name: "sidebar-root",
 	props: {
 		class: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
 		side: {},
 		variant: {},
 		collapsible: {},
@@ -116,7 +123,7 @@ var sidebar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 		}));
 		const panelId = useId$1();
 		const panelElement = shallowRef(null);
-		const style = computed(() => state.width.value === void 0 ? void 0 : { "--sidebar-width": state.width.value });
+		const style = computed(() => [props.style, state.width.value === void 0 ? void 0 : { "--sidebar-width": state.width.value }]);
 		provideSidebarContext({
 			panelEl: computed(() => panelElement.value),
 			panelId,

package/dist/components/sidebar/sidebar-separator.js

@@ -1,15 +1,12 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import separator_root_default from "../separator/separator-root.js";
-import { useSidebarContext } from "./sidebar.context.js";
-import { createComponent, defineVaporComponent, unref } from "vue";
+import { createComponent, defineVaporComponent, normalizeClass } from "vue";
 //#region src/components/sidebar/sidebar-separator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var sidebar_separator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "sidebar-separator",
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useSidebarContext();
-		return createComponent(separator_root_default, { class: () => unref(composeSlotClassName)(unref(slots).separator, props.class) }, null, true);
+		return createComponent(separator_root_default, { class: () => normalizeClass(["rp-sidebar__separator", props.class]) }, null, true);
 	}
 });
 //#endregion

package/dist/components/sidebar/sidebar-sub-menu.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useDisclosurePanel } from "../../composables/use-disclosure-panel.js";
 import { provideSidebarSubMenuContext, useSidebarCollapsibleContext, useSidebarContext } from "./sidebar.context.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, template, unref } from "vue";

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

@@ -1,7 +1,7 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 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 { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useSidebarContext } from "./sidebar.context.js";
 import { computed, createDynamicComponent, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";

package/dist/components/sidebar/sidebar.types.d.ts

@@ -2,12 +2,21 @@ import type { PressEvent } from "../../composables/use-press.js";
 import type { LinkCurrent } from "../link/link.types.js";
 import type { SidebarCollapsibleMode } from "./sidebar.state.js";
 import type { SidebarVariants } from "@ropav/styles";
+import type { StyleValue } from "vue";
 /** Which edge of the page the panel sits on. */
 export type SidebarSide = NonNullable<SidebarVariants["side"]>;
 /** How much of the shell's chrome the sidebar paints. */
 export type SidebarVariant = NonNullable<SidebarVariants["variant"]>;
 export interface SidebarRootProps {
     class?: string;
+    /**
+     * Declared rather than left to fall through, because this root binds a style of its own and
+     * that style is `undefined` until someone sets a width. An `undefined` on a `:style` binding
+     * does not mean "leave it alone" — it takes the attribute off the element, and a caller's style
+     * merged into the same binding would go with it, at the moment the width happened to be
+     * cleared. Naming it here keeps the two in one binding that is only ever added to.
+     */
+    style?: StyleValue;
     /** @default "left" */
     side?: SidebarSide;
     /**
@@ -17,8 +26,10 @@ export interface SidebarRootProps {
      * content beside it the card instead. Both quiet the rail, whose line has nothing left to divide,
      * and both take their gap and corner from `--sidebar-card-gap` and `--sidebar-card-radius`.
      *
-     * A panel that should merely stop painting says so with one utility — `class="bg-transparent"` —
-     * since nothing else paints that fill and there is no state set for it to flatten.
+     * A panel that should merely stop painting says so in one declaration —
+     * `.rp-sidebar__panel { background-color: transparent }` — since nothing else paints that fill
+     * and there is no state set for it to flatten. Author CSS is unlayered, so it outranks the rule
+     * it replaces without having to say where it sits.
      * @default "sidebar"
      */
     variant?: SidebarVariant;

package/dist/components/slider/slider-fill.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSliderContext } from "./slider.context.js";
 import { computed, defineVaporComponent, renderEffect, setAttr, setClass, setStyle, template, unref } from "vue";
 //#region src/components/slider/slider-fill.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/slider/slider-marks.js

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

package/dist/components/slider/slider-output.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSliderContext } from "./slider.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
 //#region src/components/slider/slider-output.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/components/slider/slider-thumb.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { useSliderThumb } from "../../composables/use-slider-thumb.js";

package/dist/components/slider/slider-track.js

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useSliderContext } from "./slider.context.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setStyle, setTemplateRefBinding, template, unref } from "vue";

package/dist/components/splitter/splitter-handle.js

@@ -1,6 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useMove } from "../../composables/use-move.js";
 import { useNumberFormatter } from "../../composables/use-number-formatter.js";

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

@@ -1,6 +1,6 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useSplitterContext } from "./splitter.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, unref, watch } from "vue";
 //#region src/components/splitter/splitter-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts

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

@@ -1,5 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
+import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useFormReset } from "../../composables/use-form-reset.js";
 import { useFormValidation } from "../../composables/use-form-validation.js";

package/dist/components/switch/switch-control.js

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

package/dist/components/switch/switch-icon.js

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

package/dist/components/switch/switch-thumb.js

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

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

@@ -1,6 +1,5 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
-import { useTableContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
+import { useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
 import table_virtualizer_item_default from "./table-virtualizer-item.js";
 import table_drop_indicator_default from "./table-drop-indicator.js";
 import { computed, createComponent, createDynamicComponent, createFor, createIf, createSlot, defineVaporComponent, extend, onMounted, shallowRef, unref, watch } from "vue";
@@ -15,7 +14,6 @@ var table_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useTableContext();
 		const { collection, dropState } = useTableGridContext();
 		const virtualizer = useTableVirtualizerContext();
 		/**
@@ -72,7 +70,7 @@ var table_body_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const lastRowKey = computed(() => collection.rows.getLastKey());
 		return createComponent(table_virtualizer_item_default, { "layout-info": () => layoutInfo.value }, extend(() => {
 			return createDynamicComponent(() => unref(virtualizer) ? "div" : "tbody", {
-				class: () => unref(composeSlotClassName)(unref(slots).body, props.class),
+				class: () => ["rp-table__body", props.class],
 				"data-empty": () => unref(dataAttr)(isEmpty.value),
 				"data-slot": "table-body",
 				role: "rowgroup"

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

@@ -1,10 +1,9 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { getCollectionTextValue } from "../../utils/text-value.js";
-import { useTableContext, useTableGridContext, useTableRowContext, useTableVirtualizerContext } from "./table.context.js";
+import { useTableGridContext, useTableRowContext, useTableVirtualizerContext } from "./table.context.js";
 import { tableCellId } from "./use-table-collection.js";
 import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, setStaticTemplateRef, shallowRef, unref, watch } from "vue";
 //#region src/components/table/table-cell.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -16,7 +15,6 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useTableContext();
 		const { collection, collectionId, keyboard, selection, tableId, treeColumn } = useTableGridContext();
 		const { cells, claimCellIndex, hasChildRows, isExpanded, level, rowKey } = useTableRowContext();
 		const cellKey = useId$1();
@@ -71,7 +69,7 @@ var table_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const n1 = createDynamicComponent(() => unref(virtualizer) ? "div" : "td", {
 			id: () => cellId.value,
 			"aria-colindex": () => unref(virtualizer) && index.value >= 0 ? index.value + 1 : void 0,
-			class: () => unref(composeSlotClassName)(unref(slots).cell, props.class),
+			class: () => ["rp-table__cell", props.class],
 			"data-collection": () => unref(collectionId),
 			"data-column-index": () => index.value < 0 ? void 0 : index.value,
 			"data-disabled": () => unref(dataAttr)(isDisabled.value),

package/dist/components/table/table-column-resizer.js

@@ -1,11 +1,10 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useMove } from "../../composables/use-move.js";
 import { useDescription } from "../../composables/use-description.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
-import { useTableColumnContext, useTableColumnLayoutContext, useTableContext } from "./table.context.js";
+import { useTableColumnContext, useTableColumnLayoutContext } from "./table.context.js";
 import { child, computed, defineVaporComponent, on, renderEffect, setAttr, setClass, setProp, setStaticTemplateRef, setStyle, setValue, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-column-resizer.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=table-column-resizer role=presentation style=touch-action:none;><input aria-orientation=horizontal type=range>", 1);
@@ -18,7 +17,6 @@ var table_column_resizer_vue_vue_type_script_setup_true_vapor_true_lang_default
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useTableContext();
 		const { columnKey, headerId } = useTableColumnContext();
 		const resizable = useTableColumnLayoutContext();
 		const inputId = useId$1();
@@ -126,7 +124,7 @@ var table_column_resizer_vue_vue_type_script_setup_true_vapor_true_lang_default
 			const _states = unref(states);
 			const _inputId = unref(inputId);
 			const _columnWidth = columnWidth.value;
-			setClass(n1, unref(composeSlotClassName)(unref(slots).columnResizer, _props.class));
+			setClass(n1, ["rp-table__column-resizer", _props.class]);
 			setAttr(n1, "data-focus-visible", _dataAttr(_states.isFocusVisible.value));
 			setAttr(n1, "data-focused", _dataAttr(_states.isFocused.value));
 			setAttr(n1, "data-hovered", _dataAttr(_states.isHovered.value));