@pgcorp/ui-kit 0.13.0 → 0.15.0

package/dist/src/components/shared/navigation/SBottomNav.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { findRelativeTabTarget as e } from "../../../internal/focusNavigation.js";
 import { registerLayer as t } from "../../../internal/layerStack.js";
-import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
-import r from "../data-display/SBadge.vue.js";
-import { resolveLinkTarget as i } from "../../../internal/linkTarget.js";
-import a from "../controls/SButton.vue.js";
-import ee from "../controls/SLink.vue.js";
-import te from "../controls/SMenuSurface.vue.js";
-import { Fragment as ne, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as re, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, onBeforeUnmount as ie, onMounted as ae, openBlock as h, ref as g, renderList as oe, renderSlot as se, toDisplayString as _, unref as ce, useId as le, watch as v, withCtx as y } from "vue";
+import { useOverlayAdmission as n } from "../../../internal/overlayHost.js";
+import { useOwnedAttrs as r } from "../../../internal/ownedAttrs.js";
+import i from "../data-display/SBadge.vue.js";
+import { resolveLinkTarget as a } from "../../../internal/linkTarget.js";
+import ee from "../controls/SButton.vue.js";
+import te from "../controls/SLink.vue.js";
+import ne from "../controls/SMenuSurface.vue.js";
+import { Fragment as re, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as ie, createTextVNode as ae, createVNode as u, defineComponent as d, mergeProps as f, onBeforeUnmount as oe, onMounted as se, openBlock as p, ref as m, renderList as ce, renderSlot as le, toDisplayString as h, unref as g, useId as ue, watch as _, withCtx as v } from "vue";
 //#region src/components/shared/navigation/SBottomNav.vue?vue&type=script&setup=true&lang.ts
