ropav 0.9.0 → 0.11.0

package/README.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { provideAvatarContext } from "./avatar.context.js";
+import { useAvatarGroupContext } from "../avatar-group/avatar-group.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, shallowRef, template } from "vue";
 import { avatarVariants } from "@ropav/styles";
 //#region src/components/avatar/avatar-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -13,9 +14,11 @@ var avatar_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 	},
 	setup(__props) {
 		const props = __props;
+		const group = useAvatarGroupContext();
+		const resolvedSize = computed(() => props.size ?? group?.size.value);
 		const slots = computed(() => avatarVariants({
 			color: props.color,
-			size: props.size,
+			size: resolvedSize.value,
 			variant: props.variant
 		}));
 		const imageStatus = shallowRef("idle");

package/dist/components/avatar-group/avatar-group-overflow.d.ts

@@ -0,0 +1,21 @@
+import type { AvatarGroupOverflowProps } from "./avatar-group.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<AvatarGroupOverflowProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/avatar-group/avatar-group-overflow.js

@@ -0,0 +1,42 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import avatar_fallback_default from "../avatar/avatar-fallback.js";
+import { useAvatarGroupContext } from "./avatar-group.context.js";
+import avatar_root_default from "../avatar/avatar-root.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setText, template, toDisplayString, unref, useSlots } from "vue";
+//#region src/components/avatar-group/avatar-group-overflow.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var avatar_group_overflow_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "avatar-group-overflow",
+	props: {
+		class: {},
+		count: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const callerSlots = useSlots();
+		/**
+		* Whether the caller wrote a slot at all, read off its presence and never by running it. A
+		* default written as `<slot>` fallback content drops the slots of anything nested inside it on
+		* the first render from a VDOM host, so both paths are kept apart instead.
+		*/
+		const hasSlot = computed(() => Boolean(callerSlots["default"]));
+		const context = useAvatarGroupContext();
+		const overflowClass = computed(() => composeSlotClassName(context?.slots.value.overflow, props.class));
+		return createComponent(unref(avatar_root_default), {
+			class: () => overflowClass.value,
+			"data-slot": "avatar-group-overflow"
+		}, () => {
+			return createComponent(unref(avatar_fallback_default), null, extend(() => {
+				return createIf(() => hasSlot.value, () => {
+					return createSlot("default", null, null, 4);
+				}, () => createIf(() => props.count !== void 0, () => {
+					const n5 = t0();
+					renderEffect(() => setText(n5, "+" + toDisplayString(props.count)));
+					return n5;
+				}, null, 129), 389);
+			}, { _: 1 }));
+		}, true);
+	}
+});
+//#endregion
+export { avatar_group_overflow_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/avatar-group/avatar-group-root.d.ts

@@ -0,0 +1,21 @@
+import type { AvatarGroupRootProps } from "./avatar-group.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<AvatarGroupRootProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/avatar-group/avatar-group-root.js

@@ -0,0 +1,35 @@
+import { provideAvatarGroupContext } from "./avatar-group.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { avatarGroupVariants } from "@ropav/styles";
+//#region src/components/avatar-group/avatar-group-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=avatar-group>", 1);
+var avatar_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "avatar-group-root",
+	props: {
+		class: {},
+		front: {},
+		orientation: {},
+		overlap: {},
+		size: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = computed(() => avatarGroupVariants({
+			front: props.front,
+			orientation: props.orientation,
+			overlap: props.overlap,
+			size: props.size
+		}));
+		provideAvatarGroupContext({
+			size: computed(() => props.size),
+			slots
+		});
+		const n1 = t0();
+		renderEffect(() => setClass(n1, slots.value.base({ class: props.class })));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { avatar_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/avatar-group/avatar-group.context.d.ts

@@ -0,0 +1,12 @@
+import type { avatarGroupVariants, AvatarVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface AvatarGroupContext {
+    slots: ComputedRef<ReturnType<typeof avatarGroupVariants>>;
+    /** Size for every avatar in the group, which each avatar may still override. */
+    size: ComputedRef<AvatarVariants["size"]>;
+}
+/**
+ * Loose on purpose: an Avatar reads this context but is perfectly usable on its own, so the
+ * absence of a group is a normal state rather than an error.
+ */
+export declare const useAvatarGroupContext: () => AvatarGroupContext | null, provideAvatarGroupContext: (value: AvatarGroupContext | null) => AvatarGroupContext | null;

package/dist/components/avatar-group/avatar-group.context.js

@@ -0,0 +1,13 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/avatar-group/avatar-group.context.ts
+/**
+* Loose on purpose: an Avatar reads this context but is perfectly usable on its own, so the
+* absence of a group is a normal state rather than an error.
+*/
+var [useAvatarGroupContext, provideAvatarGroupContext] = createContext({
+	defaultValue: null,
+	name: "AvatarGroupContext",
+	strict: false
+});
+//#endregion
+export { provideAvatarGroupContext, useAvatarGroupContext };

package/dist/components/avatar-group/avatar-group.types.d.ts

@@ -0,0 +1,26 @@
+import type { AvatarGroupVariants, AvatarVariants } from "@ropav/styles";
+export interface AvatarGroupRootProps {
+    class?: string;
+    /**
+     * Which avatar is in front. `"last"` is the order the document paints in already, so it costs
+     * no stacking rule; `"first"` reverses it. @default "last"
+     */
+    front?: AvatarGroupVariants["front"];
+    /** Axis the avatars are laid out along. @default "horizontal" */
+    orientation?: AvatarGroupVariants["orientation"];
+    /**
+     * How far each avatar tucks under its neighbour, as a share of one avatar. `"none"` spaces them
+     * out instead, and drops the ring with it. @default "md"
+     */
+    overlap?: AvatarGroupVariants["overlap"];
+    /** Size for every avatar in the group. Each avatar can still set its own. @default "md" */
+    size?: AvatarVariants["size"];
+}
+export interface AvatarGroupOverflowProps {
+    class?: string;
+    /**
+     * How many avatars are not shown, rendered as `+count`. Write the slot instead where the count
+     * needs words around it.
+     */
+    count?: number;
+}

package/dist/components/avatar-group/index.d.ts

@@ -0,0 +1,8 @@
+import AvatarGroupOverflow from "./avatar-group-overflow.js";
+import AvatarGroupRoot from "./avatar-group-root.js";
+export { AvatarGroupRoot as AvatarGroup, AvatarGroupOverflow };
+export type { AvatarGroupRootProps as AvatarGroupProps, AvatarGroupOverflowProps, } from "./avatar-group.types.js";
+export { useAvatarGroupContext } from "./avatar-group.context.js";
+export type { AvatarGroupContext } from "./avatar-group.context.js";
+export { avatarGroupVariants } from "@ropav/styles";
+export type { AvatarGroupVariants } from "@ropav/styles";

package/dist/components/avatar-group/index.js

@@ -0,0 +1,5 @@
+import { useAvatarGroupContext } from "./avatar-group.context.js";
+import avatar_group_overflow_default from "./avatar-group-overflow.js";
+import avatar_group_root_default from "./avatar-group-root.js";
+import { avatarGroupVariants } from "@ropav/styles";
+export { avatar_group_root_default as AvatarGroup, avatar_group_overflow_default as AvatarGroupOverflow, avatarGroupVariants, useAvatarGroupContext };

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

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

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

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

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

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

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

@@ -48,7 +48,7 @@ var button_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			focusResponder?.registerElement(next);
 		};
 		const resolvedFullWidth = computed(() => props.fullWidth ?? group?.fullWidth.value);
-		const resolvedIsDisabled = computed(() => props.isDisabled ?? group?.isDisabled.value ?? fieldset?.isDisabled.value);
+		const resolvedIsDisabled = computed(() => props.isDisabled ?? responder?.isDisabled?.value ?? group?.isDisabled.value ?? fieldset?.isDisabled.value);
 		const resolvedSize = computed(() => props.size ?? group?.size.value);
 		const resolvedVariant = computed(() => props.variant ?? group?.variant.value);
 		const styles = computed(() => buttonVariants({

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

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