npm - @rotki/ui-library - Versions diffs - 2.12.1 → 2.12.2 - Mend

@rotki/ui-library 2.12.1 → 2.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

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

@@ -1,11 +1,12 @@
-import { defineComponent, toRefs, createElementBlock, openBlock, normalizeClass, Fragment, renderList, unref, createBlock, createCommentVNode, createSlots, withCtx, createVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, Fragment, renderList, unref, createBlock, createSlots, withCtx, createVNode, createCommentVNode, toDisplayString } 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 };
+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"
@@ -41,6 +42,8 @@ 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", {
@@ -50,12 +53,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pages), (i) => {
             return openBlock(), createElementBlock("span", {
               key: i,
+              "aria-current": unref(modelValue) === i ? "step" : void 0,
               class: normalizeClass([_ctx.$style.pill, { [_ctx.$style.active]: unref(modelValue) === i }])
-            }, null, 2);
+            }, 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,
             icon: __props.arrowButtons,
@@ -64,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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"
@@ -93,9 +98,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pages), (i) => {
               return openBlock(), createElementBlock("span", {
                 key: i,
+                "aria-current": unref(modelValue) === i ? "step" : void 0,
                 class: normalizeClass([_ctx.$style.bullet, { [_ctx.$style.active]: unref(modelValue) === i }]),
                 onClick: ($event) => onClick(i)
-              }, null, 10, _hoisted_2);
+              }, null, 10, _hoisted_3);
             }), 128))
           ], 2)) : __props.variant === "progress" ? (openBlock(), createBlock(RuiProgress, {
             key: 3,
@@ -105,6 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 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),
             icon: __props.arrowButtons,
@@ -113,7 +120,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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"

package/dist/components/steppers/RuiFooterStepper.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFooterStepper.vue2.js","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';\n\nexport interface Props {\n pages: number;\n modelValue?: number;\n variant?: 'numeric' \| 'bullet' \| 'progress' \| 'pill';\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n modelValue: 1,\n variant: 'numeric',\n arrowButtons: false,\n hideButtons: false,\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', modelValue: number): void;\n}>();\n\nconst { modelValue, pages } = toRefs(props);\n\nfunction onChange(delta: number) {\n emit('update:modelValue', get(modelValue) + delta);\n}\n\nfunction onPrev() {\n const value = get(modelValue);\n if (value)\n onChange(-1);\n}\n\nfunction onNext() {\n const value = get(modelValue);\n if (value < get(pages))\n onChange(1);\n}\n\nfunction onClick(index: number) {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div :class=\"[$style['footer-stepper'], $style[variant ?? '']]\">\n <template v-if=\"variant === 'pill'\">\n <div :class=\"$style.pills\">\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :class=\"[$style.pill, { [$style.active]: modelValue === i }]\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n :class=\"{ [$style.arrow__button]: arrowButtons }\"\n :disabled=\"modelValue <= 1\"\n :icon=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon\n :size=\"18\"\n name=\"lu-chevron-left\"\n />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n :size=\"24\"\n name=\"lu-arrow-left\"\n />\n </RuiButton>\n <span\n v-if=\"variant === 'numeric'\"\n :class=\"$style.numeric\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variant === 'bullet'\"\n :class=\"$style.bullets\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :class=\"[$style.bullet, { [$style.active]: modelValue === i }]\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variant === 'progress'\"\n :class=\"$style.progress\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n :class=\"{ [$style.arrow__button]: arrowButtons }\"\n :disabled=\"modelValue >= pages\"\n :icon=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n :size=\"24\"\n name=\"lu-arrow-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon\n :size=\"18\"\n name=\"lu-chevron-right\"\n />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.footer-stepper {\n @apply flex items-center justify-between gap-x-4 transition-all duration-150;\n\n .numeric {\n @apply text-rui-text;\n }\n\n .bullets,\n .pills {\n @apply flex;\n\n .bullet,\n .pill {\n @apply rounded-full h-2 bg-black/[0.26] transition-colors;\n\n &.active {\n @apply bg-rui-primary;\n }\n }\n\n .bullet {\n @apply hover:bg-rui-grey-300 cursor-pointer;\n\n &.active {\n @apply hover:bg-rui-primary;\n }\n }\n\n .pill {\n @apply bg-rui-grey-200;\n }\n }\n\n .bullets {\n @apply gap-x-1;\n\n .bullet {\n @apply w-2;\n }\n }\n\n .pills {\n @apply w-full gap-x-3;\n\n .pill {\n @apply w-full;\n }\n }\n\n .progress {\n @apply max-w-[60%];\n }\n\n .arrow__button {\n @apply bg-white disabled:bg-white/60 #{!important};\n }\n}\n\n:global(.dark) {\n .footer-stepper {\n .bullets,\n .pills {\n .bullet,\n .pill {\n @apply bg-rui-grey-300;\n\n &.active {\n @apply bg-rui-primary;\n }\n }\n\n .bullet {\n @apply hover:bg-rui-grey-400;\n\n &.active {\n @apply hover:bg-rui-primary;\n }\n }\n }\n\n .bullets {\n .bullet {\n @apply bg-white/30;\n }\n }\n\n .arrow__button {\n @apply disabled:bg-[rgb(50,50,50)] #{!important};\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_Fragment","_renderList","_unref","_createBlock","_openBlock","_createVNode","_toDisplayString"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,UAAM,QAAQ;AAOd,UAAM,OAAO;AAIb,UAAM,EAAE,YAAY,UAAU,OAAO,KAAK;AAE1C,aAAS,SAAS,OAAe;AAC/B,WAAK,qBAAqB,IAAI,UAAU,IAAI,KAAK;AAAA,IACnD;AAEA,aAAS,SAAS;AAChB,YAAM,QAAQ,IAAI,UAAU;AAC5B,UAAI;AACF,iBAAS,EAAE;AAAA,IACf;AAEA,aAAS,SAAS;AAChB,YAAM,QAAQ,IAAI,UAAU;AAC5B,UAAI,QAAQ,IAAI,KAAK;AACnB,iBAAS,CAAC;AAAA,IACd;AAEA,aAAS,QAAQ,OAAe;AAC9B,eAAS,QAAQ,IAAI,UAAU,CAAC;AAAA,IAClC;;0BAIEA,~~mBAqFM~~,OAAA;AAAA,~~QArFA~~,OAAKC,eAAA,CAAGC,KAAAA,OAAM,gBAAA,GAAoBA,KAAAA,OAAO,QAAA,WAAO,EAAA,CAAA,CAAA;AAAA,MAAA;~~QACpC~~,QAAA,YAAO,uBACrBF,~~mBAMM~~,OAAA;AAAA;~~UANA~~,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,QAAA;4BACvBF,~~mBAIEG~~,UAAA,MAAAC,~~WAHYC~~,MAAA,KAAA,GAAK,CAAV,MAAC;gCADVL,~~mBAIE~~,QAAA;AAAA,~~cAFC~~,KAAK;AAAA,cACL,~~OAAKC~~,eAAA,CAAGC,KAAAA,OAAO,MAAI,EAAA,CAAKA,KAAAA,OAAO,MAAM,GAAGG,MAAA,UAAA,MAAe,EAAA,CAAC,CAAA;AAAA,YAAA;;+BAI/DL,~~mBA0EWG~~,UAAA,EAAA,KAAA,KAAA;AAAA,~~WAxEA~~,QAAA,4BADTG,~~YAwBY~~,WAAA;AAAA;~~YAtBT~~,OAAKL,eAAA,EAAA,CAAKC,KAAAA,OAAO,aAAa,GAAG,QAAA,cAAY;AAAA,YAC7C,UAAUG,MAAA,UAAA,KAAU;AAAA,YACpB,MAAM,QAAA;AAAA,YACN,SAAS,QAAA,eAAY,aAAA;AAAA,YACtB,OAAM;AAAA,YACL,+CAAO,OAAA;AAAA,UAAM;6BAWd,MAAsC;AAAA,eAAzB,QAAA,gBAAbE,UAAA,GAAAP,mBAAsC,oBAAX,MAAI,mBAC/BM,YAIE,SAAA;AAAA;gBAFC,MAAM;AAAA,gBACP,MAAK;AAAA,cAAA;;;;aAZE,QAAA;oBACN;AAAA,0BAED,MAGE;AAAA,gBAHFE,YAGE,SAAA;AAAA,kBAFC,MAAM;AAAA,kBACP,MAAK;AAAA,gBAAA;;;;;UAWH,QAAA,YAAO,0BADfR,mBAKO,QAAA;AAAA;YAHJ,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,UAAA,mBAEnBG,MAAA,UAAA,CAAU,IAAG,MAACI,gBAAGJ,MAAA,KAAA,CAAK,GAAA,CAAA,KAGd,QAAA,YAAO,yBADpBL,~~mBAUM~~,OAAA;AAAA;~~YARH~~,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,UAAA;8BAEtBF,~~mBAKEG~~,UAAA,MAAAC,~~WAJYC~~,MAAA,KAAA,GAAK,CAAV,MAAC;kCADVL,~~mBAKE~~,QAAA;AAAA,~~gBAHC~~,KAAK;AAAA,gBACL,~~OAAKC~~,eAAA,CAAGC,KAAAA,OAAO,QAAM,EAAA,CAAKA,KAAAA,OAAO,MAAM,GAAGG,MAAA,UAAA,MAAe,EAAA,CAAC,CAAA;AAAA,gBAC1D,SAAK,CAAA,WAAE,QAAQ,CAAC;AAAA,cAAA;;mBAIR,QAAA,YAAO,2BADpBC,YAKE,aAAA;AAAA;YAHC,OAAKL,eAAEC,KAAAA,OAAO,QAAQ;AAAA,YACvB,OAAM;AAAA,YACL,OAAQG,MAAA,UAAA,IAAaA,MAAA,KAAA,IAAK;AAAA,UAAA;WAGpB,QAAA,4BADTC,~~YAwBY~~,WAAA;AAAA;~~YAtBT~~,OAAKL,eAAA,EAAA,CAAKC,KAAAA,OAAO,aAAa,GAAG,QAAA,cAAY;AAAA,YAC7C,UAAUG,MAAA,UAAA,KAAcA,MAAA,KAAA;AAAA,YACxB,MAAM,QAAA;AAAA,YACN,SAAS,QAAA,eAAY,aAAA;AAAA,YACtB,OAAM;AAAA,YACL,+CAAO,OAAA;AAAA,UAAM;6BAEd,MAAsC;AAAA,eAAzB,QAAA,gBAAbE,UAAA,GAAAP,mBAAsC,oBAAX,MAAI,mBAC/BM,YAIE,SAAA;AAAA;gBAFC,MAAM;AAAA,gBACP,MAAK;AAAA,cAAA;;;;aAGE,QAAA;oBACN;AAAA,0BAED,MAGE;AAAA,gBAHFE,YAGE,SAAA;AAAA,kBAFC,MAAM;AAAA,kBACP,MAAK;AAAA,gBAAA;;;;;;;;;;"}
1	+ {"version":3,"file":"RuiFooterStepper.vue2.js","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';\n\nexport interface Props {\n pages: number;\n modelValue?: number;\n variant?: 'numeric' \| 'bullet' \| 'progress' \| 'pill';\n arrowButtons?: boolean;\n hideButtons?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFooterStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n modelValue: 1,\n variant: 'numeric',\n arrowButtons: false,\n hideButtons: false,\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', modelValue: number): void;\n}>();\n\nconst { modelValue, pages } = toRefs(props);\n\nfunction onChange(delta: number) {\n emit('update:modelValue', get(modelValue) + delta);\n}\n\nfunction onPrev() {\n const value = get(modelValue);\n if (value)\n onChange(-1);\n}\n\nfunction onNext() {\n const value = get(modelValue);\n if (value < get(pages))\n onChange(1);\n}\n\nfunction onClick(index: number) {\n onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n <div\n role=\"navigation\"\n aria-label=\"Step navigation\"\n :class=\"[$style['footer-stepper'], $style[variant ?? '']]\"\n >\n <template v-if=\"variant === 'pill'\">\n <div :class=\"$style.pills\">\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"[$style.pill, { [$style.active]: modelValue === i }]\"\n />\n </div>\n </template>\n <template v-else>\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Previous\"\n :class=\"{ [$style.arrow__button]: arrowButtons }\"\n :disabled=\"modelValue <= 1\"\n :icon=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onPrev()\"\n >\n <template\n v-if=\"!arrowButtons\"\n #prepend\n >\n <RuiIcon\n :size=\"18\"\n name=\"lu-chevron-left\"\n />\n </template>\n <span v-if=\"!arrowButtons\">Back</span>\n <RuiIcon\n v-else\n :size=\"24\"\n name=\"lu-arrow-left\"\n />\n </RuiButton>\n <span\n v-if=\"variant === 'numeric'\"\n :class=\"$style.numeric\"\n >\n {{ modelValue }}/{{ pages }}\n </span>\n <div\n v-else-if=\"variant === 'bullet'\"\n :class=\"$style.bullets\"\n >\n <span\n v-for=\"i in pages\"\n :key=\"i\"\n :aria-current=\"modelValue === i ? 'step' : undefined\"\n :class=\"[$style.bullet, { [$style.active]: modelValue === i }]\"\n @click=\"onClick(i)\"\n />\n </div>\n <RuiProgress\n v-else-if=\"variant === 'progress'\"\n :class=\"$style.progress\"\n color=\"primary\"\n :value=\"(modelValue / pages) * 100\"\n />\n <RuiButton\n v-if=\"!hideButtons\"\n aria-label=\"Next\"\n :class=\"{ [$style.arrow__button]: arrowButtons }\"\n :disabled=\"modelValue >= pages\"\n :icon=\"arrowButtons\"\n :variant=\"arrowButtons ? 'outlined' : 'text'\"\n color=\"primary\"\n @click=\"onNext()\"\n >\n <span v-if=\"!arrowButtons\">Next</span>\n <RuiIcon\n v-else\n :size=\"24\"\n name=\"lu-arrow-right\"\n />\n <template\n v-if=\"!arrowButtons\"\n #append\n >\n <RuiIcon\n :size=\"18\"\n name=\"lu-chevron-right\"\n />\n </template>\n </RuiButton>\n </template>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.footer-stepper {\n @apply flex items-center justify-between gap-x-4 transition-all duration-150;\n\n .numeric {\n @apply text-rui-text;\n }\n\n .bullets,\n .pills {\n @apply flex;\n\n .bullet,\n .pill {\n @apply rounded-full h-2 bg-black/[0.26] transition-colors;\n\n &.active {\n @apply bg-rui-primary;\n }\n }\n\n .bullet {\n @apply hover:bg-rui-grey-300 cursor-pointer;\n\n &.active {\n @apply hover:bg-rui-primary;\n }\n }\n\n .pill {\n @apply bg-rui-grey-200;\n }\n }\n\n .bullets {\n @apply gap-x-1;\n\n .bullet {\n @apply w-2;\n }\n }\n\n .pills {\n @apply w-full gap-x-3;\n\n .pill {\n @apply w-full;\n }\n }\n\n .progress {\n @apply max-w-[60%];\n }\n\n .arrow__button {\n @apply bg-white disabled:bg-white/60 #{!important};\n }\n}\n\n:global(.dark) {\n .footer-stepper {\n .bullets,\n .pills {\n .bullet,\n .pill {\n @apply bg-rui-grey-300;\n\n &.active {\n @apply bg-rui-primary;\n }\n }\n\n .bullet {\n @apply hover:bg-rui-grey-400;\n\n &.active {\n @apply hover:bg-rui-primary;\n }\n }\n }\n\n .bullets {\n .bullet {\n @apply bg-white/30;\n }\n }\n\n .arrow__button {\n @apply disabled:bg-[rgb(50,50,50)] #{!important};\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_Fragment","_renderList","_unref","_createBlock","_openBlock","_createVNode","_toDisplayString"],"mappings":"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"}

