@rotki/ui-library 3.1.7 → 3.2.0

package/dist/components/progress/progress-styles.d.ts

@@ -0,0 +1,181 @@
+export declare const progressStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}>>;

package/dist/components/progress/progress-styles.js

@@ -0,0 +1,139 @@
+import { tv } from "../../utils/tv.js";
+import { ProgressVariant } from "./progress-props.js";
+//#region src/components/progress/progress-styles.ts
+var progressStyles = tv({
+	slots: {
+		wrapper: "",
+		progressbar: "w-full overflow-hidden relative rounded-full",
+		rail: "w-full h-full",
+		bar: "transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full",
+		indeterminateBar: "absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail",
+		bufferDots: "absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse",
+		bufferRail: "w-full h-full transition-transform duration-200 ease-linear origin-left",
+		circularContainer: "inline-block relative",
+		svg: "block",
+		circle: "stroke-current",
+		circleTrack: "",
+		label: "text-rui-text"
+	},
+	variants: {
+		color: {
+			primary: { circularContainer: "text-rui-primary" },
+			secondary: { circularContainer: "text-rui-secondary" },
+			error: { circularContainer: "text-rui-error" },
+			warning: { circularContainer: "text-rui-warning" },
+			info: { circularContainer: "text-rui-info" },
+			success: { circularContainer: "text-rui-success" },
+			inherit: { circularContainer: "text-current" }
+		},
+		variant: {
+			[ProgressVariant.determinate]: { svg: "-rotate-90" },
+			[ProgressVariant.indeterminate]: {
+				svg: "animate-circular-spin",
+				circle: "animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]"
+			},
+			[ProgressVariant.buffer]: {}
+		},
+		circular: {
+			true: { wrapper: "inline-flex" },
+			false: { wrapper: "w-full" }
+		},
+		hasLabel: { true: { wrapper: "inline-flex items-center relative" } }
+	},
+	compoundVariants: [{
+		circular: false,
+		hasLabel: true,
+		class: { label: "block text-sm ml-4 text-rui-text-secondary tabular-nums" }
+	}, {
+		circular: true,
+		hasLabel: true,
+		class: { label: "absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap" }
+	}],
+	compoundSlots: [
+		{
+			slots: ["rail"],
+			color: [
+				"primary",
+				"secondary",
+				"error",
+				"warning",
+				"info",
+				"success"
+			],
+			class: "bg-rui-neutral-200 dark:bg-rui-neutral-700"
+		},
+		{
+			slots: ["bufferDots"],
+			color: [
+				"primary",
+				"secondary",
+				"error",
+				"warning",
+				"info",
+				"success"
+			],
+			class: "border-rui-neutral-200 dark:border-rui-neutral-700"
+		},
+		{
+			slots: ["circleTrack"],
+			color: [
+				"primary",
+				"secondary",
+				"error",
+				"warning",
+				"info",
+				"success"
+			],
+			class: "stroke-rui-neutral-200 dark:stroke-rui-neutral-700"
+		},
+		{
+			slots: ["rail", "bufferDots"],
+			color: "inherit",
+			class: "bg-current opacity-20 border-current"
+		},
+		{
+			slots: ["circleTrack"],
+			color: "inherit",
+			class: "stroke-current opacity-20"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "primary",
+			class: "bg-rui-primary"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "secondary",
+			class: "bg-rui-secondary"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "error",
+			class: "bg-rui-error"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "warning",
+			class: "bg-rui-warning"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "info",
+			class: "bg-rui-info"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "success",
+			class: "bg-rui-success"
+		},
+		{
+			slots: ["bar", "indeterminateBar"],
+			color: "inherit",
+			class: "bg-current"
+		}
+	]
+});
+//#endregion
+export { progressStyles };
+
+//# sourceMappingURL=progress-styles.js.map

