@turquoisehealth/pit-viper 2.256.0 → 2.258.0

package/pv-components/dist/web/components/pv-sidebar-v2/pv-sidebar-v2.js

@@ -1812,10 +1812,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 }), fr = {
 	key: 0,
 	class: "sidebar-additional-header"
-}, pr = { class: "sidebar-header-content pv-full-width" }, mr = {
-	key: 0,
-	class: "pv-sidebar-nav-header"
-}, hr = ["aria-label", "aria-expanded"], gr = {
+}, pr = ["data-sidebar-collapsed"], mr = { class: "sidebar-header-content pv-full-width" }, hr = ["aria-label", "aria-expanded"], gr = {
 	class: "pv-flex",
 	style: { "min-width": "0" }
 }, _r = {
@@ -1824,7 +1821,11 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 		"border-radius": "4px",
 		"flex-shrink": "0"
 	}
-}, vr = ["src"], yr = { key: 1 }, br = ["title"], xr = {
+}, vr = ["src"], yr = { key: 1 }, br = [
+	"data-sidebar-collapsed",
+	"data-sidebar-expanding",
+	"title"
+], xr = {
 	class: "pv-popover",
 	style: {
 		width: "fit-content",
@@ -1839,69 +1840,61 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 }, Cr = ["data-active"], wr = ["href", "data-org-value"], Tr = {
 	class: "pv-avatar-xs",
 	style: { "border-radius": "4px" }
-}, Er = ["src"], Dr = { key: 1 }, Or = ["title"], kr = ["data-active"], Ar = ["href", "data-org-value"], jr = ["title"], Mr = { class: "pv-sidebar-nav" }, Nr = { key: 0 }, Pr = {
+}, Er = ["src"], Dr = { key: 1 }, Or = ["title"], kr = ["data-active"], Ar = ["href", "data-org-value"], jr = ["title"], Mr = { key: 0 }, Nr = {
 	key: 1,
 	role: "list",
 	class: "pv-full-width pv-flow",
 	style: { "--flow-size": "0.25rem" }
-}, Fr = {
+}, Pr = {
 	key: 0,
 	class: "pv-sidebar-nav-separator",
 	"aria-hidden": "true"
-}, Ir = {
-	class: "pv-flex pv-space-between pv-full-width",
-	"data-sidebar-expanded-content": "",
-	style: { "flex-wrap": "wrap" }
-}, Lr = {
+}, Fr = ["data-sidebar-collapsed"], Ir = {
 	key: 0,
 	class: "pv-tag-purple pv-tag-sm"
-}, Rr = ["onClick", "onKeydown"], zr = [
+}, Lr = ["onClick", "onKeydown"], Rr = [
 	"href",
 	"aria-current",
 	"title"
-], Br = {
-	class: "pv-flex pv-space-between pv-full-width",
-	"data-sidebar-expanded-content": "",
-	style: { "flex-wrap": "wrap" }
-}, Vr = {
+], zr = ["data-sidebar-collapsed"], Br = {
 	key: 0,
 	class: "pv-tag-purple pv-tag-sm"
-}, Hr = {
+}, Vr = {
 	class: "pv-popover",
 	style: { "--position": "static" }
-}, Ur = {
+}, Hr = {
 	role: "list",
 	class: "pv-popover-list"
-}, Wr = ["data-active"], Gr = ["href"], Kr = {
+}, Ur = ["data-active"], Wr = ["href"], Gr = {
 	key: 0,
 	class: "pv-tag-purple pv-tag-sm"
-}, qr = ["onClick", "onAuxclick"], Jr = { "data-sidebar-expanded-content": "" }, Yr = { class: "pv-sidebar-nav-nested" }, Xr = [
+}, Kr = ["onClick", "onAuxclick"], qr = ["data-sidebar-collapsed"], Jr = ["data-sidebar-collapsed"], Yr = [
 	"href",
 	"role",
 	"tabindex",
 	"aria-current",
 	"aria-expanded",
 	"title"
-], Zr = {
+], Xr = {
 	class: "pv-flex pv-space-between pv-full-width",
 	style: { "flex-wrap": "wrap" }
-}, Qr = {
+}, Zr = {
 	key: 0,
 	class: "pv-tag-purple pv-tag-sm"
-}, $r = [
+}, Qr = [
 	"href",
 	"aria-current",
 	"title"
-], ei = {
+], $r = {
 	class: "pv-flex pv-space-between pv-full-width",
 	style: { "flex-wrap": "wrap" }
-}, ti = {
+}, ei = {
 	key: 0,
 	class: "pv-tag-purple pv-tag-sm"
-}, ni = {
+}, ti = {
 	class: "pv-sidebar-nav-footer pv-sticky",
 	style: { "--bottom": "0" }
-}, ri = ["aria-expanded"], ii = { class: "pv-popover pv-text-default pv-text-body-md" }, ai = [
+}, ni = ["aria-expanded"], ri = ["data-sidebar-collapsed"], ii = { class: "pv-popover pv-text-default pv-text-body-md" }, ai = [
 	"aria-label",
 	"aria-expanded",
 	"title"
@@ -1911,10 +1904,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 		"border-radius": "50%",
 		"flex-shrink": "0"
 	}
-}, si = ["src"], ci = { key: 1 }, li = {
-	class: "pv-truncate",
-	"data-sidebar-expanded-content": ""
-}, ui = {
+}, si = ["src"], ci = { key: 1 }, li = ["data-sidebar-collapsed"], ui = {
 	class: "pv-popover pv-text-default pv-text-body-md",
 	style: { "--height": "750px" }
 }, di = { class: "content-panel" }, fi = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", pi = /* @__PURE__ */ d({
