ropav 0.0.10 → 0.0.12

package/README.md

@@ -36,3 +36,12 @@ Import the components you need:
 ```ts
 import { Button } from 'ropav';
 ```
+
+## Styling contract
+
+Use typed `classNames` and `styles`, documented state attributes, and variables listed in the packaged styles manifest. DOM nesting, internal selectors and undocumented variables are private implementation details.
+
+See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Layered consumers should declare `reset, ropav.tokens, ropav.components, app`; `ropav/legacy-unlayered.css` is the temporary compatibility import for unlayered resets.
+
+For headless Tooltip, HoverCard and custom menu markup, see the
+[public floating API](./docs/public-floating-api.md).

package/dist/accordion.css

@@ -1,112 +1,116 @@
-.rp-accordion[data-v-c0aaa9d9] {
-  --_rp-accordion-radius: var(--rp-radius-sm);
-  --_rp-accordion-duration: var(--rp-transition-fast);
-  box-sizing: border-box;
-  display: grid;
-  min-width: 0;
-  overflow: hidden;
-  font-family: var(--rp-font-family);
-  color: var(--rp-color-text);
-  background-color: var(--rp-color-default);
-  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
-  border-radius: var(--_rp-accordion-radius);
-}
-.rp-accordion--disabled[data-v-c0aaa9d9] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-accordion--horizontal[data-v-c0aaa9d9] {
-  display: flex;
-  align-items: stretch;
-}.rp-accordion-item[data-v-8528e537] {
-  --_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-8528e537]:first-child {
-  border-top: 0;
-}
-.rp-accordion-item--horizontal[data-v-8528e537] {
-  flex: 1 1 0;
-  border-top: 0;
-  border-left: var(--rp-border-width-thin) solid var(--rp-color-default-border);
-}
-.rp-accordion-item--horizontal[data-v-8528e537]:first-child {
-  border-left: 0;
-}
-.rp-accordion-item--disabled[data-v-8528e537] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-accordion-item__heading[data-v-8528e537] {
-  margin: 0;
-  font: inherit;
-}
-.rp-accordion-item__trigger[data-v-8528e537] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--rp-size-control-lg);
-  gap: var(--rp-spacing-3);
-  padding: var(--rp-spacing-3) var(--rp-spacing-4);
-  color: var(--rp-color-text);
-  font-family: var(--rp-font-family);
-  font-size: var(--rp-font-size-md);
-  font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-xs);
-  text-align: left;
-  appearance: none;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  transition: background-color var(--_rp-accordion-duration), color var(--_rp-accordion-duration);
-}
-.rp-accordion-item__trigger[data-v-8528e537]:hover:not(:disabled) {
-  background-color: var(--rp-color-default-hover);
-}
-.rp-accordion-item__trigger[data-v-8528e537]: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-8528e537]:disabled {
-  cursor: default;
-}
-.rp-accordion-item__title[data-v-8528e537] {
-  min-width: 0;
-}
-.rp-accordion-item__icon[data-v-8528e537] {
-  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-8528e537] {
-  transform: rotate(180deg);
-}
-.rp-accordion-item__content[data-v-8528e537] {
-  box-sizing: border-box;
-  display: grid;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0 var(--rp-spacing-4) var(--rp-spacing-4);
-  color: var(--rp-color-text);
-  font-size: var(--rp-font-size-md);
-  line-height: var(--rp-line-height-md);
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
-}
-.rp-accordion-item__inner[data-v-8528e537] {
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
-.rp-accordion-content-enter-from[data-v-8528e537],
-.rp-accordion-content-leave-to[data-v-8528e537] {
-  opacity: 0;
-  grid-template-rows: 0fr;
-  padding-bottom: 0;
+@layer ropav.components {
+.rp-accordion[data-v-e732f2da] {
+    --_rp-accordion-radius: var(--rp-radius-sm);
+    --_rp-accordion-duration: var(--rp-transition-fast);
+    box-sizing: border-box;
+    display: grid;
+    min-width: 0;
+    overflow: hidden;
+    font-family: var(--rp-font-family);
+    color: var(--rp-color-text);
+    background-color: var(--rp-color-default);
+    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
+    border-radius: var(--_rp-accordion-radius);
+}
+.rp-accordion--disabled[data-v-e732f2da] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-accordion--horizontal[data-v-e732f2da] {
+    display: flex;
+    align-items: stretch;
+}
+}@layer ropav.components {
+.rp-accordion-item[data-v-5b00ef39] {
+    --_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 {
+    border-top: 0;
+}
+.rp-accordion-item--horizontal[data-v-5b00ef39] {
+    flex: 1 1 0;
+    border-top: 0;
+    border-left: var(--rp-border-width-thin) solid var(--rp-color-default-border);
+}
+.rp-accordion-item--horizontal[data-v-5b00ef39]:first-child {
+    border-left: 0;
+}
+.rp-accordion-item--disabled[data-v-5b00ef39] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-accordion-item__heading[data-v-5b00ef39] {
+    margin: 0;
+    font: inherit;
+}
+.rp-accordion-item__trigger[data-v-5b00ef39] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--rp-size-control-lg);
+    gap: var(--rp-spacing-3);
+    padding: var(--rp-spacing-3) var(--rp-spacing-4);
+    color: var(--rp-color-text);
+    font-family: var(--rp-font-family);
+    font-size: var(--rp-font-size-md);
+    font-weight: var(--rp-font-weight-medium);
+    line-height: var(--rp-line-height-xs);
+    text-align: left;
+    appearance: none;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    transition: background-color var(--_rp-accordion-duration), color var(--_rp-accordion-duration);
+}
+.rp-accordion-item__trigger[data-v-5b00ef39]:hover:not(:disabled) {
+    background-color: var(--rp-color-default-hover);
+}
+.rp-accordion-item__trigger[data-v-5b00ef39]: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 {
+    cursor: default;
+}
+.rp-accordion-item__title[data-v-5b00ef39] {
+    min-width: 0;
+}
+.rp-accordion-item__icon[data-v-5b00ef39] {
+    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] {
+    transform: rotate(180deg);
+}
+.rp-accordion-item__content[data-v-5b00ef39] {
+    box-sizing: border-box;
+    display: grid;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 var(--rp-spacing-4) var(--rp-spacing-4);
+    color: var(--rp-color-text);
+    font-size: var(--rp-font-size-md);
+    line-height: var(--rp-line-height-md);
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
+}
+.rp-accordion-item__inner[data-v-5b00ef39] {
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+.rp-accordion-content-enter-from[data-v-5b00ef39],
+  .rp-accordion-content-leave-to[data-v-5b00ef39] {
+    opacity: 0;
+    grid-template-rows: 0fr;
+    padding-bottom: 0;
+}
 }

package/dist/accordion.js

@@ -1,10 +1,19 @@
 import './accordion.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as useCollapse } from "./useCollapse.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, provide, ref, 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"
+];
 var accordionKey = Symbol("accordion");
 //#endregion
 //#region src/components/accordion/useAccordion.ts
@@ -232,11 +241,12 @@ function useAccordionItem(props) {
 }
 //#endregion
 //#region src/components/accordion/accordion.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-c0aaa9d9>", 1);
+var t0$2 = template("<div data-v-e732f2da>", 1);
 //#endregion
 //#region src/components/accordion/accordion.vue
 var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpAccordion",
+	inheritAttrs: false,
 	__name: "accordion",
 	props: {
 		id: {},
@@ -261,22 +271,29 @@ var accordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		orientation: { default: "vertical" },
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootProps } = useAccordion(props, (value) => {
+		const { rootProps: internalRootProps } = useAccordion(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(props.disabled)
+		}));
 		const n1 = t0$2();
-		renderEffect(() => setDynamicProps(n1, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-c0aaa9d9"]]);
+}), [["__scopeId", "data-v-e732f2da"]]);
 //#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);
