@mitcsutt/kiln-ui 0.3.0 → 0.5.0

package/dist/components/feedback/Flash/Flash.d.ts

@@ -0,0 +1,47 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+export interface FlashProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Flashes each time this changes after the first render: a score, a count, an updated-at
+     * time. Compared with `Object.is`.
+     */
+    value?: unknown;
+    /**
+     * Flash once when the element mounts, for something that's new because of a change: the row
+     * a new goal adds. It doesn't flash during the page's first render. Pass it only to elements
+     * that are new, not to every row of a list that loads.
+     */
+    appear?: boolean;
+    /**
+     * Flash when this turns `true`: the element is the place a link just opened on. For routers
+     * that change the URL without the browser updating `:target` (most client-side routers).
+     * Plain `#hash` links and `hashchange`/`popstate` navigation are caught without it.
+     */
+    target?: boolean;
+    /** The one element to flash. It receives the class, data attribute and ref. */
+    children: ReactElement;
+}
+/**
+ * Draws brief attention to an element that just changed, or that a link just jumped to.
+ *
+ * @remarks
+ * `Flash` wraps any single element, a list row, a card, a figure, and gives it a short outline
+ * in the accent that fades away. It adds no element of its own. It flashes:
+ *
+ * - each time `value` changes after the first render;
+ * - once on mount with `appear`, for an element that's new because of a change;
+ * - when the element is the URL's `#target`, on a page load, a `#hash` link or back and forward;
+ * - when `target` turns `true`, for a client-side router, which changes the URL without
+ *   updating `:target`: `target={location.hash === '#match-123'}`.
+ *
+ * With reduced motion the outline doesn't fade: it shows, holds, and goes. The colour and how
+ * long it stays are the `--flash-color` and `--flash-duration` tokens.
+ *
+ * @privateRemarks
+ * One primitive for "this just changed / you were sent here" instead of a flash prop on every
+ * component (DESIGN.md §2 Motion: motion that shows a state change). An outline, so it never
+ * shifts layout and works over any background. Two keyframe names alternate so each change
+ * restarts the animation.
+ *
+ * <Flash value={goals}><List.Item>…</List.Item></Flash>
+ */
+export declare const Flash: import("react").ForwardRefExoticComponent<FlashProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/feedback/Flash/Flash.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../../utils/cx.js";
+import { useMergedRefs as t } from "../../inputs/internal/refs.js";
+import n from "./Flash.module.js";
+import { forwardRef as r, useEffect as i, useRef as a, useState as o, useSyncExternalStore as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { Slot as l } from "radix-ui";
+//#region src/components/feedback/Flash/Flash.tsx
+var u = !1, d = () => () => void 0, f = r(function({ value: r, appear: f = !1, target: p = !1, className: m, children: h, ...g }, _) {
+	let v = a(null), y = s(d, () => u, () => !1), [b, x] = o(f && y || p ? 1 : 0), [S, C] = o({
+		value: r,
+		target: p
+	});
+	return (!Object.is(S.value, r) || S.target !== p) && (C({
+		value: r,
+		target: p
+	}), (!Object.is(S.value, r) || p && !S.target) && x(b + 1)), i(() => {
+		u = !0;
+		let e = () => {
+			let e = v.current?.id;
+			e && window.location.hash === `#${e}` && x((e) => e + 1);
+		};
+		return window.addEventListener("hashchange", e), window.addEventListener("popstate", e), () => {
+			window.removeEventListener("hashchange", e), window.removeEventListener("popstate", e);
+		};
+	}, []), /* @__PURE__ */ c(l.Root, {
+		ref: t(_, v),
+		className: e(n.flash, m),
+		"data-flash": b === 0 ? void 0 : b % 2 ? "odd" : "even",
+		...g,
+		children: h
+	});
+});
+//#endregion
+export { f as Flash };
+
+//# sourceMappingURL=Flash.js.map

package/dist/components/feedback/Flash/Flash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flash.js","names":["styles","Flash_module_default","pageRendered","subscribe","Flash","forwardRef","rest","element","useRef","pageWasRendered","useSyncExternalStore","count","setCount","useState","appear","target","seen","setSeen","value","useEffect","check","id","n","Slot","useMergedRefs","ref","cx","className"],"sources":["../../../../src/components/feedback/Flash/Flash.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport styles from './Flash.module.css'\n\n/**\n * Whether any Flash has committed yet. Elements present at the first commit (the server render\n * and its hydration included) never flash on `appear`, so a page doesn't light up as it loads.\n */\nlet pageRendered = false\n\n/** Nothing to subscribe to: the snapshot only tells hydration (`false`) from a later mount. */\nconst subscribe = () => () => undefined\n\nexport interface FlashProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Flashes each time this changes after the first render: a score, a count, an updated-at\n   * time. Compared with `Object.is`.\n   */\n  value?: unknown\n  /**\n   * Flash once when the element mounts, for something that's new because of a change: the row\n   * a new goal adds. It doesn't flash during the page's first render. Pass it only to elements\n   * that are new, not to every row of a list that loads.\n   */\n  appear?: boolean\n  /**\n   * Flash when this turns `true`: the element is the place a link just opened on. For routers\n   * that change the URL without the browser updating `:target` (most client-side routers).\n   * Plain `#hash` links and `hashchange`/`popstate` navigation are caught without it.\n   */\n  target?: boolean\n  /** The one element to flash. It receives the class, data attribute and ref. */\n  children: ReactElement\n}\n\n/**\n * Draws brief attention to an element that just changed, or that a link just jumped to.\n *\n * @remarks\n * `Flash` wraps any single element, a list row, a card, a figure, and gives it a short outline\n * in the accent that fades away. It adds no element of its own. It flashes:\n *\n * - each time `value` changes after the first render;\n * - once on mount with `appear`, for an element that's new because of a change;\n * - when the element is the URL's `#target`, on a page load, a `#hash` link or back and forward;\n * - when `target` turns `true`, for a client-side router, which changes the URL without\n *   updating `:target`: `target={location.hash === '#match-123'}`.\n *\n * With reduced motion the outline doesn't fade: it shows, holds, and goes. The colour and how\n * long it stays are the `--flash-color` and `--flash-duration` tokens.\n *\n * @privateRemarks\n * One primitive for \"this just changed / you were sent here\" instead of a flash prop on every\n * component (DESIGN.md §2 Motion: motion that shows a state change). An outline, so it never\n * shifts layout and works over any background. Two keyframe names alternate so each change\n * restarts the animation.\n *\n * <Flash value={goals}><List.Item>…</List.Item></Flash>\n */\nexport const Flash = forwardRef<HTMLElement, FlashProps>(function Flash(\n  { value, appear = false, target = false, className, children, ...rest },\n  ref,\n) {\n  const element = useRef<HTMLElement>(null)\n  const pageWasRendered = useSyncExternalStore(\n    subscribe,\n    () => pageRendered,\n    () => false,\n  )\n  const [count, setCount] = useState((appear && pageWasRendered) || target ? 1 : 0)\n  const [seen, setSeen] = useState({ value, target })\n  if (!Object.is(seen.value, value) || seen.target !== target) {\n    setSeen({ value, target })\n    if (!Object.is(seen.value, value) || (target && !seen.target)) setCount(count + 1)\n  }\n\n  useEffect(() => {\n    pageRendered = true\n    // `:target` covers page loads; these cover hash links and history moves after it.\n    const check = () => {\n      const id = element.current?.id\n      if (id && window.location.hash === `#${id}`) setCount((n) => n + 1)\n    }\n    window.addEventListener('hashchange', check)\n    window.addEventListener('popstate', check)\n    return () => {\n      window.removeEventListener('hashchange', check)\n      window.removeEventListener('popstate', check)\n    }\n  }, [])\n\n  return (\n    <Slot.Root\n      ref={useMergedRefs(ref, element)}\n      className={cx(styles.flash, className)}\n      data-flash={count === 0 ? undefined : count % 2 ? 'odd' : 'even'}\n      {...rest}\n    >\n      {children}\n    </Slot.Root>\n  )\n})\n"],"mappings":";;;;;;;AAkBA,IAAIE,IAAe,IAGbC,gBAAwB,KAAA,GAgDjBC,IAAQC,EAAoC,SACvD,EAAE,UAAO,YAAS,IAAO,YAAS,IAAO,cAAW,aAAU,GAAGC,KACjE,GACA;CACA,IAAMC,IAAUC,EAAoB,IAAI,GAClCC,IAAkBC,EACtBP,SACMD,SACA,EACR,GACM,CAACS,GAAOC,KAAYC,EAAUC,KAAUL,KAAoBM,IAAS,IAAI,CAAC,GAC1E,CAACC,GAAMC,KAAWJ,EAAS;EAAE;EAAO;CAAO,CAAC;CAqBlD,QApBI,CAAC,OAAO,GAAGG,EAAK,OAAOE,CAAK,KAAKF,EAAK,WAAWD,OACnDE,EAAQ;EAAE;EAAO;CAAO,CAAC,IACrB,CAAC,OAAO,GAAGD,EAAK,OAAOE,CAAK,KAAMH,KAAU,CAACC,EAAK,WAASJ,EAASD,IAAQ,CAAC,IAGnFQ,QAAgB;EACd,IAAe;EAEf,IAAMC,UAAc;GAClB,IAAMC,IAAKd,EAAQ,SAAS;GAC5B,AAAIc,KAAM,OAAO,SAAS,SAAS,IAAIA,OAAMT,GAAU,MAAMU,IAAI,CAAC;EACpE;EAGA,OAFA,OAAO,iBAAiB,cAAcF,CAAK,GAC3C,OAAO,iBAAiB,YAAYA,CAAK,SAC5B;GAEX,AADA,OAAO,oBAAoB,cAAcA,CAAK,GAC9C,OAAO,oBAAoB,YAAYA,CAAK;EAC9C;CACF,GAAG,CAAC,CAAC,GAGH,kBAACG,EAAK,MAAN;EACE,KAAKC,EAAcC,GAAKlB,CAAO;EAC/B,WAAWmB,EAAG1B,EAAO,OAAO2B,CAAS;EACrC,cAAYhB,MAAU,IAAI,KAAA,IAAYA,IAAQ,IAAI,QAAQ;EAC1D,GAAIL;EAEH;CACQ,CAAA;AAEf,CAAC"}

package/dist/components/feedback/Flash/Flash.module.js

@@ -0,0 +1,10 @@
+//#region src/components/feedback/Flash/Flash.module.css
+var e = "kiln-Flash__flash", t = {
+	flash: e,
+	"flash-odd": "kiln-Flash__flash-odd",
+	"flash-even": "kiln-Flash__flash-even"
+};
+//#endregion
+export { t as default, e as flash };
+
+//# sourceMappingURL=Flash.module.js.map

package/dist/components/feedback/Flash/Flash.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flash.module.js","names":["flash","Flash_module_default"],"sources":["../../../../src/components/feedback/Flash/Flash.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --flash-color      default var(--color-accent) — live state is the accent's job\n *   --flash-duration   default 1.6s — how long the mark stays. Not a motion token: those\n *                      collapse under reduced motion, and the mark must still be seen there.\n *\n * An outline, so it never moves layout and shows over any fill. Two keyframe names alternate\n * (data-flash odd/even) so a second change restarts the animation.\n */\n.flash {\n  --_c: var(--flash-color, var(--color-accent));\n  --_d: var(--flash-duration, 1.6s);\n}\n\n.flash:target,\n.flash[data-flash='odd'] {\n  animation: flash-odd var(--_d) var(--ease-out);\n}\n.flash[data-flash='even'] {\n  animation: flash-even var(--_d) var(--ease-out);\n}\n\n@keyframes flash-odd {\n  from {\n    outline: 3px solid var(--_c);\n    outline-offset: 2px;\n  }\n  to {\n    outline: 3px solid transparent;\n    outline-offset: 2px;\n  }\n}\n@keyframes flash-even {\n  from {\n    outline: 3px solid var(--_c);\n    outline-offset: 2px;\n  }\n  to {\n    outline: 3px solid transparent;\n    outline-offset: 2px;\n  }\n}\n\n/* Reduced motion: no fade. The mark shows, holds for the same time, and goes. */\n@media (prefers-reduced-motion: reduce) {\n  .flash:target,\n  .flash[data-flash] {\n    animation-timing-function: steps(1, end);\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Flash/index.d.ts

@@ -0,0 +1,2 @@
+export { Flash } from './Flash.js';
+export type { FlashProps } from './Flash.js';

package/dist/components/feedback/RelativeTime/RelativeTime.d.ts

@@ -11,6 +11,13 @@ export interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeEleme
     updateInterval?: number;
     /** Text before the time, e.g. "Updated". A space is added for you. */
     prefix?: ReactNode;
+    /**
+     * Seconds either side of now that read as `justNowLabel` instead of `Intl`'s "now" or
+     * "in 30 sec". Default `0`, which leaves the wording to `Intl`.
+     */
+    justNowWithin?: number;
+    /** What a moment within `justNowWithin` reads as. Default "just now". */
+    justNowLabel?: string;
 }
 /**
  * How long ago, or how long until. A time element that keeps itself current and renders safely on

package/dist/components/feedback/RelativeTime/RelativeTime.js

@@ -3,32 +3,32 @@ import r from "./RelativeTime.module.js";
 import { forwardRef as i, useEffect as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/feedback/RelativeTime/RelativeTime.tsx
-var l = i(function({ date: i, locale: l = "en-AU", format: u = "short", updateInterval: d = 3e4, prefix: f, title: p, className: m, ...h }, g) {
-	let [_, v] = o(null);
+var l = i(function({ date: i, locale: l = "en-AU", format: u = "short", updateInterval: d = 3e4, prefix: f, justNowWithin: p = 0, justNowLabel: m = "just now", title: h, className: g, ..._ }, v) {
+	let [y, b] = o(null);
 	a(() => {
-		if (v(Date.now()), !d) return;
+		if (b(Date.now()), !d) return;
 		let e = setInterval(() => {
-			v(Date.now());
+			b(Date.now());
 		}, d);
 		return () => {
 			clearInterval(e);
 		};
 	}, [d]);
-	let y = n(i), b = !Number.isNaN(y.getTime()), x = b ? e(y, l) : "", S = b ? _ === null ? x : t(y, _, l, u) : "";
+	let x = n(i), S = !Number.isNaN(x.getTime()), C = S ? e(x, l) : "", w = S ? y === null ? C : Math.abs(x.getTime() - y) < p * 1e3 ? m : t(x, y, l, u) : "";
 	return /* @__PURE__ */ c("time", {
-		ref: g,
-		dateTime: b ? y.toISOString() : void 0,
-		title: p ?? x,
-		className: m,
+		ref: v,
+		dateTime: S ? x.toISOString() : void 0,
+		title: h ?? C,
+		className: g,
 		suppressHydrationWarning: !0,
-		...h,
+		..._,
 		children: [f ? /* @__PURE__ */ c("span", {
 			className: r.prefix,
 			children: [f, " "]
 		}) : null, /* @__PURE__ */ s("span", {
 			className: r.value,
 			suppressHydrationWarning: !0,
-			children: S
+			children: w
 		})]
 	});
 });

package/dist/components/feedback/RelativeTime/RelativeTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","names":["styles","RelativeTime_module_default","RelativeTime","forwardRef","rest","now","setNow","useState","updateInterval","id","d","toDate","date","valid","absolute","formatAbsoluteTime","locale","text","formatRelativeTime","format","title","prefix"],"sources":["../../../../src/components/feedback/RelativeTime/RelativeTime.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, type ReactNode, type TimeHTMLAttributes } from 'react'\nimport { formatAbsoluteTime, formatRelativeTime, toDate, type RelativeTimeStyle } from './format'\nimport styles from './RelativeTime.module.css'\n\nexport interface RelativeTimeProps extends Omit<\n  TimeHTMLAttributes<HTMLTimeElement>,\n  'dateTime' | 'children' | 'prefix'\n> {\n  /** The moment to describe. Anything `new Date()` accepts. */\n  date: Date | string | number\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Wording length: \"3 minutes ago\" (`long`), \"3 mins ago\" (`short`, default), `narrow`. */\n  format?: RelativeTimeStyle\n  /** Re-render every N ms so the text stays true. `0` disables. Default 30 000. */\n  updateInterval?: number\n  /** Text before the time, e.g. \"Updated\". A space is added for you. */\n  prefix?: ReactNode\n}\n\n/**\n * How long ago, or how long until. A time element that keeps itself current and renders safely on\n * the server.\n *\n * @remarks\n * `RelativeTime` renders a `<time>` that reads \"3 mins ago\" or \"in 2 hours\", and updates itself\n * (every 30 seconds by default). The full date is always in its `title`.\n *\n * @privateRemarks\n * A `<time>` that says how long ago (or until) something happened, and keeps itself current.\n *\n * SSR: the server and the first client render show the absolute date (no clock is read\n * during render, so hydration can't disagree about \"now\"); the relative wording appears\n * once mounted. The absolute date stays available as the `title`.\n *\n * <RelativeTime date={fetchedAt} prefix=\"Updated\" />\n */\nexport const RelativeTime = forwardRef<HTMLTimeElement, RelativeTimeProps>(function RelativeTime(\n  {\n    date,\n    locale = 'en-AU',\n    format = 'short',\n    updateInterval = 30_000,\n    prefix,\n    title,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [now, setNow] = useState<number | null>(null)\n\n  useEffect(() => {\n    setNow(Date.now())\n    if (!updateInterval) return\n    const id = setInterval(() => {\n      setNow(Date.now())\n    }, updateInterval)\n    return () => {\n      clearInterval(id)\n    }\n  }, [updateInterval])\n\n  const d = toDate(date)\n  const valid = !Number.isNaN(d.getTime())\n  const absolute = valid ? formatAbsoluteTime(d, locale) : ''\n  const text = !valid ? '' : now === null ? absolute : formatRelativeTime(d, now, locale, format)\n\n  return (\n    <time\n      ref={ref}\n      dateTime={valid ? d.toISOString() : undefined}\n      title={title ?? absolute}\n      className={className}\n      suppressHydrationWarning\n      {...rest}\n    >\n      {prefix ? <span className={styles.prefix}>{prefix} </span> : null}\n      {/* Server renders the absolute date in its timezone; the client re-renders relative text on mount. */}\n      <span className={styles.value} suppressHydrationWarning>\n        {text}\n      </span>\n    </time>\n  )\n})\n"],"mappings":";;;;;AAqCA,IAAaE,IAAeC,EAA+C,SACzE,EACE,SACA,YAAS,SACT,YAAS,SACT,oBAAiB,KACjB,WACA,UACA,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAKC,KAAUC,EAAwB,IAAI;CAElD,QAAgB;EAEd,IADAD,EAAO,KAAK,IAAI,CAAC,GACb,CAACE,GAAgB;EACrB,IAAMC,IAAK,kBAAkB;GAC3B,EAAO,KAAK,IAAI,CAAC;EACnB,GAAGD,CAAc;EACjB,aAAa;GACX,cAAcC,CAAE;EAClB;CACF,GAAG,CAACD,CAAc,CAAC;CAEnB,IAAME,IAAIC,EAAOC,CAAI,GACfC,IAAQ,CAAC,OAAO,MAAMH,EAAE,QAAQ,CAAC,GACjCI,IAAWD,IAAQE,EAAmBL,GAAGM,CAAM,IAAI,IACnDC,IAAQJ,IAAaR,MAAQ,OAAOS,IAAWI,EAAmBR,GAAGL,GAAKW,GAAQG,CAAM,IAAxE;CAEtB,OACE,kBAAC,QAAD;EACO;EACL,UAAUN,IAAQH,EAAE,YAAY,IAAI,KAAA;EACpC,OAAOU,KAASN;EACL;EACX,0BAAA;EACA,GAAIV;EANN,UAAA,CAQGiB,IAAS,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAxB,UAAA,CAAiCqB,GAAO,GAAO;EAAI,CAAA,IAAA,MAE7D,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAO,0BAAA;GAC5B,UAAAiB;EACG,CAAA,CACF;;AAEV,CAAC"}
+{"version":3,"file":"RelativeTime.js","names":["styles","RelativeTime_module_default","RelativeTime","forwardRef","rest","now","setNow","useState","updateInterval","id","d","toDate","date","valid","absolute","formatAbsoluteTime","locale","text","justNowWithin","justNowLabel","formatRelativeTime","format","title","prefix"],"sources":["../../../../src/components/feedback/RelativeTime/RelativeTime.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, type ReactNode, type TimeHTMLAttributes } from 'react'\nimport { formatAbsoluteTime, formatRelativeTime, toDate, type RelativeTimeStyle } from './format'\nimport styles from './RelativeTime.module.css'\n\nexport interface RelativeTimeProps extends Omit<\n  TimeHTMLAttributes<HTMLTimeElement>,\n  'dateTime' | 'children' | 'prefix'\n> {\n  /** The moment to describe. Anything `new Date()` accepts. */\n  date: Date | string | number\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Wording length: \"3 minutes ago\" (`long`), \"3 mins ago\" (`short`, default), `narrow`. */\n  format?: RelativeTimeStyle\n  /** Re-render every N ms so the text stays true. `0` disables. Default 30 000. */\n  updateInterval?: number\n  /** Text before the time, e.g. \"Updated\". A space is added for you. */\n  prefix?: ReactNode\n  /**\n   * Seconds either side of now that read as `justNowLabel` instead of `Intl`'s \"now\" or\n   * \"in 30 sec\". Default `0`, which leaves the wording to `Intl`.\n   */\n  justNowWithin?: number\n  /** What a moment within `justNowWithin` reads as. Default \"just now\". */\n  justNowLabel?: string\n}\n\n/**\n * How long ago, or how long until. A time element that keeps itself current and renders safely on\n * the server.\n *\n * @remarks\n * `RelativeTime` renders a `<time>` that reads \"3 mins ago\" or \"in 2 hours\", and updates itself\n * (every 30 seconds by default). The full date is always in its `title`.\n *\n * @privateRemarks\n * A `<time>` that says how long ago (or until) something happened, and keeps itself current.\n *\n * SSR: the server and the first client render show the absolute date (no clock is read\n * during render, so hydration can't disagree about \"now\"); the relative wording appears\n * once mounted. The absolute date stays available as the `title`.\n *\n * <RelativeTime date={fetchedAt} prefix=\"Updated\" />\n */\nexport const RelativeTime = forwardRef<HTMLTimeElement, RelativeTimeProps>(function RelativeTime(\n  {\n    date,\n    locale = 'en-AU',\n    format = 'short',\n    updateInterval = 30_000,\n    prefix,\n    justNowWithin = 0,\n    justNowLabel = 'just now',\n    title,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [now, setNow] = useState<number | null>(null)\n\n  useEffect(() => {\n    setNow(Date.now())\n    if (!updateInterval) return\n    const id = setInterval(() => {\n      setNow(Date.now())\n    }, updateInterval)\n    return () => {\n      clearInterval(id)\n    }\n  }, [updateInterval])\n\n  const d = toDate(date)\n  const valid = !Number.isNaN(d.getTime())\n  const absolute = valid ? formatAbsoluteTime(d, locale) : ''\n  const text = !valid\n    ? ''\n    : now === null\n      ? absolute\n      : Math.abs(d.getTime() - now) < justNowWithin * 1000\n        ? justNowLabel\n        : formatRelativeTime(d, now, locale, format)\n\n  return (\n    <time\n      ref={ref}\n      dateTime={valid ? d.toISOString() : undefined}\n      title={title ?? absolute}\n      className={className}\n      suppressHydrationWarning\n      {...rest}\n    >\n      {prefix ? <span className={styles.prefix}>{prefix} </span> : null}\n      {/* Server renders the absolute date in its timezone; the client re-renders relative text on mount. */}\n      <span className={styles.value} suppressHydrationWarning>\n        {text}\n      </span>\n    </time>\n  )\n})\n"],"mappings":";;;;;AA4CA,IAAaE,IAAeC,EAA+C,SACzE,EACE,SACA,YAAS,SACT,YAAS,SACT,oBAAiB,KACjB,WACA,mBAAgB,GAChB,kBAAe,YACf,UACA,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAKC,KAAUC,EAAwB,IAAI;CAElD,QAAgB;EAEd,IADAD,EAAO,KAAK,IAAI,CAAC,GACb,CAACE,GAAgB;EACrB,IAAMC,IAAK,kBAAkB;GAC3B,EAAO,KAAK,IAAI,CAAC;EACnB,GAAGD,CAAc;EACjB,aAAa;GACX,cAAcC,CAAE;EAClB;CACF,GAAG,CAACD,CAAc,CAAC;CAEnB,IAAME,IAAIC,EAAOC,CAAI,GACfC,IAAQ,CAAC,OAAO,MAAMH,EAAE,QAAQ,CAAC,GACjCI,IAAWD,IAAQE,EAAmBL,GAAGM,CAAM,IAAI,IACnDC,IAAQJ,IAEVR,MAAQ,OACNS,IACA,KAAK,IAAIJ,EAAE,QAAQ,IAAIL,CAAG,IAAIa,IAAgB,MAC5CC,IACAC,EAAmBV,GAAGL,GAAKW,GAAQK,CAAM,IAL7C;CAOJ,OACE,kBAAC,QAAD;EACO;EACL,UAAUR,IAAQH,EAAE,YAAY,IAAI,KAAA;EACpC,OAAOY,KAASR;EACL;EACX,0BAAA;EACA,GAAIV;EANN,UAAA,CAQGmB,IAAS,kBAAC,QAAD;GAAM,WAAWvB,EAAO;GAAxB,UAAA,CAAiCuB,GAAO,GAAO;EAAI,CAAA,IAAA,MAE7D,kBAAC,QAAD;GAAM,WAAWvB,EAAO;GAAO,0BAAA;GAC5B,UAAAiB;EACG,CAAA,CACF;;AAEV,CAAC"}

