@thewhatmatters/wmds 0.4.35 → 0.4.37

package/CHANGELOG.md

@@ -7,6 +7,36 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.37
+
+**AppShell: a docked aside you can use while watching the page, a labelled phone menu button, and titles that end in an ellipsis.**
+
+- **AppShell** `asideMode` (new): `overlay` (default, unchanged) or `docked`. Docked, from `lg`, the aside is a raised column beside the page (320px), and the page narrows to make room instead of being covered: for controls you use while watching the page change, like a font panel. It's a `complementary` landmark named by its title; Close or Escape from inside returns focus to the button that opened it. Below `lg` it's the overlay **Panel** either way. New exports `appShellAsideModes`, `AppShellAsideMode`.
+- **AppShell** `menuButton` (new): `icon` (default, unchanged) or `label`, the icon plus `labels.menu` as visible text on the phone menu button (Header rule N7), for when the glyph alone doesn't say what the menu holds. New exports `appShellMenuButtons`, `AppShellMenuButton`.
+- **PageHeader** `variant="app"`: a long title ends in an ellipsis on one line instead of wrapping out of the 56px band.
+- Stories **AppShell → State — aside docked** and **State — phone, labelled menu**, with interaction tests (the page narrows, no dialog, focus returns on Close and Escape; the labelled button opens the menu).
+
+### Consumer actions
+
+- None.
+
+## 0.4.36
+
+**Colour fixes from building every component in light and dark: fills that vanished, the navy on the dark body, invalid hovers, and a primary Button on a band.**
+
+- **`--color-accent-muted`** (and `--color-secondary`, which reads it): `#ebebeb` light (was the body's `#f8f8f8`), `#363636` dark (was the surface's `#262626`). The selected NavList pill, empty StepProgress segments, secondary Badges and Buttons, the AppShell avatar, Chips, and the Dropdown and Select item hover now show on the body and the surface.
+- **`--color-brand` in dark** is `#5566e0`, the navy's hue lifted (was `#011272`, 1.09:1 on the dark body): 3.58:1 on the body, 3.14:1 on the surface, white on it 4.81:1. The PromptBar send button, the selected SelectableCard border, the filled StepProgress segment, FooterReveal, TextSequence and TextSequenceShape marks now read in dark. **`--color-brand-surface` defaults to `#011272` itself** (it was `var(--color-brand)`), so `tone="inverse"` bands keep the deep navy in dark, and a client's own brand surface still wins.
+- **Dark status hovers:** `--color-{error,success,warning,info}-hover` mixed `108%` with white, which is invalid, so the browser dropped them. They're `88%` with white now, the same lift as the primary.
+- **Primary on a field band:** inside `tone="field"`, `--color-primary` inverts to the field's ink with the field colour as its label (Randy, 2026-10-29). A primary Button on a field band was the band's own colour, since the field defaults to the primary. Inverse bands are unchanged (they take the dark, or the client's dark, primary).
+- **Type scale metadata:** `astryxTypeScale` lists display line heights 1.05 / 1.1 / 1.15, matching typography.css (it said 1.15 / 1.2 / 1.24).
+- **FooterReveal.Ruled** in dark keeps the deep navy ink on its white field.
+- Tests: no `color-mix` above 100%; the secondary fill separates from body and surface in both themes; the dark brand's contrast; the field primary inversion; the type metadata matches the CSS.
+
+### Consumer actions
+
+- None required. Look at dark mode where you use `bg-brand` / `text-brand` as a large field: it's the lighter `#5566e0` now. Use `--color-brand-surface` (or a `tone="inverse"` Band) for a deep navy section in dark.
+- If your brand stylesheet sets `--color-brand` for dark, keep it at 3:1 or more on `--color-background-body` and white at 4.5:1 or more on it.
+
 ## 0.4.35
 
 **Contact and booking forms: two steps, booking after the request, a way out above the calendar, and nothing lost on close.**

package/dist/colors.css

@@ -28,7 +28,12 @@
 
   /* Accent (neutral UI chrome — not brand) */
   --color-accent: #262626;
-  --color-accent-muted: #f8f8f8;
+  /*
+   * `--color-secondary` (selected pills, empty progress segments, secondary badges, item hover).
+   * It must differ from both the body (#f8f8f8) and the surface (#fff), or those fills vanish:
+   * #ebebeb is 1.12:1 on the body and 1.19:1 on the surface.
+   */
+  --color-accent-muted: #ebebeb;
   --color-on-accent: #ffffff;
 
   /* Overlays & neutral fills */
@@ -114,7 +119,8 @@
    * - field: a saturated section colour (`tone="field"`). Default: the primary.
    * `*-muted` is the secondary text step on that colour; it must clear 4.5:1 too.
    */
-  --color-brand-surface: var(--color-brand);
+  /* The navy itself, not var(--color-brand): the dark brand is lifted for dark grounds, and a dark section stays deep. */
+  --color-brand-surface: #011272;
   --color-on-brand-surface: var(--color-on-brand);
   --color-field: var(--color-primary);
   --color-on-field: var(--color-on-primary);
@@ -189,7 +195,8 @@
   --color-text-accent: #ebebeb;
 
   --color-accent: #ebebeb;
-  --color-accent-muted: #262626;
+  /* Off the body (#1b1b1b, 1.43:1) and the surface (#262626, 1.26:1), so fills and item hover show on both. */
+  --color-accent-muted: #363636;
   --color-on-accent: #171717;
 
   --color-neutral: #ffffff1a;
@@ -226,11 +233,11 @@
   --color-on-primary: #fafaf8;
 
   /*
-   * The field stays #011272. That navy on #1b1b1b is 1.09:1 and on #262626 is 1.04:1,
-   * so it cannot be the hand outline. `--color-brand-outline` is 45% navy / 55% white
-   * (about #8d94c0): 5.1:1 on #262626 and 5.8:1 on #1b1b1b.
+   * #011272 on #1b1b1b is 1.09:1, so the dark brand is the same navy hue lifted to #5566e0:
+   * 3.58:1 on the body and 3.14:1 on the surface (marks, borders, fills), and white on it is 4.81:1
+   * (send button, selected pill). Inverse bands keep the deep navy (`--color-brand-surface` is #011272 on :root).
    */
-  --color-brand: #011272;
+  --color-brand: #5566e0;
   --color-on-brand: #ffffff;
   --color-brand-outline: color-mix(in srgb, var(--color-brand) 45%, white);
   --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
@@ -338,7 +345,15 @@
   /* Default: the ink itself, since a lighter step on a mid-tone field would fall under 4.5:1. */
   --tone-muted: var(--color-on-field-muted, var(--color-on-field));
   /* A tinted card would pull a mid-tone field under 4.5:1, so cards sit flat on the field. */
-  --tone-raised: var(--tone-bg);
+  --tone-raised: var(--tone-bg);  /*
+   * The field defaults to the primary, so a primary Button would vanish into it. On a field the primary
+   * inverts: the field's ink as the fill, the field colour as the label (Randy, 2026-10-29).
+   * Inverse bands keep the primary: they carry data-theme="dark", so it takes the dark (or client's dark) value.
+   */
+  --color-primary: var(--tone-fg);
+  --color-on-primary: var(--tone-bg);
+  --color-primary-hover: color-mix(in srgb, var(--tone-fg) 88%, var(--tone-bg));
+  --color-primary-active: color-mix(in srgb, var(--tone-fg) 80%, var(--tone-bg));
 }
 
 [data-tone="inverse"],

