ropav 0.9.0 → 0.11.0

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

@@ -2,7 +2,6 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
 import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
-import { usePopoverContext } from "./popover.context.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/popover/popover-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
@@ -11,9 +10,7 @@ var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = usePopoverContext();
 		const responder = usePressResponder();
-		const styles = computed(() => slots.value.trigger({ class: props.class }));
 		const host = shallowRef(null);
 		const hasFocusableContent = shallowRef(false);
 		const setElement = (element) => {
@@ -30,7 +27,7 @@ var popover_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			setDynamicProps(n1, [{
-				class: styles.value,
+				class: ["rp-popover__trigger", props.class],
 				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
 				"data-pressed": _dataAttr(unref(responder)?.isPressed.value),
 				"data-slot": "popover-trigger",

package/dist/components/progress-bar/progress-bar-track.js

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

package/dist/components/progress-circle/progress-circle-track-circle.js

@@ -1,5 +1,3 @@
-import { composeSlotClassName } from "../../utils/compose.js";
-import { useProgressCircleContext } from "./progress-circle.context.js";
 import { defineVaporComponent, renderEffect, setAttr, setClass, template, unref } from "vue";
 //#region src/components/progress-circle/progress-circle-track-circle.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<circle data-slot=progress-circle-track-circle>", 1, 1);
@@ -8,11 +6,10 @@ var progress_circle_track_circle_vue_vue_type_script_setup_true_vapor_true_lang_
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useProgressCircleContext();
 		const n0 = t0();
 		renderEffect(() => {
 			const _CENTER = unref(18);
-			setClass(n0, unref(composeSlotClassName)(unref(slots).trackCircle, props.class), true);
+			setClass(n0, ["rp-progress-circle__track-circle", props.class], true);
 			setAttr(n0, "cx", _CENTER, true);
 			setAttr(n0, "cy", _CENTER, true);
 			setAttr(n0, "r", unref(16), true);

package/dist/components/progress-circle/progress-circle-track.js

@@ -1,6 +1,4 @@
-import { composeSlotClassName } from "../../utils/compose.js";
 import { VIEW_BOX } from "./progress-circle.constants.js";
-import { useProgressCircleContext } from "./progress-circle.context.js";
 import { createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/progress-circle/progress-circle-track.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<svg data-slot=progress-circle-track fill=none>", 1, 1);
@@ -9,10 +7,9 @@ var progress_circle_track_vue_vue_type_script_setup_true_vapor_true_lang_default
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useProgressCircleContext();
 		const n1 = t0();
 		renderEffect(() => {
-			setClass(n1, unref(composeSlotClassName)(unref(slots).track, props.class), true);
+			setClass(n1, ["rp-progress-circle__track", props.class], true);
 			setAttr(n1, "viewBox", unref(VIEW_BOX), true);
 		});
 		setInsertionState(n1);

package/dist/components/radio/radio-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/radio/radio-control.js

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

package/dist/components/range-calendar/index.js

@@ -1,6 +1,6 @@
-import { provideRangeCalendarContext, provideRangeCalendarOwnerContext, useRangeCalendarContext, useRangeCalendarOwnerContext } from "./range-calendar.context.js";
 import range_calendar_cell_indicator_default from "./range-calendar-cell-indicator.js";
 import range_calendar_cell_default from "./range-calendar-cell.js";
+import { provideRangeCalendarContext, provideRangeCalendarOwnerContext, useRangeCalendarContext, useRangeCalendarOwnerContext } from "./range-calendar.context.js";
 import range_calendar_grid_body_default from "./range-calendar-grid-body.js";
 import range_calendar_grid_header_default from "./range-calendar-grid-header.js";
 import range_calendar_grid_default from "./range-calendar-grid.js";

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

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

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

@@ -1,14 +1,13 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
-import { useCalendarGridContext, useCalendarStateContext } from "../calendar/calendar.context.js";
 import { isRangeCalendarState } from "../../composables/use-calendar.js";
 import { useCalendarCell } from "../../composables/use-calendar-cell.js";
-import { useRangeCalendarContext } from "./range-calendar.context.js";
-import { child, computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, unref } from "vue";
+import { useCalendarGridContext, useCalendarStateContext } from "../calendar/calendar.context.js";
+import { child, computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, unref } from "vue";
 import { isSameDay, isSameMonth } from "@internationalized/date";
 //#region src/components/range-calendar/range-calendar-cell.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<td><div><span data-slot=range-calendar-cell-button>", 1);
+var t1 = template("<td><div><span class=rp-range-calendar__cell-button data-slot=range-calendar-cell-button>", 1);
 var range_calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "range-calendar-cell",
 	props: {
@@ -17,7 +16,6 @@ var range_calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useRangeCalendarContext();
 		const { calendar, state } = useCalendarStateContext();
 		const { startDate } = useCalendarGridContext();
 		const element = shallowRef(null);
@@ -60,8 +58,6 @@ var range_calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default =
 				isSelectionStart: isSameDay(props.date, range.start)
 			};
 		});
-		const styles = computed(() => slots.value.cell({ class: props.class }));
-		const buttonStyles = computed(() => slots.value.cellButton());
 		const slotProps = computed(() => ({
 			date: props.date,
 			formattedDate: cell.formattedDate.value,
@@ -91,7 +87,7 @@ var range_calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			const _dataAttr_cell_isPressed_value = _dataAttr(_cell.isPressed.value);
 			setDynamicProps(n5, [_cell.cellAttrs.value]);
 			setDynamicProps(n4, [{
-				class: styles.value,
+				class: ["rp-range-calendar__cell", props.class],
 				"data-disabled": _dataAttr_cell_isDisabled_value,
 				"data-focus-visible": _dataAttr(isFocusVisible.value),
 				"data-focused": _dataAttr(_cell.isFocused.value),
@@ -107,7 +103,6 @@ var range_calendar_cell_vue_vue_type_script_setup_true_vapor_true_lang_default =
 				"data-today": _dataAttr(_cell.isToday.value),
 				"data-unavailable": _dataAttr(_cell.isUnavailable.value)
 			}, _cell.buttonAttrs.value]);
-			setClass(n3, buttonStyles.value);
 			setAttr(n3, "data-disabled", _dataAttr_cell_isDisabled_value);
 			setAttr(n3, "data-hovered", _dataAttr_interaction_isHovered_value);
 			setAttr(n3, "data-pressed", _dataAttr_cell_isPressed_value);

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

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

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

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

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

@@ -1,7 +1,6 @@
 import { useCalendarStateContext } from "../calendar/calendar.context.js";
 import { useCalendarHeading } from "../../composables/use-calendar-heading.js";
-import { useRangeCalendarContext } from "./range-calendar.context.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/range-calendar/range-calendar-heading.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<h2 aria-hidden=true data-slot=range-calendar-heading> ", 1);
 var range_calendar_heading_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -13,17 +12,15 @@ var range_calendar_heading_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useRangeCalendarContext();
 		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-range-calendar__heading", props.class]);
 			setText(x0, toDisplayString(unref(heading)));
 		});
 		return n0;

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-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

@@ -26,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;
@@ -229,7 +231,7 @@ export interface SidebarItemTooltipProps {
     /**
      * How long the pointer has to rest on the item before the tooltip opens.
      *
-     * Left to the theme's `--tooltip-delay` by default, the same as every other tooltip. A rail is a
+     * Left to the theme's `--rp-tooltip-delay` by default, the same as every other tooltip. A rail is a
      * good reason to want this shorter — the label is the only way to read the item, not a hint
      * beside one — but that is a decision about the whole product's tooltips, not about this part.
      */

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

@@ -11,7 +11,7 @@ var skeleton_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 	},
 	setup(__props) {
 		const props = __props;
-		const resolvedAnimationType = useCssVariable("--skeleton-animation", { override: () => props.animationType });
+		const resolvedAnimationType = useCssVariable("--rp-skeleton-animation", { override: () => props.animationType });
 		const styles = computed(() => skeletonVariants({ animationType: resolvedAnimationType.value }).base({ class: props.class }));
 		const n1 = t0();
 		renderEffect(() => setClass(n1, styles.value));

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

@@ -1,6 +1,6 @@
 import type { SkeletonVariants } from "@ropav/styles";
 export interface SkeletonRootProps {
     class?: string;
-    /** Animation type. Falls back to the theme's `--skeleton-animation` value. */
+    /** Animation type. Falls back to the theme's `--rp-skeleton-animation` value. */
     animationType?: SkeletonVariants["animationType"];
 }