package/dist/components/feedback/StatusDot/StatusDot.d.ts

@@ -3,7 +3,7 @@ import type { Tone } from '../../../utils/tokens.js';
 export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
     /** State colour. Default `neutral`. */
     tone?: Tone;
-    /** What the colour means: "Paid", "Through to the round of 32", "Deploying". Always required — colour alone is not information. */
+    /** What the colour means: "Paid", "Awaiting approval", "Deploying". Always required — colour alone is not information. */
     label: ReactNode;
     /** Keep the label for screen readers only (e.g. in a dense table with a legend). */
     labelHidden?: boolean;

package/dist/components/feedback/StatusDot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":["styles","StatusDot_module_default","StatusDot","forwardRef","rest","cx","className","tone","size","labelHidden","label"],"sources":["../../../../src/components/feedback/StatusDot/StatusDot.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport styles from './StatusDot.module.css'\n\nexport interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {\n  /** State colour. Default `neutral`. */\n  tone?: Tone\n  /** What the colour means: \"Paid\", \"Through to the round of 32\", \"Deploying\". Always required — colour alone is not information. */\n  label: ReactNode\n  /** Keep the label for screen readers only (e.g. in a dense table with a legend). */\n  labelHidden?: boolean\n  size?: 'sm' | 'md'\n}\n\n/**\n * A small static dot and a label, for states that sit still.\n *\n * @remarks\n * `StatusDot` pairs a tone with a word, so status never depends on colour alone. For \"happening\n * now\", use a {@link LiveIndicator | LiveIndicator}.\n *\n * @privateRemarks\n * A small static dot plus a label. For states that sit still; for \"happening now\" use LiveIndicator.\n */\nexport const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { tone = 'neutral', label, labelHidden = false, size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.status, className)}\n      data-tone={tone}\n      data-size={size}\n      data-label-hidden={labelHidden || undefined}\n      {...rest}\n    >\n      <span className={styles.dot} aria-hidden=\"true\" />\n      <span className={labelHidden ? styles.hidden : styles.label}>{label}</span>\n    </span>\n  )\n})\n"],"mappings":";;;;;AAyBA,IAAaE,IAAYC,EAA4C,SACnE,EAAE,UAAO,WAAW,UAAO,iBAAc,IAAO,UAAO,MAAM,cAAW,GAAGC,KAC3E,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,QAAQM,CAAS;EACtC,aAAWC;EACX,aAAWC;EACX,qBAAmBC,KAAe,KAAA;EAClC,GAAIL;EANN,UAAA,CAQE,kBAAC,QAAD;GAAM,WAAWJ,EAAO;GAAK,eAAY;EAAQ,CAAA,GACjD,kBAAC,QAAD;GAAM,WAAWS,IAAcT,EAAO,SAASA,EAAO;GAAQ,UAAAU;EAAY,CAAA,CACtE;;AAEV,CAAC"}
+{"version":3,"file":"StatusDot.js","names":["styles","StatusDot_module_default","StatusDot","forwardRef","rest","cx","className","tone","size","labelHidden","label"],"sources":["../../../../src/components/feedback/StatusDot/StatusDot.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport styles from './StatusDot.module.css'\n\nexport interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {\n  /** State colour. Default `neutral`. */\n  tone?: Tone\n  /** What the colour means: \"Paid\", \"Awaiting approval\", \"Deploying\". Always required — colour alone is not information. */\n  label: ReactNode\n  /** Keep the label for screen readers only (e.g. in a dense table with a legend). */\n  labelHidden?: boolean\n  size?: 'sm' | 'md'\n}\n\n/**\n * A small static dot and a label, for states that sit still.\n *\n * @remarks\n * `StatusDot` pairs a tone with a word, so status never depends on colour alone. For \"happening\n * now\", use a {@link LiveIndicator | LiveIndicator}.\n *\n * @privateRemarks\n * A small static dot plus a label. For states that sit still; for \"happening now\" use LiveIndicator.\n */\nexport const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { tone = 'neutral', label, labelHidden = false, size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.status, className)}\n      data-tone={tone}\n      data-size={size}\n      data-label-hidden={labelHidden || undefined}\n      {...rest}\n    >\n      <span className={styles.dot} aria-hidden=\"true\" />\n      <span className={labelHidden ? styles.hidden : styles.label}>{label}</span>\n    </span>\n  )\n})\n"],"mappings":";;;;;AAyBA,IAAaE,IAAYC,EAA4C,SACnE,EAAE,UAAO,WAAW,UAAO,iBAAc,IAAO,UAAO,MAAM,cAAW,GAAGC,KAC3E,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,QAAQM,CAAS;EACtC,aAAWC;EACX,aAAWC;EACX,qBAAmBC,KAAe,KAAA;EAClC,GAAIL;EANN,UAAA,CAQE,kBAAC,QAAD;GAAM,WAAWJ,EAAO;GAAK,eAAY;EAAQ,CAAA,GACjD,kBAAC,QAAD;GAAM,WAAWS,IAAcT,EAAO,SAASA,EAAO;GAAQ,UAAAU;EAAY,CAAA,CACtE;;AAEV,CAAC"}

