@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/README.md

@@ -11,22 +11,34 @@ A Vue component library and design system for rotki
 
 ### Installing the library
 
-You can start using the library after installing it from npm along with the roboto font:
+You can start using the library after installing it from npm along with the Inter and Geist Mono fonts:
 
 ```bash
-pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto
+pnpm install -D --save-exact @rotki/ui-library @fontsource-variable/inter @fontsource-variable/geist-mono
 ```
 
 ### Importing the stylesheets
 
-Don't forget to import the `style.css` file from `@rotki/ui-library` along with the latin roboto font,
-in the project root (e.g main.ts)
+With Tailwind CSS 4 in the app, import the library into your Tailwind entry (see
+[Use the @rotki/ui-library Tailwind CSS theme](#use-the-rotkiui-library-tailwind-css-theme)) and the fonts in
+the project root (e.g. main.ts):
 
 ```typescript
-import '@rotki/ui-library/dist/style.css';
-import '@fontsource/roboto/latin.css';
+import '@fontsource-variable/inter/opsz.css';
+import '@fontsource-variable/geist-mono';
 ```
 
+Without Tailwind, import the prebuilt stylesheet as well:
+
+```typescript
+import '@rotki/ui-library/style.css';
+```
+
+The library names the fonts but does not ship them. Inter's `opsz.css` adds the optical size axis, so large
+headings get the display cut; `@fontsource-variable/inter` alone is about a third smaller. The static
+`@fontsource/inter` and `@fontsource/geist-mono` builds work too. Self-host the fonts rather than loading
+them from a CDN, so an offline app still renders them.
+
 ### Using the plugin
 
 To use the library you must install the library plugin:
@@ -244,19 +256,28 @@ export const RUI_I18N_KEYS = {
 } as const;
 ```
 
-### Use @rotki/ui-library tailwindcss theme
+### Use the @rotki/ui-library Tailwind CSS theme
 
-You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow.
+The library is built for Tailwind CSS 4. Import it right after Tailwind in your CSS entry:
 
-```javascript
-// tailwind.config.js
-
-module.exports = {
-  // ... your tailwind configs,
-  plugins: [require('@rotki/ui-library/theme')],
-};
+```css
+/* main.css */
+@import 'tailwindcss';
+@import '@rotki/ui-library/tailwind.css';
 ```
 
+That is the whole setup: there is no `style.css` to import. `tailwind.css` brings the theme, the color
+values and the library's variants and utilities, and points your Tailwind build at the library's components,
+so your build generates the classes they use, once, next to your own. A class you pass to a component then
+competes with the component's own classes as any two Tailwind classes do, whatever order your stylesheets
+load in.
+
+`@rotki/ui-library/style.css` is the same library prebuilt with Tailwind itself, for an app without its own
+Tailwind build. Don't import it alongside `tailwind.css`: everything would ship twice, and the prebuilt
+classes would override your responsive ones (`lg:grid-cols-3`) by loading later.
+
+The theme gives you the `rui-*` colors (`bg-rui-primary`, `text-rui-text-secondary`), the semantic surfaces and lines (`bg-rui-surface`, `border-rui-divider`, `border-rui-outline`), the role radii (`rounded-rui-control`, `rounded-rui-card`), the role shadows (`shadow-rui-menu`, `shadow-rui-drawer`, `shadow-rui-tooltip`, `shadow-rui-control`), the typography classes (`text-body-1`, `text-h6`) and a `dark:` variant that follows the theme `useRotkiTheme` sets. The tokens are CSS variables, so `--radius-rui-control` and the other role tokens can be retuned in your own CSS.
+
 ## Development
 
 ### Installation

package/dist/components/accordions/accordion/RuiAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.js","names":[],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAccordion.js","names":[],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/accordions/accordion/RuiAccordion.vue.d.ts

@@ -9,10 +9,6 @@ export interface AccordionProps {
     eager?: boolean;
     headerGrow?: boolean;
     classNames?: RuiAccordionClassNames;
-    /** @deprecated Use `classNames.header` instead */
-    headerClass?: string;
-    /** @deprecated Use `classNames.content` instead */
-    contentClass?: string;
 }
 type __VLS_Slots = {
     header?: (props: {

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useTemplateRef } from "vue";
-import { useElementSize } from "@vueuse/core";
-import { get as get$1 } from "@vueuse/shared";
 //#region src/components/accordions/accordion/RuiAccordion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-state"];
 var _hoisted_2 = [
@@ -28,9 +28,7 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			type: Boolean,
 			default: false
 		},
-		classNames: {},
-		headerClass: { default: "" },
-		contentClass: { default: "" }
+		classNames: {}
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
@@ -39,7 +37,7 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const triggerId = useId();
 		const contentId = useId();
 		const { height: innerHeight } = useElementSize(inner);
-		const contentHeight = computed(() => __props.open ? `${get$1(innerHeight)}px` : "0px");
+		const contentHeight = computed(() => __props.open ? `${get(innerHeight)}px` : "0px");
 		function toggle() {
 			emit("click");
 		}
@@ -61,7 +59,7 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			}), [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: unref(triggerId),
-				class: normalizeClass(["flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded", [__props.classNames?.header ?? __props.headerClass, { "w-full": __props.headerGrow }]]),
+				class: normalizeClass(["group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control", [__props.classNames?.header, { "w-full": __props.headerGrow }]]),
 				role: "button",
 				tabindex: "0",
 				"aria-expanded": __props.open,
@@ -70,12 +68,13 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
 				onKeydown: _cache[1] || (_cache[1] = ($event) => onKeydown($event))
 			}, [createElementVNode("div", { class: normalizeClass({ grow: __props.headerGrow }) }, [renderSlot(_ctx.$slots, "header", { open: __props.open })], 2), createVNode(RuiIcon_default, {
-				class: normalizeClass(["text-rui-text-secondary transition-transform", { "-rotate-180": __props.open }]),
-				name: "lu-chevron-down"
+				class: normalizeClass(["shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none", { "-rotate-180": __props.open }]),
+				name: "lu-chevron-down",
+				size: 16
 			}, null, 8, ["class"])], 42, _hoisted_2)) : createCommentVNode("", true), __props.open || __props.eager ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				id: unref(contentId),
