stylegallery 0.1.0

package/patterns/in-line-grouping/split-nav.md

@@ -0,0 +1,97 @@
+---
+type: Layout Pattern
+name: split-nav
+title: split-nav
+category: In-line grouping
+description: Separate primary and secondary nav actions in one row.
+primary_spatial_problem: Separate primary and secondary nav actions in one row.
+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://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+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. -->
+
+# split-nav
+
+## When To Use
+
+Use this pattern when you need to separate primary and secondary nav actions in one row.
+
+## HTML
+
+```html
+<nav class="split_nav" aria-label="Documentation">
+    <section class="split_nav_primary"><a href="#">Guides</a><a href="#">API</a></section>
+    <section class="split_nav_secondary"><a href="#">Sign in</a></section>
+</nav>
+```
+
+## CSS
+
+```css
+.split_nav {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.split_nav_primary {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.split_nav_secondary {
+    margin-inline-start: auto;
+}
+```
+
+## Core Properties
+
+- `align-items`, `display`, `flex-wrap`, `gap`, `margin-inline-start` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `align-items`, `display`, `flex-wrap`, `gap`, `margin-inline-start` 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 `split_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: [In-line grouping 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/in-line-grouping/tab-strip.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: tab-strip
+title: tab-strip
+category: In-line grouping
+description: Keep peer tabs in one stable row that can wrap.
+primary_spatial_problem: Keep peer tabs in one stable row that can wrap.
+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://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. -->
+
+# tab-strip
+
+## When To Use
+
+Use this pattern when you need to keep peer tabs in one stable row that can wrap.
+
+## HTML
+
+```html
+<nav class="tab_strip" aria-label="Report views">
+    <a href="#">Summary</a>
+    <a href="#">Cohorts</a>
+    <a href="#">Exports</a>
+</nav>
+```
+
+## CSS
+
+```css
+.tab_strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap` 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 `tab_strip` 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: [In-line grouping 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/in-line-grouping/wrap-row.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: wrap-row
+title: wrap-row
+category: In-line grouping
+description: Wrap controls into rows with stable gaps.
+primary_spatial_problem: Wrap controls into rows with stable gaps.
+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://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+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. -->
+
+# wrap-row
+
+## When To Use
+
+Use this pattern when you need to wrap controls into rows with stable gaps.
+
+## HTML
+
+```html
+<form class="wrap_row" aria-label="Filter tickets">
+    <label>Status <select></select></label>
+    <label>Owner <select></select></label>
+    <button>Apply filters</button>
+</form>
+```
+
+## CSS
+
+```css
+.wrap_row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+```
+
+## Core Properties
+
+- `align-items`, `display`, `flex-wrap`, `gap` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `align-items`, `display`, `flex-wrap`, `gap` 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 `wrap_row` 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: [In-line grouping 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/index.md

@@ -0,0 +1,13 @@
+# Pattern Categories
+
+<!-- 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. -->
+
+- [Stacking](stacking/index.md)
+- [Containment](containment/index.md)
+- [Centering](centering/index.md)
+- [In-line grouping](in-line-grouping/index.md)
+- [Media / Fit](media-fit/index.md)
+- [Viewport / Shell](viewport-shell/index.md)
+- [Split / Sidebar](split-sidebar/index.md)
+- [Grid / Repetition](grid-repetition/index.md)
+- [Overlay / Exception](overlay-exception/index.md)

package/patterns/media-fit/frame.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: frame
+title: frame
+category: Media / Fit
+description: Preserve media aspect ratio in a responsive slot.
+primary_spatial_problem: Preserve media aspect ratio in a responsive slot.
+secondary_spatial_problems: none
+layout_axis: both
+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. -->
+
+# frame
+
+## When To Use
+
+Use this pattern when you need to preserve media aspect ratio in a responsive slot.
+
+## HTML
+
+```html
+<figure class="frame">
+    <img alt="Product walkthrough still" class="frame_media">
+</figure>
+```
+
+## CSS
+
+```css
+.frame {
+    aspect-ratio: 16 / 9;
+    display: grid;
+    inline-size: 100%;
+    overflow: clip;
+}
+
+.frame_media {
+    block-size: 100%;
+    inline-size: 100%;
+    min-block-size: 0;
+    min-inline-size: 0;
+    object-fit: cover;
+}
+```
+
+## Core Properties
+
+- `aspect-ratio`, `display`, `inline-size`, `overflow`, `block-size`, `min-block-size`, `min-inline-size`, `object-fit` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `aspect-ratio`, `display`, `inline-size`, `overflow`, `block-size`, `min-block-size`, `min-inline-size`, `object-fit` 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 `frame` 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: [Media / Fit 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/media-fit/icon-frame.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: icon-frame
+title: icon-frame
+category: Media / Fit
+description: Keep an icon aligned inside a fixed square slot.
+primary_spatial_problem: Keep an icon aligned inside a fixed square slot.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fixed
+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. -->
+
+# icon-frame
+
+## When To Use
+
+Use this pattern when you need to keep an icon aligned inside a fixed square slot.
+
+## HTML
+
+```html
+<span class="icon_frame" aria-label="Calendar">
+    <svg aria-hidden="true" viewBox="0 0 24 24"></svg>
+</span>
+```
+
+## CSS
+
+```css
+.icon_frame {
+    block-size: 2.5rem;
+    display: grid;
+    inline-size: 2.5rem;
+    place-items: center;
+}
+```
+
+## Core Properties
+
+- `block-size`, `display`, `inline-size`, `place-items` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `block-size`, `display`, `inline-size`, `place-items` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fixed 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 `icon_frame` 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: [Media / Fit 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/media-fit/index.md

@@ -0,0 +1,6 @@
+# Media / Fit
+
+<!-- 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. -->
+
+- [icon-frame](icon-frame.md) - Keep an icon aligned inside a fixed square slot.
+- [frame](frame.md) - Preserve media aspect ratio in a responsive slot.

package/patterns/overlay-exception/imposter.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: imposter
+title: imposter
+category: Overlay / Exception
+description: Place an overlay region over a parent without changing document order.
+primary_spatial_problem: Place an overlay region over a parent without changing document order.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fixed
+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. -->
+
+# imposter
+
+## When To Use
+
+Use this pattern when you need to place an overlay region over a parent without changing document order.
+
+## HTML
+
+```html
+<section class="imposter_anchor" aria-label="Draft editor">
+    <p>Draft body text stays in normal document flow.</p>
+    <section class="imposter" aria-label="Modal placement">
+        <dialog open>Unsaved changes confirmation</dialog>
+    </section>
+</section>
+```
+
+## CSS
+
+```css
+.imposter_anchor {
+    position: relative;
+}
+
+.imposter {
+    display: grid;
+    inset: 0;
+    place-items: center;
+    position: absolute;
+    z-index: 1;
+}
+```
+
+## Core Properties
+
+- `position`, `display`, `inset`, `place-items`, `z-index` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `position`, `display`, `inset`, `place-items`, `z-index` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fixed 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 `imposter` 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: [Overlay / Exception 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/overlay-exception/index.md

@@ -0,0 +1,6 @@
+# Overlay / Exception
+
+<!-- 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. -->
+
+- [imposter](imposter.md) - Place an overlay region over a parent without changing document order.
+- [overlay-stack](overlay-stack.md) - Stack several regions into the same grid cell.

package/patterns/overlay-exception/overlay-stack.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: overlay-stack
+title: overlay-stack
+category: Overlay / Exception
+description: Stack several regions into the same grid cell.
+primary_spatial_problem: Stack several regions into the same grid cell.
+secondary_spatial_problems: none
+layout_axis: both
+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. -->
+
+# overlay-stack
+
+## When To Use
+
+Use this pattern when you need to stack several regions into the same grid cell.
+
+## HTML
+
+```html
+<section class="overlay_stack" aria-label="Map with controls">
+    <figure class="overlay_stack_item">Transit map</figure>
+    <form class="overlay_stack_item">Route search controls</form>
+</section>
+```
+
+## CSS
+
+```css
+.overlay_stack {
+    display: grid;
+}
+
+.overlay_stack_item {
+    grid-area: 1 / 1;
+}
+```
+
+## Core Properties
+
+- `display`, `grid-area` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `grid-area` 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 `overlay_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: [Overlay / Exception 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.