package/dist/components/progress/progress-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-styles.js","names":[],"sources":["../../../src/components/progress/progress-styles.ts"],"sourcesContent":["import { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport const progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative rounded-full',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    circleTrack: '',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4 text-rui-text-secondary tabular-nums' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap' } },\n  ],\n  compoundSlots: [\n    // Track behind the bar: one neutral for every named color, neutral-700 in dark like the footer stepper pills, which reads on a near-black page\n    { slots: ['rail'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n    { slots: ['bufferDots'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'border-rui-neutral-200 dark:border-rui-neutral-700' },\n    { slots: ['circleTrack'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'stroke-rui-neutral-200 dark:stroke-rui-neutral-700' },\n    // `inherit` keeps a tint of whatever color it is given\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n    { slots: ['circleTrack'], color: 'inherit', class: 'stroke-current opacity-20' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n"],"mappings":";;;AAGA,IAAa,iBAAiB,GAAG;CAC/B,OAAO;EACL,SAAS;EACT,aAAa;EACb,MAAM;EACN,KAAK;EACL,kBAAkB;EAClB,YAAY;EACZ,YAAY;EACZ,mBAAmB;EACnB,KAAK;EACL,QAAQ;EACR,aAAa;EACb,OAAO;CACT;CACA,UAAU;EACR,OAAO;GACL,SAAS,EAAE,mBAAmB,mBAAmB;GACjD,WAAW,EAAE,mBAAmB,qBAAqB;GACrD,OAAO,EAAE,mBAAmB,iBAAiB;GAC7C,SAAS,EAAE,mBAAmB,mBAAmB;GACjD,MAAM,EAAE,mBAAmB,gBAAgB;GAC3C,SAAS,EAAE,mBAAmB,mBAAmB;GACjD,SAAS,EAAE,mBAAmB,eAAe;EAC/C;EACA,SAAS;IACN,gBAAgB,cAAc,EAAE,KAAK,aAAa;IAClD,gBAAgB,gBAAgB;IAC/B,KAAK;IACL,QAAQ;GACV;IACC,gBAAgB,SAAS,CAAC;EAC7B;EACA,UAAU;GACR,MAAM,EAAE,SAAS,cAAc;GAC/B,OAAO,EAAE,SAAS,SAAS;EAC7B;EACA,UAAU,EACR,MAAM,EAAE,SAAS,oCAAoC,EACvD;CACF;CACA,kBAAkB,CAEhB;EAAE,UAAU;EAAO,UAAU;EAAM,OAAO,EAAE,OAAO,0DAA0D;CAAE,GAE/G;EAAE,UAAU;EAAM,UAAU;EAAM,OAAO,EAAE,OAAO,4GAA4G;CAAE,CAClK;CACA,eAAe;EAEb;GAAE,OAAO,CAAC,MAAM;GAAG,OAAO;IAAC;IAAW;IAAa;IAAS;IAAW;IAAQ;GAAS;GAAG,OAAO;EAA6C;EAC/I;GAAE,OAAO,CAAC,YAAY;GAAG,OAAO;IAAC;IAAW;IAAa;IAAS;IAAW;IAAQ;GAAS;GAAG,OAAO;EAAqD;EAC7J;GAAE,OAAO,CAAC,aAAa;GAAG,OAAO;IAAC;IAAW;IAAa;IAAS;IAAW;IAAQ;GAAS;GAAG,OAAO;EAAqD;EAE9J;GAAE,OAAO,CAAC,QAAQ,YAAY;GAAG,OAAO;GAAW,OAAO;EAAuC;EACjG;GAAE,OAAO,CAAC,aAAa;GAAG,OAAO;GAAW,OAAO;EAA4B;EAG/E;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAW,OAAO;EAAiB;EAChF;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAa,OAAO;EAAmB;EACpF;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAS,OAAO;EAAe;EAC5E;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAW,OAAO;EAAiB;EAChF;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAQ,OAAO;EAAc;EAC1E;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAW,OAAO;EAAiB;EAChF;GAAE,OAAO,CAAC,OAAO,kBAAkB;GAAG,OAAO;GAAW,OAAO;EAAa;CAC9E;AACF,CAAC"}

package/dist/components/steppers/RuiFooterStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFooterStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n  // the current bullet stretches into a short bar, so position reads without relying on color\n  bullet: tv({\n    base: [\n      'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n      'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n    ].join(' '),\n    variants: {\n      active: {\n        true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFooterStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import { FooterStepperVariant } from "./footer-stepper-variant.js";
+import { footerStepperStyles } from "./footer-stepper-styles.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
 //#region src/components/steppers/RuiFooterStepper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-variant"];
@@ -51,16 +51,6 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const footerStepper = {
-			bullet: tv({
-				base: ["h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600", "hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden"].join(" "),
-				variants: { active: { true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary" } }
-			}),
-			pill: tv({
-				base: "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors",
-				variants: { active: { true: "bg-rui-primary dark:bg-rui-primary" } }
-			})
-		};
 		function onChange(delta) {
 			set(modelValue, get(modelValue) + delta);
 		}
@@ -83,7 +73,7 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				return openBlock(), createElementBlock("span", {
 					key: i,
 					"aria-current": modelValue.value === i ? "step" : void 0,
-					class: normalizeClass(footerStepper.pill({ active: modelValue.value === i }))
+					class: normalizeClass(unref(footerStepperStyles).pill({ active: modelValue.value === i }))
 				}, null, 10, _hoisted_3);
 			}), 128))])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				!__props.hideButtons ? (openBlock(), createBlock(RuiButton_default, {
@@ -120,7 +110,7 @@ var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						type: "button",
 						"aria-label": `Step ${i}`,
 						"aria-current": modelValue.value === i ? "step" : void 0,
-						class: normalizeClass(footerStepper.bullet({ active: modelValue.value === i })),
+						class: normalizeClass(unref(footerStepperStyles).bullet({ active: modelValue.value === i })),
 						onClick: ($event) => onClick(i)
 					}, null, 10, _hoisted_7);
 				}), 128))])) : __props.variant === unref(FooterStepperVariant).progress ? (openBlock(), createBlock(RuiProgress_default, {

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_createVNode","_createCommentVNode","_toDisplayString","RuiProgress"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n  // the current bullet stretches into a short bar, so position reads without relying on color\n  bullet: tv({\n    base: [\n      'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n      'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n    ].join(' '),\n    variants: {\n      active: {\n        true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_createVNode","_createCommentVNode","_toDisplayString","RuiProgress"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/steppers/RuiStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
 import { StepperOrientation, StepperState } from "../../types/stepper.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
 import { useKeyboardScroll } from "../../composables/keyboard-scroll.js";
 import RuiStepperIcon_default from "./RuiStepperIcon.js";
+import { stepperStyles } from "./stepper-styles.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch } from "vue";
 //#region src/components/steppers/RuiStepper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -43,98 +44,7 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props) {
 		const wrapperRef = useTemplateRef("wrapperRef");
 		const scrollTabindex = useKeyboardScroll(wrapperRef);
-		const stepper = tv({
-			slots: {
-				root: "flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
-				step: "flex items-center px-6 relative",
-				title: "",
-				subtitle: "",
-				label: "flex flex-col items-start text-left ml-2",
-				divider: "border-rui-divider"
-			},
-			variants: {
-				orientation: {
-					[StepperOrientation.horizontal]: {
-						root: "whitespace-nowrap lg:whitespace-normal",
-						step: "",
-						divider: "block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]"
-					},
-					[StepperOrientation.vertical]: {
-						root: "flex-col inline-flex",
-						step: "px-1 py-3",
-						divider: "block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l"
-					}
-				},
-				state: {
-					[StepperState.inactive]: {
-						step: "text-rui-text-disabled",
-						title: "text-rui-text-secondary",
-						subtitle: "text-rui-text-secondary"
-					},
-					[StepperState.active]: {
-						step: "text-rui-text",
-						title: "",
-						subtitle: "text-rui-text-secondary"
-					},
-					[StepperState.done]: {
-						step: "text-rui-text",
-						title: "",
-						subtitle: "text-rui-text-secondary"
-					},
-					[StepperState.error]: {
-						step: "text-rui-error",
-						title: "",
-						subtitle: ""
-					},
-					[StepperState.warning]: {
-						step: "text-rui-warning",
-						title: "",
-						subtitle: ""
-					},
-					[StepperState.info]: {
-						step: "text-rui-info",
-						title: "",
-						subtitle: ""
-					},
-					[StepperState.success]: {
-						step: "text-rui-success",
-						title: "",
-						subtitle: ""
-					}
-				},
-				iconTop: { true: {
-					step: "flex-col",
-					label: "ml-0 mt-4 items-center text-center"
-				} },
-				custom: {
-					true: {},
-					false: {}
-				}
-			},
-			compoundVariants: [
-				{
-					custom: true,
-					state: StepperState.inactive,
-					class: { step: "text-rui-text" }
-				},
-				{
-					orientation: StepperOrientation.vertical,
-					custom: true,
-					class: { divider: "mx-5" }
-				},
-				{
-					orientation: StepperOrientation.vertical,
-					iconTop: true,
-					class: { divider: "self-center mx-auto" }
-				}
-			],
-			defaultVariants: {
-				state: StepperState.inactive,
-				orientation: StepperOrientation.horizontal,
-				custom: false
-			}
-		});
-		const ui = computed(() => stepper({
+		const ui = computed(() => stepperStyles({
 			orientation: __props.orientation,
 			custom: __props.custom,
 			iconTop: __props.iconTop
@@ -148,7 +58,7 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		* @returns the stepper's classes with that state applied
 		*/
 		function stepUi(state) {
-			return stepper({
+			return stepperStyles({
 				orientation: __props.orientation,
 				custom: __props.custom,
 				iconTop: __props.iconTop,