@nanisoft/prism-ui 0.16.0 → 0.16.1

package/dist/pages/docs-shell/docs-shell.d.ts

@@ -188,17 +188,11 @@ export type DocsShellProps = {
      * The accessible name of the rail. Required whenever `nav` is passed, because
      * it is a word a reader hears and a Page that ships no copy ships no
      * reader-facing copy either.
-     *
-     * It is also the visible word on the disclosure that stands in for the rail
-     * below `lg`, because it is already this navigation's name and a Page cannot
-     * invent a second one. A consumer that files its navigation in another language
-     * gets the control in that language by having done this once.
      */
     navLabel: string;
     /**
      * The accessible name of the contents rail. Required whenever `toc` is passed,
-     * for the same reason `navLabel` is, and the contents disclosure below `lg`
-     * carries it for the same reason too.
+     * for the same reason `navLabel` is.
      */
     tocLabel: string;
     /**
@@ -347,32 +341,51 @@ export type DocsShellProps = {
  * a fact about ink, and announcing it would put a sentence in the middle of a
  * list of a consumer's own pages.
  *
- * **Below `lg` there was no navigation at all, and the fix is a native
- * disclosure.** At 768 and at 1024 both rails were `hidden` and the only
- * navigation left inside `<main>` was the two-item pager at the foot of the
- * article, so a reader on a thirty-one document reference at tablet width had no
- * contents, no on-this-page and no way to a sibling page except Previous and
- * Next. The disclosure is `<details>` and `<summary>`, which is the one
- * disclosure widget that needs no runtime at all: it is expanded and collapsed by
- * the platform, it is a real control in the Tab order with a real expanded state,
- * and adding a client boundary to a server Component to reinvent it would put
- * bytes on every documentation page in the family to save a reader one click.
+ * **The tree is in the document once, at every width, and the price of that is a
+ * phone reader crossing the whole navigation to reach the article.** At 768 and
+ * at 1024 both rails used to be `hidden`, so the only navigation left inside
+ * `<main>` was the two-item pager at the foot of the article, and a reader on a
+ * twenty-seven document reference at tablet width had no contents, no
+ * on-this-page and no way to a sibling page except Previous and Next. 0.16.0
+ * closed that gap by drawing the tree a second time behind a `<details>`, one
+ * copy for the rail and one for the narrow frame, and it shipped a doubled
+ * document to every documentation page in the family with it: two
+ * `aria-current` markers for one page, two lists of a consumer's own pages, two
+ * `docs-nav-page` rows for every document, and a second `<nav>` carrying the
+ * rail's own accessible name, which is the thing a consumer's suite reaches the
+ * rail by. Three consumer test files failed against the published package: two on
+ * a count that came back doubled, and two on a `getByRole('navigation', { name })`
+ * that had two answers where it expects one. So there is one copy now, and it
+ * shows at every width.
+ *
+ * **What that costs, with the number.** A consumer's rail measured 1,318 pixels
+ * of content in a built export at 1280 by 680, and those rows wrap on a phone, so
+ * a reader arriving at the top of a documentation page scrolls past a thousand
+ * pixels of navigation before the article begins. That is a real regression for
+ * that reader and it is the reason a disclosure was reached for in the first
+ * place. It is paid rather than hidden, because every arrangement that avoids it
+ * is worse: a rail at `lg` and nothing below it reopens the gap this change
+ * closes, and drawing the tree twice to keep the scroll short is what broke three
+ * consumer test files in the first place.
  *
- * The tree is rendered twice, once in each arrangement, and only one of them is
- * in the document at any width: the rail is `hidden lg:block` and the disclosure
- * is `lg:hidden`, so the other one is `display: none` and is out of the
- * accessibility tree and out of the tab order rather than a second copy a reader
- * meets. The summary carries `navLabel` or `tocLabel`, which is the caller's own
- * word for that navigation and therefore the one word on the control that cannot
- * be wrong in a language the consumer did not write in.
+ * **What would actually remove the scroll.** A collapsed rail below `lg` needs an
+ * open state. A server Component cannot hold one, and `<details>` is the only
+ * disclosure the platform holds on the Page's behalf, so the control that opens
+ * it has to be a client island inside the Page. That is a separate piece of work
+ * with its own budget, and it is not built here: a Page that ships a client
+ * boundary to save one scroll is making a different trade than the one stated
+ * above, and it should be made deliberately rather than smuggled in as the side
+ * effect of fixing a duplicate.
  *
  * **The frame is three columns from `lg`, and the third is the consumer's to
  * fill.** The rail is 15rem, the document takes the rest, and the contents rail
  * is 13rem. The third track exists only when `toc` is passed, because the
  * document takes the second track by auto-placement and a template that named a
  * track no child occupies would leave the document in the 15rem one. Below `lg`
- * the frame is a single column: the document fills it and the two navigations sit
- * above it behind their disclosures.
+ * the frame is a single column and the children flow in the order they are
+ * written: the rail, then the document, then the contents rail. The rail is the
+ * first child for that reason, so a reader below `lg` meets the navigation before
+ * the text rather than after it, and one arrangement serves both widths.
  *
  * It is a Page rather than a Block because it is a whole screen and it is the
  * screen a content pipeline targets: a route that reads one document and hands
@@ -383,10 +396,9 @@ export type DocsShellProps = {
  *
  * It is a server Component. It fetches nothing, it holds no state and it imports
  * no router, so a consumer renders it from whichever route their framework names
- * and hands it the document their pipeline produced. The sub-`lg` disclosure is
- * the reason that stays true under pressure: it is the one feature on this Page
- * that a hand would be tempted to write as a client Component, and it is written
- * as markup instead.
+ * and hands it the document their pipeline produced. Nothing here needs a client
+ * boundary, and the one feature that would want one is named above as work not
+ * done rather than quietly added.
  */
 export declare function DocsShell({ title, description, nav, toc, currentHref, navLabel, tocLabel, pagerLabel, pagerLabels, header, footer, className, children, }: DocsShellProps): import("react").JSX.Element;
 export default DocsShell;

package/dist/pages/docs-shell/docs-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../src/pages/docs-shell/docs-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;AAEtE;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;OASG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,EAAE,eAAe,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsJG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,+BA6GhB;AAsgBD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../src/pages/docs-shell/docs-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;AAEtE;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,EAAE,eAAe,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,+BAiFhB;AA+fD,eAAe,SAAS,CAAA"}

package/dist/pages/docs-shell/docs-shell.js

@@ -113,32 +113,51 @@ import { cn } from '../../lib/utils.js';
  * a fact about ink, and announcing it would put a sentence in the middle of a
  * list of a consumer's own pages.
  *
- * **Below `lg` there was no navigation at all, and the fix is a native
- * disclosure.** At 768 and at 1024 both rails were `hidden` and the only
- * navigation left inside `<main>` was the two-item pager at the foot of the
- * article, so a reader on a thirty-one document reference at tablet width had no
- * contents, no on-this-page and no way to a sibling page except Previous and
- * Next. The disclosure is `<details>` and `<summary>`, which is the one
- * disclosure widget that needs no runtime at all: it is expanded and collapsed by
- * the platform, it is a real control in the Tab order with a real expanded state,
- * and adding a client boundary to a server Component to reinvent it would put
- * bytes on every documentation page in the family to save a reader one click.
- *
- * The tree is rendered twice, once in each arrangement, and only one of them is
- * in the document at any width: the rail is `hidden lg:block` and the disclosure
- * is `lg:hidden`, so the other one is `display: none` and is out of the
- * accessibility tree and out of the tab order rather than a second copy a reader
- * meets. The summary carries `navLabel` or `tocLabel`, which is the caller's own
- * word for that navigation and therefore the one word on the control that cannot
- * be wrong in a language the consumer did not write in.
+ * **The tree is in the document once, at every width, and the price of that is a
+ * phone reader crossing the whole navigation to reach the article.** At 768 and
+ * at 1024 both rails used to be `hidden`, so the only navigation left inside
+ * `<main>` was the two-item pager at the foot of the article, and a reader on a
+ * twenty-seven document reference at tablet width had no contents, no
+ * on-this-page and no way to a sibling page except Previous and Next. 0.16.0
+ * closed that gap by drawing the tree a second time behind a `<details>`, one
+ * copy for the rail and one for the narrow frame, and it shipped a doubled
+ * document to every documentation page in the family with it: two
+ * `aria-current` markers for one page, two lists of a consumer's own pages, two
+ * `docs-nav-page` rows for every document, and a second `<nav>` carrying the
+ * rail's own accessible name, which is the thing a consumer's suite reaches the
+ * rail by. Three consumer test files failed against the published package: two on
+ * a count that came back doubled, and two on a `getByRole('navigation', { name })`
+ * that had two answers where it expects one. So there is one copy now, and it
+ * shows at every width.
+ *
+ * **What that costs, with the number.** A consumer's rail measured 1,318 pixels
+ * of content in a built export at 1280 by 680, and those rows wrap on a phone, so
+ * a reader arriving at the top of a documentation page scrolls past a thousand
+ * pixels of navigation before the article begins. That is a real regression for
+ * that reader and it is the reason a disclosure was reached for in the first
+ * place. It is paid rather than hidden, because every arrangement that avoids it
+ * is worse: a rail at `lg` and nothing below it reopens the gap this change
+ * closes, and drawing the tree twice to keep the scroll short is what broke three
+ * consumer test files in the first place.
+ *
+ * **What would actually remove the scroll.** A collapsed rail below `lg` needs an
+ * open state. A server Component cannot hold one, and `<details>` is the only
+ * disclosure the platform holds on the Page's behalf, so the control that opens
+ * it has to be a client island inside the Page. That is a separate piece of work
+ * with its own budget, and it is not built here: a Page that ships a client
+ * boundary to save one scroll is making a different trade than the one stated
+ * above, and it should be made deliberately rather than smuggled in as the side
+ * effect of fixing a duplicate.
  *
  * **The frame is three columns from `lg`, and the third is the consumer's to
  * fill.** The rail is 15rem, the document takes the rest, and the contents rail
  * is 13rem. The third track exists only when `toc` is passed, because the
  * document takes the second track by auto-placement and a template that named a
  * track no child occupies would leave the document in the 15rem one. Below `lg`
- * the frame is a single column: the document fills it and the two navigations sit
- * above it behind their disclosures.
+ * the frame is a single column and the children flow in the order they are
+ * written: the rail, then the document, then the contents rail. The rail is the
+ * first child for that reason, so a reader below `lg` meets the navigation before
+ * the text rather than after it, and one arrangement serves both widths.
  *
  * It is a Page rather than a Block because it is a whole screen and it is the
  * screen a content pipeline targets: a route that reads one document and hands
@@ -149,10 +168,9 @@ import { cn } from '../../lib/utils.js';
  *
  * It is a server Component. It fetches nothing, it holds no state and it imports
  * no router, so a consumer renders it from whichever route their framework names
- * and hands it the document their pipeline produced. The sub-`lg` disclosure is
- * the reason that stays true under pressure: it is the one feature on this Page
- * that a hand would be tempted to write as a client Component, and it is written
- * as markup instead.
+ * and hands it the document their pipeline produced. Nothing here needs a client
+ * boundary, and the one feature that would want one is named above as work not
+ * done rather than quietly added.
  */
 export function DocsShell({ title, description, nav, toc, currentHref, navLabel, tocLabel, pagerLabel, pagerLabels, header, footer, className, children, }) {
     readTree(nav, 'nav');
@@ -177,10 +195,10 @@ export function DocsShell({ title, description, nav, toc, currentHref, navLabel,
                 // contents rail landed in an implicit `auto` track rather than the
                 // 13rem one. `check-breakpoint-variants.mjs` is the gate that says so
                 // to the next class written against a screen the theme does not emit.
-                contents ? 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_13rem]' : 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]'), children: [rail || contents ? (_jsxs("div", { "data-slot": "docs-nav-compact", className: "flex flex-col gap-4 lg:hidden", children: [rail ? (_jsx(Disclosure, { label: navLabel, unnamed: unnamedNav, children: _jsx(NavList, { entries: rail, currentHref: currentHref, depth: 0 }) })) : null, contents ? (_jsx(Disclosure, { label: tocLabel, unnamed: unnamedToc, children: _jsx(NavList, { entries: contents, currentHref: currentHref, depth: 0 }) })) : null] })) : null, rail ? (_jsx("aside", { "data-slot": "docs-rail", className: "hidden lg:col-start-1 lg:row-start-1 lg:block", children: _jsx(Rail, { label: navLabel, entries: rail, currentHref: currentHref, unnamed: unnamedNav }) })) : null, _jsxs("article", { "data-slot": "docs-article", className: "flex min-w-0 flex-col gap-8", children: [title ? (_jsxs("header", { className: "flex flex-col gap-3", children: [_jsx(Heading, { as: "h1", className: headingSizeClass('h1'), children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null] })) : description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null, _jsx(Prose, { fullWidth: true, children: children }), neighbours ? (_jsx(Pager, { previous: neighbours.previous, next: neighbours.next, label: pagerLabel, labels: pagerLabels })) : null] }), contents ? (_jsx("aside", { "data-slot": "docs-contents", className: "hidden lg:col-start-3 lg:row-start-1 lg:block", children: _jsx(Rail, { label: tocLabel, entries: contents, currentHref: currentHref, unnamed: unnamedToc }) })) : null] }), footer] }));
+                contents ? 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_13rem]' : 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]'), children: [rail ? (_jsx("aside", { "data-slot": "docs-rail", className: "lg:col-start-1 lg:row-start-1", children: _jsx(Rail, { label: navLabel, entries: rail, currentHref: currentHref, unnamed: unnamedNav }) })) : null, _jsxs("article", { "data-slot": "docs-article", className: "flex min-w-0 flex-col gap-8", children: [title ? (_jsxs("header", { className: "flex flex-col gap-3", children: [_jsx(Heading, { as: "h1", className: headingSizeClass('h1'), children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null] })) : description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null, _jsx(Prose, { fullWidth: true, children: children }), neighbours ? (_jsx(Pager, { previous: neighbours.previous, next: neighbours.next, label: pagerLabel, labels: pagerLabels })) : null] }), contents ? (_jsx("aside", { "data-slot": "docs-contents", className: "lg:col-start-3 lg:row-start-1", children: _jsx(Rail, { label: tocLabel, entries: contents, currentHref: currentHref, unnamed: unnamedToc }) })) : null] }), footer] }));
 }
 /* ------------------------------------------------------------------ *
- * The two rails at lg
+ * The two rails
  * ------------------------------------------------------------------ */
 /**
  * One rail: a region that scrolls inside a bound against the viewport, with the
@@ -214,32 +232,36 @@ export function DocsShell({ title, description, nav, toc, currentHref, navLabel,
  * usual cost of a fade and the reason the padding is part of the answer rather
  * than a detail.
  *
+ * **The bound, the sticky offset, the band and the fade are all written against
+ * the same `lg:`, so below `lg` this rail is an ordinary block in the flow: no
+ * scroll region, no cut, no reservation, no fade.** That is the right shape for a
+ * rail that is the first thing in a single column, because a sticky region a full
+ * viewport tall above the article would be worse than a long one above it.
+ *
+ * **The fade and the band are bound to the cut rather than to the rail, and the
+ * reason is what a fade is for.** A fade marks a cut, so it may only exist where
+ * there is one, and the cut is the `overflow-y` at `lg`: the scroll region, the
+ * cap, the sticky offset, the reserved band and the gradient are one arrangement
+ * or none of them. The fade shipped unprefixed, which put the arrangement out of
+ * step with itself at the one width that has no cut to mark. Below `lg` the region
+ * is an ordinary block, so the `pb-8` reserving the band is inert there and the
+ * gradient fell on the last row or two of a rail that was simply running on. The
+ * band and the fade still measured equal and the reader still lost nothing
+ * legible, which is why looking did not catch it: a gradient painted over content
+ * is a defect, and it is not a legibility one.
+ *
+ * **The limit bought here is stated rather than left to be found.** Below `lg` the
+ * rail is bounded by its content rather than by the viewport, so a long tree runs
+ * past the fold of a phone screen with nothing marking where it ends: no cut to
+ * mark, no band to reserve and no scroll region to scroll inside. That is the
+ * honest price of one copy of the tree at every width, and the measurement behind
+ * it is stated once on the Page above rather than repeated here.
+ *
  * `unnamed` is carried on the `<nav>` rather than logged, for the reason
  * `unnamedIn` gives.
  */
 function Rail({ label, entries, currentHref, unnamed, }) {
-    return (_jsxs("div", { className: "relative lg:sticky lg:top-20", children: [_jsx("nav", { "aria-label": label, "data-unnamed-entries": unnamed, className: "lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto lg:pe-4 lg:pb-8", children: _jsx(NavList, { entries: entries, currentHref: currentHref, depth: 0 }) }), _jsx("div", { "aria-hidden": "true", "data-slot": "docs-rail-fade", className: "from-background pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t to-transparent" })] }));
-}
-/**
- * One tree behind a native disclosure, for the widths where there is no rail.
- *
- * `<details>` rather than a Component, and the whole argument is that it needs no
- * runtime: the platform holds the expanded state, the control is in the Tab order
- * with a real expanded state, and the Page stays a server Component. A Page that
- * shipped a client disclosure for this would put JavaScript on every documentation
- * page in the family to replace a browser feature that has been in the platform
- * since 2018.
- *
- * **The summary's word is the caller's.** `navLabel` and `tocLabel` are already
- * required props and already name these two navigations for a screen reader, so
- * the control that opens one says the same thing the region inside it is called
- * and the Page ships no word of its own. Nothing suppresses the browser's own
- * disclosure marker or its own focus ring: the marker is the cheapest honest
- * signal that the row is a disclosure, and `py-3` puts the target at 44 pixels for
- * a coarse pointer without a variant.
- */
-function Disclosure({ label, unnamed, children, }) {
-    return (_jsxs("details", { "data-slot": "docs-nav-disclosure", children: [_jsx("summary", { className: "text-foreground cursor-pointer py-3 text-sm font-medium", children: label }), _jsx("nav", { "aria-label": label, "data-unnamed-entries": unnamed, className: "pb-4", children: children })] }));
+    return (_jsxs("div", { className: "relative lg:sticky lg:top-20", children: [_jsx("nav", { "aria-label": label, "data-unnamed-entries": unnamed, className: "lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto lg:pe-4 lg:pb-8", children: _jsx(NavList, { entries: entries, currentHref: currentHref, depth: 0 }) }), _jsx("div", { "aria-hidden": "true", "data-slot": "docs-rail-fade", className: "pointer-events-none lg:absolute lg:inset-x-0 lg:bottom-0 lg:h-8 lg:bg-gradient-to-t lg:from-background lg:to-transparent" })] }));
 }
 /* ------------------------------------------------------------------ *
  * The tree

package/dist/styles.css

@@ -3324,12 +3324,21 @@
     }
   }
   @media (width >= 64rem) {
+    .lg\:absolute {
+      position: absolute;
+    }
     .lg\:sticky {
       position: sticky;
     }
+    .lg\:inset-x-0 {
+      inset-inline: var(--spacing-0);
+    }
     .lg\:top-20 {
       top: var(--spacing-20);
     }
+    .lg\:bottom-0 {
+      bottom: var(--spacing-0);
+    }
     .lg\:order-1 {
       order: 1;
     }
@@ -3372,6 +3381,9 @@
     .lg\:hidden {
       display: none;
     }
+    .lg\:h-8 {
+      height: var(--spacing-8);
+    }
     .lg\:max-h-\[calc\(100svh-7rem\)\] {
       max-height: calc(100svh - 7rem);
     }
@@ -3461,6 +3473,18 @@
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
+    .lg\:bg-gradient-to-t {
+      --tw-gradient-position: to top in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+    .lg\:from-background {
+      --tw-gradient-from: var(--background);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+    .lg\:to-transparent {
+      --tw-gradient-to: transparent;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
     .lg\:p-6 {
       padding: var(--spacing-6);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanisoft/prism-ui",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "type": "module",
   "description": "Prism's React component, block and page library.",
   "license": "MIT",