package/dist/components/inputs/ChoiceCards/ChoiceCards.js

@@ -1,8 +1,8 @@
 import { cx as e } from "../../../utils/cx.js";
 import { CheckIcon as t } from "../../../icons/icons.js";
 import { mergeStyles as n, responsiveVars as r } from "../../../utils/responsive.js";
-import { hiddenInputs as i, useControllableValue as a, useFocusLeave as o } from "../CheckboxGroup/choice.js";
-import { joinIds as s } from "../internal/refs.js";
+import { joinIds as i } from "../internal/refs.js";
+import { hiddenInputs as a, useControllableValue as o, useFocusLeave as s } from "../CheckboxGroup/choice.js";
 import { markFieldAware as c, useResolvedField as l } from "../internal/FieldContext.js";
 import u from "./ChoiceCards.module.js";
 import { forwardRef as d, useId as f } from "react";
@@ -47,10 +47,10 @@ function x(e, t) {
 function S(e, t) {
 	return {
 		"aria-labelledby": t.label,
-		"aria-describedby": s(e.description != null && t.description, e.meta != null && t.meta)
+		"aria-describedby": i(e.description != null && t.description, e.meta != null && t.meta)
 	};
 }
-var C = c(d(function(t, s) {
+var C = c(d(function(t, i) {
 	let { type: c, value: d, defaultValue: p, onValueChange: C, options: w, columns: T, name: E, disabled: D, readOnly: O, invalid: k, id: A, className: j, style: M, onBlur: N, "aria-describedby": P, "aria-invalid": F, "aria-labelledby": I, ...L } = t, R = f(), z = l({
 		id: A,
 		describedBy: P,
@@ -58,10 +58,10 @@ var C = c(d(function(t, s) {
 		ariaInvalid: F,
 		disabled: D,
 		readOnly: O
-	}), B = o(N), V = (e) => e === void 0 ? void 0 : typeof e == "string" ? e ? [e] : v : e, H = C ? (e) => {
+	}), B = s(N), V = (e) => e === void 0 ? void 0 : typeof e == "string" ? e ? [e] : v : e, H = C ? (e) => {
 		C(c === "single" ? e[0] ?? "" : [...e]);
-	} : void 0, [U, W] = a(V(d), V(p) ?? v, H, z.readOnly), G = {
-		ref: s,
+	} : void 0, [U, W] = o(V(d), V(p) ?? v, H, z.readOnly), G = {
+		ref: i,
 		id: z.id,
 		className: e(u.cards, j),
 		style: n(r("choice-cards-columns", T, y), M),
@@ -99,7 +99,7 @@ var C = c(d(function(t, s) {
 					kind: "radio"
 				})
 			}, e.value);
-		}), i(E, U, z.disabled)]
+		}), a(E, U, z.disabled)]
 	}) : /* @__PURE__ */ h("div", {
 		role: "group",
 		...G,
@@ -121,7 +121,7 @@ var C = c(d(function(t, s) {
 					kind: "checkbox"
 				})
 			}, e.value);
-		}), i(E, U, z.disabled)]
+		}), a(E, U, z.disabled)]
 	});
 }));
 //#endregion