package/dist/components/steppers/RuiStepper.vue.d.ts CHANGED Viewed

@@ -17,12 +17,12 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    orientation: StepperOrientation;
     step: number;
     custom: boolean;
     iconTop: boolean;
     titleClass: string;
     subtitleClass: string;
+    orientation: StepperOrientation;
     keepActiveVisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/steppers/RuiStepper.vue2.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import { defineComponent, toRefs, computed, ref, watch, nextTick, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createCommentVNode, createElementVNode, renderSlot, mergeProps, createBlock, toDisplayString } from "vue";
+import { defineComponent, toRefs, computed, ref, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createCommentVNode, createElementVNode, renderSlot, mergeProps, createBlock, toDisplayString } from "vue";
 import RuiProgress from "../progress/RuiProgress.vue.js";
 import RuiStepperCustomIcon from "./RuiStepperCustomIcon.vue.js";
 import RuiStepperIcon from "./RuiStepperIcon.vue.js";
 import { StepperOrientation, StepperState } from "../../types/stepper.js";
 import { get } from "@vueuse/shared";
 import { isDefined } from "@vueuse/core";
-const _hoisted_1 = { class: "relative flex py-2" };
+const _hoisted_1 = ["aria-current"];
+const _hoisted_2 = { class: "relative flex py-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiStepper"
@@ -61,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "wrapperRef",
         ref: wrapperRef,
+        role: "list",
+        "aria-label": "Progress steps",
         class: normalizeClass([[
           _ctx.$style.stepper,
           _ctx.$style[unref(orientation) ?? ""],
@@ -74,6 +77,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.divider)
             }, null, 2)) : createCommentVNode("", true),
             createElementVNode("div", {
+              role: "listitem",
+              "aria-current": state === unref(StepperState).active ? "step" : void 0,
               class: normalizeClass([
                 _ctx.$style.step,
                 _ctx.$style[state ?? unref(StepperState).inactive],
@@ -83,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             }, [
               renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, { state, index: index + 1 }), () => [
-                createElementVNode("div", _hoisted_1, [
+                createElementVNode("div", _hoisted_2, [
                   unref(custom) ? (openBlock(), createBlock(RuiStepperCustomIcon, {
                     key: 0,
                     index: index + 1,
@@ -117,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   class: normalizeClass([[_ctx.$style.subtitle, { [__props.subtitleClass]: unref(custom) }], "text-caption"])
                 }, toDisplayString(description), 3)) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
-            ], 2)
+            ], 10, _hoisted_1)
           ], 64);
         }), 128))
       ], 2);

