stylegallery 0.1.0

package/patterns/split-sidebar/supporting-pane.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: supporting-pane
+title: supporting-pane
+category: Split / Sidebar
+description: Keep supplemental information beside a primary task.
+primary_spatial_problem: Keep supplemental information beside a primary task.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: reflow
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://m3.material.io/foundations/adaptive-design/canonical-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# supporting-pane
+
+## When To Use
+
+Use this pattern when you need to keep supplemental information beside a primary task.
+
+## HTML
+
+```html
+<section class="supporting_pane" aria-label="Invoice editor">
+    <main class="supporting_pane_main">Invoice line-item editor</main>
+    <aside class="supporting_pane_summary">Payment summary</aside>
+</section>
+```
+
+## CSS
+
+```css
+.supporting_pane {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
+}
+
+.supporting_pane_main {
+    min-inline-size: 0;
+}
+
+.supporting_pane_summary {
+    min-inline-size: 0;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns`, `min-inline-size` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns`, `min-inline-size` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- reflow responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Medium: reflow can change spatial adjacency, so labels, controls, and related content must remain adjacent in DOM order.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `supporting_pane` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Split / Sidebar patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/split-sidebar/switcher.md

@@ -0,0 +1,93 @@
+---
+type: Layout Pattern
+name: switcher
+title: switcher
+category: Split / Sidebar
+description: Switch equal regions from row to stack without a viewport breakpoint.
+primary_spatial_problem: Switch equal regions from row to stack without a viewport breakpoint.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: wrap
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://every-layout.dev/layouts/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# switcher
+
+## When To Use
+
+Use this pattern when you need to switch equal regions from row to stack without a viewport breakpoint.
+
+## HTML
+
+```html
+<section class="switcher" aria-label="Pricing tiers">
+    <article class="switcher_item">Starter plan</article>
+    <article class="switcher_item">Team plan</article>
+    <article class="switcher_item">Enterprise plan</article>
+</section>
+```
+
+## CSS
+
+```css
+.switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.switcher_item {
+    flex-basis: calc((40rem - 100%) * 999);
+    flex-grow: 1;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- wrap responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `switcher` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Split / Sidebar patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/stacking/feed.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: feed
+title: feed
+category: Stacking
+description: Stack repeated content items with stable rhythm.
+primary_spatial_problem: Stack repeated content items with stable rhythm.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://m3.material.io/foundations/adaptive-design/canonical-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# feed
+
+## When To Use
+
+Use this pattern when you need to stack repeated content items with stable rhythm.
+
+## HTML
+
+```html
+<section class="feed" aria-label="Activity feed">
+    <article>Build completed</article>
+    <article>Review requested</article>
+    <article>Deployment approved</article>
+</section>
+```
+
+## CSS
+
+```css
+.feed {
+    display: grid;
+    gap: 1rem;
+    grid-auto-rows: minmax(min-content, auto);
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-auto-rows` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-auto-rows` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `feed` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Stacking patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/stacking/index.md

@@ -0,0 +1,8 @@
+# Stacking
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+- [stack](stack.md) - Create consistent vertical rhythm between direct children.
+- [line-up](line-up.md) - Keep card footer actions aligned at the bottom.
+- [feed](feed.md) - Stack repeated content items with stable rhythm.
+- [step-nav](step-nav.md) - Present sequential steps with consistent vertical rhythm.

package/patterns/stacking/line-up.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: line-up
+title: line-up
+category: Stacking
+description: Keep card footer actions aligned at the bottom.
+primary_spatial_problem: Keep card footer actions aligned at the bottom.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://web.dev/articles/one-line-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# line-up
+
+## When To Use
+
+Use this pattern when you need to keep card footer actions aligned at the bottom.
+
+## HTML
+
+```html
+<article class="line_up" aria-labelledby="line-up-title">
+    <section class="line_up_body"><h2 id="line-up-title">Implementation proposal</h2><p>Variable-length summary copy sits above the aligned action row.</p></section>
+    <footer class="line_up_footer"><button>Review proposal</button></footer>
+</article>
+```
+
+## CSS
+
+```css
+.line_up {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.line_up_body {
+    min-block-size: 0;
+}
+
+.line_up_footer {
+    margin-block-start: auto;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-direction`, `gap`, `min-block-size`, `margin-block-start` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-direction`, `gap`, `min-block-size`, `margin-block-start` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `line_up` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Stacking patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/stacking/stack.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: stack
+title: stack
+category: Stacking
+description: Create consistent vertical rhythm between direct children.
+primary_spatial_problem: Create consistent vertical rhythm between direct children.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://every-layout.dev/layouts/stack/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# stack
+
+## When To Use
+
+Use this pattern when you need to create consistent vertical rhythm between direct children.
+
+## HTML
+
+```html
+<section class="stack" aria-labelledby="stack-heading">
+    <h2 id="stack-heading">Release checklist</h2>
+    <p>Review copy, verify forms, and publish the notes in order.</p>
+    <button>Start review</button>
+</section>
+```
+
+## CSS
+
+```css
+.stack {
+    display: grid;
+    gap: 1rem;
+}
+```
+
+## Core Properties
+
+- `display`, `gap` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `stack` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Stacking patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/stacking/step-nav.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: step-nav
+title: step-nav
+category: Stacking
+description: Present sequential steps with consistent vertical rhythm.
+primary_spatial_problem: Present sequential steps with consistent vertical rhythm.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://design-system.service.gov.uk/styles/layout/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# step-nav
+
+## When To Use
+
+Use this pattern when you need to present sequential steps with consistent vertical rhythm.
+
+## HTML
+
+```html
+<nav class="step_nav" aria-label="Checkout steps">
+    <a href="#">Shipping address</a>
+    <a href="#">Payment method</a>
+    <a href="#">Order review</a>
+</nav>
+```
+
+## CSS
+
+```css
+.step_nav {
+    display: grid;
+    gap: 0.75rem;
+    margin-block: 1rem;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `margin-block` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `margin-block` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `step_nav` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Stacking patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/viewport-shell/cover.md

@@ -0,0 +1,90 @@
+---
+type: Layout Pattern
+name: cover
+title: cover
+category: Viewport / Shell
+description: Keep a central region balanced between optional header and footer.
+primary_spatial_problem: Keep a central region balanced between optional header and footer.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://every-layout.dev/layouts/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# cover
+
+## When To Use
+
+Use this pattern when you need to keep a central region balanced between optional header and footer.
+
+## HTML
+
+```html
+<section class="cover" aria-labelledby="cover-title">
+    <header><p>Step 2 of 4</p></header>
+    <main><h1 id="cover-title">Choose a billing profile</h1></main>
+    <footer><button>Continue</button></footer>
+</section>
+```
+
+## CSS
+
+```css
+.cover {
+    display: grid;
+    gap: 1rem;
+    grid-template-rows: auto 1fr auto;
+    min-block-size: 100dvh;
+    padding: 1rem;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-rows`, `min-block-size`, `padding` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-rows`, `min-block-size`, `padding` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `cover` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Viewport / Shell patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.