@pgcorp/ui-kit 0.14.0 → 0.15.0

package/dist/src/components/shared/controls/SMenuSurface.vue_vue_type_script_setup_true_lang.js

@@ -6,17 +6,17 @@ import ee from "../_internal/SMenuLayer.vue.js";
 import o from "../_internal/SMenuItem.vue.js";
 import te from "../_internal/SMenuSeparator.vue.js";
 import { validateSMenuEntries as ne } from "./menu.js";
-import { Fragment as s, Teleport as re, computed as c, createBlock as l, createCommentVNode as ie, createElementBlock as u, createElementVNode as d, createVNode as ae, defineComponent as f, inject as p, mergeProps as oe, nextTick as m, onBeforeUnmount as se, onMounted as ce, openBlock as h, provide as g, ref as _, renderList as v, resolveComponent as le, toDisplayString as ue, toRef as de, unref as y, watch as fe, withCtx as b } from "vue";
+import { Fragment as s, Teleport as re, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as ie, defineComponent as p, inject as m, mergeProps as ae, nextTick as h, onBeforeUnmount as oe, onMounted as se, openBlock as g, provide as _, ref as v, renderList as y, resolveComponent as ce, toDisplayString as b, toRef as le, unref as x, watch as ue, withCtx as de } from "vue";
 //#region src/components/shared/controls/SMenuSurface.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var fe = [
 	"data-density",
 	"data-orientation",
 	"aria-label",
 	"aria-orientation"