package/dist/components/inputs/Combobox/Combobox.js

@@ -1,7 +1,7 @@
 import { cx as e } from "../../../utils/cx.js";
 import { CheckIcon as t, ChevronDownIcon as n, CloseIcon as r } from "../../../icons/icons.js";
-import { Spinner as i } from "../../feedback/Spinner/Spinner.js";
-import { useMergedRefs as a } from "../internal/refs.js";
+import { useMergedRefs as i } from "../internal/refs.js";
+import { Spinner as a } from "../../feedback/Spinner/Spinner.js";
 import { markFieldAware as o, useResolvedField as ee } from "../internal/FieldContext.js";
 import te from "../internal/messages.module.js";
 import ne from "../internal/control.module.js";
@@ -94,7 +94,7 @@ var me = u(function({ children: e, onInteractOutside: t }, n) {
 		required: ke,
 		disabled: Oe,
 		readOnly: Ae
-	}), Ge = ce(), T = w.id ?? `${Ge}combobox`, Ke = `${T}-listbox`, qe = `${T}-status`, E = !w.disabled && !w.readOnly, D = p(null), O = p(null), Je = a(oe, D), k = p(/* @__PURE__ */ new Map());
+	}), Ge = ce(), T = w.id ?? `${Ge}combobox`, Ke = `${T}-listbox`, qe = `${T}-status`, E = !w.disabled && !w.readOnly, D = p(null), O = p(null), Je = i(oe, D), k = p(/* @__PURE__ */ new Map());
 	for (let e of v) k.current.set(e.value, e.label);
 	let A = d((e) => v.find((t) => t.value === e)?.label ?? k.current.get(e) ?? e, [v]), [j, M] = c(u.value, u.defaultValue, u.emit), N = !C && j[0] !== void 0 ? A(j[0]) : "", [P, Ye] = c(he, ge ?? (C || u.defaultValue[0] === void 0 ? "" : A(u.defaultValue[0])), _e), Xe = p(P);
 	Xe.current = P;
