@stealthscale/component-navigation 0.3.1 → 0.3.2

package/dist/pages/pagination/pagination.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"EllipsisProps": {"conditions": 284, "foreign": 1041}, "FirstTriggerProps": {"conditions": 284, "foreign": 1051}, "ItemProps": {"conditions": 284, "foreign": 1050}, "ItemsProps": {"conditions": 0, "foreign": 0}, "LastTriggerProps": {"conditions": 284, "foreign": 1051}, "NextTriggerProps": {"conditions": 284, "foreign": 1051}, "PageTextProps": {"conditions": 284, "foreign": 1043}, "PrevTriggerProps": {"conditions": 284, "foreign": 1051}, "RootProps": {"conditions": 284, "foreign": 1037}};
+export const parts = {"EllipsisProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Index of the mark in the machine's list of pages."}], "FirstTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"First page\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ItemProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the page, \"Page N\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "number", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Number of the page, from one."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ItemsProps": [{"accepts": "((page: number) => string)", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Returns the accessible name of a page, \"Page N\" unless the caller passes another function."}, {"accepts": "PageFormat", "fallback": "", "kind": "option", "name": "summary", "refers": ["kit.PageDetails", "kit.PageFormat", "kit.PageRange"], "required": false, "says": "Format of the summary that replaces the pages while they do not fit the row, `compact` (\"Page 12 of 24\") unless the caller passes another."}], "LastTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Last page\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "NextTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Next page\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "PageTextProps": [{"accepts": "PageFormat", "fallback": "", "kind": "option", "name": "format", "refers": ["kit.PageDetails", "kit.PageFormat"], "required": false, "says": "How the text words the current page, `compact` unless the caller passes another."}], "PrevTriggerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Previous page\" unless the caller passes another."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "RootProps": [{"accepts": "number", "fallback": "1", "kind": "option", "name": "boundaryCount", "refers": [], "required": false, "says": "Number of pages to show at the beginning and end"}, {"accepts": "number", "fallback": "", "kind": "option", "name": "count", "refers": [], "required": false, "says": "Total number of data items"}, {"accepts": "number", "fallback": "1", "kind": "option", "name": "defaultPage", "refers": [], "required": false, "says": "The initial active page when rendered. Use when you don't need to control the active page of the pagination."}, {"accepts": "number", "fallback": "10", "kind": "option", "name": "defaultPageSize", "refers": [], "required": false, "says": "The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "((details: PageUrlDetails) => string)", "fallback": "", "kind": "option", "name": "getPageUrl", "refers": ["pagination.PageUrlDetails"], "required": false, "says": "Function to generate href attributes for pagination links. Only used when `type` is set to \"link\"."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["pagination.ElementIds"], "required": false, "says": "The ids of the elements in the accordion. Useful for composition."}, {"accepts": "((details: PageChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onPageChange", "refers": ["pagination.PageChangeDetails"], "required": false, "says": "Called when the page number is changed"}, {"accepts": "((details: PageSizeChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onPageSizeChange", "refers": ["pagination.PageSizeChangeDetails"], "required": false, "says": "Called when the page size is changed"}, {"accepts": "number", "fallback": "", "kind": "option", "name": "page", "refers": [], "required": false, "says": "The controlled active page"}, {"accepts": "number", "fallback": "", "kind": "option", "name": "pageSize", "refers": [], "required": false, "says": "The controlled number of data items per page"}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "option", "name": "palette", "refers": [], "required": false, "says": "Palette of the buttons, the button's own `primary` unless the caller sets another."}, {"accepts": "number", "fallback": "1", "kind": "option", "name": "siblingCount", "refers": [], "required": false, "says": "Number of pages to show beside active page"}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Size of the gaps, the ellipsis, the summary and the page text, beside the buttons' own size."}, {"accepts": "\"button\" | \"link\"", "fallback": "\"button\"", "kind": "option", "name": "type", "refers": [], "required": false, "says": "The type of the trigger element"}, {"accepts": "Look", "fallback": "", "kind": "option", "name": "variant", "refers": ["kit.Look"], "required": false, "says": "Look of the buttons, `ghost` unless the caller sets another. The current page is marked in every look."}]};
+export const shapes = {"kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "kit.PageFormat": [{"accepts": "", "name": "\"compact\"", "says": ""}, {"accepts": "", "name": "\"long\"", "says": ""}, {"accepts": "", "name": "\"short\"", "says": ""}, {"accepts": "", "name": "(details: PageDetails) => string", "says": ""}], "kit.PageDetails": [{"accepts": "number", "name": "count", "says": "Number of items across every page."}, {"accepts": "number", "name": "page", "says": "Number of the current page, from one."}, {"accepts": "PageRange", "name": "pageRange", "says": "Indexes of the current page's first item and of the item after its last, from zero."}, {"accepts": "number", "name": "totalPages", "says": "Number of pages."}], "kit.PageRange": [{"accepts": "number", "name": "end", "says": "Index of the item after the page's last."}, {"accepts": "number", "name": "start", "says": "Index of the page's first item."}], "kit.Look": [{"accepts": "", "name": "\"ghost\"", "says": ""}, {"accepts": "", "name": "\"outline\"", "says": ""}, {"accepts": "", "name": "\"plain\"", "says": ""}, {"accepts": "", "name": "\"solid\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"surface\"", "says": ""}], "pagination.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "((index: number) => string)", "name": "ellipsis", "says": ""}, {"accepts": "string", "name": "firstTrigger", "says": ""}, {"accepts": "string", "name": "prevTrigger", "says": ""}, {"accepts": "string", "name": "nextTrigger", "says": ""}, {"accepts": "string", "name": "lastTrigger", "says": ""}, {"accepts": "((page: number) => string)", "name": "item", "says": ""}], "pagination.PageChangeDetails": [{"accepts": "number", "name": "page", "says": ""}, {"accepts": "number", "name": "pageSize", "says": ""}], "pagination.PageSizeChangeDetails": [{"accepts": "number", "name": "pageSize", "says": ""}], "pagination.PageUrlDetails": [{"accepts": "number", "name": "page", "says": ""}, {"accepts": "number", "name": "pageSize", "says": ""}]};

