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

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,qDAAqD,CAAC;EAEnF,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,MAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,MAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAA,cAcM,CAbE,WAAA,SADR,UAAA,GAAA,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;MAA6C,8BAAA,CAAA,QAAA;MAAiD,gCAAA,QAAA,UAAK;MAA2D,mCAAA,QAAA,UAAK;;KAK7M,OAAO,MAAA,KAAA;IACKA,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nconst rootStyle = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAGF,MAAM,YAAY,GAAG,EAAE,MAAM,oHAAoH,CAAC;EAElJ,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,MAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,MAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAA,cAcM,CAbE,WAAA,SADR,UAAA,GAAA,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;MAAoD,qCAAA,CAAA,QAAA;MAAsF,qEAAA,QAAA,UAAK;MAA0F,kEAAA,QAAA,UAAK;;KAKxR,OAAO,MAAA,KAAA;IACKA,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/overlays/tooltip/RuiTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/tooltip/RuiTooltip.vue.d.ts

@@ -1,6 +1,5 @@
 import type { VueClassValue } from '../../../types/class-value';
 import { type FloatingOptions } from '../../../composables/floating.js';
-import { type PopperOptions } from '../../../composables/popper.js';
 export interface RuiTooltipClassNames {
     root?: VueClassValue;
     tooltip?: VueClassValue;
@@ -13,11 +12,7 @@ export interface Props {
     closeDelay?: number;
     persistOnTooltipHover?: boolean;
     options?: FloatingOptions;
-    /** @deprecated Use `options` instead */
-    popper?: PopperOptions;
     classNames?: RuiTooltipClassNames;
-    /** @deprecated Use `classNames.tooltip` instead */
-    tooltipClass?: string;
 }
 type __VLS_Slots = {
     activator?: (props: {

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,16 @@
 import { cn, tv } from "../../../utils/tv.js";
+import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFloating } from "../../../composables/floating.js";
-import { toFloatingOptions } from "../../../composables/popper.js";
 import { tooltipStyles } from "./tooltip-styles.js";
 import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/overlays/tooltip/RuiTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
-var _hoisted_2 = ["id", "data-placement"];
+var _hoisted_2 = [
+	"id",
+	"role",
+	"data-placement"
+];
 var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTooltip",
 	inheritAttrs: false,
@@ -28,14 +32,13 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			default: false
 		},
 		options: {},
-		popper: {},
-		classNames: {},
-		tooltipClass: { default: "" }
+		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rootStyle = tv({ base: "relative inline-flex" });
+		const popoverStyle = tv({ base: "w-max max-w-rui-tooltip z-rui-tooltip" });
 		const tooltipId = useId();
-		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
+		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
 		const placementSide = computed(() => {
 			const placement = get(currentPlacement);
 			if (placement.startsWith("top")) return "top";
@@ -73,8 +76,8 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				id: unref(tooltipId),
 				ref_key: "tooltip",
 				ref: tooltip,
-				class: normalizeClass(["w-max z-[9999]", __props.classNames?.tooltip ?? __props.tooltipClass]),
-				role: "tooltip",
+				class: normalizeClass(unref(popoverStyle)({ class: unref(cn)(__props.classNames?.tooltip) })),
+				role: unref(open) ? "tooltip" : void 0,
 				"data-placement": unref(currentPlacement)
 			}, [createVNode(TransitionGroup, {
 				"enter-active-class": "transition ease-out duration-200",
@@ -88,11 +91,14 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}, {
 				default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", {
 					key: "tooltip",
-					class: "px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow",
+					class: "px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip",
 					"data-id": "content",
 					onMouseover: _cache[0] || (_cache[0] = ($event) => __props.persistOnTooltipHover && unref(onOpen)()),
 					onMouseleave: _cache[1] || (_cache[1] = ($event) => __props.persistOnTooltipHover && unref(onClose)())
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 32)) : createCommentVNode("", true), !__props.hideArrow ? (openBlock(), createElementBlock("span", {
+				}, [createVNode(unref(ButtonGroupBoundary), null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])]),
+					_: 3
+				})], 32)) : createCommentVNode("", true), !__props.hideArrow ? (openBlock(), createElementBlock("span", {
 					key: "arrow",
 					class: normalizeClass(unref(tooltipStyles)({
 						open: unref(open),

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/tooltip/tooltip-styles.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the
+ * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders
+ * met, and a square has no such join. Being symmetric, it needs no rotation per side.
+ */
 export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -10,19 +15,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {
@@ -40,19 +41,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {
@@ -70,19 +67,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {

package/dist/components/overlays/tooltip/tooltip-styles.js

@@ -1,9 +1,14 @@
 import { tv } from "../../../utils/tv.js";
 //#region src/components/overlays/tooltip/tooltip-styles.ts
+/**
+* The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the
+* bubble in the same color. A triangle drawn from two borders showed a hairline where the borders
+* met, and a square has no such join. Being symmetric, it needs no rotation per side.
+*/
 var tooltipStyles = tv({
 	slots: {
-		arrow: "absolute block w-2.5 h-2.5 transition-opacity",
-		diamond: "block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]"
+		arrow: "absolute block size-2 transition-opacity",
+		diamond: "block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700"
 	},
 	variants: {
 		open: {
@@ -11,22 +16,10 @@ var tooltipStyles = tv({
 			false: { arrow: "opacity-0" }
 		},
 		side: {
-			top: {
-				arrow: "bottom-[calc(0.5px-0.3125rem)]",
-				diamond: "rotate-[135deg]"
-			},
-			bottom: {
-				arrow: "top-[calc(0.5px-0.3125rem)]",
-				diamond: "-rotate-45"
-			},
-			left: {
-				arrow: "right-[calc(0.5px-0.3125rem)]",
-				diamond: "rotate-45"
-			},
-			right: {
-				arrow: "left-[calc(0.5px-0.3125rem)]",
-				diamond: "-rotate-[135deg]"
-			}
+			top: { arrow: "-bottom-1" },
+			bottom: { arrow: "-top-1" },
+			left: { arrow: "-right-1" },
+			right: { arrow: "-left-1" }
 		}
 	},
 	defaultVariants: {

package/dist/components/overlays/tooltip/tooltip-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block w-2.5 h-2.5 transition-opacity',\n    diamond: 'block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: {\n        arrow: 'bottom-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-[135deg]',\n      },\n      bottom: {\n        arrow: 'top-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-45',\n      },\n      left: {\n        arrow: 'right-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-45',\n      },\n      right: {\n        arrow: 'left-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-[135deg]',\n      },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;AAEA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK;IACH,OAAO;IACP,SAAS;GACX;GACA,QAAQ;IACN,OAAO;IACP,SAAS;GACX;GACA,MAAM;IACJ,OAAO;IACP,SAAS;GACX;GACA,OAAO;IACL,OAAO;IACP,SAAS;GACX;EACF;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC"}
+{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the\n * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders\n * met, and a square has no such join. Being symmetric, it needs no rotation per side.\n */\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block size-2 transition-opacity',\n    // eslint-disable-next-line better-tailwindcss/no-restricted-classes -- the tip of the arrow is geometry, not a surface's corner\n    diamond: 'block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: { arrow: '-bottom-1' },\n      bottom: { arrow: '-top-1' },\n      left: { arrow: '-right-1' },\n      right: { arrow: '-left-1' },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK,EAAE,OAAO,YAAY;GAC1B,QAAQ,EAAE,OAAO,SAAS;GAC1B,MAAM,EAAE,OAAO,WAAW;GAC1B,OAAO,EAAE,OAAO,UAAU;EAC5B;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.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   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 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":""}
+{"version":3,"file":"RuiProgress.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   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 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   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: 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  ariaLabel = 'Loading',\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\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 rounded-full',\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: '',\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 text-rui-text-secondary tabular-nums' } },\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 font-medium tabular-nums whitespace-nowrap' } },\n  ],\n  compoundSlots: [\n    // Track behind the bar: one neutral for every named color, neutral-700 in dark like the footer stepper pills, which reads on a near-black page\n    { slots: ['rail'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n    { slots: ['bufferDots'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'border-rui-neutral-200 dark:border-rui-neutral-700' },\n    { slots: ['circleTrack'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'stroke-rui-neutral-200 dark:stroke-rui-neutral-700' },\n    // `inherit` keeps a tint of whatever color it is given\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n    { slots: ['circleTrack'], color: 'inherit', class: 'stroke-current opacity-20' },\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\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\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\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\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 label inside the ring scales with both `size` and `thickness`. The fit 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  fontSize: `${Math.min(get(insideLabelFit), +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  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\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=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\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 && labelFits\"\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=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\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        data-id=\"progress-rail\"\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":""}

package/dist/components/progress/RuiProgress.vue.d.ts

@@ -23,6 +23,10 @@ export interface Props {
      * only used for circular progress
      */
     size?: number | string;
+    /**
+     * What is loading, as the progress bar's accessible name ("Loading" when not given)
+     */
+    ariaLabel?: string;
 }
 type __VLS_Slots = Record<string, never>;
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -6,7 +6,9 @@ import { get } from "@vueuse/shared";
 var _hoisted_1 = [
 	"aria-valuenow",
 	"data-variant",
-	"data-color"
+	"data-color",
+	"aria-label",
+	"title"
 ];
 var _hoisted_2 = ["viewBox"];
 var _hoisted_3 = ["stroke-width"];
@@ -14,12 +16,15 @@ var _hoisted_4 = ["stroke-width"];
 var _hoisted_5 = [
 	"aria-valuenow",
 	"data-variant",
-	"data-color"
+	"data-color",
+	"aria-label"
 ];
 var CIRCLE_RADIUS = 20;
-var LABEL_WIDTH_EM = 2.5;
+var LABEL_WIDTH_EM = 2.95;
 /** keeps the label off the stroke rather than merely inside it */
-var LABEL_BREATHING_ROOM = .85;
+var LABEL_BREATHING_ROOM = .9;
+/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */
+var MIN_INSIDE_LABEL_PX = 9;
 var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiProgress",
 	__name: "RuiProgress",
@@ -37,18 +42,19 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			default: false
 		},
 		thickness: { default: 4 },
-		size: { default: 40 }
+		size: { default: 40 },
+		ariaLabel: { default: "Loading" }
 	},
 	setup(__props) {
 		const CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;
-		/** approximate width of `100%` in ems */
+		/** width of `100%` in ems, measured with tabular figures */
 		function clampPercent(val) {
 			return Math.max(0, Math.min(val ?? 100, 100));
 		}
 		const progressStyles = tv({
 			slots: {
 				wrapper: "",
-				progressbar: "w-full overflow-hidden relative",
+				progressbar: "w-full overflow-hidden relative rounded-full",
 				rail: "w-full h-full",
 				bar: "transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full",
 				indeterminateBar: "absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail",
@@ -57,7 +63,7 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				circularContainer: "inline-block relative",
 				svg: "block",
 				circle: "stroke-current",
-				circleTrack: "stroke-current opacity-20",
+				circleTrack: "",
 				label: "text-rui-text"
 			},
 			variants: {
@@ -87,47 +93,58 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			compoundVariants: [{
 				circular: false,
 				hasLabel: true,
-				class: { label: "block text-sm ml-4" }
+				class: { label: "block text-sm ml-4 text-rui-text-secondary tabular-nums" }
 			}, {
 				circular: true,
 				hasLabel: true,
-				class: { label: "absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap" }
+				class: { label: "absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap" }
 			}],
 			compoundSlots: [
 				{
-					slots: ["rail", "bufferDots"],
-					color: "primary",
-					class: "bg-rui-primary/20 border-rui-primary/20"
+					slots: ["rail"],
+					color: [
+						"primary",
+						"secondary",
+						"error",
+						"warning",
+						"info",
+						"success"
+					],
+					class: "bg-rui-neutral-200 dark:bg-rui-neutral-700"
 				},
 				{
-					slots: ["rail", "bufferDots"],
-					color: "secondary",
-					class: "bg-rui-secondary/20 border-rui-secondary/20"
+					slots: ["bufferDots"],
+					color: [
+						"primary",
+						"secondary",
+						"error",
+						"warning",
+						"info",
+						"success"
+					],
+					class: "border-rui-neutral-200 dark:border-rui-neutral-700"
 				},
 				{
-					slots: ["rail", "bufferDots"],
-					color: "error",
-					class: "bg-rui-error/20 border-rui-error/20"
+					slots: ["circleTrack"],
+					color: [
+						"primary",
+						"secondary",
+						"error",
+						"warning",
+						"info",
+						"success"
+					],
+					class: "stroke-rui-neutral-200 dark:stroke-rui-neutral-700"
 				},
 				{
 					slots: ["rail", "bufferDots"],
-					color: "warning",
-					class: "bg-rui-warning/20 border-rui-warning/20"
-				},
-				{
-					slots: ["rail", "bufferDots"],
-					color: "info",
-					class: "bg-rui-info/20 border-rui-info/20"
-				},
-				{
-					slots: ["rail", "bufferDots"],
-					color: "success",
-					class: "bg-rui-success/20 border-rui-success/20"
+					color: "inherit",
+					class: "bg-current opacity-20 border-current"
 				},
 				{
-					slots: ["rail", "bufferDots"],
+					slots: ["circleTrack"],
 					color: "inherit",
-					class: "bg-current opacity-20 border-current"
+					class: "stroke-current opacity-20"
 				},
 				{
 					slots: ["bar", "indeterminateBar"],
@@ -167,6 +184,15 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			]
 		});
 		const hasLabel = computed(() => __props.showLabel && __props.variant !== ProgressVariant.indeterminate);
+		/**
+		* The font size that fits the widest label (`100%`) inside the ring, solved against the chord
+		* it spans. Always computed for that widest label so the text does not resize as the value climbs.
+		*/
+		const insideLabelFit = computed(() => {
+			const innerRadius = Math.max((+__props.size - 2 * +__props.thickness) / 2, 0);
+			return LABEL_BREATHING_ROOM * 2 * innerRadius / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);
+		});
+		const labelFits = computed(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);
 		const ui = computed(() => progressStyles({
 			color: __props.color,
 			variant: __props.variant,
@@ -174,6 +200,8 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			hasLabel: get(hasLabel)
 		}));
 		const currentValue = computed(() => clampPercent(__props.value));
+		/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */
+		const ariaValueNow = computed(() => __props.variant === ProgressVariant.indeterminate ? void 0 : get(currentValue));
 		const label = computed(() => `${Math.floor(get(currentValue))}%`);
 		const progress = computed(() => -100 + get(currentValue));
 		const barStyle = computed(() => ({ transform: `translateX(${get(progress)}%)` }));
@@ -191,29 +219,25 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			};
 		});
 		/**
-		* 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
+		* The label inside the ring scales with both `size` and `thickness`. The fit 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 circularLabelStyle = computed(() => ({ fontSize: `${Math.min(get(insideLabelFit), +__props.size * .15 + 6)}px` }));
 		const circularStrokeStyle = computed(() => ({
 			strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,
 			strokeDashoffset: `${get(progress) / 100 * -CIRCLE_CIRCUMFERENCE}`,
-			transition: "stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+			transition: "stroke-dashoffset 200ms ease-out"
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).wrapper()) }, [__props.circular && __props.variant !== unref(ProgressVariant).buffer ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				"aria-valuenow": __props.value,
+				"aria-valuenow": unref(ariaValueNow),
 				class: normalizeClass(unref(ui).circularContainer()),
 				style: normalizeStyle(unref(circularSize)),
 				"data-variant": __props.variant,
 				"data-color": __props.color,
+				"aria-label": __props.ariaLabel,
+				title: unref(hasLabel) && !unref(labelFits) ? unref(label) : void 0,
 				"aria-valuemax": "100",
 				"aria-valuemin": "0",
 				role: "progressbar"
@@ -236,18 +260,19 @@ 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_4)], 10, _hoisted_2)), unref(hasLabel) ? (openBlock(), createElementBlock("div", {
+			}, null, 14, _hoisted_4)], 10, _hoisted_2)), unref(hasLabel) && unref(labelFits) ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				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,
+				"aria-valuenow": unref(ariaValueNow),
 				class: normalizeClass(unref(ui).progressbar()),
 				style: normalizeStyle(unref(linearStyle)),
 				"data-variant": __props.variant,
 				"data-color": __props.color,
+				"aria-label": __props.ariaLabel,
 				"aria-valuemax": "100",
 				"aria-valuemin": "0",
 				role: "progressbar"
@@ -258,7 +283,8 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				}, null, 2)) : createCommentVNode("", true),
 				createElementVNode("div", {
 					class: normalizeClass(__props.variant === unref(ProgressVariant).buffer ? [unref(ui).rail(), unref(ui).bufferRail()] : unref(ui).rail()),
-					style: normalizeStyle(__props.variant === unref(ProgressVariant).buffer ? unref(bufferRailStyle) : void 0)
+					style: normalizeStyle(__props.variant === unref(ProgressVariant).buffer ? unref(bufferRailStyle) : void 0),
+					"data-id": "progress-rail"
 				}, null, 6),
 				__props.variant === unref(ProgressVariant).indeterminate ? (openBlock(), createElementBlock("div", {
 					key: 1,