@@ -306,7 +306,7 @@ var me = u(function({ children: e, onInteractOutside: t }, n) {
 						/* @__PURE__ */ g("span", {
 							className: l.trailing,
 							children: [
-								y ? /* @__PURE__ */ h(i, {
+								y ? /* @__PURE__ */ h(a, {
 									size: "sm",
 									label: null,
 									className: l.spinner
@@ -373,7 +373,7 @@ var me = u(function({ children: e, onInteractOutside: t }, n) {
 						}),
 						y && U.length === 0 ? /* @__PURE__ */ g("div", {
 							className: l.message,
-							children: [/* @__PURE__ */ h(i, {
+							children: [/* @__PURE__ */ h(a, {
 								size: "sm",
 								label: null
 							}), /* @__PURE__ */ h("span", { children: ye })]

package/dist/components/inputs/PasswordInput/PasswordInput.js

@@ -1,6 +1,6 @@
 import { EyeIcon as e, EyeOffIcon as t } from "../../../icons/icons.js";
-import { IconButton as n } from "../../actions/IconButton/IconButton.js";
-import { useMergedRefs as r } from "../internal/refs.js";
+import { useMergedRefs as n } from "../internal/refs.js";
+import { IconButton as r } from "../../actions/IconButton/IconButton.js";
 import { markFieldAware as i, useResolvedField as a } from "../internal/FieldContext.js";
 import { Input as o } from "../Input/Input.js";
 import s from "./PasswordInput.module.js";
@@ -12,7 +12,7 @@ var h = i(c(function({ autoComplete: i, visible: c, defaultVisible: h = !1, onVi
 	let T = a({
 		id: b,
 		disabled: x
-	}), E = u(), D = T.id ?? `${E}password`, O = d(null), k = r(w, O), [A, j] = f(h), M = c ?? A, N = (e) => {
+	}), E = u(), D = T.id ?? `${E}password`, O = d(null), k = n(w, O), [A, j] = f(h), M = c ?? A, N = (e) => {
 		c === void 0 && j(e), e !== M && g?.(e);
 	}, P = d(N);
 	P.current = N, l(() => {
@@ -56,7 +56,7 @@ var h = i(c(function({ autoComplete: i, visible: c, defaultVisible: h = !1, onVi
 				id: `${D}-toggle`,
 				"aria-controls": D,
 				"aria-label": M ? v : _,
-				children: /* @__PURE__ */ p(n, {
+				children: /* @__PURE__ */ p(r, {
 					className: s.toggle,
 					size: "sm",
 					label: M ? v : _,

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

@@ -14,7 +14,10 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     mainId?: string;
 }
 export interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {
-    /** Stick to the top of the viewport while scrolling. Default `true`. */
+    /**
+     * Stick to the top of the viewport while scrolling. Default `true`. While it sticks, in-page
+     * links and `scrollIntoView` land below it, however tall it grows.
+     */
     sticky?: boolean;
 }
 export type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'id'>;

package/dist/components/layout/AppShell/AppShell.js

@@ -1,70 +1,84 @@
 import { cx as e } from "../../../utils/cx.js";
-import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
-import n from "./AppShell.module.js";
-import { createContext as r, forwardRef as i, useContext as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../../inputs/internal/refs.js";
+import { VisuallyHidden as n } from "../VisuallyHidden/VisuallyHidden.js";
+import r from "./AppShell.module.js";
+import { createContext as i, forwardRef as a, useContext as o, useEffect as s, useId as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/layout/AppShell/AppShell.tsx
-var l = r(null), u = i(function({ skipLinkLabel: r = "Skip to content", mainId: i, navBreakpoint: a = "lg", className: u, children: d, ...f }, p) {
-	let m = `app-main-${o().replace(/[^\w-]/g, "")}`, h = i ?? m;
-	return /* @__PURE__ */ s(l.Provider, {
+var f = i(null), p = a(function({ skipLinkLabel: t = "Skip to content", mainId: i, navBreakpoint: a = "lg", className: o, children: s, ...l }, p) {
+	let m = `app-main-${c().replace(/[^\w-]/g, "")}`, h = i ?? m;
+	return /* @__PURE__ */ u(f.Provider, {
 		value: { mainId: h },
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ d("div", {
 			ref: p,
-			className: e(n.shell, u),
+			className: e(r.shell, o),
 			"data-nav-breakpoint": a,
-			...f,
-			children: [/* @__PURE__ */ s(t, {
+			...l,
+			children: [/* @__PURE__ */ u(n, {
 				as: "a",
 				href: `#${h}`,
 				focusable: !0,
-				className: n.skip,
-				children: r
-			}), d]
+				className: r.skip,
+				children: t
+			}), s]
 		})
 	});
-}), d = i(function({ sticky: t = !0, className: r, ...i }, a) {
-	return /* @__PURE__ */ s("header", {
-		ref: a,
-		className: e(n.header, r),
-		"data-sticky": t || void 0,
-		...i
+}), m = a(function({ sticky: n = !0, className: i, ...a }, o) {
+	let c = l(null);
+	return s(() => {
+		let e = c.current, t = e?.parentElement;
+		if (!n || !e || !t) return;
+		let r = e.ownerDocument.documentElement, i = r.style.scrollPaddingBlockStart, a = () => {
+			let n = `${String(e.getBoundingClientRect().height)}px`;
+			t.style.setProperty("--app-shell-header-size", n), r.style.scrollPaddingBlockStart = n;
+		};
+		a();
+		let o = typeof ResizeObserver > "u" ? null : new ResizeObserver(a);
+		return o?.observe(e), () => {
+			o?.disconnect(), t.style.removeProperty("--app-shell-header-size"), r.style.scrollPaddingBlockStart = i;
+		};
+	}, [n]), /* @__PURE__ */ u("header", {
+		ref: t(o, c),
+		className: e(r.header, i),
+		"data-sticky": n || void 0,
+		...a
 	});
-}), f = i(function({ className: t, ...r }, i) {
-	let o = a(l);
-	return /* @__PURE__ */ s("main", {
+}), h = a(function({ className: t, ...n }, i) {
+	let a = o(f);
+	return /* @__PURE__ */ u("main", {
 		ref: i,
-		id: o?.mainId,
+		id: a?.mainId,
 		tabIndex: -1,
-		className: e(n.main, t),
-		...r
+		className: e(r.main, t),
+		...n
 	});
-}), p = i(function({ side: t = "start", className: r, ...i }, a) {
-	return /* @__PURE__ */ s("aside", {
+}), g = a(function({ side: t = "start", className: n, ...i }, a) {
+	return /* @__PURE__ */ u("aside", {
 		ref: a,
-		className: e(n.sidebar, r),
+		className: e(r.sidebar, n),
 		"data-side": t,
 		...i
 	});
-}), m = i(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ s("footer", {
+}), _ = a(function({ className: t, ...n }, i) {
+	return /* @__PURE__ */ u("footer", {
 		ref: i,
-		className: e(n.footer, t),
-		...r
+		className: e(r.footer, t),
+		...n
 	});
-}), h = i(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ s("div", {
+}), v = a(function({ className: t, ...n }, i) {
+	return /* @__PURE__ */ u("div", {
 		ref: i,
-		className: e(n.bottomBar, t),
-		...r
+		className: e(r.bottomBar, t),
+		...n
 	});
-}), g = Object.assign(u, {
-	Header: d,
-	Main: f,
-	Sidebar: p,
-	Footer: m,
-	BottomBar: h
+}), y = Object.assign(p, {
+	Header: m,
+	Main: h,
+	Sidebar: g,
+	Footer: _,
+	BottomBar: v
 });
 //#endregion
-export { g as AppShell };
+export { y as AppShell };
 
 //# sourceMappingURL=AppShell.js.map

package/dist/components/layout/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","names":["styles","AppShell_module_default","ShellContext","createContext","AppShellRoot","forwardRef","rest","generated","useId","id","mainId","cx","className","navBreakpoint","VisuallyHidden","skipLinkLabel","children","Header","sticky","Main","ctx","useContext","Sidebar","side","Footer","BottomBar","AppShell"],"sources":["../../../../src/components/layout/AppShell/AppShell.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { VisuallyHidden } from '#components/layout/VisuallyHidden'\nimport styles from './AppShell.module.css'\n\nconst ShellContext = createContext<{ mainId: string } | null>(null)\n\nexport type AppShellNavBreakpoint = 'md' | 'lg'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Text of the skip link rendered before everything else. Default \"Skip to content\". */\n  skipLinkLabel?: string\n  /**\n   * Where navigation hands over from phone to desktop: from this breakpoint up the\n   * `Sidebar` appears and the `BottomBar` is removed, so there is never a width with\n   * neither. `md` (48em) or `lg` (64em, default). Pair it with the same value on\n   * `BottomNav hideAbove` and header `NavLinks hideBelow`.\n   */\n  navBreakpoint?: AppShellNavBreakpoint\n  /** Id given to `AppShell.Main` (the skip link target). Generated when omitted. */\n  mainId?: string\n}\n\n/**\n * The frame of an app screen. A header, an optional sidebar, the main region, a footer and a\n * phone-only bottom bar.\n *\n * @remarks\n * `AppShell` is the outermost frame of an app: landmarks in the right order, a skip link, a sticky\n * header, and a hand-over between a phone's bottom bar and a desktop's sidebar or header nav.\n * These docs are an `AppShell`.\n *\n * ## Slots\n *\n * `AppShell.Header`, `AppShell.Sidebar`, `AppShell.Main`, `AppShell.Footer` and\n * `AppShell.BottomBar` place themselves, so their order in JSX doesn't affect the layout. Keep it\n * the same as the reading order anyway: header, sidebar, main, footer, bottom bar.\n *\n * - **Header** is sticky by default (`sticky={false}` to scroll it away). Put a `Container` and an\n *   `Inline` inside.\n * - **Sidebar** appears from `navBreakpoint` up. It sits at the start of the main region\n *   (`side=\"end\"` for the other side), scrolls on its own, and stays below the header.\n * - **Main** is the `<main>` landmark and the skip link's target.\n * - **BottomBar** is pinned to the bottom of the viewport below `navBreakpoint`, and pads for the\n *   phone's home indicator.\n *\n * ## Navigation hand-over\n *\n * `navBreakpoint` (`md` or `lg`, default `lg`) is the one width where phone navigation gives way\n * to desktop navigation, so there's never a width with neither. Pair it with the same value on\n * `BottomNav hideAbove` and the header's `NavLinks hideBelow`.\n *\n * @privateRemarks\n * The frame of an app screen: header, optional sidebar, main, footer, and a\n * mobile-only bottom bar. Slots place themselves; order in JSX doesn't matter,\n * but keep DOM order = reading order (Header, Sidebar, Main, Footer, BottomBar).\n * `navBreakpoint` decides where the bottom bar gives way to the sidebar / header nav.\n *\n * <AppShell navBreakpoint=\"md\">\n *   <AppShell.Header>… <NavLinks hideBelow=\"md\">…</NavLinks></AppShell.Header>\n *   <AppShell.Main>…</AppShell.Main>\n *   <AppShell.BottomBar><BottomNav position=\"static\" hideAbove=\"md\">…</BottomNav></AppShell.BottomBar>\n * </AppShell>\n */\nconst AppShellRoot = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  { skipLinkLabel = 'Skip to content', mainId, navBreakpoint = 'lg', className, children, ...rest },\n  ref,\n) {\n  const generated = `app-main-${useId().replace(/[^\\w-]/g, '')}`\n  const id = mainId ?? generated\n  return (\n    <ShellContext.Provider value={{ mainId: id }}>\n      <div\n        ref={ref}\n        className={cx(styles.shell, className)}\n        data-nav-breakpoint={navBreakpoint}\n        {...rest}\n      >\n        <VisuallyHidden as=\"a\" href={`#${id}`} focusable className={styles.skip}>\n          {skipLinkLabel}\n        </VisuallyHidden>\n        {children}\n      </div>\n    </ShellContext.Provider>\n  )\n})\n\nexport interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {\n  /** Stick to the top of the viewport while scrolling. Default `true`. */\n  sticky?: boolean\n}\n\n/** The top bar: canvas-coloured, hairline below. Put a `Container` + `Inline` inside. */\nconst Header = forwardRef<HTMLElement, AppShellHeaderProps>(function AppShellHeader(\n  { sticky = true, className, ...rest },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-sticky={sticky || undefined}\n      {...rest}\n    />\n  )\n})\n\nexport type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'id'>\n\n/** The page's `<main>` landmark and the skip link's target. Its id comes from `AppShell`. */\nconst Main = forwardRef<HTMLElement, AppShellMainProps>(function AppShellMain(\n  { className, ...rest },\n  ref,\n) {\n  const ctx = useContext(ShellContext)\n  return (\n    <main\n      ref={ref}\n      id={ctx?.mainId}\n      tabIndex={-1}\n      className={cx(styles.main, className)}\n      {...rest}\n    />\n  )\n})\n\nexport interface AppShellSidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Which side of Main it sits on. Logical, so it follows writing direction. Default `start`. */\n  side?: 'start' | 'end'\n}\n\n/** Navigation or context beside Main. Shown from the shell's `navBreakpoint` up only (default `lg`, 64em). */\nconst Sidebar = forwardRef<HTMLElement, AppShellSidebarProps>(function AppShellSidebar(\n  { side = 'start', className, ...rest },\n  ref,\n) {\n  return <aside ref={ref} className={cx(styles.sidebar, className)} data-side={side} {...rest} />\n})\n\nexport type AppShellFooterProps = HTMLAttributes<HTMLElement>\n\n/** The page footer: a hairline above, quieter ink. */\nconst Footer = forwardRef<HTMLElement, AppShellFooterProps>(function AppShellFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <footer ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type AppShellBottomBarProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * A region pinned to the bottom of the viewport on small screens and removed from the\n * shell's `navBreakpoint` up (default `lg`, 64em). Pads for the home indicator (`safe-area-inset-bottom`). Holds a\n * `BottomNav` or a single primary action.\n */\nconst BottomBar = forwardRef<HTMLDivElement, AppShellBottomBarProps>(function AppShellBottomBar(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.bottomBar, className)} {...rest} />\n})\n\nexport const AppShell = Object.assign(AppShellRoot, { Header, Main, Sidebar, Footer, BottomBar })\n"],"mappings":";;;;;;AAKA,IAAME,IAAeC,EAAyC,IAAI,GA2D5DC,IAAeC,EAA0C,SAC7D,EAAE,mBAAgB,mBAAmB,WAAQ,mBAAgB,MAAM,cAAW,aAAU,GAAGC,KAC3F,GACA;CACA,IAAMC,IAAY,YAAYC,EAAM,CAAC,CAAC,QAAQ,WAAW,EAAE,KACrDC,IAAKC,KAAUH;CACrB,OACE,kBAACL,EAAa,UAAd;EAAuB,OAAO,EAAE,QAAQO,EAAG;EACzC,UAAA,kBAAC,OAAD;GACO;GACL,WAAWE,EAAGX,EAAO,OAAOY,CAAS;GACrC,uBAAqBC;GACrB,GAAIP;GAJN,UAAA,CAME,kBAACQ,GAAD;IAAgB,IAAG;IAAI,MAAM,IAAIL;IAAM,WAAA;IAAU,WAAWT,EAAO;IAChE,UAAAe;GACa,CAAA,GACfC,CACE;;CACgB,CAAA;AAE3B,CAAC,GAQKC,IAASZ,EAA6C,SAC1D,EAAE,YAAS,IAAM,cAAW,GAAGC,KAC/B,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAWK,EAAGX,EAAO,QAAQY,CAAS;EACtC,eAAaM,KAAU,KAAA;EACvB,GAAIZ;CACL,CAAA;AAEL,CAAC,GAKKa,IAAOd,EAA2C,SACtD,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,IAAMc,IAAMC,EAAWnB,CAAY;CACnC,OACE,kBAAC,QAAD;EACO;EACL,IAAIkB,GAAK;EACT,UAAU;EACV,WAAWT,EAAGX,EAAO,MAAMY,CAAS;EACpC,GAAIN;CACL,CAAA;AAEL,CAAC,GAQKgB,IAAUjB,EAA8C,SAC5D,EAAE,UAAO,SAAS,cAAW,GAAGC,KAChC,GACA;CACA,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWK,EAAGX,EAAO,SAASY,CAAS;EAAG,aAAWW;EAAM,GAAIjB;CAAO,CAAA;AAChG,CAAC,GAKKkB,IAASnB,EAA6C,SAC1D,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,UAAD;EAAa;EAAK,WAAWK,EAAGX,EAAO,QAAQY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GASKmB,IAAYpB,EAAmD,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWK,EAAGX,EAAO,WAAWY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GAEYoB,IAAW,OAAO,OAAOtB,GAAc;CAAE;CAAQ;CAAM;CAAS;CAAQ;AAAU,CAAC"}
+{"version":3,"file":"AppShell.js","names":["styles","AppShell_module_default","ShellContext","createContext","AppShellRoot","forwardRef","rest","generated","useId","id","mainId","cx","className","navBreakpoint","VisuallyHidden","skipLinkLabel","children","Header","header","useRef","useEffect","el","shell","sticky","root","previous","measure","size","observer","useMergedRefs","ref","Main","ctx","useContext","Sidebar","side","Footer","BottomBar","AppShell"],"sources":["../../../../src/components/layout/AppShell/AppShell.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport { VisuallyHidden } from '#components/layout/VisuallyHidden'\nimport styles from './AppShell.module.css'\n\nconst ShellContext = createContext<{ mainId: string } | null>(null)\n\nexport type AppShellNavBreakpoint = 'md' | 'lg'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Text of the skip link rendered before everything else. Default \"Skip to content\". */\n  skipLinkLabel?: string\n  /**\n   * Where navigation hands over from phone to desktop: from this breakpoint up the\n   * `Sidebar` appears and the `BottomBar` is removed, so there is never a width with\n   * neither. `md` (48em) or `lg` (64em, default). Pair it with the same value on\n   * `BottomNav hideAbove` and header `NavLinks hideBelow`.\n   */\n  navBreakpoint?: AppShellNavBreakpoint\n  /** Id given to `AppShell.Main` (the skip link target). Generated when omitted. */\n  mainId?: string\n}\n\n/**\n * The frame of an app screen. A header, an optional sidebar, the main region, a footer and a\n * phone-only bottom bar.\n *\n * @remarks\n * `AppShell` is the outermost frame of an app: landmarks in the right order, a skip link, a sticky\n * header, and a hand-over between a phone's bottom bar and a desktop's sidebar or header nav.\n * These docs are an `AppShell`.\n *\n * ## Slots\n *\n * `AppShell.Header`, `AppShell.Sidebar`, `AppShell.Main`, `AppShell.Footer` and\n * `AppShell.BottomBar` place themselves, so their order in JSX doesn't affect the layout. Keep it\n * the same as the reading order anyway: header, sidebar, main, footer, bottom bar.\n *\n * - **Header** is sticky by default (`sticky={false}` to scroll it away). While it sticks, in-page\n *   links and `scrollIntoView` land just below it, whatever its height. Put a `Container` and an\n *   `Inline` inside.\n * - **Sidebar** appears from `navBreakpoint` up. It sits at the start of the main region\n *   (`side=\"end\"` for the other side), scrolls on its own, and stays below the header.\n * - **Main** is the `<main>` landmark and the skip link's target.\n * - **BottomBar** is pinned to the bottom of the viewport below `navBreakpoint`, and pads for the\n *   phone's home indicator.\n *\n * ## Navigation hand-over\n *\n * `navBreakpoint` (`md` or `lg`, default `lg`) is the one width where phone navigation gives way\n * to desktop navigation, so there's never a width with neither. Pair it with the same value on\n * `BottomNav hideAbove` and the header's `NavLinks hideBelow`.\n *\n * @privateRemarks\n * The frame of an app screen: header, optional sidebar, main, footer, and a\n * mobile-only bottom bar. Slots place themselves; order in JSX doesn't matter,\n * but keep DOM order = reading order (Header, Sidebar, Main, Footer, BottomBar).\n * `navBreakpoint` decides where the bottom bar gives way to the sidebar / header nav.\n *\n * <AppShell navBreakpoint=\"md\">\n *   <AppShell.Header>… <NavLinks hideBelow=\"md\">…</NavLinks></AppShell.Header>\n *   <AppShell.Main>…</AppShell.Main>\n *   <AppShell.BottomBar><BottomNav position=\"static\" hideAbove=\"md\">…</BottomNav></AppShell.BottomBar>\n * </AppShell>\n */\nconst AppShellRoot = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  { skipLinkLabel = 'Skip to content', mainId, navBreakpoint = 'lg', className, children, ...rest },\n  ref,\n) {\n  const generated = `app-main-${useId().replace(/[^\\w-]/g, '')}`\n  const id = mainId ?? generated\n  return (\n    <ShellContext.Provider value={{ mainId: id }}>\n      <div\n        ref={ref}\n        className={cx(styles.shell, className)}\n        data-nav-breakpoint={navBreakpoint}\n        {...rest}\n      >\n        <VisuallyHidden as=\"a\" href={`#${id}`} focusable className={styles.skip}>\n          {skipLinkLabel}\n        </VisuallyHidden>\n        {children}\n      </div>\n    </ShellContext.Provider>\n  )\n})\n\nexport interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Stick to the top of the viewport while scrolling. Default `true`. While it sticks, in-page\n   * links and `scrollIntoView` land below it, however tall it grows.\n   */\n  sticky?: boolean\n}\n\n/** The top bar: canvas-coloured, hairline below. Put a `Container` + `Inline` inside. */\nconst Header = forwardRef<HTMLElement, AppShellHeaderProps>(function AppShellHeader(\n  { sticky = true, className, ...rest },\n  ref,\n) {\n  const header = useRef<HTMLElement>(null)\n  // While it sticks, keep two things in step with its height: the document's\n  // scroll-padding-block-start, so anchor jumps land below it, and the shell's\n  // --app-shell-header-size, which the sticky offset reads. Both are undone when it stops.\n  useEffect(() => {\n    const el = header.current\n    const shell = el?.parentElement\n    if (!sticky || !el || !shell) return\n    const root = el.ownerDocument.documentElement\n    const previous = root.style.scrollPaddingBlockStart\n    const measure = () => {\n      const size = `${String(el.getBoundingClientRect().height)}px`\n      shell.style.setProperty('--app-shell-header-size', size)\n      root.style.scrollPaddingBlockStart = size\n    }\n    measure()\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure)\n    observer?.observe(el)\n    return () => {\n      observer?.disconnect()\n      shell.style.removeProperty('--app-shell-header-size')\n      root.style.scrollPaddingBlockStart = previous\n    }\n  }, [sticky])\n  return (\n    <header\n      ref={useMergedRefs(ref, header)}\n      className={cx(styles.header, className)}\n      data-sticky={sticky || undefined}\n      {...rest}\n    />\n  )\n})\n\nexport type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'id'>\n\n/** The page's `<main>` landmark and the skip link's target. Its id comes from `AppShell`. */\nconst Main = forwardRef<HTMLElement, AppShellMainProps>(function AppShellMain(\n  { className, ...rest },\n  ref,\n) {\n  const ctx = useContext(ShellContext)\n  return (\n    <main\n      ref={ref}\n      id={ctx?.mainId}\n      tabIndex={-1}\n      className={cx(styles.main, className)}\n      {...rest}\n    />\n  )\n})\n\nexport interface AppShellSidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Which side of Main it sits on. Logical, so it follows writing direction. Default `start`. */\n  side?: 'start' | 'end'\n}\n\n/** Navigation or context beside Main. Shown from the shell's `navBreakpoint` up only (default `lg`, 64em). */\nconst Sidebar = forwardRef<HTMLElement, AppShellSidebarProps>(function AppShellSidebar(\n  { side = 'start', className, ...rest },\n  ref,\n) {\n  return <aside ref={ref} className={cx(styles.sidebar, className)} data-side={side} {...rest} />\n})\n\nexport type AppShellFooterProps = HTMLAttributes<HTMLElement>\n\n/** The page footer: a hairline above, quieter ink. */\nconst Footer = forwardRef<HTMLElement, AppShellFooterProps>(function AppShellFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <footer ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type AppShellBottomBarProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * A region pinned to the bottom of the viewport on small screens and removed from the\n * shell's `navBreakpoint` up (default `lg`, 64em). Pads for the home indicator (`safe-area-inset-bottom`). Holds a\n * `BottomNav` or a single primary action.\n */\nconst BottomBar = forwardRef<HTMLDivElement, AppShellBottomBarProps>(function AppShellBottomBar(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.bottomBar, className)} {...rest} />\n})\n\nexport const AppShell = Object.assign(AppShellRoot, { Header, Main, Sidebar, Footer, BottomBar })\n"],"mappings":";;;;;;;AAcA,IAAME,IAAeC,EAAyC,IAAI,GA4D5DC,IAAeC,EAA0C,SAC7D,EAAE,mBAAgB,mBAAmB,WAAQ,mBAAgB,MAAM,cAAW,aAAU,GAAGC,KAC3F,GACA;CACA,IAAMC,IAAY,YAAYC,EAAM,CAAC,CAAC,QAAQ,WAAW,EAAE,KACrDC,IAAKC,KAAUH;CACrB,OACE,kBAACL,EAAa,UAAd;EAAuB,OAAO,EAAE,QAAQO,EAAG;EACzC,UAAA,kBAAC,OAAD;GACO;GACL,WAAWE,EAAGX,EAAO,OAAOY,CAAS;GACrC,uBAAqBC;GACrB,GAAIP;GAJN,UAAA,CAME,kBAACQ,GAAD;IAAgB,IAAG;IAAI,MAAM,IAAIL;IAAM,WAAA;IAAU,WAAWT,EAAO;IAChE,UAAAe;GACa,CAAA,GACfC,CACE;;CACgB,CAAA;AAE3B,CAAC,GAWKC,IAASZ,EAA6C,SAC1D,EAAE,YAAS,IAAM,cAAW,GAAGC,KAC/B,GACA;CACA,IAAMY,IAASC,EAAoB,IAAI;CAwBvC,OApBAC,QAAgB;EACd,IAAMC,IAAKH,EAAO,SACZI,IAAQD,GAAI;EAClB,IAAI,CAACE,KAAU,CAACF,KAAM,CAACC,GAAO;EAC9B,IAAME,IAAOH,EAAG,cAAc,iBACxBI,IAAWD,EAAK,MAAM,yBACtBE,UAAgB;GACpB,IAAMC,IAAO,GAAG,OAAON,EAAG,sBAAsB,CAAC,CAAC,MAAM,EAAE;GAE1D,AADAC,EAAM,MAAM,YAAY,2BAA2BK,CAAI,GACvD,EAAK,MAAM,0BAA0BA;EACvC;EACA,EAAQ;EACR,IAAMC,IAAW,OAAO,iBAAmB,MAAc,OAAO,IAAI,eAAeF,CAAO;EAE1F,OADAE,GAAU,QAAQP,CAAE,SACP;GAGX,AAFAO,GAAU,WAAW,GACrBN,EAAM,MAAM,eAAe,yBAAyB,GACpD,EAAK,MAAM,0BAA0BG;EACvC;CACF,GAAG,CAACF,CAAM,CAAC,GAET,kBAAC,UAAD;EACE,KAAKM,EAAcC,GAAKZ,CAAM;EAC9B,WAAWP,EAAGX,EAAO,QAAQY,CAAS;EACtC,eAAaW,KAAU,KAAA;EACvB,GAAIjB;CACL,CAAA;AAEL,CAAC,GAKKyB,IAAO1B,EAA2C,SACtD,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,IAAM0B,IAAMC,EAAW/B,CAAY;CACnC,OACE,kBAAC,QAAD;EACO;EACL,IAAI8B,GAAK;EACT,UAAU;EACV,WAAWrB,EAAGX,EAAO,MAAMY,CAAS;EACpC,GAAIN;CACL,CAAA;AAEL,CAAC,GAQK4B,IAAU7B,EAA8C,SAC5D,EAAE,UAAO,SAAS,cAAW,GAAGC,KAChC,GACA;CACA,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWK,EAAGX,EAAO,SAASY,CAAS;EAAG,aAAWuB;EAAM,GAAI7B;CAAO,CAAA;AAChG,CAAC,GAKK8B,IAAS/B,EAA6C,SAC1D,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,UAAD;EAAa;EAAK,WAAWK,EAAGX,EAAO,QAAQY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GASK+B,IAAYhC,EAAmD,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWK,EAAGX,EAAO,WAAWY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GAEYgC,IAAW,OAAO,OAAOlC,GAAc;CAAE;CAAQ;CAAM;CAAS;CAAQ;AAAU,CAAC"}

package/dist/components/layout/AppShell/AppShell.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.js","names":["shell","header","skip","main","sidebar","footer","bottomBar","AppShell_module_default"],"sources":["../../../../src/components/layout/AppShell/AppShell.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --app-shell-header-height   minimum header height, also the sidebar's sticky offset\n *                               (default: control-lg + space-4)\n *   --app-shell-sidebar-width   default 16rem\n *   --app-shell-header-bg       default var(--color-canvas) — opaque, never glass\n *   --app-shell-bar-rule        rule under the header / above the bottom bar\n *                               (default var(--color-line-strong): these are the frame's edges)\n *\n * The bottom bar is `position: sticky` as the grid's last row rather than `fixed`, so\n * nothing needs a magic padding to stop it covering the end of Main.\n */\n.shell {\n  --app-shell-sticky-offset: 0px;\n\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: auto 1fr auto auto;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer'\n    'bottombar';\n  min-block-size: 100dvh;\n}\n\n.shell:has(> .header[data-sticky]) {\n  --app-shell-sticky-offset: var(\n    --app-shell-header-height,\n    calc(var(--control-lg) + var(--space-4))\n  );\n}\n\n/* Skip link: clipped until focused, then a pill in the top corner above everything. */\n.skip {\n  position: absolute;\n  inset-block-start: var(--space-3);\n  inset-inline-start: var(--space-3);\n  z-index: var(--z-toast);\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--radius-action);\n  background: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  text-decoration: none;\n}\n\n.header {\n  grid-area: header;\n  display: flex;\n  align-items: center;\n  min-block-size: var(--app-shell-header-height, calc(var(--control-lg) + var(--space-4)));\n  min-inline-size: 0;\n  padding-block: var(--space-2);\n  border-block-end: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.header > * {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n.header[data-sticky] {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--z-sticky);\n}\n\n.main {\n  grid-area: main;\n  min-inline-size: 0;\n}\n.main:focus {\n  outline: none;\n}\n\n.sidebar {\n  grid-area: sidebar;\n  display: none;\n  min-inline-size: 0;\n}\n\n.footer {\n  grid-area: footer;\n  min-inline-size: 0;\n  padding-block: var(--space-6);\n  border-block-start: var(--border-width) solid var(--color-line);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n.bottomBar {\n  grid-area: bottombar;\n  position: sticky;\n  inset-block-end: 0;\n  z-index: var(--z-sticky);\n  min-inline-size: 0;\n  padding-block-end: env(safe-area-inset-bottom, 0px);\n  border-block-start: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n}\n\n/*\n * Nav hand-over. `data-nav-breakpoint` (md | lg) on the shell decides where the bottom\n * bar goes and the sidebar arrives — one breakpoint for both, so no width has neither.\n */\n.sidebar {\n  position: sticky;\n  inset-block-start: var(--app-shell-sticky-offset);\n  align-self: start;\n  block-size: calc(100dvh - var(--app-shell-sticky-offset));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--space-5) var(--space-4);\n}\n.sidebar[data-side='start'] {\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n.sidebar[data-side='end'] {\n  border-inline-start: var(--border-width) solid var(--color-line);\n}\n\n@media (min-width: 48em) {\n  .shell[data-nav-breakpoint='md'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='md'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n@media (min-width: 64em) {\n  .shell[data-nav-breakpoint='lg'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='lg'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.shell[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"AppShell.module.js","names":["shell","header","skip","main","sidebar","footer","bottomBar","AppShell_module_default"],"sources":["../../../../src/components/layout/AppShell/AppShell.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --app-shell-header-height   minimum header height, also the sidebar's sticky offset\n *                               (default: control-lg + space-4)\n *   --app-shell-sidebar-width   default 16rem\n *   --app-shell-header-bg       default var(--color-canvas) — opaque, never glass\n *   --app-shell-bar-rule        rule under the header / above the bottom bar\n *                               (default var(--color-line-strong): these are the frame's edges)\n *\n * Set by the component, not a theme:\n *   --app-shell-header-size     the sticky header's measured height, on the shell; the sticky\n *                               offset reads it before --app-shell-header-height\n *\n * The bottom bar is `position: sticky` as the grid's last row rather than `fixed`, so\n * nothing needs a magic padding to stop it covering the end of Main.\n */\n.shell {\n  --app-shell-sticky-offset: 0px;\n\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: auto 1fr auto auto;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer'\n    'bottombar';\n  min-block-size: 100dvh;\n}\n\n.shell:has(> .header[data-sticky]) {\n  --app-shell-sticky-offset: var(\n    --app-shell-header-size,\n    var(--app-shell-header-height, calc(var(--control-lg) + var(--space-4)))\n  );\n}\n\n/* Skip link: clipped until focused, then a pill in the top corner above everything. */\n.skip {\n  position: absolute;\n  inset-block-start: var(--space-3);\n  inset-inline-start: var(--space-3);\n  z-index: var(--z-toast);\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--radius-action);\n  background: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  text-decoration: none;\n}\n\n.header {\n  grid-area: header;\n  display: flex;\n  align-items: center;\n  min-block-size: var(--app-shell-header-height, calc(var(--control-lg) + var(--space-4)));\n  min-inline-size: 0;\n  padding-block: var(--space-2);\n  border-block-end: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.header > * {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n.header[data-sticky] {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--z-sticky);\n}\n\n.main {\n  grid-area: main;\n  min-inline-size: 0;\n}\n.main:focus {\n  outline: none;\n}\n\n.sidebar {\n  grid-area: sidebar;\n  display: none;\n  min-inline-size: 0;\n}\n\n.footer {\n  grid-area: footer;\n  min-inline-size: 0;\n  padding-block: var(--space-6);\n  border-block-start: var(--border-width) solid var(--color-line);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n.bottomBar {\n  grid-area: bottombar;\n  position: sticky;\n  inset-block-end: 0;\n  z-index: var(--z-sticky);\n  min-inline-size: 0;\n  padding-block-end: env(safe-area-inset-bottom, 0px);\n  border-block-start: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n}\n\n/*\n * Nav hand-over. `data-nav-breakpoint` (md | lg) on the shell decides where the bottom\n * bar goes and the sidebar arrives — one breakpoint for both, so no width has neither.\n */\n.sidebar {\n  position: sticky;\n  inset-block-start: var(--app-shell-sticky-offset);\n  align-self: start;\n  block-size: calc(100dvh - var(--app-shell-sticky-offset));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--space-5) var(--space-4);\n}\n.sidebar[data-side='start'] {\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n.sidebar[data-side='end'] {\n  border-inline-start: var(--border-width) solid var(--color-line);\n}\n\n@media (min-width: 48em) {\n  .shell[data-nav-breakpoint='md'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='md'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n@media (min-width: 64em) {\n  .shell[data-nav-breakpoint='lg'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='lg'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.shell[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/Box/Box.d.ts

@@ -1,9 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type Responsive } from '../../../utils/responsive.js';
-import { type Space } from '../../../utils/tokens.js';
+import { type Space, type CategoryColor } from '../../../utils/tokens.js';
 import { type VisibilityProps } from '../../../utils/visibility.js';
 export type BoxElement = 'div' | 'span' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'li';
-export type BoxSurface = 'none' | 'canvas' | 'surface' | 'sunken' | 'raised' | 'inverse';
+export type BoxSurface = 'none' | 'canvas' | 'surface' | 'sunken' | 'raised' | 'inverse' | 'accent' | `cat-${CategoryColor}`;
 export type BoxRadius = 'none' | 'field' | 'surface' | 'media';
 export interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
     /** Padding on every side. Responsive. */
@@ -12,8 +12,20 @@ export interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
     paddingX?: Responsive<Space>;
     /** Block (top/bottom) padding; overrides `padding` on that axis. Responsive. */
     paddingY?: Responsive<Space>;
-    /** Background fill. `inverse` also re-points ink and line colours for its children. */
+    /**
+     * Background fill. `inverse`, `accent` and the categorical `cat-1` to `cat-8` (one person's or
+     * team's colour, matching their `Tag`) also re-point ink, line and accent colours for its
+     * children, so they stay legible on the fill.
+     */
     surface?: BoxSurface;
+    /**
+     * On an `inverse`, `accent` or categorical fill, re-point the status tones too, so tone text
+     * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on
+     * the fill. On `accent` and categorical fills tone text becomes the fill's ink, so the sign,
+     * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so
+     * tones keep the page's colours. No effect on other surfaces.
+     */
+    adaptTones?: boolean;
     /** Hairline border in `--color-line`. One edge treatment per element — a border *or* a fill. */
     border?: boolean;
     /** Corner radius, by role. */