@godxjp/ui 28.9.0 → 28.12.0

package/agent/components/ListRow.json

@@ -0,0 +1,92 @@
+{
+  "example": "import { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Smartphone } from \"lucide-react\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// The three scenarios below are three CARDS on one page, so they are wrapped in a Flex — the gap\n// between sibling cards belongs to the stack, never to the cards (audit: sibling-cards-need-flex).\n<Flex direction=\"col\" gap=\"lg\">\n<Card>\n  <CardHeader>\n    <CardTitle>アクティブなセッション</CardTitle>\n  </CardHeader>\n  <CardContent flush>\n    <ListRow\n      leading={<Smartphone aria-hidden=\"true\" className=\"size-4\" />}\n      title=\"iPhone 15 · Tokyo\"\n      description=\"最終アクセス 2分前\"\n      trailing={<Badge status=\"active\" />}\n    />\n    <ListRow\n      leading={<Smartphone aria-hidden=\"true\" className=\"size-4\" />}\n      title=\"MacBook Pro · Osaka\"\n      description=\"最終アクセス 3日前\"\n      trailing={<Button size=\"xs\" variant=\"outline\">ログアウト</Button>}\n    />\n  </CardContent>\n</Card>\n\n// Notifications — unread dot + emphasized surface, wrapping title, two inline actions\n<Card>\n  <CardContent flush>\n    <ListRow\n      unread\n      align=\"start\"\n      overflow=\"wrap\"\n      title=\"組織「グローバル・トランスフォーメーション推進本部」への招待が届いています\"\n      description=\"2026-07-30 09:12 JST\"\n      trailing={\n        <>\n          <Button size=\"xs\" variant=\"ghost\">既読にする</Button>\n          <Button size=\"xs\" variant=\"outline\">開く</Button>\n        </>\n      }\n    />\n    <ListRow unread={false} align=\"start\" overflow=\"wrap\" title=\"請求書が発行されました\" description=\"2026-07-28 18:40 JST\" />\n  </CardContent>\n</Card>\n\n// A list of LINKS — `as=\"li\"` gives the list item, `asChild` gives the whole-row link,\n// and the item carries the divider. Never wrap the row in your own <li>, and never reach for a\n// raw <ul>: `marker=\"none\"` is the semantic list container (no bullet, no indent, gap token).\n<Card>\n  <CardContent flush>\n    <Flex as=\"ul\" marker=\"none\" direction=\"col\" gap=\"none\">\n      {projects.map((project) => (\n        <ListRow key={project.key} as=\"li\" asChild title={project.name} description={project.key}>\n          <Link href={`/projects/${project.key}`} />\n        </ListRow>\n      ))}\n    </Flex>\n  </CardContent>\n</Card>\n</Flex>",
+  "group": "data-display",
+  "importPath": "@godxjp/ui/data-display",
+  "name": "ListRow",
+  "props": [
+    {
+      "defaultValue": "false",
+      "description": "Supply a link child to make the entire row a native link. Use aria-current=page for the current destination; never nest interactive trailing controls. Combine with `as=\"li\"` inside a `<Flex as=\"ul\" marker=\"none\">` — the row stays the link and `as` supplies the list item around it.",
+      "name": "asChild",
+      "type": "boolean"
+    },
+    {
+      "description": "Primary line — rendered in medium weight; truncates to one line.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Secondary line under the title (muted, xs); truncates to one line. ONE line, deliberately: a row that wants two (an endpoint, then its events) is asking for a different surface — antd `List.Item.Meta` has the same single `description`, so this is NOT an antd parity gap. Put the second line in `trailing` (a Badge, a count) or move the row to `Descriptions` / a detail panel (gh#714 §3).",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`.",
+      "name": "leading",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Trailing slot — the row action(s): a Button / DropdownMenu trigger, a Badge, or a Switch.",
+      "name": "trailing",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "\"center\"",
+      "description": "Cross-axis alignment of the columns; `start` for multi-line content.",
+      "name": "align",
+      "type": "\"center\" | \"start\""
+    },
+    {
+      "defaultValue": "\"div\"",
+      "description": "Render element — `li` when the parent is a semantic list (`<Flex as=\"ul\" marker=\"none\">` — a raw `<ul>` carries no gap token and, without `marker=\"none\"`, the bullet rule `.ui-flex[data-list] > li { display: list-item }` outranks `display: flex` on the row itself). WITH `asChild` the child owns the row element, so `as` becomes the list ITEM around it: `<li data-slot=\"list-row-item\"><a data-slot=\"list-row\">`. Use both for a list of links — do not wrap the row in an `<li>` (or a `role=\"listitem\"` div) yourself, because that makes every row an only child and the row-to-row divider, keyed on `:not(:last-child)` among siblings, stops matching on every row.",
+      "name": "as",
+      "type": "\"div\" | \"li\""
+    },
+    {
+      "defaultValue": "\"truncate\"",
+      "description": "How title/description resolve content longer than the row — `truncate` (one line + ellipsis) or `wrap` (multi-line; long unbroken tokens break via `overflow-wrap: anywhere`). Either way the content column may shrink below its intrinsic width, so the row never widens the page root.",
+      "name": "overflow",
+      "type": "\"truncate\" | \"wrap\""
+    },
+    {
+      "defaultValue": "\"default\"",
+      "description": "Row geometry. It only lowers thresholds — the row and its trailing cluster still wrap, so a cluster that cannot fit drops to its own line rather than widening the page root.",
+      "name": "density",
+      "type": "\"default\" | \"compact\""
+    },
+    {
+      "description": "Read/unread state for notification rows — renders the indicator dot (with localized `sr-only` text, never colour alone) plus the tokenized `--list-row-unread-background`. OMIT the prop for rows with no read state; pass `false` for a read row so its title keeps the same optical axis as the unread ones.",
+      "name": "unread",
+      "type": "boolean"
+    }
+  ],
+  "related": [
+    "DataTable — use instead when the list is long or needs sorting/selection/pagination; ListRow is for short, chrome-light lists.",
+    "Card — ListRow is designed to live inside `<CardContent flush>`; the Card supplies the outer surface and the closing border.",
+    "Descriptions — for a key/value metadata grid on a detail page (no per-row action); ListRow is for actionable entity rows."
+  ],
+  "rules": [
+    42,
+    44
+  ],
+  "storyPath": "data-display/ListRow.stories.tsx",
+  "tagline": "Single-line entity row (leading · title/description · trailing action) for SHORT lists inside a Card — sessions, API tokens, linked accounts, passkeys, MFA factors, invitations.",
+  "usage": [
+    "DO use ListRow for a SHORT (≈2–8 item) list of entities inside a Card where each row is one line with an action — account sessions, API keys, linked identities, passkeys. Stack rows in a `<Card><CardContent flush>` so the rows draw their own quiet dividers edge-to-edge.",
+    "DON'T reach for DataTable here — it carries sorting/selection/pagination chrome that a 3-item list doesn't need. DON'T nest a Card per row either (card-in-card). ListRow is the in-between surface.",
+    "DO write a list of LINKS as `<Flex as=\"ul\" marker=\"none\" direction=\"col\" gap=\"none\">` + `<ListRow as=\"li\" asChild><Link/></ListRow>` — one call gives the list item, the whole-row link and the divider. DON'T wrap the row in your own `<li>` or `role=\"listitem\"` element to get list semantics back: the divider rule reads `:not(:last-child)` among the rows themselves, so a wrapper per row makes each one an only child and EVERY divider disappears — silently, which is why `ui-audit` now flags it as `no-hand-rolled-list`.",
+    "DON'T hand-roll `<div className=\"flex items-center justify-between border-b py-3\">` — that is exactly the repeated pattern ListRow replaces (border/radius/padding are tokenized via `--list-row-*`).",
+    "DO put the row's action in `trailing` (a `ghost`/`outline` Button, a DropdownMenu trigger, a Switch, or a status Badge). DO pass `as=\"li\"` when the rows live inside a semantic list, and build that list as `<Flex as=\"ul\" marker=\"none\">` — `ui-audit` flags a raw `<ul>`/`role=\"list\"` as `no-hand-rolled-list`.",
+    "DO use `unread` for a notification list — the dot is a SHAPE with localized `sr-only` text (\"Unread\"/\"Read\"), so it never reads as colour alone, and the row surface reads `--list-row-unread-background` (default `hsl(var(--muted))` — chosen so the xs muted description line stays WCAG AA on the emphasized surface; `--accent` would drop it to 4.23:1). DON'T substitute a `Badge` — that renders a labelled pill, not a compact status dot.",
+    "DO pass `density=\"compact\"` for the canonical invitation / history row — an Avatar, a title (+ description) and one or two small trailing Buttons that must read as ONE line inside a narrow card (≈326px content at 390px), or a history row whose status Badge + ISO-8601 date belongs beside the title. Measured at 390px: 62px tall vs 126px at the default density (where the actions wrapped), history row 41px vs 114px. DON'T reach for it just to \"make things tighter\" on a roomy page — the default density is the entity-row measure.",
+    "DON'T add one-off `min-width`/wrapping CSS in the consumer app for a long title + two trailing Buttons. The row already shrinks and WRAPS: the content column keeps only `min(var(--list-row-body-min-width), 100%)` and the trailing actions drop onto their own line below the threshold. Retune the threshold with `--list-row-body-min-width` (default 12rem) and the action gap with `--list-row-trailing-gap`; pass `overflow=\"wrap\"` (usually with `align=\"start\"`) when the title must stay fully readable at 390px instead of truncating."
+  ],
+  "useCases": [
+    "Account security page — a list of active sessions (device + last-seen as title/description, a destructive 'Revoke' Button in trailing).",
+    "Developer settings — API tokens or passkeys, each row showing the name + created date and a DropdownMenu of actions.",
+    "Linked accounts / SSO — an IdP icon in leading, the provider name + connected email, and a Switch or 'Disconnect' Button trailing.",
+    "Notifications inbox — `unread` rows carry the dot + emphasized surface, `overflow=\"wrap\"` keeps a long JA/EN/VI title and its ISO-8601 timestamp readable, and two inline trailing Buttons (Mark as read / Open) wrap under the text at 390px.",
+    "Pending invitations — Avatar in leading, the organization/invitation name as title, and Accept + Decline Buttons in trailing that stack at narrow widths without a horizontal page scrollbar."
+  ]
+}

