@rotki/ui-library 3.1.7 → 3.3.0

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 type { HTMLAttributes } from 'vue';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import { FooterStepperVariant } from './footer-stepper-variant.js';
 export interface Props {
     pages: number;
@@ -5,7 +6,7 @@ export interface Props {
     arrowButtons?: boolean;
     hideButtons?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_ModelProps = {
     modelValue?: number;
 };

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 type { HTMLAttributes } from 'vue';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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 { HTMLAttributes } from 'vue';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { VueClassValue } from '../../types/class-value.js';
 import { StepperOrientation, StepperState, type StepperStep } from '../../types/stepper.js';
 export interface RuiStepperClassNames {
@@ -14,13 +15,14 @@ export interface Props {
     orientation?: StepperOrientation;
     keepActiveVisible?: boolean;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     icon?: (props: {
         state: StepperState | undefined;
         index: number;
     }) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"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":"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"}
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperIcon.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiStepperIcon.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { stepperIconStyles } from './stepper-icon-styles';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIconStyles({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { StepperState } from "../../types/stepper.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
+import { stepperIconStyles } from "./stepper-icon-styles.js";
 import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/steppers/RuiStepperIcon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 2 };
@@ -18,41 +18,9 @@ var RuiStepperIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			[StepperState.warning]: "lu-triangle-alert",
 			[StepperState.info]: "lu-info"
 		};
-		/**
-		* The step marker: an outlined number ahead, a filled number with a soft halo
-		* for the current step, and a tinted, primary-outlined check behind. A status state shows its
-		* icon at full size in the step's own color.
-		*/
-		const stepperIcon = tv({
-			base: "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors",
-			variants: {
-				size: {
-					md: "size-6 text-xs [--rui-icon-size:0.875rem]",
-					lg: "size-8 text-sm [--rui-icon-size:1rem]"
-				},
-				state: {
-					[StepperState.inactive]: "border border-rui-outline bg-rui-surface text-rui-text-secondary",
-					[StepperState.active]: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30",
-					[StepperState.done]: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter",
-					[StepperState.error]: "",
-					[StepperState.warning]: "",
-					[StepperState.info]: "",
-					[StepperState.success]: ""
-				},
-				status: {
-					true: "![--rui-icon-size:100%]",
-					false: ""
-				}
-			},
-			defaultVariants: {
-				size: "md",
-				state: StepperState.inactive,
-				status: false
-			}
-		});
 		const statusIcon = computed(() => statusIcons[__props.state]);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperIcon)({
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperIconStyles)({
 				size: __props.size,
 				state: __props.state,
 				status: !!unref(statusIcon)

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","RuiIcon","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;;;;;;EAOA,MAAM,cAAc,GAAG;GACrB,MAAM;GACN,UAAU;IACR,MAAM;KACJ,IAAI;KACJ,IAAI;IACN;IACA,OAAO;MACJ,aAAa,WAAW;MAExB,aAAa,SAAS;MAEtB,aAAa,OAAO;MACpB,aAAa,QAAQ;MACrB,aAAa,UAAU;MACvB,aAAa,OAAO;MACpB,aAAa,UAAU;IAC1B;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;GACF;GACA,iBAAiB;IAAE,MAAM;IAAM,OAAO,aAAa;IAAU,QAAQ;GAAM;EAC7E,CAAC;EAED,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,OAAAA,UAAA,GAAAC,mBAUO,QAAA,EAVA,OAAKC,eAAEC,MAAA,WAAA,CAAW,CAAA;IAAA,MAAG,QAAA;IAAI,OAAE,QAAA;IAAK,QAAA,CAAA,CAAYA,MAAA,UAAA;GAAU,CAAA,CAAA,EAAA,GAAA,CAEnD,QAAA,UAAUA,MAAA,YAAA,CAAY,CAAC,QAD/BH,UAAA,GAAAI,YAGEC,iBAAA;;IADA,MAAK;GAGMF,CAAAA,KAAAA,MAAA,UAAA,KADbH,UAAA,GAAAI,YAGEC,iBAAA;;IADC,MAAMF,MAAA,UAAA;GAETH,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA+B,QAAA,YAAAK,gBAAf,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}
+{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","RuiIcon","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { stepperIconStyles } from './stepper-icon-styles';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIconStyles({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;EAEA,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,OAAAA,UAAA,GAAAC,mBAUO,QAAA,EAVA,OAAKC,eAAEC,MAAA,iBAAA,CAAiB,CAAA;IAAA,MAAG,QAAA;IAAI,OAAE,QAAA;IAAK,QAAA,CAAA,CAAYA,MAAA,UAAA;GAAU,CAAA,CAAA,EAAA,GAAA,CAEzD,QAAA,UAAUA,MAAA,YAAA,CAAY,CAAC,QAD/BH,UAAA,GAAAI,YAGEC,iBAAA;;IADA,MAAK;GAGMF,CAAAA,KAAAA,MAAA,UAAA,KADbH,UAAA,GAAAI,YAGEC,iBAAA;;IADC,MAAMF,MAAA,UAAA;GAETH,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA+B,QAAA,YAAAK,gBAAf,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}