@rotki/ui-library 2.17.0 → 2.17.2

package/dist/components/buttons/button/button-props.d.ts

@@ -7,6 +7,7 @@ export declare const ButtonVariant: {
 };
 export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
 export declare const ButtonSize: {
+    readonly xs: "xs";
     readonly sm: "sm";
     readonly lg: "lg";
     readonly xl: "xl";

package/dist/components/buttons/button/button-props.js

@@ -7,6 +7,7 @@ var ButtonVariant = {
 	list: "list"
 };
 var SPINNER_SIZES = {
+	xs: 12,
 	sm: 18,
 	lg: 26,
 	xl: 28

package/dist/components/buttons/button/button-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  sm: 'sm',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { sm: 18, lg: 26, xl: 28 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACP;AAYD,IAAM,gBAAwC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AACxE,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;AAC9D,QAAQ,QAAQ,cAAc,SAAU"}
+{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  xs: 'xs',\n  sm: 'sm',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { xs: 12, sm: 18, lg: 26, xl: 28 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACP;AAaD,IAAM,gBAAwC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAChF,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;AAC9D,QAAQ,QAAQ,cAAc,SAAU"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -14,6 +14,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };
@@ -92,6 +95,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };
@@ -170,6 +176,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };

package/dist/components/buttons/button/button-styles.js

@@ -6,7 +6,7 @@ var buttonStyles = tv({
 			"text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]",
 			"flex items-center justify-center gap-x-2",
 			"px-4 py-1.5 rounded transition-all",
-			"[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[1.125rem]",
+			"[--rui-icon-size:1.125rem]",
 			"disabled:cursor-not-allowed",
 			"focus-visible:!ring-2"
 		].join(" "),
@@ -25,9 +25,10 @@ var buttonStyles = tv({
 			}
 		},
 		size: {
-			sm: { root: "px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4" },
-			lg: { root: "px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" },
-			xl: { root: "px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[1.375rem]" }
+			xs: { root: "px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]" },
+			sm: { root: "px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]" },
+			lg: { root: "px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]" },
+			xl: { root: "px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]" }
 		},
 		color: {
 			grey: { root: "bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600" },
@@ -39,7 +40,7 @@ var buttonStyles = tv({
 			success: { root: "bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60" }
 		},
 		rounded: { true: { root: "rounded-full" } },
-		icon: { true: { root: "rounded-full px-3 py-3" } },
+		icon: { true: { root: "rounded-full" } },
 		active: {
 			true: {},
 			false: {}
@@ -278,6 +279,11 @@ var buttonStyles = tv({
 			variant: "outlined",
 			class: { root: "outline-rui-success/[0.5]" }
 		},
+		{
+			variant: "text",
+			size: "xs",
+			class: { root: "px-1" }
+		},
 		{
 			variant: "text",
 			size: "sm",
@@ -288,6 +294,11 @@ var buttonStyles = tv({
 			size: "lg",
 			class: { root: "px-2.5" }
 		},
+		{
+			variant: "fab",
+			size: "xs",
+			class: { root: "py-1 px-1" }
+		},
 		{
 			variant: "fab",
 			size: "sm",
@@ -298,20 +309,39 @@ var buttonStyles = tv({
 			size: "lg",
 			class: { root: "py-3" }
 		},
+		{
+			variant: "list",
+			size: "xs",
+			class: { root: "px-3 py-0.5" }
+		},
 		{
 			variant: "list",
 			size: "sm",
 			class: { root: "px-3 py-1" }
 		},
+		{
+			icon: true,
+			class: { root: "p-1.5 ![--rui-icon-size:1.25rem]" }
+		},
+		{
+			icon: true,
+			size: "xs",
+			class: { root: "p-[0.1875rem] ![--rui-icon-size:0.875rem]" }
+		},
 		{
 			icon: true,
 			size: "sm",
-			class: { root: "px-1 py-1" }
+			class: { root: "p-1 ![--rui-icon-size:1.25rem]" }
 		},
 		{
 			icon: true,
 			size: "lg",
-			class: { root: "px-4 py-4" }
+			class: { root: "p-1.5 ![--rui-icon-size:1.5rem]" }
+		},
+		{
+			icon: true,
+			size: "xl",
+			class: { root: "p-2 ![--rui-icon-size:1.75rem]" }
 		},
 		{
 			variant: "fab",

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // Default (md) icon sizing for RuiIcons in button slots (prepend/append\n      // /default). Size variants below override this via `!` so the rule\n      // specificity wins regardless of CSS source order.\n      '[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[1.125rem]',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n    },\n    size: {\n      // Each size variant sets a matching descendant rule so RuiIcons in\n      // button slots (prepend/append/default) inherit a size proportional to\n      // the button's height. The `.rui-icon` class sits on the icon's <svg>\n      // and its `w-6 h-6` default (set by RuiIcon when no size prop is\n      // passed) is overridden here because the descendant selector is more\n      // specific. `!` guarantees size variants beat the md default baked\n      // into the base root regardless of CSS source order. Consumers can\n      // still force a specific icon size by passing the `size` prop on\n      // RuiIcon — that path stamps inline width/height which beats classes.\n      sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4' },\n      lg: { root: 'px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' },\n      xl: { root: 'px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      true: { root: 'rounded-full px-3 py-3' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    { icon: true, size: 'sm', class: { root: 'px-1 py-1' } },\n    { icon: true, size: 'lg', class: { root: 'px-4 py-4' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // Default (md) icon sizing is driven by a CSS custom property so that\n      // RuiIcon's `size` prop (stamped as inline `style=\"--rui-icon-size\"` on\n      // the svg) can override it cleanly. Size variants below redefine the\n      // property with `!` so they beat this baseline on the same element;\n      // inline style on the svg then beats the inherited value when a\n      // consumer supplies their own size. See rotki/ui-library#512.\n      '[--rui-icon-size:1.125rem]',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n    },\n    size: {\n      // Each size variant redefines `--rui-icon-size` on the button so the\n      // value inherits into RuiIcons in button slots (prepend/append/default)\n      // and drives their `width: var(--rui-icon-size, 1.5rem)` class. `!` on\n      // the arbitrary property makes the variant beat the md baseline in the\n      // base root regardless of CSS source order. A consumer passing `size`\n      // on RuiIcon still wins: that path stamps an inline style on the svg\n      // element itself, which beats the inherited value from the button.\n      xs: { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]' },\n      lg: { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      xl: { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      // Padding and icon sizing live in the `icon + size` compound variants\n      // below so every size resolves to a height matching its text-button\n      // counterpart; this base only contributes the round shape.\n      true: { root: 'rounded-full' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    // Icon-only button sizing — every size lands at the same height as the\n    // text button of the matching size, with a ~60–70% icon ratio (Material-3\n    // style). The `size` rule sizes icons to 12/16/20/22px for text-button\n    // prepend/append slots; here icon-only buttons get a larger glyph so they\n    // don't look lost in the square. Values are rem-based throughout: p-1 =\n    // 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; glyph sizes use rem literals.\n    // xs uses an arbitrary 0.1875rem (3px) padding — no Tailwind token hits\n    // it cleanly — to keep the 70% icon ratio with a 14px glyph.\n    //\n    // xs:           p-[0.1875rem] + 0.875rem icon = 0.375 + 0.875 = 1.25rem (20px) — 70% ratio\n    // sm:           p-1           + 1.25rem icon  = 0.5   + 1.25  = 1.75rem (28px)\n    // md (default): p-1.5         + 1.25rem icon  = 0.75  + 1.25  = 2rem    (32px)\n    // lg:           p-1.5         + 1.5rem icon   = 0.75  + 1.5   = 2.25rem (36px)\n    // xl:           p-2           + 1.75rem icon  = 1     + 1.75  = 2.75rem (44px)\n    { icon: true, class: { root: 'p-1.5 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}

package/dist/components/icons/RuiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n    sized: {\n      // When no explicit size prop is set, fall back to Tailwind classes so a\n      // parent (e.g. RuiButton) can override the icon size via CSS without\n      // competing with inline width/height attributes.\n      false: 'w-6 h-6',\n      true: '',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color, sized: get(hasExplicitSize) }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :height=\"hasExplicitSize ? size : undefined\"\n    :width=\"hasExplicitSize ? size : undefined\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  base: 'w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color }));\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,9 @@
 import { isRuiIcon } from "../../icons/index.js";
 import { useIcons } from "../../composables/icons.js";
 import { tv } from "../../utils/tv.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["height", "width"];
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "RuiIcon",
 	__name: "RuiIcon",
@@ -15,25 +14,24 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	},
 	setup(__props) {
 		const { registeredIcons } = useIcons();
-		const iconStyles = tv({ variants: {
-			color: {
+		const iconStyles = tv({
+			base: "w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]",
+			variants: { color: {
 				primary: "text-rui-primary",
 				secondary: "text-rui-secondary",
 				error: "text-rui-error",
 				warning: "text-rui-warning",
 				info: "text-rui-info",
 				success: "text-rui-success"
-			},
-			sized: {
-				false: "w-6 h-6",
-				true: ""
-			}
-		} });
+			} }
+		});
 		const hasExplicitSize = computed(() => __props.size !== void 0);
-		const ui = computed(() => iconStyles({
-			color: __props.color,
-			sized: get(hasExplicitSize)
-		}));
+		const ui = computed(() => iconStyles({ color: __props.color }));
+		const sizeStyle = computed(() => {
+			if (!get(hasExplicitSize)) return void 0;
+			const raw = String(__props.size);
+			return { "--rui-icon-size": /^\d+(?:\.\d+)?$/.test(raw) ? `${raw}px` : raw };
+		});
 		const isFill = computed(() => __props.name.endsWith("-fill"));
 		const components = computed(() => {
 			if (!isRuiIcon(__props.name)) console.warn(`icon ${__props.name} must be a valid RuiIcon`);
@@ -45,8 +43,7 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			return openBlock(), createElementBlock("svg", {
 				"aria-hidden": "true",
 				class: normalizeClass(["rui-icon", unref(ui)]),
-				height: unref(hasExplicitSize) ? __props.size : void 0,
-				width: unref(hasExplicitSize) ? __props.size : void 0,
+				style: normalizeStyle(unref(sizeStyle)),
 				viewBox: "0 0 24 24",
 				xmlns: "http://www.w3.org/2000/svg"
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
@@ -59,7 +56,7 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"fill-rule": "evenodd",
 					"clip-rule": "evenodd"
 				}), null, 16, ["fill", "stroke"]);
-			}), 128))], 10, _hoisted_1);
+			}), 128))], 6);
 		};
 	}
 });

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n    sized: {\n      // When no explicit size prop is set, fall back to Tailwind classes so a\n      // parent (e.g. RuiButton) can override the icon size via CSS without\n      // competing with inline width/height attributes.\n      false: 'w-6 h-6',\n      true: '',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color, sized: get(hasExplicitSize) }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :height=\"hasExplicitSize ? size : undefined\"\n    :width=\"hasExplicitSize ? size : undefined\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG,EACpB,UAAU;GACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IACV;GACD,OAAO;IAIL,OAAO;IACP,MAAM;;GAET,EACF,CAAC;EAEF,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,EAAU;EACnE,MAAM,KAAK,eAAuB,WAAW;GAAE,OAAI,QAAA;GAAG,OAAO,IAAI,gBAAA;GAAkB,CAAC,CAAC;EAErF,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAsBM,OAAA;IArBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,GAAE,CAAA,CAAA;IACT,QAAQ,MAAA,gBAAe,GAAG,QAAA,OAAO,KAAA;IACjC,OAAO,MAAA,gBAAe,GAAG,QAAA,OAAO,KAAA;IACjC,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  base: 'w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color }));\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IACV,EAAA;GAEJ,CAAC;EAEF,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,EAAU;EACnE,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,OAAG,CAAC,CAAC;EAUxD,MAAM,YAAY,eAAmD;AACnE,OAAI,CAAC,IAAI,gBAAgB,CACvB,QAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,KAAK;AAExB,UAAO,EAAE,mBADK,kBAAkB,KAAK,IAAI,GAAG,GAAG,IAAI,MAAM,KACtB;IACnC;EAEF,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAqBM,OAAA;IApBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,GAAE,CAAA,CAAA;IACT,OAAK,eAAE,MAAA,UAAS,CAAA;IACjB,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}

package/dist/composables/forms/auto-complete/value.js

@@ -58,7 +58,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
 			setSelected(selected);
 		}
 	});
