@rotki/ui-library 2.23.2 → 2.23.4

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js

@@ -10,12 +10,16 @@ var _hoisted_1 = [
 ];
 var _hoisted_2 = ["viewBox"];
 var _hoisted_3 = ["stroke-width"];
-var _hoisted_4 = [
+var _hoisted_4 = ["stroke-width"];
+var _hoisted_5 = [
 	"aria-valuenow",
 	"data-variant",
 	"data-color"
 ];
 var CIRCLE_RADIUS = 20;
+var LABEL_WIDTH_EM = 2.5;
+/** keeps the label off the stroke rather than merely inside it */
+var LABEL_BREATHING_ROOM = .85;
 var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiProgress",
 	__name: "RuiProgress",
@@ -37,6 +41,7 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	},
 	setup(__props) {
 		const CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;
+		/** approximate width of `100%` in ems */
 		function clampPercent(val) {
 			return Math.max(0, Math.min(val ?? 100, 100));
 		}
@@ -52,7 +57,8 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				circularContainer: "inline-block relative",
 				svg: "block",
 				circle: "stroke-current",
-				label: "dark:text-white"
+				circleTrack: "stroke-current opacity-20",
+				label: "text-rui-text"
 			},
 			variants: {
 				color: {
@@ -85,7 +91,7 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}, {
 				circular: true,
 				hasLabel: true,
-				class: { label: "absolute inset-0 flex items-center justify-center text-[0.6rem] leading-none" }
+				class: { label: "absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap" }
 			}],
 			compoundSlots: [
 				{
@@ -184,6 +190,17 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				viewSize: 40 + scaledThickness
 			};
 		});
+		/**
+		* The circular label lives inside the ring, so it scales with both `size` and `thickness`.
+		* `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed
+		* for that widest label so the text does not resize as the value climbs. It is capped by
+		* a sublinear curve so large rings do not end up with an oversized number in the middle.
+		*/
+		const circularLabelStyle = computed(() => {
+			const innerRadius = Math.max((+__props.size - 2 * +__props.thickness) / 2, 0);
+			const fit = LABEL_BREATHING_ROOM * 2 * innerRadius / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);
+			return { fontSize: `${Math.min(fit, +__props.size * .15 + 6)}px` };
+		});
 		const circularStrokeStyle = computed(() => ({
 			strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,
 			strokeDashoffset: `${get(progress) / 100 * -CIRCLE_CIRCUMFERENCE}`,
@@ -203,7 +220,15 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}, [(openBlock(), createElementBlock("svg", {
 				class: normalizeClass(unref(ui).svg()),
 				viewBox: `0 0 ${unref(circularGeometry).viewSize} ${unref(circularGeometry).viewSize}`
-			}, [createElementVNode("circle", {
+			}, [__props.variant === unref(ProgressVariant).determinate ? (openBlock(), createElementBlock("circle", {
+				key: 0,
+				cx: "50%",
+				cy: "50%",
+				fill: "none",
+				r: CIRCLE_RADIUS,
+				class: normalizeClass(unref(ui).circleTrack()),
+				"stroke-width": unref(circularGeometry).scaledThickness
+			}, null, 10, _hoisted_3)) : createCommentVNode("", true), createElementVNode("circle", {
 				cx: "50%",
 				cy: "50%",
 				fill: "none",
@@ -211,10 +236,12 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				class: normalizeClass(unref(ui).circle()),
 				style: normalizeStyle(__props.variant === unref(ProgressVariant).determinate ? unref(circularStrokeStyle) : void 0),
 				"stroke-width": unref(circularGeometry).scaledThickness
-			}, null, 14, _hoisted_3)], 10, _hoisted_2)), unref(hasLabel) ? (openBlock(), createElementBlock("div", {
+			}, null, 14, _hoisted_4)], 10, _hoisted_2)), unref(hasLabel) ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(unref(ui).label())
-			}, toDisplayString(unref(label)), 3)) : createCommentVNode("", true)], 14, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(ui).label()),
+				style: normalizeStyle(unref(circularLabelStyle)),
+				"aria-hidden": "true"
+			}, toDisplayString(unref(label)), 7)) : createCommentVNode("", true)], 14, _hoisted_1)) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				"aria-valuenow": __props.value,
 				class: normalizeClass(unref(ui).progressbar()),