-], S = ["aria-label", "data-menu-group-id"], pe = {
+], pe = ["aria-label", "data-menu-group-id"], S = {
 	class: "s-menu-group__label",
 	"aria-hidden": "true"
-}, C = /*@__PURE__*/ f({
+}, C = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SMenuSurface",
 	props: {
@@ -38,80 +38,81 @@ var x = [
 		"submenu-back",
 		"dismiss-tree"
 	],
-	setup(f, { expose: C, emit: me }) {
-		let w = f, T = me, he = e({
+	setup(p, { expose: C, emit: me }) {
+		let w = p, T = me, he = e({
 			component: "SMenuSurface",
 			owner: "menu root"
 		});
 		t({ owner: "SMenuSurface" });
-		let E = p(i, -1) + 1;
-		g(i, E);
-		let D = _(null), O = _(null), k = p(a, null), A = null, j = /* @__PURE__ */ new Map();
-		g(r, {
-			density: de(w, "density"),
+		let E = m(i, -1) + 1;
+		_(i, E);
+		let D = v(null), O = v(null), k = m(a, null), A = null, j = /* @__PURE__ */ new Map();
+		_(r, {
+			density: le(w, "density"),
 			register: (e) => {
 				if (j.has(e.entryId)) throw Error(`SMenuSurface: duplicate mounted entry id '${e.entryId}'`);
 				return j.set(e.entryId, e), () => j.delete(e.entryId);
 			}
 		});
-		let M = _(null), N = _(!0), P = _(null), F = _(null), I = c(() => P.value?.getElement() ?? null), { position: L, availableSize: ge, zIndex: _e, open: ve, close: R } = n(P, {
+		let M = v(null), N = v(!0), P = v(null), F = v(null), I = c(() => P.value?.getElement() ?? null), { portalTarget: L, position: ge, availableSize: R, zIndex: _e, open: ve, close: z } = n(P, {
 			onRetire: () => {
 				M.value = null;
 			},
 			onDismiss: (e) => {
 				M.value = null, e === "outside" && T("dismiss-tree");
 			}
-		}), ye = (e) => e.flatMap((e) => e.kind === "group" ? [...e.children] : e.kind === "separator" ? [] : [e]), z = (e) => ye(w.items).find((t) => t.id === e), B = c(() => {
-			let e = M.value ? z(M.value) : void 0;
+		}), ye = (e) => e.flatMap((e) => e.kind === "group" ? [...e.children] : e.kind === "separator" ? [] : [e]), B = (e) => ye(w.items).find((t) => t.id === e), V = c(() => {
+			let e = M.value ? B(M.value) : void 0;
 			return e?.kind === "submenu" ? e : null;
-		}), V = "", H = null, U = () => [...j.values()].filter((e) => e.element().isConnected).sort((e, t) => {
+		}), H = "", U = null, W = () => [...j.values()].filter((e) => e.element().isConnected).sort((e, t) => {
 			let n = e.element().compareDocumentPosition(t.element());
 			return n & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
-		}), W = (e, t) => {
+		}), G = (e, t) => {
 			for (let t of e) t.setTabStop(!1);
 			let n = e[t];
 			n && (n.setTabStop(!0), n.focus(), $());
-		}, G = () => {
-			let e = U();
-			e.length > 0 && W(e, 0);
 		}, K = () => {
-			let e = U();
-			e.length > 0 && W(e, e.length - 1);
+			let e = W();
+			e.length > 0 && G(e, 0);
 		}, q = () => {
+			let e = W();
+			e.length > 0 && G(e, e.length - 1);
+		}, be = () => {
 			if (typeof w.label != "string" || !w.label.trim()) throw TypeError("SMenuSurface: label must be a non-empty string");
 			ne(w.items);
-		}, be = (e) => {
-			let t = U();
+		}, xe = (e) => {
+			let t = W();
 			if (t.length === 0) return;
 			let n = t.findIndex((e) => e.isFocused());
-			W(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
-		}, xe = (e) => {
+			G(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
+		}, Se = (e) => {
 			let t = e.toLocaleLowerCase();
-			V += t, H && clearTimeout(H), H = setTimeout(() => {
-				V = "", H = null;
+			H += t, U && clearTimeout(U), U = setTimeout(() => {
+				H = "", U = null;
 			}, 500);
-			let n = [...V].every((e) => e === t) ? t : V, r = U();
+			let n = [...H].every((e) => e === t) ? t : H, r = W();
 			if (r.length === 0) return;
 			let i = r.findIndex((e) => e.isFocused()), a = [...r.slice(i + 1), ...r.slice(0, i + 1)].find((e) => e.label().trim().toLocaleLowerCase().startsWith(n));
-			a && W(r, r.indexOf(a));
+			a && G(r, r.indexOf(a));
 		};
 		async function J(e, t) {
-			let n = z(e), r = j.get(e);
+			if (L.value === null) return;
+			let n = B(e), r = j.get(e);
 			if (n?.kind === "submenu" && !n.disabled && r) {
 				if (M.value === e) {
-					t && await m(() => F.value?.focusFirst());
+					t && await h(() => F.value?.focusFirst());
 					return;
 				}
-				M.value && R("outside"), N.value = t, M.value = e, await ve({
+				M.value && z("outside"), N.value = t, M.value = e, await ve({
 					type: "element",
 					element: r.element(),
 					align: "left",
 					placement: "inline"
-				}, r.element()), t && await m(() => F.value?.focusFirst());
+				}, r.element()), t && await h(() => F.value?.focusFirst());
 			}
 		}
 		function Y(e) {
-			M.value &&= (R(e), null);
+			M.value &&= (z(e), null);
 		}
 		function X(e) {
 			e.kind === "submenu" && !e.disabled ? J(e.id, !1) : M.value && Y("outside");
@@ -119,11 +120,11 @@ var x = [
 		function Z(e, t) {
 			e.kind === "submenu" || e.disabled || T("select", e, t);
 		}
-		function Se(e, t) {
+		function Ce(e, t) {
 			T("select", e, t);
 		}
 		function Q() {
-			return U().find((e) => e.isFocused());
+			return W().find((e) => e.isFocused());
 		}
 		function $() {
 			let e = D.value, t = Q();
@@ -131,9 +132,9 @@ var x = [
 			let n = e.getBoundingClientRect(), r = t.element().getBoundingClientRect();
 			r.top < n.top ? e.scrollTop += r.top - n.top : r.bottom > n.bottom && (e.scrollTop += r.bottom - n.bottom), r.left < n.left ? e.scrollLeft += r.left - n.left : r.right > n.right && (e.scrollLeft += r.right - n.right);
 		}
-		let Ce = (e) => {
+		let we = (e) => {
 			let t = e.target;
-			if (e.currentTarget !== t && !U().some((e) => e.ownsEventTarget(t))) return;
+			if (e.currentTarget !== t && !W().some((e) => e.ownsEventTarget(t))) return;
 			if (e.key === "Tab") {
 				T("tab", e);
 				return;
@@ -149,7 +150,7 @@ var x = [
 				return;
 			}
 			if (e.key === n || e.key === r) {
-				e.preventDefault(), be(e.key === n ? 1 : -1);
+				e.preventDefault(), xe(e.key === n ? 1 : -1);
 				return;
 			}
 			if (w.orientation === "horizontal" && e.key === "ArrowDown") {
@@ -158,7 +159,7 @@ var x = [
 				return;
 			}
 			if (e.key === "Home" || e.key === "End") {
-				e.preventDefault(), e.key === "Home" ? G() : K();
+				e.preventDefault(), e.key === "Home" ? K() : q();
 				return;
 			}
 			if (e.key === "Enter" || e.key === " ") {
@@ -166,12 +167,12 @@ var x = [
 				t && t.activate(e);
 				return;
 			}
-			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && xe(e.key);
-		}, we = (e) => {
+			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && Se(e.key);
+		}, Te = (e) => {
 			let t = e.relatedTarget;
 			t instanceof Node && (D.value?.contains(t) || I.value?.contains(t)) || T("focus-exit", e);
 		};
-		return ce(() => {
+		return se(() => {
 			if (k) {
 				let e = D.value, t = O.value;
 				if (!e || !t) throw Error("SMenuSurface: native surface/content are unavailable after mounting");
@@ -181,49 +182,49 @@ var x = [
 					revealFocusedItem: $
 				});
 			}
-			w.autofocus && m(w.initialFocus === "last" ? K : G);
-		}), fe(() => [w.label, w.items], () => {
-			q(), M.value && !B.value && Y("outside");
+			w.autofocus && h(w.initialFocus === "last" ? q : K);
+		}), ue(() => [w.label, w.items], () => {
+			be(), M.value && !V.value && Y("outside");
 		}, {
 			immediate: !0,
 			deep: !0
-		}), se(() => {
-			A?.(), A = null, H && clearTimeout(H);
+		}), oe(() => {
+			A?.(), A = null, U && clearTimeout(U);
 		}), C({
-			focusFirst: G,
-			focusLast: K
+			focusFirst: K,
+			focusLast: q
 		}), (e, t) => {
-			let n = le("SMenuSurface", !0);
-			return h(), u("div", oe({
+			let n = ce("SMenuSurface", !0);
+			return g(), d("div", ae({
 				ref_key: "surfaceRef",
 				ref: D
-			}, y(he).bindings(), {
+			}, x(he).bindings(), {
 				class: "s-menu-surface",
-				"data-density": f.density,
-				"data-orientation": f.orientation,
+				"data-density": p.density,
+				"data-orientation": p.orientation,
 				"data-menu-depth": E,
 				role: "menu",
-				"aria-label": f.label,
-				"aria-orientation": f.orientation,
-				onKeydown: Ce,
-				onFocusout: we
-			}), [d("div", {
+				"aria-label": p.label,
+				"aria-orientation": p.orientation,
+				onKeydown: we,
+				onFocusout: Te
+			}), [f("div", {
 				ref_key: "contentRef",
 				ref: O,
 				class: "s-menu-surface__content"
-			}, [(h(!0), u(s, null, v(f.items, (e) => (h(), u(s, { key: e.id }, [e.kind === "separator" ? (h(), l(te, {
+			}, [(g(!0), d(s, null, y(p.items, (e) => (g(), d(s, { key: e.id }, [e.kind === "separator" ? (g(), l(te, {
 				key: 0,
 				"entry-id": e.id
-			}, null, 8, ["entry-id"])) : e.kind === "group" ? (h(), u("div", {
+			}, null, 8, ["entry-id"])) : e.kind === "group" ? (g(), d("div", {
 				key: 1,
 				class: "s-menu-group",
 				role: "group",
 				"aria-label": e.label,
 				"data-menu-group-id": e.id
-			}, [d("div", pe, ue(e.label), 1), (h(!0), u(s, null, v(e.children, (e) => (h(), l(o, {
+			}, [f("div", S, b(e.label), 1), (g(!0), d(s, null, y(e.children, (e) => (g(), l(o, {
 				key: e.id,
 				entry: e,
-				"submenu-open": B.value?.id === e.id,
+				"submenu-open": V.value?.id === e.id,
 				onSelect: (t) => Z(e, t),
 				onOpenSubmenu: (t) => J(e.id, !0),
 				onPointerIntent: (t) => X(e)
@@ -233,10 +234,10 @@ var x = [
 				"onSelect",
 				"onOpenSubmenu",
 				"onPointerIntent"
-			]))), 128))], 8, S)) : (h(), l(o, {
+			]))), 128))], 8, pe)) : (g(), l(o, {
 				key: 2,
 				entry: e,
-				"submenu-open": B.value?.id === e.id,
+				"submenu-open": V.value?.id === e.id,
 				onSelect: (t) => Z(e, t),
 				onOpenSubmenu: (t) => J(e.id, !0),
 				onPointerIntent: (t) => X(e)
@@ -246,28 +247,31 @@ var x = [
 				"onSelect",
 				"onOpenSubmenu",
 				"onPointerIntent"
-			]))], 64))), 128))], 512), (h(), l(re, { to: "body" }, [B.value ? (h(), l(ee, {
+			]))], 64))), 128))], 512), x(L) ? (g(), l(re, {
+				key: 0,
+				to: x(L)
+			}, [V.value ? (g(), l(ee, {
 				key: 0,
 				ref_key: "submenuLayerRef",
 				ref: P,
 				kind: "submenu",
-				"landmark-label": `${f.label}: ${B.value.label}`,
-				position: y(L),
-				"available-size": y(ge),
-				"z-index": y(_e)
+				"landmark-label": `${p.label}: ${V.value.label}`,
+				position: x(ge),
+				"available-size": x(R),
+				"z-index": x(_e)
 			}, {
-				default: b(() => [ae(n, {
+				default: de(() => [ie(n, {
 					ref_key: "submenuSurfaceRef",
 					ref: F,
-					label: `${f.label}: ${B.value.label}`,
-					items: B.value.children,
-					density: f.density,
+					label: `${p.label}: ${V.value.label}`,
+					items: V.value.children,
+					density: p.density,
 					orientation: "vertical",
 					autofocus: N.value,
 					onEscape: t[0] ||= (e) => Y("escape"),
 					onSubmenuBack: t[1] ||= (e) => Y("escape"),
 					onDismissTree: t[2] ||= (e) => T("dismiss-tree"),
-					onSelect: Se,
+					onSelect: Ce,
 					onTab: t[3] ||= (e) => T("tab", e)
 				}, null, 8, [
 					"label",
@@ -281,7 +285,7 @@ var x = [
 				"position",
 				"available-size",
 				"z-index"
-			])) : ie("", !0)]))], 16, x);
+			])) : u("", !0)], 8, ["to"])) : u("", !0)], 16, fe);
 		};
 	}
 });

package/dist/src/components/shared/controls/SSelect.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SSelect.css_vue_type_style_index_0_src_df3d6688_scoped_df3d6688_lang.css";
+import "../../../../assets/src/components/shared/controls/SSelect.css_vue_type_style_index_0_src_d1ead6c0_scoped_d1ead6c0_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SSelect.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/components/shared/controls/SSelect.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-df3d6688"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-d1ead6c0"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SSelect.vue_vue_type_script_setup_true_lang.js

@@ -2,16 +2,17 @@ import { findRelativeTabTarget as e } from "../../../internal/focusNavigation.js
 import { registerLayer as t } from "../../../internal/layerStack.js";
 import { useOverlayAdmission as n } from "../../../internal/overlayHost.js";
 import { validateBoolean as r, validateDomId as i, validateExactString as a, validateNonEmptyString as o } from "../../../internal/runtimeContract.js";
-import { useFloatingPosition as s } from "../../../composables/useFloatingPosition.js";
-import { useUiKitLocale as ee } from "../../../composables/useUiKitLocale.js";
-import { mergeIdReferences as te, useOwnedAttrs as ne } from "../../../internal/ownedAttrs.js";
-import c from "./SField.vue.js";
-import { isSelectionModelList as l, resolveSelectionInventory as u, validateOptionalSelectionString as d, validateSelectionMarker as re, validateSelectionModel as f } from "../_internal/selectionContract.js";
-import ie from "./SComboboxTrigger.vue.js";
-import ae from "./SListbox.vue.js";
-import { Teleport as oe, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeProps as b, nextTick as x, normalizeStyle as se, onBeforeUnmount as ce, openBlock as S, ref as C, unref as w, useId as le, watch as ue, withCtx as de } from "vue";
+import { useOverlayPortalTarget as ee } from "../../../internal/overlayPortal.js";
+import { useFloatingPosition as te } from "../../../composables/useFloatingPosition.js";
+import { useUiKitLocale as s } from "../../../composables/useUiKitLocale.js";
+import { mergeIdReferences as c, useOwnedAttrs as ne } from "../../../internal/ownedAttrs.js";
+import re from "./SField.vue.js";
+import { isSelectionModelList as l, resolveSelectionInventory as u, validateOptionalSelectionString as d, validateSelectionMarker as ie, validateSelectionModel as f } from "../_internal/selectionContract.js";
+import ae from "./SComboboxTrigger.vue.js";
+import oe from "./SListbox.vue.js";
+import { Teleport as se, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as ce, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, nextTick as b, normalizeStyle as le, onBeforeUnmount as ue, openBlock as x, ref as S, unref as C, useId as w, watch as T, withCtx as de } from "vue";
 //#region src/components/shared/controls/SSelect.vue?vue&type=script&setup=true&lang.ts
-var T = /*@__PURE__*/ y({
+var E = /*@__PURE__*/ v({
 	inheritAttrs: !1,
 	__name: "SSelect",
 	props: {
@@ -47,121 +48,125 @@ var T = /*@__PURE__*/ y({
 		modelValue: {}
 	},
 	emits: ["update:modelValue"],
-	setup(y, { emit: T }) {
-		let E = y, { t: fe } = ee(), D = T, O = ne({
+	setup(v, { emit: E }) {
+		let D = v, { t: fe } = s(), O = E, pe = ne({
 			component: "SSelect",
 			owner: "combobox trigger"
-		}), k = p(() => O.bindings()), A = le(), j = p(() => {
-			let e = a("SSelect", "selectionMode", E.selectionMode ?? "single", ["single", "multiple"]), t;
-			if (E.emptyOptionLabel !== void 0) {
+		}), k = p(() => pe.bindings()), A = w(), j = p(() => {
+			let e = a("SSelect", "selectionMode", D.selectionMode ?? "single", ["single", "multiple"]), t;
+			if (D.emptyOptionLabel !== void 0) {
 				if (e === "multiple") throw Error("SSelect: emptyOptionLabel is available only in single selection mode");
-				t = o("SSelect", "emptyOptionLabel", E.emptyOptionLabel);
+				t = o("SSelect", "emptyOptionLabel", D.emptyOptionLabel);
 			}
 			return {
-				inputId: E.id === void 0 ? `s-select-${A}` : i("SSelect", "id", E.id),
-				label: E.label === void 0 ? void 0 : o("SSelect", "label", E.label),
-				placeholder: o("SSelect", "placeholder", E.placeholder ?? fe("forms.selectPlaceholder")),
-				disabled: r("SSelect", "disabled", E.disabled),
-				readonly: r("SSelect", "readonly", E.readonly),
-				required: r("SSelect", "required", E.required),
-				invalid: r("SSelect", "invalid", E.invalid),
-				errorMessage: d("SSelect", "errorMessage", E.errorMessage),
-				helpText: d("SSelect", "helpText", E.helpText),
-				size: a("SSelect", "size", E.size, [
+				inputId: D.id === void 0 ? `s-select-${A}` : i("SSelect", "id", D.id),
+				label: D.label === void 0 ? void 0 : o("SSelect", "label", D.label),
+				placeholder: o("SSelect", "placeholder", D.placeholder ?? fe("forms.selectPlaceholder")),
+				disabled: r("SSelect", "disabled", D.disabled),
+				readonly: r("SSelect", "readonly", D.readonly),
+				required: r("SSelect", "required", D.required),
+				invalid: r("SSelect", "invalid", D.invalid),
+				errorMessage: d("SSelect", "errorMessage", D.errorMessage),
+				helpText: d("SSelect", "helpText", D.helpText),
+				size: a("SSelect", "size", D.size, [
 					"xs",
 					"sm",
 					"md"
 				]),
-				appearance: a("SSelect", "appearance", E.appearance, ["field", "swatch"]),
-				align: a("SSelect", "align", E.align, [
+				appearance: a("SSelect", "appearance", D.appearance, ["field", "swatch"]),
+				align: a("SSelect", "align", D.align, [
 					"left",
 					"right",
 					"center"
 				]),
-				triggerMarker: re("SSelect", "triggerMarker", E.triggerMarker),
-				title: d("SSelect", "title", E.title),
+				triggerMarker: ie("SSelect", "triggerMarker", D.triggerMarker),
+				title: d("SSelect", "title", D.title),
 				selectionMode: e,
 				emptyOptionLabel: t
 			};
-		}), M = p(() => `${j.value.inputId}-listbox`), N = p(() => j.value.selectionMode), P = p(() => u("SSelect", E.options)), F = p(() => f("SSelect", j.value.selectionMode, E.modelValue, P.value)), I = p(() => {
+		}), M = p(() => `${j.value.inputId}-listbox`), N = p(() => j.value.selectionMode), P = p(() => u("SSelect", D.options)), F = p(() => f("SSelect", j.value.selectionMode, D.modelValue, P.value)), I = p(() => {
 			let e = k.value["aria-label"];
 			return e === void 0 ? j.value.label ?? j.value.placeholder : o("SSelect", "aria-label", e);
-		}), L = p(() => P.value.options.find((e) => F.value.has(e.token))?.option ?? null), R = p(() => P.value.options.filter((e) => F.value.has(e.token)).map((e) => e.option.label).join(", ")), z = p(() => j.value.emptyOptionLabel), B = p(() => {
+		}), L = p(() => P.value.options.find((e) => F.value.has(e.token))?.option ?? null), R = p(() => P.value.options.filter((e) => F.value.has(e.token)).map((e) => e.option.label).join(", ")), z = p(() => j.value.emptyOptionLabel), me = p(() => {
 			let e = j.value.appearance === "swatch" ? "color" : "select", t = {
 				id: M.value,
 				label: I.value,
-				options: E.options,
+				options: D.options,
 				variant: e,
 				invalid: j.value.invalid
 			};
 			if (j.value.selectionMode === "multiple") {
-				if (!l(E.modelValue)) throw TypeError("SSelect: multiple selection requires modelValue to be an array");
+				if (!l(D.modelValue)) throw TypeError("SSelect: multiple selection requires modelValue to be an array");
 				return {
 					...t,
 					selectionMode: "multiple",
-					modelValue: E.modelValue
+					modelValue: D.modelValue
 				};
 			}
-			if (l(E.modelValue)) throw TypeError("SSelect: single selection requires modelValue to be a selection key or null");
+			if (l(D.modelValue)) throw TypeError("SSelect: single selection requires modelValue to be a selection key or null");
 			return {
 				...t,
 				selectionMode: "single",
-				modelValue: E.modelValue,
+				modelValue: D.modelValue,
 				clearOptionLabel: j.value.emptyOptionLabel
 			};
-		}), V = C(!1), H = n(), U = C("var(--s-layer-root-floating)"), W = null, G = C(null), K = C(null), pe = p(() => `bottom-${j.value.align === "left" ? "start" : j.value.align === "right" ? "end" : "center"}`), { anchorRef: q, panelRef: J, floatingStyle: me, updatePosition: he } = s({
-			active: V,
-			placement: () => pe.value,
+		}), B = S(!1), V = n(), H = ee(), U = S("var(--s-layer-root-floating)"), W = null, G = S(null), K = S(null), he = p(() => `bottom-${j.value.align === "left" ? "start" : j.value.align === "right" ? "end" : "center"}`), { anchorRef: q, panelRef: J, floatingStyle: ge, updatePosition: Y } = te({
+			active: B,
+			placement: () => he.value,
 			widthMatch: () => j.value.appearance === "field" ? "exact" : "none",
 			zIndex: () => U.value
-		}), Y = null, X = 0;
-		ue(H, (e) => {
-			e || Z("outside");
+		});
+		T(J, () => W?.refreshModality(), { flush: "sync" });
+		let X = null, Z = 0;
+		T(V, (e) => {
+			e || Q("outside");
+		}, { flush: "sync" }), T(H, (e) => {
+			e === null && Q("outside");
 		}, { flush: "sync" });
-		function Z(e = "trigger") {
-			X += 1, e !== "tab" && (Y?.(), Y = null), V.value && (V.value = !1, W?.unregister({
+		function Q(e = "trigger") {
+			Z += 1, e !== "tab" && (X?.(), X = null), B.value && (B.value = !1, W?.unregister({
 				restoreFocus: e === "trigger" || e === "selection" || e === "escape",
 				commitFocusHandoff: e === "tab"
 			}), W = null, U.value = "var(--s-layer-root-floating)");
 		}
-		function Q() {
+		function $() {
 			let e = G.value;
 			if (!e) throw Error("SSelect: combobox trigger API is unavailable");
 			return e.getElement();
 		}
-		function ge(t) {
-			let n = Q(), r = W?.focusScope() ?? document, i = e(n, r, J.value, t.shiftKey);
-			t.preventDefault(), Y?.(), Y = i && W ? W.handoffFocus(i) : null, Z("tab");
+		function _e(t) {
+			let n = $(), r = W?.focusScope() ?? document, i = e(n, r, J.value, t.shiftKey);
+			t.preventDefault(), X?.(), X = i && W ? W.handoffFocus(i) : null, Q("tab");
 		}
-		async function $() {
-			if (Y?.(), Y = null, F.value, z.value, j.value.disabled || j.value.readonly || V.value || !H.value) return;
-			let e = Q(), n = document.activeElement, r = ++X;
-			if (V.value = !0, W = t({
+		async function ve() {
+			if (X?.(), X = null, F.value, z.value, j.value.disabled || j.value.readonly || B.value || !V.value || H.value === null) return;
+			let e = $(), n = document.activeElement, r = ++Z;
+			if (B.value = !0, W = t({
 				kind: "listbox",
 				root: () => J.value,
 				anchor: () => q.value,
 				restoreTarget: e,
-				requestDismiss: (e) => Z(e === "escape" ? "escape" : "outside"),
-				onRetire: () => Z("outside")
-			}), U.value = W.zIndex, await x(), !V.value || X !== r || !H.value || (he(), await x(), !V.value || X !== r || !H.value)) return;
+				requestDismiss: (e) => Q(e === "escape" ? "escape" : "outside"),
+				onRetire: () => Q("outside")
+			}), U.value = W.zIndex, await b(), !B.value || Z !== r || !V.value || (Y(), await b(), !B.value || Z !== r || !V.value)) return;
 			let i = document.activeElement, a = n instanceof HTMLElement && !n.isConnected && i === document.body;
 			(i === n || a) && K.value?.focusSelectedOrFirst();
 		}
-		function _e() {
-			V.value ? Z("trigger") : $();
+		function ye() {
+			B.value ? Q("trigger") : ve();
 		}
-		function ve(e) {
+		function be(e) {
 			if (N.value === "multiple") {
 				if (!l(e)) throw TypeError("SSelect: multiple selection update must be an array");
-				f("SSelect update", "multiple", e, P.value), D("update:modelValue", e);
+				f("SSelect update", "multiple", e, P.value), O("update:modelValue", e);
 				return;
 			}
 			if (l(e)) throw TypeError("SSelect: single selection update must be a selection key or null");
-			f("SSelect update", "single", e, P.value), D("update:modelValue", e), Z("selection");
+			f("SSelect update", "single", e, P.value), O("update:modelValue", e), Q("selection");
 		}
-		return ce(() => {
-			X += 1, Y?.(), W?.unregister({ restoreFocus: !1 }), W = null;
-		}), (e, t) => (S(), m(c, {
+		return ue(() => {
+			Z += 1, X?.(), W?.unregister({ restoreFocus: !1 }), W = null;
+		}), (e, t) => (x(), m(re, {
 			"control-id": j.value.inputId,
 			label: j.value.label,
 			required: j.value.required,
@@ -171,17 +176,17 @@ var T = /*@__PURE__*/ y({
 			disabled: j.value.disabled,
 			readonly: j.value.readonly
 		}, {
-			default: de((e) => [_("div", {
+			default: de((e) => [g("div", {
 				ref_key: "anchorRef",
 				ref: q,
 				class: "s-select-anchor"
-			}, [v(ie, {
+			}, [_(ae, {
 				ref_key: "triggerRef",
 				ref: G,
 				id: e.controlId,
 				title: j.value.title,
 				"accessible-label": I.value,
-				expanded: V.value,
+				expanded: B.value,
 				controls: M.value,
 				"display-value": R.value,
 				placeholder: j.value.placeholder,
@@ -189,7 +194,7 @@ var T = /*@__PURE__*/ y({
 				size: j.value.size,
 				disabled: e.disabled,
 				invalid: e.invalid,
-				"described-by": w(te)(k.value["aria-describedby"], e.describedBy),
+				"described-by": C(c)(k.value["aria-describedby"], e.describedBy),
 				required: e.required,
 				readonly: e.readonly,
 				"test-id": k.value["data-testid"],
@@ -198,7 +203,7 @@ var T = /*@__PURE__*/ y({
 				"task-mapping-kind": k.value["data-task-mapping-kind"],
 				appearance: j.value.appearance,
 				width: j.value.appearance === "swatch" ? "auto" : "full",
-				onToggle: _e
+				onToggle: ye
 			}, null, 8, [
 				"id",
 				"title",
@@ -220,20 +225,23 @@ var T = /*@__PURE__*/ y({
 				"task-mapping-kind",
 				"appearance",
 				"width"
-			])], 512), (S(), m(oe, { to: "body" }, [V.value && w(H) ? (S(), g("div", {
+			])], 512), C(H) ? (x(), m(se, {
+				key: 0,
+				to: C(H)
+			}, [B.value && C(V) ? (x(), ce("div", {
 				key: 0,
 				ref_key: "panelRef",
 				ref: J,
-				style: se(w(me)),
+				style: le(C(ge)),
 				class: "s-select-layer"
-			}, [v(ae, b({
+			}, [_(oe, y({
 				ref_key: "listboxRef",
 				ref: K
-			}, B.value, {
-				"onUpdate:modelValue": ve,
-				onEscape: t[0] ||= (e) => Z("escape"),
-				onTab: ge
-			}), null, 16)], 4)) : h("", !0)]))]),
+			}, me.value, {
+				"onUpdate:modelValue": be,
+				onEscape: t[0] ||= (e) => Q("escape"),
+				onTab: _e
+			}), null, 16)], 4)) : h("", !0)], 8, ["to"])) : h("", !0)]),
 			_: 1
 		}, 8, [
 			"control-id",
@@ -248,4 +256,4 @@ var T = /*@__PURE__*/ y({
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/src/components/shared/data-display/SControlledToastViewport.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/data-display/SControlledToastViewport.css_vue_type_style_index_0_src_5864b6c6_scoped_5864b6c6_lang.css";
+import "../../../../assets/src/components/shared/data-display/SControlledToastViewport.css_vue_type_style_index_0_src_a69aa84b_scoped_a69aa84b_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SControlledToastViewport.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                                      */
 //#region src/components/shared/data-display/SControlledToastViewport.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-5864b6c6"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-a69aa84b"]]);
 //#endregion
 export { n as default };