@@ -1989,23 +1979,23 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				rr(e) && (he.value[e.value] = !0);
 			});
 		});
-		let V = re(e, "modelValue"), ge = k(!1), _e = n, H = k(!1), ve = k(!1), ye = k(!1), be = k({}), xe = () => {
-			H.value = !1, D.value = {}, be.value = {}, ve.value = !1, ye.value = !1;
+		let V = re(e, "modelValue"), ge = k(!1), _e = r(() => !V.value && ge.value), H = n, ve = k(!1), ye = k(!1), be = k(!1), xe = k({}), Se = () => {
+			ve.value = !1, D.value = {}, xe.value = {}, ye.value = !1, be.value = !1;
 		};
-		L(H, (e) => {
-			e && (D.value = {}, ve.value = !1, ye.value = !1);
-		}), L(ve, (e) => {
-			e && (H.value = !1, D.value = {}, ye.value = !1);
+		L(ve, (e) => {
+			e && (D.value = {}, ye.value = !1, be.value = !1);
 		}), L(ye, (e) => {
-			e && (H.value = !1, D.value = {}, ve.value = !1);
+			e && (ve.value = !1, D.value = {}, be.value = !1);
+		}), L(be, (e) => {
+			e && (ve.value = !1, D.value = {}, ye.value = !1);
 		}), L(V, () => {
-			xe(), ge.value = !0;
+			Se(), ge.value = !0;
 		});
-		let Se = () => {
-			V.value = !V.value, _e("change", { collapsed: V.value });
-		}, Ce = (e) => {
+		let Ce = () => {
+			V.value = !V.value, H("change", { collapsed: V.value });
+		}, we = (e) => {
 			e.target === e.currentTarget && e.propertyName === "grid-template-columns" && (ge.value = !1);
-		}, we = (e) => e.some(rr), Te = (e, t) => {
+		}, Te = (e) => e.some(rr), Ee = (e, t) => {
 			if (t.url) {
 				if (e.ctrlKey || e.metaKey || e.shiftKey || e.button === 1) {
 					window.open(t.url, "_blank", "noopener");
@@ -2021,15 +2011,21 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				"is-transitioning": ge.value
 			}]]),
 			style: x(ae.value),
-			onTransitionend: Ce
+			onTransitionend: we
 		}, [
 			s("div", {
 				ref_key: "sidebarPanel",
 				ref: ee,
 				class: "sidebar-panel"
-			}, [s("div", null, [I(h) ? (E(), o("div", fr, [j(n.$slots, "sidebar-additional-header")])) : a("v-if", !0), s("div", { class: y(["sidebar-header", [{ "pv-border-bottom": V.value }]]) }, [s("div", pr, [e.organizations && e.organizations.length ? (E(), o("div", mr, [u(er, {
-				modelValue: ve.value,
-				"onUpdate:modelValue": r[0] ||= (e) => ve.value = e,
+			}, [s("div", null, [I(h) ? (E(), o("div", fr, [j(n.$slots, "sidebar-additional-header")])) : a("v-if", !0), s("div", {
+				class: y(["sidebar-header", [{ "pv-border-bottom": V.value }]]),
+				"data-sidebar-collapsed": V.value || void 0
+			}, [s("div", mr, [e.organizations && e.organizations.length ? (E(), o("div", {
+				key: 0,
+				class: y(["pv-sidebar-nav-header", e.variant && `pv-sidebar-surface-${e.variant}`])
+			}, [u(er, {
+				modelValue: ye.value,
+				"onUpdate:modelValue": r[0] ||= (e) => ye.value = e,
 				position: V.value ? "right-top" : "bottom-left",
 				"use-teleport": !!T.value,
 				"teleport-location": T.value ?? "body",
@@ -2037,7 +2033,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 			}, {
 				trigger: R(() => [u(nr, {
 					description: B.value?.label,
-					disabled: !V.value || ge.value || ve.value,
+					disabled: !V.value || ge.value || ye.value,
 					variant: "white",
 					position: "center-right",
 					delay: 250,
@@ -2049,10 +2045,10 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				}, {
 					trigger: R(() => [s("button", {
 						type: "button",
-						class: "pv-nav-list-item pv-full-width pv-space-between",
+						class: y(["pv-nav-list-item pv-full-width pv-space-between", { "pv-sidebar-item-collapsed": V.value }]),
 						"data-testid": "pv-sidebar-org-switcher",
 						"aria-label": `Switch organization: ${B.value?.label}`,
-						"aria-expanded": ve.value
+						"aria-expanded": ye.value
 					}, [s("div", gr, [s("span", _r, [B.value?.avatarUrl ? (E(), o("img", {
 						key: 0,
 						src: B.value.avatarUrl,
@@ -2060,12 +2056,16 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					}, null, 8, vr)) : (E(), o("span", yr, P(B.value?.label?.slice(0, 1)), 1))]), s("span", {
 						class: "pv-text-title-lg pv-truncate",
 						"data-sidebar-expanded-content": "",
+						"data-sidebar-collapsed": V.value || void 0,
+						"data-sidebar-expanding": _e.value || void 0,
 						title: B.value?.label
 					}, P(B.value?.label), 9, br)]), u(W, {
 						name: "chevron-down",
 						class: "pv-icon-16",
-						"data-sidebar-expanded-content": ""
-					})], 8, hr)]),
+						"data-sidebar-expanded-content": "",
+						"data-sidebar-collapsed": V.value || void 0,
+						"data-sidebar-expanding": _e.value || void 0
+					}, null, 8, ["data-sidebar-collapsed", "data-sidebar-expanding"])], 10, hr)]),
 					_: 1
 				}, 8, [
 					"description",
@@ -2105,7 +2105,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				"position",
 				"use-teleport",
 				"teleport-location"
-			])])) : a("v-if", !0)]), e.disableToggle ? a("v-if", !0) : (E(), i(nr, {
+			])], 2)) : a("v-if", !0)]), e.disableToggle ? a("v-if", !0) : (E(), i(nr, {
 				key: 0,
 				variant: "white",
 				position: "center-right",
@@ -2113,16 +2113,23 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 			}, {
 				trigger: R(() => [u($e, {
 					class: "sidebar-toggle",
+					"data-sidebar-collapsed": V.value || void 0,
+					"data-sidebar-expanding": _e.value || void 0,
 					"left-icon": V.value ? "panel-left-open" : "panel-left-close",
 					"aria-label": V.value ? "Open sidebar" : "Close sidebar",
 					variant: "ghost",
-					onClick: Se
-				}, null, 8, ["left-icon", "aria-label"])]),
+					onClick: Ce
+				}, null, 8, [
+					"data-sidebar-collapsed",
+					"data-sidebar-expanding",
+					"left-icon",
+					"aria-label"
+				])]),
 				content: R(() => [l(P(V.value ? "Expand navigation" : "Collapse navigation"), 1)]),
 				_: 1
-			}))], 2)]), s("div", Mr, [
-				I(m) ? (E(), o("div", Nr, [j(n.$slots, "sidebar-additional-content")])) : a("v-if", !0),
-				e.navItems && e.navItems.length ? (E(), o("ul", Pr, [(E(!0), o(t, null, A(e.navItems, (e) => (E(), o(t, { key: e.value }, [e.separatorAtTop ? (E(), o("li", Fr)) : a("v-if", !0), s("li", null, [a(" Slotted full-height panel - available while collapsed or expanded "), se(e) ? (E(), i(er, {
+			}))], 10, pr)]), s("div", { class: y(["pv-sidebar-nav", e.variant && `pv-sidebar-surface-${e.variant}`]) }, [
+				I(m) ? (E(), o("div", Mr, [j(n.$slots, "sidebar-additional-content")])) : a("v-if", !0),
+				e.navItems && e.navItems.length ? (E(), o("ul", Nr, [(E(!0), o(t, null, A(e.navItems, (e) => (E(), o(t, { key: e.value }, [e.separatorAtTop ? (E(), o("li", Pr)) : a("v-if", !0), s("li", null, [a(" Slotted full-height panel - available while collapsed or expanded "), se(e) ? (E(), i(er, {
 					key: 0,
 					modelValue: D.value[e.value],
 					"onUpdate:modelValue": (t) => D.value[e.value] = t,
@@ -2138,7 +2145,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					trigger: R(() => [(E(), i(te(e.url ? "a" : "button"), _({
 						ref_for: !0,
 						ref: (t) => le(I(N), e.value, t),
-						class: "pv-nav-list-item",
+						class: ["pv-nav-list-item", { "pv-sidebar-item-collapsed": V.value }],
 						href: e.url,
 						type: e.url ? void 0 : "button"
 					}, { ref_for: !0 }, e.linkAttrs, {
@@ -2152,9 +2159,15 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 							key: 0,
 							name: e.icon,
 							class: "pv-nav-icon"
-						}, null, 8, ["name"])) : a("v-if", !0), s("span", Ir, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Lr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)])]),
+						}, null, 8, ["name"])) : a("v-if", !0), s("span", {
+							class: "pv-flex pv-space-between pv-full-width",
+							"data-sidebar-expanded-content": "",
+							"data-sidebar-collapsed": V.value || void 0,
+							style: { "flex-wrap": "wrap" }
+						}, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Ir, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)], 8, Fr)]),
 						_: 2
 					}, 1040, [
+						"class",
 						"href",
 						"type",
 						"aria-current",
@@ -2169,7 +2182,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 						class: "pv-sidebar-hover-panel",
 						onClick: (t) => pe(t, e.value),
 						onKeydown: (t) => z(t, e.value)
-					}, [j(n.$slots, e.hoverPanelSlot)], 40, Rr)]),
+					}, [j(n.$slots, e.hoverPanelSlot)], 40, Lr)]),
 					_: 2
 				}, 1032, [
 					"modelValue",
@@ -2188,7 +2201,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					"css-custom-properties": { width: "100%" }
 				}, {
 					trigger: R(() => [s("a", _({
-						class: "pv-nav-list-item",
+						class: ["pv-nav-list-item", { "pv-sidebar-item-collapsed": V.value }],
 						href: e.url
 					}, { ref_for: !0 }, e.linkAttrs, {
 						"aria-current": e.active ? "page" : void 0,
@@ -2197,8 +2210,13 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 						key: 0,
 						name: e.icon,
 						class: "pv-nav-icon"
-					}, null, 8, ["name"])) : a("v-if", !0), s("span", Br, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Vr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)])], 16, zr)]),
-					content: R(() => [s("div", Hr, [s("ul", Ur, [s("li", { "data-active": e.active || void 0 }, [s("a", _({ href: e.url }, { ref_for: !0 }, e.linkAttrs, { style: { "flex-wrap": "wrap" } }), [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Kr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)], 16, Gr)], 8, Wr)])])]),
+					}, null, 8, ["name"])) : a("v-if", !0), s("span", {
+						class: "pv-flex pv-space-between pv-full-width",
+						"data-sidebar-expanded-content": "",
+						"data-sidebar-collapsed": V.value || void 0,
+						style: { "flex-wrap": "wrap" }
+					}, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Br, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)], 8, zr)], 16, Rr)]),
+					content: R(() => [s("div", Vr, [s("ul", Hr, [s("li", { "data-active": e.active || void 0 }, [s("a", _({ href: e.url }, { ref_for: !0 }, e.linkAttrs, { style: { "flex-wrap": "wrap" } }), [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Gr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)], 16, Wr)], 8, Ur)])])]),
 					_: 2
 				}, 1032, [
 					"use-teleport",
@@ -2218,23 +2236,32 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 						modelValue: he.value[e.value],
 						"onUpdate:modelValue": (t) => he.value[e.value] = t,
 						"default-open": I(rr)(e),
-						"summary-attrs": { "aria-current": we(e.children) && V.value ? "page" : void 0 },
+						"summary-attrs": {
+							class: V.value ? "pv-sidebar-item-collapsed" : void 0,
+							"aria-current": Te(e.children) && V.value ? "page" : void 0
+						},
 						"enable-trigger-slot": "",
 						"enable-trigger-full-width": ""
 					}, {
 						trigger: R(() => [s("div", {
 							class: "pv-flex",
-							onClick: (t) => e.children.length === 1 && Te(t, e.children[0]),
-							onAuxclick: (t) => e.children.length === 1 && Te(t, e.children[0])
+							onClick: (t) => e.children.length === 1 && Ee(t, e.children[0]),
+							onAuxclick: (t) => e.children.length === 1 && Ee(t, e.children[0])
 						}, [e.icon ? (E(), i(W, {
 							key: 0,
 							name: e.icon,
 							class: "pv-nav-icon"
-						}, null, 8, ["name"])) : a("v-if", !0), s("span", Jr, P(e.label), 1)], 40, qr)]),
-						default: R(() => [s("div", Yr, [(E(!0), o(t, null, A(e.children, (e) => (E(), o(t, { key: e.value }, [a(" Nested items - expanded-only flyout on the right; the collapsed flyout handles its own "), e.children?.length ? (E(), i(er, {
+						}, null, 8, ["name"])) : a("v-if", !0), s("span", {
+							"data-sidebar-expanded-content": "",
+							"data-sidebar-collapsed": V.value || void 0
+						}, P(e.label), 9, qr)], 40, Kr)]),
+						default: R(() => [s("div", {
+							class: "pv-sidebar-nav-nested",
+							"data-sidebar-collapsed": V.value || void 0
+						}, [(E(!0), o(t, null, A(e.children, (e) => (E(), o(t, { key: e.value }, [a(" Nested items - expanded-only flyout on the right; the collapsed flyout handles its own "), e.children?.length ? (E(), i(er, {
 							key: 0,
-							modelValue: be.value[e.value],
-							"onUpdate:modelValue": (t) => be.value[e.value] = t,
+							modelValue: xe.value[e.value],
+							"onUpdate:modelValue": (t) => xe.value[e.value] = t,
 							"show-on-hover": "",
 							"enable-group-sync": "",
 							"enable-click-toggle": "",
@@ -2250,12 +2277,12 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 								tabindex: e.url ? void 0 : 0,
 								"aria-current": I(rr)(e) ? "page" : void 0,
 								"aria-haspopup": "true",
-								"aria-expanded": !!be.value[e.value],
+								"aria-expanded": !!xe.value[e.value],
 								title: e.label
-							}), [s("span", Zr, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Qr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)]), u(W, {
+							}), [s("span", Xr, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", Zr, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)]), u(W, {
 								name: "chevron-right",
 								class: "pv-icon-16"
-							})], 16, Xr)]),
+							})], 16, Yr)]),
 							content: R(() => [u(dr, {
 								items: e.children,
 								disabled: V.value
@@ -2273,7 +2300,7 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 						}, { ref_for: !0 }, e.linkAttrs, {
 							"aria-current": e.active ? "page" : void 0,
 							title: e.label
-						}), [s("span", ei, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", ti, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)])], 16, $r))], 64))), 128))])]),
+						}), [s("span", $r, [s("span", { class: y(["pv-truncate pv-flex-item", { "pv-link-external": e.external }]) }, P(e.label), 3), e.badge ? (E(), o("span", ei, P(e.badge.toUpperCase()), 1)) : a("v-if", !0)])], 16, Qr))], 64))), 128))], 8, Jr)]),
 						_: 2
 					}, 1032, [
 						"modelValue",
@@ -2291,10 +2318,10 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					"teleport-location",
 					"disabled"
 				])], 2112))])], 64))), 128))])) : a("v-if", !0),