@@ -241,7 +268,7 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					class: normalizeClass(unref(ui).bar()),
 					style: normalizeStyle(unref(barStyle))
 				}, null, 6))
-			], 14, _hoisted_4)), unref(hasLabel) && !__props.circular ? (openBlock(), createElementBlock("div", {
+			], 14, _hoisted_5)), unref(hasLabel) && !__props.circular ? (openBlock(), createElementBlock("div", {
 				key: 2,
 				class: normalizeClass(unref(ui).label())
 			}, toDisplayString(unref(label)), 3)) : createCommentVNode("", true)], 2);

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 100\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    label: 'dark:text-white',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center text-[0.6rem] leading-none' } },\n  ],\n  compoundSlots: [\n    // Rail background (track behind the bar)\n    { slots: ['rail', 'bufferDots'], color: 'primary', class: 'bg-rui-primary/20 border-rui-primary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'secondary', class: 'bg-rui-secondary/20 border-rui-secondary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'error', class: 'bg-rui-error/20 border-rui-error/20' },\n    { slots: ['rail', 'bufferDots'], color: 'warning', class: 'bg-rui-warning/20 border-rui-warning/20' },\n    { slots: ['rail', 'bufferDots'], color: 'info', class: 'bg-rui-info/20 border-rui-info/20' },\n    { slots: ['rail', 'bufferDots'], color: 'success', class: 'bg-rui-success/20 border-rui-success/20' },\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"value\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"value\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 100\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** approximate width of `100%` in ems */\nconst LABEL_WIDTH_EM = 2.5;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.85;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    circleTrack: 'stroke-current opacity-20',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\n  ],\n  compoundSlots: [\n    // Rail background (track behind the bar)\n    { slots: ['rail', 'bufferDots'], color: 'primary', class: 'bg-rui-primary/20 border-rui-primary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'secondary', class: 'bg-rui-secondary/20 border-rui-secondary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'error', class: 'bg-rui-error/20 border-rui-error/20' },\n    { slots: ['rail', 'bufferDots'], color: 'warning', class: 'bg-rui-warning/20 border-rui-warning/20' },\n    { slots: ['rail', 'bufferDots'], color: 'info', class: 'bg-rui-info/20 border-rui-info/20' },\n    { slots: ['rail', 'bufferDots'], color: 'success', class: 'bg-rui-success/20 border-rui-success/20' },\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n  return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"value\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"value\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/style.css

@@ -1011,15 +1011,18 @@ html[data-theme="dark"], html.dark {
 .right-1 {
   right: 0.25rem;
 }
+.right-10 {
+  right: 2.5rem;
+}
+.right-16 {
+  right: 4rem;
+}
 .right-2 {
   right: 0.5rem;
 }
 .right-3 {
   right: 0.75rem;
 }
-.right-8 {
-  right: 2rem;
-}
 .right-\[calc\(0\.5px-0\.3125rem\)\] {
   right: calc(0.5px - 0.3125rem);
 }
@@ -3253,6 +3256,11 @@ html[data-theme="dark"], html.dark {
 .outline-transparent {
   outline-color: transparent;
 }
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.23.2",
+  "version": "2.23.4",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -7262,7 +7262,7 @@
             },
             {
               "name": "persistent",
-              "description": "",
+              "description": "Keeps the menu open through the interactions that would otherwise dismiss\nit: a click outside and an Escape press. A programmatic close (`v-model`\nset to `false`) still applies.",
               "required": false,
               "default": "false",
               "value": {

package/package.json

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