package/dist/components/steppers/RuiStepper.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiStepper.vue2.js","sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperCustomIcon from '@/components/steppers/RuiStepperCustomIcon.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport {\n StepperOrientation,\n StepperState,\n type StepperStep,\n} from '@/types/stepper';\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n titleClass?: string;\n subtitleClass?: string;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n step: undefined,\n iconTop: false,\n custom: false,\n titleClass: '',\n subtitleClass: '',\n orientation: StepperOrientation.horizontal,\n keepActiveVisible: true,\n});\n\nconst { custom, steps, step, orientation, keepActiveVisible } = toRefs(props);\n\n// automatically set step state to stepper.\nconst renderedStep = computed(() => {\n const currentStep = get(step);\n const stepsVal = get(steps);\n\n if (!isDefined(currentStep))\n return stepsVal;\n\n return stepsVal.map((text, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === currentStep)\n stepStatus = StepperState.active;\n\n if (index + 1 < currentStep)\n stepStatus = StepperState.done;\n\n return {\n ...text,\n state: stepStatus,\n };\n });\n});\n\nconst wrapperRef = ref<HTMLDivElement>();\n\nwatch(step, () => {\n if (\n !get(keepActiveVisible)\n \|\| get(orientation) !== StepperOrientation.horizontal\n ) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (elem) {\n const activeStep = elem.querySelector('.active-step');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n }\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n :class=\"[\n $style.stepper,\n $style[orientation ?? ''],\n { [$style['icon-top']]: iconTop, [$style.custom]: custom },\n ]\"\n class=\"no-scrollbar overflow-auto\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <hr\n v-if=\"index > 0\"\n :class=\"$style.divider\"\n />\n <div\n :class=\"[\n $style.step,\n $style[state ?? StepperState.inactive],\n {\n 'active-step': state === StepperState.active,\n },\n ]\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperCustomIcon\n v-if=\"custom\"\n :index=\"index + 1\"\n :state=\"state\"\n />\n <RuiStepperIcon\n v-else\n :index=\"index + 1\"\n :state=\"state\"\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=\"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=\"$style.label\"\n >\n <span\n v-if=\"title\"\n :class=\"[$style.title, { [titleClass]: custom }]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[$style.subtitle, { [subtitleClass]: custom }]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'error', 'warning', 'info', 'success';\n.stepper {\n @apply flex;\n\n &.horizontal {\n @apply whitespace-nowrap lg:whitespace-normal;\n }\n\n &.vertical {\n @apply flex-col inline-flex;\n\n .step {\n @apply px-0 py-6;\n }\n\n .divider {\n @apply block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l border-rui-grey-400;\n }\n\n &.custom {\n .divider {\n @apply mx-5;\n }\n }\n\n &.icon-top {\n .divider {\n @apply self-center mx-auto;\n }\n }\n }\n\n .step {\n @apply flex items-center px-6 relative;\n\n .indicator {\n @apply inline-flex items-center justify-center rounded-full h-6 w-6 min-w-[1.5rem];\n }\n\n .label {\n @apply flex flex-col items-start text-left ml-2;\n }\n\n &.inactive {\n @apply text-rui-text-disabled;\n\n .title {\n @apply text-rui-text-secondary;\n }\n\n .subtitle {\n @apply text-rui-text;\n }\n }\n\n &.active,\n &.done {\n @apply text-rui-text;\n\n .subtitle {\n @apply text-rui-text-secondary;\n }\n }\n\n @each $color in $colors {\n &.#{$color} {\n @apply text-rui-#{$color};\n }\n }\n }\n\n &.icon-top {\n .step {\n @apply flex-col;\n\n .label {\n @apply ml-0 mt-4 items-center text-center;\n }\n }\n }\n\n .divider {\n @apply block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t border-rui-grey-400;\n flex: 1 1 0;\n }\n\n &.custom {\n .step {\n .divider {\n @apply border-rui-primary-lighter;\n }\n\n &.inactive {\n @apply text-rui-text;\n }\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_Fragment","_renderList","_createElementVNode","_renderSlot","_mergeProps","_createBlock"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~AAyBA,UAAM,QAAQ;AAUd,UAAM,EAAE,QAAQ,OAAO,MAAM,aAAa,kBAAA,IAAsB,OAAO,KAAK;AAG5E,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,cAAc,IAAI,IAAI;AAC5B,YAAM,WAAW,IAAI,KAAK;AAE1B,UAAI,CAAC,UAAU,WAAW;AACxB,eAAO;AAET,aAAO,SAAS,IAAI,CAAC,MAAM,UAAU;AACnC,YAAI,aAA2B,aAAa;AAE5C,YAAI,QAAQ,MAAM;AAChB,uBAAa,aAAa;AAE5B,YAAI,QAAQ,IAAI;AACd,uBAAa,aAAa;AAE5B,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,QAAA;AAAA,MAEX,CAAC;AAAA,IACH,CAAC;AAED,UAAM,aAAa,IAAA;AAEnB,UAAM,MAAM,MAAM;AAChB,UACE,CAAC,IAAI,iBAAiB,KACnB,IAAI,WAAW,MAAM,mBAAmB,YAC3C;AACA;AAAA,MACF;AAEA,eAAS,MAAM;AACb,cAAM,OAAO,IAAI,UAAU;AAC3B,YAAI,MAAM;AACR,gBAAM,aAAa,KAAK,cAAc,cAAc;AACpD,sBAAY,iBAAiB;AAAA,YAC3B,UAAU;AAAA,YACV,QAAQ;AAAA,UAAA,CACT;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH,CAAC;;0BAICA,~~mBAyEM~~,OAAA;AAAA,~~iBAxEA~~;AAAA,QAAJ,KAAI;AAAA,~~QACH~~,OAAKC,eAAA,CAAA;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAeA,KAAAA,OAAOC,MAAA,WAAA,KAAW,EAAA;AAAA,UAAkBD,EAAAA,CAAAA,KAAAA,qBAAqB,QAAA,SAAO,CAAGA,YAAO,MAAM,GAAGC,MAAA,MAAA,EAAA;AAAA,QAAM,GAKzH,4BAA4B,CAAA;AAAA,MAAA;0BAElCH,~~mBA+DWI~~,UAAA,MAAAC,~~WA9DiDF~~,MAAA,YAAA,GAAY,CAAA,EAA5D,OAAO,aAAa,OAAO,QAAA,GAAW,UAAK;kEAC/C,SAAK;AAAA,YAGH,QAAK,kBADbH,mBAGE,MAAA;AAAA;cADC,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,YAAA;YAExBI,~~mBAsDM~~,OAAA;AAAA,~~cArDH~~,~~OAAKL~~,eAAA;AAAA,gBAAcC,KAAAA,OAAO;AAAA,gBAAgBA,KAAAA,OAAO,SAASC,MAAA,YAAA,EAAa,QAAQ;AAAA;iCAA0C,UAAUA,MAAA,YAAA,EAAa;AAAA,gBAAA;AAAA;;cAQjJI,WAyBO,qBAzBPC,WAyBO,EAAA,SAAA,KAAA,GAAA,EAvBK,OAAK,OAAS,cAF1B,MAyBO;AAAA,gBArBLF,mBAoBM,OApBN,YAoBM;AAAA,kBAlBIH,MAAA,MAAA,kBADRM,YAIE,sBAAA;AAAA;oBAFC,OAAO,QAAK;AAAA,oBACZ;AAAA,kBAAA,iDAEHA,YAIE,gBAAA;AAAA;oBAFC,OAAO,QAAK;AAAA,oBACZ;AAAA,kBAAA;kBAGK,wBADRA,YAQE,aAAA;AAAA;oBANA,OAAM;AAAA,oBACN,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,UAAA;AAAA,oBACA,WAAU;AAAA,oBACV,OAAM;AAAA,kBAAA;;;cAKJ,SAAS,4BADjBT,mBAkBM,OAAA;AAAA;gBAhBH,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,cAAA;gBAGZ,sBADRF,mBAMO,QAAA;AAAA;kBAJJ,OAAKC,eAAA,CAAA,CAAGC,YAAO,UAAU,QAAA,UAAU,GAAGC,MAAA,MAAA,GAAM,GACvC,iBAAiB,CAAA;AAAA,gBAAA,mBAEpB,KAAK,GAAA,CAAA;gBAGF,4BADRH,mBAMO,QAAA;AAAA;kBAJJ,OAAKC,eAAA,CAAA,CAAGC,YAAO,aAAa,QAAA,aAAa,GAAGC,MAAA,MAAA,GAAM,GAC7C,cAAc,CAAA;AAAA,gBAAA,mBAEjB,WAAW,GAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"RuiStepper.vue2.js","sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperCustomIcon from '@/components/steppers/RuiStepperCustomIcon.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport {\n StepperOrientation,\n StepperState,\n type StepperStep,\n} from '@/types/stepper';\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n titleClass?: string;\n subtitleClass?: string;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n step: undefined,\n iconTop: false,\n custom: false,\n titleClass: '',\n subtitleClass: '',\n orientation: StepperOrientation.horizontal,\n keepActiveVisible: true,\n});\n\nconst { custom, steps, step, orientation, keepActiveVisible } = toRefs(props);\n\n// automatically set step state to stepper.\nconst renderedStep = computed(() => {\n const currentStep = get(step);\n const stepsVal = get(steps);\n\n if (!isDefined(currentStep))\n return stepsVal;\n\n return stepsVal.map((text, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === currentStep)\n stepStatus = StepperState.active;\n\n if (index + 1 < currentStep)\n stepStatus = StepperState.done;\n\n return {\n ...text,\n state: stepStatus,\n };\n });\n});\n\nconst wrapperRef = ref<HTMLDivElement>();\n\nwatch(step, () => {\n if (\n !get(keepActiveVisible)\n \|\| get(orientation) !== StepperOrientation.horizontal\n ) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (elem) {\n const activeStep = elem.querySelector('.active-step');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n }\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n role=\"list\"\n aria-label=\"Progress steps\"\n :class=\"[\n $style.stepper,\n $style[orientation ?? ''],\n { [$style['icon-top']]: iconTop, [$style.custom]: custom },\n ]\"\n class=\"no-scrollbar overflow-auto\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <hr\n v-if=\"index > 0\"\n :class=\"$style.divider\"\n />\n <div\n role=\"listitem\"\n :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n :class=\"[\n $style.step,\n $style[state ?? StepperState.inactive],\n {\n 'active-step': state === StepperState.active,\n },\n ]\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperCustomIcon\n v-if=\"custom\"\n :index=\"index + 1\"\n :state=\"state\"\n />\n <RuiStepperIcon\n v-else\n :index=\"index + 1\"\n :state=\"state\"\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=\"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=\"$style.label\"\n >\n <span\n v-if=\"title\"\n :class=\"[$style.title, { [titleClass]: custom }]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[$style.subtitle, { [subtitleClass]: custom }]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n$colors: 'error', 'warning', 'info', 'success';\n.stepper {\n @apply flex;\n\n &.horizontal {\n @apply whitespace-nowrap lg:whitespace-normal;\n }\n\n &.vertical {\n @apply flex-col inline-flex;\n\n .step {\n @apply px-0 py-6;\n }\n\n .divider {\n @apply block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l border-rui-grey-400;\n }\n\n &.custom {\n .divider {\n @apply mx-5;\n }\n }\n\n &.icon-top {\n .divider {\n @apply self-center mx-auto;\n }\n }\n }\n\n .step {\n @apply flex items-center px-6 relative;\n\n .indicator {\n @apply inline-flex items-center justify-center rounded-full h-6 w-6 min-w-[1.5rem];\n }\n\n .label {\n @apply flex flex-col items-start text-left ml-2;\n }\n\n &.inactive {\n @apply text-rui-text-disabled;\n\n .title {\n @apply text-rui-text-secondary;\n }\n\n .subtitle {\n @apply text-rui-text;\n }\n }\n\n &.active,\n &.done {\n @apply text-rui-text;\n\n .subtitle {\n @apply text-rui-text-secondary;\n }\n }\n\n @each $color in $colors {\n &.#{$color} {\n @apply text-rui-#{$color};\n }\n }\n }\n\n &.icon-top {\n .step {\n @apply flex-col;\n\n .label {\n @apply ml-0 mt-4 items-center text-center;\n }\n }\n }\n\n .divider {\n @apply block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t border-rui-grey-400;\n flex: 1 1 0;\n }\n\n &.custom {\n .step {\n .divider {\n @apply border-rui-primary-lighter;\n }\n\n &.inactive {\n @apply text-rui-text;\n }\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_Fragment","_renderList","_createElementVNode","_renderSlot","_mergeProps","_createBlock"],"mappings":"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"}