-				s("div", ni, [I(g) ? (E(), i(er, {
+				s("div", ti, [I(g) ? (E(), i(er, {
 					key: 0,
-					modelValue: H.value,
-					"onUpdate:modelValue": r[1] ||= (e) => H.value = e,
+					modelValue: ve.value,
+					"onUpdate:modelValue": r[1] ||= (e) => ve.value = e,
 					position: V.value ? "right-bottom" : "top-left",
 					"show-on-hover": V.value,
 					"enable-group-sync": "",
@@ -2306,14 +2333,17 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				}, {
 					trigger: R(() => [s("button", {
 						type: "button",
-						class: "pv-nav-list-item",
+						class: y(["pv-nav-list-item", { "pv-sidebar-item-collapsed": V.value }]),
 						"aria-label": "Help",
-						"aria-expanded": H.value,
+						"aria-expanded": ve.value,
 						title: "Help"
 					}, [u(W, {
 						name: "help-circle",
 						class: "pv-icon-20 pv-nav-icon"
-					}), r[3] ||= s("span", { "data-sidebar-expanded-content": "" }, "Help", -1)], 8, ri)]),
+					}), s("span", {
+						"data-sidebar-expanded-content": "",
+						"data-sidebar-collapsed": V.value || void 0
+					}, "Help", 8, ri)], 10, ni)]),
 					content: R(() => [s("div", ii, [j(n.$slots, "sidebar-help-content")])]),
 					_: 3
 				}, 8, [
@@ -2324,8 +2354,8 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					"teleport-location"
 				])) : a("v-if", !0), I(b) && e.profile ? (E(), i(er, {
 					key: 1,
-					modelValue: ye.value,
-					"onUpdate:modelValue": r[2] ||= (e) => ye.value = e,
+					modelValue: be.value,
+					"onUpdate:modelValue": r[2] ||= (e) => be.value = e,
 					position: V.value ? "right-bottom" : "top-left",
 					"use-teleport": !!T.value,
 					"teleport-location": T.value ?? "body",
@@ -2334,16 +2364,20 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 				}, {
 					trigger: R(() => [s("button", {
 						type: "button",
-						class: "pv-nav-list-item",
+						class: y(["pv-nav-list-item", { "pv-sidebar-item-collapsed": V.value }]),
 						"data-testid": "pv-sidebar-profile-trigger",
 						"aria-label": e.profile.name,
-						"aria-expanded": ye.value,
+						"aria-expanded": be.value,
 						title: e.profile.name
 					}, [s("span", oi, [e.profile.avatarUrl ? (E(), o("img", {
 						key: 0,
 						src: e.profile.avatarUrl,
 						alt: ""
-					}, null, 8, si)) : (E(), o("span", ci, P(e.profile.name.slice(0, 1)), 1))]), s("span", li, P(e.profile.name), 1)], 8, ai)]),
+					}, null, 8, si)) : (E(), o("span", ci, P(e.profile.name.slice(0, 1)), 1))]), s("span", {
+						class: "pv-truncate",
+						"data-sidebar-expanded-content": "",
+						"data-sidebar-collapsed": V.value || void 0
+					}, P(e.profile.name), 9, li)], 10, ai)]),
 					content: R(() => [s("div", ui, [j(n.$slots, "sidebar-profile-content")])]),
 					_: 3
 				}, 8, [
@@ -2352,13 +2386,13 @@ var Yn = /* @__PURE__ */ new Set(), Xn = (e, t) => {
 					"use-teleport",
 					"teleport-location"
 				])) : a("v-if", !0)])