package/dist/pages/toc/toc.js

@@ -0,0 +1,254 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "../../recipes-BN0p1O6u.js";
+import { a as Link, i as List, n as Title, o as Item, r as Root, s as Indicator } from "../../shared-Cz6A-cF-.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Heading, Text } from "@stealthscale/component-typography";
+import { Grid, Stack } from "@stealthscale/component-layout";
+//#region src/toc/examples/article.example.tsx
+var article_example_exports = /* @__PURE__ */ __exportAll({
+	Article: () => Article,
+	source: () => source$1
+});
+const SECTIONS = [
+	{
+		depth: 2,
+		value: "toc-first"
+	},
+	{
+		depth: 2,
+		value: "toc-second"
+	},
+	{
+		depth: 2,
+		value: "toc-third"
+	}
+];
+const PARAGRAPHS = [
+	"passage",
+	"second",
+	"third"
+];
+function Article(props) {
+	const $ = c(20);
+	const { t } = useWords("toc");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SECTIONS.map((item) => /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				as: "h3",
+				id: item.value,
+				size: "md",
+				children: t(`headings.${item.value}`)
+			}), PARAGRAPHS.map((paragraph) => /* @__PURE__ */ jsx(Text, { children: t(paragraph) }, paragraph))]
+		}, item.value));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Grid.Item, {
+			span: "2",
+			children: /* @__PURE__ */ jsx(Stack, {
+				gap: "lg",
+				children: t0
+			})
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("onThisPage");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Title, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Indicator, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = SECTIONS.map((item_0) => /* @__PURE__ */ jsx(Item, {
+			item: item_0,
+			children: /* @__PURE__ */ jsx(Link, {
+				href: `#${item_0.value}`,
+				item: item_0,
+				children: t(`headings.${item_0.value}`)
+			})
+		}, item_0.value));
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(List, { children: [t4, t5] });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== props || $[14] !== t3 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Root, {
+			items: SECTIONS,
+			placement: "aside",
+			rootMargin: "0px",
+			...props,
+			children: [t3, t6]
+		}) });
+		$[13] = props;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t1 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Grid.Root, {
+			columns: "3",
+			gap: "xl",
+			children: [t1, t7]
+		});
+		$[17] = t1;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Grid, Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toc } from \"@stealthscale/component-navigation\";\n\nconst SECTIONS: Toc.TocItem[] = [\n  { depth: 2, value: \"toc-first\" },\n  { depth: 2, value: \"toc-second\" },\n  { depth: 2, value: \"toc-third\" },\n];\n\nconst PARAGRAPHS = [\"passage\", \"second\", \"third\"] as const;\n\nexport function Article(props: Omit<Toc.RootProps, \"items\">): ReactElement {\n  const { t } = useWords(\"toc\");\n\n  return (\n    <Grid.Root columns=\"3\" gap=\"xl\">\n      <Grid.Item span=\"2\">\n        <Stack gap=\"lg\">\n          {SECTIONS.map((item) => (\n            <Stack gap=\"sm\" key={item.value}>\n              <Heading as=\"h3\" id={item.value} size=\"md\">\n                {t(`headings.${item.value}`)}\n              </Heading>\n              {PARAGRAPHS.map((paragraph) => (\n                <Text key={paragraph}>{t(paragraph)}</Text>\n              ))}\n            </Stack>\n          ))}\n        </Stack>\n      </Grid.Item>\n      <Grid.Item>\n        <Toc.Root items={SECTIONS} placement=\"aside\" rootMargin=\"0px\" {...props}>\n          <Toc.Title>{t(\"onThisPage\")}</Toc.Title>\n          <Toc.List>\n            <Toc.Indicator />\n            {SECTIONS.map((item) => (\n              <Toc.Item item={item} key={item.value}>\n                <Toc.Link href={`#${item.value}`} item={item}>\n                  {t(`headings.${item.value}`)}\n                </Toc.Link>\n              </Toc.Item>\n            ))}\n          </Toc.List>\n        </Toc.Root>\n      </Grid.Item>\n    </Grid.Root>\n  );\n}\n";
+//#endregion
+//#region src/toc/examples/contents.example.tsx
+var contents_example_exports = /* @__PURE__ */ __exportAll({
+	Contents: () => Contents,
+	source: () => source
+});
+const HEADINGS = [
+	{
+		depth: 2,
+		value: "toc-overview"
+	},
+	{
+		depth: 2,
+		value: "toc-install"
+	},
+	{
+		depth: 3,
+		value: "toc-peers"
+	},
+	{
+		depth: 2,
+		value: "toc-usage"
+	}
+];
+function Contents(props) {
+	const $ = c(13);
+	const { t } = useWords("toc");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("onThisPage");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Indicator, {});
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = HEADINGS.map((item) => /* @__PURE__ */ jsx(Item, {
+			item,
+			children: /* @__PURE__ */ jsx(Link, {
+				href: `#${item.value}`,
+				item,
+				children: t(`headings.${item.value}`)
+			})
+		}, item.value));
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(List, { children: [t2, t3] });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			items: HEADINGS,
+			...props,
+			children: [t1, t4]
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Toc } from \"@stealthscale/component-navigation\";\n\nconst HEADINGS: Toc.TocItem[] = [\n  { depth: 2, value: \"toc-overview\" },\n  { depth: 2, value: \"toc-install\" },\n  { depth: 3, value: \"toc-peers\" },\n  { depth: 2, value: \"toc-usage\" },\n];\n\nexport function Contents(props: Omit<Toc.RootProps, \"items\">): ReactElement {\n  const { t } = useWords(\"toc\");\n\n  return (\n    <Toc.Root items={HEADINGS} {...props}>\n      <Toc.Title>{t(\"onThisPage\")}</Toc.Title>\n      <Toc.List>\n        <Toc.Indicator />\n        {HEADINGS.map((item) => (\n          <Toc.Item item={item} key={item.value}>\n            <Toc.Link href={`#${item.value}`} item={item}>\n              {t(`headings.${item.value}`)}\n            </Toc.Link>\n          </Toc.Item>\n        ))}\n      </Toc.List>\n    </Toc.Root>\n  );\n}\n";
+//#endregion
+//#region src/toc/toc.specimen.tsx
+/**
+* Catalogue page for the table of contents.
+*
+* @remarks
+*   `scenesOf` generates the palette and size scenes. The aside scene is hand-written, because a
+*   sticky root and a static one render the same until the page scrolls. Every scene renders a
+*   component from `examples/` and shows that file as its source. The specimen passes `as="div"`
+*   to every root, because each `nav` is named `On this page` like the catalogue's own table of
+*   contents, which axe reports as `landmark-unique`. The generated scenes list headings that are
+*   not on the page and pass `defaultActiveIds`, so the indicator stays on the second heading. The
+*   aside scene marks its first section until the page scrolls, because its sections start below
+*   the fold and the indicator stays hidden while no heading is active. It uses `h3` headings under
+*   the scene's `h2`. The words are keys under `toc` in `locales/en/specimen/toc.json`.
+*/
+/**
+* Hand-written scene for the aside placement next to three sections of this page.
+*/
+const following = {
+	about: "toc.following.about",
+	axes: ["placement"],
+	draw: () => /* @__PURE__ */ jsx(Article, {
+		as: "div",
+		defaultActiveIds: ["toc-first"]
+	}),
+	example: article_example_exports,
+	title: "toc.following.title"
+};
+var toc_specimen_default = specimen({
+	about: "toc.about",
+	id: "components/navigation/toc",
+	imports: "import { Toc } from \"@stealthscale/component-navigation\";",
+	scenes: [...scenesOf(recipe, {
+		draw: (props) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Contents, {
+				...props,
+				as: "div",
+				defaultActiveIds: ["toc-install"]
+			})
+		}),
+		example: contents_example_exports,
+		namespace: "toc",
+		order: ["size", "palette"],
+		skip: { placement: "rendered by the aside scene, because only a page that scrolls shows the difference" }
+	}), following],
+	title: "toc.title"
+});
+//#endregion
+export { toc_specimen_default as default, following };

