@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/overlays/notification/RuiNotification.vue.d.ts

@@ -1,21 +1,21 @@
 export interface NotificationProps {
-    modelValue: boolean;
     timeout: number;
     width?: number | string;
     theme?: 'light' | 'dark';
 }
-declare var __VLS_13: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+type __VLS_Props = NotificationProps;
+type __VLS_Slots = {
+    default?: () => any;
+};
+type __VLS_ModelProps = {
+    modelValue: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<NotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
-}>, {
-    width: number | string;
-    theme: "light" | "dark";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/overlays/notification/RuiNotification.vue.js

@@ -1,40 +1,43 @@
-import { defineComponent, toRefs, computed, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, unref, mergeProps, renderSlot } from "vue";
+import { defineComponent, useModel, computed, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, mergeProps, unref, renderSlot, createCommentVNode, mergeModels } from "vue";
+import { useTimeoutFn, watchImmediate } from "@vueuse/core";
 import { transformPropsUnit } from "../../../utils/helpers.js";
-import { get } from "@vueuse/shared";
-import { watchImmediate } from "@vueuse/core";
+import { set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiNotification",
     inheritAttrs: false
   },
   __name: "RuiNotification",
-  props: {
-    modelValue: { type: Boolean },
+  props: /* @__PURE__ */ mergeModels({
     timeout: {},
     width: { default: 400 },
-    theme: { default: void 0 }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { timeout, modelValue, width } = toRefs(props);
+    theme: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const style = computed(() => ({
-      width: transformPropsUnit(get(width))
+      width: transformPropsUnit(__props.width)
     }));
+    const { start, stop } = useTimeoutFn(() => {
+      set(modelValue, false);
+    }, __props.timeout, { immediate: false });
     function dismiss() {
-      if (get(timeout) < 0)
+      if (__props.timeout < 0)
         return;
-      emit("update:model-value", false);
+      set(modelValue, false);
     }
     watchImmediate(modelValue, (display) => {
-      if (!display)
+      if (!display) {
+        stop();
         return;
-      const duration = get(timeout);
-      if (duration > 0) {
-        setTimeout(() => {
-          emit("update:model-value", false);
-        }, duration);
+      }
+      if (__props.timeout > 0) {
+        stop();
+        start();
       }
     });
     return (_ctx, _cache) => {
@@ -48,8 +51,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "leave-to-class": "opacity-0"
         }, {
           default: withCtx(() => [
-            unref(modelValue) ? (openBlock(), createElementBlock("div", mergeProps({
+            modelValue.value ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
+              role: "alert",
+              "aria-live": "polite",
               class: ["top-2 right-2 fixed drop-shadow-lg rounded-sm z-50", {
                 "bg-white dark:bg-[#363636]": !__props.theme,
                 "bg-white text-rui-light-text": __props.theme === "light",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue.js","sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang='ts' setup>\nexport interface NotificationProps {\n  modelValue: boolean;\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<NotificationProps>(),\n  {\n    width: 400,\n    theme: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst { timeout, modelValue, width } = toRefs(props);\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nfunction dismiss() {\n  if (get(timeout) < 0)\n    return;\n\n  emit('update:model-value', false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display)\n    return;\n\n  const duration = get(timeout);\n  if (duration > 0) {\n    setTimeout(() => {\n      emit('update:model-value', false);\n    }, duration);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        class=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :class=\"{\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }\"\n        :style=\"style\"\n        v-bind=\"$attrs\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_unref","_openBlock","_createElementBlock","_mergeProps","$attrs","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAIb,UAAM,EAAE,SAAS,YAAY,MAAA,IAAU,OAAO,KAAK;AAEnD,UAAM,QAAQ,SAAS,OAAO;AAAA,MAC5B,OAAO,mBAAmB,IAAI,KAAK,CAAC;AAAA,IAAA,EACpC;AAEF,aAAS,UAAU;AACjB,UAAI,IAAI,OAAO,IAAI;AACjB;AAEF,WAAK,sBAAsB,KAAK;AAAA,IAClC;AAEA,mBAAe,YAAY,CAAC,YAAY;AACtC,UAAI,CAAC;AACH;AAEF,YAAM,WAAW,IAAI,OAAO;AAC5B,UAAI,WAAW,GAAG;AAChB,mBAAW,MAAM;AACf,eAAK,sBAAsB,KAAK;AAAA,QAClC,GAAG,QAAQ;AAAA,MACb;AAAA,IACF,CAAC;;0BAICA,YAwBWC,UAAA,EAxBD,IAAG,UAAM;AAAA,QACjBC,YAsBaC,YAAA;AAAA,UArBX,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,QAAA;2BAEf,MAaM;AAAA,YAZEC,MAAA,UAAA,KADRC,aAAAC,mBAaM,OAbNC,WAaM;AAAA;cAXJ,QAAM,sDAAoD;AAAA,+CACP,QAAA;AAAA,gDAAiD,QAAA,UAAK;AAAA,mDAA2D,QAAA,UAAK;AAAA,cAAA;cAKxK,OAAOH,MAAA,KAAA;AAAA,YAAA,GACAI,KAAAA,QAAM;AAAA,cACb,+CAAO,QAAA;AAAA,YAAO;cAEfC,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;;;;;"}
+{"version":3,"file":"RuiNotification.vue.js","sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        class=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :class=\"{\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }\"\n        :style=\"style\"\n        v-bind=\"$attrs\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["_useModel","_createBlock","_Teleport","_createVNode","_Transition","_openBlock","_createElementBlock","_mergeProps","_unref","$attrs","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;AAeA,UAAM,aAAaA,8BAAuC;AAQ1D,UAAM,QAAQ,SAAwC,OAAO;AAAA,MAC3D,OAAO,mBAAmB,QAAA,KAAK;AAAA,IAAA,EAC/B;AAEF,UAAM,EAAE,OAAO,KAAA,IAAS,aAAa,MAAM;AACzC,UAAI,YAAY,KAAK;AAAA,IACvB,GAAG,QAAA,SAAS,EAAE,WAAW,OAAO;AAEhC,aAAS,UAAgB;AACvB,UAAI,QAAA,UAAU;AACZ;AAEF,UAAI,YAAY,KAAK;AAAA,IACvB;AAEA,mBAAe,YAAY,CAAC,YAAY;AACtC,UAAI,CAAC,SAAS;AACZ,aAAA;AACA;AAAA,MACF;AAEA,UAAI,QAAA,UAAU,GAAG;AACf,aAAA;AACA,cAAA;AAAA,MACF;AAAA,IACF,CAAC;;0BAICC,YA0BWC,UAAA,EA1BD,IAAG,UAAM;AAAA,QACjBC,YAwBaC,YAAA;AAAA,UAvBX,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,QAAA;2BAEf,MAeM;AAAA,YAdE,WAAA,SADRC,UAAA,GAAAC,mBAeM,OAfNC,WAeM;AAAA;cAbJ,MAAK;AAAA,cACL,aAAU;AAAA,cACV,QAAM,sDAAoD;AAAA,+CACP,QAAA;AAAA,gDAAiD,QAAA,UAAK;AAAA,mDAA2D,QAAA,UAAK;AAAA,cAAA;cAKxK,OAAOC,MAAA,KAAA;AAAA,YAAA,GACAC,KAAAA,QAAM;AAAA,cACb,+CAAO,QAAA;AAAA,YAAO;cAEfC,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;;;;;"}

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

@@ -9,28 +9,17 @@ export interface Props {
     popper?: PopperOptions;
     tooltipClass?: string;
 }
-declare var __VLS_1: {
-    open: boolean;
-    close: (immediate?: boolean) => void;
-}, __VLS_18: {};
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_18) => any;
+type __VLS_Slots = {
+    activator?: (props: {
+        open: boolean;
+        close: () => void;
+    }) => any;
+    default?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {
     onOpen: (immediate?: boolean) => void;
     onClose: (immediate?: boolean) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    popper: PopperOptions;
-    text: string | null;
-    disabled: boolean;
-    openDelay: number;
-    closeDelay: number;
-    hideArrow: boolean;
-    persistOnTooltipHover: boolean;
-    tooltipClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<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/overlays/tooltip/RuiTooltip.vue2.js

@@ -1,6 +1,7 @@
-import { defineComponent, toRefs, createElementBlock, openBlock, unref, normalizeClass, renderSlot, createBlock, createCommentVNode, Teleport, createVNode, TransitionGroup, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, useId, toRef, openBlock, createElementBlock, unref, normalizeClass, renderSlot, createBlock, Teleport, createVNode, TransitionGroup, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { usePopper } from "../../../composables/popper.js";
-const _hoisted_1 = ["data-tooltip-disabled"];
+const _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
+const _hoisted_2 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiTooltip"
@@ -17,8 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     tooltipClass: { default: "" }
   },
   setup(__props, { expose: __expose }) {
-    const props = __props;
-    const { closeDelay, openDelay, popper, disabled } = toRefs(props);
+    const tooltipId = useId();
     const {
       reference: activator,
       popper: tooltip,
@@ -28,7 +28,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onClose,
       onPopperLeave,
       updatePopper
-    } = usePopper(popper, disabled, openDelay, closeDelay);
+    } = usePopper(
+      toRef(() => __props.popper),
+      toRef(() => __props.disabled),
+      toRef(() => __props.openDelay),
+      toRef(() => __props.closeDelay)
+    );
     __expose({
       onOpen,
       onClose
@@ -38,7 +43,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "activator",
         ref: activator,
         class: normalizeClass(_ctx.$style.wrapper),
-        "data-tooltip-disabled": unref(disabled),
+        "data-tooltip-disabled": __props.disabled,
+        "aria-describedby": !__props.disabled && unref(open) ? unref(tooltipId) : void 0,
         onMouseover: _cache[4] || (_cache[4] = ($event) => unref(onOpen)()),
         onMouseleave: _cache[5] || (_cache[5] = ($event) => unref(onClose)()),
         onFocusin: _cache[6] || (_cache[6] = ($event) => unref(onOpen)()),
@@ -48,18 +54,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           open: unref(open),
           close: unref(onClose)
         }),
-        !unref(disabled) ? (openBlock(), createBlock(Teleport, {
+        !__props.disabled ? (openBlock(), createBlock(Teleport, {
           key: 0,
           to: "body"
         }, [
           unref(popperEnter) ? (openBlock(), createElementBlock("div", {
             key: 0,
+            id: unref(tooltipId),
             ref_key: "tooltip",
             ref: tooltip,
             class: normalizeClass([
               _ctx.$style.tooltip,
               __props.tooltipClass,
-              _ctx.$style[`tooltip__${unref(popper)?.strategy ?? "absolute"}`]
+              _ctx.$style[`tooltip__${__props.popper?.strategy ?? "absolute"}`]
             ]),
             role: "tooltip"
           }, [
@@ -93,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             })
-          ], 2)) : createCommentVNode("", true)
+          ], 10, _hoisted_2)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ], 42, _hoisted_1);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue2.js","sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  popper?: PopperOptions;\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: null,\n  disabled: false,\n  hideArrow: false,\n  openDelay: 0,\n  closeDelay: 500,\n  persistOnTooltipHover: false,\n  popper: () => ({}),\n  tooltipClass: '',\n});\n\nconst { closeDelay, openDelay, popper, disabled } = toRefs(props);\n\nconst {\n  reference: activator,\n  popper: tooltip,\n  open,\n  popperEnter,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    :class=\"$style.wrapper\"\n    :data-tooltip-disabled=\"disabled\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"popperEnter\"\n        ref=\"tooltip\"\n        :class=\"[\n          $style.tooltip,\n          tooltipClass,\n          $style[`tooltip__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"tooltip\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePopper()\"\n          @after-leave=\"onPopperLeave()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            :class=\"$style.base\"\n            role=\"tooltip-content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            :class=\"[$style.arrow, { [$style.arrow__open ?? '']: open }]\"\n            data-popper-arrow\n          />\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$arrowSize: 0.625rem;\n.wrapper {\n  @apply relative inline-flex;\n}\n\n.tooltip {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply px-2 py-1 text-xs font-normal;\n    @apply bg-rui-grey-700/90 text-white rounded shadow;\n  }\n\n  .arrow {\n    @apply w-2.5 h-2.5 transition-opacity opacity-0;\n\n    &__open {\n      @apply opacity-100;\n    }\n\n    &::before {\n      @apply block border-[0.3125rem] origin-center;\n      @apply border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90;\n\n      content: '';\n      border-radius: 0 0.125rem 0 0;\n    }\n  }\n\n  &[data-popper-placement*='bottom'] .arrow {\n    top: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='top'] .arrow {\n    bottom: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-[135deg];\n    }\n  }\n\n  &[data-popper-placement*='left'] .arrow {\n    right: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='right'] .arrow {\n    left: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-[135deg];\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_renderSlot","_createBlock","_Teleport","_createVNode","_TransitionGroup"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,UAAM,QAAQ;AAWd,UAAM,EAAE,YAAY,WAAW,QAAQ,SAAA,IAAa,OAAO,KAAK;AAEhE,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,UAAU,QAAQ,UAAU,WAAW,UAAU;AAErD,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA,CACD;;0BAICA,mBA2DM,OAAA;AAAA,iBA1DA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,QACrB,yBAAuBC,MAAA,QAAA;AAAA,QACvB,mDAAWA,MAAA,MAAA;QACX,oDAAYA,MAAA,OAAA;QACZ,iDAASA,MAAA,MAAA;QACT,kDAAUA,MAAA,OAAA,EAAA;AAAA,MAAO;QAElBC,WAIE,KAAA,QAAA,aAAA;AAAA,UAFC,MAAMD,MAAA,IAAA;AAAA,UACN,OAAOA,MAAA,OAAA;AAAA,QAAA;SAIDA,MAAA,QAAA,kBADTE,YA2CWC,UAAA;AAAA;UAzCT,IAAG;AAAA,QAAA;UAGKH,MAAA,WAAA,kBADRH,mBAsCM,OAAA;AAAA;qBApCA;AAAA,YAAJ,KAAI;AAAA,YACH,OAAKC,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA,cAAwBA,KAAAA,OAAM,YAAaC,MAAA,MAAA,GAAQ,YAAQ,UAAA,EAAA;AAAA,YAAA;YAKzG,MAAK;AAAA,UAAA;YAELI,YA2BkBC,iBAAA;AAAA,cA1BhB,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACf,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACd,qDAAcL,MAAA,YAAA;cACd,oDAAaA,MAAA,aAAA,EAAA;AAAA,YAAa;+BAE3B,MAWM;AAAA,gBAVEA,MAAA,IAAA,kBADRH,mBAWM,OAAA;AAAA,kBATJ,KAAI;AAAA,kBACH,OAAKC,eAAEC,KAAAA,OAAO,IAAI;AAAA,kBACnB,MAAK;AAAA,kBACJ,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBC,MAAA,MAAA,EAAA;AAAA,kBACpC,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBA,MAAA,OAAA,EAAA;AAAA,gBAAO;kBAE7CC,WAEO,4BAFP,MAEO;AAAA,oDADF,QAAA,IAAI,GAAA,CAAA;AAAA,kBAAA;;iBAIF,QAAA,0BADTJ,mBAIE,QAAA;AAAA;kBAFC,OAAKC,eAAA,CAAGC,YAAO,UAAUA,KAAAA,OAAO,eAAW,EAAA,GAASC,MAAA,IAAA,EAAA,CAAI,CAAA;AAAA,kBACzD,qBAAA;AAAA,gBAAA;;;;;;;;;;"}
+{"version":3,"file":"RuiTooltip.vue2.js","sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  popper?: PopperOptions;\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  popper = {},\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popper: tooltip,\n  open,\n  popperEnter,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(\n  toRef(() => popper),\n  toRef(() => disabled),\n  toRef(() => openDelay),\n  toRef(() => closeDelay),\n);\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    :class=\"$style.wrapper\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"popperEnter\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"[\n          $style.tooltip,\n          tooltipClass,\n          $style[`tooltip__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"tooltip\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePopper()\"\n          @after-leave=\"onPopperLeave()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            :class=\"$style.base\"\n            role=\"tooltip-content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            :class=\"[$style.arrow, { [$style.arrow__open ?? '']: open }]\"\n            data-popper-arrow\n          />\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$arrowSize: 0.625rem;\n.wrapper {\n  @apply relative inline-flex;\n}\n\n.tooltip {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply px-2 py-1 text-xs font-normal;\n    @apply bg-rui-grey-700/90 text-white rounded shadow;\n  }\n\n  .arrow {\n    @apply w-2.5 h-2.5 transition-opacity opacity-0;\n\n    &__open {\n      @apply opacity-100;\n    }\n\n    &::before {\n      @apply block border-[0.3125rem] origin-center;\n      @apply border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90;\n\n      content: '';\n      border-radius: 0 0.125rem 0 0;\n    }\n  }\n\n  &[data-popper-placement*='bottom'] .arrow {\n    top: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='top'] .arrow {\n    bottom: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-[135deg];\n    }\n  }\n\n  &[data-popper-placement*='left'] .arrow {\n    right: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='right'] .arrow {\n    left: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-[135deg];\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_renderSlot","_createBlock","_Teleport","_createVNode","_TransitionGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,UAAM,YAAY,MAAA;AAElB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE;AAAA,MACF,MAAM,MAAM,cAAM;AAAA,MAClB,MAAM,MAAM,gBAAQ;AAAA,MACpB,MAAM,MAAM,iBAAS;AAAA,MACrB,MAAM,MAAM,kBAAU;AAAA,IAAA;AAGxB,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA,CACD;;0BAICA,mBA6DM,OAAA;AAAA,iBA5DA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,QACrB,yBAAuB,QAAA;AAAA,QACvB,qBAAmB,QAAA,YAAYC,cAAOA,MAAA,SAAA,IAAY;AAAA,QAClD,mDAAWA,MAAA,MAAA;QACX,oDAAYA,MAAA,OAAA;QACZ,iDAASA,MAAA,MAAA;QACT,kDAAUA,MAAA,OAAA,EAAA;AAAA,MAAO;QAElBC,WAIE,KAAA,QAAA,aAAA;AAAA,UAFC,MAAMD,MAAA,IAAA;AAAA,UACN,OAAOA,MAAA,OAAA;AAAA,QAAA;SAID,QAAA,yBADTE,YA4CWC,UAAA;AAAA;UA1CT,IAAG;AAAA,QAAA;UAGKH,MAAA,WAAA,kBADRH,mBAuCM,OAAA;AAAA;YArCH,IAAIG,MAAA,SAAA;AAAA,qBACD;AAAA,YAAJ,KAAI;AAAA,YACH,OAAKF,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA,cAAwBA,KAAAA,OAAM,YAAa,QAAA,QAAQ,YAAQ,UAAA,EAAA;AAAA,YAAA;YAKzG,MAAK;AAAA,UAAA;YAELK,YA2BkBC,iBAAA;AAAA,cA1BhB,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACf,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACd,qDAAcL,MAAA,YAAA;cACd,oDAAaA,MAAA,aAAA,EAAA;AAAA,YAAa;+BAE3B,MAWM;AAAA,gBAVEA,MAAA,IAAA,kBADRH,mBAWM,OAAA;AAAA,kBATJ,KAAI;AAAA,kBACH,OAAKC,eAAEC,KAAAA,OAAO,IAAI;AAAA,kBACnB,MAAK;AAAA,kBACJ,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBC,MAAA,MAAA,EAAA;AAAA,kBACpC,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBA,MAAA,OAAA,EAAA;AAAA,gBAAO;kBAE7CC,WAEO,4BAFP,MAEO;AAAA,oDADF,QAAA,IAAI,GAAA,CAAA;AAAA,kBAAA;;iBAIF,QAAA,0BADTJ,mBAIE,QAAA;AAAA;kBAFC,OAAKC,eAAA,CAAGC,YAAO,UAAUA,KAAAA,OAAO,eAAW,EAAA,GAASC,MAAA,IAAA,EAAA,CAAI,CAAA;AAAA,kBACzD,qBAAA;AAAA,gBAAA;;;;;;;;;;"}

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

@@ -23,15 +23,13 @@ export interface Props {
      */
     size?: number | string;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: number | string;
-    value: number;
-    color: ContextColorsType | "inherit";
-    bufferValue: number;
-    variant: "determinate" | "indeterminate" | "buffer";
-    circular: boolean;
-    showLabel: boolean;
-    thickness: number | string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Slots = Record<string, never>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,4 @@
-import { defineComponent, useCssVars, unref, computed, toRefs, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, toDisplayString } from "vue";
+import { defineComponent, useCssVars, unref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, createCommentVNode, toDisplayString } from "vue";
 import { get } from "@vueuse/shared";
 const _hoisted_1 = ["aria-valuenow"];
 const _hoisted_2 = ["viewBox"];
@@ -20,47 +20,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v38079bd6": unref(size),
-      "v4c7558bf": unref(thickness),
-      "v303b3069": unref(valuePercent),
-      "v60cde3b0": unref(bufferPercent),
-      "v028a8b82": unref(progress)
+      "v52616a25": _ctx.size,
+      "v6249b860": _ctx.thickness,
+      "v97f58090": unref(valuePercent),
+      "v5645be41": unref(bufferPercent),
+      "b8b2cb5e": unref(progress)
     }));
-    const props = __props;
-    const { variant, value, bufferValue, thickness, size } = toRefs(props);
-    const currentValue = computed(
-      () => Math.max(0, Math.min(get(value) ?? 100, 100))
-    );
+    const currentValue = computed(() => Math.max(0, Math.min(__props.value ?? 100, 100)));
     const label = computed(() => `${Math.floor(get(currentValue))}%`);
     const progress = computed(() => -100 + get(currentValue));
     const valuePercent = computed(() => `${get(progress)}%`);
     const bufferPercent = computed(
-      () => `${-100 + Math.max(0, Math.min(get(bufferValue) ?? 100, 100))}%`
-    );
-    const circularScaledThickness = computed(
-      () => +get(thickness) * 32 / +get(size)
+      () => `${-100 + Math.max(0, Math.min(__props.bufferValue ?? 100, 100))}%`
     );
+    const circularScaledThickness = computed(() => +__props.thickness * 32 / +__props.size);
     const circularViewSize = computed(() => 40 + get(circularScaledThickness));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([
           _ctx.$style.wrapper,
           __props.circular ? "inline-flex" : "w-full",
-          { [_ctx.$style["has-label"]]: __props.showLabel && unref(variant) !== "indeterminate" }
+          { [_ctx.$style["has-label"]]: __props.showLabel && __props.variant !== "indeterminate" }
         ])
       }, [
         createElementVNode("div", {
-          "aria-valuenow": unref(value),
+          "aria-valuenow": __props.value,
           class: normalizeClass([
-            __props.circular && unref(variant) !== "buffer" ? _ctx.$style.circular : _ctx.$style.progress,
-            _ctx.$style[unref(variant) ?? ""],
+            __props.circular && __props.variant !== "buffer" ? _ctx.$style.circular : _ctx.$style.progress,
+            _ctx.$style[__props.variant ?? ""],
             _ctx.$style[__props.color ?? ""]
           ]),
           "aria-valuemax": "100",
           "aria-valuemin": "0",
           role: "progressbar"
         }, [
-          __props.circular && unref(variant) !== "buffer" ? (openBlock(), createElementBlock("svg", {
+          __props.circular && __props.variant !== "buffer" ? (openBlock(), createElementBlock("svg", {
             key: 0,
             viewBox: `0 0 ${unref(circularViewSize)} ${unref(circularViewSize)}`
           }, [
@@ -72,19 +66,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "stroke-width": unref(circularScaledThickness)
             }, null, 8, _hoisted_3)
           ], 8, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            unref(variant) === "buffer" ? (openBlock(), createElementBlock("div", {
+            __props.variant === "buffer" ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(_ctx.$style["buffer-dots"])
             }, null, 2)) : createCommentVNode("", true),
             createElementVNode("div", {
-              class: normalizeClass([_ctx.$style.rail, { [_ctx.$style["buffer-rail"]]: unref(variant) === "buffer" }])
+              class: normalizeClass([_ctx.$style.rail, { [_ctx.$style["buffer-rail"]]: __props.variant === "buffer" }])
             }, null, 2),
             createElementVNode("div", {
-              class: normalizeClass(_ctx.$style[unref(variant) ?? ""])
+              class: normalizeClass(_ctx.$style[__props.variant ?? ""])
             }, null, 2)
           ], 64))
         ], 10, _hoisted_1),
-        __props.showLabel && unref(variant) !== "indeterminate" ? (openBlock(), createElementBlock("div", {
+        __props.showLabel && __props.variant !== "indeterminate" ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(_ctx.$style.label)
         }, toDisplayString(unref(label)), 3)) : createCommentVNode("", true)

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

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.vue2.js","sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 100\n   */\n  bufferValue?: number;\n  variant?: 'determinate' | 'indeterminate' | 'buffer';\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  value: 0,\n  bufferValue: 0,\n  variant: 'determinate',\n  color: 'inherit',\n  circular: false,\n  showLabel: false,\n  thickness: 4,\n  size: 32,\n});\n\nconst { variant, value, bufferValue, thickness, size } = toRefs(props);\n\nconst currentValue = computed(() =>\n  Math.max(0, Math.min(get(value) ?? 100, 100)),\n);\n\nconst label = computed(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed(() => -100 + get(currentValue));\n\nconst valuePercent = computed(() => `${get(progress)}%`);\n\nconst bufferPercent = computed(\n  () => `${-100 + Math.max(0, Math.min(get(bufferValue) ?? 100, 100))}%`,\n);\n\nconst circularScaledThickness = computed(\n  () => (+get(thickness) * 32) / +get(size),\n);\n\nconst circularViewSize = computed(() => 40 + get(circularScaledThickness));\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.wrapper,\n      circular ? 'inline-flex' : 'w-full',\n      { [$style['has-label']]: showLabel && variant !== 'indeterminate' },\n    ]\"\n  >\n    <div\n      :aria-valuenow=\"value\"\n      :class=\"[\n        circular && variant !== 'buffer' ? $style.circular : $style.progress,\n        $style[variant ?? ''],\n        $style[color ?? ''],\n      ]\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        v-if=\"circular && variant !== 'buffer'\"\n        :viewBox=\"`0 0 ${circularViewSize} ${circularViewSize}`\"\n      >\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r=\"20\"\n          :stroke-width=\"circularScaledThickness\"\n        />\n      </svg>\n      <template v-else>\n        <div\n          v-if=\"variant === 'buffer'\"\n          :class=\"$style['buffer-dots']\"\n        />\n        <div\n          :class=\"[$style.rail, { [$style['buffer-rail']]: variant === 'buffer' }]\"\n        />\n        <div :class=\"$style[variant ?? '']\" />\n      </template>\n    </div>\n    <div\n      v-if=\"showLabel && variant !== 'indeterminate'\"\n      :class=\"$style.label\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'primary', 'secondary';\n\n.wrapper {\n  &.has-label {\n    @apply inline-flex items-center relative;\n\n    .label {\n      @apply block text-sm ml-4;\n    }\n\n    .circular ~ .label {\n      @apply absolute flex items-center justify-center text-[0.625rem] ml-0;\n      width: calc(v-bind(size) * 1px);\n      height: calc(v-bind(size) * 1px);\n    }\n  }\n\n  .progress {\n    @apply w-full overflow-hidden relative;\n    height: calc(v-bind(thickness) * 1px);\n\n    .rail {\n      @apply w-full h-full;\n    }\n\n    .determinate,\n    .buffer {\n      @apply transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full;\n      transform: translateX(v-bind(valuePercent));\n    }\n\n    .indeterminate {\n      @apply absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear delay-0 origin-left;\n      animation: 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running slide-rail;\n    }\n\n    .buffer-dots {\n      @apply absolute h-0 w-[200%] -top-px -left-[100%] border-dashed border-y-[0.2rem];\n      animation: 3s ease-in-out 3s infinite normal none running buffer-pulse;\n    }\n\n    .buffer-rail {\n      @apply w-full transition-transform duration-200 ease-linear delay-0 origin-left;\n      transform: translateX(v-bind(bufferPercent));\n    }\n\n    @each $color in $colors {\n      &.#{$color} {\n        .rail {\n          @apply bg-rui-#{$color}/20;\n        }\n\n        .determinate,\n        .indeterminate,\n        .buffer {\n          @apply bg-rui-#{$color};\n        }\n\n        .buffer-dots {\n          @apply border-rui-#{$color}/20;\n        }\n      }\n    }\n\n    &.inherit {\n      .rail {\n        @apply bg-current opacity-20;\n      }\n\n      .determinate,\n      .indeterminate,\n      .buffer {\n        @apply bg-current;\n      }\n\n      .buffer-dots {\n        @apply border-current opacity-20;\n      }\n    }\n  }\n\n  .circular {\n    @apply inline-block;\n    width: calc(v-bind(size) * 1px);\n    height: calc(v-bind(size) * 1px);\n\n    @each $color in $colors {\n      &.#{$color} {\n        @apply text-rui-#{$color};\n      }\n    }\n\n    &.indeterminate {\n      @apply animate-[spin_1.4s_linear_infinite];\n\n      svg {\n        circle {\n          stroke-dasharray: 80px, 200px;\n          stroke-dashoffset: 0;\n          stroke-linecap: round;\n          -webkit-animation: collapse-stroke 1.4s ease-in-out infinite;\n          animation: collapse-stroke 1.4s ease-in-out infinite;\n        }\n      }\n    }\n\n    &.determinate {\n      @apply -rotate-90;\n\n      svg {\n        circle {\n          stroke-dasharray: 126.92;\n          stroke-dashoffset: calc(v-bind(progress) / 100 * -126.92);\n          -webkit-transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n          transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        }\n      }\n    }\n\n    &.inherit {\n      @apply text-current;\n    }\n\n    svg {\n      @apply block;\n\n      circle {\n        stroke: currentColor;\n      }\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.has-label {\n      .label {\n        @apply text-white;\n      }\n    }\n  }\n}\n\n@-webkit-keyframes buffer-pulse {\n  0% {\n    opacity: 0.2;\n    left: -100%;\n  }\n  50% {\n    opacity: 1.5;\n    left: -100%;\n  }\n  60% {\n    opacity: 0.4;\n    left: -75%;\n  }\n  100% {\n    opacity: 0.2;\n    left: -100%;\n  }\n}\n\n@keyframes buffer-pulse {\n  0% {\n    opacity: 0.2;\n    left: -100%;\n  }\n  50% {\n    opacity: 1.5;\n    left: -100%;\n  }\n  60% {\n    opacity: 0.4;\n    left: -75%;\n  }\n  100% {\n    opacity: 0.2;\n    left: -100%;\n  }\n}\n\n@-webkit-keyframes slide-rail {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes slide-rail {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@-webkit-keyframes collapse-stroke {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n\n@keyframes collapse-stroke {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_createElementVNode","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAM,QAAQ;AAWd,UAAM,EAAE,SAAS,OAAO,aAAa,WAAW,KAAA,IAAS,OAAO,KAAK;AAErE,UAAM,eAAe;AAAA,MAAS,MAC5B,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,GAAG,CAAC;AAAA,IAAA;AAG9C,UAAM,QAAQ,SAAS,MAAM,GAAG,KAAK,MAAM,IAAI,YAAY,CAAC,CAAC,GAAG;AAEhE,UAAM,WAAW,SAAS,MAAM,OAAO,IAAI,YAAY,CAAC;AAExD,UAAM,eAAe,SAAS,MAAM,GAAG,IAAI,QAAQ,CAAC,GAAG;AAEvD,UAAM,gBAAgB;AAAA,MACpB,MAAM,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,WAAW,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,IAAA;AAGrE,UAAM,0BAA0B;AAAA,MAC9B,MAAO,CAAC,IAAI,SAAS,IAAI,KAAM,CAAC,IAAI,IAAI;AAAA,IAAA;AAG1C,UAAM,mBAAmB,SAAS,MAAM,KAAK,IAAI,uBAAuB,CAAC;;0BAIvEA,mBA+CM,OAAA;AAAA,QA9CH,OAAKC,eAAA;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAe,QAAA,WAAQ,gBAAA;AAAA,aAAsCA,KAAAA,OAAM,WAAA,CAAA,GAAgB,QAAA,aAAaC,MAAA,OAAA,MAAO,gBAAA;AAAA,QAAA;;QAM9HC,mBAiCM,OAAA;AAAA,UAhCH,iBAAeD,MAAA,KAAA;AAAA,UACf,OAAKF,eAAA;AAAA,YAAY,QAAA,YAAYE,mBAAO,WAAgBD,KAAAA,OAAO,WAAWA,KAAAA,OAAO;AAAA,YAAkBA,KAAAA,OAAOC,MAAA,OAAA,KAAO,EAAA;AAAA,YAAiBD,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,UAAA;UAK3I,iBAAc;AAAA,UACd,iBAAc;AAAA,UACd,MAAK;AAAA,QAAA;UAGG,QAAA,YAAYC,MAAA,OAAA,MAAO,yBAD3BH,mBAWM,OAAA;AAAA;YATH,SAAO,OAASG,MAAA,gBAAA,CAAgB,IAAIA,MAAA,gBAAA,CAAgB;AAAA,UAAA;YAErDC,mBAME,UAAA;AAAA,cALA,IAAG;AAAA,cACH,IAAG;AAAA,cACH,MAAK;AAAA,cACL,GAAE;AAAA,cACD,gBAAcD,MAAA,uBAAA;AAAA,YAAA;6CAGnBH,mBASWK,UAAA,EAAA,KAAA,KAAA;AAAA,YAPDF,MAAA,OAAA,MAAO,yBADfH,mBAGE,OAAA;AAAA;cADC,sBAAOE,KAAAA,OAAM,aAAA,CAAA;AAAA,YAAA;YAEhBE,mBAEE,OAAA;AAAA,cADC,uBAAQF,KAAAA,OAAO,MAAI,EAAA,CAAKA,KAAAA,wBAAwBC,MAAA,OAAA,MAAO,SAAA,CAAA,CAAA;AAAA,YAAA;YAE1DC,mBAAsC,OAAA;AAAA,cAAhC,OAAKH,eAAEC,KAAAA,OAAOC,MAAA,OAAA,KAAO,EAAA,CAAA;AAAA,YAAA;;;QAIvB,QAAA,aAAaA,MAAA,OAAA,MAAO,gCAD5BH,mBAKM,OAAA;AAAA;UAHH,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,QAAA,mBAEjBC,MAAA,KAAA,CAAK,GAAA,CAAA;;;;;"}
+{"version":3,"file":"RuiProgress.vue2.js","sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 100\n   */\n  bufferValue?: number;\n  variant?: 'determinate' | 'indeterminate' | 'buffer';\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = 'determinate',\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 32,\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst currentValue = computed<number>(() => Math.max(0, Math.min(value ?? 100, 100)));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst valuePercent = computed<string>(() => `${get(progress)}%`);\n\nconst bufferPercent = computed<string>(\n  () => `${-100 + Math.max(0, Math.min(bufferValue ?? 100, 100))}%`,\n);\n\nconst circularScaledThickness = computed<number>(() => (+thickness * 32) / +size);\n\nconst circularViewSize = computed<number>(() => 40 + get(circularScaledThickness));\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.wrapper,\n      circular ? 'inline-flex' : 'w-full',\n      { [$style['has-label']]: showLabel && variant !== 'indeterminate' },\n    ]\"\n  >\n    <div\n      :aria-valuenow=\"value\"\n      :class=\"[\n        circular && variant !== 'buffer' ? $style.circular : $style.progress,\n        $style[variant ?? ''],\n        $style[color ?? ''],\n      ]\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        v-if=\"circular && variant !== 'buffer'\"\n        :viewBox=\"`0 0 ${circularViewSize} ${circularViewSize}`\"\n      >\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r=\"20\"\n          :stroke-width=\"circularScaledThickness\"\n        />\n      </svg>\n      <template v-else>\n        <div\n          v-if=\"variant === 'buffer'\"\n          :class=\"$style['buffer-dots']\"\n        />\n        <div :class=\"[$style.rail, { [$style['buffer-rail']]: variant === 'buffer' }]\" />\n        <div :class=\"$style[variant ?? '']\" />\n      </template>\n    </div>\n    <div\n      v-if=\"showLabel && variant !== 'indeterminate'\"\n      :class=\"$style.label\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'primary', 'secondary';\n\n.wrapper {\n  &.has-label {\n    @apply inline-flex items-center relative;\n\n    .label {\n      @apply block text-sm ml-4;\n    }\n\n    .circular ~ .label {\n      @apply absolute flex items-center justify-center text-[0.625rem] ml-0;\n      width: calc(v-bind(size) * 1px);\n      height: calc(v-bind(size) * 1px);\n    }\n  }\n\n  .progress {\n    @apply w-full overflow-hidden relative;\n    height: calc(v-bind(thickness) * 1px);\n\n    .rail {\n      @apply w-full h-full;\n    }\n\n    .determinate,\n    .buffer {\n      @apply transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full;\n      transform: translateX(v-bind(valuePercent));\n    }\n\n    .indeterminate {\n      @apply absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear delay-0 origin-left;\n      animation: 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running slide-rail;\n    }\n\n    .buffer-dots {\n      @apply absolute h-0 w-[200%] -top-px -left-[100%] border-dashed border-y-[0.2rem];\n      animation: 3s ease-in-out 3s infinite normal none running buffer-pulse;\n    }\n\n    .buffer-rail {\n      @apply w-full transition-transform duration-200 ease-linear delay-0 origin-left;\n      transform: translateX(v-bind(bufferPercent));\n    }\n\n    @each $color in $colors {\n      &.#{$color} {\n        .rail {\n          @apply bg-rui-#{$color}/20;\n        }\n\n        .determinate,\n        .indeterminate,\n        .buffer {\n          @apply bg-rui-#{$color};\n        }\n\n        .buffer-dots {\n          @apply border-rui-#{$color}/20;\n        }\n      }\n    }\n\n    &.inherit {\n      .rail {\n        @apply bg-current opacity-20;\n      }\n\n      .determinate,\n      .indeterminate,\n      .buffer {\n        @apply bg-current;\n      }\n\n      .buffer-dots {\n        @apply border-current opacity-20;\n      }\n    }\n  }\n\n  .circular {\n    @apply inline-block;\n    width: calc(v-bind(size) * 1px);\n    height: calc(v-bind(size) * 1px);\n\n    @each $color in $colors {\n      &.#{$color} {\n        @apply text-rui-#{$color};\n      }\n    }\n\n    &.indeterminate {\n      @apply animate-[spin_1.4s_linear_infinite];\n\n      svg {\n        circle {\n          stroke-dasharray: 80px, 200px;\n          stroke-dashoffset: 0;\n          stroke-linecap: round;\n          -webkit-animation: collapse-stroke 1.4s ease-in-out infinite;\n          animation: collapse-stroke 1.4s ease-in-out infinite;\n        }\n      }\n    }\n\n    &.determinate {\n      @apply -rotate-90;\n\n      svg {\n        circle {\n          stroke-dasharray: 126.92;\n          stroke-dashoffset: calc(v-bind(progress) / 100 * -126.92);\n          -webkit-transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n          transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        }\n      }\n    }\n\n    &.inherit {\n      @apply text-current;\n    }\n\n    svg {\n      @apply block;\n\n      circle {\n        stroke: currentColor;\n      }\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.has-label {\n      .label {\n        @apply text-white;\n      }\n    }\n  }\n}\n\n@-webkit-keyframes buffer-pulse {\n  0% {\n    opacity: 0.2;\n    left: -100%;\n  }\n  50% {\n    opacity: 1.5;\n    left: -100%;\n  }\n  60% {\n    opacity: 0.4;\n    left: -75%;\n  }\n  100% {\n    opacity: 0.2;\n    left: -100%;\n  }\n}\n\n@keyframes buffer-pulse {\n  0% {\n    opacity: 0.2;\n    left: -100%;\n  }\n  50% {\n    opacity: 1.5;\n    left: -100%;\n  }\n  60% {\n    opacity: 0.4;\n    left: -75%;\n  }\n  100% {\n    opacity: 0.2;\n    left: -100%;\n  }\n}\n\n@-webkit-keyframes slide-rail {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes slide-rail {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@-webkit-keyframes collapse-stroke {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n\n@keyframes collapse-stroke {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_unref","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,UAAM,eAAe,SAAiB,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,QAAA,SAAS,KAAK,GAAG,CAAC,CAAC;AAEpF,UAAM,QAAQ,SAAiB,MAAM,GAAG,KAAK,MAAM,IAAI,YAAY,CAAC,CAAC,GAAG;AAExE,UAAM,WAAW,SAAiB,MAAM,OAAO,IAAI,YAAY,CAAC;AAEhE,UAAM,eAAe,SAAiB,MAAM,GAAG,IAAI,QAAQ,CAAC,GAAG;AAE/D,UAAM,gBAAgB;AAAA,MACpB,MAAM,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,QAAA,eAAe,KAAK,GAAG,CAAC,CAAC;AAAA,IAAA;AAGhE,UAAM,0BAA0B,SAAiB,MAAO,CAAC,QAAA,YAAY,KAAM,CAAC,YAAI;AAEhF,UAAM,mBAAmB,SAAiB,MAAM,KAAK,IAAI,uBAAuB,CAAC;;0BAI/EA,mBA6CM,OAAA;AAAA,QA5CH,OAAKC,eAAA;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAe,QAAA,WAAQ,gBAAA;AAAA,aAAsCA,KAAAA,OAAM,WAAA,CAAA,GAAgB,QAAA,aAAa,QAAA,YAAO,gBAAA;AAAA,QAAA;;QAM9HC,mBA+BM,OAAA;AAAA,UA9BH,iBAAe,QAAA;AAAA,UACf,OAAKF,eAAA;AAAA,YAAY,QAAA,YAAY,oBAAO,WAAgBC,KAAAA,OAAO,WAAWA,KAAAA,OAAO;AAAA,YAAkBA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA,YAAiBA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,UAAA;UAK3I,iBAAc;AAAA,UACd,iBAAc;AAAA,UACd,MAAK;AAAA,QAAA;UAGG,QAAA,YAAY,QAAA,YAAO,yBAD3BF,mBAWM,OAAA;AAAA;YATH,SAAO,OAASI,MAAA,gBAAA,CAAgB,IAAIA,MAAA,gBAAA,CAAgB;AAAA,UAAA;YAErDD,mBAME,UAAA;AAAA,cALA,IAAG;AAAA,cACH,IAAG;AAAA,cACH,MAAK;AAAA,cACL,GAAE;AAAA,cACD,gBAAcC,MAAA,uBAAA;AAAA,YAAA;6CAGnBJ,mBAOWK,UAAA,EAAA,KAAA,KAAA;AAAA,YALD,QAAA,YAAO,yBADfL,mBAGE,OAAA;AAAA;cADC,sBAAOE,KAAAA,OAAM,aAAA,CAAA;AAAA,YAAA;YAEhBC,mBAAiF,OAAA;AAAA,cAA3E,uBAAQD,KAAAA,OAAO,MAAI,EAAA,CAAKA,KAAAA,wBAAwB,QAAA,YAAO,SAAA,CAAA,CAAA;AAAA,YAAA;YAC7DC,mBAAsC,OAAA;AAAA,cAAhC,OAAKF,eAAEC,KAAAA,OAAO,QAAA,WAAO,EAAA,CAAA;AAAA,YAAA;;;QAIvB,QAAA,aAAa,QAAA,YAAO,gCAD5BF,mBAKM,OAAA;AAAA;UAHH,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,QAAA,mBAEjBE,MAAA,KAAA,CAAK,GAAA,CAAA;;;;;"}

package/dist/components/steppers/RuiFooterStepper.vue.d.ts

@@ -1,19 +1,18 @@
 export interface Props {
     pages: number;
-    modelValue?: number;
     variant?: 'numeric' | 'bullet' | 'progress' | 'pill';
     arrowButtons?: boolean;
     hideButtons?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (modelValue: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((modelValue: number) => any) | undefined;
-}>, {
-    variant: "numeric" | "bullet" | "progress" | "pill";
-    modelValue: number;
-    arrowButtons: boolean;
-    hideButtons: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,30 +1,31 @@
-import { defineComponent, toRefs, createElementBlock, openBlock, normalizeClass, Fragment, renderList, unref, createBlock, createCommentVNode, createSlots, withCtx, createVNode, toDisplayString } from "vue";
+import { defineComponent, useModel, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, createSlots, withCtx, createVNode, createCommentVNode, toDisplayString, mergeModels } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import RuiProgress from "../progress/RuiProgress.vue.js";
-import { get } from "@vueuse/shared";
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { key: 0 };
+import { get, set } from "@vueuse/shared";
+const _hoisted_1 = ["aria-current"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = ["aria-current", "onClick"];
+const _hoisted_4 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiFooterStepper"
   },
   __name: "RuiFooterStepper",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     pages: {},
-    modelValue: { default: 1 },
     variant: { default: "numeric" },
     arrowButtons: { type: Boolean, default: false },
     hideButtons: { type: Boolean, default: false }
-  },
+  }, {
+    "modelValue": { default: 1 },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { modelValue, pages } = toRefs(props);
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     function onChange(delta) {
-      emit("update:modelValue", get(modelValue) + delta);
+      set(modelValue, get(modelValue) + delta);
     }
     function onPrev() {
       const value = get(modelValue);
@@ -33,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onNext() {
       const value = get(modelValue);
-      if (value < get(pages))
+      if (value < __props.pages)
         onChange(1);
     }
     function onClick(index) {
@@ -41,30 +42,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        role: "navigation",
+        "aria-label": "Step navigation",
         class: normalizeClass([_ctx.$style["footer-stepper"], _ctx.$style[__props.variant ?? ""]])
       }, [
         __props.variant === "pill" ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(_ctx.$style.pills)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pages), (i) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pages, (i) => {
             return openBlock(), createElementBlock("span", {
               key: i,
-              class: normalizeClass([_ctx.$style.pill, { [_ctx.$style.active]: unref(modelValue) === i }])
-            }, null, 2);
+              "aria-current": modelValue.value === i ? "step" : void 0,
+              class: normalizeClass([_ctx.$style.pill, { [_ctx.$style.active]: modelValue.value === i }])
+            }, null, 10, _hoisted_1);
           }), 128))
         ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           !__props.hideButtons ? (openBlock(), createBlock(RuiButton, {
             key: 0,
+            "aria-label": "Previous",
             class: normalizeClass({ [_ctx.$style.arrow__button]: __props.arrowButtons }),
-            disabled: unref(modelValue) <= 1,
+            disabled: modelValue.value <= 1,
             icon: __props.arrowButtons,
             variant: __props.arrowButtons ? "outlined" : "text",
             color: "primary",
             onClick: _cache[0] || (_cache[0] = ($event) => onPrev())
           }, createSlots({
             default: withCtx(() => [
-              !__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_1, "Back")) : (openBlock(), createBlock(RuiIcon, {
+              !__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_2, "Back")) : (openBlock(), createBlock(RuiIcon, {
                 key: 1,
                 size: 24,
                 name: "lu-arrow-left"
@@ -86,34 +91,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           __props.variant === "numeric" ? (openBlock(), createElementBlock("span", {
             key: 1,
             class: normalizeClass(_ctx.$style.numeric)
-          }, toDisplayString(unref(modelValue)) + "/" + toDisplayString(unref(pages)), 3)) : __props.variant === "bullet" ? (openBlock(), createElementBlock("div", {
+          }, toDisplayString(modelValue.value) + "/" + toDisplayString(__props.pages), 3)) : __props.variant === "bullet" ? (openBlock(), createElementBlock("div", {
             key: 2,
             class: normalizeClass(_ctx.$style.bullets)
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pages), (i) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pages, (i) => {
               return openBlock(), createElementBlock("span", {
                 key: i,
-                class: normalizeClass([_ctx.$style.bullet, { [_ctx.$style.active]: unref(modelValue) === i }]),
+                "aria-current": modelValue.value === i ? "step" : void 0,
+                class: normalizeClass([_ctx.$style.bullet, { [_ctx.$style.active]: modelValue.value === i }]),
                 onClick: ($event) => onClick(i)
-              }, null, 10, _hoisted_2);
+              }, null, 10, _hoisted_3);
             }), 128))
           ], 2)) : __props.variant === "progress" ? (openBlock(), createBlock(RuiProgress, {
             key: 3,
             class: normalizeClass(_ctx.$style.progress),
             color: "primary",
-            value: unref(modelValue) / unref(pages) * 100
+            value: modelValue.value / __props.pages * 100
           }, null, 8, ["class", "value"])) : createCommentVNode("", true),
           !__props.hideButtons ? (openBlock(), createBlock(RuiButton, {
             key: 4,
+            "aria-label": "Next",
             class: normalizeClass({ [_ctx.$style.arrow__button]: __props.arrowButtons }),
-            disabled: unref(modelValue) >= unref(pages),
+            disabled: modelValue.value >= __props.pages,
             icon: __props.arrowButtons,
             variant: __props.arrowButtons ? "outlined" : "text",
             color: "primary",
             onClick: _cache[1] || (_cache[1] = ($event) => onNext())
           }, createSlots({
             default: withCtx(() => [
-              !__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_3, "Next")) : (openBlock(), createBlock(RuiIcon, {
+              !__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_4, "Next")) : (openBlock(), createBlock(RuiIcon, {
                 key: 1,
                 size: 24,
                 name: "lu-arrow-right"