@rotki/ui-library 2.26.1 → 3.0.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.js","names":[],"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-md',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-md',\n      [SkeletonType.BUTTON]: 'w-full max-w-[6rem] h-[2.25rem] rounded-md',\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-sm',\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-md mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonLoader.js","names":[],"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":""}

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

@@ -15,12 +15,12 @@ var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const multiLineTypes = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];
 		const skeletonType = tv({ variants: { type: {
 			[SkeletonType.CUSTOM]: "box-border",
-			[SkeletonType.TEXT]: "w-full h-4 rounded-md",
-			[SkeletonType.HEADING]: "w-full h-6 rounded-md",
-			[SkeletonType.BUTTON]: "w-full max-w-[6rem] h-[2.25rem] rounded-md",
+			[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-sm",
+			[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
 			[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
 			[SkeletonType.ARTICLE]: "flex flex-col gap-2"
 		} } });
@@ -47,19 +47,19 @@ var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			}), [
 				__props.type === unref(SkeletonType).ARTICLE ? (openBlock(), createBlock(RuiSkeletonBase_default, {
 					key: 0,
-					class: "w-full h-6 rounded-md mb-1",
+					class: "w-full h-6 rounded-rui-control mb-1",
 					rounded: __props.rounded
 				}, null, 8, ["rounded"])) : createCommentVNode("", true),
 				createVNode(RuiSkeletonBase_default, {
-					class: "w-full h-3 rounded-md",
+					class: "w-full h-3 rounded-rui-control",
 					rounded: __props.rounded
 				}, null, 8, ["rounded"]),
 				createVNode(RuiSkeletonBase_default, {
-					class: "w-full h-3 rounded-md max-w-[80%]",
+					class: "w-full h-3 rounded-rui-control max-w-[80%]",
 					rounded: __props.rounded
 				}, null, 8, ["rounded"]),
 				createVNode(RuiSkeletonBase_default, {
-					class: "w-full h-3 rounded-md max-w-[90%]",
+					class: "w-full h-3 rounded-rui-control max-w-[90%]",
 					rounded: __props.rounded
 				}, null, 8, ["rounded"])
 			], 16));

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":[],"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-md',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-md',\n      [SkeletonType.BUTTON]: 'w-full max-w-[6rem] h-[2.25rem] rounded-md',\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-sm',\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-md mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-md 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,CAAA,MAAA,WAAA,KADT,UAAA,GAAA,YAKE,yBALF,WAKE;;IAHC,OAAO,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtC,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;;IApBH,OAAO,MAAA,EAAA;GACK,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAAS,MAAA,YAAA,CAAY,CAAC,WAD9B,UAAA,GAAA,YAIE,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}
+{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[],"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,CAAA,MAAA,WAAA,KADT,UAAA,GAAA,YAKE,yBALF,WAKE;;IAHC,OAAO,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtC,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;;IApBH,OAAO,MAAA,EAAA;GACK,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAAS,MAAA,YAAA,CAAY,CAAC,WAD9B,UAAA,GAAA,YAIE,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.js","names":[],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/use-logo-sources';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\nconst emptyLinks: () => ExternalLinks = () => ({\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n});\n\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\nconst externalSources = ref<ExternalLinks>(emptyLinks());\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\n// Synchronously hydrate from sessionStorage so the URL is available immediately on refresh\nif (isClient && logo && !src) {\n  const cached = getCachedLogoSources(branch);\n  if (cached)\n    set(externalSources, cached);\n}\n\nfunction buildExternalUrl(sources: ExternalLinks): string | undefined {\n  if (!logo || !sources[logo])\n    return undefined;\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n  if (uniqueKey !== undefined)\n    return `${url}?key=${uniqueKey}`;\n\n  return url;\n}\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  return buildExternalUrl(get(externalSources));\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\n// If we have a previously verified URL that matches the current source, trust it immediately\nif (isClient && logo && !src) {\n  const verifiedUrl = getVerifiedLogoUrl(branch, String(logo));\n  const currentUrl = get(externalSource);\n  if (verifiedUrl && currentUrl && verifiedUrl === currentUrl)\n    set(seasonalReady, true);\n}\n\nfunction preloadImage(url: string): void {\n  if (!isClient)\n    return;\n\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\n// Inject a preload hint for the seasonal image so the browser starts fetching early\nif (isClient && logo && !src) {\n  const url = get(externalSource);\n  if (url)\n    preloadImage(url);\n}\n\nasync function fetchSources(): Promise<void> {\n  if (!logo || src)\n    return;\n\n  const links = await getLogoSources(branch);\n\n  if (links)\n    set(externalSources, links);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(branch, String(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      // Cache the verified URL so subsequent page loads can trust it immediately\n      const url = get(externalSource);\n      if (url && logo)\n        setVerifiedLogoUrl(branch, String(logo), url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\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-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiLogo.js","names":[],"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":""}

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

@@ -1,16 +1,14 @@
-export interface ExternalLinks {
-    drawer?: string;
-    app?: string;
-    website?: string;
-    about?: string;
-    emptyScreen?: string;
-    [key: string]: string | undefined;
-}
 export interface Props {
     text?: boolean;
-    branch?: 'develop' | 'main' | string;
-    logo?: keyof ExternalLinks;
+    /**
+     * Name handed to the `logo.resolve` option of `createRui`. Without a resolver
+     * the bundled logo shows.
+     */
+    logo?: string;
     size?: string | number;
+    /**
+     * Appended to the resolved URL as `key`, so each instance loads its own copy.
+     */
     uniqueKey?: string | number;
     src?: string;
 }

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

@@ -1,13 +1,14 @@
+import { useLogoOptions } from "../../composables/defaults/logo.js";
 import logo_default from "./logo.js";
-import { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from "./use-logo-sources.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onServerPrefetch, openBlock, ref, toDisplayString, unref, useSSRContext, useTemplateRef, watch, watchEffect } from "vue";
-import { get, isClient, set } from "@vueuse/shared";
+import { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from "./verified-logo.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { get, set } from "@vueuse/shared";
 //#region src/components/logos/RuiLogo.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
 var _hoisted_2 = ["src"];
 var _hoisted_3 = {
 	key: 0,
-	class: "text-h4 text-rui-primary dark:text-white"
+	class: "text-h4 text-rui-primary dark:text-rui-text"
 };
 var appName = "rotki";
 var RuiLogo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -18,45 +19,26 @@ var RuiLogo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: false
 		},
-		branch: { default: "develop" },
 		logo: {},
 		size: { default: 3 },
 		uniqueKey: {},
 		src: {}
 	},
 	setup(__props) {
-		const emptyLinks = () => ({
-			app: void 0,
-			website: void 0,
-			about: void 0,
-			emptyScreen: void 0
-		});
+		const resolvedUrl = ref();
 		const error = ref(false);
 		const seasonalReady = ref(false);
-		const externalSources = ref(emptyLinks());
+		const isMounted = ref(false);
 		const customImageRef = useTemplateRef("customImageRef");
-		if (isClient && __props.logo && !__props.src) {
-			const cached = getCachedLogoSources(__props.branch);
-			if (cached) set(externalSources, cached);
-		}
-		function buildExternalUrl(sources) {
-			if (!__props.logo || !sources[__props.logo]) return void 0;
-			const url = `https://raw.githubusercontent.com/rotki/data/${__props.branch}/assets/icons/${sources[__props.logo]}`;
-			if (__props.uniqueKey !== void 0) return `${url}?key=${__props.uniqueKey}`;
-			return url;
-		}
+		const logoOptions = useLogoOptions();
 		const externalSource = computed(() => {
 			if (__props.src) return __props.src;
-			return buildExternalUrl(get(externalSources));
+			const url = get(resolvedUrl);
+			if (!url || __props.uniqueKey === void 0) return url;
+			return `${url}${url.includes("?") ? "&" : "?"}key=${__props.uniqueKey}`;
 		});
 		const showCustom = computed(() => !!__props.src || !!get(externalSource) && get(seasonalReady) && !get(error));
-		if (isClient && __props.logo && !__props.src) {
-			const verifiedUrl = getVerifiedLogoUrl(__props.branch, String(__props.logo));
-			const currentUrl = get(externalSource);
-			if (verifiedUrl && currentUrl && verifiedUrl === currentUrl) set(seasonalReady, true);
-		}
 		function preloadImage(url) {
-			if (!isClient) return;
 			const existing = document.head.querySelectorAll("link[rel=\"preload\"][as=\"image\"]");
 			for (const link of existing) if (link.href === url) return;
 			const link = document.createElement("link");
@@ -65,35 +47,52 @@ var RuiLogo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			link.href = url;
 			document.head.appendChild(link);
 		}
-		if (isClient && __props.logo && !__props.src) {
-			const url = get(externalSource);
-			if (url) preloadImage(url);
+		async function callResolver(name) {
+			try {
+				return await logoOptions?.resolve(name);
+			} catch {
+				return;
+			}
 		}
-		async function fetchSources() {
-			if (!__props.logo || __props.src) return;
-			const links = await getLogoSources(__props.branch);
-			if (links) set(externalSources, links);
+		/**
+		* Asks the app's resolver for the logo URL. It runs only after mount, so the
+		* server and the client's first render both show the bundled fallback (or
+		* `src`) and hydration matches.
+		*/
+		async function resolveLogo() {
+			if (!get(isMounted)) return;
+			if (__props.src || !__props.logo || !logoOptions) {
+				set(resolvedUrl, void 0);
+				return;
+			}
+			const name = __props.logo;
+			const url = await callResolver(name);
+			if (name !== __props.logo) return;
+			set(error, false);
+			set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);
+			set(resolvedUrl, url);
+			const source = get(externalSource);
+			if (source) preloadImage(source);
 		}
 		function onImageError() {
 			set(error, true);
-			if (__props.logo) removeVerifiedLogoUrl(__props.branch, String(__props.logo));
+			if (__props.logo) removeVerifiedLogoUrl(__props.logo);
 		}
 		function onImageLoaded() {
 			const img = get(customImageRef);
 			if (!img) return;
 			img.decode().then(() => {
 				set(seasonalReady, true);
-				const url = get(externalSource);
-				if (url && __props.logo) setVerifiedLogoUrl(__props.branch, String(__props.logo), url);
+				const url = get(resolvedUrl);
+				if (url && __props.logo) setVerifiedLogoUrl(__props.logo, url);
 			}).catch(() => set(error, true));
 		}
 		watch(() => get(customImageRef)?.complete, (complete) => {
 			if (complete) onImageLoaded();
 		});
-		watchEffect(fetchSources);
-		if (!isClient) useSSRContext();
-		onServerPrefetch(async () => {
-			await fetchSources();
+		watchEffect(resolveLogo);
+		onMounted(() => {
+			set(isMounted, true);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

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":[],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/use-logo-sources';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\nconst emptyLinks: () => ExternalLinks = () => ({\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n});\n\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\nconst externalSources = ref<ExternalLinks>(emptyLinks());\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\n// Synchronously hydrate from sessionStorage so the URL is available immediately on refresh\nif (isClient && logo && !src) {\n  const cached = getCachedLogoSources(branch);\n  if (cached)\n    set(externalSources, cached);\n}\n\nfunction buildExternalUrl(sources: ExternalLinks): string | undefined {\n  if (!logo || !sources[logo])\n    return undefined;\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n  if (uniqueKey !== undefined)\n    return `${url}?key=${uniqueKey}`;\n\n  return url;\n}\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  return buildExternalUrl(get(externalSources));\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\n// If we have a previously verified URL that matches the current source, trust it immediately\nif (isClient && logo && !src) {\n  const verifiedUrl = getVerifiedLogoUrl(branch, String(logo));\n  const currentUrl = get(externalSource);\n  if (verifiedUrl && currentUrl && verifiedUrl === currentUrl)\n    set(seasonalReady, true);\n}\n\nfunction preloadImage(url: string): void {\n  if (!isClient)\n    return;\n\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\n// Inject a preload hint for the seasonal image so the browser starts fetching early\nif (isClient && logo && !src) {\n  const url = get(externalSource);\n  if (url)\n    preloadImage(url);\n}\n\nasync function fetchSources(): Promise<void> {\n  if (!logo || src)\n    return;\n\n  const links = await getLogoSources(branch);\n\n  if (links)\n    set(externalSources, links);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(branch, String(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      // Cache the verified URL so subsequent page loads can trust it immediately\n      const url = get(externalSource);\n      if (url && logo)\n        setVerifiedLogoUrl(branch, String(logo), url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\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-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;AA8BA,IAAM,UAAU;;;;;;;;;;;;;;;;EAChB,MAAM,oBAAyC;GAC7C,KAAK,KAAA;GACL,SAAS,KAAA;GACT,OAAO,KAAA;GACP,aAAa,KAAA;EACf;EAEA,MAAM,QAAQ,IAAa,KAAK;EAChC,MAAM,gBAAgB,IAAa,KAAK;EACxC,MAAM,kBAAkB,IAAmB,WAAW,CAAC;EAEvD,MAAM,iBAAiB,eAAiC,gBAAgB;EAGxE,IAAI,YAAY,QAAA,QAAQ,CAAC,QAAA,KAAK;GAC5B,MAAM,SAAS,qBAAqB,QAAA,MAAM;GAC1C,IAAI,QACF,IAAI,iBAAiB,MAAM;EAC/B;EAEA,SAAS,iBAAiB,SAA4C;GACpE,IAAI,CAAC,QAAA,QAAQ,CAAC,QAAQ,QAAA,OACpB,OAAO,KAAA;GAET,MAAM,MAAM,gDAAgD,QAAA,OAAO,gBAAgB,QAAQ,QAAA;GAE3F,IAAI,QAAA,cAAc,KAAA,GAChB,OAAO,GAAG,IAAI,OAAO,QAAA;GAEvB,OAAO;EACT;EAEA,MAAM,iBAAiB,eAAmC;GACxD,IAAI,QAAA,KACF,OAAO,QAAA;GAET,OAAO,iBAAiB,IAAI,eAAe,CAAC;EAC9C,CAAC;EAED,MAAM,aAAa,eAAwB,CAAC,CAAC,QAAA,OAAQ,CAAC,CAAC,IAAI,cAAc,KAAK,IAAI,aAAa,KAAK,CAAC,IAAI,KAAK,CAAE;EAGhH,IAAI,YAAY,QAAA,QAAQ,CAAC,QAAA,KAAK;GAC5B,MAAM,cAAc,mBAAmB,QAAA,QAAQ,OAAO,QAAA,IAAI,CAAC;GAC3D,MAAM,aAAa,IAAI,cAAc;GACrC,IAAI,eAAe,cAAc,gBAAgB,YAC/C,IAAI,eAAe,IAAI;EAC3B;EAEA,SAAS,aAAa,KAAmB;GACvC,IAAI,CAAC,UACH;GAEF,MAAM,WAAW,SAAS,KAAK,iBAAkC,qCAAiC;GAClG,KAAK,MAAM,QAAQ,UACjB,IAAI,KAAK,SAAS,KAChB;GAGJ,MAAM,OAAO,SAAS,cAAc,MAAM;GAC1C,KAAK,MAAM;GACX,KAAK,KAAK;GACV,KAAK,OAAO;GACZ,SAAS,KAAK,YAAY,IAAI;EAChC;EAGA,IAAI,YAAY,QAAA,QAAQ,CAAC,QAAA,KAAK;GAC5B,MAAM,MAAM,IAAI,cAAc;GAC9B,IAAI,KACF,aAAa,GAAG;EACpB;EAEA,eAAe,eAA8B;GAC3C,IAAI,CAAC,QAAA,QAAQ,QAAA,KACX;GAEF,MAAM,QAAQ,MAAM,eAAe,QAAA,MAAM;GAEzC,IAAI,OACF,IAAI,iBAAiB,KAAK;EAC9B;EAEA,SAAS,eAAqB;GAC5B,IAAI,OAAO,IAAI;GACf,IAAI,QAAA,MACF,sBAAsB,QAAA,QAAQ,OAAO,QAAA,IAAI,CAAC;EAC9C;EAEA,SAAS,gBAAsB;GAC7B,MAAM,MAAM,IAAI,cAAc;GAC9B,IAAI,CAAC,KACH;GAEF,IAAI,OAAO,CAAA,CACR,WAAW;IACV,IAAI,eAAe,IAAI;IAEvB,MAAM,MAAM,IAAI,cAAc;IAC9B,IAAI,OAAO,QAAA,MACT,mBAAmB,QAAA,QAAQ,OAAO,QAAA,IAAI,GAAG,GAAG;GAChD,CAAC,CAAA,CACA,YAAY,IAAI,OAAO,IAAI,CAAC;EACjC;EAEA,YAAY,IAAI,cAAc,CAAC,EAAE,WAAW,aAAa;GACvD,IAAI,UACF,cAAc;EAClB,CAAC;EAED,YAAY,YAAY;EAExB,IAAI,CAAC,UACH,cAAc;EAEhB,iBAAiB,YAAY;GAC3B,MAAM,aAAa;EACrB,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAqCM,OAAA;IApCJ,OAAM;IACL,OAAK,eAAA,EAAA,QAAA,GAAe,QAAA,KAAI,KAAA,CAAA;GAEzB,GAAA,CAAA,mBAyBM,OAAA;IAxBJ,OAAM;IACL,OAAK,eAAA;KAAA,OAAA,GAAc,QAAA,KAAI;KAAA,QAAA,GAAkB,QAAA,KAAI;IAAA,CAAA;GAG9C,GAAA,CAAA,mBAME,OAAA;IALC,KAAK,MAAA,YAAA;IACL,KAAK;IACN,cAAW;IACX,OAAK,eAAA,CAAC,mEACE,MAAA,UAAA,IAAU,cAAA,aAAA,CAAA;GAKZ,GAAA,MAAA,IAAA,UAAA,GAAA,MAAA,cAAA,KAAc,CAAK,MAAA,KAAA,KAD3B,UAAA,GAAA,mBAUE,OAAA;;IARI,SAAA;IAAJ,KAAI;IACH,KAAK,MAAA,cAAA;IACL,KAAK;IACN,cAAW;IACX,OAAK,eAAA,CAAC,mEACE,MAAA,UAAA,IAAU,gBAAA,+BAAA,CAAA;IACjB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,aAAY;IACnB,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa;GAKhB,GAAA,MAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,QAAA,QADR,UAAA,GAAA,mBAKM,OALN,YAKM,gBADD,OAAO,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"RuiLogo.vue_vue_type_script_setup_true_lang.js","names":[],"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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"}

package/dist/components/logos/verified-logo.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns the URL a logo last decoded from in this browser session, so a page
+ * load that resolves the same URL can show it without waiting for the decode.
+ */
+export declare function getVerifiedLogoUrl(logo: string): string | undefined;
+/**
+ * Stores a logo URL after its image decoded successfully.
+ */
+export declare function setVerifiedLogoUrl(logo: string, url: string): void;
+/**
+ * Forgets a logo URL whose image failed to load, so it is not trusted on the next load.
+ */
+export declare function removeVerifiedLogoUrl(logo: string): void;
+/**
+ * Removes every stored logo URL. Exposed for testing only.
+ */
+export declare function clearVerifiedLogoUrls(): void;

package/dist/components/logos/verified-logo.js

@@ -0,0 +1,36 @@
+//#region src/components/logos/verified-logo.ts
+var SESSION_VERIFIED_PREFIX = "rui-logo-verified";
+function verifiedKey(logo) {
+	return `${SESSION_VERIFIED_PREFIX}:${logo}`;
+}
+/**
+* Returns the URL a logo last decoded from in this browser session, so a page
+* load that resolves the same URL can show it without waiting for the decode.
+*/
+function getVerifiedLogoUrl(logo) {
+	try {
+		return sessionStorage.getItem(verifiedKey(logo)) ?? void 0;
+	} catch {
+		return;
+	}
+}
+/**
+* Stores a logo URL after its image decoded successfully.
+*/
+function setVerifiedLogoUrl(logo, url) {
+	try {
+		sessionStorage.setItem(verifiedKey(logo), url);
+	} catch {}
+}
+/**
+* Forgets a logo URL whose image failed to load, so it is not trusted on the next load.
+*/
+function removeVerifiedLogoUrl(logo) {
+	try {
+		sessionStorage.removeItem(verifiedKey(logo));
+	} catch {}
+}
+//#endregion
+export { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl };
+
+//# sourceMappingURL=verified-logo.js.map

package/dist/components/logos/verified-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verified-logo.js","names":[],"sources":["../../../src/components/logos/verified-logo.ts"],"sourcesContent":["const SESSION_VERIFIED_PREFIX = 'rui-logo-verified';\n\nfunction verifiedKey(logo: string): string {\n  return `${SESSION_VERIFIED_PREFIX}:${logo}`;\n}\n\n/**\n * Returns the URL a logo last decoded from in this browser session, so a page\n * load that resolves the same URL can show it without waiting for the decode.\n */\nexport function getVerifiedLogoUrl(logo: string): string | undefined {\n  try {\n    return sessionStorage.getItem(verifiedKey(logo)) ?? undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\n/**\n * Stores a logo URL after its image decoded successfully.\n */\nexport function setVerifiedLogoUrl(logo: string, url: string): void {\n  try {\n    sessionStorage.setItem(verifiedKey(logo), url);\n  }\n  catch {\n    // sessionStorage may be full or unavailable\n  }\n}\n\n/**\n * Forgets a logo URL whose image failed to load, so it is not trusted on the next load.\n */\nexport function removeVerifiedLogoUrl(logo: string): void {\n  try {\n    sessionStorage.removeItem(verifiedKey(logo));\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n\n/**\n * Removes every stored logo URL. Exposed for testing only.\n */\nexport function clearVerifiedLogoUrls(): void {\n  try {\n    const keys: string[] = [];\n    for (let i = 0; i < sessionStorage.length; i++) {\n      const key = sessionStorage.key(i);\n      if (key?.startsWith(SESSION_VERIFIED_PREFIX))\n        keys.push(key);\n    }\n    keys.forEach(key => sessionStorage.removeItem(key));\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n"],"mappings":";AAAA,IAAM,0BAA0B;AAEhC,SAAS,YAAY,MAAsB;CACzC,OAAO,GAAG,wBAAwB,GAAG;AACvC;;;;;AAMA,SAAgB,mBAAmB,MAAkC;CACnE,IAAI;EACF,OAAO,eAAe,QAAQ,YAAY,IAAI,CAAC,KAAK,KAAA;CACtD,QACM;EACJ;CACF;AACF;;;;AAKA,SAAgB,mBAAmB,MAAc,KAAmB;CAClE,IAAI;EACF,eAAe,QAAQ,YAAY,IAAI,GAAG,GAAG;CAC/C,QACM,CAEN;AACF;;;;AAKA,SAAgB,sBAAsB,MAAoB;CACxD,IAAI;EACF,eAAe,WAAW,YAAY,IAAI,CAAC;CAC7C,QACM,CAEN;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.js","names":[],"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 absolute bg-transparent text-rui-light-text dark:text-rui-text',\n    content: 'flex items-center px-1.5',\n  },\n  variants: {\n    color: {\n      default: {},\n      primary: { badge: 'text-white bg-rui-primary' },\n      secondary: { badge: 'text-white bg-rui-secondary' },\n      error: { badge: 'text-white bg-rui-error' },\n      warning: { badge: 'text-white bg-rui-warning' },\n      info: { badge: 'text-white bg-rui-info' },\n      success: { badge: 'text-white bg-rui-success' },\n    },\n    size: {\n      sm: { badge: 'min-h-4 min-w-4' },\n      md: { badge: 'min-h-5 min-w-5' },\n      lg: { badge: 'min-h-6 min-w-6' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-sm' },\n      md: { badge: 'rounded-md' },\n      lg: { badge: 'rounded-lg' },\n      full: { badge: 'rounded-full' },\n    },\n    dot: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Dot default color\n    { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n    // Dot sizes (smaller than normal badge)\n    { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n  ],\n  compoundSlots: [\n    // Dark mode: warning/success/info keep light text on colored bg\n    { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\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 : 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    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\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-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2.5' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBadge.js","names":[],"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":""}

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

@@ -39,63 +39,78 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const badgeStyles = tv({
 			slots: {
 				wrapper: "relative inline-block",
-				badge: "flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text",
-				content: "flex items-center px-1.5"
+				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: {},
-					primary: { badge: "text-white bg-rui-primary" },
-					secondary: { badge: "text-white bg-rui-secondary" },
-					error: { badge: "text-white bg-rui-error" },
-					warning: { badge: "text-white bg-rui-warning" },
-					info: { badge: "text-white bg-rui-info" },
-					success: { badge: "text-white bg-rui-success" }
+					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" },
-					md: { badge: "min-h-5 min-w-5" },
-					lg: { badge: "min-h-6 min-w-6" }
+					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-sm" },
-					md: { badge: "rounded-md" },
-					lg: { badge: "rounded-lg" },
+					sm: { badge: "rounded-xs" },
+					md: { badge: "rounded-rui-control" },
+					lg: { badge: "rounded-rui-card" },
 					full: { badge: "rounded-full" }
 				},
-				dot: { true: {} }
+				dot: { true: { badge: "ring-2 ring-rui-surface" } },
+				iconOnly: {
+					true: { content: "px-0" },
+					false: {}
+				}
 			},
 			compoundVariants: [
 				{
 					dot: true,
 					color: "default",
-					class: { badge: "bg-gray-500" }
+					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-1.5 min-h-1.5" }
+					class: { badge: "min-w-2 min-h-2" }
 				},
 				{
 					dot: true,
 					size: "md",
-					class: { badge: "min-w-2 min-h-2" }
+					class: { badge: "min-w-2.5 min-h-2.5" }
 				},
 				{
 					dot: true,
 					size: "lg",
-					class: { badge: "min-w-2.5 min-h-2.5" }
+					class: { badge: "min-w-3 min-h-3" }
 				}
 			],
-			compoundSlots: [{
-				slots: ["badge"],
-				color: [
-					"warning",
-					"success",
-					"info"
-				],
-				class: "dark:text-rui-light-text"
-			}],
 			defaultVariants: {
 				color: "primary",
 				size: "md",
@@ -109,14 +124,30 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			color: __props.color,
 			size: __props.size,
 			rounded: __props.rounded,
-			dot: __props.dot
+			dot: __props.dot,
+			iconOnly: (!!__props.icon || !!slots.icon) && !get(hasText)
 		}));
-		const DOT_POS = [
-			-.25,
-			"100% - 0.25rem",
-			"100% - 0.25rem",
-			.25
-		];
+		/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */
+		const DOT_POS = {
+			sm: [
+				-.25,
+				"100% - 0.25rem",
+				"100% - 0.25rem",
+				.25
+			],
+			md: [
+				-.3125,
+				"100% - 0.3125rem",
+				"100% - 0.3125rem",
+				.3125
+			],
+			lg: [
+				-.375,
+				"100% - 0.375rem",
+				"100% - 0.375rem",
+				.375
+			]
+		};
 		const BADGE_POS = {
 			sm: [
 				-.85,
@@ -140,7 +171,7 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const positionStyle = computed(() => {
 			const ox = Number(__props.offsetX) * .0625;
 			const oy = Number(__props.offsetY) * .0625;
-			const [l, r, edge, center] = __props.dot ? DOT_POS : BADGE_POS[__props.size];
+			const [l, r, edge, center] = __props.dot ? DOT_POS[__props.size] : BADGE_POS[__props.size];
 			const horizontal = `calc(${__props.left ? `${l}rem` : r} + ${ox}rem)`;
 			const vertical = __props.placement === "center" ? `calc(50% - ${center}rem - ${oy}rem)` : `calc(${edge} - ${oy}rem)`;
 			return {
@@ -151,12 +182,12 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).wrapper()) }, [renderSlot(_ctx.$slots, "default"), createVNode(Transition, {
 				appear: "",
-				"enter-active-class": "transform ease-out duration-200",
-				"enter-from-class": "scale-0",
+				"enter-active-class": "transition-[scale] ease-out duration-200 motion-reduce:transition-none",
+				"enter-from-class": "scale-0 motion-reduce:scale-100",
 				"enter-to-class": "scale-100",
-				"leave-active-class": "transform ease-in duration-150",
+				"leave-active-class": "transition-[scale] ease-in duration-150 motion-reduce:transition-none",
 				"leave-from-class": "scale-100",
-				"leave-to-class": "scale-0"
+				"leave-to-class": "scale-0 motion-reduce:scale-100"
 			}, {
 				default: withCtx(() => [__props.modelValue ? (openBlock(), createElementBlock("div", {
 					key: 0,
@@ -166,18 +197,15 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					"data-dot": __props.dot || void 0,
 					"data-left": __props.left || void 0,
 					"aria-atomic": "true",
-					"aria-label": "Badge",
 					"aria-live": "polite",
 					role: "status"
 				}, [!__props.dot ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(ui).content({ class: unref(hasIconAndText) ? "px-2.5" : void 0 }))
+					class: normalizeClass(unref(ui).content({ class: unref(hasIconAndText) ? "px-2" : void 0 }))
 				}, [renderSlot(_ctx.$slots, "badge", {}, () => [createTextVNode(toDisplayString(__props.text), 1)]), renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(RuiIcon_default, {
 					key: 0,
-					name: __props.icon,
-					size: "16",
-					class: normalizeClass({ "ml-0.5": unref(hasText) })
-				}, null, 8, ["name", "class"])) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)], 14, _hoisted_1)) : createCommentVNode("", true)]),
+					name: __props.icon
+				}, null, 8, ["name"])) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)], 14, _hoisted_1)) : createCommentVNode("", true)]),
 				_: 3
 			})], 2);
 		};