themelia-ui 3.0.0 → 3.2.0

package/dist/layout/page.js

@@ -1,16 +1,18 @@
 "use client";
+import "#core.css";
 import { t as e } from "../cx--CBrhWH0.js";
-import { c as t } from "../buttons-CqXKWty3.js";
-import { a as n, n as r, t as i } from "../action-menu-BNLURfMK.js";
-import { v as a } from "../display-B3Q17h5z.js";
-import { t as o } from "../responsive-B4VDcIUK.js";
-import { o as s } from "../navigation-CsqTA16F.js";
+import { c as t } from "../buttons-BX2JfL5X.js";
+import { a as n, n as r, t as i } from "../action-menu-BwiL_F6I.js";
+import { t as a } from "../responsive-B4VDcIUK.js";
+import { v as o } from "../display-a7AoX_u7.js";
+import { o as s } from "../navigation-Bgu7Vc0M.js";
 import { r as c } from "../navigation-B4eUU9E8.js";
 import { t as l } from "../containers-B8d8U9GS.js";
 import { ArrowLeftIcon as u } from "lucide-react";
 import * as d from "react";
 import { useEffect as f, useMemo as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import "#css/page.css";
 //#region src/components/layout/page/page-header.strings.ts
 var _ = {
 	back: "Back",
@@ -25,7 +27,7 @@ var _ = {
 };
 //#endregion
 //#region src/components/layout/page/page-header.tsx
-function y({ title: n, description: r, eyebrow: i, level: o = 1, titleIcon: l, titleIconHref: d, onTitleIconClick: f, strings: p, backHref: m, onBack: y, titleBadges: b, breadcrumbs: x, actions: S, slots: C, withSeparator: w, renderLink: T, className: E, children: D }) {
+function y({ title: n, description: r, eyebrow: i, level: a = 1, titleIcon: l, titleIconHref: d, onTitleIconClick: f, strings: p, backHref: m, onBack: y, titleBadges: b, breadcrumbs: x, actions: S, slots: C, withSeparator: w, renderLink: T, className: E, children: D }) {
 	let O = {
 		..._,
 		...p
@@ -37,18 +39,18 @@ function y({ title: n, description: r, eyebrow: i, level: o = 1, titleIcon: l, t
 				children: null
 			}),
 			tone: "neutral",
-			buttonStyle: "ghost",
+			appearance: "ghost",
 			iconOnly: !0,
 			"aria-label": O.back,
 			children: /* @__PURE__ */ h(u, { "aria-hidden": !0 })
 		}) : /* @__PURE__ */ h(t, {
 			tone: "neutral",
-			buttonStyle: "ghost",
+			appearance: "ghost",
 			iconOnly: !0,
 			"aria-label": O.back,
 			onClick: y,
 			children: /* @__PURE__ */ h(u, { "aria-hidden": !0 })
-		}), /* @__PURE__ */ h(a, {
+		}), /* @__PURE__ */ h(o, {
 			orientation: "vertical",
 			className: v.headerBackRule
 		})]
@@ -57,7 +59,7 @@ function y({ title: n, description: r, eyebrow: i, level: o = 1, titleIcon: l, t
 		let e = /* @__PURE__ */ h(l, { "aria-hidden": !0 });
 		return f ? /* @__PURE__ */ h(t, {
 			tone: "neutral",
-			buttonStyle: "ghost",
+			appearance: "ghost",
 			iconOnly: !0,
 			"aria-label": O.titleIcon,
 			onClick: f,
@@ -68,7 +70,7 @@ function y({ title: n, description: r, eyebrow: i, level: o = 1, titleIcon: l, t
 				children: null
 			}),
 			tone: "neutral",
-			buttonStyle: "ghost",
+			appearance: "ghost",
 			iconOnly: !0,
 			"aria-label": O.titleIcon,
 			children: e
@@ -84,7 +86,7 @@ function y({ title: n, description: r, eyebrow: i, level: o = 1, titleIcon: l, t
 		title: n,
 		description: r,
 		eyebrow: i,
-		level: o,
+		level: a,
 		breadcrumbs: x,
 		leading: C?.back ?? A,
 		beforeTitle: C?.beforeTitle,
@@ -117,17 +119,17 @@ var b = d.forwardRef(function({ header: t, maxWidth: n = "xl", gutter: r = "md",
 }), x = { menuLabel: "Page actions" };
 //#endregion
 //#region src/components/layout/page/page-actions.tsx
-function S({ actions: t, display: a = "auto", breakpoint: s = o.lg, maxInlineActions: c = 3, strings: l, renderLink: u, className: d }) {
+function S({ actions: t, display: o = "auto", breakpoint: s = a.lg, maxInlineActions: c = 3, strings: l, renderLink: u, className: d }) {
 	let _ = {
 		...x,
 		...l
 	}, y = p(() => (t ?? []).filter((e) => e.visible !== !1), [t]), [b, S] = m(!1);
 	if (f(() => {
-		if (a !== "auto" || typeof window > "u") return;
+		if (o !== "auto" || typeof window > "u") return;
 		let e = () => S(window.innerWidth < s);
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, [a, s]), y.length === 0) return null;
-	if (a === "menu" || a === "auto" && b) return /* @__PURE__ */ h("div", {
+	}, [o, s]), y.length === 0) return null;
+	if (o === "menu" || o === "auto" && b) return /* @__PURE__ */ h("div", {
 		className: e("page-actions--component", v.actions, d),
 		children: /* @__PURE__ */ h(r, {
 			actions: y,

package/dist/layout/settings.js

@@ -1,8 +1,8 @@
 "use client";
 import { t as e } from "../cx--CBrhWH0.js";
-import { o as t } from "../navigation-CsqTA16F.js";
+import { o as t } from "../navigation-Bgu7Vc0M.js";
 import { i as n } from "../containers-B8d8U9GS.js";
-import { i as r } from "../navigation-DzxzPuwg.js";
+import { i as r } from "../navigation-DiYACqpE.js";
 import "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/layout/settings/settings.tsx

package/dist/layout/sidebar.js

@@ -1,33 +1,35 @@
 "use client";
-import { t as e } from "../cx--CBrhWH0.js";
-import { o as t } from "../typography-BkxEiwQ1.js";
-import { g as n, r, t as i } from "../dropdown-menu-TyNLCLML.js";
-import { n as a } from "../action-menu-BNLURfMK.js";
-import { d as o } from "../display-B3Q17h5z.js";
-import { I as s } from "../primitives-D0bdDozz.js";
-import { a as c, c as l, r as u } from "../avatar-CS7zow2q.js";
+import "#core.css";
+import { s as e } from "../typography-DmeR05Er.js";
+import { t } from "../cx--CBrhWH0.js";
+import { g as n, r, t as i } from "../dropdown-menu-Br8kvjrF.js";
+import { n as a } from "../action-menu-BwiL_F6I.js";
+import { a as o, c as s, r as c } from "../avatar-Dc_BNYfB.js";
+import { I as l } from "../primitives-BskKlf35.js";
+import { d as u } from "../display-a7AoX_u7.js";
 import { i as d, n as f, r as p, t as m } from "../navigation-B4eUU9E8.js";
-import { E as h, _ as g, b as _, c as v, d as y, g as b, h as x, i as S, m as C, n as w, o as T, p as E, r as ee, s as te, t as ne, v as re, y as ie } from "../sidebar-D0N6ckJL.js";
+import { E as h, _ as g, b as _, c as v, d as y, g as b, h as x, i as S, m as C, n as w, o as T, p as E, r as ee, s as te, t as ne, v as re, y as ie } from "../sidebar-D8uGqxio.js";
 import { ChevronRightIcon as ae, ChevronsUpDownIcon as D, ExternalLinkIcon as O, LogOutIcon as k, SettingsIcon as A, UserIcon as j } from "lucide-react";
 import { isValidElement as M, useMemo as N, useState as oe } from "react";
 import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+import "#css/sidebar.css";
 var L = {
 	disclosure: "layout-sidebar__disclosure___Nl8Bw",
 	logo: "layout-sidebar__logo___Ft6h3",
 	workspaceTrigger: "layout-sidebar__workspaceTrigger___wcqoM",
+	userTrigger: "layout-sidebar__userTrigger___SzgEi",
 	workspaceMark: "layout-sidebar__workspaceMark___jEkDh",
 	workspaceChevron: "layout-sidebar__workspaceChevron___L6398",
-	userTrigger: "layout-sidebar__userTrigger___SzgEi",
 	userIdentity: "layout-sidebar__userIdentity___iOV9O",
 	userChevron: "layout-sidebar__userChevron___a5rGY"
 };
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-logo.tsx
-function R({ logo: t, collapsedLogo: n = null, className: r }) {
-	let { state: i } = h(), a = i === "collapsed" ? n : t;
+function R({ logo: e, collapsedLogo: n = null, className: r }) {
+	let { state: i } = h(), a = i === "collapsed" ? n : e;
 	return a ? /* @__PURE__ */ F("div", {
 		"data-slot": "sidebar-logo",
-		className: e("sidebar-logo--component", L.logo, r),
+		className: t("sidebar-logo--component", L.logo, r),
 		children: a
 	}) : null;
 }
@@ -44,11 +46,11 @@ var z = {
 };
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-user.tsx
-function V({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p, strings: m, renderTrigger: g }) {
+function V({ user: t, customContent: u, onProfile: d, onSettings: f, onLogout: p, strings: m, renderTrigger: g }) {
 	let _ = {
 		...B,
 		...m
-	}, { state: v, isMobile: b } = h(), S = b || v !== "collapsed" ? "top" : "right", w = s(e.name, { strategy: "first-words" }), T = [
+	}, { state: v, isMobile: b } = h(), S = b || v !== "collapsed" ? "top" : "right", w = l(t.name, { strategy: "first-words" }), T = [
 		...d ? [{
 			id: "profile",
 			label: _.profile,
@@ -69,28 +71,27 @@ function V({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p
 			...d || f ? { group: !0 } : null
 		}] : []
 	], E = /* @__PURE__ */ F(C, {
-		size: "lg",
 		className: L.userTrigger,
-		"aria-label": v === "collapsed" ? `${_.trigger}, ${e.name}` : void 0,
-		children: g?.(e) ?? /* @__PURE__ */ I(P, { children: [
-			/* @__PURE__ */ I(u, {
+		"aria-label": v === "collapsed" ? `${_.trigger}, ${t.name}` : void 0,
+		children: g?.(t) ?? /* @__PURE__ */ I(P, { children: [
+			/* @__PURE__ */ I(c, {
 				size: "sm",
-				children: [!!e.avatar && /* @__PURE__ */ F(l, {
-					src: e.avatar,
+				children: [!!t.avatar && /* @__PURE__ */ F(s, {
+					src: t.avatar,
 					alt: ""
-				}), /* @__PURE__ */ F(c, { children: w })]
+				}), /* @__PURE__ */ F(o, { children: w })]
 			}),
 			/* @__PURE__ */ I("span", {
 				className: L.userIdentity,
-				children: [/* @__PURE__ */ F(t, {
+				children: [/* @__PURE__ */ F(e, {
 					tag: "span",
 					weight: "medium",
-					children: e.name
-				}), !!e.email && /* @__PURE__ */ F(t, {
+					children: t.name
+				}), !!t.email && /* @__PURE__ */ F(e, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
-					children: e.email
+					children: t.email
 				})]
 			}),
 			/* @__PURE__ */ F(D, {
@@ -101,10 +102,10 @@ function V({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p
 	});
 	return /* @__PURE__ */ F(y, {
 		className: "sidebar-user--component",
-		children: /* @__PURE__ */ F(x, { children: o ? /* @__PURE__ */ I(i, { children: [/* @__PURE__ */ F(n, { render: E }), /* @__PURE__ */ F(r, {
+		children: /* @__PURE__ */ F(x, { children: u ? /* @__PURE__ */ I(i, { children: [/* @__PURE__ */ F(n, { render: E }), /* @__PURE__ */ F(r, {
 			align: "end",
 			side: S,
-			children: o
+			children: u
 		})] }) : /* @__PURE__ */ F(a, {
 			actions: T,
 			align: "end",
@@ -115,40 +116,43 @@ function V({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p
 }
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-workspace.tsx
-function H({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, strings: i, contentClassName: s }) {
-	let c = {
+function H({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, strings: i, contentClassName: o }) {
+	let s = {
 		...z,
 		...i
-	}, l = p(r), { state: u } = h(), d = u === "collapsed", f = d ? t ?? e : e, m = n.map((e, t) => ({
+	}, c = p(r), { state: l, isMobile: d, setOpenMobile: f } = h(), m = l === "collapsed", g = m ? t ?? e : e, _ = n.map((e, t) => ({
 		id: e.url || String(t),
 		label: e.label,
 		icon: e.icon ?? O,
 		href: e.url,
 		external: e.external ?? !0,
-		group: c.label
+		onClick: e.external === !1 ? () => {
+			d && f(!1);
+		} : void 0,
+		group: s.label
 	}));
 	return /* @__PURE__ */ F(y, {
 		className: "sidebar-workspace--component",
 		children: /* @__PURE__ */ F(x, { children: /* @__PURE__ */ F(a, {
-			actions: m,
+			actions: _,
 			align: "start",
 			side: "right",
-			contentClassName: s,
+			contentClassName: o,
 			preserveOrder: !0,
-			renderLink: ({ children: e, ...t }) => l({
+			renderLink: ({ children: e, ...t }) => c({
 				...t,
 				children: e ?? null
 			}),
 			renderTrigger: /* @__PURE__ */ I(C, {
-				size: "lg",
+				closeOnSelectMobile: !1,
 				className: L.workspaceTrigger,
 				children: [
 					/* @__PURE__ */ F("span", {
 						className: L.workspaceMark,
-						children: f
+						children: g
 					}),
-					/* @__PURE__ */ F(o, { children: c.select }),
-					!d && /* @__PURE__ */ F(D, {
+					/* @__PURE__ */ F(u, { children: s.select }),
+					!m && /* @__PURE__ */ F(D, {
 						"aria-hidden": !0,
 						className: L.workspaceChevron
 					})
@@ -170,18 +174,18 @@ function U({ icon: e, iconMap: t }) {
 function W(e, t) {
 	return e.handle ? e.handle : e.href ? e.href : typeof e.label == "string" ? e.label : `nav-${t}`;
 }
-function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "/", iconMap: i, liveBadges: a, loading: o = !1, loadingRows: s = 5, logo: c, collapsedLogo: l, workspaceLinks: u, workspaceStrings: h, header: D, user: O, onProfile: k, onSettings: A, onLogout: j, userStrings: M, footer: z, empty: B, collapsible: G = "icon", variant: se = "sidebar", side: ce = "left", className: le, surfaceClassName: ue, renderItem: K, renderLink: q }) {
+function G({ navigationGroups: e = {}, footerNavItems: n = [], currentUrl: r = "/", iconMap: i, liveBadges: a, loading: o = !1, loadingRows: s = 5, logo: c, collapsedLogo: l, workspaceLinks: u, workspaceStrings: h, header: D, user: O, onProfile: k, onSettings: A, onLogout: j, userStrings: M, footer: z, empty: B, collapsible: G = "icon", variant: se = "sidebar", side: ce = "left", className: le, surfaceClassName: ue, renderItem: K, renderLink: q }) {
 	let J = p(q), Y = N(() => {
-		let e = [], i = (t) => {
-			for (let n of t) e.push(n.href), n.children?.length && i(n.children);
+		let t = [], i = (e) => {
+			for (let n of e) t.push(n.href), n.children?.length && i(n.children);
 		};
-		for (let e of Object.values(t)) i(e);
-		return i(n), f(r, e);
+		for (let t of Object.values(e)) i(t);
+		return i(n), f(r, t);
 	}, [
 		r,
 		n,
-		t
-	]), X = (e) => !!e && !!Y && d(e) === d(Y), Z = (e) => !!e && !!Y && m(Y, d(e)), de = (e) => e.handle && a?.[e.handle] != null ? a[e.handle] : e.badge, fe = N(() => Object.entries(t), [t]), [Q, pe] = oe({ open: {} }), me = Q.url === r ? Q.open : {}, $ = (e, t, n = 0) => {
+		e
+	]), X = (e) => !!e && !!Y && d(e) === d(Y), Z = (e) => !!e && !!Y && m(Y, d(e)), de = (e) => e.handle && a?.[e.handle] != null ? a[e.handle] : e.badge, fe = N(() => Object.entries(e), [e]), [Q, pe] = oe({ open: {} }), me = Q.url === r ? Q.open : {}, $ = (e, t, n = 0) => {
 		let a = !!e.children?.length, o = W(e, t), s = X(e.href) || a && Z(e.href), c = de(e), l = a && (Z(e.href) || e.children.some((e) => X(e.href))), u = me[o] ?? l, d = () => {
 			a && pe((e) => ({
 				url: r,
@@ -245,7 +249,7 @@ function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "
 		collapsible: G,
 		variant: se,
 		side: ce,
-		className: e("app-sidebar--component", le),
+		className: t("app-sidebar--component", le),
 		surfaceClassName: ue,
 		children: [
 			(D != null || !!c) && /* @__PURE__ */ F(v, { children: D ?? (u && u.length > 0 ? /* @__PURE__ */ F(H, {

package/dist/layout/workspace.js

@@ -1,18 +1,20 @@
 "use client";
-import { t as e } from "../cx--CBrhWH0.js";
-import { a as t, i as n, o as r } from "../typography-BkxEiwQ1.js";
-import { s as i } from "../feedback-DRerHGuV.js";
-import { d as a, n as o } from "../display-B3Q17h5z.js";
-import { H as s } from "../primitives-D0bdDozz.js";
-import { t as c } from "../badge-CxOuTfVr.js";
-import { c as l, i as u, o as d, r as f, t as p, u as m } from "../item-B3yQ26as.js";
-import { o as h } from "../navigation-CsqTA16F.js";
+import "#core.css";
+import { a as e, o as t, s as n } from "../typography-DmeR05Er.js";
+import { t as r } from "../cx--CBrhWH0.js";
+import { H as i } from "../primitives-BskKlf35.js";
+import { t as a } from "../badge-VlJVZjdm.js";
+import { s as o } from "../feedback-D4qVsKlD.js";
+import { d as s, n as c } from "../display-a7AoX_u7.js";
+import { c as l, i as u, o as d, r as f, t as p, u as m } from "../item-M2pmpWXh.js";
+import { o as h } from "../navigation-Bgu7Vc0M.js";
 import { r as g } from "../navigation-B4eUU9E8.js";
 import { CheckIcon as _, CircleAlertIcon as v, CircleIcon as y } from "lucide-react";
 import { Fragment as b } from "react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { mergeProps as w } from "@base-ui/react/merge-props";
 import { useRender as T } from "@base-ui/react/use-render";
+import "#css/workspace.css";
 //#region src/components/layout/workspace/workspace.strings.ts
 var E = {
 	label: "Workspace navigation",
@@ -55,29 +57,29 @@ var E = {
 };
 //#endregion
 //#region src/components/layout/workspace/workspace.tsx
-function A({ title: n, description: i, media: a, badges: s, status: c, metadata: l, actions: u, strings: d, secondaryActions: f, headingLevel: p = 1, className: m, children: g, ..._ }) {
+function A({ title: e, description: i, media: a, badges: o, status: s, metadata: l, actions: u, strings: d, secondaryActions: f, headingLevel: p = 1, className: m, children: g, ..._ }) {
 	let v = {
 		...O,
 		...d
-	}, y = s != null || c != null;
+	}, y = o != null || s != null;
 	return /* @__PURE__ */ C(h, {
 		..._,
 		"data-slot": "workspace-record-header",
-		className: e("workspace-record-header--component", k.recordHeader, m),
+		className: r("workspace-record-header--component", k.recordHeader, m),
 		title: /* @__PURE__ */ S(t, {
 			level: p,
 			size: "xl",
 			truncate: !0,
-			children: n
+			children: e
 		}),
-		description: i == null ? void 0 : /* @__PURE__ */ S(r, {
+		description: i == null ? void 0 : /* @__PURE__ */ S(n, {
 			type: "secondary",
 			children: i
 		}),
 		leading: a,
 		titleSuffix: y ? /* @__PURE__ */ C("span", {
 			className: k.titleSuffix,
-			children: [s, c]
+			children: [o, s]
 		}) : void 0,
 		actions: u ? /* @__PURE__ */ S("div", {
 			role: "group",
@@ -85,9 +87,9 @@ function A({ title: n, description: i, media: a, badges: s, status: c, metadata:
 			className: k.actions,
 			children: u
 		}) : void 0,
-		afterDescription: l?.length ? /* @__PURE__ */ S(o, {
+		afterDescription: l?.length ? /* @__PURE__ */ S(c, {
 			layout: "inline",
-			density: "compact",
+			size: "sm",
 			itemSeparator: !0,
 			"aria-label": v.metadata,
 			className: k.metadata,
@@ -105,46 +107,46 @@ function A({ title: n, description: i, media: a, badges: s, status: c, metadata:
 }
 //#endregion
 //#region src/components/layout/workspace/workspace-layout.tsx
-function j({ header: t, sidebar: n, rail: r, children: i, contentWidth: a = "wide", label: o, sidebarWidth: s, railWidth: c, className: l, headerClassName: u, bodyClassName: d, sidebarClassName: f, contentClassName: p, contentRender: m, railClassName: h, style: g, ..._ }) {
+function j({ header: e, sidebar: t, rail: n, children: i, contentWidth: a = "wide", label: o, sidebarWidth: s, railWidth: c, className: l, headerClassName: u, bodyClassName: d, sidebarClassName: f, contentClassName: p, contentRender: m, railClassName: h, style: g, ..._ }) {
 	return /* @__PURE__ */ C("div", {
 		"data-slot": "workspace-layout",
 		"data-content-width": a,
-		"data-has-sidebar": !!n || void 0,
-		"data-has-rail": !!r || void 0,
+		"data-has-sidebar": !!t || void 0,
+		"data-has-rail": !!n || void 0,
 		"aria-label": o,
-		className: e("workspace-layout--component", k.layout, l),
+		className: r("workspace-layout--component", k.layout, l),
 		style: {
 			...s ? { "--sidebar-width": s } : null,
-			...c ? { "--workspace-rail-w": c } : null,
+			...c ? { "--_workspace-rail-w": c } : null,
 			...g
 		},
 		..._,
-		children: [!!t && /* @__PURE__ */ S("div", {
+		children: [!!e && /* @__PURE__ */ S("div", {
 			"data-slot": "workspace-header",
-			className: e(k.layoutHeader, u),
-			children: t
+			className: r(k.layoutHeader, u),
+			children: e
 		}), /* @__PURE__ */ C("div", {
 			"data-slot": "workspace-body",
-			className: e(k.layoutBody, d),
+			className: r(k.layoutBody, d),
 			children: [
-				!!n && /* @__PURE__ */ S("div", {
+				!!t && /* @__PURE__ */ S("div", {
 					"data-slot": "workspace-sidebar",
-					className: e(k.layoutSidebar, f),
-					children: n
+					className: r(k.layoutSidebar, f),
+					children: t
 				}),
 				/* @__PURE__ */ S(M, {
 					"data-slot": "workspace-content",
-					className: e(k.layoutContent, p),
+					className: r(k.layoutContent, p),
 					render: m,
 					children: /* @__PURE__ */ S("div", {
 						className: k.layoutMeasure,
 						children: i
 					})
 				}),
-				!!r && /* @__PURE__ */ S("aside", {
+				!!n && /* @__PURE__ */ S("aside", {
 					"data-slot": "workspace-rail",
-					className: e(k.layoutRail, h),
-					children: r
+					className: r(k.layoutRail, h),
+					children: n
 				})
 			]
 		})]
@@ -173,7 +175,7 @@ function P(e) {
 function F(e, t) {
 	return e.disabled ? "disabled" : e.status ? e.status : e.warning ? "attention" : t ? "current" : e.completion !== void 0 && P(e.completion) >= 100 ? "complete" : "idle";
 }
-function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _, footerSlot: v, strings: y, className: w, ...T }) {
+function I({ groups: t, activeId: a, onSelect: c, renderItem: h, renderLink: _, footerSlot: v, strings: y, className: w, ...T }) {
 	let D = {
 		...E,
 		...y
@@ -181,48 +183,48 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 	return /* @__PURE__ */ C("nav", {
 		"data-slot": "workspace-nav",
 		"aria-label": T["aria-label"] ?? D.label,
-		className: e("workspace-nav--component", k.nav, w),
+		className: r("workspace-nav--component", k.nav, w),
 		...T,
 		children: [/* @__PURE__ */ S("div", {
 			className: k.navGroups,
-			children: t.map((e) => /* @__PURE__ */ C("div", {
+			children: t.map((t) => /* @__PURE__ */ C("div", {
 				className: k.navGroup,
-				children: [!!e.label && /* @__PURE__ */ C("div", {
+				children: [!!t.label && /* @__PURE__ */ C("div", {
 					className: k.navGroupHead,
-					children: [/* @__PURE__ */ S(n, { children: e.label }), !!e.description && /* @__PURE__ */ S(r, {
+					children: [/* @__PURE__ */ S(e, { children: t.label }), !!t.description && /* @__PURE__ */ S(n, {
 						size: "xs",
 						type: "secondary",
-						children: e.description
+						children: t.description
 					})]
 				}), /* @__PURE__ */ S(d, {
 					className: k.navItems,
-					children: e.items.map((t, n) => {
-						let r = t.id === o, d = F(t, r), g = d === "disabled", _ = N[d], v = t.icon, y = t.completion === void 0 ? void 0 : P(t.completion);
-						if (h) return /* @__PURE__ */ S(b, { children: h(t, {
+					children: t.items.map((e, n) => {
+						let r = e.id === a, d = F(e, r), g = d === "disabled", _ = N[d], v = e.icon, y = e.completion === void 0 ? void 0 : P(e.completion);
+						if (h) return /* @__PURE__ */ S(b, { children: h(e, {
 							active: r,
-							group: e,
+							group: t,
 							index: n
-						}) }, t.id);
+						}) }, e.id);
 						let w = /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(l, {
 							variant: "icon",
 							children: v ? /* @__PURE__ */ S(v, {}) : /* @__PURE__ */ S(_, { className: k.navStatusIcon })
 						}), /* @__PURE__ */ C(f, { children: [
-							/* @__PURE__ */ C(m, { children: [t.label, r && /* @__PURE__ */ S(a, { children: D.current })] }),
-							!!t.description && /* @__PURE__ */ S(u, { children: t.description }),
+							/* @__PURE__ */ C(m, { children: [e.label, r && /* @__PURE__ */ S(s, { children: D.current })] }),
+							!!e.description && /* @__PURE__ */ S(u, { children: e.description }),
 							y !== void 0 && /* @__PURE__ */ C("div", {
 								className: k.navProgress,
-								children: [/* @__PURE__ */ S(i, {
+								children: [/* @__PURE__ */ S(o, {
 									value: y,
 									label: D.completion(y)
-								}), /* @__PURE__ */ S(s, {
+								}), /* @__PURE__ */ S(i, {
 									size: "xs",
 									children: D.completion(y)
 								})]
 							})
 						] })] });
 						return /* @__PURE__ */ S(p, {
-							render: g ? void 0 : t.href ? O({
-								href: t.href,
+							render: g ? void 0 : e.href ? O({
+								href: e.href,
 								active: r,
 								children: w
 							}) : c ? /* @__PURE__ */ S("button", { type: "button" }) : void 0,
@@ -230,13 +232,13 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 							"aria-disabled": g || void 0,
 							"data-active": r || void 0,
 							"data-status": d,
-							onClick: !g && c ? () => c(t) : void 0,
+							onClick: !g && c ? () => c(e) : void 0,
 							className: k.navItem,
 							children: w
-						}, t.id);
+						}, e.id);
 					})
 				})]
-			}, e.id))
+			}, t.id))
 		}), !!v && /* @__PURE__ */ S("div", {
 			className: k.navFooter,
 			children: v
@@ -245,63 +247,63 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 }
 //#endregion
 //#region src/components/layout/workspace/workspace-locale-strip.tsx
-function L({ locales: t, activeLocale: n, onLocaleChange: a, actions: o, strings: s, className: l, ...u }) {
+function L({ locales: e, activeLocale: t, onLocaleChange: i, actions: s, strings: c, className: l, ...u }) {
 	let d = {
 		...D,
-		...s
+		...c
 	};
 	return /* @__PURE__ */ C("div", {
 		"data-slot": "workspace-locale-strip",
 		role: "group",
 		"aria-label": d.label,
-		className: e("workspace-locale-strip--component", k.strip, l),
+		className: r("workspace-locale-strip--component", k.strip, l),
 		...u,
 		children: [/* @__PURE__ */ S("div", {
 			className: k.stripList,
-			children: t.map((e) => {
-				let t = e.id === n, o = e.completion === void 0 ? void 0 : Math.min(100, Math.max(0, Math.round(e.completion)));
+			children: e.map((e) => {
+				let r = e.id === t, s = e.completion === void 0 ? void 0 : Math.min(100, Math.max(0, Math.round(e.completion)));
 				return /* @__PURE__ */ C("button", {
 					type: "button",
-					"aria-pressed": t,
+					"aria-pressed": r,
 					disabled: e.disabled,
-					onClick: () => a?.(e),
-					"data-active": t || void 0,
+					onClick: () => i?.(e),
+					"data-active": r || void 0,
 					className: k.stripItem,
 					children: [
 						/* @__PURE__ */ C("span", {
 							className: k.stripHead,
 							children: [
-								/* @__PURE__ */ S(r, {
+								/* @__PURE__ */ S(n, {
 									tag: "span",
 									weight: "medium",
 									children: e.label
 								}),
-								t && /* @__PURE__ */ S(c, {
+								r && /* @__PURE__ */ S(a, {
 									tone: "primary",
 									children: d.active
 								}),
-								!!e.status && /* @__PURE__ */ S(c, {
+								!!e.status && /* @__PURE__ */ S(a, {
 									tone: "neutral",
 									children: e.status
 								})
 							]
 						}),
-						!!e.description && /* @__PURE__ */ S(r, {
+						!!e.description && /* @__PURE__ */ S(n, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
 							children: e.description
 						}),
-						o !== void 0 && /* @__PURE__ */ S(i, {
-							value: o,
-							label: d.completion(o)
+						s !== void 0 && /* @__PURE__ */ S(o, {
+							value: s,
+							label: d.completion(s)
 						})
 					]
 				}, e.id);
 			})
-		}), !!o && /* @__PURE__ */ S("div", {
+		}), !!s && /* @__PURE__ */ S("div", {
 			className: k.stripActions,
-			children: o
+			children: s
 		})]
 	});
 }

package/dist/lib/action-presentation.d.ts

@@ -1,7 +1,7 @@
 import { SemanticTone } from './component-vocabulary.js';
 /** The button treatments an action may take. */
-export declare const ACTION_BUTTON_STYLES: readonly ["solid", "outline", "ghost", "link"];
-export type ActionButtonStyle = (typeof ACTION_BUTTON_STYLES)[number];
+export declare const ACTION_APPEARANCES: readonly ["solid", "outline", "ghost", "link"];
+export type ActionAppearance = (typeof ACTION_APPEARANCES)[number];
 /**
  * The presentation an action carries wherever it is rendered (ActionMenu, ActionButtons,
  * page header, table row, command palette), so one definition looks the same everywhere.
@@ -10,7 +10,7 @@ export interface ActionPresentation {
     /** Semantic colour intent. Colour is always `tone`, never `variant`. */
     tone?: SemanticTone;
     /** Button treatment, independent of the colour. */
-    buttonStyle?: ActionButtonStyle;
+    appearance?: ActionAppearance;
     /** Set false to omit the action entirely. */
     visible?: boolean;
     /** Prevents activation while keeping the action visible. */