@rotki/ui-library 2.19.1 → 2.19.3

package/dist/components/forms/text-input-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"{ '--rui-legend': labelWithQuote }\"` on the legend element.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n    ].join(' '),\n    legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    // `w-full inline-flex flex-col` so the activator fills its parent\n    // regardless of context (block, flex-row, grid). A consumer-passed\n    // width utility like `w-[20rem]` would normally collide with `w-full`\n    // on the same element and lose to cascade order; RuiAutoComplete /\n    // RuiMenuSelect / RuiDateTimePicker route consumer classes through\n    // `ui.wrapper({ class })` so tailwind-variants' twMerge deduplicates\n    // and the consumer's width wins.\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding when label is floated\n    { float: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"{ '--rui-legend': labelWithQuote }\"` on the legend element.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n      // Force the fieldset onto its own GPU compositing layer so the\n      // focused border is rasterized on integer pixel boundaries. Without\n      // this, at fractional y-coordinates with non-integer device pixel\n      // ratios (e.g. DPR 1.25), Chromium anti-aliases the 1.6px-2px focus\n      // border across two physical pixel rows behind the floated label,\n      // appearing as \"two thin lines crossing the label\". translateZ(0)\n      // promotes to a layer; the layer's raster snaps to integer pixels.\n      'transform-gpu',\n    ].join(' '),\n    legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    // `w-full inline-flex flex-col` so the activator fills its parent\n    // regardless of context (block, flex-row, grid). A consumer-passed\n    // width utility like `w-[20rem]` would normally collide with `w-full`\n    // on the same element and lose to cascade order; RuiAutoComplete /\n    // RuiMenuSelect / RuiDateTimePicker route consumer classes through\n    // `ui.wrapper({ class })` so tailwind-variants' twMerge deduplicates\n    // and the consumer's width wins.\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n    // Re-declare for type inference — actual styles are in textInputBase\n    hovered: { true: {} },\n  },\n  compoundVariants: [\n    // Legend padding when label is floated\n    { float: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":"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"}

package/dist/composables/forms/use-prepend-append-width.js

@@ -1,22 +1,20 @@
 import { assert } from "../../utils/assert.js";
 import { shallowRef } from "vue";
 import { useResizeObserver } from "@vueuse/core";
-import { set as set$1 } from "@vueuse/shared";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/composables/forms/use-prepend-append-width.ts
 function usePrependAppendWidth(prepend, append, offset = 0) {
 	const prependWidth = shallowRef("0px");
 	const appendWidth = shallowRef("0px");
-	useResizeObserver(prepend, (entries) => {
-		const [entry] = entries;
-		assert(entry);
-		const { width, left } = entry.contentRect;
-		set$1(prependWidth, `${width + left + offset}px`);
+	useResizeObserver(prepend, () => {
+		const target = get$1(prepend);
+		assert(target);
+		set$1(prependWidth, `${target.offsetWidth + offset}px`);
 	});
-	useResizeObserver(append, (entries) => {
-		const [entry] = entries;
-		assert(entry);
-		const { width, right } = entry.contentRect;
-		set$1(appendWidth, `${width + right + offset}px`);
+	useResizeObserver(append, () => {
+		const target = get$1(append);
+		assert(target);
+		set$1(appendWidth, `${target.offsetWidth + offset}px`);
 	});
 	return {
 		prependWidth,

package/dist/composables/forms/use-prepend-append-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n  prependWidth: Ref<string>;\n  appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n  prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n  append: Readonly<ShallowRef<HTMLDivElement | null>>,\n  offset: number = 0,\n): PrependAppendWidth {\n  const prependWidth = shallowRef<string>('0px');\n  const appendWidth = shallowRef<string>('0px');\n\n  useResizeObserver(prepend, (entries) => {\n    const [entry] = entries;\n    assert(entry);\n    const { width, left } = entry.contentRect;\n    set(prependWidth, `${width + left + offset}px`);\n  });\n\n  useResizeObserver(append, (entries) => {\n    const [entry] = entries;\n    assert(entry);\n    const { width, right } = entry.contentRect;\n    set(appendWidth, `${width + right + offset}px`);\n  });\n\n  return { prependWidth, appendWidth };\n}\n"],"mappings":";;;;;AAQA,SAAgB,sBACd,SACA,QACA,SAAiB,GACG;CACpB,MAAM,eAAe,WAAmB,MAAM;CAC9C,MAAM,cAAc,WAAmB,MAAM;AAE7C,mBAAkB,UAAU,YAAY;EACtC,MAAM,CAAC,SAAS;AAChB,SAAO,MAAM;EACb,MAAM,EAAE,OAAO,SAAS,MAAM;AAC9B,QAAI,cAAc,GAAG,QAAQ,OAAO,OAAO,IAAI;GAC/C;AAEF,mBAAkB,SAAS,YAAY;EACrC,MAAM,CAAC,SAAS;AAChB,SAAO,MAAM;EACb,MAAM,EAAE,OAAO,UAAU,MAAM;AAC/B,QAAI,aAAa,GAAG,QAAQ,QAAQ,OAAO,IAAI;GAC/C;AAEF,QAAO;EAAE;EAAc;EAAa"}
+{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n  prependWidth: Ref<string>;\n  appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n  prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n  append: Readonly<ShallowRef<HTMLDivElement | null>>,\n  offset: number = 0,\n): PrependAppendWidth {\n  const prependWidth = shallowRef<string>('0px');\n  const appendWidth = shallowRef<string>('0px');\n\n  // Measure the element's outer (border-box) width so callers get the full\n  // space the prepend/append region occupies — including both left and\n  // right padding. The previous `contentRect.width + contentRect.left` form\n  // added padding-left but silently dropped padding-right, so a prepend\n  // slot styled with `pr-3` (only) reported 12px short of its real width\n  // and the floated label landed under the icon's trailing padding instead\n  // of aligned with the input text.\n  useResizeObserver(prepend, () => {\n    const target = get(prepend);\n    assert(target);\n    set(prependWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  useResizeObserver(append, () => {\n    const target = get(append);\n    assert(target);\n    set(appendWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  return { prependWidth, appendWidth };\n}\n"],"mappings":";;;;;AAQA,SAAgB,sBACd,SACA,QACA,SAAiB,GACG;CACpB,MAAM,eAAe,WAAmB,MAAM;CAC9C,MAAM,cAAc,WAAmB,MAAM;AAS7C,mBAAkB,eAAe;EAC/B,MAAM,SAAS,MAAI,QAAQ;AAC3B,SAAO,OAAO;AACd,QAAI,cAAc,GAAG,OAAO,cAAc,OAAO,IAAI;GACrD;AAEF,mBAAkB,cAAc;EAC9B,MAAM,SAAS,MAAI,OAAO;AAC1B,SAAO,OAAO;AACd,QAAI,aAAa,GAAG,OAAO,cAAc,OAAO,IAAI;GACpD;AAEF,QAAO;EAAE;EAAc;EAAa"}

package/dist/style.css

@@ -1742,6 +1742,11 @@ html[data-theme="dark"], html.dark {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-\[0\.5rem\] {
+  --tw-translate-y: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1844,6 +1849,10 @@ html[data-theme="dark"], html.dark {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.transform-gpu {
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes buffer-pulse {
 
   0% {
@@ -3310,6 +3319,10 @@ html[data-theme="dark"], html.dark {
   text-transform: capitalize;
 }
 
+.\!leading-tight {
+  line-height: 1.25 !important;
+}
+
 .leading-3 {
   line-height: .75rem;
 }

package/dist/web-types.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.19.1",
+  "version": "2.19.3",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [