@rotki/ui-library 2.23.3 → 2.23.5

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

@@ -1,10 +1,11 @@
 import { useIcons } from "../../composables/icons.js";
-import { tv } from "../../utils/tv.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
-import { get } from "@vueuse/shared";
+import { cn, tv } from "../../utils/tv.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
+import { get, objectOmit } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
+	inheritAttrs: false,
 	__name: "RuiIcon",
 	props: {
 		name: {},
@@ -25,7 +26,12 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			} }
 		});
 		const hasExplicitSize = computed(() => __props.size !== void 0);
-		const ui = computed(() => iconStyles({ color: __props.color }));
+		function ui(attrsClass) {
+			return iconStyles({
+				color: __props.color,
+				class: cn(attrsClass)
+			});
+		}
 		const sizeStyle = computed(() => {
 			if (!get(hasExplicitSize)) return void 0;
 			const raw = String(__props.size);
@@ -38,13 +44,13 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			return found;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", {
+			return openBlock(), createElementBlock("svg", mergeProps({
 				"aria-hidden": "true",
-				class: normalizeClass(["rui-icon", unref(ui)]),
-				style: normalizeStyle(unref(sizeStyle)),
+				class: ["rui-icon", ui(_ctx.$attrs.class)],
+				style: unref(sizeStyle),
 				viewBox: "0 0 24 24",
 				xmlns: "http://www.w3.org/2000/svg"
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
+			}, unref(objectOmit)(_ctx.$attrs, ["class"])), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
 				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1], {
 					fill: !unref(isFill) ? "none" : "currentColor",
 					stroke: !unref(isFill) ? "currentColor" : "none",
@@ -54,7 +60,7 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"fill-rule": "evenodd",
 					"clip-rule": "evenodd"
 				}), null, 16, ["fill", "stroke"]);
-			}), 128))], 6);
+			}), 128))], 16);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { useIcons } from '@/composables/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  // `shrink-0` keeps the icon at its declared `--rui-icon-size` when it sits\n  // in a flex container next to a long flex-grow sibling (e.g. a `w-full`\n  // button label in `variant=\"list\"`). Without it, the SVG — even with an\n  // explicit width — gets compressed along the main axis when the row is\n  // narrower than the label's intrinsic width, while the height stays put,\n  // producing a sliver glyph. The icon's box is always intentionally driven\n  // by `--rui-icon-size`, so flex shrinking is never the desired behavior.\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color }));\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n// What is registered is the only thing that matters here. An app may register\n// its own icons through `createRui({ theme: { icons } })` — brand logos, since\n// the library carries none — and those names can never appear in the generated\n// `RuiIcons` list, so validating against that list warned for precisely the\n// icons the registration API exists to support. A genuinely unknown name is\n// still caught below, by the check that decides whether anything renders.\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,SAAS;EAIrC,MAAM,aAAa,GAAG;GAQpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAClE,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;EAUvD,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;EAQ7D,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;uBAIC,mBAqBM,OAAA;IApBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,EAAA,CAAE,CAAA;IACT,OAAK,eAAE,MAAA,SAAA,CAAS;IACjB,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,UAAA,IAArB,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,EAAA,GADhB,WAYE,EATC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // the svg is the only root, so a fallthrough class would land beside the\n  // variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  // `shrink-0` keeps the icon at its declared `--rui-icon-size` when it sits\n  // in a flex container next to a long flex-grow sibling (e.g. a `w-full`\n  // button label in `variant=\"list\"`). Without it, the SVG — even with an\n  // explicit width — gets compressed along the main axis when the row is\n  // narrower than the label's intrinsic width, while the height stays put,\n  // producing a sliver glyph. The icon's box is always intentionally driven\n  // by `--rui-icon-size`, so flex shrinking is never the desired behavior.\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n// What is registered is the only thing that matters here. An app may register\n// its own icons through `createRui({ theme: { icons } })` — brand logos, since\n// the library carries none — and those names can never appear in the generated\n// `RuiIcons` list, so validating against that list warned for precisely the\n// icons the registration API exists to support. A genuinely unknown name is\n// still caught below, by the check that decides whether anything renders.\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,oBAAoB,SAAS;EAIrC,MAAM,aAAa,GAAG;GAQpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;EAUA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;EAQ7D,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;uBAIC,mBAsBM,OAtBN,WAsBM;IArBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGA,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAO,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;MACE,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAAA,UAAA,IAAA,GAEzB,mBAYE,UAAA,MAAA,WAV6B,MAAA,UAAA,IAArB,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,EAAA,GADhB,WAYE,EATC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\nconst ui = computed<string>(() => drawer({ position, visible: modelValue.value, mini: miniVariant, withOverlay: overlay }));\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"[\n          ui,\n          temporary && modelValue && 'shadow-5',\n          classNames?.content ?? contentClass,\n          classNames?.root,\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiNavigationDrawer.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    class: cn([\n      temporary && modelValue.value && 'shadow-5',\n      classNames?.content ?? contentClass,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../../utils/tv.js";
+import { cn, tv } from "../../../utils/tv.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
@@ -102,12 +102,26 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				withOverlay: false
 			}
 		});
-		const ui = computed(() => drawer({
-			position: __props.position,
-			visible: modelValue.value,
-			mini: __props.miniVariant,
-			withOverlay: __props.overlay
-		}));
+		/**
+		* Consumer classes go through `drawer()` rather than alongside it, so
+		* tailwind-variants' twMerge resolves conflicts in the consumer's favour.
+		* Passed as an argument instead of read off `$attrs` here, so the template
+		* keeps using `$attrs` directly.
+		*/
+		function rootClass(attrsClass) {
+			return drawer({
+				position: __props.position,
+				visible: modelValue.value,
+				mini: __props.miniVariant,
+				withOverlay: __props.overlay,
+				class: cn([
+					__props.temporary && modelValue.value && "shadow-5",
+					__props.classNames?.content ?? __props.contentClass,
+					__props.classNames?.root,
+					attrsClass
+				])
+			});
+		}
 		function toggle() {
 			set$1(modelValue, !get$1(modelValue));
 		}
@@ -159,15 +173,10 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				"data-visible": modelValue.value || void 0,
 				"data-position": __props.position,
 				"data-mini": __props.miniVariant || void 0,
-				class: [
-					unref(ui),
-					__props.temporary && modelValue.value && "shadow-5",
-					__props.classNames?.content ?? __props.contentClass,
-					__props.classNames?.root
-				],
+				class: rootClass(_ctx.$attrs.class),
 				"aria-label": __props.ariaLabel,
 				"aria-hidden": __props.miniVariant && !modelValue.value ? "true" : void 0
-			}, unref(getRootAttrs)(_ctx.$attrs)), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+			}, unref(getRootAttrs)(_ctx.$attrs, [])), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 				attrs: activatorAttrs,
 				close
 			})))], 16, _hoisted_1)) : createCommentVNode("", true)]))]);

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\nconst ui = computed<string>(() => drawer({ position, visible: modelValue.value, mini: miniVariant, withOverlay: overlay }));\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"[\n          ui,\n          temporary && modelValue && 'shadow-5',\n          classNames?.content ?? contentClass,\n          classNames?.root,\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    class: cn([\n      temporary && modelValue.value && 'shadow-5',\n      classNames?.content ?? contentClass,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

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   * @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":""}
+{"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   * @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":""}

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/components/tables/data-table/RuiDataTableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableCell.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand'\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else>\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableCell.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n// The built-in toggle is only a fallback for consumers that do not drive the\n// expand column themselves. A consumer that provides `#item.expand` owns the\n// decision per row, including rendering nothing for a row that cannot expand,\n// so slot emptiness must not fall back to a toggle they deliberately withheld.\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js

@@ -19,9 +19,10 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		rowId: {}
 	},
 	setup(__props) {
-		const { cellValue, columnAttr } = useDataTableColumns();
+		const { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns();
 		const { isExpanded, onToggleExpand } = useDataTableExpansion();
 		const { isMobile } = useDataTableStyling();
+		const ownsExpandColumn = computed(() => itemSlotKeys.has("expand"));
 		const mobileLabel = computed(() => {
 			const label = __props.column[columnAttr];
 			return label === void 0 || label === null ? "" : String(label);
@@ -40,11 +41,11 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				column: __props.column,
 				row: __props.row,
 				index: __props.index
-			}, () => [__props.column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
+			}, () => [__props.column.key === "expand" && !unref(ownsExpandColumn) ? (openBlock(), createBlock(RuiExpandButton_default, {
 				key: 0,
 				expanded: __props.rowId !== void 0 && unref(isExpanded)(__props.rowId),
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpand)(__props.row))
-			}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64))])], 2)], 10, _hoisted_1);
+			}, null, 8, ["expanded"])) : __props.column.key !== "expand" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64)) : createCommentVNode("", true)])], 2)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand'\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else>\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,eAAe,oBAAuB;EACzD,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;EAEzC,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;uBAIrH,mBAiCK,MAAA;IAhCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;OAGhB,MAAA,eAAA,KAAA,UAAA,GADR,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAeM,OAAA,EAfA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAaO,KAAA,QAAA,WAAA;IAZJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;YAUH,CAPG,QAAA,OAAO,QAAG,YAAA,UAAA,GADlB,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;8CAE5B,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n// The built-in toggle is only a fallback for consumers that do not drive the\n// expand column themselves. A consumer that provides `#item.expand` owns the\n// decision per row, including rendering nothing for a row that cannot expand,\n// so slot emptiness must not fall back to a toggle they deliberately withheld.\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,YAAY,iBAAiB,oBAAuB;EACvE,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;EAMzC,MAAM,mBAAmB,eAAwB,aAAa,IAAI,QAAQ,CAAC;EAE3E,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;uBAIrH,mBAiCK,MAAA;IAhCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;OAGhB,MAAA,eAAA,KAAA,UAAA,GADR,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAeM,OAAA,EAfA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAaO,KAAA,QAAA,WAAA;IAZJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;YAUH,CAPG,QAAA,OAAO,QAAG,YAAA,CAAkB,MAAA,gBAAA,KAAA,UAAA,GADpC,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;gCAEP,QAAA,OAAO,QAAG,YAAA,UAAA,GAA/B,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/tables/data-table/RuiDataTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  // These bindings are not run through tailwind-merge, so avoid emitting\n  // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n  // right one per state instead.\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <RuiExpandButton\n            v-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <slot\n            v-else-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  // These bindings are not run through tailwind-merge, so avoid emitting\n  // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n  // right one per state instead.\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js

@@ -77,15 +77,15 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"disabled",
 				"size"
 			])) : (openBlock(), createElementBlock("span", _hoisted_3)), unref(mobileHeaderColumns).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(mobileHeaderColumns), (column, headerIndex) => {
-				return openBlock(), createElementBlock(Fragment, { key: `header-${headerIndex}` }, [column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
-					key: 0,
-					expanded: unref(isExpanded)(unref(rowId)),
-					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
-				}, null, 8, ["expanded"])) : unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
+				return openBlock(), createElementBlock(Fragment, { key: `header-${headerIndex}` }, [unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
 					column,
 					row: __props.row,
 					index: __props.index
-				}, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
+				}, void 0, void 0, 0) : column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
+					key: 1,
+					expanded: unref(isExpanded)(unref(rowId)),
+					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
+				}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
 			}), 128))])) : createCommentVNode("", true)])) : unref(selectedData) && !unref(isMobile) ? (openBlock(), createElementBlock("td", {
 				key: 1,
 				class: normalizeClass(unref(classes).checkbox),