package/dist/components/molecules/PageHeader/pageHeaderStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/pageHeaderStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,4FAA4F;AAC5F,eAAO,MAAM,8BAA8B,uCAAuC,CAAC;AAEnF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAWpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,eAAO,MAAM,oBAAoB,qCAAqC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAIpE,CAAC"}
+{"version":3,"file":"pageHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/pageHeaderStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,4FAA4F;AAC5F,eAAO,MAAM,8BAA8B,uCAAuC,CAAC;AAEnF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAWpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,eAAO,MAAM,oBAAoB,qCAAqC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAKpE,CAAC"}

package/dist/components/molecules/PageHeader/pageHeaderStyles.js

@@ -12,7 +12,7 @@ var r = [
 	page: "flex items-center justify-between gap-4",
 	toolbar: e("flex items-center justify-between gap-2", n.md)
 }, o = "flex min-w-0 items-center gap-3", s = "flex shrink-0 items-center gap-2", c = {
-	app: e(t("section-heading"), "text-fg"),
+	app: e(t("section-heading"), "min-w-0 truncate text-fg"),
 	page: e(t("section-heading"), "text-fg"),
 	toolbar: e(t("ui-label"), "font-medium text-fg")
 };

package/dist/components/organisms/AppShell/AppShell.d.ts