@@ -290,13 +307,14 @@ 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-8528e537><span data-v-8528e537 class=rp-accordion-item__title></span><span data-v-8528e537 class=rp-accordion-item__icon aria-hidden=true>");
-var t2 = template("<section data-v-8528e537><div data-v-8528e537 class=rp-accordion-item__inner>");
-var t3 = template("<div data-v-8528e537><h3 data-v-8528e537 class=rp-accordion-item__heading>", 1);
+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);
 //#endregion
 //#region src/components/accordion/accordion-item.vue
 var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpAccordionItem",
+	inheritAttrs: false,
 	__name: "accordion-item",
 	props: {
 		id: {},
@@ -313,25 +331,51 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		role: { default: "region" },
 		ariaLabel: {},
 		ariaDescribedby: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { rootProps, triggerProps, contentProps, triggerSlotProps, contentSlotProps, isOpen, shouldRenderContent } = useAccordionItem(__props);
+		const props = __props;
+		const { rootProps: internalRootProps, triggerProps: internalTriggerProps, contentProps, triggerSlotProps, contentSlotProps, isOpen, shouldRenderContent } = useAccordionItem(props);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(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"])
+		}));
+		const publicTriggerSlotProps = computed(() => ({
+			...triggerSlotProps.value,
+			triggerProps: publicTriggerProps.value
+		}));
+		const publicContentProps = computed(() => ({
+			...contentProps.value,
+			...getPartAttrs("content", { class: contentProps.value.class })
+		}));
 		const n16 = t3();
 		const n9 = child(n16);