package/dist/components/steppers/RuiStepperCustomIcon.vue2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, unref, toDisplayString } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createBlock } from "vue";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { StepperState } from "../../types/stepper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/steppers/RuiStepperIcon.vue2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref, toDisplayString } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createBlock, createCommentVNode } from "vue";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { StepperState } from "../../types/stepper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/tables/RuiDataTable.vue2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, toRefs, computed, ref, watch, onMounted, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, unref, isRef, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, Fragment, toDisplayString, createTextVNode, Transition } from "vue";
+import { defineComponent, useSlots, toRefs, computed, ref, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, createBlock, isRef, createCommentVNode, createElementVNode, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, Fragment, toDisplayString, createTextVNode, Transition } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiCheckbox from "../forms/checkbox/RuiCheckbox.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
@@ -9,21 +9,22 @@ import RuiTableHead from "./RuiTableHead.vue.js";
 import RuiTablePagination from "./RuiTablePagination.vue.js";
 import noDataPlaceholder from "./table_no_data_placeholder.svg.js";
 import noDataPlaceholderDark from "./table_no_data_placeholder_dark.svg.js";
-import { assert } from "../../utils/assert.js";
 import { useTable } from "../../composables/defaults/table.js";
-import { watchImmediate, isDefined } from "@vueuse/core";
-import "scule";
-import { get, set } from "@vueuse/shared";
-import { useRotkiTheme } from "../../composables/theme.js";
 import { useStickyTableHeader } from "../../composables/sticky-header.js";
