@ironsource/shared-ui 2.2.0-rc.42 → 2.2.0-rc.48

package/components/table/v4/DataGridMenu.vue2.js

@@ -1,5 +1,5 @@
- import "../../../DataGridMenu.vue_vue_type_style_index_0_scoped_ddfaf207_lang.css"; import { defineComponent as u, onBeforeUnmount as f, openBlock as x, createBlock as w, unref as o, withCtx as r, createVNode as c, createSlots as I, createTextVNode as v, toDisplayString as M } from "vue";
-import g from "../../dropdown/v4/DropdownV4.vue.js";
+ import "../../../DataGridMenu.vue_vue_type_style_index_0_scoped_b7e65177_lang.css"; import { defineComponent as x, onBeforeUnmount as w, openBlock as b, createBlock as v, unref as n, withCtx as r, createVNode as c, createSlots as I, createTextVNode as M, toDisplayString as g } from "vue";
+import C from "../../dropdown/v4/DropdownV4.vue.js";
 import "../../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../../dropdown/v4/ChipDropdownTrigger.vue.js";
@@ -7,47 +7,53 @@ import "../../dropdown/v4/AppDropdownTrigger.vue.js";
 import "../../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../../dropdown/v4/TreeDropdown.vue.js";
-import C from "../../dropdown/v4/OptionV4.vue.js";
+import k from "../../dropdown/v4/OptionV4.vue.js";
 import "../../dropdown/v4/ConditionalDropdown.vue.js";