-		renderEffect(() => setDynamicProps(n16, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n16, [rootAttrs.value]));
 		setInsertionState(n9, null, 0);
-		createSlot("trigger", { $: [() => unref(triggerSlotProps)] }, () => {
+		createSlot("trigger", { $: [() => publicTriggerSlotProps.value] }, () => {
 			const n8 = t1();
 			const n5 = child(n8);
 			const n7 = next(n5, 1);
-			renderEffect(() => setDynamicProps(n8, [unref(triggerProps)]));
+			renderEffect(() => {
+				setDynamicProps(n8, [publicTriggerProps.value]);
+				setDynamicProps(n5, [unref(getPartAttrs)("title", { class: "rp-accordion-item__title" })]);
+			});
 			setInsertionState(n5, null, 0);
 			createSlot("title", null, () => {
 				const n4 = t0();
 				renderEffect(() => setText(n4, toDisplayString(__props.title)));
 				return n4;
 			}, 1);
+			renderEffect(() => setDynamicProps(n7, [unref(getPartAttrs)("icon", { class: "rp-accordion-item__icon" }), { "aria-hidden": "true" }]));
 			setInsertionState(n7, null, 0);
 			createComponent(unref(chevron_down_default));
 			return n8;
@@ -344,7 +388,7 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return createIf(() => unref(shouldRenderContent), () => {
 				const n14 = t2();
 				const n13 = child(n14);
-				renderEffect(() => setDynamicProps(n14, [unref(contentProps)]));
+				renderEffect(() => setDynamicProps(n14, [publicContentProps.value]));
 				setInsertionState(n13, null, 0);
 				createSlot("default", { $: [() => unref(contentSlotProps)] }, null, 1);
 				applyVShow(n14, () => unref(isOpen));
@@ -353,6 +397,6 @@ var accordion_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		}, { _: 8 }));
 		return n16;
 	}
-}), [["__scopeId", "data-v-8528e537"]]);
+}), [["__scopeId", "data-v-5b00ef39"]]);
 //#endregion
-export { useAccordionItem as i, accordion_default as n, useAccordion as r, accordion_item_default as t };
+export { accordionItemParts as a, useAccordionItem as i, accordion_default as n, accordionParts as o, useAccordion as r, accordion_item_default as t };

package/dist/alert.css