-			])], 512),
+			], 2)], 512),
 			s("div", di, [j(n.$slots, "default")]),
 			s("div", {
 				ref_key: "popoverTeleportTarget",
 				ref: T,
-				class: "pv-sidebar-popover-portal"
-			}, null, 512)
+				class: y(["pv-sidebar-popover-portal", e.variant && `pv-sidebar-surface-${e.variant}`])
+			}, null, 2)
 		], 38));
 	}
 }), mi = Object.defineProperty, hi = Object.getOwnPropertySymbols, gi = Object.prototype.hasOwnProperty, _i = Object.prototype.propertyIsEnumerable, vi = (e, t, n) => t in e ? mi(e, t, {

package/pv-components/dist/web/components/pv-sortable-list/pv-sortable-list.js

@@ -2904,9 +2904,9 @@ var oa = /* @__PURE__ */ new Set(), sa = (e, t) => {
 			onDrop: (t) => k(t, parseInt(e.id.split("-")[1]) + 1)
 		}, [s("div", va, [s("span", ya, j(n.placeholderText), 1)])], 40, _a)) : (E(), o("div", {
 			key: 2,
-			class: v(["pv-full-width pv-bordered pv-radius-md pv-flex pv-space-between", [!A(e) && M.value ? "pv-menu-item-disabled" : "", l(e) ? "pv-sortable-locked" : ""]]),
+			class: v(["pv-full-width pv-bordered pv-radius-md pv-flex pv-space-between", [!A(e) && M.value ? "pv-sortable-list-option-disabled" : "", l(e) ? "pv-sortable-locked" : ""]]),
 			style: b(oe(e))
-		}, [s("div", { class: v(["pv-flex pv-full-width pv-sort-option", { "pv-sort-option-locked": l(e) }]) }, [
+		}, [s("div", { class: v(["pv-flex pv-full-width pv-sortable-list-option", { "pv-sortable-list-option-locked": l(e) }]) }, [
 			a(" Locked entries gray their icons and text so they read as immovable at a\n                 glance; unlocked active entries keep the brand color. "),
 			u(Dn, {
 				class: "pv-text-tertiary",