-				class: normalizeClass(["grow transition-all overflow-hidden w-full", __props.classNames?.content ?? __props.contentClass]),
+				class: normalizeClass(["grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none", __props.classNames?.content]),
 				style: normalizeStyle({ height: unref(contentHeight) }),
 				role: "region",
 				"aria-labelledby": unref(triggerId),

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,WAAW,EAAE,MAAM,KAAM;EAErF,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAA,UAAA,GAAA,mBA6CM,OA7CN,WA6CM;IA5CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAG7BC,KAAAA,OAAO,UADf,UAAA,GAAA,mBAwBM,OAAA;;IAtBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,+FAA6F,CAC1F,QAAA,YAAY,UAAU,QAAA,aAAW,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IAClE,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1B,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAIE,iBAAA;IAHA,OAAK,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;GAID,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhB,UAAA,GAAA,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,8CACE,QAAA,YAAY,WAAW,QAAA,YAAY,CAAA;IAC1C,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;GAEA,GAAA,CAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAA,UAAA,GAAA,mBA+CM,OA/CN,WA+CM;IA9CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADf,UAAA,GAAA,mBAyBM,OAAA;;IAvBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1B,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAKE,iBAAA;IAJA,OAAK,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhB,UAAA,GAAA,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,uGACE,QAAA,YAAY,OAAO,CAAA;IAC1B,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;GAEA,GAAA,CAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/accordions/accordions/RuiAccordions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordions.js","names":[],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\nconst children = computed<VNode[]>(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAccordions.js","names":[],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Fragment, isVNode } from 'vue';\n\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\n\n/**\n * Unwraps the Fragments a `v-for` or `<template>` makes, so each accordion gets its own index.\n * The placeholder a false `v-if` leaves keeps its index, so hiding one does not renumber the rest.\n *\n * @param nodes - the slot's top-level vnodes\n * @returns the accordions in order\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children))\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nconst children = computed<VNode[]>(() => {\n  const accordions = flattenSlotContent(slots.default?.() ?? []);\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, mergeModels, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, watch } from "vue";
-import { get, set } from "@vueuse/shared";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, isVNode, mergeModels, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, watch } from "vue";
 //#region src/components/accordions/accordions/RuiAccordions.vue?vue&type=script&setup=true&lang.ts
 var RuiAccordions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiAccordions",
@@ -17,8 +17,21 @@ var RuiAccordions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const modelValue = useModel(__props, "modelValue");
 		const internalValue = ref();
 		const slots = useSlots();
+		/**
+		* Unwraps the Fragments a `v-for` or `<template>` makes, so each accordion gets its own index.
+		* The placeholder a false `v-if` leaves keeps its index, so hiding one does not renumber the rest.
+		*
+		* @param nodes - the slot's top-level vnodes
+		* @returns the accordions in order
+		*/
+		function flattenSlotContent(nodes) {
+			return nodes.flatMap((node) => {
+				if (node.type === Fragment && Array.isArray(node.children)) return flattenSlotContent(node.children.filter(isVNode));
+				return [node];
+			});
+		}
 		const children = computed(() => {
-			const accordions = slots.default?.() ?? [];
+			const accordions = flattenSlotContent(slots.default?.() ?? []);
 			const currentValue = get(internalValue);
 			return accordions.map((accordion, index) => {
 				const open = __props.multiple && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;

package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordions.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\nconst children = computed<VNode[]>(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,aAAa,SAA8B,SAAA,YAAgB;EAIjE,MAAM,gBAAgB,IAAuB;EAE7C,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAW,eAAwB;GACvC,MAAM,aAAa,MAAM,UAAU,KAAK,CAAC;GACzC,MAAM,eAAe,IAAI,aAAa;GAEtC,OAAO,WAAW,KAAK,WAAW,UAAU;IAC1C,MAAM,OACJ,QAAA,YAAY,MAAM,QAAQ,YAAY,IAClC,aAAa,SAAS,KAAK,IAC3B,iBAAiB;IAEvB,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,UAAU;KACf;IACF;GACF,CAAC;EACH,CAAC;EAED,SAAS,YAAY,eAA6B;GAChD,IAAI;GACJ,MAAM,WAAW,IAAI,aAAa;GAClC,IAAI,QAAA,YAAY,MAAM,QAAQ,QAAQ,GAAG;IACvC,MAAM,OAAO,CAAC,GAAG,QAAQ;IACzB,MAAM,QAAQ,KAAK,QAAQ,aAAa;IACxC,IAAI,UAAU,IACZ,KAAK,KAAK,aAAa;SACpB,KAAK,OAAO,OAAO,CAAC;IACzB,WAAW;GACb,OAEE,IAAI,aAAa,eACf,WAAW;QACR,WAAW;GAElB,IAAI,YAAY,QAAQ;GACxB,IAAI,eAAe,QAAQ;EAC7B;EAEA,MACE,CAAC,kBAAkB,QAAA,QAAQ,IAC1B,CAAC,OAAO,gBAAgB;GACvB,IAAI,WAA8B;GAClC,IAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ,GACvC,WAAW,aAAa,KAAK,CAAC,IAAI,CAAC,QAAQ;QACxC,IAAI,CAAC,cAAc,MAAM,QAAQ,QAAQ,GAC5C,WAAW,SAAS,MAAM;GAE5B,IAAI,eAAe,QAAQ;EAC7B,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAA,UAAA,GAAA,mBAOM,OAAA,eAAA,mBAPOA,KAAAA,MAAM,CAAA,GAAA,EACjB,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,UAAK,WAAE,YAAY,CAAC"}
+{"version":3,"file":"RuiAccordions.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Fragment, isVNode } from 'vue';\n\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\n\n/**\n * Unwraps the Fragments a `v-for` or `<template>` makes, so each accordion gets its own index.\n * The placeholder a false `v-if` leaves keeps its index, so hiding one does not renumber the rest.\n *\n * @param nodes - the slot's top-level vnodes\n * @returns the accordions in order\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children))\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nconst children = computed<VNode[]>(() => {\n  const accordions = flattenSlotContent(slots.default?.() ?? []);\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAYA,MAAM,aAAa,SAA8B,SAAA,YAAgB;EAIjE,MAAM,gBAAgB,IAAuB;EAE7C,MAAM,QAAQ,SAAS;;;;;;;;EASvB,SAAS,mBAAmB,OAAyB;GACnD,OAAO,MAAM,SAAS,SAAS;IAC7B,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACvD,OAAO,mBAAmB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEzD,OAAO,CAAC,IAAI;GACd,CAAC;EACH;EAEA,MAAM,WAAW,eAAwB;GACvC,MAAM,aAAa,mBAAmB,MAAM,UAAU,KAAK,CAAC,CAAC;GAC7D,MAAM,eAAe,IAAI,aAAa;GAEtC,OAAO,WAAW,KAAK,WAAW,UAAU;IAC1C,MAAM,OACJ,QAAA,YAAY,MAAM,QAAQ,YAAY,IAClC,aAAa,SAAS,KAAK,IAC3B,iBAAiB;IAEvB,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,UAAU;KACf;IACF;GACF,CAAC;EACH,CAAC;EAED,SAAS,YAAY,eAA6B;GAChD,IAAI;GACJ,MAAM,WAAW,IAAI,aAAa;GAClC,IAAI,QAAA,YAAY,MAAM,QAAQ,QAAQ,GAAG;IACvC,MAAM,OAAO,CAAC,GAAG,QAAQ;IACzB,MAAM,QAAQ,KAAK,QAAQ,aAAa;IACxC,IAAI,UAAU,IACZ,KAAK,KAAK,aAAa;SACpB,KAAK,OAAO,OAAO,CAAC;IACzB,WAAW;GACb,OAEE,IAAI,aAAa,eACf,WAAW;QACR,WAAW;GAElB,IAAI,YAAY,QAAQ;GACxB,IAAI,eAAe,QAAQ;EAC7B;EAEA,MACE,CAAC,kBAAkB,QAAA,QAAQ,IAC1B,CAAC,OAAO,gBAAgB;GACvB,IAAI,WAA8B;GAClC,IAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ,GACvC,WAAW,aAAa,KAAK,CAAC,IAAI,CAAC,QAAQ;QACxC,IAAI,CAAC,cAAc,MAAM,QAAQ,QAAQ,GAC5C,WAAW,SAAS,MAAM;GAE5B,IAAI,eAAe,QAAQ;EAC7B,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAA,UAAA,GAAA,mBAOM,OAAA,eAAA,mBAPOA,KAAAA,MAAM,CAAA,GAAA,EACjB,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,UAAK,WAAE,YAAY,CAAC"}

package/dist/components/alerts/RuiAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAlert.js","names":[],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\ndefineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded flex space-x-4',\n    content: 'flex space-x-3 py-1 flex-grow',\n    icon: '',\n    texts: 'space-y-1 flex-grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    variant: {\n      default: {},\n      filled: {\n        icon: '!text-rui-dark-text',\n        texts: '!text-rui-dark-text',\n        action: '!text-rui-dark-text',\n        close: '!text-rui-dark-text',\n      },\n      outlined: { root: 'border m-[-1px] bg-white dark:bg-black' },\n    },\n    type: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Default variant backgrounds\n    {\n      variant: 'default',\n      type: 'primary',\n      class: { root: 'bg-rui-primary bg-tint-[.9] color-mix-supported:bg-rui-primary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-primary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'secondary',\n      class: { root: 'bg-rui-secondary bg-tint-[.9] color-mix-supported:bg-rui-secondary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-secondary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'error',\n      class: { root: 'bg-rui-error bg-tint-[.9] color-mix-supported:bg-rui-error-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-error-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'warning',\n      class: { root: 'bg-rui-warning bg-tint-[.9] color-mix-supported:bg-rui-warning-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-warning-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'info',\n      class: { root: 'bg-rui-info bg-tint-[.9] color-mix-supported:bg-rui-info-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-info-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'success',\n      class: { root: 'bg-rui-success bg-tint-[.9] color-mix-supported:bg-rui-success-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-success-shade/[.9]' },\n    },\n\n    // Filled variant backgrounds\n    { variant: 'filled', type: 'primary', class: { root: 'bg-rui-primary' } },\n    { variant: 'filled', type: 'secondary', class: { root: 'bg-rui-secondary' } },\n    { variant: 'filled', type: 'error', class: { root: 'bg-rui-error' } },\n    { variant: 'filled', type: 'warning', class: { root: 'bg-rui-warning' } },\n    { variant: 'filled', type: 'info', class: { root: 'bg-rui-info' } },\n    { variant: 'filled', type: 'success', class: { root: 'bg-rui-success' } },\n\n    // Filled dark text override for warning/success/info\n    {\n      variant: 'filled',\n      type: ['warning', 'success', 'info'],\n      class: { root: 'dark:!text-rui-light-text' },\n    },\n\n    // Outlined variant borders\n    { variant: 'outlined', type: 'primary', class: { root: 'border-rui-primary' } },\n    { variant: 'outlined', type: 'secondary', class: { root: 'border-rui-secondary' } },\n    { variant: 'outlined', type: 'error', class: { root: 'border-rui-error' } },\n    { variant: 'outlined', type: 'warning', class: { root: 'border-rui-warning' } },\n    { variant: 'outlined', type: 'info', class: { root: 'border-rui-info' } },\n    { variant: 'outlined', type: 'success', class: { root: 'border-rui-success' } },\n\n  ],\n  compoundSlots: [\n    // Content text colors for default + outlined (shared across all content slots)\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'primary',\n      class: 'text-rui-primary text-shade-[.6] color-mix-supported:text-rui-primary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-primary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'secondary',\n      class: 'text-rui-secondary text-shade-[.6] color-mix-supported:text-rui-secondary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-secondary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'error',\n      class: 'text-rui-error text-shade-[.6] color-mix-supported:text-rui-error-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-error-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'warning',\n      class: 'text-rui-warning text-shade-[.6] color-mix-supported:text-rui-warning-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-warning-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'info',\n      class: 'text-rui-info text-shade-[.6] color-mix-supported:text-rui-info-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-info-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'success',\n      class: 'text-rui-success text-shade-[.6] color-mix-supported:text-rui-success-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-success-tint/[.6]',\n    },\n\n    // Icon-only dark mode base color\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'primary', class: 'dark:text-rui-primary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'secondary', class: 'dark:text-rui-secondary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'error', class: 'dark:text-rui-error' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'warning', class: 'dark:text-rui-warning' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'info', class: 'dark:text-rui-info' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'success', class: 'dark:text-rui-success' },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"22\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAlert.js","names":[],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. The tints\n     * and shades used to be paused CSS animations behind an `@supports (color-mix())` check that\n     * never matched (it is not a valid condition), so every browser took the animation; mixing\n     * directly gives the same colors without it.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/alerts/RuiAlert.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-variant", "data-type"];
 var _hoisted_2 = {
@@ -29,244 +29,75 @@ var RuiAlert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	emits: ["action", "close"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const slots = useSlots();
 		const alertStyles = tv({
 			slots: {
-				root: "px-4 py-2.5 rounded flex space-x-4",
-				content: "flex space-x-3 py-1 flex-grow",
-				icon: "",
-				texts: "space-y-1 flex-grow",
+				root: "px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0",
+				content: "flex between:ml-3 between:mr-0 py-1 grow",
+				icon: "flex shrink-0 items-center",
+				texts: "between:mt-1 between:mb-0 grow",
 				action: "",
 				close: ""
 			},
 			variants: {
+				titled: {
+					true: { icon: "h-6" },
+					false: { icon: "h-5" }
+				},
 				variant: {
 					default: {},
 					filled: {
-						icon: "!text-rui-dark-text",
-						texts: "!text-rui-dark-text",
-						action: "!text-rui-dark-text",
-						close: "!text-rui-dark-text"
+						icon: "text-rui-dark-text!",
+						texts: "text-rui-dark-text!",
+						action: "text-rui-dark-text!",
+						close: "text-rui-dark-text!"
 					},
-					outlined: { root: "border m-[-1px] bg-white dark:bg-black" }
+					outlined: { root: "border -m-px bg-transparent" }
 				},
 				type: {
-					primary: {},
-					secondary: {},
-					error: {},
-					warning: {},
-					info: {},
-					success: {}
+					primary: { root: "[--rui-alert:var(--rui-primary-main)]" },
+					secondary: { root: "[--rui-alert:var(--rui-secondary-main)]" },
+					error: { root: "[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]" },
+					warning: { root: "[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]" },
+					info: { root: "[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]" },
+					success: { root: "[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]" }
 				}
 			},
 			compoundVariants: [
 				{
 					variant: "default",
-					type: "primary",
-					class: { root: "bg-rui-primary bg-tint-[.9] color-mix-supported:bg-rui-primary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-primary-shade/[.9]" }
-				},
-				{
-					variant: "default",
-					type: "secondary",
-					class: { root: "bg-rui-secondary bg-tint-[.9] color-mix-supported:bg-rui-secondary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-secondary-shade/[.9]" }
-				},
-				{
-					variant: "default",
-					type: "error",
-					class: { root: "bg-rui-error bg-tint-[.9] color-mix-supported:bg-rui-error-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-error-shade/[.9]" }
-				},
-				{
-					variant: "default",
-					type: "warning",
-					class: { root: "bg-rui-warning bg-tint-[.9] color-mix-supported:bg-rui-warning-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-warning-shade/[.9]" }
-				},
-				{
-					variant: "default",
-					type: "info",
-					class: { root: "bg-rui-info bg-tint-[.9] color-mix-supported:bg-rui-info-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-info-shade/[.9]" }
-				},
-				{
-					variant: "default",
-					type: "success",
-					class: { root: "bg-rui-success bg-tint-[.9] color-mix-supported:bg-rui-success-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-success-shade/[.9]" }
-				},
-				{
-					variant: "filled",
-					type: "primary",
-					class: { root: "bg-rui-primary" }
+					class: { root: "border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]" }
 				},
 				{
 					variant: "filled",
-					type: "secondary",
-					class: { root: "bg-rui-secondary" }
-				},
-				{
-					variant: "filled",
-					type: "error",
-					class: { root: "bg-rui-error" }
-				},
-				{
-					variant: "filled",
-					type: "warning",
-					class: { root: "bg-rui-warning" }
-				},
-				{
-					variant: "filled",
-					type: "info",
-					class: { root: "bg-rui-info" }
-				},
-				{
-					variant: "filled",
-					type: "success",
-					class: { root: "bg-rui-success" }
-				},
-				{
-					variant: "filled",
-					type: [
-						"warning",
-						"success",
-						"info"
-					],
-					class: { root: "dark:!text-rui-light-text" }
-				},
-				{
-					variant: "outlined",
-					type: "primary",
-					class: { root: "border-rui-primary" }
+					class: { root: "bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]" }
 				},
 				{
 					variant: "outlined",
-					type: "secondary",
-					class: { root: "border-rui-secondary" }
-				},
-				{
-					variant: "outlined",
-					type: "error",
-					class: { root: "border-rui-error" }
-				},
-				{
-					variant: "outlined",
-					type: "warning",
-					class: { root: "border-rui-warning" }
-				},
-				{
-					variant: "outlined",
-					type: "info",
-					class: { root: "border-rui-info" }
-				},
-				{
-					variant: "outlined",
-					type: "success",
-					class: { root: "border-rui-success" }
+					class: {
+						root: "border-[rgb(var(--rui-alert))]",
+						icon: "text-[rgb(var(--rui-alert))]"
+					}
 				}
 			],
-			compoundSlots: [
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "primary",
-					class: "text-rui-primary text-shade-[.6] color-mix-supported:text-rui-primary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-primary-tint/[.6]"
-				},
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "secondary",
-					class: "text-rui-secondary text-shade-[.6] color-mix-supported:text-rui-secondary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-secondary-tint/[.6]"
-				},
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "error",
-					class: "text-rui-error text-shade-[.6] color-mix-supported:text-rui-error-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-error-tint/[.6]"
-				},
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "warning",
-					class: "text-rui-warning text-shade-[.6] color-mix-supported:text-rui-warning-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-warning-tint/[.6]"
-				},
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "info",
-					class: "text-rui-info text-shade-[.6] color-mix-supported:text-rui-info-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-info-tint/[.6]"
-				},
-				{
-					slots: [
-						"icon",
-						"texts",
-						"action",
-						"close"
-					],
-					variant: ["default", "outlined"],
-					type: "success",
-					class: "text-rui-success text-shade-[.6] color-mix-supported:text-rui-success-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-success-tint/[.6]"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "primary",
-					class: "dark:text-rui-primary"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "secondary",
-					class: "dark:text-rui-secondary"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "error",
-					class: "dark:text-rui-error"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "warning",
-					class: "dark:text-rui-warning"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "info",
-					class: "dark:text-rui-info"
-				},
-				{
-					slots: ["icon"],
-					variant: ["default", "outlined"],
-					type: "success",
-					class: "dark:text-rui-success"
-				}
-			]
+			compoundSlots: [{
+				slots: [
+					"texts",
+					"action",
+					"close"
+				],
+				variant: ["default", "outlined"],
+				class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+			}, {
+				slots: ["icon"],
+				variant: "default",
+				class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+			}]
 		});
 		const ui = computed(() => alertStyles({
 			variant: __props.variant,
-			type: __props.type
+			type: __props.type,
+			titled: !!slots.title || !!__props.title
 		}));
 		const usedIcon = computed(() => {
 			if (__props.icon) return __props.icon;
@@ -289,7 +120,7 @@ var RuiAlert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					class: normalizeClass(unref(ui).icon())
 				}, [createVNode(RuiIcon_default, {
 					name: unref(usedIcon),
-					size: "22"
+					size: "20"
 				}, null, 8, ["name"])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(ui).texts()) }, [_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass({ "font-medium": !!__props.title })