-const _hoisted_1 = ["colspan"];
-const _hoisted_2 = { class: "flex items-center gap-2" };
-const _hoisted_3 = ["colspan", "rowspan"];
-const _hoisted_4 = ["colspan"];
-const _hoisted_5 = { key: 1 };
+import { useRotkiTheme } from "../../composables/theme.js";
+import { assert } from "../../utils/assert.js";
+import { get, set } from "@vueuse/shared";
+import { watchImmediate, isDefined } from "@vueuse/core";
+const _hoisted_1 = ["aria-busy"];
+const _hoisted_2 = ["colspan"];
+const _hoisted_3 = { class: "flex items-center gap-2" };
+const _hoisted_4 = ["aria-selected"];
+const _hoisted_5 = ["colspan", "rowspan"];
 const _hoisted_6 = ["colspan"];
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = ["src", "alt"];
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = ["colspan"];
+const _hoisted_9 = ["colspan"];
+const _hoisted_10 = ["src", "alt"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiDataTable"
@@ -645,6 +646,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "table",
             ref: table,
             class: normalizeClass([_ctx.$style.table, { [_ctx.$style.dense]: __props.dense }]),
+            "aria-busy": __props.loading,
             "aria-label": ""
           }, [
             createVNode(RuiTableHead, {
@@ -722,7 +724,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         class: normalizeClass([[_ctx.$style.td], "!p-2"]),
                         colspan: unref(colspan)
                       }, [
-                        createElementVNode("div", _hoisted_2, [
+                        createElementVNode("div", _hoisted_3, [
                           __props.groupExpandButtonPosition === "start" ? (openBlock(), createBlock(RuiExpandButton, {
                             key: 0,
                             expanded: isExpandedGroup(row.group),
@@ -737,6 +739,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               size: "sm",
                               variant: "text",
                               icon: "",
+                              "data-cy": "group-copy-button",
                               onClick: ($event) => onCopyGroup({ key: unref(groupKey), value: row.group })
                             }, {
                               default: withCtx(() => [
@@ -779,7 +782,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             onClick: ($event) => onToggleExpandGroup(row.group, row.identifier)
                           }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
                         ])
-                      ], 10, _hoisted_1)
+                      ], 10, _hoisted_2)
                     ])
                   ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                     (openBlock(), createElementBlock("tr", {
@@ -788,7 +791,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _ctx.$style.tr,
                         { [_ctx.$style.tr__selected ?? ""]: isSelected(row[unref(rowIdentifier)]) },
                         typeof __props.itemClass === "string" ? __props.itemClass : __props.itemClass(row)
-                      ])
+                      ]),
+                      "aria-selected": unref(selectedData) ? isSelected(row[unref(rowIdentifier)]) : void 0
                     }, [
                       unref(selectedData) ? (openBlock(), createElementBlock("td", {
                         key: 0,
@@ -838,9 +842,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, () => [
                             createTextVNode(toDisplayString(cellValue(row, column.key)), 1)
                           ])
-                        ], 10, _hoisted_3);
+                        ], 10, _hoisted_5);
                       }), 128))