-import k from "../../icon/v4/IconV4.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import { useTableContext as y } from "../common/TableContext.js";
-const h = /* @__PURE__ */ u({
+import { useTableContext as A } from "../common/TableContext.js";
+const q = /* @__PURE__ */ x({
   __name: "DataGridMenu",
   props: {
     menuItems: { default: () => [] },
     rowIndex: { default: null },
-    placement: { default: "left-start" }
+    placement: { default: "left-start" },
+    ariaLabel: { default: "More options" }
   },
   emits: ["selected"],
   setup(t, { emit: d }) {
-    const n = t, i = y("DataGridMenu"), a = (s) => s.text, p = () => {
-      n.rowIndex && i.setActiveMenuRow(n.rowIndex);
-    }, m = () => {
-      n.rowIndex && i.setActiveMenuRow(null);
+    const o = t, a = A("DataGridMenu"), i = (m) => m.text, p = () => {
+      o.rowIndex && a.setActiveMenuRow(o.rowIndex);
+    }, l = () => {
+      o.rowIndex && a.setActiveMenuRow(null);
     };
-    return f(m), (s, l) => (x(), w(o(g), {
+    return w(l), (m, s) => (b(), v(n(C), {
       class: "data-grid-menu",
       options: t.menuItems,
-      "display-value": a,
+      "display-value": i,
+      "aria-label": t.ariaLabel,
       "predefined-trigger": "icon-button",
       placement: t.placement,
       skidding: -4,
-      "onUpdate:selected": l[0] || (l[0] = (e) => d("selected", e)),
+      "onUpdate:selected": s[0] || (s[0] = (e) => d("selected", e)),
       onOpened: p,
-      onClosed: m
+      onClosed: l
     }, {
-      default: r(({ option: e }) => [
-        c(o(C), { option: e }, I({
+      default: r(({ option: e, active: u, selected: f }) => [
+        c(n(k), {
+          option: e,
+          active: u,
+          "selected-prop": f
+        }, I({
           default: r(() => [
-            v(" " + M(a(e)), 1)
+            M(" " + g(i(e)), 1)
           ]),
           _: 2
         }, [
           e.icon ? {
             name: "icon-start",
             fn: r(() => [
-              c(o(k), {
+              c(n(y), {
                 class: "menu-icon",
                 name: e.icon,
                 size: "20px"
@@ -55,12 +61,12 @@ const h = /* @__PURE__ */ u({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["option"])
+        ]), 1032, ["option", "active", "selected-prop"])
       ]),
       _: 1
-    }, 8, ["options", "placement"]));
+    }, 8, ["options", "aria-label", "placement"]));
   }
 });
 export {
-  h as default
+  q as default
 };

package/components/table/v4/index.d.ts

@@ -9,6 +9,10 @@ declare const DataGridTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<import("floating-vue").Placement>;
         default: string;
     };
+    ariaLabel: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     rowIndex: {
         type: import("vue").PropType<number>;
         default: any;
@@ -25,6 +29,10 @@ declare const DataGridTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<import("floating-vue").Placement>;
         default: string;
     };
+    ariaLabel: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     rowIndex: {
         type: import("vue").PropType<number>;
         default: any;
@@ -38,6 +46,7 @@ declare const DataGridTypes: () => (import("vue").DefineComponent<{
     onSelected?: (option: unknown) => any;
 }, {
     placement: import("floating-vue").Placement;
+    ariaLabel: string;
     rowIndex: number;
     menuItems: import("../common/Table.types").MenuItem[];
 }> | import("vue").DefineComponent<{

package/components/tabs/v4/TabsV4.vue.d.ts

@@ -4,10 +4,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selectedTab: string | number;
     variant?: "page" | "card";
     testId?: string;
+    ariaLabel?: string;
 }>, {
     tabsList: () => any[];
     variant: string;
     testId: string;
+    ariaLabel: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedTab": (tabId: string | number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -15,15 +17,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selectedTab: string | number;
     variant?: "page" | "card";
     testId?: string;
+    ariaLabel?: string;
 }>, {
     tabsList: () => any[];
     variant: string;
     testId: string;
+    ariaLabel: any;
 }>>> & {
     "onUpdate:selectedTab"?: (tabId: string | number) => any;
 }, {
     testId: string;
     variant: "page" | "card";
+    ariaLabel: string;
     tabsList: Tab[];
 }>, {
     "tab-icon"?(_: {

package/components/tabs/v4/TabsV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./TabsV4.vue2.js";
 /* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; //*');
-const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f9433b11"]]);
+// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_9747c9da_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9747c9da"]]);
 export {
-  p as default
+  a as default
 };

package/components/tabs/v4/TabsV4.vue2.js

@@ -1,72 +1,103 @@
- import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; import { defineComponent as x, useCssVars as y, ref as l, watch as C, nextTick as $, openBlock as o, createElementBlock as c, mergeProps as w, unref as s, Fragment as A, renderList as S, normalizeClass as g, renderSlot as V, createBlock as B, withCtx as M, createTextVNode as N, toDisplayString as R, createCommentVNode as _, pushScopeId as E, popScopeId as P, createElementVNode as W } from "vue";
-import H from "../../typography/v4/Typography.vue.js";
-import { TabsTestIdModifiers as m } from "../../../testids/index.js";
-import { tabsCommon as z } from "../common/tabsCommon.js";
-import { useTestIdAttrs as D } from "../../../utils/testIds.js";
-const F = (t) => (E("data-v-f9433b11"), t = t(), P(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ W("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ x({
+ import "../../../TabsV4.vue_vue_type_style_index_0_scoped_9747c9da_lang.css"; import { defineComponent as B, useCssVars as H, ref as m, computed as I, watch as M, nextTick as x, openBlock as c, createElementBlock as v, mergeProps as N, unref as n, Fragment as _, renderList as D, normalizeClass as K, renderSlot as P, createBlock as W, withCtx as z, createTextVNode as F, toDisplayString as O, createCommentVNode as U, pushScopeId as j, popScopeId as q, createElementVNode as G } from "vue";
+import J from "../../typography/v4/Typography.vue.js";
+import { TabsTestIdModifiers as p } from "../../../testids/index.js";
+import { tabsCommon as Q } from "../common/tabsCommon.js";
+import { useTestIdAttrs as X } from "../../../utils/testIds.js";
+const Y = (r) => (j("data-v-9747c9da"), r = r(), q(), r), Z = ["aria-label"], ee = ["aria-selected", "aria-disabled", "tabindex", "data-testid", "onClick", "onKeydown", "onMouseover"], te = /* @__PURE__ */ Y(() => /* @__PURE__ */ G("div", { class: "tabs-border-line" }, null, -1)), oe = /* @__PURE__ */ B({
   __name: "TabsV4",
   props: {
     tabsList: { default: () => [] },
     selectedTab: null,
     variant: { default: "card" },
-    testId: { default: "" }
+    testId: { default: "" },
+    ariaLabel: { default: void 0 }
   },
   emits: ["update:selectedTab"],
-  setup(t, { emit: p }) {
-    const r = t;
-    y((a) => ({
-      "167b065e": v.value,
-      "8cfadb62": b.value
+  setup(r, { emit: w }) {
+    const a = r;
+    H((t) => ({
+      "47c9cbb1": T.value,
+      "9be71148": h.value
     }));
-    const { skipUnwrap: T, selectTab: I, setHover: L, clearHover: u, getSelectedTabIndex: k } = z(r, p), f = l(null), h = D(r.testId, m), i = (a) => a.id === r.selectedTab, b = l(), v = l();
-    return C(
-      [() => r.variant, () => r.selectedTab, () => r.tabsList],
+    const { skipUnwrap: g, selectTab: b, setHover: y, clearHover: L, getSelectedTabIndex: k } = Q(a, w), f = m(null), A = X(a.testId, p), l = (t) => t.id === a.selectedTab, C = I(
+      () => a.tabsList.some((t) => l(t))
+    ), E = I(
+      () => a.tabsList.findIndex((t) => !t.disabled)
+    ), S = (t, i) => t.disabled ? -1 : C.value ? l(t) ? 0 : -1 : i === E.value ? 0 : -1, $ = (t) => {
+      x(() => {
+        f.value?.children?.[t]?.focus();
+      });
+    }, R = (t, i) => {
+      const { key: e } = t;
+      if (e === "Enter" || e === " " || e === "Spacebar") {
+        t.preventDefault(), a.tabsList[i]?.disabled || b(a.tabsList[i]);
+        return;
+      }
+      if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e))
+        return;
+      t.preventDefault();
+      const s = a.tabsList.map((u, V) => u.disabled ? -1 : V).filter((u) => u !== -1);
+      if (!s.length)
+        return;
+      const o = s.indexOf(i);
+      let d = i;
+      e === "ArrowRight" ? d = s[(o + 1) % s.length] : e === "ArrowLeft" ? d = s[(o - 1 + s.length) % s.length] : e === "Home" ? d = s[0] : e === "End" && (d = s[s.length - 1]), b(a.tabsList[d]), $(d);
+    }, h = m(), T = m();
+    return M(
+      [() => a.variant, () => a.selectedTab, () => a.tabsList],
       async () => {
-        const a = k();
-        if (a === -1)
+        const t = k();
+        if (t === -1)
           return;
-        await $();
-        const e = Array.from(f.value?.children || []).at(a);
-        b.value = e?.clientWidth + "px", v.value = e?.offsetLeft + "px";
+        await x();
+        const e = Array.from(f.value?.children || []).at(t);
+        h.value = e?.clientWidth + "px", T.value = e?.offsetLeft + "px";
       },
       { immediate: !0 }
-    ), (a, n) => (o(), c("ul", w({
+    ), (t, i) => (c(), v("ul", N({
       ref_key: "tabsListRef",
       ref: f,
-      class: ["tabs-list", [`tabs-list--${t.variant}`]]
-    }, s(h)[s(m).WRAPPER]), [
-      (o(!0), c(A, null, S(t.tabsList, (e) => (o(), c("li", {
+      class: ["tabs-list", [`tabs-list--${r.variant}`]],
+      role: "tablist",
+      "aria-label": r.ariaLabel || void 0
+    }, n(A)[n(p).WRAPPER]), [
+      (c(!0), v(_, null, D(r.tabsList, (e, s) => (c(), v("li", {
         ref_for: !0,
-        ref: s(T).tabsNewList,
+        ref: n(g).tabsNewList,
         key: e.id,
-        class: g(["tab-item", {
+        class: K(["tab-item", {
           "tab-item--disabled": e.disabled,
-          "tab-item--active": i(e)
+          "tab-item--active": l(e)
         }]),
-        "data-testid": t.testId ? `${t.testId}-${s(m).TAB}-${e.id}` : void 0,
-        onClick: (d) => s(I)(e),
-        onMouseover: (d) => s(L)(e),
-        onMouseleave: n[0] || (n[0] = //@ts-ignore
-        (...d) => s(u) && s(u)(...d))
+        role: "tab",
+        "aria-selected": l(e),
+        "aria-disabled": e.disabled || void 0,
+        tabindex: S(e, s),
+        "data-testid": r.testId ? `${r.testId}-${n(p).TAB}-${e.id}` : void 0,
+        onClick: (o) => n(b)(e),
+        onKeydown: (o) => R(o, s),
+        onMouseover: (o) => n(y)(e),
+        onMouseleave: i[0] || (i[0] = //@ts-ignore
+        (...o) => n(L) && n(L)(...o))
       }, [
-        V(a.$slots, "tab-icon", {
+        P(t.$slots, "tab-icon", {
           tab: e,
-          active: i(e)
+          active: l(e)
         }, void 0, !0),
-        e.name ? (o(), B(s(H), {
+        e.name ? (c(), W(n(J), {
           key: 0,
-          variant: i(e) ? "tabLabel2" : "tabLabel1"
+          variant: l(e) ? "tabLabel2" : "tabLabel1"
         }, {
-          default: M(() => [
-            N(R(e.name), 1)
+          default: z(() => [
+            F(O(e.name), 1)
           ]),
           _: 2
-        }, 1032, ["variant"])) : _("", !0)
-      ], 42, U))), 128)),
-      j
-    ], 16));
+        }, 1032, ["variant"])) : U("", !0)
+      ], 42, ee))), 128)),
+      te
+    ], 16, Z));
   }
 });
 export {
-  Q as default
+  oe as default
 };

package/components/tabs/v4/index.d.ts

@@ -5,6 +5,7 @@ declare const TabsTypes: () => ({
         $props: Partial<{
             testId: string;
             variant: "page" | "card";
+            ariaLabel: string;
             tabsList: import("../common/Tabs.types").Tab[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             testId: {
@@ -15,6 +16,10 @@ declare const TabsTypes: () => ({
                 type: import("vue").PropType<"page" | "card">;
                 default: string;
             };
+            ariaLabel: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             tabsList: {
                 type: import("vue").PropType<import("../common/Tabs.types").Tab[]>;
                 required: true;
@@ -26,7 +31,7 @@ declare const TabsTypes: () => ({
             };
         }>> & {
             "onUpdate:selectedTab"?: (tabId: string | number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "variant" | "tabsList">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "variant" | "ariaLabel" | "tabsList">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -49,6 +54,10 @@ declare const TabsTypes: () => ({
                 type: import("vue").PropType<"page" | "card">;
                 default: string;
             };
+            ariaLabel: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             tabsList: {
                 type: import("vue").PropType<import("../common/Tabs.types").Tab[]>;
                 required: true;
@@ -65,6 +74,7 @@ declare const TabsTypes: () => ({
         }, string, {
             testId: string;
             variant: "page" | "card";
+            ariaLabel: string;
             tabsList: import("../common/Tabs.types").Tab[];
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -95,6 +105,10 @@ declare const TabsTypes: () => ({
             type: import("vue").PropType<"page" | "card">;
             default: string;
         };
+        ariaLabel: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         tabsList: {
             type: import("vue").PropType<import("../common/Tabs.types").Tab[]>;
             required: true;
@@ -119,6 +133,10 @@ declare const TabsTypes: () => ({
         type: import("vue").PropType<"page" | "card">;
         default: string;
     };
+    ariaLabel: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     tabsList: {
         type: import("vue").PropType<import("../common/Tabs.types").Tab[]>;
         required: true;
@@ -135,6 +153,7 @@ declare const TabsTypes: () => ({
 }, string, {
     testId: string;
     variant: "page" | "card";
+    ariaLabel: string;
     tabsList: import("../common/Tabs.types").Tab[];
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {

package/components/toggle/v4/ToggleV4.vue.d.ts

@@ -12,8 +12,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color?: "primary" | "test";
     size?: "small" | "medium";
     testId?: string;
+    ariaLabel?: string;
 }>, {
     text: any;
+    ariaLabel: any;
     activeText: any;
     inactiveText: any;
     hoverHelpText: string;
@@ -41,8 +43,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color?: "primary" | "test";
     size?: "small" | "medium";
     testId?: string;
+    ariaLabel?: string;
 }>, {
     text: any;
+    ariaLabel: any;
     activeText: any;
     inactiveText: any;
     hoverHelpText: string;
@@ -62,6 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color: "primary" | "test";
     size: "small" | "medium";
     isLoading: boolean;
+    ariaLabel: string;
     hoverHelpText: string;
     hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     feedbackText: string;

package/components/toggle/v4/ToggleV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./ToggleV4.vue2.js";
 /* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ToggleV4.vue_vue_type_style_index_0_scoped_a4aa32fb_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a4aa32fb"]]);
+// import "../../../ToggleV4.vue_vue_type_style_index_0_scoped_fbbae882_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-fbbae882"]]);
 export {
-  t as default
+  p as default
 };

package/components/toggle/v4/ToggleV4.vue2.js

@@ -1,12 +1,12 @@
- import "../../../ToggleV4.vue_vue_type_style_index_0_scoped_a4aa32fb_lang.css"; import { defineComponent as k, computed as h, openBlock as i, createElementBlock as m, normalizeClass as f, createElementVNode as r, mergeProps as d, unref as t, createCommentVNode as l, renderSlot as g, createBlock as u, withCtx as v, createTextVNode as b, toDisplayString as y, createVNode as V } from "vue";
+ import "../../../ToggleV4.vue_vue_type_style_index_0_scoped_fbbae882_lang.css"; import { defineComponent as T, computed as h, openBlock as d, createElementBlock as m, normalizeClass as f, createElementVNode as r, mergeProps as c, unref as t, createCommentVNode as a, renderSlot as g, createBlock as u, withCtx as x, createTextVNode as k, toDisplayString as y, createVNode as V } from "vue";
 import E from "../../typography/v4/Typography.vue.js";
-import { ToggleTestIdModifiers as a } from "../../../testids/index.js";
-import B from "../../shared/FieldHelpText.vue.js";
-import { useTestIdAttrs as H } from "../../../utils/testIds.js";
-import I from "../../icon/v4/IconV4.vue.js";
+import { ToggleTestIdModifiers as l } from "../../../testids/index.js";
+import L from "../../shared/FieldHelpText.vue.js";
+import { useTestIdAttrs as B } from "../../../utils/testIds.js";
+import H from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import D from "../../tooltip/v4/TooltipV4.vue.js";
-const L = { class: "toggle-head" }, P = ["disabled", "checked"], O = /* @__PURE__ */ k({
+import I from "../../tooltip/v4/TooltipV4.vue.js";
+const D = ["aria-checked", "aria-label", "disabled"], P = { class: "toggle-head" }, $ = ["disabled", "checked"], X = /* @__PURE__ */ T({
   __name: "ToggleV4",
   props: {
     modelValue: { type: Boolean },
@@ -21,57 +21,66 @@ const L = { class: "toggle-head" }, P = ["disabled", "checked"], O = /* @__PURE_
     isLoading: { type: Boolean, default: !1 },
     color: { default: "primary" },
     size: { default: "small" },
-    testId: { default: "" }
+    testId: { default: "" },
+    ariaLabel: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: x }) {
-    const c = e, T = () => {
-      s.value || x("update:modelValue", !c.modelValue);
-    }, o = H(c.testId, a), s = h(() => c.isDisabled || c.isLoading);
-    return (n, $) => (i(), m("div", {
+  setup(e, { emit: v }) {
+    const s = e, b = () => {
+      i.value || v("update:modelValue", !s.modelValue);
+    }, o = B(s.testId, l), i = h(() => s.isDisabled || s.isLoading);
+    return (n, z) => (d(), m("div", {
       class: f(["toggle", [`toggle--color-${e.color}`, `toggle--size-${e.size}`]])
     }, [
-      r("div", d({ class: "toggle-wrap" }, t(o)[t(a).WRAPPER]), [
-        r("div", d({
+      r("div", c({ class: "toggle-wrap" }, t(o)[t(l).WRAPPER]), [
+        r("button", c({
+          type: "button",
           class: ["toggle-body", {
             "toggle-active": e.modelValue,
-            "toggle-disabled": t(s)
-          }]
-        }, t(o)[t(a).BODY], { onClick: T }), [
-          r("div", L, [
-            e.isLoading ? (i(), m("span", {
+            "toggle-disabled": t(i)
+          }],
+          role: "switch",
+          "aria-checked": !!e.modelValue,
+          "aria-label": e.ariaLabel || e.text || void 0,
+          disabled: t(i)
+        }, t(o)[t(l).BODY], { onClick: b }), [
+          r("div", P, [
+            e.isLoading ? (d(), m("span", {
               key: 0,
               class: f(["loader", { "loader-active": e.modelValue }])
-            }, null, 2)) : l("", !0)
+            }, null, 2)) : a("", !0)
           ])
-        ], 16),
-        r("input", d({
+        ], 16, D),
+        r("input", c({
           type: "checkbox",
           class: "toggle-checkbox",
-          disabled: t(s),
+          tabindex: "-1",
+          "aria-hidden": "true",
+          disabled: t(i),
           checked: e.modelValue
-        }, t(o)[t(a).FIELD]), null, 16, P),
-        n.$slots["icon-left"] ? g(n.$slots, "icon-left", { key: 0 }, void 0, !0) : l("", !0),
-        e.text || e.activeText || e.inactiveText ? (i(), u(t(E), d({
+        }, t(o)[t(l).FIELD]), null, 16, $),
+        n.$slots["icon-left"] ? g(n.$slots, "icon-left", { key: 0 }, void 0, !0) : a("", !0),
+        e.text || e.activeText || e.inactiveText ? (d(), u(t(E), c({
           key: 1,
           variant: "body1",
           "is-truncated": "",
-          class: ["toggle-text", { "toggle-disabled-text": t(s) }]
-        }, t(o)[t(a).TEXT]), {
-          default: v(() => [
-            b(y(e.text ?? (e.modelValue ? e.activeText : e.inactiveText)), 1)
+          class: ["toggle-text", { "toggle-disabled-text": t(i) }]
+        }, t(o)[t(l).TEXT]), {
+          default: x(() => [
+            k(y(e.text ?? (e.modelValue ? e.activeText : e.inactiveText)), 1)
           ]),
           _: 1
-        }, 16, ["class"])) : l("", !0),
-        n.$slots["icon-right"] ? g(n.$slots, "icon-right", { key: 2 }, void 0, !0) : l("", !0),
-        e.hoverHelpText ? (i(), u(t(D), {
+        }, 16, ["class"])) : a("", !0),
+        n.$slots["icon-right"] ? g(n.$slots, "icon-right", { key: 2 }, void 0, !0) : a("", !0),
+        e.hoverHelpText ? (d(), u(t(I), {
           key: 3,
           triggers: ["hover"],
           text: e.hoverHelpText,
-          placement: e.hoverHelpTextPlacement
+          placement: e.hoverHelpTextPlacement,
+          focusable: ""
         }, {
-          default: v(() => [
-            V(t(I), {
+          default: x(() => [
+            V(t(H), {
               class: "info-icon",
               name: "question",
               type: "fill",
@@ -79,18 +88,18 @@ const L = { class: "toggle-head" }, P = ["disabled", "checked"], O = /* @__PURE_
             })
           ]),
           _: 1
-        }, 8, ["text", "placement"])) : l("", !0)
+        }, 8, ["text", "placement"])) : a("", !0)
       ], 16),
-      e.feedbackText ? (i(), u(B, d({
+      e.feedbackText ? (d(), u(L, c({
         key: 0,
         class: "feedback-text",
         text: e.feedbackText,
         variant: e.feedbackVariant,
         "show-icon": !1
-      }, t(o)[t(a).HELPER_TEXT]), null, 16, ["text", "variant"])) : l("", !0)
+      }, t(o)[t(l).HELPER_TEXT]), null, 16, ["text", "variant"])) : a("", !0)
     ], 2));
   }
 });
 export {
-  O as default
+  X as default
 };