@@ -13,6 +13,10 @@ export interface AppShellLabels {
     /** The skip link, the first tab stop, which moves focus to the page content. */
     skipToContent: string;
 }
+export declare const appShellAsideModes: readonly ["overlay", "docked"];
+export type AppShellAsideMode = (typeof appShellAsideModes)[number];
+export declare const appShellMenuButtons: readonly ["icon", "label"];
+export type AppShellMenuButton = (typeof appShellMenuButtons)[number];
 export interface AppShellProps {
     /** Page title — the `h1` in the title bar. */
     title: string;
@@ -33,11 +37,22 @@ export interface AppShellProps {
     sidebarOpen?: boolean;
     defaultSidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * `overlay` (default): the aside is a non-blocking **Panel** over the page.
+     * `docked`: from `lg` it sits beside the page, which narrows to make room, for controls you use while
+     * watching the page change (a font panel). Below `lg` it's the overlay **Panel** either way.
+     */
+    asideMode?: AppShellAsideMode;
     /** Aside open — controlled. */
     asideOpen?: boolean;
     defaultAsideOpen?: boolean;
     onAsideOpenChange?: (open: boolean) => void;
     labels?: Partial<AppShellLabels>;
+    /**
+     * The phone menu button (below `lg`): `icon` (default) or `label`, the icon plus `labels.menu` as visible
+     * text ("Patterns"), when the glyph alone wouldn't say what the menu holds.
+     */
+    menuButton?: AppShellMenuButton;
     /** Page content. **AppShell.Brand**, **Sidebar**, **Header**, and **Aside** children fill their slots instead. */
     children?: ReactNode;
     className?: AppShellLayoutClassName;
@@ -68,10 +83,11 @@ export interface AppShellContextValue {
 }
 /** State of the nearest **AppShell** — for a header button that opens the aside. */
 export declare function useAppShell(): AppShellContextValue;
-declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, aside: asideProp, asideTitle, asideDescription, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
+declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, aside: asideProp, asideTitle, asideDescription, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, asideMode, menuButton, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
 /**
  * App chrome — a sidebar on the page background and the page as an inset, raised surface with a
- * title bar. Below `lg` the sidebar is a start **Sheet**; the optional aside is a non-blocking **Panel**.
+ * title bar. Below `lg` the sidebar is a start **Sheet**; the optional aside is a non-blocking **Panel**,
+ * or with `asideMode="docked"`, from `lg`, a column beside the page.
  */
 export declare const AppShell: typeof AppShellRoot & {
     Brand: typeof AppShellBrand;

package/dist/components/organisms/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,uDAAuD;AACvD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,oFAAoF;IACpF,QAAQ,EAAE,MAAM,CAAC;IACjB,yFAAyF;IACzF,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,EAAE,MAAM,CAAC;CACvB;AAUD,MAAM,WAAW,aAAa;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uKAAuK;IACvK,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8FAA8F;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,kHAAkH;IAClH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAErD;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAEvD;AAED,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAE7D;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAEtD;AAED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,+BAE1D;AAED,MAAM,WAAW,oBAAoB;IACnC,mCAAmC;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qFAAqF;IACrF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAID,oFAAoF;AACpF,wBAAgB,WAAW,IAAI,oBAAoB,CAMlD;AAkDD,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,iBAAiB,EAChC,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,UAAU,EACV,gBAAgB,EAChB,WAAW,EAAE,eAAe,EAC5B,kBAAyB,EACzB,mBAAmB,EACnB,SAAS,EAAE,aAAa,EACxB,gBAAwB,EACxB,iBAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BAsMf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}

package/dist/components/organisms/AppShell/AppShell.js

@@ -1,218 +1,263 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
-import { Kbd as n } from "../../atoms/Kbd/Kbd.js";
-import { Tooltip as r } from "../../atoms/Tooltip/Tooltip.js";
-import { PageHeader as i } from "../../molecules/PageHeader/PageHeader.js";
-import { Panel as a } from "../Panel/Panel.js";
-import { Sheet as o } from "../Sheet/Sheet.js";
-import { appShellBrandClasses as ee, appShellCanvasClasses as te, appShellMainClasses as ne, appShellRootClasses as re, appShellSheetBodyClasses as ie, appShellSidebarBodyClasses as s, appShellSidebarClasses as ae, appShellSidebarFooterClasses as oe, appShellSkipLinkClasses as se, appShellSurfaceClasses as ce, appShellToggleDesktopClasses as le, appShellToggleMobileClasses as ue } from "./appShellStyles.js";
-import { Children as c, createContext as l, isValidElement as u, useCallback as d, useContext as f, useEffect as p, useId as de, useMemo as m, useRef as h, useState as g } from "react";
-import { PanelLeft as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Button as t } from "../../atoms/Button/Button.js";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { Kbd as r } from "../../atoms/Kbd/Kbd.js";
+import { Tooltip as i } from "../../atoms/Tooltip/Tooltip.js";
+import { PageHeader as ee } from "../../molecules/PageHeader/PageHeader.js";
+import { overlayPanelBodyScrollClasses as te, overlayPanelSectionStackClasses as ne } from "../Dialog/dialogStyles.js";
+import { OverlayPanelHeader as re } from "../Dialog/OverlayPanelHeader.js";
+import { Panel as ie } from "../Panel/Panel.js";
+import { Sheet as ae } from "../Sheet/Sheet.js";
+import { appShellAsideDockedClasses as oe, appShellBrandClasses as se, appShellCanvasClasses as ce, appShellMainClasses as le, appShellRootClasses as ue, appShellSheetBodyClasses as de, appShellSidebarBodyClasses as a, appShellSidebarClasses as fe, appShellSidebarFooterClasses as pe, appShellSkipLinkClasses as me, appShellSurfaceClasses as he, appShellToggleDesktopClasses as ge, appShellToggleMobileClasses as o } from "./appShellStyles.js";
+import { Children as s, createContext as c, isValidElement as l, useCallback as u, useContext as d, useEffect as f, useId as _e, useMemo as ve, useRef as p, useState as m } from "react";
+import { PanelLeft as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/organisms/AppShell/AppShell.tsx
-var fe = {
+var ye = {
 	collapse: "Collapse sidebar",
 	expand: "Expand sidebar",
 	menu: "Menu",
 	aside: "Details",
 	skipToContent: "Skip to content"
-};
+}, y = ["overlay", "docked"], b = ["icon", "label"];
 function x({ children: e }) {
-	return /* @__PURE__ */ y(v, { children: e });
+	return /* @__PURE__ */ _(g, { children: e });
 }
 function S({ children: e }) {
-	return /* @__PURE__ */ y(v, { children: e });
+	return /* @__PURE__ */ _(g, { children: e });
 }
 function C({ children: e }) {
-	return /* @__PURE__ */ y(v, { children: e });
+	return /* @__PURE__ */ _(g, { children: e });
 }
 function w({ children: e }) {
-	return /* @__PURE__ */ y(v, { children: e });
+	return /* @__PURE__ */ _(g, { children: e });
 }
 function T({ children: e }) {
-	return /* @__PURE__ */ y(v, { children: e });
+	return /* @__PURE__ */ _(g, { children: e });
 }
-var E = l(null);
+var E = c(null);
 function D() {
-	let e = f(E);
+	let e = d(E);
 	if (e == null) throw Error("useAppShell must be used inside <AppShell>.");
 	return e;
 }
 function O(e, t, n) {
-	let [r, i] = g(t);
-	return [e ?? r, d((t) => {
+	let [r, i] = m(t);
+	return [e ?? r, u((t) => {
 		e ?? i(t), n?.(t);
 	}, [e, n])];
 }
 var k = "(min-width: 1024px)";
-function pe(e) {
+function be(e) {
 	return e instanceof HTMLElement && e.isContentEditable;
 }
-function me(e) {
+function xe(e) {
 	let t = { content: [] };
-	return c.forEach(e, (e) => {
-		if (!u(e)) {
+	return s.forEach(e, (e) => {
+		if (!l(e)) {
 			e != null && e !== !1 && t.content.push(e);
 			return;
 		}
 		e.type === x ? t.brand = e.props.children : e.type === S ? t.sidebar = e.props.children : e.type === C ? t.sidebarFooter = e.props.children : e.type === w ? t.header = e.props.children : e.type === T ? t.aside = e.props : t.content.push(e);
 	}), t;
 }
-function A({ title: c, brand: l, sidebar: u, sidebarFooter: f, header: v, aside: x, asideTitle: S, asideDescription: C, sidebarOpen: w, defaultSidebarOpen: T = !0, onSidebarOpenChange: D, asideOpen: A, defaultAsideOpen: j = !1, onAsideOpenChange: he, labels: ge, children: _e, className: ve }) {
+function A({ title: s, brand: c, sidebar: l, sidebarFooter: d, header: g, aside: y, asideTitle: b, asideDescription: x, sidebarOpen: S, defaultSidebarOpen: C = !0, onSidebarOpenChange: w, asideOpen: T, defaultAsideOpen: D = !1, onAsideOpenChange: A, asideMode: j = "overlay", menuButton: Se = "icon", labels: Ce, children: we, className: Te }) {
 	let M = {
-		...fe,
-		...ge
-	}, N = me(_e), P = l ?? N.brand, F = u ?? N.sidebar, I = f ?? N.sidebarFooter, ye = v ?? N.header, L = x ?? N.aside?.children, R = F != null, be = L != null, [z, B] = O(w, T, D), [V, H] = O(A, j, he), [U, W] = g(!1), G = de(), K = h(null), q = h(null), J = d((e) => {
-		!e && K.current?.contains(document.activeElement) && q.current?.focus(), B(e);
-	}, [B]), Y = d(() => {
-		window.matchMedia(k).matches ? J(!z) : W((e) => !e);
-	}, [J, z]);
-	p(() => {
+		...ye,
+		...Ce
+	}, N = xe(we), P = c ?? N.brand, F = l ?? N.sidebar, I = d ?? N.sidebarFooter, Ee = g ?? N.header, L = y ?? N.aside?.children, R = F != null, z = L != null, [B, V] = O(S, C, w), [H, U] = O(T, D, A), [W, G] = m(!1), [De, Oe] = m(!1), K = _e(), ke = p(null), q = p(null), J = u((e) => {
+		!e && ke.current?.contains(document.activeElement) && q.current?.focus(), V(e);
+	}, [V]), Y = u(() => {
+		window.matchMedia(k).matches ? J(!B) : G((e) => !e);
+	}, [J, B]);
+	f(() => {
 		let e = window.matchMedia(k);
+		Oe(e.matches);
 		function t(e) {
-			e.matches && W(!1);
+			Oe(e.matches), e.matches && G(!1);
 		}
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []), p(() => {
+	}, []), f(() => {
 		if (!R) return;
 		function e(e) {
-			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || pe(e.target) || (e.preventDefault(), Y());
+			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || be(e.target) || (e.preventDefault(), Y());
 		}
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [R, Y]);
-	let xe = m(() => ({
-		sidebarOpen: z,
+	let Ae = ve(() => ({
+		sidebarOpen: B,
 		setSidebarOpen: J,
-		menuOpen: U,
-		setMenuOpen: W,
-		asideOpen: V,
-		setAsideOpen: H,
+		menuOpen: W,
+		setMenuOpen: G,
+		asideOpen: H,
+		setAsideOpen: U,
 		toggleSidebar: Y
 	}), [
-		V,
-		U,
 		H,
+		W,
+		U,
 		J,
-		z,
+		B,
 		Y
 	]);
-	function Se(e) {
-		e.target.closest("nav a[href], nav button") != null && W(!1);
+	function je(e) {
+		e.target.closest("nav a[href], nav button") != null && G(!1);
+	}
+	let X = z && j === "docked" && De, Z = `${K}-aside`, Me = p(null), Q = p(null);
+	f(() => {
+		X && (H ? Q.current = document.activeElement : Q.current = null);
+	}, [H, X]);
+	function Ne() {
+		let e = Q.current, t = Me.current?.contains(document.activeElement) ?? !1;
+		U(!1), t && (e?.isConnected ? e.focus() : document.getElementById(`${K}-main`)?.focus());
 	}
-	let X = z ? M.collapse : M.expand, Z = `${G}-main`, Q = P == null ? null : /* @__PURE__ */ y("div", {
-		className: ee,
+	let Pe = B ? M.collapse : M.expand, $ = `${K}-main`, Fe = P == null ? null : /* @__PURE__ */ _("div", {
+		className: se,
 		children: P
-	}), $ = I == null ? null : /* @__PURE__ */ y("div", {
-		className: oe,
+	}), Ie = I == null ? null : /* @__PURE__ */ _("div", {
+		className: pe,
 		children: I
-	}), Ce = R ? /* @__PURE__ */ b(r.Provider, { children: [/* @__PURE__ */ b(r, { children: [/* @__PURE__ */ y(r.Trigger, { render: /* @__PURE__ */ y(t, {
+	}), Le = R ? /* @__PURE__ */ v(i.Provider, { children: [/* @__PURE__ */ v(i, { children: [/* @__PURE__ */ _(i.Trigger, { render: /* @__PURE__ */ _(n, {
 		ref: q,
 		role: "ghost",
 		size: "sm",
 		title: "",
-		icon: /* @__PURE__ */ y(_, { strokeWidth: 2 }),
-		"aria-label": X,
-		"aria-expanded": z,
-		"aria-controls": G,
+		icon: /* @__PURE__ */ _(h, { strokeWidth: 2 }),
+		"aria-label": Pe,
+		"aria-expanded": B,
+		"aria-controls": K,
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: le,
-		onClick: () => J(!z)
-	}) }), /* @__PURE__ */ y(r.Content, { children: /* @__PURE__ */ b("span", {
+		className: ge,
+		onClick: () => J(!B)
+	}) }), /* @__PURE__ */ _(i.Content, { children: /* @__PURE__ */ v("span", {
 		className: "inline-flex items-center gap-2",
 		children: [
-			X,
-			/* @__PURE__ */ y(n, {
+			Pe,
+			/* @__PURE__ */ _(r, {
 				size: "sm",
 				children: "Ctrl"
 			}),
-			/* @__PURE__ */ y(n, {
+			/* @__PURE__ */ _(r, {
 				size: "sm",
 				children: "B"
 			})
 		]
-	}) })] }), /* @__PURE__ */ y(t, {
+	}) })] }), Se === "label" ? /* @__PURE__ */ _(t, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ y(_, { strokeWidth: 2 }),
+		icon: /* @__PURE__ */ _(h, { strokeWidth: 2 }),
+		"aria-expanded": W,
+		"aria-haspopup": "dialog",
+		"aria-keyshortcuts": "Control+B Meta+B",
+		className: e(o, "shrink-0"),
+		onClick: () => G(!0),
+		children: M.menu
+	}) : /* @__PURE__ */ _(n, {
+		role: "ghost",
+		size: "sm",
+		icon: /* @__PURE__ */ _(h, { strokeWidth: 2 }),
 		"aria-label": M.menu,
-		"aria-expanded": U,
+		"aria-expanded": W,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: ue,
-		onClick: () => W(!0)
+		className: o,
+		onClick: () => G(!0)
 	})] }) : null;
-	return /* @__PURE__ */ y(E.Provider, {
-		value: xe,
-		children: /* @__PURE__ */ b("div", {
-			className: e(re, ve),
+	return /* @__PURE__ */ _(E.Provider, {
+		value: Ae,
+		children: /* @__PURE__ */ v("div", {
+			className: e(ue, Te),
 			children: [
-				/* @__PURE__ */ y("a", {
-					href: `#${Z}`,
-					className: se,
+				/* @__PURE__ */ _("a", {
+					href: `#${$}`,
+					className: me,
 					onClick: (e) => {
-						e.preventDefault(), document.getElementById(Z)?.focus();
+						e.preventDefault(), document.getElementById($)?.focus();
 					},
 					children: M.skipToContent
 				}),
-				R ? /* @__PURE__ */ b("div", {
-					ref: K,
-					id: G,
-					className: e(ae, !z && "lg:!hidden"),
+				R ? /* @__PURE__ */ v("div", {
+					ref: ke,
+					id: K,
+					className: e(fe, !B && "lg:!hidden"),
 					children: [
-						Q,
-						/* @__PURE__ */ y("div", {
-							className: s,
+						Fe,
+						/* @__PURE__ */ _("div", {
+							className: a,
 							children: F
 						}),
-						$
+						Ie
 					]
 				}) : null,
-				/* @__PURE__ */ y("div", {
-					className: te,
-					children: /* @__PURE__ */ b("div", {
-						className: ce,
-						children: [/* @__PURE__ */ y(i, {
+				/* @__PURE__ */ v("div", {
+					className: ce,
+					children: [/* @__PURE__ */ v("div", {
+						className: he,
+						children: [/* @__PURE__ */ _(ee, {
 							variant: "app",
-							title: c,
-							"aria-label": c,
-							start: Ce,
-							end: ye
-						}), /* @__PURE__ */ y("main", {
-							id: Z,
+							title: s,
+							"aria-label": s,
+							start: Le,
+							end: Ee
+						}), /* @__PURE__ */ _("main", {
+							id: $,
 							tabIndex: -1,
-							className: ne,
+							className: le,
 							children: N.content
 						})]
-					})
+					}), X && H ? /* @__PURE__ */ _("aside", {
+						ref: Me,
+						id: Z,
+						"aria-labelledby": `${Z}-title`,
+						className: oe,
+						onKeyDown: (e) => {
+							e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), Ne());
+						},
+						children: /* @__PURE__ */ v("div", {
+							className: ne,
+							children: [/* @__PURE__ */ _(re, {
+								titleId: `${Z}-title`,
+								descriptionId: `${Z}-description`,
+								title: b ?? N.aside?.title ?? M.aside,
+								description: x ?? N.aside?.description,
+								closeLabel: "Close panel",
+								onClose: Ne,
+								delineated: !0
+							}), /* @__PURE__ */ _("div", {
+								className: e(te, "pb-4"),
+								children: L
+							})]
+						})
+					}) : null]
 				}),
-				R ? /* @__PURE__ */ y(o, {
-					open: U,
-					onOpenChange: W,
-					children: /* @__PURE__ */ y(o.Content, {
+				R ? /* @__PURE__ */ _(ae, {
+					open: W,
+					onOpenChange: G,
+					children: /* @__PURE__ */ _(ae.Content, {
 						side: "start",
 						title: M.menu,
-						children: /* @__PURE__ */ b("div", {
-							className: ie,
-							onClick: Se,
+						children: /* @__PURE__ */ v("div", {
+							className: de,
+							onClick: je,
 							children: [
-								Q,
-								/* @__PURE__ */ y("div", {
-									className: s,
+								Fe,
+								/* @__PURE__ */ _("div", {
+									className: a,
 									children: F
 								}),
-								$
+								Ie
 							]
 						})
 					})
 				}) : null,
-				be ? /* @__PURE__ */ y(a, {
-					open: V,
-					onOpenChange: H,
-					children: /* @__PURE__ */ y(a.Content, {
+				z && !X ? /* @__PURE__ */ _(ie, {
+					open: H,
+					onOpenChange: U,
+					children: /* @__PURE__ */ _(ie.Content, {
 						side: "end",
-						title: S ?? N.aside?.title ?? M.aside,
-						description: C ?? N.aside?.description,
+						title: b ?? N.aside?.title ?? M.aside,
+						description: x ?? N.aside?.description,
 						children: L
 					})
 				}) : null
@@ -228,4 +273,4 @@ var j = Object.assign(A, {
 	Aside: T
 });
 //#endregion
-export { j as AppShell, D as useAppShell };
+export { j as AppShell, y as appShellAsideModes, b as appShellMenuButtons, D as useAppShell };

package/dist/components/organisms/AppShell/appShellStyles.d.ts

@@ -7,8 +7,13 @@ export declare const appShellBrandClasses: string;
 export declare const appShellSidebarBodyClasses = "min-h-0 flex-1 overflow-y-auto";
 /** Pinned under the scrolling nav — the same 16px inset as the brand row. */
 export declare const appShellSidebarFooterClasses = "box-border shrink-0 px-4 py-3";
-/** 8px inset around the raised surface. */
-export declare const appShellCanvasClasses = "flex min-h-0 min-w-0 flex-1 p-2";
+/** 8px inset around the raised surface (and a docked aside beside it, 8px apart). */
+export declare const appShellCanvasClasses = "flex min-h-0 min-w-0 flex-1 gap-2 p-2";
+/**
+ * `asideMode="docked"` from `lg`: a second raised surface beside the page, which narrows to make room,
+ * so the page stays visible and usable while the aside is open (live controls, a font panel).
+ */
+export declare const appShellAsideDockedClasses: string;
 /** Raised surface — the Card shell radius and the soft card shadow. */
 export declare const appShellSurfaceClasses: string;
 /** First tab stop: hidden until focused, then pinned over the top-start corner. */

package/dist/components/organisms/AppShell/appShellStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,2CAA2C;AAC3C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAEvE,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC"}
+{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC"}

package/dist/components/organisms/AppShell/appShellStyles.js

@@ -3,6 +3,6 @@ import { cn as e } from "../../../lib/cn.js";
 import { cardLayoutShellShapeClasses as t } from "../../molecules/Card/cardStyles.js";
 import { pageHeaderAppBandHeightClasses as n } from "../../molecules/PageHeader/pageHeaderStyles.js";
 //#region src/components/organisms/AppShell/appShellStyles.ts
-var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 p-2", l = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", d = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", f = "max-lg:!hidden", p = "lg:!hidden", m = "flex h-full min-h-0 flex-col";
+var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 gap-2 p-2", l = e("flex min-h-0 w-80 shrink-0 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), d = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", f = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", p = "max-lg:!hidden", m = "lg:!hidden", h = "flex h-full min-h-0 flex-col";
 //#endregion
-export { a as appShellBrandClasses, c as appShellCanvasClasses, d as appShellMainClasses, r as appShellRootClasses, m as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, u as appShellSkipLinkClasses, l as appShellSurfaceClasses, f as appShellToggleDesktopClasses, p as appShellToggleMobileClasses };
+export { l as appShellAsideDockedClasses, a as appShellBrandClasses, c as appShellCanvasClasses, f as appShellMainClasses, r as appShellRootClasses, h as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, d as appShellSkipLinkClasses, u as appShellSurfaceClasses, p as appShellToggleDesktopClasses, m as appShellToggleMobileClasses };