sit-onyx 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/index.js

@@ -1,41 +1,41 @@
-import { defineComponent as k, useSlots as R, openBlock as n, createElementBlock as p, normalizeClass as g, renderSlot as b, createCommentVNode as _, createElementVNode as v, computed as h, ref as O, watch as K, createTextVNode as F, toDisplayString as M, unref as r, Fragment as z, createBlock as x, inject as se, watchEffect as X, createVNode as V, withDirectives as G, vModelCheckbox as Je, withCtx as $, mergeProps as B, renderList as W, withModifiers as Le, resolveDynamicComponent as re, onBeforeMount as Ae, onBeforeUnmount as pe, normalizeProps as te, guardReactiveProps as ae, vModelDynamic as $t, useAttrs as Mt, vModelText as Qe, Teleport as Vt, vShow as et, mergeModels as St, useModel as Bt, createSlots as me, provide as Ot, toRef as qe, nextTick as Et, normalizeStyle as Be } from "vue";
-const Tt = {
+import { defineComponent as w, useSlots as G, openBlock as s, createElementBlock as p, normalizeClass as g, renderSlot as b, createCommentVNode as _, createElementVNode as f, computed as h, ref as T, watch as Y, createTextVNode as Z, toDisplayString as V, unref as r, Fragment as R, createBlock as x, inject as ue, watchEffect as Q, createVNode as M, withDirectives as K, vModelCheckbox as ot, resolveDynamicComponent as ce, withCtx as $, mergeProps as O, renderList as J, withModifiers as De, shallowRef as It, reactive as At, onBeforeMount as Ne, onBeforeUnmount as ye, normalizeProps as ee, guardReactiveProps as te, vModelDynamic as Ht, useAttrs as Pt, vModelText as ze, Teleport as Dt, mergeModels as he, useModel as ve, vShow as nt, createSlots as fe, toRef as Te, provide as Nt, nextTick as zt, normalizeStyle as Ee } from "vue";
+const Rt = {
   key: 0,
   class: "onyx-app__nav"
-}, It = { class: "onyx-app__page" }, Lt = {
+}, Ut = { class: "onyx-app__page" }, Ft = {
   key: 1,
   class: "onyx-app__page-overlay"
-}, At = {
+}, qt = {
   key: 2,
   class: "onyx-app__app-overlay"
-}, xn = /* @__PURE__ */ k({
+}, Dn = /* @__PURE__ */ w({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { default: "top" }
   },
   setup(t) {
-    const a = t, e = R();
-    return (l, s) => (n(), p("div", {
+    const a = t, e = G();
+    return (l, n) => (s(), p("div", {
       class: g(["onyx-app", { "onyx-app--horizontal": a.navBarAlignment === "left" }])
     }, [
-      e.navBar ? (n(), p("div", Tt, [
+      e.navBar ? (s(), p("div", Rt, [
         b(l.$slots, "navBar")
       ])) : _("", !0),
-      v("div", It, [
+      f("div", Ut, [
         b(l.$slots, "default")
       ]),
-      e.pageOverlay ? (n(), p("div", Lt, [
+      e.pageOverlay ? (s(), p("div", Ft, [
         b(l.$slots, "pageOverlay")
       ])) : _("", !0),
-      e.appOverlay ? (n(), p("div", At, [
+      e.appOverlay ? (s(), p("div", qt, [
         b(l.$slots, "appOverlay")
       ])) : _("", !0)
     ], 2));
   }
-}), Ht = ["title"], Pt = ["src", "alt"], Dt = {
+}), Zt = ["title"], Gt = ["src", "alt"], Kt = {
   key: 1,
   class: "onyx-avatar__initials"
-}, Ze = /* @__PURE__ */ k({
+}, Ye = /* @__PURE__ */ w({
   __name: "OnyxAvatar",
   props: {
     size: { default: "48px" },
@@ -43,40 +43,40 @@ const Tt = {
     src: {}
   },
   setup(t) {
-    const a = t, e = R(), l = h(() => {
+    const a = t, e = G(), l = h(() => {
       const o = a.label.split(" ");
       return (o.length > 1 ? `${o[0].charAt(0)}${o[1].charAt(0)}` : o[0].substring(0, 2)).toUpperCase();
-    }), s = O(!1);
-    return K(
+    }), n = T(!1);
+    return Y(
       () => a.src,
-      () => s.value = !1
-    ), (o, i) => (n(), p("figure", {
+      () => n.value = !1
+    ), (o, u) => (s(), p("figure", {
       class: g(["onyx-avatar", [`onyx-avatar--${a.size}`, e.default ? "onyx-avatar--custom" : ""]]),
       title: a.label
     }, [
-      a.src && !s.value ? (n(), p("img", {
+      a.src && !n.value ? (s(), p("img", {
         key: 0,
         class: "onyx-avatar__svg",
         src: a.src,
         alt: a.label,
-        onError: i[0] || (i[0] = (u) => s.value = !0)
-      }, null, 40, Pt)) : (n(), p("div", Dt, [
+        onError: u[0] || (u[0] = (c) => n.value = !0)
+      }, null, 40, Gt)) : (s(), p("div", Kt, [
         b(o.$slots, "default", {}, () => [
-          F(M(l.value), 1)
+          Z(V(l.value), 1)
         ])
       ]))
-    ], 10, Ht));
+    ], 10, Zt));
   }
-}), zt = { class: "onyx-avatar-stack" }, bn = /* @__PURE__ */ k({
+}), jt = { class: "onyx-avatar-stack" }, Nn = /* @__PURE__ */ w({
   __name: "OnyxAvatarStack",
   setup(t) {
-    return (a, e) => (n(), p("div", zt, [
+    return (a, e) => (s(), p("div", jt, [
       b(a.$slots, "default")
     ]));
   }
-}), gn = ["compact", "default", "cozy"], H = (t) => ({
+}), zn = ["compact", "default", "cozy"], H = (t) => ({
   densityClass: h(() => ({ [`onyx-density-${t.density}`]: t.density }))
-}), Nt = ["innerHTML"], L = /* @__PURE__ */ k({
+}), Yt = ["innerHTML"], A = /* @__PURE__ */ w({
   __name: "OnyxIcon",
   props: {
     size: {},
@@ -85,7 +85,7 @@ const Tt = {
   },
   setup(t) {
     const a = t;
-    return (e, l) => (n(), p("figure", {
+    return (e, l) => (s(), p("figure", {
       class: g({
         "onyx-icon": !0,
         [`onyx-icon--${a.size}`]: a.size,
@@ -93,9 +93,9 @@ const Tt = {
       }),
       "aria-hidden": "true",
       innerHTML: a.icon
-    }, null, 10, Nt));
+    }, null, 10, Yt));
   }
-}), Ut = /* @__PURE__ */ k({
+}), Wt = /* @__PURE__ */ w({
   __name: "OnyxBadge",
   props: {
     density: {},
@@ -105,7 +105,7 @@ const Tt = {
   },
   setup(t) {
     const a = t, { densityClass: e } = H(a);
-    return (l, s) => (n(), p("div", {
+    return (l, n) => (s(), p("div", {
       class: g(["onyx-badge", [
         "onyx-truncation-ellipsis",
         "onyx-text",
@@ -114,58 +114,57 @@ const Tt = {
         r(e)
       ]])
     }, [
-      a.dot ? _("", !0) : (n(), p(z, { key: 0 }, [
-        a.icon ? (n(), x(L, {
+      a.dot ? _("", !0) : (s(), p(R, { key: 0 }, [
+        a.icon ? (s(), x(A, {
           key: 0,
           class: "onyx-badge__icon",
-          icon: a.icon,
-          size: a.density === "cozy" ? "24px" : "16px"
-        }, null, 8, ["icon", "size"])) : b(l.$slots, "default", { key: 1 })
+          icon: a.icon
+        }, null, 8, ["icon"])) : b(l.$slots, "default", { key: 1 })
       ], 64))
     ], 2));
   }
-}), He = (t, a) => {
+}), Re = (t, a) => {
   const e = t.__vccOpts || t;
-  for (const [l, s] of a)
-    e[l] = s;
+  for (const [l, n] of a)
+    e[l] = n;
   return e;
-}, Ft = {}, Rt = {
+}, Xt = {}, Jt = {
   class: "onyx-circle-spinner",
   viewBox: "0 0 50 50"
-}, qt = /* @__PURE__ */ v("circle", {
+}, Qt = /* @__PURE__ */ f("circle", {
   class: "onyx-circle-spinner__circle",
   cx: "50%",
   cy: "50%",
   r: "45%"
-}, null, -1), Zt = [
-  qt
+}, null, -1), ea = [
+  Qt
 ];
-function Kt(t, a) {
-  return n(), p("svg", Rt, Zt);
+function ta(t, a) {
+  return s(), p("svg", Jt, ea);
 }
-const Gt = /* @__PURE__ */ He(Ft, [["render", Kt]]), jt = {}, Yt = { class: "onyx-loading-dots" }, Wt = /* @__PURE__ */ v("span", { class: "onyx-loading-dots__center" }, null, -1), Xt = [
-  Wt
+const aa = /* @__PURE__ */ Re(Xt, [["render", ta]]), la = {}, oa = { class: "onyx-loading-dots" }, na = /* @__PURE__ */ f("span", { class: "onyx-loading-dots__center" }, null, -1), sa = [
+  na
 ];
-function Jt(t, a) {
-  return n(), p("div", Yt, Xt);
+function ra(t, a) {
+  return s(), p("div", oa, sa);
 }
-const Qt = /* @__PURE__ */ He(jt, [["render", Jt]]), J = /* @__PURE__ */ k({
+const ia = /* @__PURE__ */ Re(la, [["render", ra]]), X = /* @__PURE__ */ w({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "dots" }
   },
   setup(t) {
     const a = t;
-    return (e, l) => a.type === "circle" ? (n(), x(Gt, { key: 0 })) : a.type === "dots" ? (n(), x(Qt, { key: 1 })) : _("", !0);
+    return (e, l) => a.type === "circle" ? (s(), x(aa, { key: 0 })) : a.type === "dots" ? (s(), x(ia, { key: 1 })) : _("", !0);
   }
-}), ea = {}, ta = {
+}), ua = {}, ca = {
   "aria-hidden": "true",
   class: "onyx-skeleton"
 };
-function aa(t, a) {
-  return n(), p("figure", ta);
+function da(t, a) {
+  return s(), p("figure", ca);
 }
-const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "aria-label", "autofocus"], oa = { class: "onyx-button__label onyx-truncation-ellipsis" }, Oe = /* @__PURE__ */ k({
+const U = /* @__PURE__ */ Re(ua, [["render", da]]), pa = ["disabled", "type", "aria-label", "autofocus"], ma = { class: "onyx-button__label onyx-truncation-ellipsis" }, Ie = /* @__PURE__ */ w({
   __name: "OnyxButton",
   props: {
     density: {},
@@ -181,11 +180,11 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: l } = H(e), s = a;
-    return (o, i) => e.skeleton ? (n(), x(U, {
+    const e = t, { densityClass: l } = H(e), n = a;
+    return (o, u) => e.skeleton ? (s(), x(U, {
       key: 0,
       class: g(["onyx-button-skeleton", r(l)])
-    }, null, 8, ["class"])) : (n(), p("button", {
+    }, null, 8, ["class"])) : (s(), p("button", {
       key: 1,
       class: g([
         "onyx-button",
@@ -198,20 +197,20 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       type: e.type,
       "aria-label": e.loading ? e.label : void 0,
       autofocus: e.autofocus,
-      onClick: i[0] || (i[0] = (u) => s("click"))
+      onClick: u[0] || (u[0] = (c) => n("click"))
     }, [
-      e.icon && !e.loading ? (n(), x(L, {
+      e.icon && !e.loading ? (s(), x(A, {
         key: 0,
         icon: e.icon
       }, null, 8, ["icon"])) : _("", !0),
-      e.loading ? (n(), x(J, {
+      e.loading ? (s(), x(X, {
         key: 1,
         class: "onyx-button__loading"
       })) : _("", !0),
-      v("span", oa, M(e.label), 1)
-    ], 10, la));
+      f("span", ma, V(e.label), 1)
+    ], 10, pa));
   }
-}), kn = ["button", "submit", "reset"], wn = ["primary", "neutral", "danger"], Cn = ["default", "outline", "plain"], ye = (t) => ({
+}), Rn = ["button", "submit", "reset"], Un = ["primary", "neutral", "danger"], Fn = ["default", "outline", "plain"], _e = (t) => ({
   /**
    * Class that configures which type of required marker is used.
    */
@@ -222,7 +221,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     "onyx-required-marker": t.required,
     "onyx-optional-marker": !t.required
   }))
-}), na = "(optional)", sa = "Cancel", ra = "Apply", ia = "Back", ca = "Close", ua = {
+}), ya = "(optional)", ha = "Cancel", va = "Apply", fa = "Back", _a = "Close", xa = {
   tooShort: {
     preview: "Too short",
     fullError: "Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)"
@@ -277,20 +276,24 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       fullError: '"{value}" must a valid URL.'
     }
   }
-}, da = {
+}, ba = {
   toggleDropDown: "Toggle selection popover",
   empty: "No data available",
   noMatch: "No item matches your search",
   searchInputLabel: "Filter the list items",
-  clearSearch: "Clear search filter"
-}, pa = {
+  clearSearch: "Clear search filter",
+  searchPlaceholder: "Search"
+}, ga = {
   selectAll: "Select all",
   currentSelection: "{n} selected"
-}, ma = {
+}, ka = {
+  decrement: "Decrement by {stepSize}",
+  increment: "Increment by {stepSize}"
+}, wa = {
   empty: "This table is empty."
-}, ya = {
+}, Ca = {
   opensExternally: "Opens in a new tab."
-}, ha = "Subpages of {label}", va = {
+}, $a = "Subpages of {label}", Ma = {
   appLogo: "App logo of {appName}",
   goToHome: "Go to home page",
   goBack: "Go back",
@@ -298,10 +301,10 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   toggleBurgerMenu: "Toggle burger menu",
   toggleContextMenu: "Toggle context menu",
   navigationHeadline: "Navigation"
-}, fa = {
+}, Ba = {
   info: "Show info tooltip",
   error: "Show error tooltip"
-}, _a = {
+}, Va = {
   headline: "Change appearance",
   subtitle: "Select the appearance of the application:",
   appearance: "Appearance",
@@ -317,86 +320,91 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     label: "Dark",
     description: "This color mode is optimized for darker environments."
   }
-}, Ee = {
-  optional: na,
-  cancel: sa,
-  apply: ra,
-  back: ia,
-  close: ca,
-  validations: ua,
-  select: da,
-  selections: pa,
-  table: ma,
-  link: ya,
-  navItemOptionsLabel: ha,
-  navigation: va,
-  showTooltip: fa,
-  colorScheme: _a
-}, tt = Symbol(), at = (t = {}) => {
+}, Ae = {
+  optional: ya,
+  cancel: ha,
+  apply: va,
+  back: fa,
+  close: _a,
+  validations: xa,
+  select: ba,
+  selections: ga,
+  stepper: ka,
+  table: wa,
+  link: Ca,
+  navItemOptionsLabel: $a,
+  navigation: Ma,
+  showTooltip: Ba,
+  colorScheme: Va
+}, st = Symbol(), rt = (t = {}) => {
   const a = h(() => r(t == null ? void 0 : t.locale) ?? "en-US");
   if (t.t)
     return { t: t.t, locale: a };
-  const e = h(() => t != null && t.messages && a.value in t.messages ? t.messages[a.value] : Ee), l = h(() => (s, o = {}) => {
-    let i = Ke(s, e.value) ?? Ke(s, Ee) ?? "";
-    return i = ba(i, o.n), ga(i, o);
+  const e = h(() => t != null && t.messages && a.value in t.messages ? t.messages[a.value] : Ae), l = h(() => (n, o = {}) => {
+    let u = We(n, e.value) ?? We(n, Ae) ?? "";
+    return u = Oa(u, o.n), La(u, o);
   });
   return { locale: a, t: l };
-}, xa = (t, a) => {
-  const e = at(a);
-  return t.provide(tt, e), e;
-}, P = () => se(tt, () => at(), !0), Ke = (t, a) => {
-  const e = t.split(".").reduce((l, s) => !l || typeof l == "string" ? l : l[s], a);
+}, Sa = (t, a) => {
+  const e = rt(a);
+  return t.provide(st, e), e;
+}, N = () => ue(st, () => rt(), !0), We = (t, a) => {
+  const e = t.split(".").reduce((l, n) => !l || typeof l == "string" ? l : l[n], a);
   return e && typeof e == "string" ? e : void 0;
-}, ba = (t, a) => {
-  const e = t.split(" | ").map((s) => s.trim());
+}, Oa = (t, a) => {
+  const e = t.split(" | ").map((n) => n.trim());
   if (e.length <= 1) return t;
   let l = 1;
   return a === 0 && (l = 0), a && (a <= 0 || a > 1) && (l = 2), e.length === 2 ? l === 1 ? e[0] : e[1] : e[l];
-}, ga = (t, a) => a ? Object.entries(a).reduce((l, [s, o]) => o === void 0 ? l : l.replace(new RegExp(`{${s}}`, "gi"), o.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, ka = (t, a) => {
-  const e = Object.entries(t).filter(([s, o]) => o !== void 0), l = Object.entries(a).filter(([s, o]) => o !== void 0);
-  return e.length !== l.length ? !1 : e.every(([s, o]) => o === a[s]);
-}, wa = (t, a) => t.reduce(
+}, La = (t, a) => a ? Object.entries(a).reduce((l, [n, o]) => o === void 0 ? l : l.replace(new RegExp(`{${n}}`, "gi"), o.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, Ta = (t, a) => {
+  const e = Object.entries(t).filter(([n, o]) => o !== void 0), l = Object.entries(a).filter(([n, o]) => o !== void 0);
+  return e.length !== l.length ? !1 : e.every(([n, o]) => o === a[n]);
+}, Ea = (t, a) => t.reduce(
   (e, l) => {
-    const s = l[a] ?? "";
-    return e[s] = e[s] || [], e[s].push(l), e;
+    const n = l[a] ?? "";
+    return e[n] = e[n] || [], e[n].push(l), e;
   },
   {}
-), lt = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, a]) => a.enumerable).map(([t]) => t), Ca = (t) => lt().reduce(
+), it = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, a]) => a.enumerable).map(([t]) => t), Ia = (t) => it().reduce(
   (a, e) => (a[e] = t[e], a),
   {}
-), $a = (t) => {
+), Aa = (t) => {
   if (t.valueMissing) return "valueMissing";
-  const a = lt().filter((e) => e !== "valid").sort();
+  const a = it().filter((e) => e !== "valid").sort();
   for (const e of a)
     if (e in t && t[e]) return e;
-}, Ma = Object.keys(
-  Ee.validations.typeMismatch
-), Va = (t) => {
+}, Ha = Object.keys(
+  Ae.validations.typeMismatch
+), Pa = (t) => {
   if (t)
     return typeof t == "string" ? { shortMessage: t, longMessage: t } : t;
-}, ot = (t) => {
+}, Xe = (t) => {
   if (!t) return;
   if (typeof t == "string")
     return t;
+  if (t.shortMessage === t.longMessage)
+    return t.shortMessage;
   const { shortMessage: a, longMessage: e } = t;
   return `${a}: ${e}`;
-}, le = (t) => {
-  const { t: a } = P(), e = O(), l = O(!1);
-  K(
+}, ae = (t) => {
+  const { t: a } = N(), e = T(), l = T(!1);
+  Y(
     () => t.props.modelValue,
     () => l.value = !0,
     { once: !0 }
   );
-  const s = {
-    mounted: (i) => {
-      X(() => i.setCustomValidity(ot(t.props.customError) ?? "")), K(
-        [() => t.props.customError, () => t.props.modelValue],
+  const n = {
+    mounted: (c) => {
+      Q(() => c.setCustomValidity(Xe(t.props.customError) ?? "")), Y(
+        // we need to watch all props instead of only modelValue so the validity is re-checked
+        // when the validation rules change
+        [() => t.props],
         () => {
-          const u = Ca(i.validity);
-          !e.value && u.valid || e.value && ka(u, e.value) || (e.value = u);
+          const i = Ia(c.validity);
+          !e.value && i.valid || e.value && Ta(i, e.value) || (e.value = i);
         },
-        { immediate: !0 }
-      ), K(
+        { immediate: !0, deep: !0 }
+      ), Y(
         [() => t.props.customError, e, l],
         () => {
           !l.value || !e.value || t.emit("validityChange", e.value);
@@ -405,40 +413,55 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       );
     }
   }, o = h(() => {
-    var m, y, d;
+    var d, m, v;
     if (!e.value || e.value.valid) return;
-    const i = $a(e.value), u = Va(t.props.customError);
-    if (u || i === "customError")
-      return u || void 0;
-    if (!i) return;
-    if (i === "typeMismatch") {
-      const f = Ma.includes(t.props.type) ? t.props.type : "generic";
+    const c = Aa(e.value), i = Pa(t.props.customError);
+    if (i || c === "customError")
+      return i || void 0;
+    if (!c) return;
+    if (c === "typeMismatch") {
+      const k = Ha.includes(t.props.type) ? t.props.type : "generic";
       return {
-        longMessage: a.value(`validations.typeMismatch.${f}.fullError`, {
-          value: (m = t.props.modelValue) == null ? void 0 : m.toString()
+        longMessage: a.value(`validations.typeMismatch.${k}.fullError`, {
+          value: (d = t.props.modelValue) == null ? void 0 : d.toString()
         }),
-        shortMessage: a.value(`validations.typeMismatch.${f}.preview`)
+        shortMessage: a.value(`validations.typeMismatch.${k}.preview`)
       };
     }
-    const c = {
-      value: (y = t.props.modelValue) == null ? void 0 : y.toString(),
-      n: ((d = t.props.modelValue) == null ? void 0 : d.toString().length) ?? 0,
+    const y = {
+      value: (m = t.props.modelValue) == null ? void 0 : m.toString(),
+      n: ((v = t.props.modelValue) == null ? void 0 : v.toString().length) ?? 0,
       minLength: t.props.minlength,
-      maxLength: t.props.maxlength
+      maxLength: t.props.maxlength,
+      min: t.props.min,
+      max: t.props.max,
+      step: t.props.step
     };
     return {
-      longMessage: a.value(`validations.${i}.fullError`, c),
-      shortMessage: a.value(`validations.${i}.preview`)
+      longMessage: a.value(`validations.${c}.fullError`, y),
+      shortMessage: a.value(`validations.${c}.preview`)
     };
+  }), u = h(() => {
+    const c = [];
+    return t.props.hideLabel && c.push(t.props.label), o.value && c.push(Xe(o.value)), c.length ? c.join(`
+`) : void 0;
   });
   return {
     /**
      * Directive to set the custom error message and emit validityChange event.
      */
-    vCustomValidity: s,
-    errorMessages: o
+    vCustomValidity: n,
+    /**
+     * A custom error or the default translation of the first invalid state if one exists.
+     */
+    errorMessages: o,
+    /**
+     * A combination of a label (if it is hidden) and the error message (if an error exists).
+     * Usage e.g. on OnyxRadioButton, OnyxCheckbox, OnyxSwitch where no error message footer exists.
+     */
+    title: u
   };
-}, Sa = { class: "onyx-checkbox__container" }, Ba = ["aria-label", "title", "indeterminate", "disabled", "required", "value", "autofocus"], $e = /* @__PURE__ */ k({
+}, Da = ["title"], Na = { class: "onyx-checkbox__container" }, za = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"], Ve = /* @__PURE__ */ w({
   __name: "OnyxCheckbox",
   props: {
     density: {},
@@ -458,33 +481,33 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, s = h({
+    const e = t, l = a, n = h({
       get: () => e.modelValue,
-      set: (m) => l("update:modelValue", m)
-    }), { requiredMarkerClass: o, requiredTypeClass: i } = ye(e), { densityClass: u } = H(e), { vCustomValidity: c } = le({ props: e, emit: l });
-    return (m, y) => e.skeleton ? (n(), p("div", {
+      set: (d) => l("update:modelValue", d)
+    }), { requiredMarkerClass: o, requiredTypeClass: u } = _e(e), { densityClass: c } = H(e), { vCustomValidity: i, title: y } = ae({ props: e, emit: l });
+    return (d, m) => e.skeleton ? (s(), p("div", {
       key: 0,
-      class: g(["onyx-checkbox-skeleton", r(u)])
+      class: g(["onyx-checkbox-skeleton", r(c)])
     }, [
-      V(U, { class: "onyx-checkbox-skeleton__input" }),
-      e.hideLabel ? _("", !0) : (n(), x(U, {
+      M(U, { class: "onyx-checkbox-skeleton__input" }),
+      e.hideLabel ? _("", !0) : (s(), x(U, {
         key: 0,
         class: "onyx-checkbox-skeleton__label"
       }))
-    ], 2)) : (n(), p("label", {
+    ], 2)) : (s(), p("label", {
       key: 1,
-      class: g(["onyx-checkbox", [r(i), r(u)]])
+      class: g(["onyx-checkbox", [r(u), r(c)]]),
+      title: r(y)
     }, [
-      v("div", Sa, [
-        e.loading ? (n(), x(r(J), {
+      f("div", Na, [
+        e.loading ? (s(), x(X, {
           key: 0,
           class: "onyx-checkbox__loading",
           type: "circle"
-        })) : G((n(), p("input", {
+        })) : K((s(), p("input", {
           key: 1,
-          "onUpdate:modelValue": y[0] || (y[0] = (d) => s.value = d),
+          "onUpdate:modelValue": m[0] || (m[0] = (v) => n.value = v),
           "aria-label": e.hideLabel ? e.label : void 0,
-          title: e.hideLabel ? e.label : void 0,
           class: "onyx-checkbox__input",
           type: "checkbox",
           indeterminate: e.indeterminate,
@@ -492,42 +515,42 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
           required: e.required,
           value: e.value,
           autofocus: e.autofocus
-        }, null, 8, Ba)), [
-          [Je, s.value],
-          [r(c)]
+        }, null, 8, za)), [
+          [ot, n.value],
+          [r(i)]
         ])
       ]),
-      e.hideLabel ? _("", !0) : (n(), p(z, { key: 0 }, [
-        v("p", {
+      e.hideLabel ? _("", !0) : (s(), p(R, { key: 0 }, [
+        f("p", {
           class: g(["onyx-checkbox__label", [
             `onyx-truncation-${e.truncation}`,
             // shows the required marker inline for multiline labels
             e.truncation === "multiline" ? r(o) : void 0
           ]])
-        }, M(e.label), 3),
-        e.truncation === "ellipsis" ? (n(), p("div", {
+        }, V(e.label), 3),
+        e.truncation === "ellipsis" ? (s(), p("div", {
           key: 0,
           class: g(["onyx-checkbox__marker", [r(o)]])
         }, null, 2)) : _("", !0)
       ], 64))
-    ], 2));
+    ], 10, Da));
   }
-}), Oa = (t, a) => h(() => {
+}), Ra = (t, a) => h(() => {
   const e = a.value.filter(
-    (s) => t.value.includes(s)
+    (n) => t.value.includes(n)
   ), l = e.length === t.value.length;
   return {
     modelValue: l,
     indeterminate: !l && t.value.length && e.length ? !0 : void 0
   };
-}), nt = (t, a, e) => ({
+}), ut = (t, a, e) => ({
   /**
    * Current "select all" checkbox state.
    * - checked if all options are checked
    * - indeterminate if at least one but not all options are checked
    * - unchecked if no options are checked
    */
-  state: Oa(t, a),
+  state: Ra(t, a),
   /**
    * Provides an update for the checkbox list with
    * - all option values if "select all" was checked
@@ -535,18 +558,35 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
    * Does not touch the state of disabled checkboxes
    */
   handleChange: (l) => {
-    const s = a.value.filter(
-      (i) => !t.value.includes(i)
-    ), o = l ? s.concat(t.value) : s;
+    const n = a.value.filter(
+      (u) => !t.value.includes(u)
+    ), o = l ? n.concat(t.value) : n;
     e(o);
   }
-}), Ea = ["disabled"], Ta = {
+}), ie = /* @__PURE__ */ w({
+  __name: "OnyxHeadline",
+  props: {
+    is: {}
+  },
+  setup(t) {
+    const a = t;
+    return (e, l) => (s(), x(ce(a.is), {
+      class: g(["onyx-headline", `onyx-headline--${a.is}`])
+    }, {
+      default: $(() => [
+        b(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Ua = ["disabled"], Fa = {
   key: 0,
   class: "onyx-checkbox-group__label"
-}, $n = /* @__PURE__ */ k({
+}, qn = /* @__PURE__ */ w({
   __name: "OnyxCheckboxGroup",
   props: {
     density: {},
+    truncation: { default: "ellipsis" },
     options: {},
     modelValue: { default: () => [] },
     headline: {},
@@ -557,63 +597,64 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: l } = H(e), s = a, { t: o } = P(), i = (y, d) => {
-      const f = d ? [...e.modelValue, y] : e.modelValue.filter((C) => C !== y);
-      s("update:modelValue", f);
-    }, u = h(
-      () => e.options.filter((y) => !y.disabled && !y.skeleton).map(({ value: y }) => y)
-    ), c = nt(
-      u,
+    const e = t, { densityClass: l } = H(e), n = a, { t: o } = N(), u = (d, m) => {
+      const v = m ? [...e.modelValue, d] : e.modelValue.filter((k) => k !== d);
+      n("update:modelValue", v);
+    }, c = h(
+      () => e.options.filter((d) => !d.disabled && !d.skeleton).map(({ value: d }) => d)
+    ), i = ut(
+      c,
       h(() => e.modelValue),
-      (y) => s("update:modelValue", y)
-    ), m = h(() => {
-      var d;
-      const y = o.value("selections.selectAll");
-      return typeof e.withCheckAll == "boolean" ? y : ((d = e.withCheckAll) == null ? void 0 : d.label) ?? y;
+      (d) => n("update:modelValue", d)
+    ), y = h(() => {
+      var m;
+      const d = o.value("selections.selectAll");
+      return typeof e.withCheckAll == "boolean" ? d : ((m = e.withCheckAll) == null ? void 0 : m.label) ?? d;
     });
-    return (y, d) => (n(), p("fieldset", {
+    return (d, m) => (s(), p("fieldset", {
       class: g(["onyx-checkbox-group", r(l)]),
       disabled: e.disabled
     }, [
-      e.headline ? (n(), p("legend", Ta, [
-        V(r(ne), { is: "h3" }, {
+      e.headline ? (s(), p("legend", Fa, [
+        M(ie, { is: "h3" }, {
           default: $(() => [
-            F(M(e.headline), 1)
+            Z(V(e.headline), 1)
           ]),
           _: 1
         })
       ])) : _("", !0),
-      v("div", {
+      f("div", {
         class: g(["onyx-checkbox-group__content", {
           "onyx-checkbox-group__content--horizontal": e.direction === "horizontal",
           "onyx-checkbox-group__content--vertical": e.direction === "vertical"
         }])
       }, [
-        e.skeleton === void 0 ? (n(), p(z, { key: 0 }, [
-          e.withCheckAll ? (n(), x($e, B({ key: 0 }, r(c).state.value, {
-            label: m.value,
+        e.skeleton === void 0 ? (s(), p(R, { key: 0 }, [
+          e.withCheckAll ? (s(), x(Ve, O({ key: 0 }, r(i).state.value, {
+            label: y.value,
             value: "all",
             class: "onyx-checkbox-group__option onyx-checkbox-group__check-all",
-            "onUpdate:modelValue": r(c).handleChange
+            "onUpdate:modelValue": r(i).handleChange
           }), null, 16, ["label", "onUpdate:modelValue"])) : _("", !0),
-          (n(!0), p(z, null, W(e.options, (f) => (n(), x($e, B({
-            key: f.value.toString(),
+          (s(!0), p(R, null, J(e.options, (v) => (s(), x(Ve, O({
+            key: v.value.toString(),
             ref_for: !0
-          }, f, {
-            "model-value": e.modelValue.includes(f.value),
+          }, v, {
+            truncation: v.truncation ?? e.truncation,
+            "model-value": e.modelValue.includes(v.value),
             class: "onyx-checkbox-group__option",
-            "onUpdate:modelValue": (C) => i(f.value, C)
-          }), null, 16, ["model-value", "onUpdate:modelValue"]))), 128))
-        ], 64)) : (n(!0), p(z, { key: 1 }, W(e.skeleton, (f) => (n(), x($e, {
-          key: f,
-          label: `Skeleton ${f}`,
-          value: `skeleton-${f}`,
+            "onUpdate:modelValue": (k) => u(v.value, k)
+          }), null, 16, ["truncation", "model-value", "onUpdate:modelValue"]))), 128))
+        ], 64)) : (s(!0), p(R, { key: 1 }, J(e.skeleton, (v) => (s(), x(Ve, {
+          key: v,
+          label: `Skeleton ${v}`,
+          value: `skeleton-${v}`,
           skeleton: ""
         }, null, 8, ["label", "value"]))), 128))
       ], 2)
-    ], 10, Ea));
+    ], 10, Ua));
   }
-}), Ia = ["aria-modal", "aria-label", "role"], La = /* @__PURE__ */ k({
+}), qa = ["aria-modal", "aria-label", "role"], Za = /* @__PURE__ */ w({
   __name: "OnyxDialog",
   props: {
     density: {},
@@ -624,48 +665,54 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["close"],
   setup(t, { emit: a }) {
-    const e = t, l = a, s = O(), { densityClass: o } = H(e), i = () => {
-      var u, c;
-      e.modal ? (u = s.value) == null || u.showModal() : (c = s.value) == null || c.show();
+    const e = t, l = a, n = T(), { densityClass: o } = H(e), u = () => {
+      var c, i;
+      e.modal ? (c = n.value) == null || c.showModal() : (i = n.value) == null || i.show();
     };
-    return K([s, () => e.open], () => {
-      var u;
-      e.open ? i() : (u = s.value) == null || u.close();
-    }), K(
+    return Y([n, () => e.open], () => {
+      var c;
+      e.open ? u() : (c = n.value) == null || c.close();
+    }), Y(
       () => e.modal,
       () => {
-        var u;
-        (u = s.value) != null && u.open && (s.value.close(), i());
+        var c;
+        (c = n.value) != null && c.open && (n.value.close(), u());
       }
-    ), (u, c) => e.open ? (n(), p("dialog", {
+    ), (c, i) => e.open ? (s(), p("dialog", {
       key: 0,
       ref_key: "dialogRef",
-      ref: s,
+      ref: n,
       class: g(["onyx-dialog", r(o), "onyx-truncation-multiline"]),
       "aria-modal": e.modal,
       "aria-label": e.label,
       role: e.alert ? "alertdialog" : void 0,
-      onCancel: c[0] || (c[0] = Le((m) => l("close"), ["prevent"]))
+      onCancel: i[0] || (i[0] = De((y) => l("close"), ["prevent"]))
     }, [
-      b(u.$slots, "default")
-    ], 42, Ia)) : _("", !0);
+      b(c.$slots, "default")
+    ], 42, qa)) : _("", !0);
   }
-}), st = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>', Aa = { class: "onyx-empty" }, Ha = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, rt = /* @__PURE__ */ k({
+}), ct = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>', Ga = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, dt = /* @__PURE__ */ w({
   __name: "OnyxEmpty",
+  props: {
+    density: {}
+  },
   setup(t) {
-    return (a, e) => (n(), p("div", Aa, [
-      b(a.$slots, "icon", {}, () => [
-        V(L, {
-          icon: r(st),
+    const a = t, { densityClass: e } = H(a);
+    return (l, n) => (s(), p("div", {
+      class: g(["onyx-empty", r(e)])
+    }, [
+      b(l.$slots, "icon", {}, () => [
+        M(A, {
+          icon: r(ct),
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      v("div", Ha, [
-        b(a.$slots, "default")
+      f("div", Ga, [
+        b(l.$slots, "default")
       ])
-    ]));
+    ], 2));
   }
-}), Pa = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', Da = (t) => /^http(s?):\/\//.test(t), Pe = /* @__PURE__ */ k({
+}), Ka = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', ja = (t) => /^http(s?):\/\//.test(t), Ue = /* @__PURE__ */ w({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: {},
@@ -674,32 +721,16 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   setup(t) {
     const a = t, e = h(() => {
       const l = a.withExternalIcon;
-      return l !== "auto" ? l : Da(a.href ?? "");
+      return l !== "auto" ? l : ja(a.href ?? "");
     });
-    return (l, s) => e.value ? (n(), x(L, {
+    return (l, n) => e.value ? (s(), x(A, {
       key: 0,
       class: "onyx-external-link-icon",
-      icon: r(Pa),
+      icon: r(Ka),
       size: "16px"
     }, null, 8, ["icon"])) : _("", !0);
   }
-}), ne = /* @__PURE__ */ k({
-  __name: "OnyxHeadline",
-  props: {
-    is: {}
-  },
-  setup(t) {
-    const a = t;
-    return (e, l) => (n(), x(re(a.is), {
-      class: g(["onyx-headline", `onyx-headline--${a.is}`])
-    }, {
-      default: $(() => [
-        b(e.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-}), Mn = ["h1", "h2", "h3", "h4", "h5", "h6"], Vn = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], za = ["aria-label", "title", "type", "disabled", "autofocus"], Na = /* @__PURE__ */ k({
+}), Zn = ["h1", "h2", "h3", "h4", "h5", "h6"], Gn = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], Ya = ["aria-label", "title", "type", "disabled", "autofocus"], Wa = /* @__PURE__ */ w({
   __name: "OnyxIconButton",
   props: {
     density: {},
@@ -714,11 +745,11 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: l } = H(e), s = a;
-    return (o, i) => e.skeleton ? (n(), x(U, {
+    const e = t, { densityClass: l } = H(e), n = a;
+    return (o, u) => e.skeleton ? (s(), x(U, {
       key: 0,
       class: g(["onyx-icon-button-skeleton", r(l)])
-    }, null, 8, ["class"])) : (n(), p("button", {
+    }, null, 8, ["class"])) : (s(), p("button", {
       key: 1,
       class: g(["onyx-icon-button", [
         `onyx-icon-button--${e.color}`,
@@ -730,26 +761,36 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       type: e.type,
       disabled: e.disabled || e.loading,
       autofocus: e.autofocus,
-      onClick: i[0] || (i[0] = (u) => s("click"))
+      onClick: u[0] || (u[0] = (c) => n("click"))
     }, [
-      e.loading ? (n(), x(J, {
+      e.loading ? (s(), x(X, {
         key: 0,
         type: "circle"
-      })) : e.icon ? (n(), x(L, {
+      })) : e.icon ? (s(), x(A, {
         key: 1,
         icon: e.icon
       }, null, 8, ["icon"])) : b(o.$slots, "default", { key: 2 })
-    ], 10, za));
+    ], 10, Ya));
   }
-}), it = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="M15 8h2v2h-2zm0 5h2v11h-2z"/></svg>', ie = (t) => t, Ua = /* @__PURE__ */ (() => {
+}), pt = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="M15 8h2v2h-2zm0 5h2v11h-2z"/></svg>', oe = (t) => t;
+function mt() {
+  const t = It();
+  return h({
+    set: (a) => {
+      t.value = a != null && "$el" in a ? a.$el : a;
+    },
+    get: () => t.value
+  });
+}
+const Xa = /* @__PURE__ */ (() => {
   let t = 1;
   return () => t++;
-})(), ee = (t) => `${t}-${Ua()}`, Fa = (t, a) => Object.entries(t).every(
+})(), W = (t) => `${t}-${Xa()}`, Ja = (t, a) => Object.entries(t).every(
   ([e, l]) => a[e] === l
-), Ra = (t, a) => typeof a == "string" ? t.key === a : Fa(
+), Qa = (t, a) => typeof a == "string" ? t.key === a : Ja(
   { altKey: !1, ctrlKey: !1, metaKey: !1, shiftKey: !1, ...a },
   t
-), Te = (t) => !Za.has(t), qa = [
+), He = (t) => !tl.has(t), el = [
   "Unidentified",
   "Alt",
   "AltGraph",
@@ -1057,58 +1098,89 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   "MediaPreviousTrack",
   "Power",
   "Unidentified"
-], Za = new Set(qa), ct = (t, a) => {
+], tl = new Set(el), le = At(/* @__PURE__ */ new Map()), al = (t, a) => {
+  if (a != null && a.size) {
+    le.set(t, a);
+    return;
+  }
+  le.delete(t), document.removeEventListener(t, yt);
+}, Je = (t, a) => {
+  const e = le.get(t);
+  e == null || e.delete(a), al(t, e);
+}, ll = (t, a) => {
+  const e = le.get(t) ?? /* @__PURE__ */ new Set();
+  e.add(a), le.set(t, e), document.addEventListener(t, yt);
+}, yt = (t) => {
+  var e;
+  const a = t.type;
+  (e = le.get(a)) == null || e.forEach((l) => l(t));
+}, ht = ({
+  type: t,
+  listener: a,
+  disabled: e
+}) => {
+  Ne(
+    () => Q(
+      () => e != null && e.value ? Je(t, a) : ll(t, a)
+    )
+  ), ye(() => Je(t, a));
+}, vt = ({ element: t, onOutsideClick: a, disabled: e }) => {
+  ht({ type: "click", listener: ({ target: n }) => {
+    var u;
+    !((u = t.value) != null && u.contains(n)) && a();
+  }, disabled: e });
+}, ft = (t, a) => {
   let e;
   return (...l) => {
     clearTimeout(e), e = setTimeout(() => t(...l), a);
   };
-}, ut = (t, a = 500) => {
+}, _t = (t, a = 500) => {
   let e = "";
-  const l = ct(() => e = "", a);
-  return (s) => {
-    Te(s.key) && (l(), e = `${e}${s.key}`, t(e));
+  const l = ft(() => e = "", a);
+  return (n) => {
+    He(n.key) && (l(), e = `${e}${n.key}`, t(e));
   };
-}, Ka = ie(
+}, ol = oe(
   (t) => {
-    const a = h(() => r(t.multiple) ?? !1), e = /* @__PURE__ */ new Map(), l = (c) => (e.has(c) || e.set(c, ee("listbox-option")), e.get(c)), s = O(!1);
-    X(() => {
-      var m;
-      if (t.activeOption.value == null || !s.value && !t.controlled)
+    const a = h(() => r(t.multiple) ?? !1), e = /* @__PURE__ */ new Map(), l = (i) => (e.has(i) || e.set(i, W("listbox-option")), e.get(i)), n = T(!1);
+    Q(() => {
+      var y;
+      if (t.activeOption.value == null || !n.value && !t.controlled)
         return;
-      const c = l(t.activeOption.value);
-      (m = document.getElementById(c)) == null || m.scrollIntoView({ block: "nearest", inline: "nearest" });
+      const i = l(t.activeOption.value);
+      (y = document.getElementById(i)) == null || y.scrollIntoView({ block: "nearest", inline: "nearest" });
     });
-    const o = ut((c) => {
-      var m;
-      return (m = t.onTypeAhead) == null ? void 0 : m.call(t, c);
-    }), i = (c) => {
-      var m, y, d, f, C, T, N;
-      switch (c.key) {
+    const o = _t((i) => {
+      var y;
+      return (y = t.onTypeAhead) == null ? void 0 : y.call(t, i);
+    }), u = (i) => {
+      var y, d, m, v, k, S, B;
+      switch (i.key) {
         case " ":
-          c.preventDefault(), t.activeOption.value != null && ((m = t.onSelect) == null || m.call(t, t.activeOption.value));
+          i.preventDefault(), t.activeOption.value != null && ((y = t.onSelect) == null || y.call(t, t.activeOption.value));
           break;
         case "ArrowUp":
-          if (c.preventDefault(), t.activeOption.value == null) {
-            (y = t.onActivateLast) == null || y.call(t);
+          if (i.preventDefault(), t.activeOption.value == null) {
+            (d = t.onActivateLast) == null || d.call(t);
             return;
           }
-          (d = t.onActivatePrevious) == null || d.call(t, t.activeOption.value);
+          (m = t.onActivatePrevious) == null || m.call(t, t.activeOption.value);
           break;
         case "ArrowDown":
-          if (c.preventDefault(), t.activeOption.value == null) {
-            (f = t.onActivateFirst) == null || f.call(t);
+          if (i.preventDefault(), t.activeOption.value == null) {
+            (v = t.onActivateFirst) == null || v.call(t);
             return;
           }
-          (C = t.onActivateNext) == null || C.call(t, t.activeOption.value);
+          (k = t.onActivateNext) == null || k.call(t, t.activeOption.value);
           break;
         case "Home":
-          c.preventDefault(), (T = t.onActivateFirst) == null || T.call(t);
+          i.preventDefault(), (S = t.onActivateFirst) == null || S.call(t);
           break;
         case "End":
-          c.preventDefault(), (N = t.onActivateLast) == null || N.call(t);
+          i.preventDefault(), (B = t.onActivateLast) == null || B.call(t);
           break;
         default:
-          o(c);
+          o(i);
       }
     };
     return {
@@ -1125,251 +1197,247 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
             "aria-label": r(t.label),
             tabindex: "0",
             "aria-activedescendant": t.activeOption.value != null ? l(t.activeOption.value) : void 0,
-            onFocus: () => s.value = !0,
-            onBlur: () => s.value = !1,
-            onKeydown: i
+            onFocus: () => n.value = !0,
+            onBlur: () => n.value = !1,
+            onKeydown: u
           }
         ),
-        group: h(() => (c) => ({
+        group: h(() => (i) => ({
           role: "group",
-          "aria-label": c.label
+          "aria-label": i.label
         })),
-        option: h(() => (c) => {
-          const m = c.selected ?? !1;
+        option: h(() => (i) => {
+          const y = i.selected ?? !1;
           return {
-            id: l(c.value),
+            id: l(i.value),
             role: "option",
-            "aria-label": c.label,
-            "aria-disabled": c.disabled,
-            "aria-checked": a.value ? m : void 0,
-            "aria-selected": a.value ? void 0 : m,
+            "aria-label": i.label,
+            "aria-disabled": i.disabled,
+            "aria-checked": a.value ? y : void 0,
+            "aria-selected": a.value ? void 0 : y,
             onClick: () => {
-              var y;
-              return !c.disabled && ((y = t.onSelect) == null ? void 0 : y.call(t, c.value));
+              var d;
+              return !i.disabled && ((d = t.onSelect) == null ? void 0 : d.call(t, i.value));
             }
           };
         })
       },
       state: {
-        isFocused: s
+        isFocused: n
       },
       internals: {
         getOptionId: l
       }
     };
   }
-), dt = (t) => {
-  const a = (e) => {
-    const l = t.queryComponent();
-    if (!l || !(e.target instanceof Node)) return;
-    !l.contains(e.target) && t.onOutsideClick();
-  };
-  Ae(() => {
-    X(() => {
-      var e;
-      (e = t.disabled) != null && e.value ? document.removeEventListener("click", a) : document.addEventListener("click", a);
-    });
-  }), pe(() => {
-    document.removeEventListener("click", a);
-  });
-}, pt = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], mt = [
+), xt = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], bt = [
   "Escape",
   { key: "ArrowUp", altKey: !0 },
   "Enter",
   "Tab"
-], Ga = ["Enter", " "], ja = ["Enter"], Ya = (t, a) => Ie(t, a ? ja : Ga), Ie = (t, a) => a.some((e) => Ra(t, e)), Wa = ie(
+], nl = ["Enter", " "], sl = ["Enter"], rl = (t, a) => Pe(t, a ? sl : nl), Pe = (t, a) => a.some((e) => Qa(t, e)), il = oe(
   ({
-    inputValue: t,
-    autocomplete: a,
-    onAutocomplete: e,
-    onTypeAhead: l,
-    multiple: s,
-    label: o,
-    listLabel: i,
+    autocomplete: t,
+    onAutocomplete: a,
+    onTypeAhead: e,
+    multiple: l,
+    label: n,
+    listLabel: o,
     isExpanded: u,
     activeOption: c,
-    onToggle: m,
+    onToggle: i,
     onSelect: y,
     onActivateFirst: d,
-    onActivateLast: f,
-    onActivateNext: C,
-    onActivatePrevious: T,
-    templateRef: N
+    onActivateLast: m,
+    onActivateNext: v,
+    onActivatePrevious: k,
+    templateRef: S
   }) => {
-    const Q = ee("comboBox-control"), I = h(() => r(a)), A = h(() => r(u)), j = h(() => r(s)), ve = (S) => {
-      const we = S.target;
-      I.value !== "none" && (e == null || e(we.value));
-    }, fe = ut((S) => l == null ? void 0 : l(S)), ce = (S) => {
-      y == null || y(S), r(j) || m == null || m();
-    }, _e = (S) => {
-      switch (S.key) {
+    const B = W("comboBox-control"), P = h(() => r(t)), E = h(() => r(u)), z = h(() => r(l)), ne = (L) => {
+      const Me = L.target;
+      P.value !== "none" && (a == null || a(Me.value));
+    }, se = _t((L) => e == null ? void 0 : e(L)), de = (L) => {
+      y == null || y(L), r(z) || i == null || i();
+    }, ge = (L) => {
+      switch (L.key) {
         case "ArrowUp":
-          if (S.preventDefault(), c.value == null)
-            return f == null ? void 0 : f();
-          T == null || T(c.value);
+          if (L.preventDefault(), c.value == null)
+            return m == null ? void 0 : m();
+          k == null || k(c.value);
           break;
         case "ArrowDown":
-          if (S.preventDefault(), c.value == null)
+          if (L.preventDefault(), c.value == null)
             return d == null ? void 0 : d();
-          C == null || C(c.value);
+          v == null || v(c.value);
           break;
         case "Home":
-          S.preventDefault(), d == null || d();
+          L.preventDefault(), d == null || d();
           break;
         case "End":
-          S.preventDefault(), f == null || f();
+          L.preventDefault(), m == null || m();
           break;
       }
-    }, xe = (S) => {
-      if (S.key === "Enter" && S.preventDefault(), !A.value && Ie(S, pt))
-        return m == null || m(), S.key === " " && S.preventDefault(), S.key === "End" ? f == null ? void 0 : f() : d == null ? void 0 : d();
-      if (Ya(S, j.value))
-        return ce(c.value);
-      if (A.value && Ie(S, mt))
-        return m == null ? void 0 : m();
-      if (I.value === "none" && Te(S.key))
-        return !A.value && (m == null || m()), fe(S);
-      if (I.value !== "none" && Te(S.key)) {
-        !A.value && (m == null || m());
+    }, ke = (L) => {
+      if (L.key === "Enter" && L.preventDefault(), !E.value && Pe(L, xt))
+        return i == null || i(), L.key === " " && L.preventDefault(), L.key === "End" ? m == null ? void 0 : m() : d == null ? void 0 : d();
+      if (rl(L, z.value))
+        return de(c.value);
+      if (E.value && Pe(L, bt))
+        return i == null ? void 0 : i();
+      if (P.value === "none" && He(L.key))
+        return !E.value && (i == null || i()), se(L);
+      if (P.value !== "none" && He(L.key)) {
+        !E.value && (i == null || i());
         return;
       }
-      return _e(S);
-    }, oe = I.value !== "none" ? {
-      "aria-autocomplete": I.value,
+      return ge(L);
+    }, we = P.value !== "none" ? {
+      "aria-autocomplete": P.value,
       type: "text"
     } : null, {
-      elements: { option: ue, group: be, listbox: ge },
-      internals: { getOptionId: ke }
-    } = Ka({
-      label: i,
-      multiple: j,
+      elements: { option: Ce, group: $e, listbox: re },
+      internals: { getOptionId: pe }
+    } = ol({
+      label: o,
+      multiple: z,
       controlled: !0,
       activeOption: c,
-      onSelect: ce
+      onSelect: de
     });
-    return dt({
-      queryComponent: () => N.value,
+    return vt({
+      element: S,
       onOutsideClick() {
-        A.value && (m == null || m(!0));
+        E.value && (i == null || i(!0));
       }
     }), {
       elements: {
-        option: ue,
-        group: be,
+        option: Ce,
+        group: $e,
         /**
          * The listbox associated with the combobox.
          */
         listbox: h(() => ({
-          ...ge.value,
-          id: Q,
+          ...re.value,
+          id: B,
           // preventDefault to not lose focus of the combobox
-          onMousedown: (S) => S.preventDefault()
+          onMousedown: (L) => L.preventDefault()
         })),
         /**
          * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
          * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
          */
         input: h(() => ({
-          value: t.value,
           role: "combobox",
-          "aria-expanded": A.value,
-          "aria-controls": Q,
-          "aria-label": r(o),
-          "aria-activedescendant": c.value != null ? ke(c.value) : void 0,
-          onInput: ve,
-          onKeydown: xe,
-          ...oe
+          "aria-expanded": E.value,
+          "aria-controls": B,
+          "aria-label": r(n),
+          "aria-activedescendant": c.value != null ? pe(c.value) : void 0,
+          onInput: ne,
+          onKeydown: ke,
+          ...we
         })),
         /**
          * An optional button to control the visibility of the popup.
          */
         button: h(() => ({
           tabindex: "-1",
-          onClick: () => m == null ? void 0 : m()
+          onClick: () => i == null ? void 0 : i()
         }))
       }
     };
   }
-), Xa = ie(() => {
-  const t = ee("menu"), a = ee("menu-button"), e = O(!1), l = ct(
-    (u) => e.value = u,
-    200
-  ), s = h(() => ({
-    onMouseover: () => l(!0),
-    onMouseout: () => l(!1),
-    onFocusin: () => e.value = !0,
-    onFocusout: () => e.value = !1
-  })), o = (u) => {
-    const c = document.activeElement, m = (c == null ? void 0 : c.closest('[role="menu"]')) || document.getElementById(t);
-    if (!m) return;
-    const y = [...m.querySelectorAll('[role="menuitem"]')];
-    let d = 0;
-    if (c) {
-      const C = y.indexOf(c);
-      switch (u) {
-        case "next":
-          d = C + 1;
-          break;
-        case "prev":
-          d = C - 1;
-          break;
-        case "first":
-          d = 0;
-          break;
-        case "last":
-          d = y.length - 1;
-          break;
+), ul = oe(
+  ({ isExpanded: t, onToggle: a }) => {
+    const e = W("menu-button-root"), l = W("menu-button-list"), n = mt(), o = W("menu-button-button");
+    ht({
+      type: "keydown",
+      listener: (y) => y.key === "Escape" && t.value && a(),
+      disabled: h(() => !t.value)
+    });
+    const u = ft(
+      (y) => t.value !== y && a(),
+      200
+    ), c = (y) => {
+      const d = document.activeElement, m = (d == null ? void 0 : d.closest('[role="menu"]')) || n.value;
+      if (!m) return;
+      const v = [...m.querySelectorAll('[role="menuitem"]')];
+      let k = 0;
+      if (d) {
+        const B = v.indexOf(d);
+        switch (y) {
+          case "next":
+            k = B + 1;
+            break;
+          case "prev":
+            k = B - 1;
+            break;
+          case "first":
+            k = 0;
+            break;
+          case "last":
+            k = v.length - 1;
+            break;
+        }
       }
-    }
-    const f = y[d];
-    f == null || f.focus();
-  }, i = (u) => {
-    switch (u.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        u.preventDefault(), o("next");
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        u.preventDefault(), o("prev");
-        break;
-      case "Home":
-        u.preventDefault(), o("first");
-        break;
-      case "End":
-        u.preventDefault(), o("last");
-        break;
-      case " ":
-        u.preventDefault(), u.target.click();
-        break;
-    }
-  };
-  return {
-    state: { isExpanded: e },
-    elements: {
-      button: h(
-        () => ({
-          "aria-controls": t,
-          "aria-expanded": e.value,
-          "aria-haspopup": !0,
-          id: a,
-          ...s.value,
-          onKeydown: i
-        })
-      ),
-      flyout: {
-        ...s.value
-      },
-      menu: {
-        id: t,
-        role: "menu",
-        "aria-labelledby": a,
-        onKeydown: i
-      },
-      ...yt({}).elements
-    }
-  };
-}), yt = ie(() => ({
+      const S = v[k];
+      S == null || S.focus();
+    };
+    return {
+      elements: {
+        root: {
+          id: e,
+          onKeydown: (y) => {
+            switch (y.key) {
+              case "ArrowDown":
+              case "ArrowRight":
+                y.preventDefault(), c("next");
+                break;
+              case "ArrowUp":
+              case "ArrowLeft":
+                y.preventDefault(), c("prev");
+                break;
+              case "Home":
+                y.preventDefault(), c("first");
+                break;
+              case "End":
+                y.preventDefault(), c("last");
+                break;
+              case " ":
+                y.preventDefault(), y.target.click();
+                break;
+              case "Escape":
+                y.preventDefault(), t.value && a();
+                break;
+            }
+          },
+          onMouseover: () => u(!0),
+          onMouseout: () => u(!1),
+          onFocusout: (y) => {
+            var d;
+            (d = document.getElementById(e)) != null && d.contains(y.relatedTarget) || t.value && a();
+          }
+        },
+        button: h(
+          () => ({
+            "aria-controls": l,
+            "aria-expanded": t.value,
+            "aria-haspopup": !0,
+            onFocus: () => !t.value && a(),
+            id: o
+          })
+        ),
+        menu: {
+          id: l,
+          ref: n,
+          role: "menu",
+          "aria-labelledby": o,
+          onClick: () => t.value && a()
+        },
+        ...gt().elements
+      }
+    };
+  }
+), gt = oe(() => ({
   elements: {
     listItem: {
       role: "none"
@@ -1380,67 +1448,105 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       role: "menuitem"
     })
   }
-})), Ja = ie((t) => {
-  const a = ee("tooltip"), e = O(!1);
-  let l;
-  const s = h(() => {
-    const d = r(t.open);
-    return typeof d != "object" ? 200 : d.debounce;
-  }), o = h(() => {
-    const d = r(t.open);
-    return typeof d != "object" ? d : d.type;
-  }), i = h({
-    get: () => e.value,
-    set: (d) => {
-      clearTimeout(l), l = setTimeout(() => {
-        e.value = d;
-      }, s.value);
+})), cl = {
+  /**
+   * Ensures that a given `number` is or is between a given `min` and `max`.
+   */
+  clamp: (t, a, e) => Math.max(Math.min(t, e), a)
+}, dl = oe(({ navigationName: t }) => {
+  const a = W("nav"), e = () => {
+    const n = document.getElementById(a);
+    return n ? [...n.querySelectorAll("button[aria-expanded][aria-controls]")] : [];
+  }, l = (n, o) => {
+    const u = e(), c = u.indexOf(n);
+    if (c === -1) return;
+    const i = cl.clamp(
+      c + (o === "next" ? 1 : -1),
+      0,
+      u.length - 1
+    );
+    u[i].focus();
+  };
+  return {
+    elements: {
+      nav: {
+        "aria-label": r(t),
+        id: a,
+        onKeydown: (n) => {
+          switch (n.key) {
+            case "ArrowRight":
+              l(n.target, "next");
+              break;
+            case "ArrowLeft":
+              l(n.target, "previous");
+              break;
+          }
+        }
+      }
+    }
+  };
+}), pl = oe((t) => {
+  const a = mt(), e = W("tooltip"), l = T(!1);
+  let n;
+  const o = h(() => {
+    const v = r(t.open);
+    return typeof v != "object" ? 200 : v.debounce;
+  }), u = h(() => {
+    const v = r(t.open);
+    return typeof v != "object" ? v : v.type;
+  }), c = h({
+    get: () => l.value,
+    set: (v) => {
+      clearTimeout(n), n = setTimeout(() => {
+        l.value = v;
+      }, o.value);
     }
-  }), u = h(() => typeof o.value == "boolean" ? o.value : i.value), c = () => {
-    e.value = !e.value;
-  }, m = h(() => {
-    if (o.value === "hover")
+  }), i = h(() => typeof u.value == "boolean" ? u.value : c.value), y = () => {
+    l.value = !l.value;
+  }, d = h(() => {
+    if (u.value === "hover")
       return {
-        onMouseover: () => i.value = !0,
-        onMouseout: () => i.value = !1,
-        onFocusin: () => e.value = !0,
-        onFocusout: () => e.value = !1
+        onMouseover: () => c.value = !0,
+        onMouseout: () => c.value = !1,
+        onFocusin: () => l.value = !0,
+        onFocusout: () => l.value = !1
       };
-  }), y = (d) => {
-    d.key === "Escape" && (e.value = !1);
+  }), m = (v) => {
+    v.key === "Escape" && (l.value = !1);
   };
-  return dt({
-    queryComponent: () => {
-      var d;
-      return (d = document.getElementById(a)) == null ? void 0 : d.parentElement;
-    },
-    onOutsideClick: () => e.value = !1,
-    disabled: h(() => o.value !== "click")
-  }), Ae(() => {
-    document.addEventListener("keydown", y);
-  }), pe(() => {
-    document.removeEventListener("keydown", y);
+  return vt({
+    element: a,
+    onOutsideClick: () => l.value = !1,
+    disabled: h(() => u.value !== "click")
+  }), Ne(() => {
+    document.addEventListener("keydown", m);
+  }), ye(() => {
+    document.removeEventListener("keydown", m);
   }), {
     elements: {
+      root: {
+        ref: a
+      },
       trigger: h(() => ({
-        "aria-describedby": a,
-        onClick: o.value === "click" ? c : void 0,
-        ...m.value
+        "aria-describedby": e,
+        onClick: u.value === "click" ? y : void 0,
+        ...d.value
       })),
       tooltip: h(() => ({
         role: "tooltip",
-        id: a,
+        id: e,
         tabindex: "-1",
-        ...m.value
+        ...d.value
       }))
     },
     state: {
-      isVisible: u
+      isVisible: i
     }
   };
-}), Qa = { class: "onyx-tooltip-wrapper" }, ht = /* @__PURE__ */ k({
+}), kt = /* @__PURE__ */ w({
   __name: "OnyxTooltip",
   props: {
+    density: {},
     text: {},
     icon: {},
     color: { default: "neutral" },
@@ -1450,35 +1556,37 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, {
-      elements: { trigger: e, tooltip: l },
-      state: { isVisible: s }
-    } = Ja({
+      elements: { root: e, trigger: l, tooltip: n },
+      state: { isVisible: o }
+    } = pl({
       open: h(() => a.open)
-    });
-    return (o, i) => (n(), p("div", Qa, [
-      v("div", B(r(l), {
+    }), { densityClass: u } = H(a);
+    return (c, i) => (s(), p("div", O({
+      class: ["onyx-tooltip-wrapper", r(u)]
+    }, r(e)), [
+      f("div", O(r(n), {
         class: ["onyx-tooltip onyx-text--small onyx-truncation-multiline", {
           "onyx-tooltip--danger": a.color === "danger",
           "onyx-tooltip--bottom": a.position === "bottom",
           "onyx-tooltip--fit-parent": a.fitParent,
-          "onyx-tooltip--hidden": !r(s)
+          "onyx-tooltip--hidden": !r(o)
         }]
       }), [
-        a.icon ? (n(), x(L, {
+        a.icon ? (s(), x(A, {
           key: 0,
           icon: a.icon,
           size: "16px"
         }, null, 8, ["icon"])) : _("", !0),
-        b(o.$slots, "tooltip", {}, () => [
-          v("span", null, M(a.text), 1)
+        b(c.$slots, "tooltip", {}, () => [
+          f("span", null, V(a.text), 1)
         ])
       ], 16),
-      v("div", te(ae(r(e))), [
-        b(o.$slots, "default")
+      f("div", ee(te(r(l))), [
+        b(c.$slots, "default")
       ], 16)
-    ]));
+    ], 16));
   }
-}), el = ["aria-label"], Me = /* @__PURE__ */ k({
+}), ml = ["aria-label"], Se = /* @__PURE__ */ w({
   __name: "OnyxInfoTooltip",
   props: {
     text: {},
@@ -1486,44 +1594,45 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     label: {}
   },
   setup(t) {
-    const a = t, { t: e } = P();
-    return (l, s) => (n(), x(ht, {
+    const a = t, { t: e } = N();
+    return (l, n) => (s(), x(kt, {
       class: "onyx-info-tooltip",
       text: a.text,
       position: a.position
     }, {
       default: $(() => [
-        v("button", {
+        f("button", {
           type: "button",
           "aria-label": a.label || r(e)("showTooltip.info"),
           class: "onyx-info-tooltip__trigger"
         }, [
-          V(L, { icon: r(it) }, null, 8, ["icon"])
-        ], 8, el)
+          M(A, { icon: r(pt) }, null, 8, ["icon"])
+        ], 8, ml)
       ]),
       _: 1
     }, 8, ["text", "position"]));
   }
-}), tl = { class: "onyx-form-element__header" }, al = { class: "onyx-truncation-ellipsis" }, ll = {
-  key: 2,
-  class: "onyx-form-element__optional"
-}, ol = {
+}), yl = {
   key: 0,
+  class: "onyx-form-element__label onyx-text--small"
+}, hl = ["for"], vl = {
+  key: 1,
   class: "onyx-form-element__footer onyx-text--small"
-}, nl = {
+}, fl = {
   key: 0,
   class: "onyx-form-element__error-message onyx-truncation-ellipsis"
-}, sl = {
+}, _l = {
   key: 2,
   class: "onyx-form-element__message onyx-truncation-ellipsis"
-}, rl = {
+}, xl = {
   key: 4,
   class: "onyx-form-element__counter"
-}, De = /* @__PURE__ */ k({
+}, xe = /* @__PURE__ */ w({
   __name: "OnyxFormElement",
   props: {
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
+    id: { default: W("onyx-form-element") },
     modelValue: {},
     label: {},
     labelTooltip: {},
@@ -1535,66 +1644,68 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     withCounter: { type: Boolean }
   },
   setup(t) {
-    const a = t, { t: e } = P(), { requiredMarkerClass: l, requiredTypeClass: s } = ye(a), o = h(() => {
-      var i;
+    const a = t, { t: e } = N(), { requiredMarkerClass: l, requiredTypeClass: n } = _e(a), o = h(() => {
+      var u;
       if (a.withCounter && a.maxlength)
-        return `${(((i = a.modelValue) == null ? void 0 : i.toString()) || "").length}/${a.maxlength}`;
+        return `${(((u = a.modelValue) == null ? void 0 : u.toString()) || "").length}/${a.maxlength}`;
     });
-    return (i, u) => {
-      var c, m;
-      return n(), p("div", {
-        class: g(["onyx-form-element", r(s)])
+    return (u, c) => {
+      var i, y;
+      return s(), p("div", {
+        class: g(["onyx-form-element", r(n)])
       }, [
-        v("label", null, [
-          a.hideLabel ? _("", !0) : (n(), p("div", {
+        a.hideLabel ? _("", !0) : (s(), p("div", yl, [
+          f("label", {
+            for: a.id,
+            class: "onyx-truncation-ellipsis"
+          }, V(a.label), 9, hl),
+          a.required ? (s(), p("span", {
             key: 0,
-            class: g(["onyx-form-element__label onyx-text--small", [a.required ? void 0 : r(l)]])
-          }, [
-            v("div", tl, [
-              v("span", al, M(a.label), 1),
-              a.required ? (n(), p("span", {
-                key: 0,
-                class: g([a.required ? r(l) : void 0])
-              }, null, 2)) : _("", !0),
-              a.labelTooltip ? (n(), x(Me, {
-                key: 1,
-                class: "onyx-form-element__label-tooltip",
-                text: a.labelTooltip
-              }, null, 8, ["text"])) : _("", !0),
-              a.required ? _("", !0) : (n(), p("span", ll, M(r(e)("optional")), 1))
-            ])
-          ], 2)),
-          b(i.$slots, "default")
-        ]),
-        a.message || (c = i.errorMessages) != null && c.shortMessage || o.value ? (n(), p("div", ol, [
-          i.errorMessages ? (n(), p("span", nl, M(i.errorMessages.shortMessage), 1)) : _("", !0),
-          (m = i.errorMessages) != null && m.longMessage ? (n(), x(Me, {
+            class: g([a.required ? r(l) : void 0])
+          }, null, 2)) : _("", !0),
+          a.labelTooltip ? (s(), x(Se, {
+            key: 1,
+            class: "onyx-form-element__label-tooltip",
+            text: a.labelTooltip
+          }, null, 8, ["text"])) : _("", !0),
+          a.required ? _("", !0) : (s(), p("span", {
+            key: 2,
+            class: g([a.required ? void 0 : r(l)])
+          }, null, 2))
+        ])),
+        b(u.$slots, "default", {
+          id: a.id
+        }),
+        a.message || (i = u.errorMessages) != null && i.shortMessage || o.value ? (s(), p("div", vl, [
+          u.errorMessages ? (s(), p("span", fl, V(u.errorMessages.shortMessage), 1)) : _("", !0),
+          (y = u.errorMessages) != null && y.longMessage ? (s(), x(Se, {
             key: 1,
             class: "onyx-form-element__error-tooltip",
             color: "danger",
             position: "bottom",
             label: r(e)("showTooltip.error"),
-            text: i.errorMessages.longMessage
+            text: u.errorMessages.longMessage
           }, null, 8, ["label", "text"])) : _("", !0),
-          a.message ? (n(), p("span", sl, M(a.message), 1)) : _("", !0),
-          a.messageTooltip ? (n(), x(Me, {
+          a.message ? (s(), p("span", _l, V(a.message), 1)) : _("", !0),
+          a.messageTooltip ? (s(), x(Se, {
             key: 3,
             class: "onyx-form-element__message-tooltip",
             position: "bottom",
             text: a.messageTooltip
           }, null, 8, ["text"])) : _("", !0),
-          o.value ? (n(), p("span", rl, M(o.value), 1)) : _("", !0)
+          o.value ? (s(), p("span", xl, V(o.value), 1)) : _("", !0)
         ])) : _("", !0)
       ], 2);
     };
   }
-}), il = { class: "onyx-input__wrapper" }, cl = ["placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], Sn = /* @__PURE__ */ k({
+}), bl = { class: "onyx-input__wrapper" }, gl = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], Kn = /* @__PURE__ */ w({
   __name: "OnyxInput",
   props: {
     density: {},
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
     customError: {},
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean },
@@ -1618,57 +1729,58 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "change", "focus", "blur", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { vCustomValidity: s, errorMessages: o } = le({ props: e, emit: l }), { densityClass: i } = H(e), u = h({
+    const e = t, l = a, { vCustomValidity: n, errorMessages: o } = ae({ props: e, emit: l }), { densityClass: u } = H(e), c = h({
       get: () => e.modelValue,
-      set: (y) => l("update:modelValue", y)
-    }), c = (y) => {
-      const d = y.target.value;
-      l("change", d);
-    }, m = h(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern);
-    return (y, d) => e.skeleton ? (n(), p("div", {
+      set: (d) => l("update:modelValue", d)
+    }), i = (d) => {
+      const m = d.target.value;
+      l("change", m);
+    }, y = h(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern);
+    return (d, m) => e.skeleton ? (s(), p("div", {
       key: 0,
-      class: g(["onyx-input-skeleton", r(i)])
+      class: g(["onyx-input-skeleton", r(u)])
     }, [
-      e.hideLabel ? _("", !0) : (n(), x(U, {
+      e.hideLabel ? _("", !0) : (s(), x(U, {
         key: 0,
         class: "onyx-input-skeleton__label"
       })),
-      V(U, { class: "onyx-input-skeleton__input" })
-    ], 2)) : (n(), p("div", {
+      M(U, { class: "onyx-input-skeleton__input" })
+    ], 2)) : (s(), p("div", {
       key: 1,
-      class: g(["onyx-input", r(i)])
+      class: g(["onyx-input", r(u)])
     }, [
-      V(De, B(e, { "error-messages": r(o) }), {
-        default: $(() => [
-          v("div", il, [
-            e.loading ? (n(), x(J, {
+      M(xe, O(e, { "error-messages": r(o) }), {
+        default: $(({ id: v }) => [
+          f("div", bl, [
+            e.loading ? (s(), x(X, {
               key: 0,
               class: "onyx-input__loading",
               type: "circle"
             })) : _("", !0),
-            G(v("input", {
-              "onUpdate:modelValue": d[0] || (d[0] = (f) => u.value = f),
-              class: "onyx-input__native",
+            K(f("input", {
+              id: v,
+              "onUpdate:modelValue": m[0] || (m[0] = (k) => c.value = k),
               placeholder: e.placeholder,
+              class: "onyx-input__native",
               type: e.type,
               required: e.required,
               autocapitalize: e.autocapitalize,
               autocomplete: e.autocomplete,
               autofocus: e.autofocus,
               name: e.name,
-              pattern: m.value,
+              pattern: y.value,
               readonly: e.readonly,
               disabled: e.disabled || e.loading,
               minlength: e.minlength,
               maxlength: e.maxlength,
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0,
-              onChange: c,
-              onFocus: d[1] || (d[1] = (f) => l("focus")),
-              onBlur: d[2] || (d[2] = (f) => l("blur"))
-            }, null, 40, cl), [
-              [$t, u.value],
-              [r(s)]
+              onChange: i,
+              onFocus: m[1] || (m[1] = (k) => l("focus")),
+              onBlur: m[2] || (m[2] = (k) => l("blur"))
+            }, null, 40, gl), [
+              [Ht, c.value],
+              [r(n)]
             ])
           ])
         ]),
@@ -1676,21 +1788,21 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       }, 16, ["error-messages"])
     ], 2));
   }
-}), Bn = ["email", "password", "search", "tel", "text", "url"], On = ["none", "sentences", "words", "characters"], vt = /* @__PURE__ */ k({
+}), jn = ["email", "password", "search", "tel", "text", "url"], Yn = ["none", "sentences", "words", "characters"], wt = /* @__PURE__ */ w({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { default: "span" }
   },
   setup(t) {
     const a = t;
-    return (e, l) => (n(), x(re(a.is), { class: "onyx-visually-hidden" }, {
+    return (e, l) => (s(), x(ce(a.is), { class: "onyx-visually-hidden" }, {
       default: $(() => [
         b(e.$slots, "default")
       ]),
       _: 3
     }));
   }
-}), ul = ["href", "target", "rel"], En = /* @__PURE__ */ k({
+}), kl = ["href", "target", "rel"], Wn = /* @__PURE__ */ w({
   __name: "OnyxLink",
   props: {
     href: {},
@@ -1699,25 +1811,25 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { t: s } = P();
-    return (o, i) => (n(), p("a", {
+    const e = t, l = a, { t: n } = N();
+    return (o, u) => (s(), p("a", {
       class: "onyx-link",
       href: e.href,
       target: e.target,
       rel: e.target === "_blank" ? "noreferrer" : void 0,
-      onClick: i[0] || (i[0] = (u) => l("click"))
+      onClick: u[0] || (u[0] = (c) => l("click"))
     }, [
       b(o.$slots, "default"),
-      e.target === "_blank" ? (n(), x(vt, { key: 0 }, {
+      e.target === "_blank" ? (s(), x(wt, { key: 0 }, {
         default: $(() => [
-          F(M(r(s)("link.opensExternally")), 1)
+          Z(V(r(n)("link.opensExternally")), 1)
         ]),
         _: 1
       })) : _("", !0),
-      V(Pe, te(ae(e)), null, 16)
-    ], 8, ul));
+      M(Ue, ee(te(e)), null, 16)
+    ], 8, kl));
   }
-}), Tn = ["_self", "_blank", "_parent", "_top"], ft = /* @__PURE__ */ k({
+}), Xn = ["_self", "_blank", "_parent", "_top"], Fe = /* @__PURE__ */ w({
   __name: "OnyxListItem",
   props: {
     density: {},
@@ -1729,7 +1841,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, { densityClass: e } = H(a);
-    return (l, s) => (n(), p("li", {
+    return (l, n) => (s(), p("li", {
       class: g({
         "onyx-list-item": !0,
         ...r(e),
@@ -1743,8 +1855,8 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       b(l.$slots, "default")
     ], 2));
   }
-}), dl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m28.707 27.293-7.969-7.969A9.95 9.95 0 0 0 23 13c0-5.514-4.486-10-10-10S3 7.486 3 13s4.486 10 10 10c2.397 0 4.599-.85 6.324-2.262l7.969 7.969zM5 13c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8"/></svg>', ze = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>', _t = () => {
-  const t = Mt(), a = h(
+}), wl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m28.707 27.293-7.969-7.969A9.95 9.95 0 0 0 23 13c0-5.514-4.486-10-10-10S3 7.486 3 13s4.486 10 10 10c2.397 0 4.599-.85 6.324-2.262l7.969 7.969zM5 13c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8"/></svg>', qe = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>', Ct = () => {
+  const t = Pt(), a = h(
     () => ({ class: t.class, style: t.style })
   ), e = h(() => {
     const l = { ...t };
@@ -1760,7 +1872,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
      */
     restAttrs: e
   };
-}, pl = ["aria-label"], ml = ["aria-label"], yl = /* @__PURE__ */ k({
+}, Cl = ["placeholder", "aria-label"], $l = ["aria-label"], Ml = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "OnyxMiniSearch",
   props: {
@@ -1770,90 +1882,100 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "clear"],
   setup(t, { expose: a, emit: e }) {
-    const l = t, s = e, { rootAttrs: o, restAttrs: i } = _t(), { densityClass: u } = H(l), { t: c } = P(), m = O(), y = h({
+    const l = t, n = e, { rootAttrs: o, restAttrs: u } = Ct(), { densityClass: c } = H(l), { t: i } = N(), y = T(), d = h({
       get: () => l.modelValue,
-      set: (d) => s("update:modelValue", d ?? "")
+      set: (m) => n("update:modelValue", m ?? "")
     });
     return a({
       /**
        * Focuses the input.
        */
       focus: () => {
-        var d;
-        return (d = m.value) == null ? void 0 : d.focus();
+        var m;
+        return (m = y.value) == null ? void 0 : m.focus();
       }
-    }), (d, f) => (n(), p("div", B({
-      class: ["onyx-mini-search", r(u)]
+    }), (m, v) => (s(), p("div", O({
+      class: ["onyx-mini-search", r(c)]
     }, r(o)), [
-      G(v("input", B({
+      K(f("input", O({
         ref_key: "input",
-        ref: m,
-        "onUpdate:modelValue": f[0] || (f[0] = (C) => y.value = C),
-        class: "onyx-mini-search__input",
-        placeholder: "Search",
+        ref: y,
+        "onUpdate:modelValue": v[0] || (v[0] = (k) => d.value = k),
+        class: "onyx-mini-search__input onyx-text",
+        placeholder: r(i)("select.searchPlaceholder"),
         type: "text"
-      }, r(i), {
+      }, r(u), {
         "aria-label": l.label
-      }), null, 16, pl), [
-        [Qe, y.value]
+      }), null, 16, Cl), [
+        [ze, d.value]
       ]),
-      v("button", {
+      f("button", {
         type: "button",
         class: "onyx-mini-search__clear",
-        "aria-label": r(c)("select.clearSearch"),
+        "aria-label": r(i)("select.clearSearch"),
         tabindex: "-1",
-        onMousedown: f[1] || (f[1] = Le(() => {
+        onMousedown: v[1] || (v[1] = De(() => {
         }, ["prevent"])),
-        onClick: f[2] || (f[2] = (C) => s("clear"))
+        onClick: v[2] || (v[2] = (k) => n("clear"))
       }, [
-        V(L, { icon: r(ze) }, null, 8, ["icon"])
-      ], 40, ml),
-      V(L, {
+        M(A, { icon: r(qe) }, null, 8, ["icon"])
+      ], 40, $l),
+      M(A, {
         class: "onyx-mini-search__icon",
-        icon: r(dl)
+        icon: r(wl)
       }, null, 8, ["icon"])
     ], 16));
   }
-}), hl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m27.707 5.707-1.414-1.414L16 14.586 5.707 4.293 4.293 5.707 14.586 16 4.293 26.293l1.414 1.414L16 17.414l10.293 10.293 1.414-1.414L17.414 16z"/></svg>', vl = ["aria-label"], fl = {
-  key: 0,
-  class: "onyx-mobile-nav-button__menu"
-}, _l = { class: "onyx-mobile-nav-button__content" }, Ge = /* @__PURE__ */ k({
+}), Bl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m27.707 5.707-1.414-1.414L16 14.586 5.707 4.293 4.293 5.707 14.586 16 4.293 26.293l1.414 1.414L16 17.414l10.293 10.293 1.414-1.414L17.414 16z"/></svg>', Vl = { class: "onyx-mobile-nav-button" }, Sl = ["aria-label"], Ol = { class: "onyx-mobile-nav-button__flyout" }, Ll = { class: "onyx-mobile-nav-button__menu" }, Qe = /* @__PURE__ */ w({
   __name: "OnyxMobileNavButton",
   props: {
     label: {},
     icon: {},
-    open: { type: Boolean, default: !1 }
+    open: { type: Boolean, default: !1 },
+    headline: {}
   },
   emits: ["update:open"],
   setup(t, { emit: a }) {
     const e = t, l = a;
-    return (s, o) => (n(), p("div", null, [
-      v("button", {
+    return (n, o) => (s(), p("div", Vl, [
+      f("button", {
         type: "button",
-        class: g(["onyx-mobile-nav-button", { "onyx-mobile-nav-button--active": e.open }]),
+        class: g(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": e.open }]),
         "aria-label": e.label,
-        onClick: o[0] || (o[0] = (i) => l("update:open", !e.open))
+        onClick: o[0] || (o[0] = (u) => l("update:open", !e.open))
       }, [
-        V(L, {
-          icon: e.open ? r(hl) : e.icon
+        M(A, {
+          icon: e.open ? r(Bl) : e.icon
         }, null, 8, ["icon"])
-      ], 10, vl),
-      e.open ? (n(), p("div", fl, [
-        v("div", _l, [
-          b(s.$slots, "default")
+      ], 10, Sl),
+      e.open ? (s(), p(R, { key: 0 }, [
+        f("div", Ol, [
+          f("div", Ll, [
+            e.headline ? (s(), x(ie, {
+              key: 0,
+              is: "h2",
+              class: "onyx-mobile-nav-button__headline"
+            }, {
+              default: $(() => [
+                Z(V(e.headline), 1)
+              ]),
+              _: 1
+            })) : _("", !0),
+            b(n.$slots, "default")
+          ])
         ]),
-        v("div", {
+        f("div", {
           class: "onyx-mobile-nav-button__backdrop",
           role: "presentation",
-          onClick: o[1] || (o[1] = (i) => l("update:open", !1))
+          onClick: o[1] || (o[1] = (u) => l("update:open", !1))
         })
-      ])) : _("", !0)
+      ], 64)) : _("", !0)
     ]));
   }
-}), xl = ["aria-label"], bl = ["src", "alt"], gl = {
+}), Tl = ["aria-label"], El = ["src", "alt"], Il = {
   key: 1,
-  class: "onyx-text-small"
-}, kl = /* @__PURE__ */ k({
+  class: "onyx-text-small onyx-truncation-ellipsis"
+}, Al = /* @__PURE__ */ w({
   __name: "OnyxNavAppArea",
   props: {
     logoUrl: {},
@@ -1862,27 +1984,27 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { t: s } = P(), o = h(() => e.label ?? s.value("navigation.goToHome"));
-    return (i, u) => (n(), p("button", {
+    const e = t, l = a, { t: n } = N(), o = h(() => e.label ?? n.value("navigation.goToHome"));
+    return (u, c) => (s(), p("button", {
       type: "button",
       class: "onyx-nav-app-area",
       "aria-label": o.value,
-      onClick: u[0] || (u[0] = (c) => l("click"))
+      onClick: c[0] || (c[0] = (i) => l("click"))
     }, [
-      b(i.$slots, "default", {}, () => [
-        e.logoUrl ? (n(), p("img", {
+      b(u.$slots, "default", {}, () => [
+        e.logoUrl ? (s(), p("img", {
           key: 0,
           src: e.logoUrl,
-          alt: r(s)("navigation.appLogo", { appName: e.appName }),
+          alt: r(n)("navigation.appLogo", { appName: e.appName }),
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, bl)) : _("", !0),
-        e.appName ? (n(), p("span", gl, M(e.appName), 1)) : _("", !0)
+        }, null, 8, El)) : _("", !0),
+        e.appName ? (s(), p("span", Il, V(e.appName), 1)) : _("", !0)
       ])
-    ], 8, xl));
+    ], 8, Tl));
   }
-}), wl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+}), Hl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144781)">
 <mask id="mask0_4499_144781" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="83" height="104">
 <rect width="83" height="104" fill="#D9D9D9"/>
@@ -1970,7 +2092,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, Cl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Pl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144833)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="var(--onyx-color-themed-neutral-1100)"/>
 <g filter="url(#filter0_d_4499_144833)">
@@ -2017,7 +2139,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, $l = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Dl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144816)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="white"/>
 <g filter="url(#filter0_d_4499_144816)">
@@ -2064,7 +2186,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, Ml = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, Vl = ["innerHTML"], Sl = ["autofocus", "value", "checked", "aria-label"], Bl = { class: "onyx-text--small" }, Ol = { class: "onyx-color-scheme-dialog__actions" }, El = /* @__PURE__ */ k({
+`, Nl = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, zl = ["innerHTML"], Rl = ["autofocus", "value", "checked", "aria-label"], Ul = { class: "onyx-text--small" }, Fl = { class: "onyx-color-scheme-dialog__actions" }, ql = /* @__PURE__ */ w({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: Boolean, default: !1 },
@@ -2073,100 +2195,100 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "close"],
   setup(t, { emit: a }) {
-    const e = t, l = a, s = O(e.modelValue);
-    X(() => s.value = e.modelValue);
-    const { t: o } = P(), i = h(() => [
+    const e = t, l = a, n = T(e.modelValue);
+    Q(() => n.value = e.modelValue);
+    const { t: o } = N(), u = h(() => [
       {
         value: "auto",
-        image: wl,
+        image: Hl,
         label: o.value("colorScheme.auto.label"),
         description: o.value("colorScheme.auto.description")
       },
       {
         value: "light",
-        image: $l,
+        image: Dl,
         label: o.value("colorScheme.light.label"),
         description: o.value("colorScheme.light.description")
       },
       {
         value: "dark",
-        image: Cl,
+        image: Pl,
         label: o.value("colorScheme.dark.label"),
         description: o.value("colorScheme.dark.description")
       }
-    ]), u = (m) => {
-      const y = m.target;
-      s.value = y.value;
-    }, c = () => {
-      s.value && (l("update:modelValue", s.value), l("close"));
+    ]), c = (y) => {
+      const d = y.target;
+      n.value = d.value;
+    }, i = () => {
+      n.value && (l("update:modelValue", n.value), l("close"));
     };
-    return (m, y) => (n(), x(La, B({ class: "onyx-color-scheme-dialog" }, e, {
+    return (y, d) => (s(), x(Za, O({ class: "onyx-color-scheme-dialog" }, e, {
       label: r(o)("colorScheme.headline"),
       modal: "",
-      onClose: y[1] || (y[1] = (d) => l("close"))
+      onClose: d[1] || (d[1] = (m) => l("close"))
     }), {
       default: $(() => [
-        v("form", {
+        f("form", {
           class: "onyx-color-scheme-dialog__form",
-          onSubmit: Le(c, ["prevent"])
+          onSubmit: De(i, ["prevent"])
         }, [
-          v("div", null, [
-            V(ne, { is: "h2" }, {
+          f("div", null, [
+            M(ie, { is: "h2" }, {
               default: $(() => [
-                F(M(r(o)("colorScheme.headline")), 1)
+                Z(V(r(o)("colorScheme.headline")), 1)
               ]),
               _: 1
             }),
-            v("span", Ml, M(r(o)("colorScheme.subtitle")), 1)
+            f("span", Nl, V(r(o)("colorScheme.subtitle")), 1)
           ]),
-          v("fieldset", {
+          f("fieldset", {
             class: "onyx-color-scheme-dialog__list",
-            onChange: u
+            onChange: c
           }, [
-            (n(!0), p(z, null, W(i.value, (d) => (n(), p("label", {
-              key: d.value,
+            (s(!0), p(R, null, J(u.value, (m) => (s(), p("label", {
+              key: m.value,
               class: "onyx-color-scheme-dialog__option"
             }, [
-              v("figure", {
+              f("figure", {
                 class: "onyx-color-scheme-dialog__image",
-                innerHTML: d.image
-              }, null, 8, Vl),
-              v("div", null, [
-                V(vt, { is: "div" }, {
+                innerHTML: m.image
+              }, null, 8, zl),
+              f("div", null, [
+                M(wt, { is: "div" }, {
                   default: $(() => [
-                    v("input", {
+                    f("input", {
                       type: "radio",
                       name: "color-scheme",
-                      autofocus: e.modelValue === d.value,
-                      value: d.value,
-                      checked: e.modelValue === d.value,
-                      "aria-label": d.label,
+                      autofocus: e.modelValue === m.value,
+                      value: m.value,
+                      checked: e.modelValue === m.value,
+                      "aria-label": m.label,
                       required: ""
-                    }, null, 8, Sl)
+                    }, null, 8, Rl)
                   ]),
                   _: 2
                 }, 1024),
-                V(ne, {
+                M(ie, {
                   is: "h3",
                   class: "onyx-color-scheme-dialog__label"
                 }, {
                   default: $(() => [
-                    F(M(d.label), 1)
+                    Z(V(m.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                v("p", Bl, M(d.description), 1)
+                f("p", Ul, V(m.description), 1)
               ])
             ]))), 128))
           ], 32),
-          v("div", Ol, [
-            V(Oe, {
+          f("div", Fl, [
+            M(Ie, {
               label: r(o)("cancel"),
               mode: "plain",
               color: "neutral",
-              onClick: y[0] || (y[0] = (d) => l("close"))
+              onClick: d[0] || (d[0] = (m) => l("close"))
             }, null, 8, ["label"]),
-            V(Oe, {
+            M(Ie, {
               label: r(o)("apply"),
               type: "submit"
             }, null, 8, ["label"])
@@ -2176,7 +2298,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       _: 1
     }, 16, ["label"]));
   }
-}), Tl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.99 2C8.28 2 2 8.27 2 15.99s6.27 13.99 13.99 13.99 13.99-6.27 13.99-13.99S23.7 2 15.99 2m5.96 3.6c.76.44 1.47.96 2.12 1.55v17.66c-.65.59-1.35 1.11-2.12 1.55zm-2 21.69c-.63.22-1.29.39-1.96.51V4.18c.67.11 1.33.28 1.96.51zm6.11-17.77c1.2 1.87 1.91 4.08 1.91 6.47s-.71 4.6-1.91 6.47V9.53ZM4 15.99C4 9.38 9.38 4 15.99 4v23.97C9.38 27.97 4 22.59 4 15.98Z" style="stroke-width:0"/></svg>', xt = /* @__PURE__ */ k({
+}), Zl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.99 2C8.28 2 2 8.27 2 15.99s6.27 13.99 13.99 13.99 13.99-6.27 13.99-13.99S23.7 2 15.99 2m5.96 3.6c.76.44 1.47.96 2.12 1.55v17.66c-.65.59-1.35 1.11-2.12 1.55zm-2 21.69c-.63.22-1.29.39-1.96.51V4.18c.67.11 1.33.28 1.96.51zm6.11-17.77c1.2 1.87 1.91 4.08 1.91 6.47s-.71 4.6-1.91 6.47V9.53ZM4 15.99C4 9.38 9.38 4 15.99 4v23.97C9.38 27.97 4 22.59 4 15.98Z" style="stroke-width:0"/></svg>', $t = /* @__PURE__ */ w({
   __name: "OnyxMenuItem",
   props: {
     href: {},
@@ -2187,17 +2309,17 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, l = a, {
-      elements: { listItem: s, menuItem: o }
-    } = yt({});
-    return (i, u) => (n(), x(ft, B({
+      elements: { listItem: n, menuItem: o }
+    } = gt();
+    return (u, c) => (s(), x(Fe, O({
       selected: e.active,
       active: e.active,
       color: e.color,
       disabled: e.disabled,
       class: "onyx-menu-item"
-    }, r(s)), {
+    }, r(n)), {
       default: $(() => [
-        (n(), x(re(e.href ? "a" : "button"), B(
+        (s(), x(ce(e.href ? "a" : "button"), O(
           {
             class: "onyx-menu-item__trigger",
             disabled: !e.href && e.disabled,
@@ -2208,11 +2330,11 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
             disabled: !e.href && e.disabled
           }),
           {
-            onClick: u[0] || (u[0] = (c) => l("click"))
+            onClick: c[0] || (c[0] = (i) => l("click"))
           }
         ), {
           default: $(() => [
-            b(i.$slots, "default")
+            b(u.$slots, "default")
           ]),
           _: 3
         }, 16, ["disabled", "href"]))
@@ -2220,87 +2342,94 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       _: 3
     }, 16, ["selected", "active", "color", "disabled"]));
   }
-}), Il = { class: "onyx-color-scheme-menu-item__value" }, In = /* @__PURE__ */ k({
+}), Gl = { class: "onyx-color-scheme-menu-item__value" }, Jn = /* @__PURE__ */ w({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: {}
   },
   emits: ["update:modelValue"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { t: s } = P(), o = O(!1);
-    return (i, u) => (n(), x(xt, {
+    const e = t, l = a, { t: n } = N(), o = T(!1);
+    return (u, c) => (s(), x($t, {
       class: "onyx-color-scheme-menu-item",
-      onClick: u[2] || (u[2] = (c) => o.value = !0)
+      onClick: c[2] || (c[2] = (i) => o.value = !0)
     }, {
       default: $(() => [
-        V(L, { icon: r(Tl) }, null, 8, ["icon"]),
-        v("div", null, [
-          F(M(r(s)("colorScheme.appearance")) + ": ", 1),
-          v("span", Il, M(r(s)(`colorScheme.${e.modelValue}.label`)), 1)
+        M(A, { icon: r(Zl) }, null, 8, ["icon"]),
+        f("div", null, [
+          Z(V(r(n)("colorScheme.appearance")) + ": ", 1),
+          f("span", Gl, V(r(n)(`colorScheme.${e.modelValue}.label`)), 1)
         ]),
-        (n(), x(Vt, { to: "body" }, [
-          V(El, {
+        (s(), x(Dt, { to: "body" }, [
+          M(ql, {
             "model-value": e.modelValue,
             open: o.value,
-            onClose: u[0] || (u[0] = (c) => o.value = !1),
-            "onUpdate:modelValue": u[1] || (u[1] = (c) => l("update:modelValue", c))
+            onClose: c[0] || (c[0] = (i) => o.value = !1),
+            "onUpdate:modelValue": c[1] || (c[1] = (i) => l("update:modelValue", i))
           }, null, 8, ["model-value", "open"])
         ]))
       ]),
       _: 1
     }));
   }
-}), Ll = { class: "onyx-flyout-menu" }, Al = ["aria-label"], bt = /* @__PURE__ */ k({
+}), Kl = ["aria-label"], Mt = /* @__PURE__ */ w({
   __name: "OnyxFlyoutMenu",
-  props: {
+  props: /* @__PURE__ */ he({
     label: {}
-  },
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
   setup(t) {
-    const a = t, e = R(), {
-      elements: { button: l, flyout: s, menu: o },
-      state: { isExpanded: i }
-    } = Xa({}), u = h(() => {
-      var m;
-      if (!e.default) return;
-      const c = e.default().at(0);
-      return (c == null ? void 0 : c.type.toString()) === "Symbol(v-fgt)" ? Array.isArray(c == null ? void 0 : c.children) ? (m = c == null ? void 0 : c.children) == null ? void 0 : m.at(0) : void 0 : c;
+    const a = t, e = ve(t, "open"), l = G(), {
+      elements: { root: n, button: o, menu: u }
+    } = ul({
+      isExpanded: e,
+      onToggle: () => e.value = !e.value
+    }), c = h(() => {
+      var y;
+      if (!l.default) return;
+      const i = l.default().at(0);
+      return (i == null ? void 0 : i.type.toString()) === "Symbol(v-fgt)" ? Array.isArray(i == null ? void 0 : i.children) ? (y = i == null ? void 0 : i.children) == null ? void 0 : y.at(0) : void 0 : i;
     });
-    return (c, m) => (n(), p("div", Ll, [
-      (n(), x(re(u.value), te(ae(r(l))), null, 16)),
-      e.options || e.header || e.footer ? G((n(), p("div", B({ key: 0 }, r(s), {
+    return (i, y) => (s(), p("div", O({ class: "onyx-flyout-menu" }, r(n)), [
+      (s(), x(ce(c.value), ee(te(r(o))), null, 16)),
+      l.options || l.header || l.footer ? K((s(), p("div", {
+        key: 0,
         "aria-label": a.label,
-        class: {
-          "onyx-flyout-menu__list--with-header": !!e.header,
-          "onyx-flyout-menu__list--with-footer": !!e.footer,
+        class: g({
+          "onyx-flyout-menu__list--with-header": !!l.header,
+          "onyx-flyout-menu__list--with-footer": !!l.footer,
           "onyx-flyout-menu__list": !0
-        }
-      }), [
-        b(c.$slots, "header"),
-        e.options ? (n(), p("ul", B({ key: 0 }, r(o), { class: "onyx-flyout-menu__wrapper onyx-flyout-menu__group" }), [
-          b(c.$slots, "options")
+        })
+      }, [
+        b(i.$slots, "header"),
+        l.options ? (s(), p("ul", O({ key: 0 }, r(u), { class: "onyx-flyout-menu__wrapper onyx-flyout-menu__group" }), [
+          b(i.$slots, "options")
         ], 16)) : _("", !0),
-        b(c.$slots, "footer")
-      ], 16, Al)), [
-        [et, r(i)]
+        b(i.$slots, "footer")
+      ], 10, Kl)), [
+        [nt, e.value]
       ]) : _("", !0)
-    ]));
+    ], 16));
   }
-}), Hl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m13.207 8.293-1.414 1.414L18.086 16l-6.293 6.293 1.414 1.414L20.914 16z"/></svg>', he = Symbol(), Pl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.04 32.04"><path d="M23.52 15.52H11.93l4.13-4.13-1.42-1.41-6.54 6.54 6.54 6.54 1.42-1.42-4.13-4.12h11.59z"/></svg>', Dl = ["aria-orientation"], zl = /* @__PURE__ */ k({
+}), jl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m13.207 8.293-1.414 1.414L18.086 16l-6.293 6.293 1.414 1.414L20.914 16z"/></svg>', be = Symbol(), Yl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.04 32.04"><path d="M23.52 15.52H11.93l4.13-4.13-1.42-1.41-6.54 6.54 6.54 6.54 1.42-1.42-4.13-4.12h11.59z"/></svg>', Wl = ["aria-orientation"], Xl = /* @__PURE__ */ w({
   __name: "OnyxNavSeparator",
   props: {
     orientation: { default: "vertical" }
   },
   setup(t) {
-    const a = t, e = se(he);
-    return (l, s) => (n(), p("div", {
+    const a = t, e = ue(be);
+    return (l, n) => (s(), p("div", {
       class: g(["onyx-nav-separator", { "onyx-nav-separator--horizontal": a.orientation === "horizontal" || r(e) }]),
       role: "separator",
       "aria-orientation": a.orientation
-    }, null, 10, Dl));
+    }, null, 10, Wl));
   }
-}), Nl = { role: "presentation" }, Ul = /* @__PURE__ */ k({
+}), Jl = { role: "presentation" }, Ql = /* @__PURE__ */ w({
   __name: "NavButtonLayout",
-  props: /* @__PURE__ */ St({
+  props: /* @__PURE__ */ he({
     href: {},
     withExternalIcon: { type: [Boolean, String] },
     label: {},
@@ -2312,34 +2441,34 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   }),
   emits: ["update:mobileChildrenOpen"],
   setup(t) {
-    const a = t, e = R(), { t: l } = P(), s = Bt(t, "mobileChildrenOpen");
-    return (o, i) => (n(), p("li", Nl, [
-      a.isMobile ? (n(), p(z, { key: 0 }, [
-        a.isMobile && s.value ? (n(), x(Oe, {
+    const a = t, e = G(), { t: l } = N(), n = ve(t, "mobileChildrenOpen");
+    return (o, u) => (s(), p("li", Jl, [
+      a.isMobile ? (s(), p(R, { key: 0 }, [
+        a.isMobile && n.value ? (s(), x(Ie, {
           key: 0,
           label: r(l)("back"),
           mode: "plain",
           color: "neutral",
-          icon: r(Pl),
-          onClick: i[0] || (i[0] = (u) => s.value = !1)
+          icon: r(Yl),
+          onClick: u[0] || (u[0] = (c) => n.value = !1)
         }, null, 8, ["label", "icon"])) : _("", !0),
-        !s.value || a.href ? b(o.$slots, "button", { key: 1 }) : _("", !0),
-        s.value && a.href ? (n(), x(zl, {
+        !n.value || a.href ? b(o.$slots, "button", { key: 1 }) : _("", !0),
+        n.value && a.href ? (s(), x(Xl, {
           key: 2,
           orientation: "horizontal"
         })) : _("", !0),
-        G(v("ul", {
+        K(f("ul", {
           role: "menu",
-          class: g(["onyx-nav-button__mobile-children", { "onyx-nav-button__mobile-children--open": s.value }])
+          class: g(["onyx-nav-button__mobile-children", { "onyx-nav-button__mobile-children--open": n.value }])
         }, [
           b(o.$slots, "options")
         ], 2), [
-          [et, s.value]
+          [nt, n.value]
         ])
-      ], 64)) : (n(), x(bt, {
+      ], 64)) : (s(), x(Mt, {
         key: 1,
         label: r(l)("navItemOptionsLabel", { label: a.label })
-      }, me({
+      }, fe({
         default: $(() => [
           b(o.$slots, "button")
         ]),
@@ -2355,7 +2484,7 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       ]), 1032, ["label"]))
     ]));
   }
-}), Fl = ["aria-label"], Ln = /* @__PURE__ */ k({
+}), eo = ["aria-label"], to = { class: "onyx-truncation-ellipsis" }, Qn = /* @__PURE__ */ w({
   __name: "OnyxNavButton",
   props: {
     href: {},
@@ -2365,49 +2494,49 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, l = a, s = R(), o = se(he), i = O(!1), u = h(() => !!s.children), c = () => {
-      o != null && o.value && u.value && !i.value ? i.value = !0 : e.href && l("click", e.href);
+    const e = t, l = a, n = G(), o = ue(be), u = T(!1), c = h(() => !!n.children), i = () => {
+      o != null && o.value && c.value && !u.value ? u.value = !0 : e.href && l("click", e.href);
     };
-    return (m, y) => (n(), x(Ul, B({
-      "mobile-children-open": i.value,
-      "onUpdate:mobileChildrenOpen": y[0] || (y[0] = (d) => i.value = d),
+    return (y, d) => (s(), x(Ql, O({
+      "mobile-children-open": u.value,
+      "onUpdate:mobileChildrenOpen": d[0] || (d[0] = (m) => u.value = m),
       class: ["onyx-nav-button", {
         "onyx-nav-button--mobile": r(o),
-        "onyx-nav-button--active": e.active || i.value
+        "onyx-nav-button--active": e.active
       }],
       "is-mobile": r(o) ?? !1
-    }, e), me({
+    }, e), fe({
       button: $(() => [
-        v("button", {
+        f("button", {
           class: "onyx-nav-button__trigger onyx-text",
           role: "menuitem",
           "aria-label": e.label,
           type: "button",
-          onClick: c
+          onClick: i
         }, [
-          b(m.$slots, "default", {}, () => [
-            v("span", null, M(e.label), 1),
-            V(Pe, te(ae(e)), null, 16)
+          b(y.$slots, "default", {}, () => [
+            f("span", to, V(e.label), 1),
+            M(Ue, ee(te(e)), null, 16)
           ]),
-          r(o) && u.value && !i.value ? (n(), x(L, {
+          r(o) && c.value && !u.value ? (s(), x(A, {
             key: 0,
             class: "onyx-nav-button__mobile-chevron",
-            icon: r(Hl)
+            icon: r(jl)
           }, null, 8, ["icon"])) : _("", !0)
-        ], 8, Fl)
+        ], 8, eo)
       ]),
       _: 2
     }, [
-      s.children ? {
+      n.children ? {
         name: "options",
         fn: $(() => [
-          b(m.$slots, "children")
+          b(y.$slots, "children")
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["mobile-children-open", "class", "is-mobile"]));
   }
-}), An = /* @__PURE__ */ k({
+}), es = /* @__PURE__ */ w({
   __name: "OnyxNavItem",
   props: {
     href: {},
@@ -2418,34 +2547,34 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, l = a;
-    return (s, o) => (n(), x(xt, {
+    return (n, o) => (s(), x($t, {
       class: "onyx-nav-item",
       active: e.active,
       href: e.href ?? "javascript:void(0)",
-      onClick: o[0] || (o[0] = (i) => e.href && l("click", e.href))
+      onClick: o[0] || (o[0] = (u) => e.href && l("click", e.href))
     }, {
       default: $(() => [
-        b(s.$slots, "default", {}, () => [
-          v("span", null, M(e.label), 1),
-          V(Pe, te(ae(e)), null, 16)
+        b(n.$slots, "default", {}, () => [
+          f("span", null, V(e.label), 1),
+          M(Ue, ee(te(e)), null, 16)
         ])
       ]),
       _: 3
     }, 8, ["active", "href"]));
   }
-}), Rl = (t) => {
-  const a = O(), e = O(Ve(new Date(t.value).getTime())), l = h(() => e.value === 0);
-  return K(
+}), ao = (t) => {
+  const a = T(), e = T(Oe(new Date(t.value).getTime())), l = h(() => e.value === 0);
+  return Y(
     t,
-    (s) => {
+    (n) => {
       clearInterval(a.value);
-      const o = new Date(s).getTime();
-      e.value = Ve(o), a.value = setInterval(() => {
-        e.value = Ve(o), l.value && clearInterval(a.value);
+      const o = new Date(n).getTime();
+      e.value = Oe(o), a.value = setInterval(() => {
+        e.value = Oe(o), l.value && clearInterval(a.value);
       }, 1e3);
     },
     { immediate: !0 }
-  ), pe(() => clearInterval(a.value)), {
+  ), ye(() => clearInterval(a.value)), {
     /**
      * Time (in milliseconds) that the timer has left.
      */
@@ -2455,26 +2584,26 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
      */
     isEnded: l
   };
-}, Ve = (t) => {
+}, Oe = (t) => {
   const a = t - Date.now();
   return Math.max(a, 0);
-}, gt = (t) => {
+}, Bt = (t) => {
   const a = Math.floor(t / 6e4 / 60), e = Math.floor(t / 6e4 % 60), l = Math.floor(t % 6e4 / 1e3);
   return { hours: a, minutes: e, seconds: l };
-}, ql = (t, a) => {
-  const { hours: e, minutes: l, seconds: s } = gt(t), o = (c) => c.toString().padStart(2, "0");
-  let i = "", u = Se(a.formatToParts(t, "seconds"));
-  return l > 0 && (u = Se(a.formatToParts(t, "minutes"))), e > 0 && (u = Se(a.formatToParts(t, "hours")), i = `${o(e)}:`), `${i}${o(l)}:${o(s)} ${u}`;
-}, Se = (t) => {
+}, lo = (t, a) => {
+  const { hours: e, minutes: l, seconds: n } = Bt(t), o = (i) => i.toString().padStart(2, "0");
+  let u = "", c = Le(a.formatToParts(t, "seconds"));
+  return l > 0 && (c = Le(a.formatToParts(t, "minutes"))), e > 0 && (c = Le(a.formatToParts(t, "hours")), u = `${o(e)}:`), `${u}${o(l)}:${o(n)} ${c}`;
+}, Le = (t) => {
   var a;
   return ((a = t.at(-1)) == null ? void 0 : a.value.replace(".", "").trim()) ?? "";
-}, Zl = (t) => {
-  const { hours: a, minutes: e, seconds: l } = gt(t);
+}, oo = (t) => {
+  const { hours: a, minutes: e, seconds: l } = Bt(t);
   return `PT${a}H${e}M${l}S`;
-}, Kl = ["aria-label"], Gl = {
+}, no = ["aria-label"], so = {
   key: 0,
   class: "onyx-timer__label"
-}, jl = ["datetime"], Hn = /* @__PURE__ */ k({
+}, ro = ["datetime"], ts = /* @__PURE__ */ w({
   __name: "OnyxTimer",
   props: {
     endTime: {},
@@ -2483,135 +2612,155 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["timerEnded"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { locale: s } = P(), { timeLeft: o, isEnded: i } = Rl(h(() => e.endTime)), u = h(
-      () => new Intl.RelativeTimeFormat(s.value, { numeric: "always", style: "short" })
-    ), c = h(() => ql(o.value, u.value));
-    return X(() => i.value && l("timerEnded")), (m, y) => (n(), p("div", {
+    const e = t, l = a, { locale: n } = N(), { timeLeft: o, isEnded: u } = ao(h(() => e.endTime)), c = h(
+      () => new Intl.RelativeTimeFormat(n.value, { numeric: "always", style: "short" })
+    ), i = h(() => lo(o.value, c.value));
+    return Q(() => u.value && l("timerEnded")), (y, d) => (s(), p("div", {
       class: "onyx-timer onyx-text onyx-truncation-ellipsis",
       role: "timer",
       "aria-label": e.hideLabel ? e.label : void 0
     }, [
-      e.hideLabel ? _("", !0) : (n(), p("span", Gl, M(e.label), 1)),
-      v("time", {
-        datetime: r(Zl)(r(o)),
+      e.hideLabel ? _("", !0) : (s(), p("span", so, V(e.label), 1)),
+      f("time", {
+        datetime: r(oo)(r(o)),
         class: "onyx-timer__time"
-      }, M(c.value), 9, jl)
-    ], 8, Kl));
+      }, V(i.value), 9, ro)
+    ], 8, no));
   }
-}), Yl = /* @__PURE__ */ k({
+}), io = { class: "onyx-user-menu__footer onyx-text--small" }, uo = /* @__PURE__ */ w({
   __name: "UserMenuLayout",
-  props: {
+  props: /* @__PURE__ */ he({
     isMobile: { type: Boolean }
-  },
+  }, {
+    flyoutOpen: { type: Boolean, default: !1 },
+    flyoutOpenModifiers: {}
+  }),
+  emits: ["update:flyoutOpen"],
   setup(t) {
-    const a = t, e = R(), { t: l } = P();
-    return (s, o) => (n(), p("div", null, [
-      a.isMobile ? (n(), p(z, { key: 0 }, [
-        b(s.$slots, "header"),
-        b(s.$slots, "options"),
-        b(s.$slots, "footer")
-      ], 64)) : (n(), x(bt, {
+    const a = t, e = ve(t, "flyoutOpen"), l = G(), { t: n } = N();
+    return (o, u) => (s(), p("div", null, [
+      a.isMobile ? (s(), p(R, { key: 0 }, [
+        b(o.$slots, "header"),
+        b(o.$slots, "options"),
+        l.footer ? (s(), x(Fe, {
+          key: 0,
+          class: "onyx-user-menu__mobile-footer",
+          disabled: ""
+        }, {
+          default: $(() => [
+            b(o.$slots, "footer")
+          ]),
+          _: 3
+        })) : _("", !0)
+      ], 64)) : (s(), x(Mt, {
         key: 1,
-        class: "onyx-user-menu__flyout",
-        label: r(l)("navigation.userMenuLabel")
-      }, me({
+        label: r(n)("navigation.userMenuLabel"),
+        open: e.value
+      }, fe({
         header: $(() => [
-          b(s.$slots, "header")
+          b(o.$slots, "header")
         ]),
         options: $(() => [
-          b(s.$slots, "options")
+          b(o.$slots, "options")
         ]),
         default: $(() => [
-          b(s.$slots, "button")
+          b(o.$slots, "button")
         ]),
         _: 2
       }, [
-        e.footer ? {
+        l.footer ? {
           name: "footer",
           fn: $(() => [
-            b(s.$slots, "footer")
+            f("div", io, [
+              b(o.$slots, "footer")
+            ])
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["label"]))
+      ]), 1032, ["label", "open"]))
     ]));
   }
-}), Wl = {
+}), co = {
   class: "onyx-user-menu__trigger onyx-text",
   type: "button"
-}, Xl = { class: "onyx-truncation-ellipsis" }, Jl = { class: "onyx-user-menu__header" }, Ql = { class: "onyx-truncation-ellipsis" }, eo = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, to = {
+}, po = { class: "onyx-truncation-ellipsis" }, mo = { class: "onyx-user-menu__header" }, yo = { class: "onyx-truncation-ellipsis" }, ho = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, vo = {
   key: 0,
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
-}, ao = { class: "onyx-user-menu__footer onyx-text--small" }, Pn = /* @__PURE__ */ k({
+}, fo = { class: "onyx-user-menu__options" }, as = /* @__PURE__ */ w({
   __name: "OnyxUserMenu",
-  props: {
+  props: /* @__PURE__ */ he({
     username: {},
     avatar: {},
     description: {}
-  },
+  }, {
+    flyoutOpen: { type: Boolean, default: !1 },
+    flyoutOpenModifiers: {}
+  }),
+  emits: ["update:flyoutOpen"],
   setup(t) {
-    const a = t, e = R(), l = h(() => ({ src: a.avatar, label: a.username })), s = se(
-      he,
+    const a = t, e = ve(t, "flyoutOpen"), l = G(), n = h(() => ({ src: a.avatar, label: a.username })), o = ue(
+      be,
       h(() => !1)
     );
-    return (o, i) => (n(), x(Yl, {
-      class: g(["onyx-user-menu", { "onyx-user-menu--mobile": r(s) }]),
-      "is-mobile": r(s) ?? !1
-    }, me({
+    return (u, c) => (s(), x(uo, {
+      class: g(["onyx-user-menu", { "onyx-user-menu--mobile": r(o) }]),
+      "is-mobile": r(o),
+      "flyout-open": e.value
+    }, fe({
       button: $(() => [
-        v("button", Wl, [
-          V(Ze, B(l.value, { size: "24px" }), null, 16),
-          v("span", Xl, M(a.username), 1)
+        f("button", co, [
+          M(Ye, O(n.value, { size: "24px" }), null, 16),
+          f("span", po, V(a.username), 1)
         ])
       ]),
       header: $(() => [
-        v("div", Jl, [
-          V(Ze, te(ae(l.value)), null, 16),
-          v("div", Ql, [
-            v("div", eo, M(a.username), 1),
-            a.description ? (n(), p("div", to, M(a.description), 1)) : _("", !0)
+        f("div", mo, [
+          M(Ye, ee(te(n.value)), null, 16),
+          f("div", yo, [
+            f("div", ho, V(a.username), 1),
+            a.description ? (s(), p("div", vo, V(a.description), 1)) : _("", !0)
           ])
         ])
       ]),
       options: $(() => [
-        b(o.$slots, "default")
+        f("div", fo, [
+          b(u.$slots, "default")
+        ])
       ]),
       _: 2
     }, [
-      e.footer ? {
+      l.footer ? {
         name: "footer",
         fn: $(() => [
-          v("div", ao, [
-            b(o.$slots, "footer")
-          ])
+          b(u.$slots, "footer")
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["class", "is-mobile"]));
+    ]), 1032, ["class", "is-mobile", "flyout-open"]));
   }
-}), lo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m20.207 9.707-1.414-1.414L11.086 16l7.707 7.707 1.414-1.414L13.914 16z"/></svg>', oo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M2 15h28v2H2zm0-7h28v2H2zm0 14h28v2H2z"/></svg>', no = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="16" cy="5" r="3"/><circle cx="16" cy="16" r="3"/><circle cx="16" cy="27" r="3"/></svg>', so = (t, a) => {
-  const e = "content-box", l = O(0), s = O(0), o = (i) => {
-    const u = i[0].contentBoxSize;
-    l.value = u.reduce((c, { inlineSize: m }) => c + m, 0), s.value = u.reduce((c, { blockSize: m }) => c + m, 0);
+}), _o = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m20.207 9.707-1.414-1.414L11.086 16l7.707 7.707 1.414-1.414L13.914 16z"/></svg>', xo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M2 15h28v2H2zm0-7h28v2H2zm0 14h28v2H2z"/></svg>', bo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="16" cy="5" r="3"/><circle cx="16" cy="16" r="3"/><circle cx="16" cy="27" r="3"/></svg>', go = (t, a) => {
+  const e = "content-box", l = T(0), n = T(0), o = (u) => {
+    const c = u[0].contentBoxSize;
+    l.value = c.reduce((i, { inlineSize: y }) => i + y, 0), n.value = c.reduce((i, { blockSize: y }) => i + y, 0);
   };
-  return Ae(() => {
-    const i = new ResizeObserver(o);
-    K(
+  return Ne(() => {
+    const u = new ResizeObserver(o);
+    Y(
       t,
-      (u, c) => {
-        c && (i == null || i.unobserve(c)), u && (i == null || i.observe(u, { box: e }));
+      (c, i) => {
+        i && (u == null || u.unobserve(i)), c && (u == null || u.observe(c, { box: e }));
       },
       { immediate: !0 }
-    ), pe(() => i.disconnect());
-  }), { width: l, height: s };
-}, ro = {
+    ), ye(() => u.disconnect());
+  }), { width: l, height: n };
+}, ko = {
   "2xs": 320,
   xs: 576,
   sm: 768,
   md: 992,
   lg: 1440,
   xl: 1920
-}, Dn = [
+}, ls = [
   "primary",
   "secondary",
   "neutral",
@@ -2619,22 +2768,19 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   "warning",
   "success",
   "info"
-], zn = ["small", "default", "large"], Nn = ["ellipsis", "multiline"], Un = ["horizontal", "vertical"], io = { class: "onyx-nav-bar__content" }, co = {
+], os = ["small", "default", "large"], ns = ["ellipsis", "multiline"], ss = ["horizontal", "vertical"], wo = { class: "onyx-nav-bar__content" }, Co = {
   key: 0,
-  class: "onyx-nav-bar__mobile-page"
-}, uo = { class: "onyx-nav-bar__nav--mobile" }, po = { role: "menubar" }, mo = {
-  key: 1,
-  class: "onyx-nav-bar__nav"
-}, yo = { role: "menubar" }, ho = {
+  class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
+}, $o = { role: "menubar" }, Mo = { role: "menubar" }, Bo = {
   key: 0,
   class: "onyx-nav-bar__mobile-context"
-}, vo = {
+}, Vo = {
   key: 0,
   class: "onyx-nav-bar__mobile-global-context"
-}, fo = { class: "onyx-nav-bar__mobile-context-content" }, _o = {
+}, So = { class: "onyx-nav-bar__mobile-context-content" }, Oo = {
   key: 1,
   class: "onyx-nav-bar__context"
-}, Fn = /* @__PURE__ */ k({
+}, rs = /* @__PURE__ */ w({
   __name: "OnyxNavBar",
   props: {
     logoUrl: {},
@@ -2645,11 +2791,13 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["appAreaClick", "backButtonClick"],
   setup(t, { expose: a, emit: e }) {
-    const l = t, s = e, o = R(), i = O(), { width: u } = so(i), { t: c } = P(), m = O(!1), y = O(!1), d = h(() => {
-      const f = typeof l.mobileBreakpoint == "number" ? l.mobileBreakpoint : ro[l.mobileBreakpoint];
-      return u.value !== 0 && u.value < f;
+    const l = t, n = e, o = G(), u = T(), { width: c } = go(u), { t: i } = N(), {
+      elements: { nav: y }
+    } = dl({ navigationName: Te(() => l.appName) }), d = T(!1), m = T(!1), v = h(() => {
+      const k = typeof l.mobileBreakpoint == "number" ? l.mobileBreakpoint : ko[l.mobileBreakpoint];
+      return c.value !== 0 && c.value < k;
     });
-    return Ot(he, d), a({
+    return Nt(be, v), a({
       /**
        * Closes the mobile burger and context menu.
        * Useful if you want to e.g. close them when a nav item is clicked.
@@ -2664,133 +2812,128 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
        * ```
        */
       closeMobileMenus: () => {
-        m.value = !1, y.value = !1;
+        d.value = !1, m.value = !1;
       }
-    }), (f, C) => (n(), p("header", {
+    }), (k, S) => (s(), p("header", {
       ref_key: "navBarRef",
-      ref: i,
-      class: g(["onyx-nav-bar", { "onyx-nav-bar--mobile": d.value }])
+      ref: u,
+      class: g(["onyx-nav-bar", { "onyx-nav-bar--mobile": v.value }])
     }, [
-      v("div", io, [
-        d.value && !m.value && o.mobileActivePage ? (n(), p("span", co, [
-          b(f.$slots, "mobileActivePage")
-        ])) : l.appName || l.logoUrl || o.appArea ? (n(), x(kl, {
+      f("div", wo, [
+        v.value && o.mobileActivePage && !d.value && !m.value ? (s(), p("span", Co, [
+          b(k.$slots, "mobileActivePage")
+        ])) : l.appName || l.logoUrl || o.appArea ? (s(), x(Al, {
           key: 1,
           class: "onyx-nav-bar__app",
           "app-name": l.appName,
           "logo-url": l.logoUrl,
           label: l.appAreaLabel,
-          onClick: C[0] || (C[0] = (T) => {
-            s("appAreaClick"), m.value = !1;
+          onClick: S[0] || (S[0] = (B) => {
+            n("appAreaClick"), d.value = !1;
           })
         }, {
           default: $(() => [
-            b(f.$slots, "appArea")
+            b(k.$slots, "appArea")
           ]),
           _: 3
         }, 8, ["app-name", "logo-url", "label"])) : _("", !0),
-        l.withBackButton ? (n(), x(Na, {
+        l.withBackButton ? (s(), x(Wa, {
           key: 2,
           class: "onyx-nav-bar__back",
-          label: r(c)("navigation.goBack"),
-          icon: r(lo),
+          label: r(i)("navigation.goBack"),
+          icon: r(_o),
           color: "neutral",
-          onClick: C[1] || (C[1] = (T) => s("backButtonClick"))
+          onClick: S[1] || (S[1] = (B) => n("backButtonClick"))
         }, null, 8, ["label", "icon"])) : _("", !0),
-        o.default ? (n(), p(z, { key: 3 }, [
-          d.value ? (n(), x(Ge, {
+        o.default ? (s(), p(R, { key: 3 }, [
+          v.value ? (s(), x(Qe, {
             key: 0,
-            open: m.value,
+            open: d.value,
             "onUpdate:open": [
-              C[2] || (C[2] = (T) => m.value = T),
-              C[3] || (C[3] = (T) => y.value = !1)
+              S[2] || (S[2] = (B) => d.value = B),
+              S[3] || (S[3] = (B) => m.value = !1)
             ],
             class: "onyx-nav-bar__burger",
-            icon: r(oo),
-            label: r(c)("navigation.toggleBurgerMenu")
+            icon: r(xo),
+            label: r(i)("navigation.toggleBurgerMenu"),
+            headline: r(i)("navigation.navigationHeadline")
           }, {
             default: $(() => [
-              V(ne, {
-                is: "h2",
-                class: "onyx-nav-bar__mobile-headline"
-              }, {
-                default: $(() => [
-                  F(M(r(c)("navigation.navigationHeadline")), 1)
-                ]),
-                _: 1
-              }),
-              v("nav", uo, [
-                v("ul", po, [
-                  b(f.$slots, "default")
+              f("nav", O({ class: "onyx-nav-bar__nav--mobile" }, r(y)), [
+                f("ul", $o, [
+                  b(k.$slots, "default")
                 ])
-              ])
+              ], 16)
             ]),
             _: 3
-          }, 8, ["open", "icon", "label"])) : (n(), p("nav", mo, [
-            v("ul", yo, [
-              b(f.$slots, "default")
+          }, 8, ["open", "icon", "label", "headline"])) : (s(), p("nav", O({
+            key: 1,
+            class: "onyx-nav-bar__nav"
+          }, r(y)), [
+            f("ul", Mo, [
+              b(k.$slots, "default")
             ])
-          ]))
+          ], 16))
         ], 64)) : _("", !0),
-        o.contextArea || o.globalContextArea ? (n(), p(z, { key: 4 }, [
-          d.value ? (n(), p("div", ho, [
-            o.globalContextArea ? (n(), p("div", vo, [
-              b(f.$slots, "globalContextArea")
+        o.contextArea || o.globalContextArea ? (s(), p(R, { key: 4 }, [
+          v.value ? (s(), p("div", Bo, [
+            o.globalContextArea ? (s(), p("div", Vo, [
+              b(k.$slots, "globalContextArea")
             ])) : _("", !0),
-            o.contextArea ? (n(), x(Ge, {
+            o.contextArea ? (s(), x(Qe, {
               key: 1,
-              open: y.value,
+              open: m.value,
               "onUpdate:open": [
-                C[4] || (C[4] = (T) => y.value = T),
-                C[5] || (C[5] = (T) => m.value = !1)
+                S[4] || (S[4] = (B) => m.value = B),
+                S[5] || (S[5] = (B) => d.value = !1)
               ],
-              icon: r(no),
-              label: r(c)("navigation.toggleContextMenu")
+              icon: r(bo),
+              label: r(i)("navigation.toggleContextMenu")
             }, {
               default: $(() => [
-                v("div", fo, [
-                  b(f.$slots, "contextArea")
+                f("div", So, [
+                  b(k.$slots, "contextArea")
                 ])
               ]),
               _: 3
             }, 8, ["open", "icon", "label"])) : _("", !0)
-          ])) : (n(), p("div", _o, [
-            o.globalContextArea ? b(f.$slots, "globalContextArea", { key: 0 }) : _("", !0),
-            o.contextArea ? b(f.$slots, "contextArea", { key: 1 }) : _("", !0)
+          ])) : (s(), p("div", Oo, [
+            o.globalContextArea ? b(k.$slots, "globalContextArea", { key: 0 }) : _("", !0),
+            o.contextArea ? b(k.$slots, "contextArea", { key: 1 }) : _("", !0)
           ]))
         ], 64)) : _("", !0)
       ])
     ], 2));
   }
-}), xo = {
+}), Lo = {
   key: 0,
   class: "onyx-page__sidebar"
-}, bo = { class: "onyx-page__main" }, go = {
+}, To = { class: "onyx-page__main" }, Eo = {
   key: 1,
   class: "onyx-page__footer"
-}, Rn = /* @__PURE__ */ k({
+}, is = /* @__PURE__ */ w({
   __name: "OnyxPageLayout",
   props: {
     footerAsideSidebar: { type: Boolean },
     hideSidebar: { type: Boolean }
   },
   setup(t) {
-    const a = t, e = R(), l = h(() => a.footerAsideSidebar ? "onyx-page--footer-partial" : "onyx-page--footer-full");
-    return (s, o) => (n(), p("div", {
+    const a = t, e = G(), l = h(() => a.footerAsideSidebar ? "onyx-page--footer-partial" : "onyx-page--footer-full");
+    return (n, o) => (s(), p("div", {
       class: g(["onyx-page", l.value])
     }, [
-      e.sidebar && !a.hideSidebar ? (n(), p("aside", xo, [
-        b(s.$slots, "sidebar")
+      e.sidebar && !a.hideSidebar ? (s(), p("aside", Lo, [
+        b(n.$slots, "sidebar")
       ])) : _("", !0),
-      v("main", bo, [
-        b(s.$slots, "default")
+      f("main", To, [
+        b(n.$slots, "default")
       ]),
-      e.footer ? (n(), p("footer", go, [
-        b(s.$slots, "footer")
+      e.footer ? (s(), p("footer", Eo, [
+        b(n.$slots, "footer")
       ])) : _("", !0)
     ], 2));
   }
-}), ko = ["title"], wo = ["required", "name", "value", "checked", "disabled", "autofocus"], je = /* @__PURE__ */ k({
+}), Io = ["title"], Ao = ["required", "name", "value", "checked", "disabled", "autofocus"], et = /* @__PURE__ */ w({
   __name: "OnyxRadioButton",
   props: {
     density: {},
@@ -2808,26 +2951,26 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["change", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { vCustomValidity: s } = le({ props: e, emit: l }), { densityClass: o } = H(e), i = (u) => {
-      const c = u.target.checked;
-      l("change", c);
+    const e = t, l = a, { vCustomValidity: n, title: o } = ae({ props: e, emit: l }), { densityClass: u } = H(e), c = (i) => {
+      const y = i.target.checked;
+      l("change", y);
     };
-    return (u, c) => e.skeleton ? (n(), p("div", {
+    return (i, y) => e.skeleton ? (s(), p("div", {
       key: 0,
-      class: g(["onyx-radio-button-skeleton", r(o)])
+      class: g(["onyx-radio-button-skeleton", r(u)])
     }, [
-      V(U, { class: "onyx-radio-button-skeleton__input" }),
-      V(U, { class: "onyx-radio-button-skeleton__label" })
-    ], 2)) : (n(), p("label", {
+      M(U, { class: "onyx-radio-button-skeleton__input" }),
+      M(U, { class: "onyx-radio-button-skeleton__label" })
+    ], 2)) : (s(), p("label", {
       key: 1,
-      class: g(["onyx-radio-button", r(o)]),
-      title: r(ot)(e.customError)
+      class: g(["onyx-radio-button", r(u)]),
+      title: r(o)
     }, [
-      e.loading ? (n(), x(J, {
+      e.loading ? (s(), x(X, {
         key: 0,
         class: "onyx-radio-button__loading",
         type: "circle"
-      })) : G((n(), p("input", {
+      })) : K((s(), p("input", {
         key: 1,
         class: "onyx-radio-button__selector",
         type: "radio",
@@ -2837,27 +2980,28 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
         checked: e.checked,
         disabled: e.disabled,
         autofocus: e.autofocus,
-        onChange: i
-      }, null, 40, wo)), [
-        [r(s)]
+        onChange: c
+      }, null, 40, Ao)), [
+        [r(n)]
       ]),
-      v("span", {
+      f("span", {
         class: g(["onyx-radio-button__label", [`onyx-truncation-${e.truncation}`]])
-      }, M(e.label), 3)
-    ], 10, ko));
+      }, V(e.label), 3)
+    ], 10, Io));
   }
-}), Co = ["disabled"], $o = {
+}), Ho = ["disabled"], Po = {
   key: 0,
   class: "onyx-radio-button-group__headline"
-}, qn = /* @__PURE__ */ k({
+}, us = /* @__PURE__ */ w({
   __name: "OnyxRadioGroup",
   props: {
     density: {},
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
     customError: {},
+    truncation: { default: "ellipsis" },
     options: {},
-    name: { default: () => ee("radio-button-group-name") },
+    name: { default: () => W("radio-button-group-name") },
     modelValue: {},
     headline: { default: "" },
     disabled: { type: Boolean, default: !1 },
@@ -2866,73 +3010,77 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: l } = H(e), { requiredMarkerClass: s, requiredTypeClass: o } = ye(e), i = a, u = (c, m) => {
-      c && i("update:modelValue", m);
+    const e = t, { densityClass: l } = H(e), { requiredMarkerClass: n, requiredTypeClass: o } = _e(e), u = a, c = (i, y) => {
+      i && u("update:modelValue", y);
     };
-    return (c, m) => (n(), p("fieldset", {
+    return (i, y) => (s(), p("fieldset", {
       class: g(["onyx-radio-button-group", r(l), r(o)]),
       disabled: e.disabled,
       role: "radiogroup"
     }, [
-      e.headline ? (n(), p("legend", $o, [
-        V(ne, {
+      e.headline ? (s(), p("legend", Po, [
+        M(ie, {
           is: "h3",
-          class: g(r(s))
+          class: g(r(n))
         }, {
           default: $(() => [
-            F(M(e.headline), 1)
+            Z(V(e.headline), 1)
           ]),
           _: 1
         }, 8, ["class"])
       ])) : _("", !0),
-      v("div", {
+      f("div", {
         class: g(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        e.skeleton === void 0 ? (n(!0), p(z, { key: 0 }, W(e.options, (y, d) => (n(), x(je, B({
-          key: y.value.toString(),
+        e.skeleton === void 0 ? (s(!0), p(R, { key: 0 }, J(e.options, (d, m) => (s(), x(et, O({
+          key: d.value.toString(),
           ref_for: !0
-        }, y, {
+        }, d, {
           name: e.name,
           "custom-error": e.customError,
-          checked: y.value === e.modelValue,
+          checked: d.value === e.modelValue,
           required: e.required,
-          onValidityChange: (f) => d === 0 && i("validityChange", f),
-          onChange: (f) => u(f, y.value)
-        }), null, 16, ["name", "custom-error", "checked", "required", "onValidityChange", "onChange"]))), 128)) : (n(!0), p(z, { key: 1 }, W(e.skeleton, (y) => (n(), x(je, {
-          id: `skeleton-${y}`,
-          key: y,
-          value: `skeleton-${y}`,
+          truncation: d.truncation ?? e.truncation,
+          onValidityChange: (v) => m === 0 && u("validityChange", v),
+          onChange: (v) => c(v, d.value)
+        }), null, 16, ["name", "custom-error", "checked", "required", "truncation", "onValidityChange", "onChange"]))), 128)) : (s(!0), p(R, { key: 1 }, J(e.skeleton, (d) => (s(), x(et, {
+          id: `skeleton-${d}`,
+          key: d,
+          value: `skeleton-${d}`,
           label: "Skeleton ${i}",
           name: e.name,
           skeleton: ""
         }, null, 8, ["id", "value", "name"]))), 128))
       ], 2)
-    ], 10, Co));
+    ], 10, Ho));
   }
-}), Mo = (t) => {
-  const e = O(!1), l = (o) => {
-    const i = o.target;
-    if (!(i instanceof Element)) return;
-    const u = r(t.offset) ?? 0;
-    e.value = Math.abs(i.scrollTop) + i.clientHeight >= i.scrollHeight - u - 1;
+}), Do = (t) => {
+  const e = T(!1), l = (o) => {
+    const u = o.target;
+    if (!(u instanceof Element)) return;
+    const c = r(t.offset) ?? 0;
+    e.value = Math.abs(u.scrollTop) + u.clientHeight >= u.scrollHeight - c - 1;
   };
   return { vScrollEnd: {
     mounted: (o) => {
-      X(() => {
-        var u;
-        (((u = t.enabled) == null ? void 0 : u.value) ?? !0) && !t.loading.value ? o.addEventListener("scroll", l) : o.removeEventListener("scroll", l);
+      Q(() => {
+        var c;
+        (((c = t.enabled) == null ? void 0 : c.value) ?? !0) && !t.loading.value ? o.addEventListener("scroll", l) : o.removeEventListener("scroll", l);
       });
     }
   }, isScrollEnd: e };
-}, Ye = (t, a, e) => {
-  const l = h(() => t.value === void 0), s = O(l.value ? a : t.value);
+}, tt = (t, a, e) => {
+  const l = h(() => t.value === void 0), n = T(l.value ? a : t.value);
   return h({
     set: (o) => {
-      s.value = o, e(o);
+      n.value = o, e(o);
     },
-    get: () => l.value ? s.value : t.value
+    get: () => l.value ? n.value : t.value
   });
-}, Vo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>', So = { class: "onyx-select-input__wrapper" }, Bo = ["readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], Oo = ["aria-label", "disabled"], Eo = /* @__PURE__ */ k({
+}, No = (t, a) => {
+  const e = at(t.toLowerCase()), l = at(a.toLowerCase());
+  return e.includes(l);
+}, at = (t) => t.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), zo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>', Ro = { class: "onyx-select-input__wrapper" }, Uo = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], Fo = ["aria-label", "disabled"], qo = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "OnyxSelectInput",
   props: {
@@ -2940,15 +3088,16 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     required: { type: Boolean },
     requiredMarker: {},
     customError: {},
-    modelValue: {},
-    textMode: {},
     autofocus: { type: Boolean },
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean, default: !1 },
     message: {},
     messageTooltip: {},
     errorMessages: {},
+    modelValue: {},
+    textMode: {},
     disabled: { type: Boolean },
     skeleton: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
@@ -2958,66 +3107,67 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click", "validityChange"],
   setup(t, { expose: a, emit: e }) {
-    const { rootAttrs: l, restAttrs: s } = _t(), o = t, i = e, { t: u } = P(), { vCustomValidity: c, errorMessages: m } = le({ props: o, emit: i }), y = h(() => o.modelValue ? o.modelValue.length : 0), d = h(() => {
-      var A;
-      const I = (A = o.modelValue) == null ? void 0 : A.length;
-      if (!o.modelValue || !I) return "";
-      if (I === 1) return o.modelValue[0].label;
+    const { rootAttrs: l, restAttrs: n } = Ct(), o = t, u = e, { t: c } = N(), { vCustomValidity: i, errorMessages: y } = ae({ props: o, emit: u }), d = h(() => o.modelValue ? o.modelValue.length : 0), m = h(() => {
+      var z;
+      const E = (z = o.modelValue) == null ? void 0 : z.length;
+      if (!o.modelValue || !E) return "";
+      if (E === 1) return o.modelValue[0];
       switch (o.textMode) {
         case "preview":
-          return o.modelValue.map(({ label: j }) => j).join(", ");
+          return o.modelValue.join(", ");
         case "summary":
         default:
-          return u.value("selections.currentSelection", { n: I });
+          return c.value("selections.currentSelection", { n: E });
       }
-    }), f = O(!1), { densityClass: C } = H(o), T = O();
+    }), v = T(!1), { densityClass: k } = H(o), S = T();
     a({ focus: () => {
-      var I;
-      return (I = T.value) == null ? void 0 : I.focus();
-    } }), K(
+      var E;
+      return (E = S.value) == null ? void 0 : E.focus();
+    } }), Y(
       () => o.showFocus,
-      (I, A) => {
-        f.value || A && I === !1 && (f.value = !0);
+      (E, z) => {
+        v.value || z && E === !1 && (v.value = !0);
       }
     );
-    const N = pt.concat(mt), Q = (I) => {
-      N.includes(I.key) || I.preventDefault();
+    const B = xt.concat(bt), P = (E) => {
+      B.includes(E.key) || E.preventDefault();
     };
-    return (I, A) => o.skeleton ? (n(), p("div", B({
+    return (E, z) => o.skeleton ? (s(), p("div", O({
       key: 0,
-      class: ["onyx-select-input-skeleton", r(C)]
+      class: ["onyx-select-input-skeleton", r(k)]
     }, r(l)), [
-      o.hideLabel ? _("", !0) : (n(), x(U, {
+      o.hideLabel ? _("", !0) : (s(), x(U, {
         key: 0,
         class: "onyx-select-input-skeleton__label"
       })),
-      V(U, { class: "onyx-select-input-skeleton__input" })
-    ], 16)) : (n(), p("div", B({
+      M(U, { class: "onyx-select-input-skeleton__input" })
+    ], 16)) : (s(), p("div", O({
       key: 1,
       class: [
         "onyx-select-input",
-        r(C),
+        r(k),
         o.readonly ? "onyx-select-input--readonly" : "onyx-select-input--editable"
       ]
     }, r(l)), [
-      V(De, B(o, { "error-messages": r(m) }), {
-        default: $(() => [
-          v("div", So, [
-            o.loading ? (n(), x(J, {
+      M(xe, O(o, { "error-messages": r(y) }), {
+        default: $(({ id: ne }) => [
+          f("div", Ro, [
+            o.loading ? (s(), x(X, {
               key: 0,
               class: "onyx-select-input__loading",
               type: "circle"
             })) : _("", !0),
-            G(v("input", B({
+            K(f("input", O({
+              id: ne,
               ref_key: "input",
-              ref: T,
+              ref: S,
               class: {
                 "onyx-select-input__native": !0,
                 "onyx-select-input__native--show-focus": o.showFocus,
                 "onyx-truncation-ellipsis": !0,
-                "onyx-select-input__native--force-invalid": r(m) && f.value
+                "onyx-select-input__native--force-invalid": r(y) && v.value
               }
-            }, r(s), {
+            }, r(n), {
               type: "text",
               readonly: o.readonly,
               placeholder: o.placeholder,
@@ -3025,48 +3175,49 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
               disabled: o.disabled || o.loading,
               "aria-label": o.hideLabel ? o.label : void 0,
               title: o.hideLabel ? o.label : void 0,
-              value: d.value,
+              value: m.value,
               autofocus: o.autofocus,
-              onClick: A[0] || (A[0] = (j) => i("click")),
-              onKeydown: Q
-            }), null, 16, Bo), [
-              [r(c)]
+              autocomplete: "off",
+              onClick: z[0] || (z[0] = (se) => u("click")),
+              onKeydown: P
+            }), null, 16, Uo), [
+              [r(i)]
             ]),
-            o.textMode === "preview" && y.value > 0 ? (n(), x(ht, {
+            o.textMode === "preview" && d.value > 0 ? (s(), x(kt, {
               key: 1,
-              text: d.value,
+              text: m.value,
               position: "bottom"
             }, {
               default: $(() => [
-                V(Ut, {
+                M(Wt, {
                   class: "onyx-select-input__badge",
                   color: "neutral"
                 }, {
                   default: $(() => [
-                    F(M(y.value), 1)
+                    Z(V(d.value), 1)
                   ]),
                   _: 1
                 })
               ]),
               _: 1
             }, 8, ["text"])) : _("", !0),
-            v("button", {
+            f("button", {
               class: "onyx-select-input__button",
               type: "button",
-              "aria-label": r(u)("select.toggleDropDown"),
+              "aria-label": r(c)("select.toggleDropDown"),
               tabindex: "-1",
               disabled: o.readonly || o.disabled || o.loading,
-              onClick: A[1] || (A[1] = (j) => i("click"))
+              onClick: z[1] || (z[1] = (se) => u("click"))
             }, [
-              V(L, { icon: r(Vo) }, null, 8, ["icon"])
-            ], 8, Oo)
+              M(A, { icon: r(zo) }, null, 8, ["icon"])
+            ], 8, Fo)
           ])
         ]),
         _: 1
       }, 16, ["error-messages"])
     ], 16));
   }
-}), To = ["checked", "aria-labelledby", "disabled", "indeterminate"], We = /* @__PURE__ */ k({
+}), Zo = ["checked", "aria-labelledby", "disabled", "indeterminate"], lt = /* @__PURE__ */ w({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, default: !1 },
@@ -3078,13 +3229,13 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   setup(t) {
     const a = t;
-    return (e, l) => (n(), x(ft, B({ class: "onyx-select-option" }, a, {
+    return (e, l) => (s(), x(Fe, O({ class: "onyx-select-option" }, a, {
       checked: !!e.$attrs["aria-checked"],
       selected: !!e.$attrs["aria-selected"],
       disabled: !!e.$attrs["aria-disabled"]
     }), {
       default: $(() => [
-        a.multiple ? (n(), p("input", {
+        a.multiple ? (s(), p("input", {
           key: 0,
           checked: !!e.$attrs["aria-checked"],
           "aria-labelledby": e.$attrs.id,
@@ -3094,12 +3245,12 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
           tabindex: "-1",
           class: "onyx-select-option__checkbox",
           type: "checkbox"
-        }, null, 8, To)) : _("", !0),
-        a.icon ? (n(), x(L, {
+        }, null, 8, Zo)) : _("", !0),
+        a.icon ? (s(), x(A, {
           key: 1,
           icon: a.icon
         }, null, 8, ["icon"])) : _("", !0),
-        v("span", {
+        f("span", {
           class: g([`onyx-truncation-${a.truncation}`])
         }, [
           b(e.$slots, "default")
@@ -3108,27 +3259,27 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
       _: 3
     }, 16, ["checked", "selected", "disabled"]));
   }
-}), Io = ["inert", "aria-busy"], Lo = {
+}), Go = ["inert"], Ko = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
-}, Ao = {
+}, jo = {
   key: 0,
   role: "group",
   class: "onyx-select__group"
-}, Ho = {
+}, Yo = {
   role: "option",
   "aria-selected": "false"
-}, Po = {
+}, Wo = {
   key: 0,
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
-}, Do = {
+}, Xo = {
   key: 1,
   class: "onyx-select__slot"
-}, zo = {
+}, Jo = {
   key: 2,
   class: "onyx-select__slot"
-}, Zn = /* @__PURE__ */ k({
+}, cs = /* @__PURE__ */ w({
   __name: "OnyxSelect",
   props: {
     density: {},
@@ -3137,23 +3288,27 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     withCheckAll: { type: [Boolean, Object] },
     withSearch: { type: Boolean },
     searchTerm: { default: void 0 },
+    manualSearch: { type: Boolean },
     required: { type: Boolean },
     requiredMarker: {},
     customError: {},
-    textMode: {},
     autofocus: { type: Boolean },
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean },
     message: {},
     messageTooltip: {},
     errorMessages: {},
+    textMode: {},
     disabled: { type: Boolean },
     skeleton: { type: Boolean },
     readonly: { type: Boolean },
     loading: { type: Boolean, default: !1 },
     placeholder: {},
     showFocus: { type: Boolean },
+    truncation: { default: "ellipsis" },
+    valueLabel: { default: void 0 },
     open: { type: Boolean, default: void 0 },
     listLabel: {},
     options: {},
@@ -3161,213 +3316,213 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "update:searchTerm", "update:open", "lazyLoad", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { densityClass: s } = H(e), o = R(), { t: i } = P(), u = Ye(
-      qe(() => e.searchTerm),
+    const e = t, l = a, { densityClass: n } = H(e), o = G(), { t: u } = N(), c = tt(
+      Te(() => e.searchTerm),
       "",
-      (w) => l("update:searchTerm", w)
-    ), c = Ye(
-      qe(() => e.open),
+      (C) => l("update:searchTerm", C)
+    ), i = tt(
+      Te(() => e.open),
       !1,
-      (w) => l("update:open", w)
-    ), m = O(), y = O(), d = h(() => e.modelValue ? e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue] : []), f = O(), C = O();
-    K(
-      d,
+      (C) => l("update:open", C)
+    ), y = T(), d = T(), m = h(() => e.modelValue === void 0 ? [] : e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue]), v = h(() => e.valueLabel !== void 0 ? Array.isArray(e.valueLabel) ? e.valueLabel : [e.valueLabel] : m.value.reduce((C, I) => {
+      var q;
+      const D = (q = e.options.find(({ value: F }) => F === I)) == null ? void 0 : q.label;
+      return D && C.push(D), C;
+    }, [])), k = T(), S = T(), B = h(() => e.manualSearch ? e.options : c.value ? e.options.filter(({ label: C }) => No(C, c.value)) : e.options);
+    Y(
+      m,
       () => {
-        var w;
-        e.multiple || (y.value = (w = d.value.at(0)) == null ? void 0 : w.value);
+        e.multiple || (d.value = m.value.at(0));
       },
       { immediate: !0 }
     );
-    const T = ee("ONYX_CHECK_ALL"), N = h(() => (e.multiple && e.withCheckAll && !u.value ? [T] : []).concat(
-      Ne.value
-    )), Q = async (w) => {
-      var E, D;
+    const P = W("ONYX_CHECK_ALL"), E = h(() => (e.multiple && e.withCheckAll && !c.value ? [P] : []).concat(
+      Ze.value
+    )), z = async (C) => {
+      var I, D;
       if (e.readonly) {
-        c.value = !1;
+        i.value = !1;
         return;
       }
-      c.value = !c.value, c.value ? (await Et(), (D = f.value) == null || D.focus()) : (u.value && (u.value = ""), w || (E = C.value) == null || E.focus());
-    }, I = () => y.value = N.value.at(0), A = () => y.value = N.value.at(-1), j = (w) => {
-      const E = N.value.findIndex((D) => D === w);
-      E < N.value.length - 1 && (y.value = N.value[E + 1]);
-    }, ve = (w) => {
-      const E = N.value.findIndex((D) => D === w);
-      E > 0 && (y.value = N.value[E - 1]);
-    }, fe = (w) => {
-      const E = e.options.find((D) => D.label.toLowerCase().trim().startsWith(w.toLowerCase()));
-      E && (y.value = E.value);
-    }, ce = (w) => u.value = w, _e = (w) => {
-      var Y;
-      if (w === T) {
-        (Y = de.value) == null || Y.handleChange(!de.value.state.value.modelValue);
+      i.value = !i.value, i.value ? (await zt(), (D = k.value) == null || D.focus()) : (c.value && (c.value = ""), C || (I = S.value) == null || I.focus());
+    }, ne = () => d.value = E.value.at(0), se = () => d.value = E.value.at(-1), de = (C) => {
+      const I = E.value.findIndex((D) => D === C);
+      I < E.value.length - 1 && (d.value = E.value[I + 1]);
+    }, ge = (C) => {
+      const I = E.value.findIndex((D) => D === C);
+      I > 0 && (d.value = E.value[I - 1]);
+    }, ke = (C) => {
+      const I = B.value.find((D) => D.label.toLowerCase().trim().startsWith(C.toLowerCase()));
+      I && (d.value = I.value);
+    }, we = (C) => c.value = C, Ce = (C) => {
+      var q;
+      if (C === P) {
+        (q = me.value) == null || q.handleChange(!me.value.state.value.modelValue);
         return;
       }
-      const E = e.options.find(({ value: q }) => q === w);
-      if (!E)
+      if (!B.value.find(({ value: F }) => F === C))
         return;
       if (!e.multiple)
-        return l("update:modelValue", E);
-      d.value.some(({ value: q }) => q === w) ? l(
+        return l("update:modelValue", C);
+      m.value.some((F) => F === C) ? l(
         "update:modelValue",
-        d.value.filter(({ value: q }) => q !== w)
-      ) : l("update:modelValue", [...d.value, E]);
-    }, xe = h(() => e.withSearch ? "list" : "none"), {
-      elements: { input: oe, option: ue, group: be, listbox: ge }
-    } = Wa({
-      autocomplete: xe,
+        m.value.filter((F) => F !== C)
+      ) : l("update:modelValue", [...m.value, C]);
+    }, $e = h(() => e.withSearch ? "list" : "none"), {
+      elements: { input: re, option: pe, group: L, listbox: Me }
+    } = il({
+      autocomplete: $e,
       label: e.label,
       listLabel: e.listLabel,
-      inputValue: h(() => e.withSearch && u.value || ""),
-      activeOption: h(() => y.value),
+      activeOption: h(() => d.value),
       multiple: h(() => e.multiple),
-      isExpanded: c,
-      templateRef: m,
-      onToggle: Q,
-      onActivateFirst: I,
-      onActivateLast: A,
-      onActivateNext: j,
-      onActivatePrevious: ve,
-      onTypeAhead: fe,
-      onAutocomplete: ce,
-      onSelect: _e
-    }), ke = h(() => wa(e.options, "group")), { vScrollEnd: S, isScrollEnd: we } = Mo({
+      isExpanded: i,
+      templateRef: y,
+      onToggle: z,
+      onActivateFirst: ne,
+      onActivateLast: se,
+      onActivateNext: de,
+      onActivatePrevious: ge,
+      onTypeAhead: ke,
+      onAutocomplete: we,
+      onSelect: Ce
+    }), St = h(() => Ea(B.value, "group")), { vScrollEnd: Ot, isScrollEnd: Lt } = Do({
       enabled: h(() => {
-        var w;
-        return ((w = e.lazyLoading) == null ? void 0 : w.enabled) ?? !1;
+        var C;
+        return ((C = e.lazyLoading) == null ? void 0 : C.enabled) ?? !1;
       }),
       loading: h(() => e.loading),
       offset: h(() => {
-        var w;
-        return (w = e.lazyLoading) == null ? void 0 : w.scrollOffset;
+        var C;
+        return (C = e.lazyLoading) == null ? void 0 : C.scrollOffset;
       })
-    }), Ce = h(() => {
-      if (!e.options.length)
-        return e.withSearch && u.value ? i.value("select.noMatch") : i.value("select.empty");
-    }), Ne = h(
-      () => e.options.filter((w) => !w.disabled).map(({ value: w }) => w)
-    ), de = h(() => {
+    }), Be = h(() => {
+      if (!B.value.length)
+        return e.withSearch && c.value ? u.value("select.noMatch") : u.value("select.empty");
+    }), Ze = h(
+      () => B.value.filter((C) => !C.disabled).map(({ value: C }) => C)
+    ), me = h(() => {
       if (!(!e.multiple || !e.withCheckAll))
-        return nt(
-          Ne,
-          h(() => d.value.map(({ value: w }) => w)),
-          (w) => {
-            const E = w.map((D) => e.options.find(({ value: Y }) => Y === D)).filter((D) => D != null);
-            l("update:modelValue", E);
-          }
-        );
-    }), Ue = h(() => {
-      var E;
+        return ut(Ze, m, (C) => {
+          const I = C.map((D) => {
+            var q;
+            return (q = e.options.find(({ value: F }) => F === D)) == null ? void 0 : q.value;
+          }).filter((D) => D != null);
+          l("update:modelValue", I);
+        });
+    }), Ge = h(() => {
+      var I;
       if (!e.multiple)
         return "";
-      const w = i.value("selections.selectAll");
-      return typeof e.withCheckAll == "boolean" ? w : ((E = e.withCheckAll) == null ? void 0 : E.label) ?? w;
+      const C = u.value("selections.selectAll");
+      return typeof e.withCheckAll == "boolean" ? C : ((I = e.withCheckAll) == null ? void 0 : I.label) ?? C;
     });
-    X(() => {
-      we.value && l("lazyLoad");
+    Q(() => {
+      Lt.value && l("lazyLoad");
     });
-    const wt = h(() => {
-      const w = {
+    const Tt = h(() => {
+      const C = {
         ...e,
-        modelValue: d.value
+        modelValue: v.value
       };
-      return e.withSearch ? { ...w, onKeydown: oe.value.onKeydown } : { ...w, ...oe.value };
+      return e.withSearch ? { ...C, onKeydown: re.value.onKeydown } : { ...C, ...re.value };
     });
-    return (w, E) => {
+    return (C, I) => {
       var D;
-      return n(), p("div", {
+      return s(), p("div", {
         ref_key: "selectRef",
-        ref: m,
+        ref: y,
         class: "onyx-select-wrapper"
       }, [
-        V(Eo, B({
+        M(qo, O({
           ref_key: "selectInput",
-          ref: C
-        }, wt.value, {
-          "show-focus": r(c),
+          ref: S
+        }, Tt.value, {
+          "show-focus": r(i),
           autofocus: e.autofocus,
-          onClick: Q,
-          onValidityChange: E[0] || (E[0] = (Y) => l("validityChange", Y))
+          onClick: z,
+          onValidityChange: I[0] || (I[0] = (q) => l("validityChange", q))
         }), null, 16, ["show-focus", "autofocus"]),
-        v("div", {
-          class: g(["onyx-select", r(s), r(c) ? "onyx-select--open" : ""]),
-          inert: !r(c),
-          "aria-busy": e.loading
+        f("div", {
+          class: g(["onyx-select", r(n), r(i) ? "onyx-select--open" : ""]),
+          inert: !r(i)
         }, [
-          G((n(), p("div", Lo, [
-            e.withSearch ? (n(), x(yl, B({
+          K((s(), p("div", Ko, [
+            e.withSearch ? (s(), x(Ml, O({
               key: 0,
               ref_key: "miniSearch",
-              ref: f
-            }, r(oe), {
-              label: r(i)("select.searchInputLabel"),
+              ref: k,
+              "model-value": r(c)
+            }, r(re), {
+              label: r(u)("select.searchInputLabel"),
               class: "onyx-select__search",
-              onClear: E[1] || (E[1] = (Y) => u.value = "")
-            }), null, 16, ["label"])) : _("", !0),
-            v("div", te(ae(r(ge))), [
-              Ce.value ? (n(), p("ul", Ao, [
-                v("li", Ho, [
-                  b(w.$slots, "empty", { defaultMessage: Ce.value }, () => [
-                    V(rt, null, {
+              onClear: I[1] || (I[1] = (q) => c.value = "")
+            }), null, 16, ["model-value", "label"])) : _("", !0),
+            f("div", ee(te(r(Me))), [
+              Be.value ? (s(), p("ul", jo, [
+                f("li", Yo, [
+                  b(C.$slots, "empty", { defaultMessage: Be.value }, () => [
+                    M(dt, null, {
                       default: $(() => [
-                        F(M(Ce.value), 1)
+                        Z(V(Be.value), 1)
                       ]),
                       _: 1
                     })
                   ])
                 ])
-              ])) : (n(!0), p(z, { key: 1 }, W(ke.value, (Y, q) => {
-                var Fe, Re;
-                return n(), p("ul", B({
-                  key: q,
+              ])) : (s(!0), p(R, { key: 1 }, J(St.value, (q, F) => {
+                var Ke, je;
+                return s(), p("ul", O({
+                  key: F,
                   class: "onyx-select__group",
                   ref_for: !0
-                }, r(be)({ label: q })), [
-                  q != "" ? (n(), p("li", Po, M(q), 1)) : _("", !0),
-                  e.multiple && e.withCheckAll && !r(u) ? (n(), x(We, B(
+                }, r(L)({ label: F })), [
+                  F != "" ? (s(), p("li", Wo, V(F), 1)) : _("", !0),
+                  e.multiple && e.withCheckAll && !r(c) ? (s(), x(lt, O(
                     {
                       key: 1,
                       ref_for: !0
                     },
-                    r(ue)({
-                      value: r(T),
-                      label: Ue.value,
-                      selected: (Fe = de.value) == null ? void 0 : Fe.state.value.modelValue
+                    r(pe)({
+                      value: r(P),
+                      label: Ge.value,
+                      selected: (Ke = me.value) == null ? void 0 : Ke.state.value.modelValue
                     }),
                     {
                       multiple: "",
-                      active: r(T) === y.value,
-                      indeterminate: (Re = de.value) == null ? void 0 : Re.state.value.indeterminate,
+                      active: r(P) === d.value,
+                      indeterminate: (je = me.value) == null ? void 0 : je.state.value.indeterminate,
                       density: e.density,
                       class: "onyx-select__check-all"
                     }
                   ), {
                     default: $(() => [
-                      F(M(Ue.value), 1)
+                      Z(V(Ge.value), 1)
                     ]),
                     _: 1
                   }, 16, ["active", "indeterminate", "density"])) : _("", !0),
-                  (n(!0), p(z, null, W(Y, (Z) => (n(), x(We, B(
+                  (s(!0), p(R, null, J(q, (j) => (s(), x(lt, O(
                     {
-                      key: Z.value.toString(),
+                      key: j.value.toString(),
                       ref_for: !0
                     },
-                    r(ue)({
-                      value: Z.value,
-                      label: Z.label,
-                      disabled: Z.disabled,
-                      selected: d.value.some(({ value: Ct }) => Ct === Z.value)
+                    r(pe)({
+                      value: j.value,
+                      label: j.label,
+                      disabled: j.disabled,
+                      selected: m.value.some((Et) => Et === j.value)
                     }),
                     {
                       multiple: e.multiple,
-                      active: Z.value === y.value,
-                      icon: Z.icon,
+                      active: j.value === d.value,
+                      icon: j.icon,
                       density: e.density,
-                      truncation: Z.truncation
+                      truncation: j.truncation ?? e.truncation
                     }
                   ), {
                     default: $(() => [
-                      b(w.$slots, "option", B({ ref_for: !0 }, Z), () => [
-                        F(M(Z.label), 1)
+                      b(C.$slots, "option", O({ ref_for: !0 }, j), () => [
+                        Z(V(j.label), 1)
                       ])
                     ]),
                     _: 2
@@ -3375,20 +3530,131 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
                 ], 16);
               }), 128))
             ], 16),
-            (D = e.lazyLoading) != null && D.loading ? (n(), p("div", Do, [
-              V(J, { class: "onyx-select__loading" })
+            (D = e.lazyLoading) != null && D.loading ? (s(), p("div", Xo, [
+              M(X, { class: "onyx-select__loading" })
             ])) : _("", !0),
-            o.optionsEnd ? (n(), p("div", zo, [
-              b(w.$slots, "optionsEnd")
+            o.optionsEnd ? (s(), p("div", Jo, [
+              b(C.$slots, "optionsEnd")
             ])) : _("", !0)
           ])), [
-            [r(S)]
+            [r(Ot)]
           ])
-        ], 10, Io)
+        ], 10, Go)
       ], 512);
     };
   }
-}), Kn = ["summary", "preview"], No = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>', Uo = { class: "onyx-switch-skeleton__click-area" }, Fo = ["title"], Ro = ["aria-label", "disabled", "required", "autofocus"], qo = { class: "onyx-switch__click-area" }, Zo = { class: "onyx-switch__container" }, Ko = { class: "onyx-switch__icon" }, Go = /* @__PURE__ */ v("div", { class: "onyx-switch__frame" }, null, -1), Gn = /* @__PURE__ */ k({
+}), ds = ["summary", "preview"], Qo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M4 15h24v2H4z"/></svg>', en = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M17 15V4h-2v11H4v2h11v11h2V17h11v-2z"/></svg>', tn = { class: "onyx-stepper__wrapper" }, an = ["disabled", "aria-label"], ln = ["aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"], on = ["disabled", "aria-label"], ps = /* @__PURE__ */ w({
+  __name: "OnyxStepper",
+  props: {
+    density: {},
+    customError: {},
+    required: { type: Boolean },
+    requiredMarker: {},
+    id: {},
+    label: {},
+    labelTooltip: {},
+    hideLabel: { type: Boolean },
+    message: {},
+    messageTooltip: {},
+    autofocus: { type: Boolean },
+    modelValue: {},
+    name: {},
+    placeholder: {},
+    min: {},
+    max: {},
+    step: { default: 1 },
+    autocomplete: {},
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    skeleton: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "focus", "blur", "validityChange"],
+  setup(t, { emit: a }) {
+    const e = t, { t: l } = N(), n = T(), o = a, { densityClass: u } = H(e), { vCustomValidity: c, errorMessages: i } = ae({ props: e, emit: o }), y = T(!1), d = h({
+      get: () => e.modelValue,
+      set: (S) => o("update:modelValue", S)
+    }), m = (S) => {
+      if (!n.value) return;
+      n.value[`${S}`]();
+      const B = n.value.valueAsNumber;
+      d.value = isNaN(B) ? void 0 : B;
+    }, v = h(() => l.value("stepper.increment", { stepSize: e.step })), k = h(() => l.value("stepper.decrement", { stepSize: e.step }));
+    return (S, B) => e.skeleton ? (s(), p("div", {
+      key: 0,
+      class: g(["onyx-stepper-skeleton", r(u)])
+    }, [
+      e.hideLabel ? _("", !0) : (s(), x(U, {
+        key: 0,
+        class: "onyx-stepper-skeleton__label"
+      })),
+      M(U, { class: "onyx-stepper-skeleton__input" })
+    ], 2)) : (s(), p("div", {
+      key: 1,
+      class: g(["onyx-stepper", r(u)])
+    }, [
+      M(xe, O(e, { "error-messages": r(i) }), {
+        default: $(() => [
+          f("div", tn, [
+            f("button", {
+              type: "button",
+              class: "onyx-stepper__counter",
+              disabled: e.min && e.min === d.value || e.disabled || e.readonly || e.loading,
+              "aria-label": k.value,
+              onClick: B[0] || (B[0] = (P) => m("stepDown"))
+            }, [
+              M(A, { icon: r(Qo) }, null, 8, ["icon"])
+            ], 8, an),
+            e.loading ? (s(), x(X, {
+              key: 0,
+              class: "onyx-stepper__loading",
+              type: "circle"
+            })) : K((s(), p("input", {
+              key: 1,
+              ref_key: "inputRef",
+              ref: n,
+              "onUpdate:modelValue": B[1] || (B[1] = (P) => d.value = P),
+              class: g(["onyx-stepper__native", { "onyx-stepper__native--force-invalid": r(i) && y.value }]),
+              type: "number",
+              "aria-label": e.label,
+              autofocus: e.autofocus,
+              disabled: e.disabled || e.loading,
+              min: e.min,
+              max: e.max,
+              name: e.name,
+              placeholder: e.placeholder,
+              readonly: e.readonly,
+              required: e.required,
+              step: e.step,
+              title: e.hideLabel ? e.label : void 0,
+              onChange: B[2] || (B[2] = (P) => y.value = !0),
+              onFocus: B[3] || (B[3] = (P) => o("focus")),
+              onBlur: B[4] || (B[4] = (P) => o("blur"))
+            }, null, 42, ln)), [
+              [
+                ze,
+                d.value,
+                void 0,
+                { number: !0 }
+              ],
+              [r(c)]
+            ]),
+            f("button", {
+              type: "button",
+              class: "onyx-stepper__counter",
+              disabled: e.max && e.max === d.value || e.disabled || e.readonly || e.loading,
+              "aria-label": v.value,
+              onClick: B[5] || (B[5] = (P) => m("stepUp"))
+            }, [
+              M(A, { icon: r(en) }, null, 8, ["icon"])
+            ], 8, on)
+          ])
+        ]),
+        _: 1
+      }, 16, ["error-messages"])
+    ], 2));
+  }
+}), nn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>', sn = { class: "onyx-switch-skeleton__click-area" }, rn = ["title"], un = ["aria-label", "disabled", "required", "autofocus"], cn = { class: "onyx-switch__click-area" }, dn = { class: "onyx-switch__container" }, pn = { class: "onyx-switch__icon" }, mn = /* @__PURE__ */ f("div", { class: "onyx-switch__frame" }, null, -1), ms = /* @__PURE__ */ w({
   __name: "OnyxSwitch",
   props: {
     density: {},
@@ -3406,30 +3672,30 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { requiredMarkerClass: s, requiredTypeClass: o } = ye(e), { densityClass: i } = H(e), { vCustomValidity: u } = le({ props: e, emit: l }), c = h({
+    const e = t, l = a, { requiredMarkerClass: n, requiredTypeClass: o } = _e(e), { densityClass: u } = H(e), { vCustomValidity: c, title: i } = ae({ props: e, emit: l }), y = h({
       get: () => e.modelValue,
-      set: (m) => {
-        l("update:modelValue", m);
+      set: (d) => {
+        l("update:modelValue", d);
       }
     });
-    return (m, y) => e.skeleton ? (n(), p("div", {
+    return (d, m) => e.skeleton ? (s(), p("div", {
       key: 0,
-      class: g(["onyx-switch-skeleton", r(i)])
+      class: g(["onyx-switch-skeleton", r(u)])
     }, [
-      v("span", Uo, [
-        V(U, { class: "onyx-switch-skeleton__input" })
+      f("span", sn, [
+        M(U, { class: "onyx-switch-skeleton__input" })
       ]),
-      e.hideLabel ? _("", !0) : (n(), x(U, {
+      e.hideLabel ? _("", !0) : (s(), x(U, {
         key: 0,
         class: "onyx-switch-skeleton__label"
       }))
-    ], 2)) : (n(), p("label", {
+    ], 2)) : (s(), p("label", {
       key: 1,
-      class: g(["onyx-switch", [r(o), r(i)]]),
-      title: e.hideLabel ? e.label : void 0
+      class: g(["onyx-switch", [r(o), r(u)]]),
+      title: r(i)
     }, [
-      G(v("input", {
-        "onUpdate:modelValue": y[0] || (y[0] = (d) => c.value = d),
+      K(f("input", {
+        "onUpdate:modelValue": m[0] || (m[0] = (v) => y.value = v),
         type: "checkbox",
         role: "switch",
         class: g({ "onyx-switch__input": !0, "onyx-switch__loading": e.loading }),
@@ -3437,43 +3703,43 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
         disabled: e.disabled || e.loading,
         required: e.required,
         autofocus: e.autofocus
-      }, null, 10, Ro), [
-        [Je, c.value],
-        [r(u)]
+      }, null, 10, un), [
+        [ot, y.value],
+        [r(c)]
       ]),
-      v("span", qo, [
-        v("span", Zo, [
-          v("span", Ko, [
-            e.loading ? (n(), x(r(J), {
+      f("span", cn, [
+        f("span", dn, [
+          f("span", pn, [
+            e.loading ? (s(), x(X, {
               key: 0,
               class: "onyx-switch__spinner",
               type: "circle"
-            })) : (n(), x(r(L), {
+            })) : (s(), x(A, {
               key: 1,
-              icon: c.value ? r(No) : r(ze)
+              icon: y.value ? r(nn) : r(qe)
             }, null, 8, ["icon"]))
           ]),
-          Go
+          mn
         ])
       ]),
-      e.hideLabel ? _("", !0) : (n(), p("span", {
+      e.hideLabel ? _("", !0) : (s(), p("span", {
         key: 0,
         class: g(["onyx-switch__label", [
           `onyx-truncation-${e.truncation}`,
           // shows the required marker inline for multiline labels
-          e.truncation === "multiline" ? r(s) : void 0
+          e.truncation === "multiline" ? r(n) : void 0
         ]])
-      }, M(e.label), 3)),
-      e.truncation === "ellipsis" ? (n(), p("div", {
+      }, V(e.label), 3)),
+      !e.hideLabel && e.truncation === "ellipsis" ? (s(), p("div", {
         key: 1,
-        class: g(["onyx-switch__marker", [r(s)]])
+        class: g(["onyx-switch__marker", [r(n)]])
       }, null, 2)) : _("", !0)
-    ], 10, Fo));
+    ], 10, rn));
   }
-}), jo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.13 4.13 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.1 4.1 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.643 2.643 0 0 1-2.625-2.625 2.643 2.643 0 0 1 2.625-2.625 2.643 2.643 0 0 1 2.625 2.625A2.64 2.64 0 0 1 16.125 18" style="fill-rule:nonzero"/></svg>', Yo = { class: "onyx-table-wrapper" }, Wo = ["tabindex"], Xo = {
+}), yn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.13 4.13 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.1 4.1 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.643 2.643 0 0 1-2.625-2.625 2.643 2.643 0 0 1 2.625-2.625 2.643 2.643 0 0 1 2.625 2.625A2.64 2.64 0 0 1 16.125 18" style="fill-rule:nonzero"/></svg>', hn = { class: "onyx-table-wrapper" }, vn = ["tabindex"], fn = {
   key: 0,
   class: "onyx-table__header"
-}, Jo = { class: "onyx-table__empty" }, Qo = { colspan: "100%" }, en = { class: "onyx-table__empty-content" }, jn = /* @__PURE__ */ k({
+}, _n = { class: "onyx-table__empty" }, xn = { colspan: "100%" }, bn = { class: "onyx-table__empty-content" }, ys = /* @__PURE__ */ w({
   __name: "OnyxTable",
   props: {
     density: {},
@@ -3482,37 +3748,37 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     withPageScrolling: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const a = t, e = R(), { t: l } = P(), { densityClass: s } = H(a), o = h(() => l.value("table.empty"));
-    return (i, u) => (n(), p("div", Yo, [
-      v("div", {
+    const a = t, e = G(), { t: l } = N(), { densityClass: n } = H(a), o = h(() => l.value("table.empty"));
+    return (u, c) => (s(), p("div", hn, [
+      f("div", {
         class: g({ "onyx-table-wrapper__scroll-container": !a.withPageScrolling }),
         tabindex: a.withPageScrolling ? void 0 : 0
       }, [
-        v("table", {
+        f("table", {
           class: g(["onyx-table onyx-text", [
             a.striped ? "onyx-table--striped" : "",
             a.withVerticalBorders ? "onyx-table--vertical-borders" : "",
-            r(s)
+            r(n)
           ]])
         }, [
-          e.head ? (n(), p("thead", Xo, [
-            b(i.$slots, "head")
+          e.head ? (s(), p("thead", fn, [
+            b(u.$slots, "head")
           ])) : _("", !0),
-          v("tbody", null, [
-            b(i.$slots, "default", {}, () => [
-              v("tr", Jo, [
-                v("td", Qo, [
-                  v("div", en, [
-                    b(i.$slots, "empty", { defaultMessage: o.value }, () => [
-                      V(rt, null, {
+          f("tbody", null, [
+            b(u.$slots, "default", {}, () => [
+              f("tr", _n, [
+                f("td", xn, [
+                  f("div", bn, [
+                    b(u.$slots, "empty", { defaultMessage: o.value }, () => [
+                      M(dt, null, {
                         icon: $(() => [
-                          V(L, {
-                            icon: r(jo),
+                          M(A, {
+                            icon: r(yn),
                             size: "48px"
                           }, null, 8, ["icon"])
                         ]),
                         default: $(() => [
-                          F(" " + M(o.value), 1)
+                          Z(" " + V(o.value), 1)
                         ]),
                         _: 1
                       })
@@ -3523,10 +3789,10 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
             ])
           ])
         ], 2)
-      ], 10, Wo)
+      ], 10, vn)
     ]));
   }
-}), tn = { class: "onyx-text onyx-truncation-ellipsis" }, Yn = /* @__PURE__ */ k({
+}), gn = { class: "onyx-text onyx-truncation-ellipsis" }, hs = /* @__PURE__ */ w({
   __name: "OnyxTag",
   props: {
     density: {},
@@ -3536,18 +3802,18 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, { densityClass: e } = H(a);
-    return (l, s) => (n(), p("div", {
+    return (l, n) => (s(), p("div", {
       class: g(["onyx-tag", `onyx-tag--${a.color}`, r(e)])
     }, [
-      a.icon ? (n(), x(L, {
+      a.icon ? (s(), x(A, {
         key: 0,
         icon: a.icon,
         size: "16px"
       }, null, 8, ["icon"])) : _("", !0),
-      v("span", tn, M(a.label), 1)
+      f("span", gn, V(a.label), 1)
     ], 2));
   }
-}), an = ["data-autosize-value"], ln = ["placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], Wn = /* @__PURE__ */ k({
+}), kn = ["data-autosize-value"], wn = ["id", "placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], vs = /* @__PURE__ */ w({
   __name: "OnyxTextarea",
   props: {
     density: {},
@@ -3575,44 +3841,45 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "change", "focus", "blur", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { vCustomValidity: s, errorMessages: o } = le({ props: e, emit: l }), { densityClass: i } = H(e), u = h({
+    const e = t, l = a, { vCustomValidity: n, errorMessages: o } = ae({ props: e, emit: l }), { densityClass: u } = H(e), c = h({
       get: () => e.modelValue,
-      set: (d) => l("update:modelValue", d)
-    }), c = (d) => {
-      const f = d.target.value;
-      l("change", f);
-    }, m = h(() => {
+      set: (m) => l("update:modelValue", m)
+    }), i = (m) => {
+      const v = m.target.value;
+      l("change", v);
+    }, y = h(() => {
       if (!e.autosize) return;
-      const d = e.autosize.min ? Math.max(e.autosize.min, 2) : void 0, f = e.autosize.max;
-      return [d ? `--min-autosize-rows: ${d}` : "", `--max-autosize-rows: ${f ?? "unset"}`];
-    }), y = (d) => {
-      var C;
-      const f = d.target;
-      (C = f.parentElement) == null || C.setAttribute("data-autosize-value", f.value);
+      const m = e.autosize.min ? Math.max(e.autosize.min, 2) : void 0, v = e.autosize.max;
+      return [m ? `--min-autosize-rows: ${m}` : "", `--max-autosize-rows: ${v ?? "unset"}`];
+    }), d = (m) => {
+      var k;
+      const v = m.target;
+      (k = v.parentElement) == null || k.setAttribute("data-autosize-value", v.value);
     };
-    return (d, f) => e.skeleton ? (n(), p("div", {
+    return (m, v) => e.skeleton ? (s(), p("div", {
       key: 0,
-      class: g(["onyx-textarea-skeleton", r(i)]),
-      style: Be(m.value)
+      class: g(["onyx-textarea-skeleton", r(u)]),
+      style: Ee(y.value)
     }, [
-      e.hideLabel ? _("", !0) : (n(), x(U, {
+      e.hideLabel ? _("", !0) : (s(), x(U, {
         key: 0,
         class: "onyx-textarea-skeleton__label"
       })),
-      V(U, { class: "onyx-textarea-skeleton__input" })
-    ], 6)) : (n(), p("div", {
+      M(U, { class: "onyx-textarea-skeleton__input" })
+    ], 6)) : (s(), p("div", {
       key: 1,
-      class: g(["onyx-textarea", r(i)]),
-      style: Be(m.value)
+      class: g(["onyx-textarea", r(u)]),
+      style: Ee(y.value)
     }, [
-      V(De, B(e, { "error-messages": r(o) }), {
-        default: $(() => [
-          v("div", {
+      M(xe, O(e, { "error-messages": r(o) }), {
+        default: $(({ id: k }) => [
+          f("div", {
             class: "onyx-textarea__wrapper",
-            "data-autosize-value": u.value
+            "data-autosize-value": c.value
           }, [
-            G(v("textarea", {
-              "onUpdate:modelValue": f[0] || (f[0] = (C) => u.value = C),
+            K(f("textarea", {
+              id: k,
+              "onUpdate:modelValue": v[0] || (v[0] = (S) => c.value = S),
               class: g(["onyx-textarea__native", { "onyx-textarea__native--no-resize": e.disableManualResize }]),
               placeholder: e.placeholder,
               required: e.required,
@@ -3625,25 +3892,25 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
               maxlength: e.maxlength,
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0,
-              onInput: y,
-              onChange: c,
-              onFocus: f[1] || (f[1] = (C) => l("focus")),
-              onBlur: f[2] || (f[2] = (C) => l("blur"))
-            }, null, 42, ln), [
-              [Qe, u.value],
-              [r(s)]
+              onInput: d,
+              onChange: i,
+              onFocus: v[1] || (v[1] = (S) => l("focus")),
+              onBlur: v[2] || (v[2] = (S) => l("blur"))
+            }, null, 42, wn), [
+              [ze, c.value],
+              [r(n)]
             ])
-          ], 8, an)
+          ], 8, kn)
         ]),
         _: 1
       }, 16, ["error-messages"])
     ], 6));
   }
-}), on = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m8.485 22.485A11.92 11.92 0 0 1 16 28C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12c0 3.205-1.248 6.219-3.515 8.485"/><path d="M15 22h2v2h-2zm0-14h2v11h-2z"/></svg>', nn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="m12.987 19.063-3.291-3.292-1.414 1.415 4.705 4.706 9.707-9.708-1.414-1.414z"/></svg>', sn = { class: "onyx-toast-message__wrapper" }, rn = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, cn = { class: "onyx-toast-message__headline onyx-text" }, un = { class: "onyx-truncation-ellipsis" }, dn = ["aria-label"], pn = {
+}), Cn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m8.485 22.485A11.92 11.92 0 0 1 16 28C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12c0 3.205-1.248 6.219-3.515 8.485"/><path d="M15 22h2v2h-2zm0-14h2v11h-2z"/></svg>', $n = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="m12.987 19.063-3.291-3.292-1.414 1.415 4.705 4.706 9.707-9.708-1.414-1.414z"/></svg>', Mn = { class: "onyx-toast-message__wrapper" }, Bn = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, Vn = { class: "onyx-toast-message__headline onyx-text" }, Sn = { class: "onyx-truncation-ellipsis" }, On = ["aria-label"], Ln = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
-}, mn = /* @__PURE__ */ k({
+}, Tn = /* @__PURE__ */ w({
   __name: "OnyxToastMessage",
   props: {
     density: {},
@@ -3656,65 +3923,65 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
   },
   emits: ["click", "close"],
   setup(t, { emit: a }) {
-    const e = t, l = a, { t: s } = P(), { densityClass: o } = H(e), i = h(() => e.duration > 0), u = {
-      neutral: it,
-      danger: st,
-      warning: on,
-      success: nn
-    }, c = h(() => {
+    const e = t, l = a, { t: n } = N(), { densityClass: o } = H(e), u = h(() => e.duration > 0), c = {
+      neutral: pt,
+      danger: ct,
+      warning: Cn,
+      success: $n
+    }, i = h(() => {
       if (e.icon !== !1)
-        return e.icon || u[e.color];
+        return e.icon || c[e.color];
     });
-    return (m, y) => (n(), x(re(e.clickable ? "button" : "div"), {
+    return (y, d) => (s(), x(ce(e.clickable ? "button" : "div"), {
       class: g(["onyx-toast-message", [`onyx-toast-message--${e.color}`, r(o)]]),
       role: e.color === "danger" || e.color === "warning" ? "alert" : "status",
       "aria-label": e.clickable ? e.headline : void 0,
-      onClick: y[2] || (y[2] = (d) => e.clickable && l("click"))
+      onClick: d[2] || (d[2] = (m) => e.clickable && l("click"))
     }, {
       default: $(() => [
-        v("div", sn, [
-          c.value ? (n(), x(L, {
+        f("div", Mn, [
+          i.value ? (s(), x(A, {
             key: 0,
-            icon: c.value
+            icon: i.value
           }, null, 8, ["icon"])) : _("", !0),
-          v("div", rn, [
-            v("div", cn, [
-              v("span", un, M(e.headline), 1),
-              e.clickable ? _("", !0) : (n(), p("button", {
+          f("div", Bn, [
+            f("div", Vn, [
+              f("span", Sn, V(e.headline), 1),
+              e.clickable ? _("", !0) : (s(), p("button", {
                 key: 0,
                 type: "button",
-                "aria-label": r(s)("close"),
+                "aria-label": r(n)("close"),
                 class: "onyx-toast-message__close",
-                onClick: y[0] || (y[0] = (d) => l("close"))
+                onClick: d[0] || (d[0] = (m) => l("close"))
               }, [
-                V(L, { icon: r(ze) }, null, 8, ["icon"])
-              ], 8, dn))
+                M(A, { icon: r(qe) }, null, 8, ["icon"])
+              ], 8, On))
             ]),
-            e.description ? (n(), p("p", pn, M(e.description), 1)) : _("", !0)
+            e.description ? (s(), p("p", Ln, V(e.description), 1)) : _("", !0)
           ])
         ]),
-        i.value ? (n(), p("time", {
+        u.value ? (s(), p("time", {
           key: e.duration,
           "aria-hidden": "true",
           class: "onyx-toast-message__progress-bar",
-          style: Be({ animationDuration: `${e.duration}ms` }),
-          onAnimationend: y[1] || (y[1] = (d) => l("close"))
+          style: Ee({ animationDuration: `${e.duration}ms` }),
+          onAnimationend: d[1] || (d[1] = (m) => l("close"))
         }, null, 36)) : _("", !0)
       ]),
       _: 1
     }, 8, ["class", "role", "aria-label"]));
   }
-}), kt = Symbol(), yn = () => {
+}), Vt = Symbol(), En = () => {
   let t = 1;
-  const a = O([]), e = (s) => {
+  const a = T([]), e = (n) => {
     const o = t++;
     a.value.unshift({
-      ...s,
+      ...n,
       id: o,
       onClose: () => l(o)
     });
-  }, l = (s) => {
-    a.value = a.value.filter((o) => o.id !== s);
+  }, l = (n) => {
+    a.value = a.value.filter((o) => o.id !== n);
   };
   return {
     // make toasts readonly so they can not be modified from the outside
@@ -3722,14 +3989,14 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     show: e,
     remove: l
   };
-}, hn = () => {
+}, In = () => {
   const t = () => {
     console.warn(
       'Trying to use "useToast()" before the toast provider has been provided. Make sure to "provide" it first.'
     );
   };
-  return se(
-    kt,
+  return ue(
+    Vt,
     // provide fallback so "useToast()" does not return "undefined"
     () => ({
       toasts: h(() => []),
@@ -3738,106 +4005,104 @@ const U = /* @__PURE__ */ He(ea, [["render", aa]]), la = ["disabled", "type", "a
     }),
     !0
   );
-}, vn = {
+}, An = {
   key: 0,
   class: "onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
-}, Xn = /* @__PURE__ */ k({
+}, fs = /* @__PURE__ */ w({
   __name: "OnyxToast",
   setup(t) {
-    const a = hn();
-    return (e, l) => r(a).toasts.value.length ? (n(), p("dialog", vn, [
-      (n(!0), p(z, null, W(r(a).toasts.value, ({ id: s, ...o }) => (n(), x(mn, B({
-        key: s,
+    const a = In();
+    return (e, l) => r(a).toasts.value.length ? (s(), p("dialog", An, [
+      (s(!0), p(R, null, J(r(a).toasts.value, ({ id: n, ...o }) => (s(), x(Tn, O({
+        key: n,
         ref_for: !0
       }, o), null, 16))), 128))
     ])) : _("", !0);
   }
-}), Jn = ["top", "bottom"], Qn = (t = {}) => ({
+}), _s = ["top", "bottom"], xs = (t = {}) => ({
   install: (a) => {
-    xa(a, t.i18n);
-    const e = a.runWithContext(() => P());
-    X(() => fn(e.t.value("optional"))), a.provide(kt, yn());
+    Sa(a, t.i18n);
+    const e = a.runWithContext(() => N());
+    Q(() => Hn(e.t.value("optional"))), a.provide(Vt, En());
   }
-}), fn = (t) => {
+}), Hn = (t) => {
   globalThis.document.body.style.setProperty("--onyx-global-optional-text", t);
-}, es = (t, a) => {
-  const e = Xe(t.toLowerCase()), l = Xe(a.toLowerCase());
-  return e.includes(l);
-}, Xe = (t) => t.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+};
 export {
-  On as AUTOCAPITALIZE,
-  wn as BUTTON_COLORS,
-  Cn as BUTTON_MODES,
-  kn as BUTTON_TYPES,
-  gn as DENSITIES,
-  Un as DIRECTIONS,
-  Mn as HEADLINE_TYPES,
-  Vn as ICON_SIZES,
-  Bn as INPUT_TYPES,
-  Tn as LINK_TARGETS,
-  he as MOBILE_NAV_BAR_INJECTION_KEY,
-  Kn as MULTISELECT_TEXT_MODE,
-  ro as ONYX_BREAKPOINTS,
-  Dn as ONYX_COLORS,
-  xn as OnyxAppLayout,
-  Ze as OnyxAvatar,
-  bn as OnyxAvatarStack,
-  Ut as OnyxBadge,
-  Oe as OnyxButton,
-  $e as OnyxCheckbox,
-  $n as OnyxCheckboxGroup,
-  El as OnyxColorSchemeDialog,
-  In as OnyxColorSchemeMenuItem,
-  La as OnyxDialog,
-  rt as OnyxEmpty,
-  Pe as OnyxExternalLinkIcon,
-  bt as OnyxFlyoutMenu,
-  ne as OnyxHeadline,
-  L as OnyxIcon,
-  Na as OnyxIconButton,
-  Me as OnyxInfoTooltip,
-  Sn as OnyxInput,
-  En as OnyxLink,
-  ft as OnyxListItem,
-  J as OnyxLoadingIndicator,
-  xt as OnyxMenuItem,
-  yl as OnyxMiniSearch,
-  Ge as OnyxMobileNavButton,
-  kl as OnyxNavAppArea,
-  Fn as OnyxNavBar,
-  Ln as OnyxNavButton,
-  An as OnyxNavItem,
-  zl as OnyxNavSeparator,
-  Rn as OnyxPageLayout,
-  je as OnyxRadioButton,
-  qn as OnyxRadioGroup,
-  Zn as OnyxSelect,
-  Eo as OnyxSelectInput,
-  We as OnyxSelectOption,
+  Yn as AUTOCAPITALIZE,
+  Un as BUTTON_COLORS,
+  Fn as BUTTON_MODES,
+  Rn as BUTTON_TYPES,
+  zn as DENSITIES,
+  ss as DIRECTIONS,
+  Zn as HEADLINE_TYPES,
+  Gn as ICON_SIZES,
+  jn as INPUT_TYPES,
+  Xn as LINK_TARGETS,
+  be as MOBILE_NAV_BAR_INJECTION_KEY,
+  ds as MULTISELECT_TEXT_MODE,
+  ko as ONYX_BREAKPOINTS,
+  ls as ONYX_COLORS,
+  Dn as OnyxAppLayout,
+  Ye as OnyxAvatar,
+  Nn as OnyxAvatarStack,
+  Wt as OnyxBadge,
+  Ie as OnyxButton,
+  Ve as OnyxCheckbox,
+  qn as OnyxCheckboxGroup,
+  ql as OnyxColorSchemeDialog,
+  Jn as OnyxColorSchemeMenuItem,
+  Za as OnyxDialog,
+  dt as OnyxEmpty,
+  Ue as OnyxExternalLinkIcon,
+  Mt as OnyxFlyoutMenu,
+  ie as OnyxHeadline,
+  A as OnyxIcon,
+  Wa as OnyxIconButton,
+  Se as OnyxInfoTooltip,
+  Kn as OnyxInput,
+  Wn as OnyxLink,
+  Fe as OnyxListItem,
+  X as OnyxLoadingIndicator,
+  $t as OnyxMenuItem,
+  Ml as OnyxMiniSearch,
+  Qe as OnyxMobileNavButton,
+  Al as OnyxNavAppArea,
+  rs as OnyxNavBar,
+  Qn as OnyxNavButton,
+  es as OnyxNavItem,
+  Xl as OnyxNavSeparator,
+  is as OnyxPageLayout,
+  et as OnyxRadioButton,
+  us as OnyxRadioGroup,
+  cs as OnyxSelect,
+  qo as OnyxSelectInput,
+  lt as OnyxSelectOption,
   U as OnyxSkeleton,
-  Gn as OnyxSwitch,
-  jn as OnyxTable,
-  Yn as OnyxTag,
-  Wn as OnyxTextarea,
-  Hn as OnyxTimer,
-  Xn as OnyxToast,
-  mn as OnyxToastMessage,
-  ht as OnyxTooltip,
-  Pn as OnyxUserMenu,
-  vt as OnyxVisuallyHidden,
-  zn as TEXT_SIZES,
-  kt as TOAST_PROVIDER_INJECTION_KEY,
-  Jn as TOOLTIP_POSITIONS,
-  Nn as TRUNCATION_TYPES,
-  Qn as createOnyx,
-  yn as createToastProvider,
-  es as normalizedIncludes,
-  xa as provideI18n,
-  fn as syncGlobalOptionalText,
+  ps as OnyxStepper,
+  ms as OnyxSwitch,
+  ys as OnyxTable,
+  hs as OnyxTag,
+  vs as OnyxTextarea,
+  ts as OnyxTimer,
+  fs as OnyxToast,
+  Tn as OnyxToastMessage,
+  kt as OnyxTooltip,
+  as as OnyxUserMenu,
+  wt as OnyxVisuallyHidden,
+  os as TEXT_SIZES,
+  Vt as TOAST_PROVIDER_INJECTION_KEY,
+  _s as TOOLTIP_POSITIONS,
+  ns as TRUNCATION_TYPES,
+  xs as createOnyx,
+  En as createToastProvider,
+  No as normalizedIncludes,
+  Sa as provideI18n,
+  Hn as syncGlobalOptionalText,
   H as useDensity,
-  Mo as useScrollEnd,
-  hn as useToast
+  Do as useScrollEnd,
+  In as useToast
 };