@@ -1,109 +1,111 @@
-.rp-alert[data-v-97a5ebfe] {
-  --_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);
-  --_rp-alert-icon-fg: var(--rp-color-cyan-light-color);
-  --_rp-alert-border: transparent;
-  --_rp-alert-radius: var(--rp-radius-sm);
-  box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  min-width: 0;
-  padding: var(--rp-spacing-4);
-  gap: var(--rp-spacing-3);
-  color: var(--_rp-alert-fg);
-  font-family: var(--rp-font-family);
-  font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-md);
-  background-color: var(--_rp-alert-bg);
-  border: var(--rp-border-width-thin) solid var(--_rp-alert-border);
-  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-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-none);
-}
-.rp-alert--radius-xs[data-v-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-xs);
-}
-.rp-alert--radius-sm[data-v-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-sm);
-}
-.rp-alert--radius-md[data-v-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-md);
-}
-.rp-alert--radius-lg[data-v-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-lg);
-}
-.rp-alert--radius-xl[data-v-97a5ebfe] {
-  --_rp-alert-radius: var(--rp-radius-xl);
-}
-.rp-alert__icon[data-v-97a5ebfe] {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  margin-top: 0.125rem;
-  color: var(--_rp-alert-icon-fg);
-  line-height: 0;
-}
-.rp-alert__icon[data-v-97a5ebfe] >  svg {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-}
-.rp-alert__content[data-v-97a5ebfe] {
-  display: grid;
-  flex: 1 1 auto;
-  min-width: 0;
-  gap: var(--rp-spacing-1);
-}
-.rp-alert__title[data-v-97a5ebfe] {
-  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-97a5ebfe] {
-  margin: 0;
-}
-.rp-alert__body[data-v-97a5ebfe], .rp-alert__description[data-v-97a5ebfe] {
-  min-width: 0;
-  color: var(--_rp-alert-fg);
-}
-.rp-alert__action[data-v-97a5ebfe] {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  margin-left: auto;
-}
-.rp-alert__close[data-v-97a5ebfe] {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  margin: calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) 0;
-  padding: 0;
-  color: var(--_rp-alert-icon-fg);
-  background: transparent;
-  border: 0;
-  border-radius: var(--rp-radius-sm);
-  cursor: pointer;
-  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
-}
-.rp-alert__close[data-v-97a5ebfe]:hover {
-  background-color: color-mix(in srgb, var(--_rp-alert-icon-fg) 12%, transparent);
-}
-.rp-alert__close[data-v-97a5ebfe]:focus-visible {
-  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
-  outline-offset: 2px;
-}
-.rp-alert__close[data-v-97a5ebfe] >  svg {
-  display: block;
-  width: 1rem;
-  height: 1rem;
+@layer ropav.components {
+.rp-alert[data-v-8e95a4b4] {
+    --_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);
+    --_rp-alert-icon-fg: var(--rp-color-cyan-light-color);
+    --_rp-alert-border: transparent;
+    --_rp-alert-radius: var(--rp-radius-sm);
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0;
+    padding: var(--rp-spacing-4);
+    gap: var(--rp-spacing-3);
+    color: var(--_rp-alert-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--rp-font-size-sm);
+    line-height: var(--rp-line-height-md);
+    background-color: var(--_rp-alert-bg);
+    border: var(--rp-border-width-thin) solid var(--_rp-alert-border);
+    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-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-none);
+}
+.rp-alert--radius-xs[data-v-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-xs);
+}
+.rp-alert--radius-sm[data-v-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-sm);
+}
+.rp-alert--radius-md[data-v-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-md);
+}
+.rp-alert--radius-lg[data-v-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-lg);
+}
+.rp-alert--radius-xl[data-v-8e95a4b4] {
+    --_rp-alert-radius: var(--rp-radius-xl);
+}
+.rp-alert__icon[data-v-8e95a4b4] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.125rem;
+    color: var(--_rp-alert-icon-fg);
+    line-height: 0;
+}
+.rp-alert__icon[data-v-8e95a4b4] >  svg {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+}
+.rp-alert__content[data-v-8e95a4b4] {
+    display: grid;
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: var(--rp-spacing-1);
+}
+.rp-alert__title[data-v-8e95a4b4] {
+    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-8e95a4b4] {
+    margin: 0;
+}
+.rp-alert__body[data-v-8e95a4b4], .rp-alert__description[data-v-8e95a4b4] {
+    min-width: 0;
+    color: var(--_rp-alert-fg);
+}
+.rp-alert__action[data-v-8e95a4b4] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-left: auto;
+}
+.rp-alert__close[data-v-8e95a4b4] {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    margin: calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) 0;
+    padding: 0;
+    color: var(--_rp-alert-icon-fg);
+    background: transparent;
+    border: 0;
+    border-radius: var(--rp-radius-sm);
+    cursor: pointer;
+    transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+}
+.rp-alert__close[data-v-8e95a4b4]:hover {
+    background-color: color-mix(in srgb, var(--_rp-alert-icon-fg) 12%, transparent);
+}
+.rp-alert__close[data-v-8e95a4b4]:focus-visible {
+    outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+    outline-offset: 2px;
+}
+.rp-alert__close[data-v-8e95a4b4] >  svg {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+}
 }