-var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 }, pe = {
+var de = ["aria-label"], fe = { class: "s-bottom-nav__items" }, pe = { key: 0 }, me = {
 	key: 2,
 	class: "s-bottom-nav__badge"
-}, me = {
+}, he = {
 	key: 0,
 	class: "s-bottom-nav__status"
-}, b = /*@__PURE__*/ f({
+}, y = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "SBottomNav",
 	props: {
@@ -37,11 +38,11 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 		"navigate",
 		"layout-change"
 	],
-	setup(f, { emit: b }) {
-		let x = f, S = b, he = n({
+	setup(d, { emit: y }) {
+		let b = d, x = y, ge = r({
 			component: "SBottomNav",
 			owner: "navigation root"
-		}), ge = (e) => e.href === void 0 ? {
+		}), _e = (e) => e.href === void 0 ? {
 			to: e.to,
 			...e.target === void 0 ? {} : { target: e.target },
 			...e.rel === void 0 ? {} : { rel: e.rel }
@@ -49,26 +50,32 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 			href: e.href,
 			...e.target === void 0 ? {} : { target: e.target },
 			...e.rel === void 0 ? {} : { rel: e.rel }
-		}, C = o(() => x.iconOnly), w = le(), T = g(null), E = g(null), D = g(!1), O = g(null), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), j = 0, M = o(() => x.items.filter((e) => e.kind === "overflow")), N = o(() => M.value.find((e) => e.id === O.value) ?? null), _e = o(() => {
+		}, S = o(() => b.iconOnly), C = ue(), w = m(null), T = m(null), E = m(!1), D = m(null), O = n(), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), j = 0, M = o(() => b.items.filter((e) => e.kind === "overflow")), N = o(() => M.value.find((e) => e.id === D.value) ?? null), ve = o(() => {
 			let e = N.value;
 			return e ? e.items.map((e) => e.kind === "destination" ? {
 				...e,
 				badgeSeverity: "danger",
-				current: x.modelValue === e.id,
+				current: b.modelValue === e.id,
 				layout: "tile"
 			} : {
 				...e,
 				kind: "action",
 				badgeSeverity: "danger",
-				current: e.kind === "view" && x.modelValue === e.id,
+				current: e.kind === "view" && b.modelValue === e.id,
 				layout: "tile"
 			}) : [];
-		}), P = 0, F = null, I = null, L = !1, R = null, z = (e) => {
+		}), P = 0, F = null;
+		_(T, () => F?.refreshModality(), { flush: "sync" });
+		let I = null, L = null, R = !1, z = null;
+		_(O, (e) => {
+			e || q(!1);
+		}, { flush: "sync" });
+		let B = (e) => {
 			let t = A.get(e.id);
 			if (t !== void 0) return t;
 			let n = j;
 			return j += 1, A.set(e.id, n), n;
-		}, B = (e) => `s-bottom-nav-${w}-overflow-${z(e)}-trigger`, V = (e) => `s-bottom-nav-${w}-overflow-${z(e)}-menu`, ve = (e, t) => {
+		}, V = (e) => `s-bottom-nav-${C}-overflow-${B(e)}-trigger`, H = (e) => `s-bottom-nav-${C}-overflow-${B(e)}-menu`, ye = (e, t) => {
 			if (e.kind === "overflow") {
 				if (t === null) {
 					k.delete(e.id);
@@ -77,108 +84,112 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 				if (typeof t != "object" || typeof Reflect.get(t, "getElement") != "function" || typeof Reflect.get(t, "focus") != "function") throw TypeError(`SBottomNav: overflow trigger '${e.id}' must expose SButtonApi`);
 				k.set(e.id, t);
 			}
-		}, H = (e) => {
+		}, U = (e) => {
 			let t = k.get(e.id);
 			if (!t) throw Error(`SBottomNav: overflow trigger '${e.id}' is unavailable`);
 			let n = t.getElement();
 			if (!(n instanceof HTMLButtonElement)) throw TypeError(`SBottomNav: overflow trigger '${e.id}' must be an action button`);
-			let r = B(e);
+			let r = V(e);
 			if (n.id !== r) throw Error(`SBottomNav: overflow trigger '${e.id}' owns id '${n.id}', expected '${r}'`);
 			return n;
-		}, U = (e) => !!(e.disabled || e.kind === "overflow" && e.items.length === 0), W = (e) => U(e) || e.kind === "action" ? !1 : e.kind === "destination" || e.kind === "view" ? x.modelValue === e.id : O.value === e.id || e.items.some((e) => (e.kind === "destination" || e.kind === "view") && !e.disabled && e.id === x.modelValue), ye = (e, t) => (e.target ?? "_self") === "_self" ? t instanceof MouseEvent ? t.button === 0 && !t.altKey && !t.ctrlKey && !t.metaKey && !t.shiftKey : !0 : !1, G = (e, t) => {
+		}, W = (e) => !!(e.disabled || e.kind === "overflow" && e.items.length === 0), G = (e) => W(e) || e.kind === "action" ? !1 : e.kind === "destination" || e.kind === "view" ? b.modelValue === e.id : D.value === e.id || e.items.some((e) => (e.kind === "destination" || e.kind === "view") && !e.disabled && e.id === b.modelValue), be = (e, t) => (e.target ?? "_self") === "_self" ? t instanceof MouseEvent ? t.button === 0 && !t.altKey && !t.ctrlKey && !t.metaKey && !t.shiftKey : !0 : !1, K = (e, t) => {
 			if (!e.disabled) {
 				if (e.kind === "destination") {
-					S("navigate", e, t), ye(e, t) && S("update:modelValue", e.id);
+					x("navigate", e, t), be(e, t) && x("update:modelValue", e.id);
 					return;
 				}
 				if (e.kind === "view") {
-					S("update:modelValue", e.id);
+					x("update:modelValue", e.id);
 					return;
 				}
-				S("action", e.id, t);
+				x("action", e.id, t);
 			}
-		}, K = (e = !1) => {
-			(N.value || F) && (O.value = null, F?.unregister({ restoreFocus: e }), F = null);
-		}, q = (e) => {
-			if (U(e)) return;
-			N.value && K(!1);
-			let n = H(e);
-			O.value = e.id, F = t({
+		}, q = (e = !1, t = !1) => {
+			t || (I?.(), I = null), (N.value || F) && (D.value = null, F?.unregister({
+				restoreFocus: e,
+				commitFocusHandoff: t
+			}), F = null);
+		}, J = (e) => {
+			if (W(e) || !O.value) return;
+			I?.(), I = null, N.value && q(!1);
+			let n = U(e);
+			D.value = e.id, F = t({
 				kind: "menu",
-				root: () => E.value,
+				root: () => T.value,
 				anchor: () => n,
 				restoreTarget: n,
-				requestDismiss: (e) => K(e === "escape")
+				requestDismiss: (e) => q(e === "escape"),
+				onRetire: () => q(!1)
 			});
-		}, be = (e, t) => {
-			K(!1), G(t, e);
 		}, xe = (e, t) => {
-			if (!U(e)) {
+			q(!1), K(t, e);
+		}, Se = (e, t) => {
+			if (!W(e)) {
 				if (e.kind === "overflow") {
-					O.value === e.id ? K(!0) : q(e);
+					D.value === e.id ? q(!0) : J(e);
 					return;
 				}
-				K(!1), G(e, t);
+				q(!1), K(e, t);
 			}
-		}, Se = (e, t) => {
-			e.key !== "ArrowDown" || t.kind !== "overflow" || U(t) || (e.preventDefault(), q(t));
 		}, Ce = (e, t) => {
+			e.key !== "ArrowDown" || t.kind !== "overflow" || W(t) || (e.preventDefault(), J(t));
+		}, we = (e, t) => {
 			if (e.kind !== "action" && e.kind !== "destination") throw TypeError(`SBottomNav: overflow menu accepts action/destination entries, received '${e.kind}'`);
 			let n = N.value;
 			if (!n) throw Error(`SBottomNav: selected menu entry '${e.id}' without an active overflow`);
 			let r = n.items.find((t) => t.id === e.id);
 			if (!r) throw Error(`SBottomNav: selected unknown overflow entry '${e.id}'`);
-			r.disabled || (G(r, t), K(!0));
-		}, we = (e) => {
+			r.disabled || (K(r, t), q(!0));
+		}, Te = (e) => {
 			if (!N.value) return;
 			let t = e.relatedTarget;
-			t instanceof Node && T.value?.contains(t) || K(!1);
-		}, Te = (t) => {
+			t instanceof Node && w.value?.contains(t) || q(!1);
+		}, Ee = (t) => {
 			let n = N.value;
 			if (!n) return;
-			let r = H(n), i = F?.focusScope() ?? document, a = e(r, i, E.value, t.shiftKey);
-			t.preventDefault(), K(!1), a && m(() => a.focus());
-		}, J = (e) => {
-			if (!x.scrollTargetId || typeof window > "u" || typeof document > "u") return;
+			let r = U(n), i = F?.focusScope() ?? document, a = e(r, i, T.value, t.shiftKey);
+			t.preventDefault(), I?.(), I = a && F ? F.handoffFocus(a) : null, q(!1, !0);
+		}, Y = (e) => {
+			if (!b.scrollTargetId || typeof window > "u" || typeof document > "u") return;
 			let t = e.target, n = 0;
-			if (t instanceof HTMLElement && t.id === x.scrollTargetId) n = t.scrollTop || 0;
-			else if (t === document && document.documentElement.id === x.scrollTargetId) n = document.documentElement.scrollTop || document.body.scrollTop || 0;
+			if (t instanceof HTMLElement && t.id === b.scrollTargetId) n = t.scrollTop || 0;
+			else if (t === document && document.documentElement.id === b.scrollTargetId) n = document.documentElement.scrollTop || document.body.scrollTop || 0;
 			else return;
-			n > P + 10 ? D.value = !0 : n < P - 5 && (D.value = !1), P = n;
-		}, Y = [
+			n > P + 10 ? E.value = !0 : n < P - 5 && (E.value = !1), P = n;
+		}, X = [
 			"kind",
 			"id",
 			"label",
 			"icon",
 			"badge",
 			"disabled"
-		], Ee = {
-			action: new Set(Y),
+		], De = {
+			action: new Set(X),
 			destination: /* @__PURE__ */ new Set([
-				...Y,
+				...X,
 				"href",
 				"to",
 				"target",
 				"rel"
 			]),
-			view: new Set(Y),
+			view: new Set(X),
 			overflow: /* @__PURE__ */ new Set([
-				...Y,
+				...X,
 				"menuLabel",
 				"items"
 			])
 		};
-		function X(e, t) {
+		function Z(e, t) {
 			if (typeof e != "object" || !e || Array.isArray(e)) throw TypeError(`SBottomNav: ${t} must be an object`);
 		}
-		function De(e, t) {
+		function Oe(e, t) {
 			let n = e.kind;
 			if (n !== "action" && n !== "destination" && n !== "view") throw TypeError(`SBottomNav: ${t}.kind must be action, destination, or view`);
-			return Z(e, t, n), n;
+			return Q(e, t, n), n;
 		}
-		function Z(e, t, n) {
+		function Q(e, t, n) {
 			for (let r of Reflect.ownKeys(e)) {
-				if (typeof r != "string" || !Ee[n].has(r)) throw TypeError(`SBottomNav: ${t} has unsupported field ${String(r)}`);
+				if (typeof r != "string" || !De[n].has(r)) throw TypeError(`SBottomNav: ${t} has unsupported field ${String(r)}`);
 				let i = Object.getOwnPropertyDescriptor(e, r);
 				if (!i?.enumerable || !("value" in i)) throw TypeError(`SBottomNav: ${t}.${r} must be an enumerable data property`);
 			}
@@ -187,7 +198,7 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 			if (typeof e.icon != "object" && typeof e.icon != "function") throw TypeError(`SBottomNav: ${t}.icon must be a Vue component`);
 			if (e.disabled !== void 0 && typeof e.disabled != "boolean") throw TypeError(`SBottomNav: ${t}.disabled must be a boolean`);
 			if (e.badge !== void 0 && (typeof e.badge != "number" || !Number.isSafeInteger(e.badge) || e.badge < 0)) throw TypeError(`SBottomNav: ${t}.badge must be a non-negative safe integer`);
-			n === "destination" && i({
+			n === "destination" && a({
 				owner: `SBottomNav: ${t}`,
 				href: e.href,
 				to: e.to,
@@ -195,15 +206,15 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 				rel: e.rel
 			});
 		}
-		function Q(e) {
+		function ke(e) {
 			if (!Array.isArray(e) || e.length === 0) throw TypeError("SBottomNav: items must be a non-empty array");
 			let t = /* @__PURE__ */ new Set();
 			for (let [n, r] of e.entries()) {
 				let e = `items[${n}]`;
-				X(r, e);
+				Z(r, e);
 				let i = r.kind;
 				if (i !== "action" && i !== "destination" && i !== "view" && i !== "overflow") throw TypeError(`SBottomNav: ${e}.kind must be action, destination, view, or overflow`);
-				Z(r, e, i);
+				Q(r, e, i);
 				let a = r.id;
 				if (typeof a != "string") throw TypeError(`SBottomNav: ${e}.id must be a string`);
 				if (t.has(a)) throw TypeError(`SBottomNav: duplicate item id '${a}'`);
@@ -212,7 +223,7 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 					if (!Array.isArray(r.items)) throw TypeError(`SBottomNav: ${e}.items must be an array`);
 					for (let [n, i] of r.items.entries()) {
 						let r = `${e}.items[${n}]`;
-						X(i, r), De(i, r);
+						Z(i, r), Oe(i, r);
 						let a = i.id;
 						if (typeof a != "string") throw TypeError(`SBottomNav: ${r}.id must be a string`);
 						if (t.has(a)) throw TypeError(`SBottomNav: duplicate item id '${a}'`);
@@ -222,65 +233,65 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 			}
 		}
 		let $ = () => {
-			let e = T.value;
+			let e = w.value;
 			if (!e) return;
 			let t = {
-				hidden: D.value,
+				hidden: E.value,
 				height: Math.max(0, e.offsetHeight)
 			};
-			R && R.hidden === t.hidden && R.height === t.height || (R = t, S("layout-change", t));
+			z && z.hidden === t.hidden && z.height === t.height || (z = t, x("layout-change", t));
 		};
-		return ae(() => {
-			D.value = x.hidden ?? !1, typeof document < "u" && document.addEventListener("scroll", J, {
+		return se(() => {
+			E.value = b.hidden ?? !1, typeof document < "u" && document.addEventListener("scroll", Y, {
 				passive: !0,
 				capture: !0
-			}), typeof ResizeObserver < "u" && T.value ? (I = new ResizeObserver($), I.observe(T.value)) : typeof window < "u" && (L = !0, window.addEventListener("resize", $)), $();
-		}), v(D, (e) => {
-			e && K(!1), $();
-		}), v(() => x.hidden, (e) => {
-			D.value = e;
-		}), v(() => x.modelValue, () => {
-			K(!1), D.value = x.hidden ?? !1, P = 0, $();
-		}), v(() => x.items, () => {
-			if (Q(x.items), O.value) {
-				let e = M.value.find((e) => e.id === O.value);
-				(!e || U(e)) && K(!1);
+			}), typeof ResizeObserver < "u" && w.value ? (L = new ResizeObserver($), L.observe(w.value)) : typeof window < "u" && (R = !0, window.addEventListener("resize", $)), $();
+		}), _(E, (e) => {
+			e && q(!1), $();
+		}), _(() => b.hidden, (e) => {
+			E.value = e;
+		}), _(() => b.modelValue, () => {
+			q(!1), E.value = b.hidden ?? !1, P = 0, $();
+		}), _(() => b.items, () => {
+			if (ke(b.items), D.value) {
+				let e = M.value.find((e) => e.id === D.value);
+				(!e || W(e)) && q(!1);
 			}
-		}, { immediate: !0 }), v(() => [
-			x.label,
-			x.modelValue,
-			x.scrollTargetId
+		}, { immediate: !0 }), _(() => [
+			b.label,
+			b.modelValue,
+			b.scrollTargetId
 		], ([e, t, n]) => {
 			if (typeof e != "string" || !e.trim()) throw TypeError("SBottomNav: label must be non-empty");
 			if (typeof t != "string" || !t.trim()) throw TypeError("SBottomNav: modelValue must be a non-empty destination id");
 			if (n !== void 0 && (typeof n != "string" || !n.trim())) throw TypeError("SBottomNav: scrollTargetId must be a non-empty string when provided");
-		}, { immediate: !0 }), ie(() => {
-			typeof document < "u" && document.removeEventListener("scroll", J, { capture: !0 }), I?.disconnect(), I = null, L && typeof window < "u" && window.removeEventListener("resize", $), L = !1, F?.unregister({ restoreFocus: !1 }), F = null, k.clear(), A.clear();
-		}), (e, t) => (h(), l("nav", p({
+		}, { immediate: !0 }), oe(() => {
+			I?.(), typeof document < "u" && document.removeEventListener("scroll", Y, { capture: !0 }), L?.disconnect(), L = null, R && typeof window < "u" && window.removeEventListener("resize", $), R = !1, F?.unregister({ restoreFocus: !1 }), F = null, k.clear(), A.clear();
+		}), (e, t) => (p(), l("nav", f({
 			ref_key: "navRef",
-			ref: T
-		}, ce(he).bindings(), {
-			class: ["s-bottom-nav", { "s-bottom-nav--hidden": D.value }],
+			ref: w
+		}, g(ge).bindings(), {
+			class: ["s-bottom-nav", { "s-bottom-nav--hidden": E.value }],
 			"data-test": "bottom-nav",
-			"aria-label": f.label,
-			onFocusout: we
-		}), [u("div", de, [(h(!0), l(ne, null, oe(f.items, (e) => (h(), l("div", {
+			"aria-label": d.label,
+			onFocusout: Te
+		}), [ie("div", fe, [(p(!0), l(re, null, ce(d.items, (e) => (p(), l("div", {
 			key: e.id,
 			class: "s-bottom-nav__item"
-		}, [e.kind === "destination" ? (h(), s(ee, p({
+		}, [e.kind === "destination" ? (p(), s(te, f({
 			key: 0,
 			ref_for: !0
-		}, ge(e), {
+		}, _e(e), {
 			"leading-icon": e.icon,
 			disabled: e.disabled,
-			active: W(e),
+			active: G(e),
 			variant: "bottom-navigation",
 			width: "full",
-			"aria-label": C.value ? e.label : void 0,
+			"aria-label": S.value ? e.label : void 0,
 			"data-testid": `bottom-nav-${e.id}`,
-			onClick: (t) => be(t, e)
+			onClick: (t) => xe(t, e)
 		}), {
-			default: y(() => [C.value ? c("", !0) : (h(), l("span", fe, _(e.label), 1))]),
+			default: v(() => [S.value ? c("", !0) : (p(), l("span", pe, h(e.label), 1))]),
 			_: 2
 		}, 1040, [
 			"leading-icon",
@@ -289,32 +300,32 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 			"aria-label",
 			"data-testid",
 			"onClick"
-		])) : (h(), s(a, {
+		])) : (p(), s(ee, {
 			key: 1,
 			ref_for: !0,
-			ref: (t) => ve(e, t),
-			label: C.value ? void 0 : e.label,
+			ref: (t) => ye(e, t),
+			label: S.value ? void 0 : e.label,
 			"leading-icon": e.icon,
-			"icon-only": C.value,
-			disabled: U(e),
+			"icon-only": S.value,
+			disabled: W(e),
 			size: "sm",
-			severity: W(e) ? "primary" : "secondary",
-			appearance: W(e) ? "soft" : "ghost",
+			severity: G(e) ? "primary" : "secondary",
+			appearance: G(e) ? "soft" : "ghost",
 			shape: "row",
 			width: "full",
 			"content-align": "center",
-			id: e.kind === "overflow" ? B(e) : void 0,
-			"aria-current": e.kind === "view" && W(e) ? "page" : void 0,
-			"aria-label": C.value ? e.label : void 0,
+			id: e.kind === "overflow" ? V(e) : void 0,
+			"aria-current": e.kind === "view" && G(e) ? "page" : void 0,
+			"aria-label": S.value ? e.label : void 0,
 			"aria-haspopup": e.kind === "overflow" && e.items.length > 0 ? "menu" : void 0,
 			disclosure: e.kind === "overflow" && e.items.length > 0 ? {
-				expanded: O.value === e.id,
-				controls: V(e)
+				expanded: D.value === e.id,
+				controls: H(e)
 			} : void 0,
 			"data-test": `bottom-nav-${e.id}`,
 			"data-testid": `bottom-nav-${e.id}`,
-			onClick: (t) => xe(e, t),
-			onKeydown: (t) => Se(t, e)
+			onClick: (t) => Se(e, t),
+			onKeydown: (t) => Ce(t, e)
 		}, null, 8, [
 			"label",
 			"leading-icon",
@@ -331,35 +342,35 @@ var ue = ["aria-label"], de = { class: "s-bottom-nav__items" }, fe = { key: 0 },
 			"data-testid",
 			"onClick",
 			"onKeydown"
-		])), e.badge === void 0 ? c("", !0) : (h(), l("span", pe, [d(r, {
+		])), e.badge === void 0 ? c("", !0) : (p(), l("span", me, [u(i, {
 			severity: "danger",
 			size: "xs"
 		}, {
-			default: y(() => [re(_(e.badge), 1)]),
+			default: v(() => [ae(h(e.badge), 1)]),
 			_: 2
-		}, 1024)]))]))), 128)), N.value ? (h(), l("div", {
+		}, 1024)]))]))), 128)), N.value && g(O) ? (p(), l("div", {
 			key: 0,
 			ref_key: "overflowLayerRef",
-			ref: E,
+			ref: T,
 			class: "s-bottom-nav__overflow-layer",
 			"data-test": "bottom-nav-overflow"
-		}, [d(te, {
-			id: V(N.value),
+		}, [u(ne, {
+			id: H(N.value),
 			label: N.value.menuLabel,
 			density: "compact",
 			orientation: "horizontal",
 			autofocus: "",
-			items: _e.value,
-			onEscape: t[0] ||= (e) => K(!0),
-			onFocusExit: t[1] ||= (e) => K(!1),
-			onSelect: Ce,
-			onTab: Te
+			items: ve.value,
+			onEscape: t[0] ||= (e) => q(!0),
+			onFocusExit: t[1] ||= (e) => q(!1),
+			onSelect: we,
+			onTab: Ee
 		}, null, 8, [
 			"id",
 			"label",
 			"items"
-		])], 512)) : c("", !0)]), e.$slots.status ? (h(), l("div", me, [se(e.$slots, "status", {}, void 0, !0)])) : c("", !0)], 16, ue));
+		])], 512)) : c("", !0)]), e.$slots.status ? (p(), l("div", he, [le(e.$slots, "status", {}, void 0, !0)])) : c("", !0)], 16, de));
 	}
 });
 //#endregion
-export { b as default };
+export { y as default };

package/dist/src/components/shared/navigation/SBreadcrumbs.vue.d.ts

@@ -24,11 +24,11 @@ type __VLS_Props = {
     ariaLabel?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    action: (id: string, event: MouseEvent) => any;
     navigate: (item: BreadcrumbDestinationItem, event: MouseEvent) => any;
+    action: (id: string, event: MouseEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((id: string, event: MouseEvent) => any) | undefined;
     onNavigate?: ((item: BreadcrumbDestinationItem, event: MouseEvent) => any) | undefined;
+    onAction?: ((id: string, event: MouseEvent) => any) | undefined;
 }>, {
     ariaLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/src/components/shared/navigation/STabList.vue.d.ts

@@ -33,8 +33,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {
     scrollActiveIntoCenter: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     ariaLabel: string;
-    divider: boolean;
     placement: "top" | "bottom";
+    divider: boolean;
     inset: "none" | "compact" | "content";
     headerPosition: "sticky" | "static";
     tabListId: string;

package/dist/src/components/shared/navigation/STabPanel.vue.d.ts

@@ -26,10 +26,10 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     overflow: "visible" | "hidden" | "auto";
     surface: "default" | "workbench-right-drawer" | "workbench-bottom-dock";
-    padding: "none" | "control" | "content" | "section" | "panel";
     align: "stretch" | "start" | "center" | "end";
-    contentGap: "none" | "control" | "content" | "section" | "panel";
     unmount: boolean;
+    padding: "none" | "control" | "content" | "section" | "panel";
+    contentGap: "none" | "control" | "content" | "section" | "panel";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/src/components/shared/navigation/SWizardSteps.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { useUiKitLocale as e } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { validateBoolean as n, validateExactString as r, validateNonEmptyString as i } from "../../../internal/runtimeContract.js";
+import { validateBoolean as e, validateExactString as t, validateNonEmptyString as n } from "../../../internal/runtimeContract.js";
+import { useUiKitLocale as r } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as i } from "../../../internal/ownedAttrs.js";
 import a from "../controls/SButton.vue.js";
 import { selectionKeyToken as o, validateSelectionIdentities as s } from "../_internal/useSelectionRoving.js";
 import { Fragment as c, computed as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, openBlock as h, renderList as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
@@ -24,7 +24,7 @@ var b = [
 	},
 	emits: ["update:modelValue"],
 	setup(p, { emit: T }) {
-		let E = p, { t: D } = e(), O = T, k = t({
+		let E = p, { t: D } = r(), O = T, k = i({
 			component: "SWizardSteps",
 			owner: "ordered wizard navigation"
 		}), A = /* @__PURE__ */ new Set([
@@ -40,29 +40,29 @@ var b = [
 				if (!r?.enumerable || !("value" in r)) throw TypeError(`SWizardSteps: ${t}.${n} must be an enumerable data property`);
 			}
 		}
-		let M = l(() => r("SWizardSteps", "columns", E.columns, [
+		let M = l(() => t("SWizardSteps", "columns", E.columns, [
 			"auto",
 			"2",
 			"3",
 			"4"
-		])), N = l(() => r("SWizardSteps", "density", E.density, ["default", "compact"])), P = l(() => i("SWizardSteps", "ariaLabel", E.ariaLabel ?? D("navigation.wizardSteps"))), F = l(() => {
+		])), N = l(() => t("SWizardSteps", "density", E.density, ["default", "compact"])), P = l(() => n("SWizardSteps", "ariaLabel", E.ariaLabel ?? D("navigation.wizardSteps"))), F = l(() => {
 			if (M.value, N.value, P.value, !Array.isArray(E.steps) || E.steps.length === 0) throw TypeError("SWizardSteps: steps must be a non-empty array");
-			let e = [];
-			for (let [t, r] of E.steps.entries()) {
-				let a = `steps[${t}]`;
-				j(r, a), i("SWizardSteps", `${a}.title`, r.title), r.disabled !== void 0 && n("SWizardSteps", `${a}.disabled`, r.disabled), e.push(o("SWizardSteps", r.id, `${a}.id`));
+			let t = [];
+			for (let [r, i] of E.steps.entries()) {
+				let a = `steps[${r}]`;
+				j(i, a), n("SWizardSteps", `${a}.title`, i.title), i.disabled !== void 0 && e("SWizardSteps", `${a}.disabled`, i.disabled), t.push(o("SWizardSteps", i.id, `${a}.id`));
 			}
 			s("SWizardSteps", E.steps.map((e, t) => ({
 				key: e.id,
 				coordinate: `steps[${t}].id`
 			})));
-			let t = o("SWizardSteps", E.modelValue, "modelValue"), r = e.indexOf(t);
-			if (r < 0) throw Error("SWizardSteps: modelValue does not match any step");
-			return E.steps.map((t, n) => ({
+			let r = o("SWizardSteps", E.modelValue, "modelValue"), i = t.indexOf(r);
+			if (i < 0) throw Error("SWizardSteps: modelValue does not match any step");
+			return E.steps.map((e, n) => ({
 				index: n,
-				state: n === r ? "current" : n < r ? "completed" : "upcoming",
-				step: t,
-				token: e[n]
+				state: n === i ? "current" : n < i ? "completed" : "upcoming",
+				step: e,
+				token: t[n]
 			}));
 		});
 		function I(e) {

package/dist/src/components/shared/persona/SPersonaProjectPicker.vue.d.ts

@@ -8,16 +8,16 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     refresh: () => any;
-    "update:open": (open: boolean) => any;
     navigate: (relativePath: string) => any;
+    "update:open": (open: boolean) => any;
     "select-root": (rootId: string) => any;
     "load-more": () => any;
     confirm: (project: PersonaProjectPickerEntry) => any;
     "activate-connected": (bindingId: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRefresh?: (() => any) | undefined;
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onNavigate?: ((relativePath: string) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onSelect-root"?: ((rootId: string) => any) | undefined;
     "onLoad-more"?: (() => any) | undefined;
     onConfirm?: ((project: PersonaProjectPickerEntry) => any) | undefined;