ropav 0.1.6 → 0.1.8

package/README.md

@@ -142,5 +142,11 @@ Use typed `classNames` and `styles`, documented state attributes, and variables
 
 See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Consumers can declare `reset, ropav.tokens, ropav.components, app` to establish their cascade layer order.
 
-For headless Tooltip, HoverCard and custom menu markup, see the
+For headless floating content and custom overlay markup, see the
 [public floating API](./docs/public-floating-api.md).
+
+## Development
+
+Contributors should follow the [code architecture guide](./docs/code-architecture.md) for component,
+composable, utility, dependency, and testing conventions. Run `pnpm run verify` before submitting a
+change.

package/dist/accordion.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-accordion[data-v-d15589fa] {
+.rp-accordion[data-v-c48cb87a] {
     --_rp-accordion-radius: var(--rp-radius-sm);
     --_rp-accordion-duration: var(--rp-transition-fast);
     box-sizing: border-box;
@@ -12,29 +12,29 @@
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-accordion-radius);
 }
-.rp-accordion--disabled[data-v-d15589fa] {
+.rp-accordion--disabled[data-v-c48cb87a] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
 }@layer ropav.components {
-.rp-accordion-item[data-v-5b00ef39] {
+.rp-accordion-item[data-v-ab630265] {
     --_rp-accordion-duration: var(--rp-transition-fast);
     box-sizing: border-box;
     min-width: 0;
     border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-accordion-item[data-v-5b00ef39]:first-child {
+.rp-accordion-item[data-v-ab630265]:first-child {
     border-top: 0;
 }
-.rp-accordion-item--disabled[data-v-5b00ef39] {
+.rp-accordion-item--disabled[data-v-ab630265] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-accordion-item__heading[data-v-5b00ef39] {
+.rp-accordion-item__heading[data-v-ab630265] {
     margin: 0;
     font: inherit;
 }
-.rp-accordion-item__trigger[data-v-5b00ef39] {
+.rp-accordion-item__trigger[data-v-ab630265] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -55,30 +55,30 @@
     border: 0;
     transition: background-color var(--_rp-accordion-duration), color var(--_rp-accordion-duration);
 }
-.rp-accordion-item__trigger[data-v-5b00ef39]:hover:not(:disabled) {
+.rp-accordion-item__trigger[data-v-ab630265]:hover:not(:disabled) {
     background-color: var(--rp-color-default-hover);
 }
-.rp-accordion-item__trigger[data-v-5b00ef39]:focus-visible {
+.rp-accordion-item__trigger[data-v-ab630265]:focus-visible {
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-accordion-item__trigger[data-v-5b00ef39]:disabled {
+.rp-accordion-item__trigger[data-v-ab630265]:disabled {
     cursor: default;
 }
-.rp-accordion-item__title[data-v-5b00ef39] {
+.rp-accordion-item__title[data-v-ab630265] {
     min-width: 0;
 }
-.rp-accordion-item__icon[data-v-5b00ef39] {
+.rp-accordion-item__icon[data-v-ab630265] {
     display: inline-flex;
     flex: 0 0 auto;
     color: var(--rp-color-control-icon);
     transition: transform var(--_rp-accordion-duration);
 }
-.rp-accordion-item--open .rp-accordion-item__icon[data-v-5b00ef39] {
+.rp-accordion-item--open .rp-accordion-item__icon[data-v-ab630265] {
     transform: rotate(180deg);
 }
-.rp-accordion-item__content[data-v-5b00ef39] {
+.rp-accordion-item__content[data-v-ab630265] {
     box-sizing: border-box;
     display: grid;
     min-width: 0;
@@ -90,13 +90,13 @@
     grid-template-rows: 1fr;
     transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-top var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
 }
-.rp-accordion-item__inner[data-v-5b00ef39] {
+.rp-accordion-item__inner[data-v-ab630265] {
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
-.rp-accordion-content-enter-from[data-v-5b00ef39],
-  .rp-accordion-content-leave-to[data-v-5b00ef39] {
+.rp-accordion-content-enter-from[data-v-ab630265],
+  .rp-accordion-content-leave-to[data-v-ab630265] {
     opacity: 0;
     grid-template-rows: 0fr;
     padding-top: 0;

package/dist/accordion.js

@@ -1,136 +1,39 @@
 import './accordion.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute, t as toOptionalAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
+import { t as getFocusNavigationTarget } from "./focusNavigation.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as useCollapse } from "./useCollapse.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, provide, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId } from "vue";
-//#region src/components/accordion/types.ts
-var accordionParts = ["root"];
-var accordionItemParts = [
-	"root",
-	"trigger",
-	"title",
-	"icon",
-	"content"
-];
+//#region src/components/accordion/accordionContext.ts
 var accordionKey = Symbol("accordion");
 //#endregion
-//#region src/components/accordion/useAccordion.ts
-var ACCORDION_SELECTOR = ".rp-accordion";
-var TRIGGER_SELECTOR = ".rp-accordion-item__trigger";
-function normalizeValue(value, multiple) {
+//#region src/components/accordion/accordionModel.ts
+function readAccordionOpenValues(value, multiple) {
 	if (value == null) return [];
 	const values = Array.isArray(value) ? value : [value];
 	return multiple ? values : values.slice(0, 1);
 }
-function toModelValue(values, multiple) {
-	return multiple ? [...values] : values[0] ?? null;
-}
 function hasValue(values, value) {
 	return values.some((itemValue) => itemValue === value);
 }
-function withoutValue(values, value) {
-	return values.filter((itemValue) => itemValue !== value);
-}
-var NAVIGATION_KEYS = {
-	ArrowDown: 1,
-	ArrowUp: -1
-};
-function getAccordionTrigger(event, root) {
-	const target = event.target;
-	if (!(target instanceof Element)) return void 0;
-	const trigger = target.closest(TRIGGER_SELECTOR);
-	if (!trigger || trigger.closest(ACCORDION_SELECTOR) !== root) return void 0;
-	return trigger;
-}
-function getAccordionTriggers(root) {
-	return Array.from(root.querySelectorAll(TRIGGER_SELECTOR)).filter((trigger) => trigger.closest(ACCORDION_SELECTOR) === root && !trigger.disabled);
-}
-function getNextTrigger(root, currentTrigger, key) {
-	const triggers = getAccordionTriggers(root);
-	const currentIndex = triggers.indexOf(currentTrigger);
-	if (currentIndex === -1 || triggers.length === 0) return void 0;
-	if (key === "Home") return triggers[0];
-	if (key === "End") return triggers[triggers.length - 1];
-	const direction = NAVIGATION_KEYS[key];
-	if (!direction) return void 0;
-	return triggers[(currentIndex + direction + triggers.length) % triggers.length];
-}
-function useAccordion(props, emitUpdate) {
-	const isMultiple = computed(() => Boolean(props.multiple));
-	const isCollapsible = computed(() => props.collapsible !== false);
-	const isDisabled = computed(() => Boolean(props.disabled));
-	const controllable = useControllableValue({
-		modelValue: () => props.modelValue,
-		defaultValue: () => props.defaultValue ?? null,
-		onChange: emitUpdate
-	});
-	const openValues = computed(() => normalizeValue(controllable.value.value, isMultiple.value));
-	const rootClass = computed(() => bem("rp-accordion", {
-		disabled: isDisabled.value,
-		multiple: isMultiple.value
-	}));
-	const rootProps = computed(() => ({
-		id: props.id,
-		class: rootClass.value,
-		"data-disabled": isDisabled.value || void 0,
-		"aria-label": props.ariaLabel || void 0,
-		"aria-labelledby": props.labelledby || void 0,
-		"aria-describedby": props.describedby || void 0,
-		onKeydown: onRootKeydown
-	}));
-	function setValues(nextValues) {
-		const nextModelValue = toModelValue(nextValues, isMultiple.value);
-		controllable.setValue(nextModelValue);
-	}
-	function setItemOpen(value, open) {
-		if (isDisabled.value) return;
-		const values = openValues.value;
-		if (hasValue(values, value) === open) return;
-		if (!open && !isCollapsible.value) return;
-		if (isMultiple.value) {
-			setValues(open ? [...values, value] : withoutValue(values, value));
-			return;
-		}
-		setValues(open ? [value] : []);
-	}
-	function onRootKeydown(event) {
-		const root = event.currentTarget;
-		if (!root) return;
-		const trigger = getAccordionTrigger(event, root);
-		if (!trigger) return;
-		const nextTrigger = getNextTrigger(root, trigger, event.key);
-		if (!nextTrigger) return;
-		event.preventDefault();
-		nextTrigger.focus();
-	}
-	provide(accordionKey, {
-		get multiple() {
-			return isMultiple.value;
-		},
-		get collapsible() {
-			return isCollapsible.value;
-		},
-		get disabled() {
-			return isDisabled.value;
-		},
-		get unmountOnExit() {
-			return Boolean(props.unmountOnExit);
-		},
-		isItemOpen(value) {
-			return hasValue(openValues.value, value);
-		},
-		setItemOpen
-	});
+function transitionAccordionValue(currentValue, itemValue, open, options) {
+	const openValues = readAccordionOpenValues(currentValue, options.multiple);
+	if (hasValue(openValues, itemValue) === open || !open && !options.collapsible) return { changed: false };
+	if (!options.multiple) return {
+		changed: true,
+		modelValue: open ? itemValue : null
+	};
 	return {
-		rootClass,
-		rootProps,
-		openValues,
-		setItemOpen
+		changed: true,
+		modelValue: open ? [...openValues, itemValue] : openValues.filter((value) => value !== itemValue)
 	};
 }
+//#endregion
+//#region src/components/accordion/useAccordionItem.ts
 function useAccordionItem(props) {
 	const group = useRequiredInject(accordionKey, "RpAccordionItem");
 	const generatedId = useId();
@@ -140,7 +43,6 @@ function useAccordionItem(props) {
 	const isOpen = computed(() => group.isItemOpen(props.value));
 	const isDisabled = computed(() => Boolean(group.disabled || props.disabled));
 	const shouldUnmountOnExit = computed(() => props.unmountOnExit ?? group.unmountOnExit);
-	const state = computed(() => isOpen.value ? "open" : "closed");
 	const triggerAriaDisabled = computed(() => isDisabled.value || !group.collapsible && isOpen.value);
 	const collapse = useCollapse({
 		id: contentId,
@@ -152,7 +54,7 @@ function useAccordionItem(props) {
 		ariaDescribedby: () => props.ariaDescribedby,
 		ariaLabelledby: () => props.ariaLabelledby ?? triggerId.value
 	}, (nextOpen) => {
-		setOpen(nextOpen);
+		group.setItemOpen(props.value, nextOpen);
 	});
 	const rootClass = computed(() => bem("rp-accordion-item", {
 		open: isOpen.value,
@@ -162,8 +64,8 @@ function useAccordionItem(props) {
 	const rootProps = computed(() => ({
 		id: id.value,
 		class: rootClass.value,
-		"data-state": state.value,
-		"data-disabled": isDisabled.value || void 0
+		"data-state": collapse.state.value,
+		"data-disabled": toOptionalAttribute(isDisabled.value)
 	}));
 	const triggerProps = computed(() => ({
 		...collapse.triggerProps.value,
@@ -171,9 +73,8 @@ function useAccordionItem(props) {
 		class: "rp-accordion-item__trigger",
 		"aria-controls": contentId.value,
 		"aria-expanded": isOpen.value,
-		"aria-disabled": triggerAriaDisabled.value || void 0,
-		disabled: isDisabled.value || void 0,
-		onClick: onTriggerClick
+		"aria-disabled": toOptionalAttribute(triggerAriaDisabled.value),
+		disabled: toOptionalAttribute(isDisabled.value)
 	}));
 	const contentProps = computed(() => ({
 		...collapse.contentProps.value,
@@ -185,36 +86,20 @@ function useAccordionItem(props) {
 		value: props.value,
 		isOpen: isOpen.value,
 		disabled: isDisabled.value,
-		open,
-		close,
-		toggle
+		open: collapse.open,
+		close: collapse.close,
+		toggle: collapse.toggle
 	}));
 	const triggerSlotProps = computed(() => ({
 		triggerProps: triggerProps.value,
 		...contentSlotProps.value
 	}));
-	function open() {
-		setOpen(true);
-	}
-	function close() {
-		setOpen(false);
-	}
-	function toggle() {
-		setOpen(!isOpen.value);
-	}
-	function setOpen(nextOpen) {
-		if (isDisabled.value) return;
-		group.setItemOpen(props.value, nextOpen);
-	}
-	function onTriggerClick() {
-		toggle();
-	}
 	return {
 		group,
 		id,
 		triggerId,
 		contentId,
-		state,
+		state: collapse.state,
 		isOpen,
 		isDisabled,
 		shouldRenderContent: collapse.shouldRenderContent,
@@ -224,14 +109,87 @@ function useAccordionItem(props) {
 		contentProps,
 		triggerSlotProps,
 		contentSlotProps,
-		open,
-		close,
-		toggle
+		open: collapse.open,
+		close: collapse.close,
+		toggle: collapse.toggle
+	};
+}
+//#endregion
+//#region src/components/accordion/useAccordion.ts
+var ACCORDION_SELECTOR = ".rp-accordion";
+var TRIGGER_SELECTOR = ".rp-accordion-item__trigger";
+function useAccordion(props, emitUpdate) {
+	const isMultiple = computed(() => Boolean(props.multiple));
+	const isCollapsible = computed(() => props.collapsible !== false);
+	const isDisabled = computed(() => Boolean(props.disabled));
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: emitUpdate
+	});
+	const openValues = computed(() => readAccordionOpenValues(controllable.value.value, isMultiple.value));
+	const rootClass = computed(() => bem("rp-accordion", {
+		disabled: isDisabled.value,
+		multiple: isMultiple.value
+	}));
+	const rootProps = computed(() => ({
+		id: props.id,
+		class: rootClass.value,
+		"data-disabled": toOptionalAttribute(isDisabled.value),
+		"aria-label": toOptionalAttribute(props.ariaLabel),
+		"aria-labelledby": toOptionalAttribute(props.labelledby),
+		"aria-describedby": toOptionalAttribute(props.describedby),
+		onKeydown: onRootKeydown
+	}));
+	function setItemOpen(value, open) {
+		if (isDisabled.value) return;
+		const transition = transitionAccordionValue(controllable.value.value, value, open, {
+			multiple: isMultiple.value,
+			collapsible: isCollapsible.value
+		});
+		if (!transition.changed) return;
+		controllable.setValue(transition.modelValue);
+	}
+	function onRootKeydown(event) {
+		const root = event.currentTarget;
+		if (!root) return;
+		const nextTrigger = getFocusNavigationTarget(event, root, {
+			itemSelector: TRIGGER_SELECTOR,
+			collectionSelector: ACCORDION_SELECTOR,
+			orientation: "vertical"
+		});
+		if (!nextTrigger) return;
+		event.preventDefault();
+		nextTrigger.focus();
+	}
+	provide(accordionKey, {
+		get multiple() {
+			return isMultiple.value;
+		},
+		get collapsible() {
+			return isCollapsible.value;
+		},
+		get disabled() {
+			return isDisabled.value;
+		},
+		get unmountOnExit() {
+			return Boolean(props.unmountOnExit);
+		},
+		isItemOpen(value) {
+			return openValues.value.some((itemValue) => itemValue === value);
+		},
+		setItemOpen
+	});
+	return {
+		rootClass,
+		rootProps,
+		openValues,
+		setItemOpen
 	};
 }
 //#endregion
 //#region src/components/accordion/accordion.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-d15589fa>", 1);
+var t0$2 = template("<div data-v-c48cb87a>", 1);
 //#endregion
 //#region src/components/accordion/accordion.vue
 var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -274,7 +232,7 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const { getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(props.disabled)
+			"data-disabled": toPresenceAttribute(props.disabled)
 		}));
 		const n1 = t0$2();
 		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
@@ -282,7 +240,7 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-d15589fa"]]);
+}), [["__scopeId", "data-v-c48cb87a"]]);
 //#endregion
 //#region ~icons/lucide/chevron-down
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m6 9l6 6l6-6\">", 3, 1);
@@ -296,9 +254,9 @@ var chevron_down_default = markRaw(defineVaporComponent({
 //#endregion
 //#region src/components/accordion/accordion-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<button data-v-5b00ef39><span data-v-5b00ef39></span><span data-v-5b00ef39>");
-var t2 = template("<section data-v-5b00ef39><div data-v-5b00ef39 class=rp-accordion-item__inner>");
-var t3 = template("<div data-v-5b00ef39><h3 data-v-5b00ef39 class=rp-accordion-item__heading>", 1);
+var t1 = template("<button data-v-ab630265><span data-v-ab630265></span><span data-v-ab630265>");
+var t2 = template("<section data-v-ab630265><div data-v-ab630265 class=rp-accordion-item__inner>");
+var t3 = template("<div data-v-ab630265><h3 data-v-ab630265 class=rp-accordion-item__heading>", 1);
 //#endregion
 //#region src/components/accordion/accordion-item.vue
 var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -330,13 +288,13 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(internalRootProps.value["data-disabled"])
+			"data-disabled": toPresenceAttribute(internalRootProps.value["data-disabled"])
 		}));
 		const publicTriggerProps = computed(() => ({
 			...internalTriggerProps.value,
 			...getPartAttrs("trigger", { class: internalTriggerProps.value.class }),
 			"data-state": internalRootProps.value["data-state"],
-			"data-disabled": presence(internalRootProps.value["data-disabled"])
+			"data-disabled": toPresenceAttribute(internalRootProps.value["data-disabled"])
 		}));
 		const publicTriggerSlotProps = computed(() => ({
 			...triggerSlotProps.value,
@@ -383,6 +341,16 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		}, { _: 8 }));
 		return n16;
 	}
-}), [["__scopeId", "data-v-5b00ef39"]]);
+}), [["__scopeId", "data-v-ab630265"]]);
+//#endregion
+//#region src/components/accordion/types.ts
+var accordionParts = ["root"];
+var accordionItemParts = [
+	"root",
+	"trigger",
+	"title",
+	"icon",
+	"content"
+];
 //#endregion
-export { accordionItemParts as a, useAccordionItem as i, accordion_default as n, accordionParts as o, useAccordion as r, accordion_item_default as t };
+export { useAccordion as a, accordion_default as i, accordionParts as n, useAccordionItem as o, accordion_item_default as r, accordionItemParts as t };

package/dist/alert.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-alert[data-v-9ae78ff5] {
+.rp-alert[data-v-09abef83] {
     --_rp-alert-bg: var(--rp-color-cyan-light);
     --_rp-alert-fg: var(--rp-color-text);
     --_rp-alert-title-fg: var(--rp-color-cyan-light-color);
@@ -22,25 +22,25 @@
     border-radius: var(--_rp-alert-radius);
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-alert--radius-none[data-v-9ae78ff5] {
+.rp-alert--radius-none[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-none);
 }
-.rp-alert--radius-xs[data-v-9ae78ff5] {
+.rp-alert--radius-xs[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-xs);
 }
-.rp-alert--radius-sm[data-v-9ae78ff5] {
+.rp-alert--radius-sm[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-sm);
 }
-.rp-alert--radius-md[data-v-9ae78ff5] {
+.rp-alert--radius-md[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-md);
 }
-.rp-alert--radius-lg[data-v-9ae78ff5] {
+.rp-alert--radius-lg[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-lg);
 }
-.rp-alert--radius-xl[data-v-9ae78ff5] {
+.rp-alert--radius-xl[data-v-09abef83] {
     --_rp-alert-radius: var(--rp-radius-xl);
 }
-.rp-alert__icon[data-v-9ae78ff5] {
+.rp-alert__icon[data-v-09abef83] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -49,37 +49,37 @@
     color: var(--_rp-alert-icon-fg);
     line-height: 0;
 }
-.rp-alert__icon[data-v-9ae78ff5] >  svg {
+.rp-alert__icon[data-v-09abef83] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-alert__content[data-v-9ae78ff5] {
+.rp-alert__content[data-v-09abef83] {
     display: grid;
     flex: 1 1 auto;
     min-width: 0;
     gap: var(--rp-spacing-1);
 }
-.rp-alert__title[data-v-9ae78ff5] {
+.rp-alert__title[data-v-09abef83] {
     color: var(--_rp-alert-title-fg);
     font-size: var(--rp-font-size-md);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-alert__description[data-v-9ae78ff5] {
+.rp-alert__description[data-v-09abef83] {
     margin: 0;
 }
-.rp-alert__body[data-v-9ae78ff5], .rp-alert__description[data-v-9ae78ff5] {
+.rp-alert__body[data-v-09abef83], .rp-alert__description[data-v-09abef83] {
     min-width: 0;
     color: var(--_rp-alert-fg);
 }
-.rp-alert__action[data-v-9ae78ff5] {
+.rp-alert__action[data-v-09abef83] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     margin-left: auto;
 }
-.rp-alert__close[data-v-9ae78ff5] {
+.rp-alert__close[data-v-09abef83] {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -96,14 +96,14 @@
     cursor: pointer;
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
 }
-.rp-alert__close[data-v-9ae78ff5]:hover {
+.rp-alert__close[data-v-09abef83]:hover {
     background-color: color-mix(in srgb, var(--_rp-alert-icon-fg) 12%, transparent);
 }
-.rp-alert__close[data-v-9ae78ff5]:focus-visible {
+.rp-alert__close[data-v-09abef83]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-alert__close[data-v-9ae78ff5] >  svg {
+.rp-alert__close[data-v-09abef83] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;

package/dist/alert.js

@@ -1,12 +1,12 @@
 import './alert.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as x_default } from "./x.js";
 import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
-import { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
-//#region src/components/alert/useAlertColor.ts
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
+//#region src/components/alert/alertColor.ts
 function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const resolvedVariant = variant ?? "subtle";
@@ -28,13 +28,12 @@ function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 }
 //#endregion
 //#region src/components/alert/alert.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-9ae78ff5>");
+var t0 = template("<div data-v-09abef83>");
 var t1 = template(" ");
-var t2 = template("<p data-v-9ae78ff5> ");
-var t3 = template("<div data-v-9ae78ff5 class=rp-alert__content>");
-var t4 = template("<button data-v-9ae78ff5>");
-var t5 = template("<div data-v-9ae78ff5>", 1);
-delegateEvents("click");
+var t2 = template("<p data-v-09abef83> ");
+var t3 = template("<div data-v-09abef83 class=rp-alert__content>");
+var t4 = template("<button data-v-09abef83>");
+var t5 = template("<div data-v-09abef83>", 1);
 //#endregion
 //#region src/components/alert/alert.vue
 var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -159,13 +158,13 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}]));
 				setInsertionState(n29, null, 0);
 				createComponent(unref(x_default), { "aria-hidden": "true" });
-				n29.$evtclick = createInvoker(closeAlert);
+				on(n29, "click", closeAlert);
 				return n29;
 			});
 			return n30;
 		});
 	}
-}), [["__scopeId", "data-v-9ae78ff5"]]);
+}), [["__scopeId", "data-v-09abef83"]]);
 //#endregion
 //#region src/components/alert/types.ts
 var alertParts = [