package/dist/pages/toc/toc.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"IndicatorProps": {"conditions": 284, "foreign": 1042}, "ItemProps": {"conditions": 284, "foreign": 1042}, "LinkProps": {"conditions": 284, "foreign": 1049}, "ListProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1038}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"IndicatorProps": [], "ItemProps": [{"accepts": "TocItem", "fallback": "", "kind": "option", "name": "item", "refers": ["toc.TocItem"], "required": true, "says": "Heading of the row: its element ID as `value` and its level as `depth`."}], "LinkProps": [{"accepts": "TocItem", "fallback": "", "kind": "option", "name": "item", "refers": ["toc.TocItem"], "required": true, "says": "Heading the link points to: its element ID as `value` and its level as `depth`."}], "ListProps": [], "RootProps": [{"accepts": "string[]", "fallback": "", "kind": "option", "name": "activeIds", "refers": [], "required": false, "says": "The controlled active heading ids."}, {"accepts": "boolean", "fallback": "true", "kind": "option", "name": "autoScroll", "refers": [], "required": false, "says": "Whether to auto-scroll the TOC container so the first active item is visible when active headings change."}, {"accepts": "string[]", "fallback": "", "kind": "option", "name": "defaultActiveIds", "refers": [], "required": false, "says": "The default active heading ids when rendered. Use when you don't need to control the active headings."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["toc.ElementIds"], "required": false, "says": "The ids of the elements in the TOC. Useful for composition."}, {"accepts": "TocItem[]", "fallback": "", "kind": "option", "name": "items", "refers": ["toc.TocItem"], "required": true, "says": "Headings of the page in document order, each with its element ID as `value` and its level as `depth`."}, {"accepts": "((details: ActiveChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onActiveChange", "refers": ["toc.ActiveChangeDetails"], "required": false, "says": "Callback when the active (visible) headings change."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The semantic palette of the indicator and the focus ring. Without a value the root reads `primary`."}, {"accepts": "\"aside\" | \"inline\"", "fallback": "", "kind": "variant", "name": "placement", "refers": [], "required": false, "says": "Whether the root sticks to the top of the viewport or stays in the document flow."}, {"accepts": "string", "fallback": "\"-20px 0px -40% 0px\"", "kind": "option", "name": "rootMargin", "refers": [], "required": false, "says": "The root margin for the IntersectionObserver. Controls the effective viewport area for determining active headings."}, {"accepts": "ScrollBehavior", "fallback": "\"smooth\"", "kind": "option", "name": "scrollBehavior", "refers": [], "required": false, "says": "The default scroll behavior used when auto-scrolling the TOC container and when scrolling to a heading (via link click or `api.scrollTo`). Can be overridden per-call by passing `behavior` to `api.scrollTo`."}, {"accepts": "(() => HTMLElement | null)", "fallback": "", "kind": "option", "name": "scrollEl", "refers": [], "required": false, "says": "Function that returns the scroll container element to observe within. Defaults to the document/viewport."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The text styles, the row padding and the gap between the title and the list."}, {"accepts": "number | number[]", "fallback": "0", "kind": "option", "name": "threshold", "refers": [], "required": false, "says": "The IntersectionObserver threshold. A value of `0` means the heading is active as soon as even one pixel is visible within the root margin area."}], "TitleProps": []};
+export const shapes = {"toc.TocItem": [{"accepts": "string", "name": "value", "says": "The slug/id of the heading element in the document"}, {"accepts": "number", "name": "depth", "says": "The nesting depth (e.g., 2 for h2, 3 for h3)"}], "toc.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "title", "says": ""}, {"accepts": "string", "name": "list", "says": ""}, {"accepts": "((value: string) => string)", "name": "item", "says": ""}, {"accepts": "((value: string) => string)", "name": "link", "says": ""}, {"accepts": "string", "name": "indicator", "says": ""}], "toc.ActiveChangeDetails": [{"accepts": "string[]", "name": "activeIds", "says": "All currently active (visible) heading ids"}, {"accepts": "TocItem[]", "name": "activeItems", "says": "The active (visible) TOC items"}]};