sit-onyx 1.1.0-dev-20250924080933 → 2.0.0-dev-20250922064701

package/dist/index.js

@@ -36,10 +36,10 @@ const hp = ["compact", "default", "cozy"], F = (n) => ({
       emit: o,
       key: "modelValue",
       default: () => []
-    }), { disabled: r, exclusive: u } = ro(e), c = oe(e), { densityClass: d } = F(e), p = (y, h) => {
-      if (!h) {
+    }), { disabled: r, exclusive: u } = ro(e), c = oe(e), { densityClass: d } = F(e), p = (y, b) => {
+      if (!b) {
         if (!s.value.includes(y)) return;
-        s.value = s.value.filter((b) => b !== y);
+        s.value = s.value.filter((h) => h !== y);
         return;
       }
       if (u.value) {
@@ -52,8 +52,8 @@ const hp = ["compact", "default", "cozy"], F = (n) => ({
       u,
       (y) => {
         if (y && s.value.length > 1) {
-          const h = s.value.at(-1);
-          s.value = h != null ? [h] : [];
+          const b = s.value.at(-1);
+          s.value = b != null ? [b] : [];
         }
       },
       { immediate: !0 }
@@ -63,7 +63,7 @@ const hp = ["compact", "default", "cozy"], F = (n) => ({
       updateOpen: p,
       disabled: r,
       skeleton: c
-    }), (y, h) => (i(), v(
+    }), (y, b) => (i(), v(
       "div",
       {
         class: I([
@@ -138,12 +138,12 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
     });
     Y(
       () => t.value,
-      (y, h) => {
-        e?.updateOpen(y, e?.openItems.value.includes(y)), e?.updateOpen(h, !1);
+      (y, b) => {
+        e?.updateOpen(y, e?.openItems.value.includes(y)), e?.updateOpen(b, !1);
       }
     );
     const a = oe(t), { densityClass: s } = F(t), r = m(() => e?.disabled.value || t.disabled), u = m(() => e?.type.value ?? "default"), c = m(() => `header-${t.value.toString()}`), d = m(() => `panel-${t.value.toString()}`), p = m(() => a.value || e?.skeleton.value);
-    return (y, h) => p.value ? (i(), _(Ce(u.value === "card" ? Z : "div"), {
+    return (y, b) => p.value ? (i(), _(Ce(u.value === "card" ? Z : "div"), {
       key: 0,
       class: I([
         "onyx-component",
@@ -176,7 +176,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
         "aria-expanded": o.value,
         "aria-controls": d.value,
         "aria-disabled": r.value,
-        onClick: h[0] || (h[0] = Me((b) => o.value = !o.value, ["prevent"]))
+        onClick: b[0] || (b[0] = Me((h) => o.value = !o.value, ["prevent"]))
       }, [
         f("div", El, [
           C(y.$slots, "header")
@@ -450,8 +450,8 @@ const ds = (n, t) => Object.entries(n).every(
     onToggle: d,
     onSelect: p,
     onActivateFirst: y,
-    onActivateLast: h,
-    onActivateNext: b,
+    onActivateLast: b,
+    onActivateNext: h,
     onActivatePrevious: g,
     templateRef: $
   }) => {
@@ -464,24 +464,24 @@ const ds = (n, t) => Object.entries(n).every(
       switch (R.key) {
         case "ArrowUp":
           if (R.preventDefault(), c.value == null)
-            return h?.();
+            return b?.();
           g?.(c.value);
           break;
         case "ArrowDown":
           if (R.preventDefault(), c.value == null)
             return y?.();
-          b?.(c.value);
+          h?.(c.value);
           break;
         case "Home":
           R.preventDefault(), y?.();
           break;
         case "End":
-          R.preventDefault(), h?.();
+          R.preventDefault(), b?.();
           break;
       }
     }, X = (R) => {
       if (R.key === "Enter" && R.preventDefault(), !M.value && eo(R, _n))
-        return d?.(), R.key === " " && R.preventDefault(), R.key === "End" ? h?.() : y?.();
+        return d?.(), R.key === " " && R.preventDefault(), R.key === "End" ? b?.() : y?.();
       if (vs(R, w.value === "none"))
         return K(c.value);
       if (M.value && eo(R, xn))
@@ -554,32 +554,32 @@ const ds = (n, t) => Object.entries(n).every(
   const t = pe(), e = pe(), o = Io(), a = Io(), s = pe(), r = m(() => ne(n.position) ?? "bottom");
   Ye({
     type: "keydown",
-    listener: (h) => h.key === "Escape" && c(!1),
+    listener: (b) => b.key === "Escape" && c(!1),
     disabled: m(() => !n.isExpanded.value)
   });
   const u = bn(() => n.onToggle(), 200);
   Y(n.isExpanded, () => u.abort());
-  const c = (h, b = !1) => {
+  const c = (b, h = !1) => {
     if (!n.disabled?.value) {
-      if (h === n.isExpanded.value) {
+      if (b === n.isExpanded.value) {
         u.abort();
         return;
       }
-      if (b) {
+      if (h) {
         u();
         return;
       }
       n.onToggle();
     }
-  }, d = (h) => {
-    const b = document.activeElement, g = b?.closest('[role="menu"]') || a.value;
+  }, d = (b) => {
+    const h = document.activeElement, g = h?.closest('[role="menu"]') || a.value;
     if (!g) return;
     const $ = Array.from(g.querySelectorAll('[role="menuitem"]')).filter((M) => M.closest('[role="menu"]') === g);
     r.value === "top" && $.reverse();
     let x = 0;
-    if (b) {
-      const M = $.indexOf(b);
-      switch (h) {
+    if (h) {
+      const M = $.indexOf(h);
+      switch (b) {
         case "next":
           x = M + 1;
           break;
@@ -595,27 +595,27 @@ const ds = (n, t) => Object.entries(n).every(
       }
     }
     $[x]?.focus();
-  }, p = (h) => {
-    switch (h.key) {
+  }, p = (b) => {
+    switch (b.key) {
       case "ArrowDown":
-        h.preventDefault(), d(r.value === "bottom" ? "next" : "prev");
+        b.preventDefault(), d(r.value === "bottom" ? "next" : "prev");
         break;
       case "ArrowUp":
-        h.preventDefault(), d(r.value === "bottom" ? "prev" : "next");
+        b.preventDefault(), d(r.value === "bottom" ? "prev" : "next");
         break;
       case "Home":
-        h.preventDefault(), d("first");
+        b.preventDefault(), d("first");
         break;
       case "End":
-        h.preventDefault(), d("last");
+        b.preventDefault(), d("last");
         break;
       case " ":
       case "Enter":
-        if (h.target instanceof HTMLInputElement) break;
-        h.preventDefault(), h.target.click();
+        if (b.target instanceof HTMLInputElement) break;
+        b.preventDefault(), b.target.click();
         break;
       case "Escape":
-        h.preventDefault(), c(!1);
+        b.preventDefault(), c(!1);
         break;
     }
   }, y = m(() => {
@@ -723,12 +723,12 @@ const ds = (n, t) => Object.entries(n).every(
   const t = /* @__PURE__ */ new Map(), e = (a) => (t.has(a) || t.set(a, { tabId: pe(), panelId: pe() }), t.get(a)), o = (a) => {
     const s = a.target, r = Array.from(
       s.parentElement?.querySelectorAll('[role="tab"]') ?? []
-    ).filter((h) => h.ariaDisabled !== "true"), u = r.indexOf(s), c = (h) => {
-      h instanceof HTMLElement && h.focus();
-    }, d = () => c(r.at(0)), p = () => c(r.at(-1)), y = (h) => {
+    ).filter((b) => b.ariaDisabled !== "true"), u = r.indexOf(s), c = (b) => {
+      b instanceof HTMLElement && b.focus();
+    }, d = () => c(r.at(0)), p = () => c(r.at(-1)), y = (b) => {
       if (u === -1) return;
-      const b = h === "next" ? u + 1 : u - 1;
-      return b < 0 ? p() : b >= r.length ? d() : c(r.at(b));
+      const h = b === "next" ? u + 1 : u - 1;
+      return h < 0 ? p() : h >= r.length ? d() : c(r.at(h));
     };
     switch (a.key) {
       case "ArrowRight":
@@ -746,8 +746,8 @@ const ds = (n, t) => Object.entries(n).every(
       case "Enter":
       case " ":
         {
-          const h = Array.from(t.entries()).find(([, { tabId: b }]) => b === s.id);
-          h && n.onSelect?.(h[0]);
+          const b = Array.from(t.entries()).find(([, { tabId: h }]) => h === s.id);
+          b && n.onSelect?.(b[0]);
         }
         break;
     }
@@ -1390,10 +1390,10 @@ const ds = (n, t) => Object.entries(n).every(
   offset: r = 0
 }) => {
   const u = V("-1000px"), c = V("-1000px"), { isIntersecting: d } = Fs(t), p = () => {
-    const h = Ge(n.value), b = Ge(t.value);
-    if (!h || !b)
+    const b = Ge(n.value), h = Ge(t.value);
+    if (!b || !h)
       return;
-    const g = b.getBoundingClientRect(), $ = h.getBoundingClientRect();
+    const g = h.getBoundingClientRect(), $ = b.getBoundingClientRect();
     let x = 0, w = 0;
     const M = ne(a) && ne(o) !== "center" && (ne(e) === "top" || ne(e) === "bottom") ? ne(o) === "left" || ne(s) ? g.left : g.right - $.width : g.left + g.width / 2 - $.width / 2;
     switch (ne(e)) {
@@ -1462,8 +1462,8 @@ const ds = (n, t) => Object.entries(n).every(
         a.value = e;
         return;
       }
-      const p = (d.width - c.width + 32) / 2, y = d.width - c.width + 16, h = window.innerWidth, b = c.left, g = h - c.right, $ = b >= p, x = g >= p;
-      e === "right" && b >= y || e === "left" && g >= y || e === "center" && $ && x ? a.value = e : b > g ? a.value = "right" : a.value = "left";
+      const p = (d.width - c.width + 32) / 2, y = d.width - c.width + 16, b = window.innerWidth, h = c.left, g = b - c.right, $ = h >= p, x = g >= p;
+      e === "right" && h >= y || e === "left" && g >= y || e === "center" && $ && x ? a.value = e : h > g ? a.value = "right" : a.value = "left";
     }
   };
 }, fo = (n, t = "bottom") => {
@@ -1504,7 +1504,7 @@ const ds = (n, t) => Object.entries(n).every(
       set: (R) => s.value = R,
       get: () => typeof o.open == "boolean" && !o.disabled ? o.open : s.value
     }), u = m(
-      () => o.position === "auto" ? b.value : o.position
+      () => o.position === "auto" ? h.value : o.position
     ), c = m(
       () => o.alignment === "auto" ? $.value : o.alignment
     );
@@ -1526,19 +1526,19 @@ const ds = (n, t) => Object.entries(n).every(
           return u.value + " span-left";
       }
       return u.value;
-    }), y = J("popover"), h = J("popoverWrapper"), { openDirection: b, updateOpenDirection: g } = fo(h, "bottom"), { openAlignment: $, updateOpenAlignment: x } = An(
-      h,
+    }), y = J("popover"), b = J("popoverWrapper"), { openDirection: h, updateOpenDirection: g } = fo(b, "bottom"), { openAlignment: $, updateOpenAlignment: x } = An(
+      b,
       y,
       "left"
     ), { leftPosition: w, topPosition: M, updateAnchorPositionPolyfill: O, useragentSupportsAnchorApi: L } = On({
       positionedRef: y,
-      targetRef: h,
+      targetRef: b,
       positionArea: u,
       alignment: c,
       alignsWithEdge: !0,
       fitParent: !1,
       offset: 8
-    }), { width: N } = He(h), K = (R) => {
+    }), { width: N } = He(b), K = (R) => {
       R ? y.value?.showPopover?.() : y.value?.hidePopover?.();
     }, H = () => {
       g(), x();
@@ -1632,7 +1632,7 @@ const ds = (n, t) => Object.entries(n).every(
       disabled: m(() => e.disabled),
       position: m(() => u.value?.includes("top") ? "top" : "bottom")
     });
-    return (y, h) => (i(), _(vo, E(l(fe)(l(c), { ref: r.value }), {
+    return (y, b) => (i(), _(vo, E(l(fe)(l(c), { ref: r.value }), {
       class: "onyx-component onyx-flyout-menu",
       open: l(a),
       label: e.label,
@@ -1697,14 +1697,14 @@ const ds = (n, t) => Object.entries(n).every(
     }), null, 16, ["class", "icon", "skeleton"])) : (i(), _(je, {
       key: 1,
       open: l(u),
-      "onUpdate:open": y[0] || (y[0] = (h) => Ee(u) ? u.value = h : null),
+      "onUpdate:open": y[0] || (y[0] = (b) => Ee(u) ? u.value = b : null),
       label: e.label,
       trigger: "click",
       class: I(["onyx-fab", `onyx-fab--${e.alignment}`, l(s)]),
       alignment: e.alignment
     }, {
-      button: S(({ trigger: h }) => [
-        B(to, E(l(fe)(e, h), {
+      button: S(({ trigger: b }) => [
+        B(to, E(l(fe)(e, b), {
           label: e.label,
           "hide-label": "",
           icon: d.value
@@ -2099,11 +2099,11 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   let n = 1;
   const t = V([]), e = (a) => {
     const s = n++;
-    return t.value.unshift({
+    t.value.unshift({
       ...a,
       id: s,
       onClose: () => o(s)
-    }), s;
+    });
   }, o = (a) => {
     t.value = t.value.filter((s) => s.id !== a);
   };
@@ -2122,7 +2122,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     // provide fallback so "useNotification()" does not return "undefined"
     () => ({
       notifications: m(() => []),
-      show: () => -1,
+      show: n,
       remove: n
     }),
     !0
@@ -2499,9 +2499,9 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         const u = Do(n.parentRef.value), c = Do(n.listRef.value);
         a.value > 0 && (r -= a.value + u), t.value = [], e.value = [];
         const d = Array.from(s.entries());
-        ne(n.direction) === "ltr" && d.reverse(), d.forEach(([p, y], h, { length: b }) => {
-          r -= y + (h > 0 ? c : 0), r >= 0 || // check if last element fits if more indicator would be hidden
-          h === b - 1 && r + a.value >= 0 ? t.value.push(p) : e.value.push(p);
+        ne(n.direction) === "ltr" && d.reverse(), d.forEach(([p, y], b, { length: h }) => {
+          r -= y + (b > 0 ? c : 0), r >= 0 || // check if last element fits if more indicator would be hidden
+          b === h - 1 && r + a.value >= 0 ? t.value.push(p) : e.value.push(p);
         });
       },
       {
@@ -2630,13 +2630,13 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       key: "open",
       default: !1
     }), d = J("backButtonRef"), p = J("menuItemRef"), {
-      elements: { listItem: y, menuItem: h }
+      elements: { listItem: y, menuItem: b }
     } = yo({
       onOpen: async () => {
         x.value && (c.value = !0, await Ve(), d.value?.$el.querySelector("button").focus());
       }
-    }), { isActive: b } = rt(), g = m(() => s.active !== "auto" ? s.active : b.value(s.link)), $ = m(
-      () => h({
+    }), { isActive: h } = rt(), g = m(() => s.active !== "auto" ? s.active : h.value(s.link)), $ = m(
+      () => b({
         active: g.value,
         disabled: s.disabled
       })
@@ -2751,7 +2751,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { restAttrs: e, rootAttrs: o } = ge(), { densityClass: a } = F(t), { currentRoute: s } = rt(), r = oe(t), { componentRef: u, isVisible: c } = Nn(zn), d = ve(Dn, void 0), p = m(() => t.href && t.active === "auto" ? t.href === s.value?.path : t.active);
-    return (y, h) => (i(), v(
+    return (y, b) => (i(), v(
       G,
       null,
       [
@@ -2790,9 +2790,9 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           16
           /* FULL_PROPS */
         )) : k("v-if", !0),
-        l(d) ? (i(), _(st, {
-          key: 1,
-          to: l(d)
+        (i(), _(st, {
+          to: l(d),
+          disabled: !l(d)
         }, [
           l(c) ? k("v-if", !0) : (i(), _(Ne, E({
             key: 0,
@@ -2805,7 +2805,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             _: 3
             /* FORWARDED */
           }, 16, ["link", "active"]))
-        ], 8, ["to"])) : k("v-if", !0)
+        ], 8, ["to", "disabled"]))
       ],
       64
       /* STABLE_FRAGMENT */
@@ -3089,10 +3089,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       step: n.props.validStepSize
     };
     if (c === "typeMismatch") {
-      const h = Kr.includes(n.props.type) ? n.props.type : "generic";
+      const b = Kr.includes(n.props.type) ? n.props.type : "generic";
       return {
-        longMessage: t.value(`validations.typeMismatch.${h}.fullError`, y),
-        shortMessage: t.value(`validations.typeMismatch.${h}.preview`, y)
+        longMessage: t.value(`validations.typeMismatch.${b}.fullError`, y),
+        shortMessage: t.value(`validations.typeMismatch.${b}.preview`, y)
       };
     }
     return {
@@ -3155,11 +3155,11 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       () => e.position === "auto" ? N.value : e.position
     ), y = m(
       () => e.alignment === "auto" ? H.value : e.alignment
-    ), h = m(() => {
+    ), b = m(() => {
       let ke = p.value;
       return (p.value === "top" || p.value === "bottom") && w.value && (y.value === "left" && (ke = p.value + " x-start"), y.value === "right" && (ke = p.value + " x-end")), ke;
-    }), b = () => d.value === "hover" ? ws(u.value) : ks(c.value), g = Ue(b());
-    Y(d, () => g.value = b());
+    }), h = () => d.value === "hover" ? ws(u.value) : ks(c.value), g = Ue(h());
+    Y(d, () => g.value = h());
     const $ = m(() => g.value?.elements.tooltip), x = m(() => ne(g.value?.elements.trigger)), w = m(() => e.alignsWithEdge), M = m(() => e.fitParent), O = J("tooltipWrapperRefEl"), L = J("tooltipRefEl"), { openDirection: N, updateOpenDirection: K } = fo(O, "top"), { openAlignment: H, updateOpenAlignment: X } = An(O, L), { leftPosition: ue, topPosition: P, updateAnchorPositionPolyfill: D, useragentSupportsAnchorApi: ee } = On({
       positionedRef: L,
       targetRef: O,
@@ -3199,7 +3199,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     const et = pe(), me = m(() => `--anchor-${et}`), kt = m(() => ee.value ? {
       width: Qe.value,
       "position-anchor": me.value,
-      "position-area": h.value
+      "position-area": b.value
     } : {
       width: Qe.value,
       left: ue.value,
@@ -3318,8 +3318,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: !1
-    }), { vCustomValidity: c, errorMessages: d } = Pe({ props: o, emit: a }), { densityClass: p } = F(o), { disabled: y, requiredMarker: h } = be(o), b = oe(o), { requiredMarkerClass: g, requiredTypeClass: $ } = zt(o, h), x = m(() => o.hideLabel ? o.label : void 0), w = J("inputRef");
-    return t({ input: w }), Ae(w, o), (M, O) => l(b) ? (i(), v(
+    }), { vCustomValidity: c, errorMessages: d } = Pe({ props: o, emit: a }), { densityClass: p } = F(o), { disabled: y, requiredMarker: b } = be(o), h = oe(o), { requiredMarkerClass: g, requiredTypeClass: $ } = zt(o, b), x = m(() => o.hideLabel ? o.label : void 0), w = J("inputRef");
+    return t({ input: w }), Ae(w, o), (M, O) => l(h) ? (i(), v(
       "div",
       E({
         key: 0,
@@ -3540,7 +3540,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       u.value = w ? [...u.value, x] : u.value.filter((M) => M !== x);
     }, d = m(
       () => o.options.filter((x) => !x.disabled && !x.skeleton).map(({ value: x }) => x)
-    ), { disabled: p, requiredMarker: y } = be(o), h = oe(o), b = qn(
+    ), { disabled: p, requiredMarker: y } = be(o), b = oe(o), h = qn(
       d,
       m(() => u.value),
       (x) => u.value = x
@@ -3582,10 +3582,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           }])
         },
         [
-          l(h) ? typeof l(h) == "number" ? (i(!0), v(
+          l(b) ? typeof l(b) == "number" ? (i(!0), v(
             G,
             { key: 1 },
-            de(l(h), (M) => (i(), _(mt, {
+            de(l(b), (M) => (i(), _(mt, {
               key: M,
               label: `Skeleton ${M}`,
               value: `skeleton-${M}`,
@@ -3600,11 +3600,11 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               o.withCheckAll ? (i(), _(mt, E({
                 key: 0,
                 "required-marker": l(y)
-              }, l(b).state.value, {
+              }, l(h).state.value, {
                 label: g.value,
                 value: "all",
                 class: "onyx-checkbox-group__option onyx-checkbox-group__check-all",
-                "onUpdate:modelValue": l(b).handleChange
+                "onUpdate:modelValue": l(h).handleChange
               }), null, 16, ["required-marker", "label", "onUpdate:modelValue"])) : k("v-if", !0),
               (i(!0), v(
                 G,
@@ -3693,7 +3693,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       "--onyx-table-observed-height": `${u.value}px`,
       "--onyx-table-observed-width": `${c.value}px`
     })), p = pe(), y = m(() => e.headline ? p : void 0);
-    return (h, b) => (i(), v(
+    return (b, h) => (i(), v(
       "div",
       {
         class: "onyx-table-wrapper onyx-component",
@@ -3702,10 +3702,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       [
         e.headline || e.actions ? (i(), v("div", li, [
           f("div", { id: y.value }, [
-            C(h.$slots, "headline")
+            C(b.$slots, "headline")
           ], 8, si),
           f("div", ri, [
-            C(h.$slots, "actions")
+            C(b.$slots, "actions")
           ])
         ])) : k("v-if", !0),
         f("div", E({
@@ -3714,7 +3714,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             { "onyx-table-wrapper__container--no-scroll": t.withPageScrolling }
           ],
           tabindex: t.withPageScrolling ? void 0 : 0
-        }, h.scrollContainerAttrs), [
+        }, b.scrollContainerAttrs), [
           f("table", {
             ref: "tableRef",
             class: I(["onyx-table onyx-text", [
@@ -3751,14 +3751,14 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
                   /* KEYED_FRAGMENT */
                 ))
               ])) : k("v-if", !0),
-              C(h.$slots, "head")
+              C(b.$slots, "head")
             ])) : k("v-if", !0),
             f("tbody", null, [
-              C(h.$slots, "default", {}, () => [
+              C(b.$slots, "default", {}, () => [
                 f("tr", yi, [
                   f("td", fi, [
                     f("div", vi, [
-                      C(h.$slots, "empty", { defaultMessage: s.value }, () => [
+                      C(b.$slots, "empty", { defaultMessage: s.value }, () => [
                         B(Kn, null, {
                           default: S(() => [
                             W(
@@ -3780,10 +3780,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         ], 16, ii),
         e.bottomLeft || e.pagination ? (i(), v("div", hi, [
           f("div", null, [
-            C(h.$slots, "bottomLeft")
+            C(b.$slots, "bottomLeft")
           ]),
           f("div", null, [
-            C(h.$slots, "pagination")
+            C(b.$slots, "pagination")
           ])
         ])) : k("v-if", !0)
       ],
@@ -3929,7 +3929,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
        * Focuses the input.
        */
       focus: () => p.value?.focus()
-    }), (h, b) => (i(), v(
+    }), (b, h) => (i(), v(
       "div",
       E({
         class: ["onyx-component", "onyx-mini-search", l(c)]
@@ -3939,7 +3939,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       [
         xe(f("input", E({
           ref: "inputRef",
-          "onUpdate:modelValue": b[0] || (b[0] = (g) => Ee(s) ? s.value = g : null),
+          "onUpdate:modelValue": h[0] || (h[0] = (g) => Ee(s) ? s.value = g : null),
           autofocus: o.autofocus,
           class: "onyx-mini-search__input onyx-text",
           placeholder: y.value,
@@ -3955,9 +3955,9 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           class: "onyx-mini-search__clear",
           "aria-label": l(d)("select.clearSearch"),
           tabindex: "-1",
-          onMousedown: b[1] || (b[1] = Me(() => {
+          onMousedown: h[1] || (h[1] = Me(() => {
           }, ["prevent"])),
-          onClick: b[2] || (b[2] = (g) => a("clear"))
+          onClick: h[2] || (h[2] = (g) => a("clear"))
         }, [
           B(z, { icon: l(De) }, null, 8, ["icon"])
         ], 40, _i),
@@ -4119,7 +4119,7 @@ const Ci = (n, t) => {
     return ki(u.value, x);
   }), d = m(() => na(r)), p = () => Ci(c.value, ne(o)), y = () => fe(
     ...r.map(({ scrollContainerAttributes: x }) => x?.())
-  ), h = () => {
+  ), b = () => {
     const x = r.map((O) => O.header).filter((O) => !!O), w = x.map((O) => O.actions).filter((O) => !!O), M = x.map((O) => O.wrapper).filter((O) => !!O);
     return c.value.map((O, L, N) => {
       const K = w.flatMap((U) => U(O, L, N)), H = d.value.getFor("header", O.type.name), X = K.map(({ menuItems: U }) => U).filter((U) => !!U), ue = K.map(({ iconComponent: U }) => U), P = le(
@@ -4159,7 +4159,7 @@ const Ci = (n, t) => {
         component: () => le(ee)
       };
     });
-  }, b = (x) => {
+  }, h = (x) => {
     const w = r.map((O) => O.mutation).filter((O) => !!O).sort((O, L) => (L.order ?? 0) - (O.order ?? 0));
     let M = [...x];
     return w.forEach(({ func: O }) => {
@@ -4206,9 +4206,9 @@ const Ci = (n, t) => {
     /** Uses the column definition and available column group config to generate the column groups for the underlying OnyxTable */
     createRendererColumnGroups: p,
     /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
-    createRendererRows: b,
+    createRendererRows: h,
     /** Takes the column definition and creates a RenderHeader for each, adds actions from features */
-    createRendererColumns: h,
+    createRendererColumns: b,
     /** Uses all features and generates the content of the additional table slots (headline, pagination etc.) for the underlying OnyxTable */
     createSlots: g,
     // the combined `watch` for all features
@@ -4235,14 +4235,14 @@ const Ci = (n, t) => {
 }, Bi = Symbol("Filtering"), wo = 0, Oi = (n) => (t) => {
   const { i18n: e } = t, o = ie(n?.filterState ?? {}), a = m(() => ne(n?.columns)), { isEnabled: s, isAsync: r } = ut(t, n), u = (p) => r.value ? p : p.filter(
     (y) => Object.entries(o.value).every(
-      ([h, b]) => {
-        const g = a.value?.[h], $ = { ...n?.filterConfig, ...g?.config };
-        if (b == null || b === "") return !0;
-        let x = b.toString(), w = y[h]?.toString() ?? "";
+      ([b, h]) => {
+        const g = a.value?.[b], $ = { ...n?.filterConfig, ...g?.config };
+        if (h == null || h === "") return !0;
+        let x = h.toString(), w = y[b]?.toString() ?? "";
         return $?.filterFunc ? $.filterFunc(
           x,
           w,
-          h,
+          b,
           y
         ) : (w = At(w), x = At(x), $.caseSensitive || (w = w.toLowerCase(), x = x.toLowerCase()), $.searchFromStart ? w.startsWith(x) : $.exactMatch ? w === x : w.includes(x));
       }
@@ -4251,8 +4251,8 @@ const Ci = (n, t) => {
     o.value[p] = "";
   }, d = (p) => {
     let y = o.value[p] || "";
-    const h = (b) => {
-      b.key === "Enter" && (o.value[p] = y);
+    const b = (h) => {
+      h.key === "Enter" && (o.value[p] = y);
     };
     return le(Wn, {
       label: e.t.value("dataGrid.head.filtering.menu.label", { column: p.toString() }),
@@ -4261,16 +4261,16 @@ const Ci = (n, t) => {
       modelValue: y,
       // TODO: check after https://github.com/SchwarzIT/onyx/issues/2982 is closed -- `autofocus` doesn't have an effect currently
       autofocus: !0,
-      "onUpdate:modelValue": (b) => {
-        y = b || "";
+      "onUpdate:modelValue": (h) => {
+        y = h || "";
       },
       onClear: () => {
         o.value[p] = "", y = "";
       },
       onChange: () => o.value[p] = y,
-      onKeydown: h,
-      onClick: (b) => {
-        b.preventDefault(), b.stopPropagation();
+      onKeydown: b,
+      onClick: (h) => {
+        h.preventDefault(), h.stopPropagation();
       }
     });
   };
@@ -4425,26 +4425,26 @@ const Ci = (n, t) => {
       key: "modelValue"
     }), c = m(() => {
       if (e.withCounter && e.maxlength) {
-        const p = (u.value?.toString() ?? "").length, y = typeof e.maxlength == "object" ? e.maxlength.max : e.maxlength, h = p > y;
+        const p = (u.value?.toString() ?? "").length, y = typeof e.maxlength == "object" ? e.maxlength.max : e.maxlength, b = p > y;
         return {
           length: p,
           maxLength: y,
-          violated: h
+          violated: b
         };
       }
     }), d = m(() => {
-      const { errorMessages: p, successMessages: y, message: h } = e, b = {
+      const { errorMessages: p, successMessages: y, message: b } = e, h = {
         counter: c.value,
         errorMessages: p,
         successMessages: y,
-        message: h
+        message: b
       };
-      for (const g in b) {
+      for (const g in h) {
         const $ = g;
-        b[$] == null && delete b[$];
+        h[$] == null && delete h[$];
       }
-      if (Object.keys(b).length !== 0)
-        return b;
+      if (Object.keys(h).length !== 0)
+        return h;
     });
     return (p, y) => (i(), v(
       "div",
@@ -4561,7 +4561,7 @@ const Ci = (n, t) => {
   },
   emits: ["inputClick", "validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const { rootAttrs: o, restAttrs: a } = ge(), s = n, r = e, { t: u } = q(), { vCustomValidity: c, errorMessages: d } = Pe({ props: s, emit: r }), p = m(() => Be(s.success)), y = m(() => Be(s.message)), { disabled: h, showError: b } = be(s), g = oe(s), $ = _t(b), x = m(() => s.modelValue ? s.modelValue.length : 0), w = m(() => {
+    const { rootAttrs: o, restAttrs: a } = ge(), s = n, r = e, { t: u } = q(), { vCustomValidity: c, errorMessages: d } = Pe({ props: s, emit: r }), p = m(() => Be(s.success)), y = m(() => Be(s.message)), { disabled: b, showError: h } = be(s), g = oe(s), $ = _t(h), x = m(() => s.modelValue ? s.modelValue.length : 0), w = m(() => {
       const H = s.modelValue?.length;
       if (!s.modelValue || !H) return "";
       if (H === 1) return s.modelValue[0];
@@ -4618,7 +4618,7 @@ const Ci = (n, t) => {
           default: S(({ id: ue }) => [
             f("div", {
               class: "onyx-select-input__wrapper",
-              onClick: X[0] || (X[0] = (P) => !l(h) && !s.loading && r("inputClick"))
+              onClick: X[0] || (X[0] = (P) => !l(b) && !s.loading && r("inputClick"))
             }, [
               s.loading ? (i(), _(Le, {
                 key: 0,
@@ -4639,7 +4639,7 @@ const Ci = (n, t) => {
                 readonly: s.readonly,
                 placeholder: s.placeholder,
                 required: s.required,
-                disabled: l(h) || s.loading,
+                disabled: l(b) || s.loading,
                 "aria-label": s.hideLabel ? s.label : void 0,
                 title: s.hideLabel ? s.label : void 0,
                 value: w.value,
@@ -4682,7 +4682,7 @@ const Ci = (n, t) => {
                 "aria-label": l(u)("select.toggleDropDown"),
                 title: l(u)("select.toggleDropDown"),
                 tabindex: "-1",
-                disabled: l(h) || s.readonly || s.loading
+                disabled: l(b) || s.readonly || s.loading
               }, [
                 B(z, { icon: l(Na) }, null, 8, ["icon"])
               ], 8, zi),
@@ -4832,7 +4832,7 @@ const Ci = (n, t) => {
       emit: a,
       key: "open",
       default: !1
-    }), y = J("selectRef"), { openDirection: h, updateOpenDirection: b } = fo(y), g = V(), $ = m(() => yt(c.value)), x = m(() => o.valueLabel !== void 0 ? yt(o.valueLabel) : $.value.reduce((j, re) => {
+    }), y = J("selectRef"), { openDirection: b, updateOpenDirection: h } = fo(y), g = V(), $ = m(() => yt(c.value)), x = m(() => o.valueLabel !== void 0 ? yt(o.valueLabel) : $.value.reduce((j, re) => {
       const se = o.options.find(({ value: ye }) => ye === re)?.label;
       return se && j.push(se), j;
     }, [])), w = J("miniSearchRef"), M = J("selectInputRef"), O = m(() => o.noFilter || !d.value ? o.options : o.options.filter(
@@ -4860,7 +4860,7 @@ const Ci = (n, t) => {
         return;
       }
       const se = p.value;
-      p.value = !se, await Ve(), p.value && b(), se !== p.value && (se ? (d.value && (d.value = ""), j || M.value?.input?.focus()) : w.value?.focus());
+      p.value = !se, await Ve(), p.value && h(), se !== p.value && (se ? (d.value && (d.value = ""), j || M.value?.input?.focus()) : w.value?.focus());
     }, H = () => g.value = N.value.at(0), X = () => g.value = N.value.at(-1), ue = (j) => {
       const re = N.value.findIndex((se) => se === j);
       re < N.value.length - 1 && (g.value = N.value[re + 1]);
@@ -4964,7 +4964,7 @@ const Ci = (n, t) => {
         B(vo, {
           class: I(l(u)),
           label: o.listLabel,
-          position: l(h),
+          position: l(b),
           alignment: o.alignment === "full" ? "center" : o.alignment,
           "fit-parent": o.alignment === "full",
           open: l(p)
@@ -5165,11 +5165,11 @@ const Ci = (n, t) => {
         label: w.toString(),
         value: w
       };
-    })), h = m(() => {
+    })), b = m(() => {
       let $ = y.value;
       const x = c.value.trim().toLowerCase();
       return x && ($ = $.filter((w) => Sn(w.label, x))), $.slice(0, d.value);
-    }), b = m(() => e.modelValue <= 1), g = m(() => e.modelValue >= e.pages);
+    }), h = m(() => e.modelValue <= 1), g = m(() => e.modelValue >= e.pages);
     return ($, x) => l(u) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-pagination-skeleton", "onyx-text", l(r)])
@@ -5186,7 +5186,7 @@ const Ci = (n, t) => {
         class: "onyx-pagination__select",
         label: l(a)("pagination.select.label"),
         "list-label": l(a)("pagination.select.listLabel"),
-        options: h.value,
+        options: b.value,
         "model-value": e.modelValue,
         "value-label": e.modelValue.toString(),
         "hide-label": "",
@@ -5209,7 +5209,7 @@ const Ci = (n, t) => {
         class: "onyx-pagination__button",
         "aria-label": l(a)("pagination.previous"),
         type: "button",
-        disabled: e.disabled || b.value,
+        disabled: e.disabled || h.value,
         onClick: x[2] || (x[2] = (w) => o("update:modelValue", e.modelValue - 1))
       }, [
         B(z, { icon: l(sn) }, null, 8, ["icon"])
@@ -5253,30 +5253,30 @@ const Ci = (n, t) => {
       selectMode: "include",
       contingent: /* @__PURE__ */ new Set()
     }
-  ), a = V(0), s = ie(n?.hover ?? !1), { isEnabled: r } = ut(t, n), u = (b) => o.value.selectMode === "include" ? o.value.contingent.has(b) : !o.value.contingent.has(b), c = (b) => {
-    o.value.selectMode = b ? "exclude" : "include", o.value.contingent.clear();
-  }, d = (b, g) => {
-    o.value.selectMode === "include" && b === !0 || o.value.selectMode === "exclude" && b === !1 ? o.value.contingent.add(g) : o.value.contingent.delete(g);
+  ), a = V(0), s = ie(n?.hover ?? !1), { isEnabled: r } = ut(t, n), u = (h) => o.value.selectMode === "include" ? o.value.contingent.has(h) : !o.value.contingent.has(h), c = (h) => {
+    o.value.selectMode = h ? "exclude" : "include", o.value.contingent.clear();
+  }, d = (h, g) => {
+    o.value.selectMode === "include" && h === !0 || o.value.selectMode === "exclude" && h === !1 ? o.value.contingent.add(g) : o.value.contingent.delete(g);
   }, p = () => o.value.contingent.size !== 0 && o.value.contingent.size !== a.value, y = () => {
-    const { contingent: b, selectMode: g } = o.value;
-    return g === "exclude" ? b.size === 0 : b.size > 0 && b.size === a.value;
+    const { contingent: h, selectMode: g } = o.value;
+    return g === "exclude" ? h.size === 0 : h.size > 0 && h.size === a.value;
   };
   return {
     name: ec,
     watch: [o, s, r],
     modifyColumns: {
-      func: (b) => r.value() ? [
+      func: (h) => r.value() ? [
         {
           key: e,
           type: { name: e },
           label: "",
           width: "2.5rem"
         },
-        ...b
-      ] : [...b]
+        ...h
+      ] : [...h]
     },
     mutation: {
-      func: (b) => (a.value = b.length, b),
+      func: (h) => (a.value = h.length, h),
       order: ra
     },
     typeRenderer: {
@@ -5289,7 +5289,7 @@ const Ci = (n, t) => {
             hideLabel: !0,
             indeterminate: p(),
             disabled: a.value === 0,
-            "onUpdate:modelValue": (b) => c(b),
+            "onUpdate:modelValue": (h) => c(h),
             modelValue: y()
           })
         },
@@ -5299,8 +5299,8 @@ const Ci = (n, t) => {
               "onyx-data-grid-selection-cell": !0
             }
           },
-          component: ({ row: b }) => {
-            const g = u(b.id), $ = String(b.id), x = o.value.selectMode === "include" ? t.i18n.t.value("dataGrid.head.selection.select", { id: $ }) : t.i18n.t.value("dataGrid.head.selection.deselect", { id: $ });
+          component: ({ row: h }) => {
+            const g = u(h.id), $ = String(h.id), x = o.value.selectMode === "include" ? t.i18n.t.value("dataGrid.head.selection.select", { id: $ }) : t.i18n.t.value("dataGrid.head.selection.deselect", { id: $ });
             return le(mt, {
               class: {
                 "onyx-data-grid-selection-cell__checkbox": !0,
@@ -5309,7 +5309,7 @@ const Ci = (n, t) => {
               },
               value: `selection-${$}`,
               hideLabel: !0,
-              "onUpdate:modelValue": (w) => d(w, b.id),
+              "onUpdate:modelValue": (w) => d(w, h.id),
               label: x,
               modelValue: g
             });
@@ -5323,22 +5323,22 @@ const Ci = (n, t) => {
     n?.paginationState ?? { current: 1, pages: 1, pageSize: n?.pageSize ?? 25 }
   ), { isEnabled: o, isAsync: a } = ut(t, n), s = m(() => n.disabled?.value ?? !1), r = m(
     () => e.value.pages > 1 || e.value.current > e.value.pageSize
-  ), u = m(() => e.value.current >= e.value.pages), c = m(() => n.loading?.value ?? !1), d = n.type ?? "select", p = V(), { vScrollEnd: y, isScrollEnd: h } = aa({
+  ), u = m(() => e.value.current >= e.value.pages), c = m(() => n.loading?.value ?? !1), d = n.type ?? "select", p = V(), { vScrollEnd: y, isScrollEnd: b } = aa({
     enabled: m(() => d === "lazy" && !u.value && !ne(n.disabled)),
     loading: c
   });
-  return Y(h, (b) => {
-    b && e.value.current++;
+  return Y(b, (h) => {
+    h && e.value.current++;
   }), Y(p, () => {
     p.value && y.mounted(p.value);
   }), {
     name: oc,
-    watch: [e, o, a, s, t.skeleton, h, c],
+    watch: [e, o, a, s, t.skeleton, b, c],
     mutation: {
       order: ia,
-      func: (b) => {
-        if (!o.value()) return b;
-        let g = b.slice();
+      func: (h) => {
+        if (!o.value()) return h;
+        let g = h.slice();
         if (!a.value) {
           e.value.pages = Math.ceil(g.length / e.value.pageSize), e.value.current = So(e.value.current, 1, e.value.pages);
           let $ = (e.value.current - 1) * e.value.pageSize;
@@ -5386,21 +5386,21 @@ const Ci = (n, t) => {
     slots: {
       pagination: () => {
         if (!o.value() || d !== "select") return [];
-        const b = t.skeleton.value && !r.value;
-        return !r.value && !b ? [] : [
+        const h = t.skeleton.value && !r.value;
+        return !r.value && !h ? [] : [
           le(sa, {
             modelValue: e.value.current,
             pages: e.value.pages,
             disabled: s.value,
-            skeleton: b,
+            skeleton: h,
             "onUpdate:modelValue": (g) => e.value.current = g
           })
         ];
       }
     },
     scrollContainerAttributes: () => ({
-      ref: (b) => {
-        p.value = b;
+      ref: (h) => {
+        p.value = h;
       }
     })
   };
@@ -5471,7 +5471,7 @@ const Ci = (n, t) => {
     withPageScrolling: { type: Boolean }
   },
   setup(n) {
-    const t = n, e = q(), o = ce(), a = oe(t), s = Ue([]), r = Ue([]), u = Ue(), c = Ue(), d = Ue(), { columns: p, data: y, features: h, columnGroups: b, async: g } = ro(t);
+    const t = n, e = q(), o = ce(), a = oe(t), s = Ue([]), r = Ue([]), u = Ue(), c = Ue(), d = Ue(), { columns: p, data: y, features: b, columnGroups: h, async: g } = ro(t);
     let $;
     const x = ({
       createRendererColumns: w,
@@ -5481,21 +5481,21 @@ const Ci = (n, t) => {
       createScrollContainerAttributes: N,
       createSlots: K
     }) => Y(
-      [y, a, p, b, e.locale, e.t, ...O],
+      [y, a, p, h, e.locale, e.t, ...O],
       () => {
         s.value = w(), r.value = M(y.value), u.value = L(), c.value = N(), d.value = K();
       },
       { immediate: !0, deep: !0 }
     );
     return Y(
-      h,
+      b,
       () => {
         const w = Ei(
-          [ic({ headline: ie(t, "headline") }), ...h.value],
+          [ic({ headline: ie(t, "headline") }), ...b.value],
           {
             i18n: e,
             columnConfig: p,
-            columnGroups: b,
+            columnGroups: h,
             async: g,
             skeleton: a
           }
@@ -5639,13 +5639,13 @@ const Ci = (n, t) => {
       if (!r.value) return;
       s.value = r.value.getBoundingClientRect().width, c.value = !0, u = new AbortController();
       const g = { signal: u.signal, passive: !0 };
-      window.addEventListener("mousemove", y, g), window.addEventListener("mouseup", h, g), window.addEventListener("keydown", b, g), o("start");
+      window.addEventListener("mousemove", y, g), window.addEventListener("mouseup", b, g), window.addEventListener("keydown", h, g), o("start");
     };
     Oe(() => {
       Y(
         () => e.active,
         (g) => {
-          g != null && (g && !c.value ? d() : !g && c.value && h());
+          g != null && (g && !c.value ? d() : !g && c.value && b());
         },
         { immediate: !0 }
       );
@@ -5657,10 +5657,10 @@ const Ci = (n, t) => {
       const $ = r.value.getBoundingClientRect();
       let x;
       e.alignment === "right" ? x = g.clientX - $.left : x = $.right - g.clientX, o("updateWidth", Math.max(e.min, x));
-    }, h = () => {
+    }, b = () => {
       u?.abort(), s.value = void 0, c.value = !1, o("end");
-    }, b = (g) => {
-      g.key === "Escape" && (s.value && o("updateWidth", s.value), h());
+    }, h = (g) => {
+      g.key === "Escape" && (s.value && o("updateWidth", s.value), b());
     };
     return (g, $) => (i(), v(
       "button",
@@ -5701,31 +5701,31 @@ const Ci = (n, t) => {
     [a, r],
     () => {
       a.value.forEach((p, y) => {
-        const h = `--onyx-data-grid-column-${go(y)}`, b = p.closest(".onyx-table-wrapper__container"), g = r.value.get(y);
-        g ? b?.style.setProperty(h, g) : b?.style.removeProperty(h);
+        const b = `--onyx-data-grid-column-${go(y)}`, h = p.closest(".onyx-table-wrapper__container"), g = r.value.get(y);
+        g ? h?.style.setProperty(b, g) : h?.style.removeProperty(b);
       });
     },
     { flush: "post", deep: !0 }
   );
   const c = (p) => {
-    const y = p.map((h) => {
-      if (!s.value(h.key)) return h;
-      const b = {
+    const y = p.map((b) => {
+      if (!s.value(b.key)) return b;
+      const h = {
         class: "onyx-data-grid-resize-cell",
         ref: ($) => {
-          $ ? a.value.set(h.key, $) : a.value.delete(h.key);
+          $ ? a.value.set(b.key, $) : a.value.delete(b.key);
         }
-      }, g = r.value.get(h.key);
+      }, g = r.value.get(b.key);
       return {
-        ...h,
-        width: g || h.width,
-        thAttributes: fe(b, h.thAttributes)
+        ...b,
+        width: g || b.width,
+        thAttributes: fe(h, b.thAttributes)
       };
     });
     return y.push({ key: Ct, type: { name: Ct }, label: "" }), y;
-  }, d = (p, y, h) => {
-    const b = p.default?.();
-    return !s.value(y.key) || h ? b : [
+  }, d = (p, y, b) => {
+    const h = p.default?.();
+    return !s.value(y.key) || b ? h : [
       le(lo, {
         min: o,
         element: a.value.get(y.key),
@@ -5744,7 +5744,7 @@ const Ci = (n, t) => {
         },
         onAutoSize: () => r.value.set(y.key, "max-content")
       }),
-      b
+      h
     ];
   };
   return {
@@ -5773,8 +5773,8 @@ const Ci = (n, t) => {
       }
     },
     header: {
-      wrapper: (p, y, { length: h }) => (b, { slots: g }) => {
-        const $ = y === h - 1, x = p.type.name === Ct;
+      wrapper: (p, y, { length: b }) => (h, { slots: g }) => {
+        const $ = y === b - 1, x = p.type.name === Ct;
         return d(g, p, $ || x);
       }
     }
@@ -5845,25 +5845,25 @@ const Ci = (n, t) => {
   let r = [];
   const u = m(
     () => ne(n?.collator) ?? new Intl.Collator(o.locale.value, { numeric: !0 })
-  ), c = (b) => {
-    const $ = ne(n?.columns)?.[b]?.sortFunc;
+  ), c = (h) => {
+    const $ = ne(n?.columns)?.[h]?.sortFunc;
     if ($)
       return $;
-    const x = r.find(({ key: w }) => b === w)?.type.name ?? "";
+    const x = r.find(({ key: w }) => h === w)?.type.name ?? "";
     return Yo[x] ? Yo[x] : $o;
-  }, d = (b) => {
+  }, d = (h) => {
     const { column: g, direction: $ } = e.value;
     if (s.value || !g || $ === "none")
-      return b;
+      return h;
     const x = $ === "asc" ? 1 : -1, w = c(g);
-    return b.sort((M, O) => w(M[g], O[g], u.value) * x), b;
-  }, p = (b, g = !1) => {
-    const $ = e.value.column === b ? so(e.value.direction, g) : so(void 0, g), x = $ !== "none" ? b : void 0;
+    return h.sort((M, O) => w(M[g], O[g], u.value) * x), h;
+  }, p = (h, g = !1) => {
+    const $ = e.value.column === h ? so(e.value.direction, g) : so(void 0, g), x = $ !== "none" ? h : void 0;
     e.value = {
       direction: $,
       column: x
     };
-  }, y = m(() => (b, g) => e.value.column === b && e.value.direction === g), h = (b, g) => {
+  }, y = m(() => (h, g) => e.value.column === h && e.value.direction === g), b = (h, g) => {
     const $ = {
       none: Pa,
       asc: rn,
@@ -5872,8 +5872,8 @@ const Ci = (n, t) => {
     return le(
       Ne,
       {
-        active: y.value(b, g),
-        onClick: () => e.value = { column: b, direction: g }
+        active: y.value(h, g),
+        onClick: () => e.value = { column: h, direction: g }
       },
       () => [
         le(z, { icon: $[g] }),
@@ -5890,30 +5890,30 @@ const Ci = (n, t) => {
     modifyColumns: [
       {
         // save final column config
-        func: (b) => r = b,
+        func: (h) => r = h,
         order: -1 / 0
       }
     ],
     header: {
-      actions: ({ key: b, label: g }) => a.value(b) ? [
+      actions: ({ key: h, label: g }) => a.value(h) ? [
         {
           iconComponent: le(Jo, {
             columnLabel: g,
-            sortDirection: e.value.column === b ? e.value.direction : void 0,
-            onClick: () => p(b)
+            sortDirection: e.value.column === h ? e.value.direction : void 0,
+            onClick: () => p(h)
           }),
           menuItems: [
-            h(b, "none"),
-            h(b, "asc"),
-            h(b, "desc")
+            b(h, "none"),
+            b(h, "asc"),
+            b(h, "desc")
           ]
         },
-        e.value.column === b && e.value.direction && e.value.direction !== "none" ? {
+        e.value.column === h && e.value.direction && e.value.direction !== "none" ? {
           iconComponent: {
             iconComponent: le(Jo, {
               columnLabel: g,
-              sortDirection: e.value.column === b ? e.value.direction : void 0,
-              onClick: () => p(b, !0)
+              sortDirection: e.value.column === h ? e.value.direction : void 0,
+              onClick: () => p(h, !0)
             }),
             alwaysShowInHeader: !0
           }
@@ -5927,8 +5927,8 @@ const Ci = (n, t) => {
     if (!("ResizeObserver" in window)) return;
     const p = new ResizeObserver(() => {
       Object.entries(a.value).forEach(
-        ([y, h]) => o.value[y] = h.getBoundingClientRect().width
-      ), t.value.forEach((y, h) => c(y, h));
+        ([y, b]) => o.value[y] = b.getBoundingClientRect().width
+      ), t.value.forEach((y, b) => c(y, b));
     });
     Y(
       a,
@@ -5940,27 +5940,27 @@ const Ci = (n, t) => {
   });
   const c = (p, y) => {
     if (!n) return;
-    const h = t.value.map((b) => o.value[b]).reduce((b, g, $) => $ < y ? b + g : b, 0);
-    document.body.style.setProperty(u(p), `${h}px`);
+    const b = t.value.map((h) => o.value[h]).reduce((h, g, $) => $ < y ? h + g : h, 0);
+    document.body.style.setProperty(u(p), `${b}px`);
   }, d = (p) => {
-    const y = p.scrollWidth - p.clientWidth, h = Math.round(p.scrollLeft);
-    r.value = e.value === "left" && h > 0 || e.value === "right" && h < y;
+    const y = p.scrollWidth - p.clientWidth, b = Math.round(p.scrollLeft);
+    r.value = e.value === "left" && b > 0 || e.value === "right" && b < y;
   };
   return {
     name: hc,
     watch: [e, t, r],
     modifyColumns: {
       func: (p) => {
-        const y = p.filter((b) => t.value.includes(b.key)).map((b) => {
+        const y = p.filter((h) => t.value.includes(h.key)).map((h) => {
           const g = e.value === "left" ? {
             right: "auto",
-            left: `var(${u(b.key)})`
+            left: `var(${u(h.key)})`
           } : {
             left: "auto",
-            right: `var(${u(b.key)})`
+            right: `var(${u(h.key)})`
           };
           return {
-            ...b,
+            ...h,
             thAttributes: fe(
               {
                 style: g,
@@ -5970,10 +5970,10 @@ const Ci = (n, t) => {
                   isScrolled: r.value
                 },
                 ref: ($) => {
-                  $ ? a.value[b.key] = $ : delete a.value[b.key];
+                  $ ? a.value[h.key] = $ : delete a.value[h.key];
                 }
               },
-              b.thAttributes
+              h.thAttributes
             ),
             tdAttributes: {
               style: g,
@@ -5984,8 +5984,8 @@ const Ci = (n, t) => {
               }
             }
           };
-        }), h = p.filter((b) => !t.value.includes(b.key));
-        return e.value === "left" ? [...y, ...h] : [...h, ...y.slice().reverse()];
+        }), b = p.filter((h) => !t.value.includes(h.key));
+        return e.value === "left" ? [...y, ...b] : [...b, ...y.slice().reverse()];
       }
     },
     scrollContainerAttributes: () => ({
@@ -6048,7 +6048,7 @@ const Ci = (n, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(n, { emit: t }) {
-    const e = n, o = t, { rootAttrs: a, restAttrs: s } = ge(), { vCustomValidity: r, errorMessages: u } = Pe({ props: e, emit: o }), c = m(() => Be(e.success)), d = m(() => Be(e.message)), { densityClass: p } = F(e), { disabled: y, showError: h } = be(e), b = oe(e), g = _t(h), $ = m(() => (O) => {
+    const e = n, o = t, { rootAttrs: a, restAttrs: s } = ge(), { vCustomValidity: r, errorMessages: u } = Pe({ props: e, emit: o }), c = m(() => Be(e.success)), d = m(() => Be(e.message)), { densityClass: p } = F(e), { disabled: y, showError: b } = be(e), h = oe(e), g = _t(b), $ = m(() => (O) => {
       const L = O != null && O != null ? new Date(O) : void 0;
       if (!no(L)) return;
       const N = L.toISOString().split("T")[0];
@@ -6066,7 +6066,7 @@ const Ci = (n, t) => {
         x.value = no(L) ? L.toISOString() : "";
       }
     }), M = J("inputRef");
-    return Ae(M, e), (O, L) => l(b) ? (i(), v(
+    return Ae(M, e), (O, L) => l(h) ? (i(), v(
       "div",
       E({
         key: 0,
@@ -6443,7 +6443,7 @@ const Ci = (n, t) => {
       props: o,
       emit: a,
       default: ""
-    }), { rootAttrs: u, restAttrs: c } = ge(), { t: d } = q(), { maxLength: p, maxLengthError: y } = ca({ modelValue: r, props: o }), h = m(() => o.error ?? y.value), { vCustomValidity: b, errorMessages: g } = Pe({ props: o, emit: a, error: h }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { densityClass: w } = F(o), M = m(() => o.pattern instanceof RegExp ? o.pattern.source : o.pattern), O = J("inputRef");
+    }), { rootAttrs: u, restAttrs: c } = ge(), { t: d } = q(), { maxLength: p, maxLengthError: y } = ca({ modelValue: r, props: o }), b = m(() => o.error ?? y.value), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a, error: b }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { densityClass: w } = F(o), M = m(() => o.pattern instanceof RegExp ? o.pattern.source : o.pattern), O = J("inputRef");
     t({ input: O });
     const { disabled: L, showError: N } = be(o), K = oe(o), H = _t(N);
     Ae(O, o);
@@ -6509,7 +6509,7 @@ const Ci = (n, t) => {
                 title: o.hideLabel ? o.label : void 0
               }, l(c)), null, 16, Mc), [
                 [tn, l(r)],
-                [l(b)]
+                [l(h)]
               ]),
               !o.hideClearIcon && l(r) !== "" ? (i(), v("button", {
                 key: 2,
@@ -6777,7 +6777,7 @@ const Ci = (n, t) => {
       open: e.open,
       class: "onyx-select-dialog",
       label: e.label,
-      "onUpdate:open": y[1] || (y[1] = (h) => o("update:open", h))
+      "onUpdate:open": y[1] || (y[1] = (b) => o("update:open", b))
     }), _e({
       footer: S(() => [
         B(Lr, null, {
@@ -6786,7 +6786,7 @@ const Ci = (n, t) => {
               label: l(r)("cancel"),
               mode: "plain",
               color: "neutral",
-              onClick: y[0] || (y[0] = (h) => o("update:open", !1))
+              onClick: y[0] || (y[0] = (b) => o("update:open", !1))
             }, null, 8, ["label"]),
             B(lt, {
               label: l(r)("apply"),
@@ -6814,17 +6814,17 @@ const Ci = (n, t) => {
               (i(!0), v(
                 G,
                 null,
-                de(e.options, (h) => (i(), v("label", {
-                  key: h.value
+                de(e.options, (b) => (i(), v("label", {
+                  key: b.value
                 }, [
                   B(
                     Un,
                     { class: "onyx-select-dialog__option" },
                     {
                       default: S(() => [
-                        h.icon ? (i(), _(z, {
+                        b.icon ? (i(), _(z, {
                           key: 0,
-                          icon: h.icon,
+                          icon: b.icon,
                           class: "onyx-select-dialog__icon"
                         }, null, 8, ["icon"])) : k("v-if", !0),
                         f("div", null, [
@@ -6836,10 +6836,10 @@ const Ci = (n, t) => {
                                 f("input", {
                                   type: "radio",
                                   name: "color-scheme",
-                                  autofocus: e.modelValue === h.value,
-                                  value: h.value,
-                                  checked: e.modelValue === h.value,
-                                  "aria-label": h.label,
+                                  autofocus: e.modelValue === b.value,
+                                  value: b.value,
+                                  checked: e.modelValue === b.value,
+                                  "aria-label": b.label,
                                   required: ""
                                 }, null, 8, Yc)
                               ]),
@@ -6852,14 +6852,14 @@ const Ci = (n, t) => {
                           f(
                             "span",
                             Jc,
-                            T(h.label),
+                            T(b.label),
                             1
                             /* TEXT */
                           ),
-                          h.description ? (i(), v(
+                          b.description ? (i(), v(
                             "p",
                             Zc,
-                            T(h.description),
+                            T(b.description),
                             1
                             /* TEXT */
                           )) : k("v-if", !0)
@@ -7092,17 +7092,17 @@ const Ci = (n, t) => {
       emit: o,
       key: "open",
       default: !1
-    }), { restAttrs: u, rootAttrs: c } = ge(), d = m(() => !!a.children), { isActive: p } = rt(), y = m(() => e.active !== "auto" ? e.active : p.value(e.link)), h = ve(
+    }), { restAttrs: u, rootAttrs: c } = ge(), d = m(() => !!a.children), { isActive: p } = rt(), y = m(() => e.active !== "auto" ? e.active : p.value(e.link)), b = ve(
       Ft,
       m(() => !1)
-    ), b = ve(da, void 0), g = ve(Zo, !0);
+    ), h = ve(da, void 0), g = ve(Zo, !0);
     Re(Zo, !1);
     const { componentRef: $, isVisible: x } = g ? Nn(ua) : { isVisible: ie(!0) };
     return (w, M) => (i(), v(
       G,
       null,
       [
-        l(h) && l(r) ? (i(), v(
+        l(b) && l(r) ? (i(), v(
           "div",
           E({
             key: 0,
@@ -7147,7 +7147,7 @@ const Ci = (n, t) => {
           ],
           16
           /* FULL_PROPS */
-        )) : l(h) ? (i(), _(We, E({ key: 1 }, l(fe)(e, w.$attrs), {
+        )) : l(b) ? (i(), _(We, E({ key: 1 }, l(fe)(e, w.$attrs), {
           active: y.value,
           context: "mobile",
           onClick: M[1] || (M[1] = (O) => d.value && (r.value = !0))
@@ -7224,9 +7224,10 @@ const Ci = (n, t) => {
             key: "0"
           } : void 0
         ]), 1040, ["active"])) : k("v-if", !0),
-        l(g) && !l(h) && l(b) ? (i(), _(st, {
+        l(g) && !l(b) && l(h) ? (i(), _(st, {
           key: 5,
-          to: l(b)
+          disabled: !l(h),
+          to: l(h)
         }, [
           l(x) ? k("v-if", !0) : (i(), _(We, E({ key: 0 }, l(fe)(e, w.$attrs), {
             active: y.value,
@@ -7246,7 +7247,7 @@ const Ci = (n, t) => {
               key: "0"
             } : void 0
           ]), 1040, ["active"]))
-        ], 8, ["to"])) : k("v-if", !0)
+        ], 8, ["disabled", "to"])) : k("v-if", !0)
       ],
       64
       /* STABLE_FRAGMENT */
@@ -7519,10 +7520,10 @@ const Ci = (n, t) => {
   setup(n, { expose: t, emit: e }) {
     const o = n, a = e, s = ce(), r = J("navBarRef"), { width: u } = He(r), { t: c } = q(), { currentRoute: d } = rt(), {
       elements: { nav: p }
-    } = _s({ navigationName: ie(() => o.appName) }), y = V(!1), h = V(!1), b = (x, w) => w !== 0 && w < x, g = m(() => typeof o.mobile == "number" ? b(o.mobile, u.value) : typeof o.mobile == "string" ? b(Ot[o.mobile], u.value) : o.mobile);
+    } = _s({ navigationName: ie(() => o.appName) }), y = V(!1), b = V(!1), h = (x, w) => w !== 0 && w < x, g = m(() => typeof o.mobile == "number" ? h(o.mobile, u.value) : typeof o.mobile == "string" ? h(Ot[o.mobile], u.value) : o.mobile);
     Re(Ft, g), Re(da, J("moreListRef"));
     const $ = () => {
-      y.value = !1, h.value = !1;
+      y.value = !1, b.value = !1;
     };
     return Y(d, () => $(), { deep: !0 }), t({
       /**
@@ -7548,7 +7549,7 @@ const Ci = (n, t) => {
       },
       [
         f("div", wu, [
-          g.value && s.mobileActivePage && !y.value && !h.value ? (i(), v("span", Su, [
+          g.value && s.mobileActivePage && !y.value && !b.value ? (i(), v("span", Su, [
             C(x.$slots, "mobileActivePage")
           ])) : o.appName || o.logoUrl || s.appArea ? (i(), _(jc, E({
             key: 1,
@@ -7579,7 +7580,7 @@ const Ci = (n, t) => {
                 open: y.value,
                 "onUpdate:open": [
                   w[1] || (w[1] = (M) => y.value = M),
-                  w[2] || (w[2] = (M) => h.value = !1)
+                  w[2] || (w[2] = (M) => b.value = !1)
                 ],
                 class: "onyx-nav-bar__burger",
                 icon: l(ja),
@@ -7668,9 +7669,9 @@ const Ci = (n, t) => {
                 ])) : k("v-if", !0),
                 s.contextArea ? (i(), _(Xo, {
                   key: 1,
-                  open: h.value,
+                  open: b.value,
                   "onUpdate:open": [
-                    w[3] || (w[3] = (M) => h.value = M),
+                    w[3] || (w[3] = (M) => b.value = M),
                     w[4] || (w[4] = (M) => y.value = !1)
                   ],
                   icon: l(un),
@@ -8019,10 +8020,10 @@ const Ci = (n, t) => {
       const p = d + 1;
       let y = "default";
       p === e.modelValue ? y = "active" : p < e.modelValue ? y = "completed" : p <= r.value - 1 && (y = "visited");
-      const h = y === "default" && p !== r.value;
+      const b = y === "default" && p !== r.value;
       return {
         value: p,
-        disabled: h,
+        disabled: b,
         status: y,
         skeleton: s.value,
         // allow user to override step properties so he has full control, therefore we add "...step" at the very end
@@ -8098,8 +8099,8 @@ const Ci = (n, t) => {
   },
   emits: ["validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { vCustomValidity: u, errorMessages: c } = Pe({ props: o, emit: a }), { densityClass: d } = F(o), { disabled: p } = be(o), y = oe(o), h = J("inputRef");
-    return t({ input: h }), Ae(h, o), (b, g) => l(y) ? (i(), v(
+    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { vCustomValidity: u, errorMessages: c } = Pe({ props: o, emit: a }), { densityClass: d } = F(o), { disabled: p } = be(o), y = oe(o), b = J("inputRef");
+    return t({ input: b }), Ae(b, o), (h, g) => l(y) ? (i(), v(
       "div",
       E({
         key: 0,
@@ -8186,11 +8187,11 @@ const Ci = (n, t) => {
       props: o,
       emit: p,
       key: "modelValue"
-    }), h = (g, $) => {
+    }), b = (g, $) => {
       g && (y.value = $);
-    }, b = J("radiobuttonsRef");
+    }, h = J("radiobuttonsRef");
     return t({
-      inputs: m(() => yt(b.value).flatMap(($) => $?.input).filter(($) => !!$))
+      inputs: m(() => yt(h.value).flatMap(($) => $?.input).filter(($) => !!$))
     }), (g, $) => (i(), v("fieldset", {
       class: I(["onyx-component", "onyx-radio-group", l(a), l(c)]),
       disabled: l(s),
@@ -8251,7 +8252,7 @@ const Ci = (n, t) => {
               required: o.required,
               truncation: x.truncation ?? o.truncation,
               onValidityChange: (M) => w === 0 && p("validityChange", M),
-              onChange: (M) => h(M, x.value)
+              onChange: (M) => b(M, x.value)
             }), null, 16, ["name", "error", "checked", "required", "truncation", "onValidityChange", "onChange"]))),
             128
             /* KEYED_FRAGMENT */
@@ -8439,10 +8440,10 @@ const Ci = (n, t) => {
         onAutoSize: () => d.value = void 0,
         alignment: e.alignment === "left" ? "right" : "left"
       })
-    ), { width: h } = He(), b = m(() => {
-      if (!e.collapseSidebar || h.value === 0) return !1;
+    ), { width: b } = He(), h = m(() => {
+      if (!e.collapseSidebar || b.value === 0) return !1;
       const w = typeof e.collapseSidebar == "number" ? e.collapseSidebar : Ot[e.collapseSidebar];
-      return h.value <= w;
+      return b.value <= w;
     }), g = V(!1), $ = m({
       get: () => typeof e.temporary?.open == "boolean" ? e.temporary.open : g.value,
       set: (w) => {
@@ -8450,9 +8451,9 @@ const Ci = (n, t) => {
       }
     }), x = pe();
     return Y(
-      [b, () => e.temporary],
+      [h, () => e.temporary],
       () => {
-        if (!b.value || e.temporary) {
+        if (!h.value || e.temporary) {
           r.remove(x);
           return;
         }
@@ -8476,7 +8477,7 @@ const Ci = (n, t) => {
       { immediate: !0 }
     ), Lt(() => {
       r.remove(x);
-    }), (w, M) => !e.temporary && !b.value ? (i(), v("aside", {
+    }), (w, M) => !e.temporary && !h.value ? (i(), v("aside", {
       key: 0,
       ref: "sidebarRef",
       class: I([
@@ -8591,7 +8592,7 @@ const Ci = (n, t) => {
   },
   emits: ["validityChange", "update:modelValue"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { t: s, locale: r } = q(), u = J("inputRef"), { disabled: c, showError: d } = be(o), p = oe(o), y = _t(d), { densityClass: h } = F(o), { vCustomValidity: b, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { rootAttrs: w, restAttrs: M } = ge(), O = V(!1), L = ae({
+    const o = n, a = e, { t: s, locale: r } = q(), u = J("inputRef"), { disabled: c, showError: d } = be(o), p = oe(o), y = _t(d), { densityClass: b } = F(o), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { rootAttrs: w, restAttrs: M } = ge(), O = V(!1), L = ae({
       props: o,
       emit: a,
       key: "modelValue"
@@ -8617,7 +8618,7 @@ const Ci = (n, t) => {
       "div",
       E({
         key: 0,
-        class: ["onyx-component", "onyx-stepper-skeleton", l(h)]
+        class: ["onyx-component", "onyx-stepper-skeleton", l(b)]
       }, l(w)),
       [
         o.hideLabel ? k("v-if", !0) : (i(), _(Z, {
@@ -8632,7 +8633,7 @@ const Ci = (n, t) => {
       "div",
       E({
         key: 1,
-        class: ["onyx-component", "onyx-stepper", l(h), l(y)]
+        class: ["onyx-component", "onyx-stepper", l(b), l(y)]
       }, l(w)),
       [
         B(xt, E(o, {
@@ -8684,7 +8685,7 @@ const Ci = (n, t) => {
                 ]
               }), null, 16, vd)), [
                 [co, N.value],
-                [l(b)]
+                [l(h)]
               ]),
               f(
                 "p",
@@ -8734,7 +8735,7 @@ const Ci = (n, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { densityClass: u } = F(o), { disabled: c, showError: d, requiredMarker: p } = be(o), { requiredMarkerClass: y, requiredTypeClass: h } = zt(o, p), { vCustomValidity: b, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(
+    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { densityClass: u } = F(o), { disabled: c, showError: d, requiredMarker: p } = be(o), { requiredMarkerClass: y, requiredTypeClass: b } = zt(o, p), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(
       () => d.value !== !1 ? g.value : void 0
     ), x = m(() => o.hideLabel && o.label || void 0), w = oe(o), M = ae({
       props: o,
@@ -8766,7 +8767,7 @@ const Ci = (n, t) => {
     }, l(s)), {
       default: S(() => [
         f("label", {
-          class: I(["onyx-component onyx-switch", [l(h), l(u)]]),
+          class: I(["onyx-component onyx-switch", [l(b), l(u)]]),
           title: x.value
         }, [
           xe(f("input", E({
@@ -8781,7 +8782,7 @@ const Ci = (n, t) => {
             autofocus: o.autofocus
           }, l(r)), null, 16, kd), [
             [en, l(M)],
-            [l(b)]
+            [l(h)]
           ]),
           f("span", wd, [
             f("span", Sd, [
@@ -9095,7 +9096,7 @@ const Ci = (n, t) => {
       if (e.link)
         return Ze(e.link);
     });
-    return (y, h) => l(u) ? (i(), _(Z, {
+    return (y, b) => l(u) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-file-card-skeleton", l(s)])
     }, null, 8, ["class"])) : (i(), _(Un, {
@@ -9360,7 +9361,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       props: e,
       emit: o,
       key: "modelValue"
-    }), h = J("inputRef"), b = m(() => yt(y.value ?? []).filter((D) => D != null)), g = V(!1), $ = m(() => b.value.map((P, D) => {
+    }), b = J("inputRef"), h = m(() => yt(y.value ?? []).filter((D) => D != null)), g = V(!1), $ = m(() => h.value.map((P, D) => {
       if (e.accept && !Gd(P, e.accept))
         return {
           text: r.value("fileUpload.status.fileTypeError", {
@@ -9375,7 +9376,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
           }),
           color: "danger"
         };
-      const ee = b.value.slice(0, D + 1).reduce((U, R) => U + R.size, 0);
+      const ee = h.value.slice(0, D + 1).reduce((U, R) => U + R.size, 0);
       if (e.maxTotalSize && ee > ao(e.maxTotalSize))
         return {
           text: r.value("fileUpload.status.maxFileSizeError", {
@@ -9388,7 +9389,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
           text: r.value("fileUpload.status.maxCountError", { count: e.maxCount }),
           color: "danger"
         };
-    })), x = m(() => b.value.map((P, D) => ({
+    })), x = m(() => h.value.map((P, D) => ({
       file: P,
       props: {
         filename: P.name,
@@ -9399,10 +9400,10 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       }
     }))), w = (P) => {
       let D;
-      e.multiple ? e.replace ? D = P.slice() : D = b.value.concat(P) : D = P[0], y.value = D;
+      e.multiple ? e.replace ? D = P.slice() : D = h.value.concat(P) : D = P[0], y.value = D;
     }, M = (P) => {
       if (e.multiple) {
-        const D = b.value.filter((ee) => ee !== P);
+        const D = h.value.filter((ee) => ee !== P);
         y.value = D;
       } else
         y.value = void 0;
@@ -9422,7 +9423,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       } catch {
         return;
       }
-    }, ue = m(() => e.listType === "hidden" || !b.value.length ? !1 : e.listType === "button" ? !g.value : !0);
+    }, ue = m(() => e.listType === "hidden" || !h.value.length ? !1 : e.listType === "button" ? !g.value : !0);
     return (P, D) => l(a) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-file-upload-skeleton", `onyx-file-upload-skeleton--${e.size}`, l(u)])
@@ -9446,7 +9447,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
           onDragover: D[1] || (D[1] = Me(() => {
           }, ["prevent"])),
           onDrop: Me(K, ["prevent"]),
-          onClick: D[2] || (D[2] = (ee) => h.value?.click())
+          onClick: D[2] || (D[2] = (ee) => b.value?.click())
         }, [
           e.size === "large" ? (i(), _(l(Wd), {
             key: 0,
@@ -9548,7 +9549,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
           disabled: l(s),
           name: e.name
         }, l(c), { onChange: O }), null, 16, op),
-        e.listType === "button" && b.value.length ? (i(), _(we, {
+        e.listType === "button" && h.value.length ? (i(), _(we, {
           key: 0,
           class: "onyx-file-upload__list-button",
           label: g.value ? l(r)("fileUpload.revealFilesButton") : l(r)("fileUpload.hideFilesButton"),
@@ -9666,7 +9667,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: ""
-    }), { rootAttrs: r, restAttrs: u } = ge(), { maxLength: c, maxLengthError: d } = ca({ props: o, modelValue: s }), p = m(() => o.error ?? d.value), { vCustomValidity: y, errorMessages: h } = Pe({ props: o, emit: a, error: p }), { densityClass: b } = F(o), g = m(() => Be(o.success)), $ = m(() => Be(o.message)), x = m(() => {
+    }), { rootAttrs: r, restAttrs: u } = ge(), { maxLength: c, maxLengthError: d } = ca({ props: o, modelValue: s }), p = m(() => o.error ?? d.value), { vCustomValidity: y, errorMessages: b } = Pe({ props: o, emit: a, error: p }), { densityClass: h } = F(o), g = m(() => Be(o.success)), $ = m(() => Be(o.message)), x = m(() => {
       if (!o.autosize) return;
       const H = o.autosize.min ? Math.max(o.autosize.min, 2) : void 0, X = o.autosize.max;
       return [H ? `--min-autosize-rows: ${H}` : "", `--max-autosize-rows: ${X ?? "unset"}`];
@@ -9678,7 +9679,7 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       "div",
       E({
         key: 0,
-        class: ["onyx-component", "onyx-textarea-skeleton", l(b)],
+        class: ["onyx-component", "onyx-textarea-skeleton", l(h)],
         style: x.value
       }, l(r)),
       [
@@ -9694,14 +9695,14 @@ const nm = /* @__PURE__ */ Vt(qd, [["render", jd]]), Wd = /* @__PURE__ */ A({
       "div",
       E({
         key: 1,
-        class: ["onyx-component", "onyx-textarea", l(N), l(b)],
+        class: ["onyx-component", "onyx-textarea", l(N), l(h)],
         style: x.value
       }, l(r)),
       [
         B(xt, E(o, {
           message: $.value,
           "success-messages": g.value,
-          "error-messages": l(h)
+          "error-messages": l(b)
         }), {
           default: S(({ id: ue }) => [
             f("div", {