@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Layout/Layout.spec.md

@@ -1,243 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:Layout
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-30
-owners: [cixzhang]
-review_triggers: [public-api, behavior, layout, theming, accessibility]
-verified_by:
-  [
-    packages/core/src/Layout/Layout.test.tsx,
-    packages/core/src/Layout/LayoutSlots.test.tsx,
-    packages/core/src/Layout/__tests__/childrenAsContent.test.tsx,
-    packages/core/src/Layout/__tests__/contentWidth.test.tsx,
-    packages/core/src/Layout/__tests__/nestedPadding.test.tsx,
-    packages/core/src/theme/themingTargets.test.ts,
-    .github/visual-baseline/manifest.json,
-    scripts/check-knowledge.mjs,
-  ]
-modules: []
-families: [family:layout-regions]
-design_specs: []
-architecture:
-  [
-    architecture:container-padding,
-    architecture:component-theming-surface,
-    architecture:public-component-api,
-  ]
-contributing: []
-system_specs: [spec:AST-038]
----
-
-# Layout component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | Five ReactNode slots (`header`, `start`, `content`, `end`, `footer`), `children` as content shorthand, `height`, `padding`, `contentWidth`, `defaultHasDividers`. |
-| Behavior                | Layout arranges caller content in five named slots, fills or grows with its container, and sets the inset and content width its region components use.            |
-| End-user impact         | People see headers, side panels, content, and footers in stable positions that mirror in right-to-left, with content aligned to one readable width.               |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                                      |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. One implementation gap is listed under Current-state impact.                           |
-| Review checks           | Reject a target added to arbitrary slot content, an inherited parent Layout padding, a content scrollbar moved off the open edge, or overridable `data-height`.   |
-| Governing rules         | `family:layout-regions` FR1–FR12; `architecture:container-padding`; `architecture:component-theming-surface`; `architecture:public-component-api` INV5–INV8.      |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-Layout is a general layout primitive that arranges five optional named slots —
-header, logical-start panel, content, logical-end panel, and footer — within a
-page or a bounded container. AppShell owns the page shell.
-
-Consumer syntax and examples belong in `Layout.doc.mjs`.
-
-## Compatibility and migration
-
-- Released default preserved: `yes` — `height="fill"`, no padding override,
-  no content width, divider defaults inherited.
-- Compatibility class: records shipped behavior; no public prop, default, DOM,
-  target, or styling output changes.
-- Controlled/uncontrolled behavior: not applicable
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Current-state impact
-
-- **A `false` slot still counts as present (FR1).** Slot presence is
-  `!= null`, so `header={isOpen && <LayoutHeader />}` renders no header when
-  `isOpen` is false, yet the content and panels keep the inner inset on their
-  block-start edge instead of the outer inset `family:layout-regions` FR3 gives
-  an edge on the Layout boundary. With `contentWidth`, a `false` start or end
-  slot (the `showPanel && <LayoutPanel />` idiom) switches Layout to its
-  one- or two-panel composition, so LayoutContent stops at the content-width frame on
-  that side, and with a `false` end slot its scrollbar does too, instead of
-  reaching the Layout edge (FR6).
-
-## Ownership boundary
-
-**Owns**
-
-- The Layout container, its `layout` target, and the five slot positions.
-- Height, the Layout-edge inset, content width, and the header and footer
-  divider default that its region components read.
-- The aggregate consumer document and theming map for the `layout`,
-  `layout-header`, `layout-panel`, `layout-content`, and `layout-footer`
-  targets.
-
-**Does not own / non-goals**
-
-- The page shell, app-wide navigation, responsive shell substitution, skip
-  link, or main landmark — owned by AppShell.
-- Product meaning or content in any slot — owned by the caller.
-- Region semantics, scrolling, insets, and dividers — owned by
-  `component:LayoutHeader`, `component:LayoutContent`,
-  `component:LayoutFooter`, and `component:LayoutPanel`.
-- Resize interaction — owned by useResizable and ResizeHandle.
-
-## Public concepts
-
-| Concept           | Closed values or states                       | Meaning                                                                 | Availability by variant/orientation/state | Default             | Owner              | Stability | Invalid-value behavior              |
-| ----------------- | --------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------- | ------------------- | ------------------ | --------- | ----------------------------------- |
-| Slot topology     | `header`, `start`, `content`, `end`, `footer` | Positions caller content; an omitted slot renders nothing.              | Always                                    | all omitted         | `component:Layout` | Stable    | —                                   |
-| Content shorthand | `children`                                    | Fills the content slot when `content` is omitted.                       | Always                                    | omitted             | `component:Layout` | Stable    | `content` wins when both are given. |
-| Height            | `fill`, `auto`                                | Fill the container, or grow with content.                               | Always                                    | `fill`              | `component:Layout` | Stable    | Closed union; rejected by types.    |
-| Layout-edge inset | spacing step; `0`                             | The inset regions apply at the Layout's outer edges; `0` is full bleed. | Always                                    | inherited or step 4 | `component:Layout` | Stable    | Closed union; rejected by types.    |
-| Content width     | number (px); CSS length string                | Width of the aligned content in every slot.                             | Always                                    | none                | `component:Layout` | Stable    | —                                   |
-| Divider default   | `true`, `false`, unset                        | Divider default for LayoutHeader and LayoutFooter children.             | Always                                    | inherited           | `component:Layout` | Stable    | —                                   |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Basis                                                                                          |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| FR1 | Layout renders an outer `div` carrying the `layout` target, which reflects `height`, around an inner vertical stack: the header slot, a middle row holding the start slot, the content slot, and the end slot, then the footer slot. An omitted header, start, end, or footer slot renders nothing; a slot that renders nothing is absent, so the neighbouring regions take the outer inset on that side (`family:layout-regions` FR3); the middle row and the content slot's fill wrapper always render. `content` fills the content slot, and `children` fill it when `content` is omitted. Slot position adds no element, region component, or target to the caller's content. Implementation gap: a slot counts as present unless it is `null` or `undefined`, so a `false` slot renders nothing yet leaves its neighbours on the inner inset, and with `contentWidth` a `false` start or end slot switches to the one- or two-panel composition of FR6 (Current-state impact). | Current source, docs, and tests; `family:layout-regions` FR1, FR3                              |
-| FR2 | The outer `div` escapes the parent's published container padding on all four edges, and the inner stack publishes zero container padding before its regions publish their own. `fill` (the default) makes the Layout fill its container's height, including the escaped block padding; `auto` lets it grow with content, at least as tall as its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Current source and tests; `architecture:container-padding`                                     |
-| FR3 | `padding` sets the inset that this Layout's own region components apply at its outer edges; `0` is full bleed. A nested Layout does not inherit a parent Layout's padding: without its own `padding`, its regions use the nearest padding container's padding (Card, Section, Dialog, Drawer, or BottomSheet), or spacing step 4. How each region applies and publishes that inset is owned by its record (`component:LayoutHeader`, `component:LayoutContent`, `component:LayoutFooter`, `component:LayoutPanel`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests; `family:layout-regions` FR4; `architecture:container-padding` |
-| FR4 | When the caller supplies LayoutHeader, LayoutContent, LayoutFooter, or LayoutPanel, that component carries its own `layout-header`, `layout-content`, `layout-footer`, or `layout-panel` target. LayoutPanel at logical start, end, or both is one Panel part and one `layout-panel` target.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Current source, docs, and tests; `family:layout-regions` FR11                                  |
-| FR5 | `defaultHasDividers` sets the divider default for LayoutHeader and LayoutFooter descendants; an explicit `hasDivider` wins, and when unset a nested Layout keeps its parent's default within the same layer; the default stops at a Dialog, Drawer, BottomSheet, or other layer boundary (`spec:AST-038` FR7). LayoutPanel does not read the default (`component:LayoutPanel` FR4).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests                                                                |
-| FR6 | With `contentWidth` and no panels, LayoutContent spans the middle area and aligns its direct children to the content width, so its scrollbar stays at the outer edge. With exactly one panel, the panel stays aligned while LayoutContent extends through the opposite open side; start and end mirror. With both panels, or a percentage (including percentage-bearing CSS math), intrinsic, or bare-variable width, the whole middle composition stays constrained; a length-valued variable uses `calc(var(...))`. Numbers are pixels. A nested Layout without `contentWidth` does not inherit its parent's.                                                                                                                                                                                                                                                                                                                                                                     | Current source, docs, and tests; `family:layout-regions` FR12                                  |
-| FR7 | `ref`, DOM, data, ARIA, and event props, `xstyle`, `className`, and `style` reach or compose on the outer `div`; the reflected `data-height` replaces a caller's value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Current source and tests; `architecture:public-component-api` INV5–INV8                        |
-
-### Allowed variation
-
-- **AV1 — Slot presence and content.** Any slot may be present or absent and
-  hold any ReactNode; content does not become Layout anatomy by position.
-- **AV2 — Region composition.** Callers choose which region components to
-  supply; Layout does not insert them.
-
-### Representative states
-
-| State                  | Required invariant                                                                             | Allowed variation              |
-| ---------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------ |
-| Arbitrary content only | `layout` target on the root; slot content gains no target.                                     | Content and height.            |
-| Composed regions       | Each supplied region carries its own target.                                                   | Which regions are supplied.    |
-| One panel              | The panel aligns to the content width; content extends to the open side.                       | Start or end; mirrored in RTL. |
-| Two panels             | The whole middle composition is constrained to the content width.                              | Panel widths.                  |
-| Nested Layout          | No inherited Layout padding or content width; divider default inherited within the same layer. | Its own explicit values.       |
-
-### Transformation and precedence order
-
-- **ORD1 — Content slot.** `content` → `children`.
-- **ORD2 — Inset.** This Layout's `padding` → the enclosing Card, Section,
-  Dialog, Drawer, or BottomSheet padding → spacing step 4; a parent Layout's padding never applies.
-- **ORD3 — Divider default.** A region's `hasDivider` → the nearest
-  `defaultHasDividers` in the same layer → no divider.
-
-### Performance and resources
-
-- **PR1 — No external lifecycle.** Layout adds no listener, observer, timer,
-  or measurement; content-width alignment is CSS-only.
-
-## Accessibility contract
-
-- **AR1 — No inferred landmarks.** Layout adds no role or name; landmark
-  semantics come only from a region component's caller-supplied `role` and
-  `label` (`family:layout-regions` FR8).
-- **AR2 — Logical order.** Slots render in DOM order header, start, content,
-  end, footer, and start and end follow writing direction
-  (`family:layout-regions` FR2).
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                     | Representation authority     | Hierarchy role | Component contract |
-| ---------------- | ------------------------------------------------------ | ---------------------------- | -------------- | ------------------ |
-| Layout container | Places caller content in five named slots.             | Current source, docs, family | Supporting     | FR1, FR2           |
-| Header           | An optional caller-supplied LayoutHeader.              | Current source, docs, family | Supporting     | FR4, FR5           |
-| Panel            | A caller-supplied LayoutPanel at logical start or end. | Current source, docs, family | Supporting     | FR4, FR5           |
-| Content area     | An optional caller-supplied LayoutContent.             | Current source, docs, family | Prominent      | FR4, FR6           |
-| Footer           | An optional caller-supplied LayoutFooter.              | Current source, docs, family | Supporting     | FR4, FR5           |
-
-Slot position is topology, not anatomy.
-
-### Theming anatomy
-
-<!-- anatomy-theming:v1 -->
-
-```json
-{
-  "Layout container": {"target": "layout"},
-  "Header": {"target": "layout-header"},
-  "Panel": {"target": "layout-panel"},
-  "Content area": {"target": "layout-content"},
-  "Footer": {"target": "layout-footer"}
-}
-```
-
-Panel stands for every LayoutPanel, at logical start, end, or both.
-
-## Family and system relationships
-
-- `family:layout-regions` owns region topology, logical direction, boundaries,
-  scrolling, landmarks, and content-width scrollbar placement; FR1–FR6 and
-  AR1–AR2 apply it.
-- `architecture:container-padding` owns publication and escape of container
-  inset; FR2 and FR3 apply it.
-- `component:LayoutHeader`, `component:LayoutContent`, `component:LayoutFooter`,
-  and `component:LayoutPanel` own each region's behavior, including the
-  publication gaps LayoutContent and LayoutPanel record.
-- `architecture:component-theming-surface` owns anatomy and target mapping.
-- `architecture:public-component-api` owns caller-input routing; FR7 applies
-  it.
-
-## Verification map
-
-| Contract            | Verification                                                                                     | Representative states                                                                         | Mutation or failure expectation                                                                                                                                                                                                                                     | Audit section                |
-| ------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
-| FR1, ORD1, AV1      | `Layout.test.tsx` slot and content tests; `childrenAsContent.test.tsx`                           | Every slot; omitted slots; `content` and `children`                                           | A missing slot or `children` beating `content` fails. Gap: the omitted-slot test checks only the content text, so a wrapper rendered for an omitted slot passes, and no test asserts that slot content gains no target or element. No test covers a `false` slot.   | `audit:Layout/anatomy`       |
-| FR2                 | `Layout.test.tsx` height-reflection tests                                                        | `fill`, `auto`                                                                                | A lost `data-height` reflection fails. Gap: the escape margins, the zero publication, and the fill and auto heights have no automated check.                                                                                                                        | `audit:Layout/layout`        |
-| FR3, ORD2           | `nestedPadding.test.tsx`                                                                         | Inside AppShell, Card, Section; nested full-bleed and padded Layouts; explicit nested padding | A nested Layout inheriting a parent Layout's padding, or losing the enclosing Card or Section padding or the default inset, fails. Gap: `Layout.test.tsx` padding tests assert only that rendering succeeds.                                                        | `audit:Layout/layout`        |
-| FR4                 | `LayoutSlots.test.tsx` class tests; `themingTargets.test.ts`                                     | Each region component; start and end panels                                                   | A lost region target fails.                                                                                                                                                                                                                                         | `audit:Layout/theming`       |
-| FR5, ORD3           | `Layout.test.tsx` divider-default tests                                                          | Default true; unset; explicit `false`                                                         | A header or footer that ignores the default, or an explicit `hasDivider={false}` that loses, fails. Gap: nested inheritance has no check. No test covers the default stopping at a layer boundary.                                                                  | `audit:Layout/layout`        |
-| FR6                 | `contentWidth.test.tsx`; stable visual baseline `core-layout--content-width-scrollbar-placement` | No panels, start only, end only, both; zero padding; nested                                   | A no-panel content region that is not full width, a both-panel middle that is not constrained, or a nested Layout inheriting content width fails; a scrollbar moved off its content edge comes back changed for review. No test covers a `false` start or end slot. | `audit:Layout/layout`        |
-| FR7                 | `Layout.test.tsx` ref, className, style, passthrough, and owned-metadata tests                   | Ref; caller inputs; colliding `data-height`                                                   | A ref on another element, a dropped caller input, or a caller `data-height` that wins fails. Gap: no test covers event props or the `xstyle` merge order.                                                                                                           | `audit:Layout/api`           |
-| AR1, AR2, PR1       | Source review                                                                                    | Every slot                                                                                    | Gap: no automated check fails if Layout adds a role, reorders slots, or adds a listener or measurement.                                                                                                                                                             | `audit:Layout/accessibility` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                    | Consumer anatomy and current targets                                                          | Missing, extra, or stale mappings fail repository validation.                                                                                                                                                                                                       | `audit:Layout/theming`       |
-
-## Decision log
-
-### DEC-1 — AppShell owns the page shell; Layout owns five-slot arrangement
-
-**Reference:** `component:Layout/DEC-1`
-**Decider:** `cixzhang`, `2026-08-31`
-
-AppShell is the page shell. Layout is the general layout primitive for arranging
-the `header`, `start`, `content`, `end`, and `footer` slots within a page or
-bounded container. Container-padding participation by Section, Table, Toolbar,
-and Divider does not make those components Layout-owned anatomy.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables or examples, family region
-rules, container-padding mechanics, resize interaction, implementation steps,
-or system rules. It links to their owners.