package/agent/components/Logo.json

@@ -0,0 +1,85 @@
+{
+  "example": "import { Logo } from \"@godxjp/ui/general\";\n\n// Full lockup — mark + wordmark as ONE element (no wrapper, no page CSS).\n<Logo glyph=\"c\" wordmark=\"CoreBooks\" />\n\n// Canonical brand-green GoDX lockup — identity role, independent of --primary.\n<Logo mark=\"godx\" tone=\"success\" wordmark=\"GoDX\" />\n\n// Bare mark standing alone → give it an accessible name.\n<Logo label=\"CoreBooks\" size=\"lg\" />\n\n// Product lockup — \"GoDX | ID\", one master, package-owned divider and gaps.\n<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />\n\n// The whole lockup as a link — the <a> IS the lockup, no wrapper to align.\n<Logo asChild mark=\"godx\" tone=\"success\" wordmark=\"GoDX\">\n  <a href=\"/\" />\n</Logo>",
+  "group": "general",
+  "importPath": "@godxjp/ui/general",
+  "name": "Logo",
+  "props": [
+    {
+      "defaultValue": "\"g\"",
+      "description": "The brand glyph — a short mark (letter/initials) or a custom inline <svg>. Only read when mark=\"glyph\".",
+      "name": "glyph",
+      "type": "React.ReactNode"
+    },
+    {
+      "defaultValue": "\"glyph\"",
+      "description": "\"godx-lockup\" renders the FULL master lockup — identity mark + the drawn \"GoDX\" logotype as one artwork (4.787:1, so the `size` tier drives HEIGHT and width follows); pair it with `productSuffix` for \"GoDX | ID\". \"godx\" renders THE CANONICAL GoDX IDENTITY MARK as an inline vector owned by the package — use it for hosted-identity surfaces (AuthShell brand bar, AuthIdentity, CenteredShell topbar); do NOT re-draw or import a brand SVG in the app. Its box + colour are tokenized (--logo-godx-size-{xs,sm,md,lg} driven by the `size` prop, pinnable at every tier via --logo-godx-size; --logo-godx-color, defaulting to the --brand IDENTITY role = canonical emerald #009766, never --primary and never the --success status green) and it drops the boxed fill/radius. \"glyph\" keeps the configurable boxed-glyph treatment.",
+      "name": "mark",
+      "type": "\"glyph\" | \"godx\" | \"godx-lockup\""
+    },
+    {
+      "defaultValue": "\"md\"",
+      "description": "Box size tier (tokenised) — it applies to EVERY mark, including mark=\"godx\". The boxed glyph reads --logo-size-* (md = 1.75rem); the identity mark reads its own --logo-godx-size-* scale (xs 1.5 / sm 1.75 / md 2 / lg 2.5rem — the artwork is a capsule inside a square viewBox, so it needs slightly more box to read at the same optical weight). On a `wordmark` lockup the tier scales the mark and the wordmark together. To freeze the identity box at ONE size across every tier, a service theme sets --logo-godx-size (unset by default).",
+      "name": "size",
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+    },
+    {
+      "defaultValue": "\"primary\"",
+      "description": "Semantic fill role. The boxed glyph's INK defaults to --logo-identity-foreground (near-black), NOT --brand-foreground: --brand-foreground is the artwork KNOCKOUT colour and clears only 3.67:1 on the emerald, while a boxed glyph renders real TEXT and owes WCAG 2.2 SC 1.4.3's 4.5:1 (14px bold is not \"large text\"). Re-theming --brand to a DARK fill? Override --logo-success-foreground to re-invert the ink.",
+      "name": "tone",
+      "type": "\"primary\" | \"success\""
+    },
+    {
+      "description": "Readable product name rendered BESIDE the mark as ONE lockup — pass the localized product name (or an inline <svg> logotype when a real asset exists). Set it INSTEAD of hand-rolling `inline-flex items-center gap-2` around a Logo and a Text. The lockup root takes ref/className/…props; the mark becomes decorative and the wordmark text carries the accessible name, so the pair is announced once. Colour/face/weight/tracking/size and the mark↔wordmark gap are tokens (--logo-wordmark-*); on mark=\"godx\" / tone=\"success\" the wordmark is canonical emerald from the --brand identity role and NEVER reads --primary or --success.",
+      "name": "wordmark",
+      "type": "React.ReactNode"
+    },
+    {
+      "description": "The PRODUCT name that follows the brand, set off by the lockup's own rule — `<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />` renders \"GoDX | ID\" (later \"GoDX | Console\", \"GoDX | Admin\"). It renders after `wordmark` when both are set, and it turns Logo into a lockup on its own. The suffix is TEXT in the lockup's own type scale, NEVER a second artwork file: the rule's colour/width/height (--logo-divider-color / -width / -height / -alpha, the logotype ink at 0.25 alpha so it has a dark theme the kit's hardcoded #C5C8D6 does not) and the gap around it (--logo-product-suffix-gap) are package tokens. With mark=\"godx-lockup\" and no `wordmark` the brand half is DRAWN (paths, unreachable by AT), so the package restores \"GoDX\" as sr-only text and the lockup is announced \"GoDX <suffix>\" — as TEXT rather than role=\"img\"+aria-label, so an asChild link keeps its link role.",
+      "name": "productSuffix",
+      "type": "React.ReactNode"
+    },
+    {
+      "description": "Accessible name. Set → exposed as a named image (role img); omitted → decorative (aria-hidden), the correct default when a readable wordmark sits beside it. With `wordmark` set, `label` overrides the lockup's name (the wordmark text is otherwise the name). It also overrides the \"GoDX <productSuffix>\" name a drawn-logotype lockup composes for itself (role=\"img\" makes the sr-only brand word presentational).",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "description": "Borrow the single child element as the logo ROOT instead of rendering a <span> — the way to make the whole logo a LINK (<a>, or a router <Link>). The borrowed tag itself carries data-slot=\"logo-lockup\"/.ui-logo-lockup and the mark + wordmark become its children, so there is no wrapper element between the link and the lockup. Use it instead of wrapping Logo in your own <a>: .ui-logo-lockup is display:inline-flex, so a plain <a> (display:inline) puts the lockup on a line box and the strut's descender nudges the mark up in a topbar — the only fix left to the consumer is className=\"flex\" on the <a>, which ui-audit rejects as no-utility-layout.",
+      "name": "asChild",
+      "type": "boolean"
+    }
+  ],
+  "related": [
+    "AuthIdentity (@godxjp/ui/layout) — the canonical auth heading block; it already renders the GoDX mark, so don't add a second Logo above it.",
+    "Text / Heading — only for a bespoke lockup the `wordmark` prop cannot express; for the ordinary mark + product name, use `wordmark` (it owns the gap, face and brand colour as tokens).",
+    "Avatar — use Avatar for a PERSON/entity image or initials; use Logo for the PRODUCT brand mark. They look similar (square/rounded glyph) but carry different meaning."
+  ],
+  "rules": [
+    45,
+    46
+  ],
+  "storyPath": "general/Logo.stories.tsx",
+  "tagline": "The product brand mark — a glyph/identity box, or (with `wordmark`) the full mark + wordmark LOCKUP. Tokenised size/radius/type/gap, and `size` scales every branch (boxed glyph, identity mark, lockup); the boxed fill reads --primary, while the GoDX identity mark and wordmark read the --brand IDENTITY role instead, so an action-colour re-theme never recolours the brand.",
+  "usage": [
+    "DO import from `@godxjp/ui/general`: `import { Logo } from \"@godxjp/ui/general\";`",
+    "DO use Logo INSTEAD of hand-rolling `<span aria-hidden className=\"grid size-7 place-items-center rounded-md bg-primary text-sm font-bold text-primary-foreground\">g</span>` — that repeats literal size/radius and puts type utilities on a bare span (rules #45/#46).",
+    "DO leave `label` unset when a readable wordmark sits beside the mark (shell header, topbar) — the mark stays decorative and the wordmark carries the accessible name. Set `label` only when the mark stands alone.",
+    "DON'T pass more than 1–2 glyphs — the box is square and centres its content; a long string overflows. The product NAME goes in `wordmark`, never in `glyph`.",
+    "DO use `wordmark` for the full lockup: `<Logo mark=\"godx\" tone=\"success\" wordmark=\"GoDX\" />`. It replaces the hand-rolled `<span className=\"inline-flex items-center gap-2\"><Logo/><Text/></span>` — the gap, face, weight, tracking, per-tier size and the brand colour are all tokens, so a shell header / auth brand bar needs no page CSS.",
+    "NOTE: the package ships NO wordmark ARTWORK — `wordmark` typesets the name in the design-system display face (`--logo-wordmark-font-family`). When design supplies a real logotype, pass it as an inline `<svg>` node to `wordmark`; do not approximate letterforms in CSS.",
+    "DO use `<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />` for a product surface branded \"GoDX | ID\" — the divider, the gaps, the `size` scale and the light/dark master are the package's. DON'T inline the kit's flattened \"GoDX | ID\" SVG in the app: it is a second master in its own coordinate system, with global `id=\"title\"`/`id=\"desc\"` that collide across instances, a hardcoded `#0B0F3B` ink with no dark variant, and a hardcoded `#C5C8D6` rule (gh#649).",
+    "DON'T typeset the suffix yourself as `<Logo mark=\"godx-lockup\" /><Text>ID</Text>` — that has no divider and the spacing is not the lockup's token.",
+    "DON'T re-tint via `className=\"bg-*\"` — the fill reads the `--primary` role token; retune it through a service theme (`--primary`, `--logo-radius`, `--logo-size-*`), not utilities.",
+    "DO use `mark=\"godx\"` for the canonical GoDX identity mark on hosted-identity screens — it is ALREADY in the package as real inline vector artwork. DON'T pass a hand-drawn brand SVG as `glyph`, and don't ship a brand asset in the app, to reproduce it.",
+    "DO make the brand a link with `asChild`, not with a wrapper: `<Logo asChild mark=\"godx\" wordmark=\"GoDX\"><Link href=\"/\" /></Logo>`. Writing `<a className=\"flex\"><Logo …/></a>` instead is the exact shape ui-audit rejects (no-utility-layout), and dropping the `flex` misaligns the mark."
+  ],
+  "useCases": [
+    "App-shell header brand lockup — `<Logo glyph=\"c\" wordmark=\"CoreBooks\" />` in the sidebar/topbar: mark decorative, wordmark readable, spacing tokenized.",
+    "Auth screen — a standalone labelled mark above the sign-in form: `<Logo label=\"CoreBooks\" size=\"lg\" />`.",
+    "Tenant/workspace switcher row — a small `size=\"sm\"` mark as the leading slot of a ListRow or menu item.",
+    "Custom SVG brand — pass an inline `<svg>` as `glyph` to render a real logomark on the primary fill instead of a letter.",
+    "Hosted GoDX identity surface — `<Logo mark=\"godx\" tone=\"success\" />` in an AuthShell `brand` bar or inside <AuthIdentity>: the canonical GoDX mark the package already owns. There is no separate identity-mark component and no asset to import.",
+    "Brand lockup in a shell header / auth brand bar — `<Logo mark=\"godx\" tone=\"success\" wordmark=\"GoDX\" />`: one element, brand-green, no wrapper div and no page CSS.",
+    "Product-branded surface (\"GoDX ID\" legal pages, a Console/Admin topbar) — `<Logo mark=\"godx-lockup\" productSuffix=\"ID\" />`: the master lockup, the package's divider, and one accessible name, \"GoDX ID\"."
+  ]
+}

