@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/loaders/RuiSkeletonLoader.vue.d.ts

@@ -1,8 +1,10 @@
+import type { HTMLAttributes } from 'vue';
 import { type Props as SkeletonBaseProps } from './RuiSkeletonBase.vue.js';
 import { SkeletonType } from './skeleton-type.js';
 export interface Props extends SkeletonBaseProps {
     type?: SkeletonType;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import RuiSkeletonBase_default from "./RuiSkeletonBase.js";
 import { SkeletonType } from "./skeleton-type.js";
+import { skeletonLoaderStyles } from "./skeleton-loader-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, unref, useAttrs } from "vue";
 //#region src/components/loaders/RuiSkeletonLoader.vue?vue&type=script&setup=true&lang.ts
 var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -13,19 +14,8 @@ var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	},
 	setup(__props) {
 		const multiLineTypes = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];
-		const skeletonType = tv({ variants: { type: {
-			[SkeletonType.CUSTOM]: "box-border",
-			[SkeletonType.TEXT]: "w-full h-4 rounded-rui-control",
-			[SkeletonType.HEADING]: "w-full h-6 rounded-rui-control",
-			[SkeletonType.BUTTON]: "w-full max-w-24 h-9 rounded-rui-control",
-			[SkeletonType.ICON]: "w-6 h-6 rounded-full",
-			[SkeletonType.AVATAR]: "w-10 h-10 rounded-full",
-			[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
-			[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
-			[SkeletonType.ARTICLE]: "flex flex-col gap-2"
-		} } });
 		const attrs = useAttrs();
-		const ui = computed(() => skeletonType({
+		const ui = computed(() => skeletonLoaderStyles({
 			type: __props.type,
 			class: cn(attrs.class)
 		}));

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","RuiSkeletonBase","_mergeProps","_createElementBlock","_createCommentVNode","_createVNode"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;EAC1B,EACF,EACF,CAAC;EAED,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,aAAa;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EAChF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAAA,MAAA,WAAA,KADTC,UAAA,GAAAC,YAKEC,yBALFC,WAKE;;IAHC,OAAOJ,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtCC,UAAA,GAAAI,mBAsBM,OAtBND,WAsBM;;IApBH,OAAOJ,MAAA,EAAA;GACK,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAASA,MAAA,YAAA,CAAY,CAAC,WAD9BC,UAAA,GAAAC,YAIEC,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}
+{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","RuiSkeletonBase","_mergeProps","_createElementBlock","_createCommentVNode","_createVNode"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn } from '@/utils/tv';\nimport { skeletonLoaderStyles } from './skeleton-loader-styles';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonLoaderStyles({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,qBAAqB;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EACxF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAAA,MAAA,WAAA,KADTC,UAAA,GAAAC,YAKEC,yBALFC,WAKE;;IAHC,OAAOJ,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtCC,UAAA,GAAAI,mBAsBM,OAtBND,WAsBM;;IApBH,OAAOJ,MAAA,EAAA;GACK,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAASA,MAAA,YAAA,CAAY,CAAC,WAD9BC,UAAA,GAAAC,YAIEC,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}

package/dist/components/loaders/skeleton-base-styles.d.ts

@@ -0,0 +1,25 @@
+export declare const skeletonBaseStyles: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined, "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800", {
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined>>;

package/dist/components/loaders/skeleton-base-styles.js

@@ -0,0 +1,16 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/loaders/skeleton-base-styles.ts
+var skeletonBaseStyles = tv({
+	base: "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800",
+	variants: { rounded: {
+		none: "rounded-none",
+		sm: "rounded-xs",
+		md: "rounded-rui-control",
+		lg: "rounded-rui-card",
+		full: "rounded-full"
+	} }
+});
+//#endregion
+export { skeletonBaseStyles };
+
+//# sourceMappingURL=skeleton-base-styles.js.map

package/dist/components/loaders/skeleton-base-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-base-styles.js","names":[],"sources":["../../../src/components/loaders/skeleton-base-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const skeletonBaseStyles = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,qBAAqB,GAAG;CAEnC,MAAM;CACN,UAAU,EACR,SAAS;EACP,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EACF;AACF,CAAC"}

package/dist/components/loaders/skeleton-loader-styles.d.ts

@@ -0,0 +1,37 @@
+export declare const skeletonLoaderStyles: import("tailwind-variants").TVReturnType<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, undefined, {
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined>>;

package/dist/components/loaders/skeleton-loader-styles.js

@@ -0,0 +1,18 @@
+import { tv } from "../../utils/tv.js";
+import { SkeletonType } from "./skeleton-type.js";
+//#region src/components/loaders/skeleton-loader-styles.ts
+var skeletonLoaderStyles = tv({ variants: { type: {
+	[SkeletonType.CUSTOM]: "box-border",
+	[SkeletonType.TEXT]: "w-full h-4 rounded-rui-control",
+	[SkeletonType.HEADING]: "w-full h-6 rounded-rui-control",
+	[SkeletonType.BUTTON]: "w-full max-w-24 h-9 rounded-rui-control",
+	[SkeletonType.ICON]: "w-6 h-6 rounded-full",
+	[SkeletonType.AVATAR]: "w-10 h-10 rounded-full",
+	[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
+	[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
+	[SkeletonType.ARTICLE]: "flex flex-col gap-2"
+} } });
+//#endregion
+export { skeletonLoaderStyles };
+
+//# sourceMappingURL=skeleton-loader-styles.js.map

package/dist/components/loaders/skeleton-loader-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader-styles.js","names":[],"sources":["../../../src/components/loaders/skeleton-loader-styles.ts"],"sourcesContent":["import { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { tv } from '@/utils/tv';\n\nexport const skeletonLoaderStyles = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n"],"mappings":";;;AAGA,IAAa,uBAAuB,GAAG,EACrC,UAAU,EACR,MAAM;EACH,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,UAAU;EACvB,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,SAAS;EACtB,aAAa,YAAY;EACzB,aAAa,YAAY;EACzB,aAAa,UAAU;AAC1B,EACF,EACF,CAAC"}

package/dist/components/logos/RuiLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.js","names":["_sfc_main"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiLogo.js","names":["_sfc_main"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/logos/RuiLogo.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 export interface Props {
     text?: boolean;
     /**
@@ -12,6 +13,7 @@ export interface Props {
     uniqueKey?: string | number;
     src?: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_unref","fallback","_normalizeClass","_createCommentVNode","_toDisplayString"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiLogo.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_unref","fallback","_normalizeClass","_createCommentVNode","_toDisplayString"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/badge/RuiBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { badgeStyles } from './badge-styles';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/badge/RuiBadge.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
 import { BadgePlacement, BadgeRounded, BadgeSize } from './badge-props.js';
@@ -14,12 +15,13 @@ export interface Props {
     rounded?: BadgeRounded;
     color?: 'default' | ContextColorsType;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     default?: () => any;
     badge?: () => any;
     icon?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { BadgePlacement, BadgeRounded, BadgeSize } from "./badge-props.js";
+import { badgeStyles } from "./badge-styles.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/overlays/badge/RuiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -36,88 +36,6 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	},
 	setup(__props) {
 		const slots = useSlots();
-		const badgeStyles = tv({
-			slots: {
-				wrapper: "relative inline-block",
-				badge: "flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text",
-				content: "flex items-center gap-1 px-1.5"
-			},
-			variants: {
-				color: {
-					default: { badge: "bg-rui-neutral-200 dark:bg-rui-neutral-700" },
-					primary: { badge: "bg-rui-primary-fill text-rui-primary-foreground" },
-					secondary: { badge: "bg-rui-secondary-fill text-rui-secondary-foreground" },
-					error: { badge: "bg-rui-error-fill text-rui-error-foreground" },
-					warning: { badge: "bg-rui-warning-fill text-rui-warning-foreground" },
-					info: { badge: "bg-rui-info-fill text-rui-info-foreground" },
-					success: { badge: "bg-rui-success-fill text-rui-success-foreground" }
-				},
-				size: {
-					sm: { badge: "min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]" },
-					md: { badge: "min-h-5 min-w-5 [--rui-icon-size:0.75rem]" },
-					lg: { badge: "min-h-6 min-w-6 [--rui-icon-size:0.875rem]" }
-				},
-				rounded: {
-					sm: { badge: "rounded-xs" },
-					md: { badge: "rounded-rui-control" },
-					lg: { badge: "rounded-rui-card" },
-					full: { badge: "rounded-full" }
-				},
-				dot: { true: { badge: "ring-2 ring-rui-surface" } },
-				iconOnly: {
-					true: { content: "px-0" },
-					false: {}
-				}
-			},
-			compoundVariants: [
-				{
-					dot: true,
-					color: "default",
-					class: { badge: "bg-rui-neutral-500 dark:bg-rui-neutral-400" }
-				},
-				{
-					dot: true,
-					color: "error",
-					class: { badge: "dark:bg-rui-error" }
-				},
-				{
-					dot: true,
-					color: "warning",
-					class: { badge: "dark:bg-rui-warning" }
-				},
-				{
-					dot: true,
-					color: "info",
-					class: { badge: "dark:bg-rui-info" }
-				},
-				{
-					dot: true,
-					color: "success",
-					class: { badge: "dark:bg-rui-success" }
-				},
-				{
-					dot: true,
-					size: "sm",
-					class: { badge: "min-w-2 min-h-2" }
-				},
-				{
-					dot: true,
-					size: "md",
-					class: { badge: "min-w-2.5 min-h-2.5" }
-				},
-				{
-					dot: true,
-					size: "lg",
-					class: { badge: "min-w-3 min-h-3" }
-				}
-			],
-			defaultVariants: {
-				color: "primary",
-				size: "md",
-				rounded: "full",
-				dot: false
-			}
-		});
 		const hasText = computed(() => !!__props.text || !!slots.badge);
 		const hasIconAndText = computed(() => (!!__props.icon || !!slots.icon) && get(hasText));
 		const ui = computed(() => badgeStyles({

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createVNode","_Transition","_withCtx","_normalizeStyle","_createTextVNode","_toDisplayString","_createBlock","RuiIcon","_createCommentVNode"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createVNode","_Transition","_withCtx","_normalizeStyle","_createTextVNode","_toDisplayString","_createBlock","RuiIcon","_createCommentVNode"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { badgeStyles } from './badge-styles';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,QAAQA,SAAA;EAMd,MAAM,UAAU,eAAwB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,KAAK;EAE/D,MAAM,iBAAiB,gBAAyB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,SAAS,IAAI,OAAO,CAAC;EAEvF,MAAM,KAAK,eAA+C,YAAY;GACpE,OAAI,QAAA;GACJ,MAAG,QAAA;GACH,SAAM,QAAA;GACN,KAAE,QAAA;GACF,WAAW,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,SAAS,CAAC,IAAI,OAAO;EACpD,CAAC,CAAC;;EAGF,MAAM,UAAwC;GAC5C,IAAI;IAAC;IAAO;IAAkB;IAAkB;GAAI;GACpD,IAAI;IAAC;IAAS;IAAoB;IAAoB;GAAM;GAC5D,IAAI;IAAC;IAAQ;IAAmB;IAAmB;GAAK;EAC1D;EACA,MAAM,YAA0C;GAC9C,IAAI;IAAC;IAAO;IAAmB;IAAmB;GAAI;GACtD,IAAI;IAAC;IAAO;IAAiB;IAAiB;GAAI;GAClD,IAAI;IAAC;IAAO;IAAiB;IAAiB;GAAI;EACpD;EAEA,MAAM,gBAAgB,eAAuC;GAC3D,MAAM,KAAK,OAAO,QAAA,OAAO,IAAI;GAC7B,MAAM,KAAK,OAAO,QAAA,OAAO,IAAI;GAC7B,MAAM,CAAC,GAAG,GAAG,MAAM,UAAU,QAAA,MAAM,QAAQ,QAAA,QAAQ,UAAU,QAAA;GAE7D,MAAM,aAAa,QAAQ,QAAA,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG;GACxD,MAAM,WAAW,QAAA,cAAc,WAC3B,cAAc,OAAO,QAAQ,GAAG,QAChC,QAAQ,KAAK,KAAK,GAAG;GAEzB,OAAO;IACL,MAAM;KACL,QAAA,cAAc,QAAQ,WAAW,QAAQ;GAC5C;EACF,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAwCM,OAAA,EAxCA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CACrBC,WAAQ,KAAA,QAAA,SAAA,GAERC,YAoCaC,YAAA;IAnCX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;IAEf,SAAAC,cA0BM,CAzBE,QAAA,cADRP,UAAA,GAAAC,mBA0BM,OAAA;;KAxBH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,OAAKK,eAAEL,MAAA,aAAA,CAAa;KACpB,kBAAgB,QAAA;KAChB,YAAU,QAAA,OAAO,KAAA;KACjB,aAAW,QAAA,QAAQ,KAAA;KACpB,eAAY;KACZ,aAAU;KACV,MAAK;IAII,GAAA,CAAA,CAAA,QAAA,OADTH,UAAA,GAAAC,mBAaO,QAAA;;KAXJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAUA,MAAA,cAAA,IAAc,SAAY,KAAA,EAAS,CAAA,CAAA;IAE/DC,GAAAA,CAAAA,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CADFK,gBAAAC,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,GAETN,WAKO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHG,QAAA,QADRJ,UAAA,GAAAW,YAGEC,iBAAA;;KADC,MAAM,QAAA"}