package/src/Layout/LayoutContent.spec.md

@@ -1,205 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:LayoutContent
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-30
-owners: [cixzhang]
-review_triggers: [public-api, behavior, layout, theming, accessibility]
-verified_by:
-  [
-    packages/core/src/Layout/LayoutSlots.test.tsx,
-    packages/core/src/Layout/__tests__/contentWidth.test.tsx,
-    packages/core/src/Layout/__tests__/Layout.a11y.test.tsx,
-    packages/core/src/Layout/__tests__/Layout.a11y.chromium.spec.ts,
-    .github/visual-baseline/manifest.json,
-    scripts/check-knowledge.mjs,
-  ]
-modules: []
-families: [family:layout-regions]
-design_specs: []
-architecture:
-  [
-    architecture:container-padding,
-    architecture:component-theming-surface,
-    architecture:public-component-api,
-  ]
-contributing: []
-system_specs: [spec:AST-038]
----
-
-# LayoutContent component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                      |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | `children`, `isScrollable`, `padding`, `label`, `role`, root `BaseProps`, and a root `ref`.                                                   |
-| Behavior                | The main content region fills the Layout's middle area, scrolls by default, and insets its children from neighbouring regions and open edges. |
-| End-user impact         | People scroll the main content while headers, footers, and panels stay put, with the scrollbar at the content area's open edge.               |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                  |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. Three implementation gaps are listed under Current-state impact.   |
-| Review checks           | Reject an inner wrapper around the children, a scrollbar moved off the open edge, an inferred landmark, or a further publication mismatch.    |
-| Governing rules         | `family:layout-regions` FR1, FR3, FR4, FR7, FR8, FR12; `architecture:container-padding`; `architecture:public-component-api` INV5–INV8.       |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-LayoutContent is the main content region a caller places in a Layout's
-`content` slot. It owns the region's scrolling, inset, and caller-supplied
-landmark semantics; the caller owns its content.
-
-Consumer syntax and examples belong in `LayoutContent.doc.mjs`.
-
-## Compatibility and migration
-
-- Released default preserved: `yes` — scrollable, automatic inset, no
-  landmark role.
-- Compatibility class: records shipped behavior; no public prop, default, DOM,
-  target, or styling output changes.
-- Controlled/uncontrolled behavior: not applicable
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Current-state impact
-
-- **Open inline-end edge keeps the inner inset beside a start panel (FR2).**
-  With only a start panel, the open inline-end edge applies the inner inset
-  (spacing step 4 by default) instead of the Layout-edge inset, even when the
-  Layout sets `padding={0}`, so content stops short of an edge that should be
-  full bleed (`family:layout-regions` FR3).
-- **Published padding differs from applied padding (FR2).** With only an end
-  panel, the inline-end edge applies the inner inset beside the panel but
-  publishes the Layout-edge inset. Beside a header or footer without a
-  divider, the block edge applies zero but publishes the inner inset, so a
-  nested full-bleed child or Layout starts one inner inset away from the
-  content box. `architecture:container-padding` has a region publish its
-  applied padding.
-- **Nested content inherits an outer collapse (FR2).** When an outer Layout's
-  header or footer has no divider, its middle row zeroes the content's block
-  spacing on that side, and a Layout nested inside that row inherits the zero,
-  even inside a Dialog, Drawer, or BottomSheet opened from it, so its content
-  sits flush against its own header's or footer's divider, where
-  `family:layout-regions` FR6 collapses spacing only where the divider is
-  absent and `spec:AST-038` FR7 stops inherited layout state at a layer
-  boundary.
-
-## Ownership boundary
-
-**Owns**
-
-- The content root, which carries the `layout-content` target that
-  `component:Layout` maps, and is both the scroll container and the direct
-  parent of the children.
-- The region's inset, scrolling, and caller-supplied role and label.
-
-**Does not own / non-goals**
-
-- Slot placement, the Layout-edge inset, and content width — owned by
-  `component:Layout`.
-- Content and its meaning — owned by the caller.
-
-## Public concepts
-
-| Concept   | Closed values or states   | Meaning                                                                     | Availability by variant/orientation/state | Default   | Owner                     | Stability | Invalid-value behavior           |
-| --------- | ------------------------- | --------------------------------------------------------------------------- | ----------------------------------------- | --------- | ------------------------- | --------- | -------------------------------- |
-| Scrolling | `true`, `false`           | Scrolls overflow, or clips it.                                              | Always                                    | `true`    | `component:LayoutContent` | Stable    | —                                |
-| Inset     | spacing step; `0`; unset  | Uniform padding that replaces the automatic inset; `0` is full bleed.       | Always                                    | automatic | `component:LayoutContent` | Stable    | Closed union; rejected by types. |
-| Landmark  | caller `role` and `label` | Exposes the region as the role the caller names, with that accessible name. | Always                                    | none      | caller                    | Stable    | —                                |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Basis                                                                              |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| FR1 | LayoutContent renders one `div` carrying the `layout-content` target that fills the middle area's height and remaining width and holds the children directly. It scrolls overflow by default; `isScrollable={false}` clips it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Current source and tests; `family:layout-regions` FR7                              |
-| FR2 | Without `padding`, each edge that faces another region (a panel, header, or footer) has the inner inset, and each open edge has the Layout-edge inset, where the Layout-edge inset comes from the Layout's `padding`, else the nearest padding container, and the inner inset from the nearest padding container (Card, Section, Dialog, Drawer, or BottomSheet), each spacing step 4 otherwise; a block edge beside a header or footer without a divider collapses to zero. A `padding` step replaces all four edges, and `0` removes them. The region publishes container-padding values equal to the padding it applies, excluding the content-width alignment gutter of FR3, which is applied but not published. Implementation gaps: with only a start panel the open inline-end edge applies the inner inset; the published values differ from the applied padding with only an end panel and beside a header or footer without a divider; and a nested Layout inherits an outer header's or footer's collapse, so its content sits flush against its own divider (Current-state impact). | Current source; `family:layout-regions` FR4, FR6; `architecture:container-padding` |
-| FR3 | When the Layout sets a content width, the region keeps its own box and scrollbar where `component:Layout` FR6 places them and aligns its children to that width through its inline padding, never less than its inset. With `padding={0}` it stays full bleed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Current source and tests; `family:layout-regions` FR12                             |
-| FR4 | `role` and `label` set the root's `role` and `aria-label`; LayoutContent adds no role of its own.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Current source and tests; `family:layout-regions` FR8                              |
-| FR5 | `ref` reaches the root. Supported DOM, data, ARIA, and event props reach the root after the component's own attributes; `xstyle`, `className`, and `style` compose after component styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current source and tests; `architecture:public-component-api` INV5–INV8            |
-
-### Allowed variation
-
-- **AV1 — Content.** Any caller content may fill the region.
-- **AV2 — Landmark.** The caller chooses whether the region is a landmark and
-  which one.
-
-### Representative states
-
-| State                    | Required invariant                                    | Allowed variation |
-| ------------------------ | ----------------------------------------------------- | ----------------- |
-| Alone in a Layout        | Layout-edge inset on every edge; scrolls.             | Content.          |
-| Beside panels            | Inner inset toward each panel.                        | Panel count.      |
-| Content width, no panels | Full-width scrollport; children aligned to the width. | Width.            |
-| Full bleed               | No padding; zero published inset.                     | —                 |
-| Main landmark            | `role="main"` and the caller's name on the root.      | Name.             |
-
-### Transformation and precedence order
-
-- **ORD1 — Padding.** `padding` → automatic inset per edge (inner toward a
-  region, Layout-edge on an open side, zero beside a header or footer without
-  a divider); content-width alignment only increases inline padding.
-
-### Performance and resources
-
-- **PR1 — No external lifecycle.** LayoutContent reads which slots its Layout
-  fills and adds no listener, observer, timer, or measurement.
-
-## Accessibility contract
-
-- **AR1 — Explicit landmarks only.** The region is a landmark only when the
-  caller supplies `role`, named only by the caller's `label`
-  (`family:layout-regions` FR8).
-- **AR2 — Keyboard scrolling.** A scrolling region is a browser scroll
-  container, so its overflow scrolls with the keyboard once focus is inside
-  it or on it.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                     | Representation authority | Hierarchy role | Component contract |
-| ---------------- | -------------------------------------- | ------------------------ | -------------- | ------------------ |
-| Content area     | The main scrolling region of a Layout. | Current source and docs  | Prominent      | FR1–FR3            |
-
-Theming: the root carries the `layout-content` target, which `Layout.doc.mjs`
-declares and `component:Layout` maps. `LayoutContent.doc.mjs` declares no
-anatomy of its own, so no anatomy-theming block is declared here.
-
-## Family and system relationships
-
-- `family:layout-regions` owns region scrolling, padding replacement, divider
-  spacing, landmarks, and content-width scrollbar placement; FR1–FR4 and AR1
-  apply them.
-- `architecture:container-padding` owns inset publication; FR2 applies it and
-  records the gap.
-- `component:Layout` owns slot placement, the Layout-edge inset, content
-  width, and the `layout-content` target mapping.
-
-## Verification map
-
-| Contract  | Verification                                                                                                         | Representative states                    | Mutation or failure expectation                                                                                                                                                                                                  | Audit section                       |
-| --------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| FR1       | `LayoutSlots.test.tsx` class, scroll-owner, and Layout-slot tests                                                    | Alone; in a Layout                       | A lost `layout-content` class, a non-scrolling default, or an inner wrapper around the children fails. Gap: `isScrollable={false}` and the fill sizing have no check.                                                            | `audit:LayoutContent/layout`        |
-| FR2, ORD1 | `LayoutSlots.test.tsx` padding test                                                                                  | `padding={0}`; numeric padding           | Gap: the padding test checks only that the region renders, and no test covers the automatic per-edge inset, the start-panel inline-end inset, the collapse beside a header or footer without a divider, or the published values. | `audit:LayoutContent/layout`        |
-| FR3       | `contentWidth.test.tsx`; stable visual baseline `core-layout--content-width-scrollbar-placement`                     | No panels, one panel, both; zero padding | A content region that is not full width without panels, children not aligned, or a lost full bleed fails; a scrollbar moved off its edge comes back changed for review.                                                          | `audit:LayoutContent/layout`        |
-| FR4, AR1  | `LayoutSlots.test.tsx` landmark test; `Layout.a11y.test.tsx` and `Layout.a11y.chromium.spec.ts` `content-main` state | Caller `main` role and label             | A lost role or name fails, including at the accessibility tree. Gap: no test asserts that a region without `role` exposes none.                                                                                                  | `audit:LayoutContent/accessibility` |
-| FR5       | `LayoutSlots.test.tsx` ref and className/style tests                                                                 | Ref; caller class and style              | A ref on another element, or a dropped class or style, fails. Gap: no test covers DOM, data, or event props, or the `xstyle` merge order.                                                                                        | `audit:LayoutContent/api`           |
-| AR2, PR1  | Source review                                                                                                        | Scrolling region                         | Gap: no automated check covers keyboard scrolling or fails if LayoutContent adds a listener or measurement.                                                                                                                      | `audit:LayoutContent/behavior`      |
-
-## Decision log
-
-None recorded. The record describes shipped behavior.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables/examples, current audit
-results, implementation steps, Layout slot rules, or container-padding
-mechanics. It links to their owners.