package/agent/components/Marquee.json

@@ -0,0 +1,91 @@
+{
+  "docPath": "data-display/marquee.tsx",
+  "example": "import { Marquee } from \"@godxjp/ui/data-display\";\nimport { Text } from \"@godxjp/ui/general\";\n\n<Marquee fade pauseOnHover label={t(\"partners.pauseLogos\")}>\n  {partners.map((partner) => (\n    <Text key={partner.id} size=\"sm\" tone=\"muted\">\n      {partner.name}\n    </Text>\n  ))}\n</Marquee>",
+  "group": "data-display",
+  "importPath": "@godxjp/ui/data-display",
+  "name": "Marquee",
+  "props": [
+    {
+      "description": "The row of content. Rendered ONCE for real; every further copy that fills the track is an aria-hidden + inert clone, so the accessibility tree and the tab order see it exactly once however wide the viewport is.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Controlled motion state; pass with `onPlayChange`. Exists so one page-level 'stop all motion' switch can halt every track at once. The built-in pause control stays either way.",
+      "name": "play",
+      "type": "boolean"
+    },
+    {
+      "description": "Uncontrolled initial state. Default true. Set false where the motion is not the point of the screen: WebAIM recommends animated content be paused by default.",
+      "name": "defaultPlay",
+      "type": "boolean"
+    },
+    {
+      "description": "Fires on every transition, from the built-in control or a controlled write.",
+      "name": "onPlayChange",
+      "type": "(play: boolean) => void"
+    },
+    {
+      "description": "The edge the content travels TOWARDS, spelled logically. Default `start`, which follows the reading direction; both members mirror under dir=\"rtl\" with no prop change.",
+      "name": "direction",
+      "type": "\"start\" | \"end\""
+    },
+    {
+      "description": "Pace ordinal over the `--marquee-interval` motion token (a duration per SCREENFUL, so the pace is the same with one item or forty). Default `base`. Not px/s: a raw number is neither themeable nor width-aware.",
+      "name": "speed",
+      "type": "\"slow\" | \"base\" | \"fast\""
+    },
+    {
+      "description": "Space between items AND between copies, as a token step. Defaults to the `--marquee-gap-inline` token.",
+      "name": "gap",
+      "type": "GapProp"
+    },
+    {
+      "description": "Also pause under the pointer. Default false. An ADDITION to the pause control, never the mechanism. Focus inside the track always pauses it regardless.",
+      "name": "pauseOnHover",
+      "type": "boolean"
+    },
+    {
+      "description": "Mask both edges over `--marquee-mask-width`. Default false. A mask, not an opaque gradient colour, so it follows a themed or dark background.",
+      "name": "fade",
+      "type": "boolean"
+    },
+    {
+      "description": "Names the CONTENT (\"partner logos\"), not the button. The control's accessible name is composed from it and the state verb ('Pause scrolling: partner logos'), so the name still flips when the state does. A non-string node is ignored.",
+      "name": "label",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Structural class on the root.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Carousel — the answer whenever the reader should STEP through discrete items. It is user-driven, has prev/next and dots, and does not move on its own.",
+    "Activity — ambient motion with no travel: a pulse or three dots that say something is happening, with no content to read.",
+    "ScrollArea — what a Marquee becomes under prefers-reduced-motion, and what to reach for directly when the row should simply be scrollable.",
+    "Flex / ResponsiveGrid — the static logo wall. Start here; add motion only when something asks for it."
+  ],
+  "rules": [
+    2,
+    44,
+    45
+  ],
+  "storyPath": "data-display/Marquee.stories.tsx",
+  "tagline": "A track of content that travels continuously, carrying the WCAG 2.2.2 pause control that makes it conformant. The clone count is MEASURED against the viewport and re-measured on resize; under prefers-reduced-motion it does not move at all.",
+  "usage": [
+    "DO leave the pause control alone. WCAG 2.2 SC 2.2.2 makes it a conformance requirement for anything that moves automatically for more than five seconds beside other content, and technique F16 names 'a scrolling news ticker without a mechanism to pause it' as the failure by example.",
+    "DO ask first whether it should move at all. Nielsen Norman Group and WebAIM both discourage auto-moving content, and no major design system ships a ticker. A static `Flex wrap` or `ResponsiveGrid` logo wall is usually the better screen; `defaultPlay={false}` is the middle ground.",
+    "DO use `play` / `onPlayChange` for a page-level 'reduce motion on this screen' switch across several tracks.",
+    "DON'T reach for `pauseOnHover` as the pause mechanism. A keyboard user never hovers; that is exactly the gap in `react-fast-marquee`, whose clones also carry no `aria-hidden`.",
+    "DON'T put essential, non-duplicated information in it. A reader who looks away misses it, and under prefers-reduced-motion the row becomes a scrollable strip instead.",
+    "DON'T wrap it in your own overflow/animation CSS. The clone count and the lap distance are measured; a second overflow box breaks the measurement and the seam.",
+    "DON'T add a role. `role=\"marquee\"` is a LIVE REGION for frequently CHANGING content; here nothing changes, only its position. Wrap it in a labelled <section> when the collection needs a name."
+  ],
+  "useCases": [
+    "A partner or customer logo wall on a marketing page, where the row is wider than the viewport.",
+    "An announcement or status strip above an application shell (maintenance windows, release notes) that must stay pausable.",
+    "A 'now processing' rail of job identifiers beside a dashboard, where the motion signals activity rather than carrying the data."
+  ]
+}

package/agent/components/Masonry.json

@@ -0,0 +1,82 @@
+{
+  "docPath": "layout/masonry.tsx",
+  "example": "import { Masonry } from \"@godxjp/ui/layout\";\nimport { Card, CardContent } from \"@godxjp/ui/data-display\";\nimport { Text } from \"@godxjp/ui/general\";\n\n<Masonry\n  columns={{ base: 1, sm: 2, lg: 3 }}\n  gap=\"md\"\n  items={notes.map((note) => ({ key: note.id, data: note }))}\n  itemRender={({ data }) => (\n    <Card>\n      <CardContent>\n        <Text>{data.body}</Text>\n      </CardContent>\n    </Card>\n  )}\n  onLayoutChange={(layout) => console.log(layout.length, \"tiles placed\")}\n/>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "Masonry",
+  "props": [
+    {
+      "description": "The tiles, in READING order — which is also DOM order. Each is { key, children?, column?, height?, data? }, antd's MasonryItem field for field.",
+      "name": "items",
+      "type": "MasonryItemProp<TData>[]"
+    },
+    {
+      "description": "Renders a tile that carries no `children`. antd's rule is ported exactly: `children` wins over `itemRender`, and the callback receives the live index and column.",
+      "name": "itemRender",
+      "type": "(item: MasonryItemProp<TData> & { index: number; column: number }) => ReactNode"
+    },
+    {
+      "defaultValue": "3",
+      "description": "Column count, fixed or per VIEWPORT breakpoint (sm 40rem · md 48rem · lg 64rem · xl 80rem), taking the widest matching declared step and falling back to `base`. antd's 3 is kept. antd spells the steps xs..xxl; `xs` IS `base` here and there is no `xxl` — both are a TypeScript error and a dev-time warning, never a silent drop.",
+      "name": "columns",
+      "type": "number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }"
+    },
+    {
+      "defaultValue": "(none — the --masonry-gap-* tokens, which default to 0 like antd)",
+      "description": "Spacing between tiles. THIS IS ANT DESIGN'S `gutter`, renamed: this package already owns the axis as `gap` (Flex, ResponsiveGrid, AuthStack) and takes a GapProp token step rather than a pixel number, so a masonry breathes with --scaling. The tuple is antd's [Gap, Gap] = [inline, block]. Passing `gutter` is a compile error that names `gap`.",
+      "name": "gap",
+      "type": "GapProp | [GapProp, GapProp]"
+    },
+    {
+      "defaultValue": "false",
+      "description": "antd `fresh`. Wraps EVERY tile in its own ResizeObserver so a tile that changes height in place — a chart settling, a 'show more', a late image — re-packs the columns. Off, only the container's own resize and a descendant load/error re-measure.",
+      "name": "fresh",
+      "type": "boolean"
+    },
+    {
+      "description": "Fires once every tile has a resolved position and the count matches `items`, and is deduped on an unchanged assignment. antd DOCUMENTS `{ key, column }[]` but its implementation spreads the whole item; the implementation is what is ported, so `data` comes back with it.",
+      "name": "onLayoutChange",
+      "type": "(layout: (MasonryItemProp<TData> & { column: number })[]) => void"
+    },
+    {
+      "description": "DOM id of the container.",
+      "name": "id",
+      "type": "string"
+    },
+    {
+      "description": "Structural class on the container.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "ResponsiveGrid — the answer whenever the tiles are or can be EQUAL height. It is pure CSS grid with container queries, needs no measurement, and keeps DOM order and visual order identical. Reach for Masonry only when the heights genuinely differ.",
+    "Flex — a single row or column of mixed-width content; no columns, no packing.",
+    "Card / CardContent — the usual tile. Masonry positions the tile box and never styles what is inside it.",
+    "AspectRatio — pair it with `height` when the tiles are images of a known ratio; the layout then settles with no measurement pass at all."
+  ],
+  "rules": [
+    2,
+    40,
+    44,
+    45
+  ],
+  "storyPath": "layout/Masonry.stories.tsx",
+  "tagline": "Ant Design `Masonry` (6.0.0): tiles of UNEQUAL height packed into columns, each tile dropped into whichever column is shortest when its turn comes. DOM order stays `items` order at every width, so the reading order never follows the packing.",
+  "usage": [
+    "DO order `items` by IMPORTANCE, never by height. The tiles are absolutely positioned, so DOM order — what a screen reader reads and what Tab visits — is always the `items` order, while the visual order is the packing. A later tile can sit visually above an earlier one; that is the form, not a bug.",
+    "DO give every tile a stable `key`. It is the identity the measurement cache and `onLayoutChange` are keyed on, not React's element key alone.",
+    "DO pass `height` when you already know it (a fixed-ratio thumbnail, a server-rendered feed). It skips the measurement pass, so the first paint lands in the right place instead of settling a frame later.",
+    "DO reach for `fresh` only when tiles change height ON THEIR OWN. It is one ResizeObserver per tile; a static feed does not need it.",
+    "DON'T use `gutter` — that is antd's name for `gap` here, and it is typed `never` so the compiler says so. `gap` takes a token step: gap=\"md\", gap={4}, gap={[\"sm\", \"md\"]}.",
+    "DON'T write `columns={{ xs: 1 }}`. The mobile-first floor is `base`, and `xxl` does not exist here; both spellings are rejected at compile time and warned about at runtime.",
+    "DON'T add a role. A masonry is a layout and WAI-ARIA 1.2 has no role for one; `region` would collide with landmark-unique, `list` would announce structure the tiles already carry. Wrap it in a labelled <section> when the COLLECTION needs a name.",
+    "DON'T use it for equal-height tiles — that is ResponsiveGrid, which needs no measurement and no JavaScript."
+  ],
+  "useCases": [
+    "A media or document gallery where thumbnails have different aspect ratios and a fixed-row grid would leave a ragged band of whitespace under every row.",
+    "A feed of notes, comments or activity cards whose text length varies wildly — a one-line entry beside a twelve-line one.",
+    "A dashboard of report cards of different depth (a two-row summary beside a ten-row table) that should still fill the page evenly.",
+    "A pinned-column layout: one tile held in the first column with `column: 0` (a filter panel, a promoted card) while the rest of the feed packs around it."
+  ]
+}

package/agent/components/MasterDetail.json

@@ -0,0 +1,95 @@
+{
+  "example": "import { MasterDetail } from \"@godxjp/ui/layout\";\n\n// Canonical: fluid list + fixed 320px detail rail (stacks below 40rem).\n<MasterDetail\n  masterLabel=\"Teams\"\n  detailLabel=\"Selected team\"\n  detailId=\"team-detail\"\n  master={<TeamTable onRowClick={select} detailId=\"team-detail\" />}\n>\n  <TeamDetail team={selected} />\n</MasterDetail>\n\n// Leading navigator rail instead.\n<MasterDetail rail=\"master\" railWidth=\"compact\" masterLabel=\"Categories\">\n  <SettingsForm />\n</MasterDetail>\n\n// A long real collection: bound the master so it scrolls in place and the detail\n// stays near the top of a stacked mobile page.\n<MasterDetail masterViewport=\"compact\" masterLabel=\"Members\" detailLabel=\"Selected member\">\n  <MemberDetail member={selected} />\n</MasterDetail>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "MasterDetail",
+  "props": [
+    {
+      "description": "One-pane navigation below the token-owned collapse threshold; omit to retain stacking. The consumer owns URL/history selection.",
+      "name": "mobilePane",
+      "type": "\"master\" | \"detail\""
+    },
+    {
+      "description": "Back link shown above detail in mobile navigation mode.",
+      "name": "detailBack",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Selectable collection. Always FIRST in DOM order, so the stacked (mobile) order is list-then-detail whichever region owns the rail.",
+      "name": "master",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Detail surface for the current master selection.",
+      "name": "children",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "\"detail\"",
+      "description": "`master` = leading category/navigator rail beside a fluid detail surface.",
+      "name": "rail",
+      "type": "\"master\" | \"detail\""
+    },
+    {
+      "description": "Token rail steps: 12rem, 18.75rem, 20rem, 24rem.",
+      "name": "railWidth",
+      "type": "\"narrow\" | \"compact\" | \"standard\" | \"wide\""
+    },
+    {
+      "defaultValue": "\"auto\"",
+      "description": "Bound the master collection to a scrollable viewport. `auto` (default) never bounds it — the region grows with its content. `compact` (--master-detail-master-viewport-compact, 20rem) / `standard` (28rem) cap its block size and scroll the collection INSIDE the region, and make that region a keyboard-reachable scroll container (tabIndex 0, --master-detail-master-viewport-inset reserves focus-ring room). No raw pixel prop exists — retune the tokens in a service theme.",
+      "name": "masterViewport",
+      "type": "\"auto\" | \"compact\" | \"standard\""
+    },
+    {
+      "description": "Per-instance stacking threshold (sm=40rem, md=48rem, lg=64rem, xl=80rem; false never stacks). OMIT it to inherit the themeable --master-detail-collapse-below token (default 40rem) — that is the global knob a service theme retunes once.",
+      "name": "collapseBelow",
+      "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | false"
+    },
+    {
+      "description": "Accessible name for the master region landmark.",
+      "name": "masterLabel",
+      "type": "string"
+    },
+    {
+      "description": "Accessible name for the detail region landmark.",
+      "name": "detailLabel",
+      "type": "string"
+    },
+    {
+      "description": "Id of the detail region so the selection controls inside `master` can point at it with aria-controls, and the app can move focus to it after a selection (the region carries tabIndex={-1} for exactly this).",
+      "name": "detailId",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "SplitPane — a main surface plus a COMPLEMENTARY aside (its own content), not a selection-driven detail; use MasterDetail when the trailing pane is the detail OF the selection.",
+    "ResponsiveGrid — use for equal-width independent cards, never for a master-detail relationship.",
+    "PageContainer — outer page scaffold that supplies page insets and title hierarchy around MasterDetail."
+  ],
+  "rules": [
+    24,
+    40
+  ],
+  "storyPath": "layout/MasterDetail.stories.tsx",
+  "tagline": "Responsive master-detail composition: a fluid list beside a token-owned 300px/320px fixed rail, with a themeable collapse threshold. `rail` picks which region is fixed — default `detail` (the canonical 1fr/320px list + detail rail); `master` for a leading navigator rail.",
+  "usage": [
+    "DO use MasterDetail for team, member, service or settings screens where a selectable collection drives a detail surface. Default `rail=\"detail\"` gives the canonical fluid list + 320px detail rail; pass `rail=\"master\"` for a leading navigator rail.",
+    "DO keep selection and keyboard semantics on the controls inside `master` (`aria-pressed`, roving focus, or listbox semantics as appropriate) — only the caller knows which APG pattern applies; MasterDetail preserves whatever you render.",
+    "DO wire the two together: give the master controls `aria-controls={detailId}`, and move focus to `document.getElementById(detailId)` when a selection replaces the detail (the region is `tabIndex={-1}` so that focus call works).",
+    "DO choose `compact` for the 300px rail and `standard` for 320px. Never reproduce these tracks with consumer CSS.",
+    "DO provide `masterLabel` and `detailLabel` when the surrounding headings do not already identify both regions.",
+    "Use ResponsiveGrid.Item span for proportional tracks, or MasterDetail when the rail needs a bounded width.",
+    "DO set `masterViewport=\"compact\"` (or `\"standard\"`) whenever the collection is a REAL, unbounded list. Left at `auto` a 200-row list renders ~3,700px tall, and once the layout stacks the detail lands thousands of pixels below the fold; bounded, the collection scrolls inside the rail and the detail stays near the top of the screen. Pass `masterLabel` too, so the scroll region is announced.",
+    "DON'T reproduce that bound with a consumer `max-height`/`overflow` rule or a pixel prop — there is none by design. Retune `--master-detail-master-viewport-compact` / `-standard` in the service theme, and `--master-detail-master-viewport-inset` if the collection's focus ring needs more room.",
+    "The collapse threshold is a real token: below `--master-detail-collapse-below` (default 40rem, measured against the COMPOSITION's own inline size, never the viewport) master stacks above detail. A theme retunes it globally, `collapseBelow` overrides it per instance. It is implemented as a flex-basis threshold rather than a media query precisely because a query CONDITION cannot read a var().",
+    "Measured geometry with the defaults: 1440 → fluid master + 320px rail; 1024 → fluid master + 320px rail; 390 → stacked full-width master then detail. Same JSX at every width — no consumer-local CSS, grid tracks or per-screen spacing."
+  ],
+  "useCases": [
+    "Teams screen: the team DataTable stays fluid while the selected team's detail keeps the 320px rail.",
+    "Organization service access: services in the compact leading rail (`rail=\"master\"`) and selected service roles in the fluid detail surface.",
+    "Settings navigator: categories in the leading rail and the selected configuration form in the detail surface."
+  ]
+}

package/agent/components/MegaMenu.json

@@ -0,0 +1,120 @@
+{
+  "docPath": "navigation/mega-menu.tsx",
+  "example": "import { MegaMenu } from \"@godxjp/ui/navigation\";\n\n<MegaMenu\n  label=\"メインナビゲーション\"\n  value={route}\n  onValueChange={setRoute}\n  triggerAction=\"hover\"\n  items={[\n    {\n      key: \"products\",\n      label: \"製品\",\n      panel: {\n        groups: [\n          {\n            key: \"core\",\n            label: \"コア\",\n            description: \"毎日使う業務アプリ\",\n            links: [\n              { key: \"hr\", label: \"人事管理\", href: \"/hr\", description: \"従業員台帳と異動\" },\n              { key: \"payroll\", label: \"給与計算\", href: \"/payroll\" },\n            ],\n          },\n        ],\n        footer: <a href=\"/products\">すべての製品を見る</a>,\n      },\n    },\n    { key: \"pricing\", label: \"料金\", href: \"/pricing\" },\n  ]}\n/>",
+  "group": "navigation",
+  "importPath": "@godxjp/ui/navigation",
+  "name": "MegaMenu",
+  "props": [
+    {
+      "description": "The bar. An item WITH a `panel` is a disclosure button (antd SubMenuType); an item WITHOUT one is a plain link (antd MenuItemType). { key, label, href?, icon?, disabled?, panel? } where panel is { groups: [{ key, label?, description?, icon?, links: [{ key, label, href?, description?, icon?, disabled? }] }], footer? }. Ant Design `items`.",
+      "name": "items",
+      "type": "MegaMenuItemProp[]"
+    },
+    {
+      "description": "Key of the OPEN PANEL, or null for none. Ant Design `openKeys` collapsed to one level — a megamenu bar is one level deep, so at most one panel is open and the array would only ever hold zero or one key.",
+      "name": "open",
+      "type": "string | null"
+    },
+    {
+      "defaultValue": "null",
+      "description": "Initial uncontrolled open panel. Ant Design `defaultOpenKeys`.",
+      "name": "defaultOpen",
+      "type": "string | null"
+    },
+    {
+      "description": "Fires with the newly open panel's key, or null when everything closed. Ant Design `onOpenChange`.",
+      "name": "onOpenChange",
+      "type": "(key: string | null) => void"
+    },
+    {
+      "description": "Key of the item for the CURRENT ROUTE — renders aria-current=\"page\" on the bar item and on the matching panel link. Ant Design `selectedKeys`, singular because a route is singular.",
+      "name": "value",
+      "type": "string"
+    },
+    {
+      "description": "Uncontrolled initial current route. Ant Design `defaultSelectedKeys`.",
+      "name": "defaultValue",
+      "type": "string"
+    },
+    {
+      "description": "Fires with the activated key (a top-level link or a panel link). Activation always closes the open panel. Ant Design `onClick`.",
+      "name": "onValueChange",
+      "type": "(key: string) => void"
+    },
+    {
+      "defaultValue": "md",
+      "description": "Bar density. The trigger box tracks the matching --control-height tier.",
+      "name": "size",
+      "type": "xs | sm | md | lg"
+    },
+    {
+      "defaultValue": "click",
+      "description": "Ant Design `triggerSubMenuAction`. Default is `click` here where antd defaults to `hover`, because a hover-only trigger has no equivalent on a touch screen; `hover` still accepts click, so touch is never stranded. antd's third value `contextMenu` is not ported.",
+      "name": "triggerAction",
+      "type": "click | hover"
+    },
+    {
+      "defaultValue": "0",
+      "description": "Ant Design `subMenuOpenDelay`, in MILLISECONDS (antd uses seconds). `hover` only.",
+      "name": "openDelay",
+      "type": "number"
+    },
+    {
+      "defaultValue": "100",
+      "description": "Ant Design `subMenuCloseDelay`, in MILLISECONDS. The hover-intent grace period: the pointer may cross a diagonal toward the panel for this long before anything closes. `hover` only.",
+      "name": "closeDelay",
+      "type": "number"
+    },
+    {
+      "description": "Ant Design `expandIcon`, verbatim including its `false` to remove the chevron.",
+      "name": "expandIcon",
+      "type": "React.ReactNode | false"
+    },
+    {
+      "description": "Router link component for every href in the bar and the panels — same contract and same spelling as Sidebar.linkComponent / NavList.linkComponent.",
+      "name": "linkComponent",
+      "type": "React.ComponentType<AnchorHTMLAttributes & { href?: string }>"
+    },
+    {
+      "description": "Accessible name of the <nav> landmark (a plain string — it lands on aria-label). Localized default otherwise.",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "description": "DOM id of the nav root.",
+      "name": "id",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "DropdownMenu — a menu of COMMANDS on a trigger (role=\"menu\"). Use it for actions; use MegaMenu for navigation to places.",
+    "NavList — the same idea laid out vertically inside a page (a settings nav). antd's `Menu mode=\"inline\"` is Sidebar; `mode=\"vertical\"` is NavList.",
+    "Topbar / TopbarItem — the APP shell's bar, and NOT where this goes. Measured, both slots break it: `topbar-center` is `display: none` below roughly 1280px (flex at 1440, none at 1024) so the nav vanishes on a laptop, and `topbar-start` is one `overflow: clip` / `flex-wrap: nowrap` row, so the narrow accordion runs out of it (58 elements past the viewport at 375). Put MegaMenu in the site header's own row beside the logo, and give phone width a `Sheet` behind a trigger — which is what real sites do anyway.",
+    "Tabs — switches which panel of the SAME page is shown. A nav goes somewhere else.",
+    "Breadcrumb — where you are in the hierarchy, not where you can go."
+  ],
+  "rules": [
+    2,
+    6,
+    23,
+    44,
+    45
+  ],
+  "storyPath": "navigation/MegaMenu.stories.tsx",
+  "tagline": "A primary site navigation whose top-level items disclose a full-width panel of grouped links (Ant Design `Menu mode=\"horizontal\"` whose SubMenu renders through popupRender). Implements the WAI-ARIA APG Disclosure Navigation pattern — NOT menu/menubar roles — with a roving tabindex across the bar, hover intent, Escape-to-trigger, and a narrow layout where the same disclosure lays out in flow.",
+  "usage": [
+    "DO reach for this INSTEAD of DropdownMenu for a site nav. DropdownMenu is react-aria-components Menu, i.e. role=\"menu\" / role=\"menuitem\": a row of them announces a desktop application menubar for what is actually a set of links, and Tab then leaves the whole widget instead of walking the links. That is the classic megamenu a11y defect and it is why this component exists.",
+    "DO give the bar its landmark name through `label` when a page has more than one nav (a primary bar plus a footer nav): two unnamed <nav> landmarks are indistinguishable in a landmark list.",
+    "DO drive `value` from your router. A change to it CLOSES the open panel, which is the close-on-route-change half of the contract and needs no router dependency here.",
+    "DO use `linkComponent` for a client-side router; the library composes the row and your component renders only the <a>.",
+    "DON'T nest a second level inside a panel. A panel is exactly one level deep by construction (`groups[].links[]`) — antd's arbitrary SubMenu nesting is `Sidebar`/`NavList` territory, not a bar.",
+    "DON'T set `triggerAction=\"hover\"` and then also hide the trigger's own affordance: hover still opens on click here precisely so a touch user is not stranded, and WCAG 1.4.13 applies to anything hover-revealed.",
+    "DON'T add a `theme=\"dark\"` prop expecting antd's. This library inverts by role scoping ([data-tenant] / per-region), and every surface here is a --mega-menu-* token (rules #44/#45).",
+    "KNOW that the open panel is `position: fixed` and its geometry is MEASURED from the bar, not inherited. That is not a preference: an absolutely-positioned panel is clipped away by both surfaces a megamenu lives in (`Topbar`'s slots are `overflow: clip`, `Card` is `overflow: hidden` — measured at 331px of 348px gone, and not hit-testable). The consequence for you is that an open panel OVERLAYS what is beneath it, so do not leave one open by default in the middle of a scrolling page."
+  ],
+  "useCases": [
+    "A marketing or product site's primary navigation, where Products / Solutions / Resources each open a panel of grouped links rather than a narrow list.",
+    "An admin console with several product areas: a top bar where a section opens a panel of its screens, grouped with headings and one-line descriptions.",
+    "A documentation site's top bar, where the current page is marked with aria-current in both the bar and the open panel."
+  ]
+}