stylegallery 0.1.0

package/patterns/grid-repetition/twelve-span-grid.md

@@ -0,0 +1,92 @@
+---
+type: Layout Pattern
+name: twelve-span-grid
+title: twelve-span-grid
+category: Grid / Repetition
+description: Provide a twelve-column placement scaffold.
+primary_spatial_problem: Provide a twelve-column placement scaffold.
+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. -->
+
+# twelve-span-grid
+
+## When To Use
+
+Use this pattern when you need to provide a twelve-column placement scaffold.
+
+## HTML
+
+```html
+<section class="twelve_span_grid" aria-label="Dashboard modules">
+    <article class="twelve_span_grid_item">Revenue module</article>
+    <article class="twelve_span_grid_item">Retention module</article>
+    <article class="twelve_span_grid_item">Pipeline module</article>
+</section>
+```
+
+## CSS
+
+```css
+.twelve_span_grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.twelve_span_grid_item {
+    grid-column: span 4;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns`, `grid-column` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns`, `grid-column` 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 `twelve_span_grid` 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: [Grid / Repetition 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/badge-list.md

@@ -0,0 +1,94 @@
+---
+type: Layout Pattern
+name: badge-list
+title: badge-list
+category: In-line grouping
+description: Align item labels with trailing counts.
+primary_spatial_problem: Align item labels with trailing counts.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+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. -->
+
+# badge-list
+
+## When To Use
+
+Use this pattern when you need to align item labels with trailing counts.
+
+## HTML
+
+```html
+<section class="badge_list" aria-label="Repository counts">
+    <div class="badge_list_item"><span>Open issues</span><span>12</span></div>
+    <div class="badge_list_item"><span>Pull requests</span><span>4</span></div>
+    <div class="badge_list_item"><span>Reviews waiting</span><span>7</span></div>
+</section>
+```
+
+## CSS
+
+```css
+.badge_list {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.badge_list_item {
+    align-items: center;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `align-items`, `justify-content` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `align-items`, `justify-content` 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 `badge_list` 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/breadcrumb.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: breadcrumb
+title: breadcrumb
+category: In-line grouping
+description: Lay out hierarchy links compactly with wrapping.
+primary_spatial_problem: Lay out hierarchy links compactly with wrapping.
+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. -->
+
+# breadcrumb
+
+## When To Use
+
+Use this pattern when you need to lay out hierarchy links compactly with wrapping.
+
+## HTML
+
+```html
+<nav class="breadcrumb" aria-label="Breadcrumb">
+    <a href="#">Workspace</a>
+    <a href="#">Projects</a>
+    <span>Layout gallery</span>
+</nav>
+```
+
+## CSS
+
+```css
+.breadcrumb {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+```
+
+## 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 `breadcrumb` 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/cluster.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: cluster
+title: cluster
+category: In-line grouping
+description: Keep related items together while allowing wrapping.
+primary_spatial_problem: Keep related items together while allowing wrapping.
+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. -->
+
+# cluster
+
+## When To Use
+
+Use this pattern when you need to keep related items together while allowing wrapping.
+
+## HTML
+
+```html
+<nav class="cluster" aria-label="Project actions">
+    <a href="#">Backlog</a>
+    <a href="#">Milestones</a>
+    <a href="#">Roadmap</a>
+</nav>
+```
+
+## CSS
+
+```css
+.cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: flex-start;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap`, `justify-content` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap`, `justify-content` 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 `cluster` 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/deconstructed-pancake.md

@@ -0,0 +1,92 @@
+---
+type: Layout Pattern
+name: deconstructed-pancake
+title: deconstructed-pancake
+category: In-line grouping
+description: Let equal cards stretch in a row and stack naturally when narrow.
+primary_spatial_problem: Let equal cards stretch in a row and stack naturally when narrow.
+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://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. -->
+
+# deconstructed-pancake
+
+## When To Use
+
+Use this pattern when you need to let equal cards stretch in a row and stack naturally when narrow.
+
+## HTML
+
+```html
+<section class="deconstructed_pancake" aria-label="Plan comparison">
+    <article class="deconstructed_pancake_item">Solo plan</article>
+    <article class="deconstructed_pancake_item">Studio plan</article>
+    <article class="deconstructed_pancake_item">Agency plan</article>
+</section>
+```
+
+## CSS
+
+```css
+.deconstructed_pancake {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.deconstructed_pancake_item {
+    flex: 1 1 16rem;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap`, `flex` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap`, `flex` 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 `deconstructed_pancake` 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/index.md

@@ -0,0 +1,13 @@
+# In-line grouping
+
+<!-- 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. -->
+
+- [cluster](cluster.md) - Keep related items together while allowing wrapping.
+- [split-nav](split-nav.md) - Separate primary and secondary nav actions in one row.
+- [deconstructed-pancake](deconstructed-pancake.md) - Let equal cards stretch in a row and stack naturally when narrow.
+- [breadcrumb](breadcrumb.md) - Lay out hierarchy links compactly with wrapping.
+- [pagination](pagination.md) - Lay out page controls as a bounded wrapping row.
+- [badge-list](badge-list.md) - Align item labels with trailing counts.
+- [tab-strip](tab-strip.md) - Keep peer tabs in one stable row that can wrap.
+- [reel](reel.md) - Let a row scroll horizontally instead of wrapping.
+- [wrap-row](wrap-row.md) - Wrap controls into rows with stable gaps.

package/patterns/in-line-grouping/pagination.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: pagination
+title: pagination
+category: In-line grouping
+description: Lay out page controls as a bounded wrapping row.
+primary_spatial_problem: Lay out page controls as a bounded wrapping 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. -->
+
+# pagination
+
+## When To Use
+
+Use this pattern when you need to lay out page controls as a bounded wrapping row.
+
+## HTML
+
+```html
+<nav class="pagination" aria-label="Search results pages">
+    <a href="#">Previous</a>
+    <a href="#">Page 4</a>
+    <a href="#">Next</a>
+</nav>
+```
+
+## CSS
+
+```css
+.pagination {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap`, `justify-content` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap`, `justify-content` 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 `pagination` 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/reel.md

@@ -0,0 +1,90 @@
+---
+type: Layout Pattern
+name: reel
+title: reel
+category: In-line grouping
+description: Let a row scroll horizontally instead of wrapping.
+primary_spatial_problem: Let a row scroll horizontally instead of wrapping.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: scroll
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: Pattern owns the named 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. -->
+
+# reel
+
+## When To Use
+
+Use this pattern when you need to let a row scroll horizontally instead of wrapping.
+
+## HTML
+
+```html
+<section class="reel" aria-label="Upcoming events">
+    <article>Design critique</article>
+    <article>Planning workshop</article>
+    <article>Launch review</article>
+</section>
+```
+
+## CSS
+
+```css
+.reel {
+    display: grid;
+    gap: 1rem;
+    grid-auto-columns: minmax(14rem, 35%);
+    grid-auto-flow: column;
+    overflow-x: auto;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-auto-columns`, `grid-auto-flow`, `overflow-x` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-auto-columns`, `grid-auto-flow`, `overflow-x` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- scroll 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
+
+Pattern owns the named 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: Pattern owns the named scroll container.
+- Cognitive risk: Medium: scroll ownership can hide context, controls, or return points if it is not named in the consuming layout.
+
+## 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 `reel` 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.