-	watch([modelValue, () => toValue(deps.isOpen)], () => {
+	watch([value, () => toValue(deps.isOpen)], () => {
 		if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch)) return;
 		const currentValue = get(value);
 		if (toValue(deps.multiple) || currentValue.length === 0) deps.updateInternalSearch();

package/dist/composables/forms/auto-complete/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = toValue(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = toValue(opts.keyAttr);\n      const returnObject = toValue(opts.returnObject) ?? false;\n      const customValue = toValue(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n\n      if (keyAttr && returnObject)\n        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Sync search text when menu is closed and value changes\n  watch([modelValue, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAGF,OAAM,CAAC,kBAAkB,QAAQ,KAAK,OAAO,CAAC,QAAQ;AACpD,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = toValue(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = toValue(opts.keyAttr);\n      const returnObject = toValue(opts.returnObject) ?? false;\n      const customValue = toValue(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n\n      if (keyAttr && returnObject)\n        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Watching `value` (not `modelValue`) so the search text resyncs once\n  // `options` arrives later and the lookup can finally resolve.\n  watch([value, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAIF,OAAM,CAAC,aAAa,QAAQ,KAAK,OAAO,CAAC,QAAQ;AAC/C,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}

package/dist/style.css

@@ -1382,6 +1382,10 @@ html[data-theme="dark"], html.dark {
   height: calc(100% + 0.5rem);
 }
 
+.h-\[var\(--rui-icon-size\2c 1\.5rem\)\] {
+  height: var(--rui-icon-size,1.5rem);
+}
+
 .h-auto {
   height: auto;
 }
@@ -1563,6 +1567,10 @@ html[data-theme="dark"], html.dark {
   width: 3.625rem;
 }
 
+.w-\[var\(--rui-icon-size\2c 1\.5rem\)\] {
+  width: var(--rui-icon-size,1.5rem);
+}
+
 .w-auto {
   width: auto;
 }
@@ -2923,6 +2931,10 @@ html[data-theme="dark"], html.dark {
   padding: 0.25rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2943,6 +2955,10 @@ html[data-theme="dark"], html.dark {
   padding: 0.13rem;
 }
 
+.p-\[0\.1875rem\] {
+  padding: 0.1875rem;
+}
+
 .p-\[0\.5625rem\] {
   padding: 0.5625rem;
 }
@@ -2997,6 +3013,11 @@ html[data-theme="dark"], html.dark {
   padding-right: 1.5rem;
 }
 
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3037,6 +3058,11 @@ html[data-theme="dark"], html.dark {
   padding-bottom: 2rem;
 }
 
+.py-\[0\.125rem\] {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-\[0\.19rem\] {
   padding-top: 0.19rem;
   padding-bottom: 0.19rem;
@@ -3186,6 +3212,10 @@ html[data-theme="dark"], html.dark {
   line-height: 1;
 }
 
+.text-\[\.75rem\] {
+  font-size: .75rem;
+}
+
 .text-\[\.8125rem\] {
   font-size: .8125rem;
 }
@@ -3914,6 +3944,38 @@ html[data-theme="dark"], html.dark {
     scrollbar-width: none; /* Firefox */
   }
 
+.\!\[--rui-icon-size\:0\.75rem\] {
+  --rui-icon-size: 0.75rem !important;
+}
+
+.\!\[--rui-icon-size\:0\.875rem\] {
+  --rui-icon-size: 0.875rem !important;
+}
+
+.\[--rui-icon-size\:1\.125rem\] {
+  --rui-icon-size: 1.125rem;
+}
+
+.\!\[--rui-icon-size\:1\.25rem\] {
+  --rui-icon-size: 1.25rem !important;
+}
+
+.\!\[--rui-icon-size\:1\.375rem\] {
+  --rui-icon-size: 1.375rem !important;
+}
+
+.\!\[--rui-icon-size\:1\.5rem\] {
+  --rui-icon-size: 1.5rem !important;
+}
+
+.\!\[--rui-icon-size\:1\.75rem\] {
+  --rui-icon-size: 1.75rem !important;
+}
+
+.\!\[--rui-icon-size\:1rem\] {
+  --rui-icon-size: 1rem !important;
+}
+
 .\[--x-padding\:1rem\] {
   --x-padding: 1rem;
 }
@@ -5491,38 +5553,6 @@ body {
   background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
 }
 
-.\[\&_\.rui-icon\]\:\!h-4 .rui-icon {
-  height: 1rem !important;
-}
-
-.\[\&_\.rui-icon\]\:\!h-5 .rui-icon {
-  height: 1.25rem !important;
-}
-
-.\[\&_\.rui-icon\]\:\!h-\[1\.375rem\] .rui-icon {
-  height: 1.375rem !important;
-}
-
-.\[\&_\.rui-icon\]\:h-\[1\.125rem\] .rui-icon {
-  height: 1.125rem;
-}
-
-.\[\&_\.rui-icon\]\:\!w-4 .rui-icon {
-  width: 1rem !important;
-}
-
-.\[\&_\.rui-icon\]\:\!w-5 .rui-icon {
-  width: 1.25rem !important;
-}
-
-.\[\&_\.rui-icon\]\:\!w-\[1\.375rem\] .rui-icon {
-  width: 1.375rem !important;
-}
-
-.\[\&_\.rui-icon\]\:w-\[1\.125rem\] .rui-icon {
-  width: 1.125rem;
-}
-
 .\[\&_input\]\:\!pr-0 input {
   padding-right: 0px !important;
 }

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.17.0",
+  "version": "2.17.2",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.17.0",
+  "version": "2.17.2",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [
@@ -98,43 +98,41 @@
   },
   "devDependencies": {
     "@fontsource/roboto": "5.2.10",
-    "@storybook/addon-a11y": "10.3.4",
-    "@storybook/addon-docs": "10.3.4",
-    "@storybook/addon-links": "10.3.4",
-    "@storybook/addon-themes": "10.3.4",
-    "@storybook/addon-vitest": "10.3.4",
-    "@storybook/vue3-vite": "10.3.4",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-themes": "10.3.5",
+    "@storybook/addon-vitest": "10.3.5",
+    "@storybook/vue3-vite": "10.3.5",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
     "@types/node": "24.12.2",
     "@types/tinycolor2": "1.4.6",
-    "@vitejs/plugin-vue": "6.0.5",
-    "@vitest/browser": "4.1.2",
-    "@vitest/browser-playwright": "4.1.2",
-    "@vitest/coverage-v8": "4.1.2",
-    "@vitest/ui": "4.1.2",
+    "@vitejs/plugin-vue": "6.0.6",
+    "@vitest/browser": "4.1.4",
+    "@vitest/browser-playwright": "4.1.4",
+    "@vitest/coverage-v8": "4.1.4",
+    "@vitest/ui": "4.1.4",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.9.1",
-    "autoprefixer": "10.4.27",
+    "autoprefixer": "10.5.0",
     "cac": "7.0.0",
     "consola": "3.4.2",
     "fast-glob": "3.3.3",
-    "fast-xml-parser": "5.5.10",
+    "fast-xml-parser": "5.5.12",
     "fs-extra": "11.3.4",
-    "happy-dom": "20.8.9",
-    "jsdom": "28.1.0",
+    "happy-dom": "20.9.0",
     "lucide": "0.577.0",
-    "msw": "2.13.0",
-    "postcss": "8.5.8",
-    "storybook": "10.3.4",
+    "msw": "2.13.3",
+    "postcss": "8.5.9",
+    "storybook": "10.3.5",
     "tailwindcss": "3.4.19",
     "tsc-alias": "1.8.16",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "unplugin-auto-import": "21.0.0",
-    "vite": "8.0.7",
+    "vite": "8.0.8",
     "vite-plugin-vue-devtools": "8.1.1",
-    "vitest": "4.1.2",
+    "vitest": "4.1.4",
     "vue": "3.5.32",
     "vue-component-meta": "3.2.6",
     "vue-router": "5.0.4",