-                    ], 2)),
+                    ], 10, _hoisted_4)),
                     unref(expandable) && isExpanded(row[unref(rowIdentifier)]) ? (openBlock(), createElementBlock("tr", {
                       key: `row-expand-${index}`,
                       class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__expandable])
@@ -853,12 +857,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           row,
                           index
                         })
-                      ], 10, _hoisted_4)
+                      ], 10, _hoisted_6)
                     ], 2)) : createCommentVNode("", true)
                   ], 64))
                 ], 64);
               }), 256)),
-              __props.loading && unref(noData) ? (openBlock(), createElementBlock("tr", _hoisted_5, [
+              __props.loading && unref(noData) ? (openBlock(), createElementBlock("tr", _hoisted_7, [
                 createElementVNode("td", {
                   class: normalizeClass(_ctx.$style.tbody__loader),
                   colspan: unref(colspan)
@@ -868,7 +872,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     variant: "indeterminate",
                     circular: ""
                   })
-                ], 10, _hoisted_6)
+                ], 10, _hoisted_8)
               ])) : createCommentVNode("", true),
               unref(noData) && __props.empty && !__props.loading ? (openBlock(), createElementBlock("tr", {
                 key: 2,
@@ -896,7 +900,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             src: unref(isDark) ? unref(noDataPlaceholderDark) : unref(noDataPlaceholder),
                             alt: __props.empty.label,
                             class: "h-32"
-                          }, null, 8, _hoisted_8),
+                          }, null, 8, _hoisted_10),
                           __props.empty.label ? (openBlock(), createElementBlock("p", {
                             key: 0,
                             class: normalizeClass(_ctx.$style.empty__label)
@@ -909,7 +913,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           ])
                         ], 2)
                       ])
-                    ], 10, _hoisted_7)
+                    ], 10, _hoisted_9)
                   ]),
                   _: 3
                 })
@@ -922,7 +926,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("tfoot", null, [
               renderSlot(_ctx.$slots, "tfoot")
             ])
-          ], 2)
+          ], 10, _hoisted_1)
         ], 2),
         unref(paginationData) && !__props.hideDefaultFooter ? (openBlock(), createBlock(RuiTablePagination, {
           key: 1,