ropav 0.9.0 → 0.11.0

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;

package/dist/components/card/card-footer.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-footer.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=card-footer>", 1);
 var card_footer_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var card_footer_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCardContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).footer, props.class)));
+		renderEffect(() => setClass(n1, ["rp-card__footer", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/card/card-header.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-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=card-header>", 1);
 var card_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var card_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCardContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).header, props.class)));
+		renderEffect(() => setClass(n1, ["rp-card__header", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

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

@@ -1,5 +1,4 @@
 import { provideSurfaceContext, useSurfaceContext } from "../surface/surface.context.js";
-import { provideCardContext } from "./card.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 import { cardVariants } from "@ropav/styles";
 //#region src/components/card/card-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -13,7 +12,6 @@ var card_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 	setup(__props) {
 		const props = __props;
 		const slots = computed(() => cardVariants({ variant: props.variant }));
-		provideCardContext({ slots });
 		const ancestorSurface = useSurfaceContext();
 		/**
 		* A card is a surface, so anything inside it that picks its colours from the surface behind

package/dist/components/card/card-title.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-title.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<h3 data-slot=card-title>", 1);
 var card_title_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -8,9 +6,8 @@ var card_title_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 	props: { class: {} },
 	setup(__props) {
 		const props = __props;
-		const { slots } = useCardContext();
 		const n1 = t0();
-		renderEffect(() => setClass(n1, unref(composeSlotClassName)(unref(slots).title, props.class)));
+		renderEffect(() => setClass(n1, ["rp-card__title", props.class]));
 		setInsertionState(n1);
 		createSlot();
 		return n1;

package/dist/components/checkbox/checkbox-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, useValidationInput } from "../../composables/use-form-validation.js";

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

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

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

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

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

@@ -1,4 +1,3 @@
-import { provideChipContext } from "./chip.context.js";
 import ChipAutoLabel from "./chip-auto-label.js";
 import { computed, createComponent, createSlot, defineVaporComponent, extend, renderEffect, setClass, setInsertionState, template, unref } from "vue";
 import { chipVariants } from "@ropav/styles";
@@ -19,7 +18,6 @@ var chip_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			size: props.size,
 			variant: props.variant
 		}));
-		provideChipContext({ slots });
 		const n2 = t0();
 		renderEffect(() => setClass(n2, slots.value.base({ class: props.class })));
 		setInsertionState(n2);

package/dist/components/color-area/color-area-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 { useColorAreaContext } from "./color-area.context.js";
 import { child, computed, createSlot, createTemplateRefSetter, defineVaporComponent, next, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";

package/dist/components/color-input-group/color-input-group-input.js

@@ -1,6 +1,6 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
-import { useColorInputGroupContext, useColorInputGroupControlContext } from "./color-input-group.context.js";
+import { useColorInputGroupControlContext } from "./color-input-group.context.js";
 import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref } from "vue";
 //#region src/components/color-input-group/color-input-group-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<input>", 1);
@@ -12,14 +12,12 @@ var color_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_defau
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useColorInputGroupContext();
 		const control = useColorInputGroupControlContext();
 		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;
@@ -53,7 +51,7 @@ var color_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_defau
 			const _control = unref(control);
 			const _interaction = unref(interaction);
 			setDynamicProps(n0, [{
-				class: styles.value,
+				class: ["rp-color-input-group__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/color-input-group/color-input-group-prefix.js

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

package/dist/components/color-input-group/color-input-group-root.js

@@ -1,6 +1,6 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useFocusWithin, useInteractionStates } from "../../composables/use-interaction-states.js";
-import { provideColorInputGroupContext, useColorInputGroupControlContext } from "./color-input-group.context.js";
+import { useColorInputGroupControlContext } from "./color-input-group.context.js";
 import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, shallowRef, template, unref } from "vue";
 import { colorInputGroupVariants } from "@ropav/styles";
 //#region src/components/color-input-group/color-input-group-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -38,7 +38,6 @@ var color_input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 			size: props.size,
 			variant: props.variant
 		}));
-		provideColorInputGroupContext({ slots });
 		const styles = computed(() => slots.value.base({ class: props.class }));
 		const interaction = useInteractionStates({ isDisabled: resolvedIsDisabled });
 		const focusWithin = useFocusWithin();

package/dist/components/color-input-group/color-input-group-suffix.js

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

package/dist/components/color-input-group/color-input-group.context.d.ts

@@ -1,17 +1,4 @@
-import type { colorInputGroupVariants } from "@ropav/styles";
 import type { ComputedRef } from "vue";
-export interface ColorInputGroupContext {
-    /** Slot classes the parts pull their own class from. */
-    slots: ComputedRef<ReturnType<typeof colorInputGroupVariants>>;
-}
-/**
- * Carries the resolved slot functions from the group down to its parts, so each part gets the
- * variant the group settled on without having to resolve it a second time.
- *
- * Strict: a prefix or a control with the group's class on it but no group around it would be
- * styled for a shell that is not there.
- */
-export declare const useColorInputGroupContext: () => ColorInputGroupContext, provideColorInputGroupContext: (value: ColorInputGroupContext) => ColorInputGroupContext;
 /**
  * Listeners the control wires one by one with `@event`.
  *

package/dist/components/color-input-group/color-input-group.context.js

@@ -1,17 +1,9 @@
 import { createContext } from "../../utils/create-context.js";
 //#region src/components/color-input-group/color-input-group.context.ts
-/**
-* Carries the resolved slot functions from the group down to its parts, so each part gets the
-* variant the group settled on without having to resolve it a second time.
-*
-* Strict: a prefix or a control with the group's class on it but no group around it would be
-* styled for a shell that is not there.
-*/
-var [useColorInputGroupContext, provideColorInputGroupContext] = createContext({ name: "ColorInputGroupContext" });
 var [useColorInputGroupControlContext, provideColorInputGroupControlContext] = createContext({
 	defaultValue: null,
 	name: "ColorInputGroupControlContext",
 	strict: false
 });
 //#endregion
-export { provideColorInputGroupContext, provideColorInputGroupControlContext, useColorInputGroupContext, useColorInputGroupControlContext };
+export { provideColorInputGroupControlContext, useColorInputGroupControlContext };

package/dist/components/color-input-group/index.d.ts

@@ -4,7 +4,7 @@ import ColorInputGroupRoot from "./color-input-group-root.js";
 import ColorInputGroupSuffix from "./color-input-group-suffix.js";
 export { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot as ColorInputGroup, ColorInputGroupSuffix, };
 export type { ColorInputGroupRootProps as ColorInputGroupProps, ColorInputGroupRootSlotProps as ColorInputGroupSlotProps, ColorInputGroupInputProps, ColorInputGroupPrefixProps, ColorInputGroupSuffixProps, } from "./color-input-group.types.js";
-export { provideColorInputGroupContext, provideColorInputGroupControlContext, useColorInputGroupContext, useColorInputGroupControlContext, } from "./color-input-group.context.js";
-export type { ColorInputGroupContext, ColorInputGroupControl, ColorInputGroupControlHandlers, } from "./color-input-group.context.js";
+export { provideColorInputGroupControlContext, useColorInputGroupControlContext, } from "./color-input-group.context.js";
+export type { ColorInputGroupControl, ColorInputGroupControlHandlers, } from "./color-input-group.context.js";
 export { colorInputGroupVariants } from "@ropav/styles";
 export type { ColorInputGroupVariants } from "@ropav/styles";

package/dist/components/color-input-group/index.js

@@ -1,7 +1,7 @@
-import { provideColorInputGroupContext, provideColorInputGroupControlContext, useColorInputGroupContext, useColorInputGroupControlContext } from "./color-input-group.context.js";
+import { provideColorInputGroupControlContext, useColorInputGroupControlContext } from "./color-input-group.context.js";
 import color_input_group_input_default from "./color-input-group-input.js";
 import color_input_group_prefix_default from "./color-input-group-prefix.js";
 import color_input_group_root_default from "./color-input-group-root.js";
 import color_input_group_suffix_default from "./color-input-group-suffix.js";
 import { colorInputGroupVariants } from "@ropav/styles";
-export { color_input_group_root_default as ColorInputGroup, color_input_group_input_default as ColorInputGroupInput, color_input_group_prefix_default as ColorInputGroupPrefix, color_input_group_suffix_default as ColorInputGroupSuffix, colorInputGroupVariants, provideColorInputGroupContext, provideColorInputGroupControlContext, useColorInputGroupContext, useColorInputGroupControlContext };
+export { color_input_group_root_default as ColorInputGroup, color_input_group_input_default as ColorInputGroupInput, color_input_group_prefix_default as ColorInputGroupPrefix, color_input_group_suffix_default as ColorInputGroupSuffix, colorInputGroupVariants, provideColorInputGroupControlContext, useColorInputGroupControlContext };

package/dist/components/color-picker/color-picker-popover.js

@@ -1,8 +1,7 @@
 import { provideSurfaceContext } from "../surface/surface.context.js";
 import { createOverlaySlotContexts, provideOverlaySlotContexts } from "../overlay/overlay-slots.js";
 import overlay_popover_default from "../overlay/overlay-popover.js";
-import { useColorPickerContext } from "./color-picker.context.js";
-import { computed, createComponent, createSlot, defineVaporComponent, extend, unref } from "vue";
+import { computed, createComponent, createSlot, defineVaporComponent, extend, normalizeClass, unref } from "vue";
 //#region src/components/color-picker/color-picker-popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var color_picker_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-picker-popover",
@@ -23,7 +22,6 @@ var color_picker_popover_vue_vue_type_script_setup_true_vapor_true_lang_default
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useColorPickerContext();
 		/**
 		* Owned here rather than by the overlay itself.
 		*
@@ -33,9 +31,8 @@ var color_picker_popover_vue_vue_type_script_setup_true_vapor_true_lang_default
 		const contexts = createOverlaySlotContexts();
 		provideOverlaySlotContexts(contexts);
 		provideSurfaceContext({ variant: computed(() => "default") });
-		const styles = computed(() => slots.value.popover({ class: props.class }));
 		return createComponent(unref(overlay_popover_default), {
-			class: () => styles.value,
+			class: () => normalizeClass(["rp-color-picker__popover", props.class]),
 			"container-padding": () => props.containerPadding,
 			"cross-offset": () => props.crossOffset,
 			"data-slot": "color-picker-popover",

package/dist/components/color-picker/color-picker-root.js

@@ -2,7 +2,7 @@ import { providePressResponder } from "../../composables/press-responder.js";
 import { provideOverlayTargetContext } from "../overlay/overlay.context.js";
 import { useDialogTrigger } from "../../composables/use-dialog-trigger.js";
 import { useOverlayTriggerState } from "../../composables/use-overlay-trigger-state.js";
-import { provideColorPickerContext, provideColorValueContext } from "./color-picker.context.js";
+import { provideColorValueContext } from "./color-picker.context.js";
 import { useColorPickerState } from "../../composables/use-color-picker-state.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
 import { colorPickerVariants } from "@ropav/styles";
@@ -47,7 +47,6 @@ var color_picker_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		});
 		const trigger = useDialogTrigger({}, overlay);
 		providePressResponder(trigger.responder);
-		provideColorPickerContext({ slots: computed(() => colorPickerVariants()) });
 		/**
 		* The one context every colour component under here reads.
 		*

package/dist/components/color-picker/color-picker-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 { useColorPickerContext } from "./color-picker.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/color-picker/color-picker-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
 var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -13,9 +12,7 @@ var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default
 	},
 	setup(__props) {
 		const props = __props;
-		const { slots } = useColorPickerContext();
 		const responder = usePressResponder();
-		const styles = computed(() => slots.value.trigger({ class: props.class }));
 		const setElement = (element) => {
 			responder?.registerElement(element ?? null);
 		};
@@ -30,15 +27,16 @@ var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default
 		const press = composePressResponder(responder);
 		const n1 = t0();
 		renderEffect(() => {
+			const _props = props;
 			const _dataAttr = unref(dataAttr);
 			const _responder = unref(responder);
 			setDynamicProps(n1, [{
-				class: styles.value,
+				class: ["rp-color-picker__trigger", _props.class],
 				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
 				"data-pressed": _dataAttr(_responder?.isPressed.value),
 				"data-slot": "color-picker-trigger",
 				tabindex: "0",
-				type: props.type
+				type: _props.type
 			}, _responder?.attrs.value]);
 		});
 		setInsertionState(n1);

package/dist/components/color-picker/color-picker.context.d.ts

@@ -1,15 +1,5 @@
 import type { Color } from "../../utils/color-types.js";
-import type { colorPickerVariants } from "@ropav/styles";
 import type { ComputedRef } from "vue";
-export interface ColorPickerContext {
-    /** Slot classes the parts pull their own class from. */
-    slots: ComputedRef<ReturnType<typeof colorPickerVariants>>;
-}
-/**
- * Strict: a trigger or a popover with the picker's classes on it but no picker around it would
- * open nothing.
- */
-export declare const useColorPickerContext: () => ColorPickerContext, provideColorPickerContext: (value: ColorPickerContext) => ColorPickerContext;
 export interface ColorValueContext {
     /** The colour the picker holds. */
     value: ComputedRef<Color>;

package/dist/components/color-picker/color-picker.context.js

@@ -1,11 +1,6 @@
 import { createContext } from "../../utils/create-context.js";
 //#region src/components/color-picker/color-picker.context.ts
 /**
-* Strict: a trigger or a popover with the picker's classes on it but no picker around it would
-* open nothing.
-*/
-var [useColorPickerContext, provideColorPickerContext] = createContext({ name: "ColorPickerContext" });
-/**
 * One colour, shared with every colour component under a picker.
 *
 * React fans the same state out into **six** separate RAC contexts — one per colour component —
@@ -28,4 +23,4 @@ var [useColorValueContext, provideColorValueContext] = createContext({
 	strict: false
 });
 //#endregion
-export { provideColorPickerContext, provideColorValueContext, useColorPickerContext, useColorValueContext };
+export { provideColorValueContext, useColorValueContext };