stylegallery 0.1.0

package/patterns/split-sidebar/index.md

@@ -0,0 +1,12 @@
+# Split / Sidebar
+
+<!-- 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. -->
+
+- [sidebar](sidebar.md) - Let a narrow sidebar and wider content wrap when space is tight.
+- [switcher](switcher.md) - Switch equal regions from row to stack without a viewport breakpoint.
+- [media-object](media-object.md) - Align media and descriptive content as a stable pair.
+- [sticky-aside](sticky-aside.md) - Keep related aside content visible during long reads.
+- [split-screen](split-screen.md) - Split a viewport or region into two balanced panes.
+- [list-detail](list-detail.md) - Place an explorable list beside its detail region.
+- [supporting-pane](supporting-pane.md) - Keep supplemental information beside a primary task.
+- [main-with-rail](main-with-rail.md) - Keep primary content dominant with a narrow secondary rail.

package/patterns/split-sidebar/list-detail.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: list-detail
+title: list-detail
+category: Split / Sidebar
+description: Place an explorable list beside its detail region.
+primary_spatial_problem: Place an explorable list beside its detail region.
+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. -->
+
+# list-detail
+
+## When To Use
+
+Use this pattern when you need to place an explorable list beside its detail region.
+
+## HTML
+
+```html
+<section class="list_detail" aria-label="Customer records">
+    <nav class="list_detail_list"><a href="#">Acme Co.</a><a href="#">Northwind</a></nav>
+    <section class="list_detail_detail">Selected customer timeline</section>
+</section>
+```
+
+## CSS
+
+```css
+.list_detail {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+}
+
+.list_detail_list {
+    min-inline-size: 0;
+}
+
+.list_detail_detail {
+    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 `list_detail` 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/main-with-rail.md

@@ -0,0 +1,95 @@
+---
+type: Layout Pattern
+name: main-with-rail
+title: main-with-rail
+category: Split / Sidebar
+description: Keep primary content dominant with a narrow secondary rail.
+primary_spatial_problem: Keep primary content dominant with a narrow secondary rail.
+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://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. -->
+
+# main-with-rail
+
+## When To Use
+
+Use this pattern when you need to keep primary content dominant with a narrow secondary rail.
+
+## HTML
+
+```html
+<section class="main_with_rail" aria-label="Documentation page">
+    <main class="main_with_rail_main">API reference article</main>
+    <aside class="main_with_rail_side">On this page links</aside>
+</section>
+```
+
+## CSS
+
+```css
+.main_with_rail {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+}
+
+.main_with_rail_main {
+    min-inline-size: 0;
+}
+
+.main_with_rail_side {
+    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 `main_with_rail` 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/media-object.md

@@ -0,0 +1,102 @@
+---
+type: Layout Pattern
+name: media-object
+title: media-object
+category: Split / Sidebar
+description: Align media and descriptive content as a stable pair.
+primary_spatial_problem: Align media and descriptive content as a stable pair.
+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://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. -->
+
+# media-object
+
+## When To Use
+
+Use this pattern when you need to align media and descriptive content as a stable pair.
+
+## HTML
+
+```html
+<article class="media_object">
+    <figure class="media_object_media"><img alt="Speaker portrait"></figure>
+    <div class="media_object_content">
+        <h2>Design systems briefing</h2>
+        <p>Speaker details align beside the portrait without squeezing the text.</p>
+    </div>
+</article>
+```
+
+## CSS
+
+```css
+.media_object {
+    align-items: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.media_object_media {
+    flex-basis: 6rem;
+    flex-grow: 0;
+}
+
+.media_object_content {
+    flex-basis: min(20rem, 100%);
+    flex-grow: 1;
+    min-inline-size: 0;
+}
+```
+
+## Core Properties
+
+- `align-items`, `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow`, `min-inline-size` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `align-items`, `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow`, `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 `media_object` 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/sidebar.md

@@ -0,0 +1,101 @@
+---
+type: Layout Pattern
+name: sidebar
+title: sidebar
+category: Split / Sidebar
+description: Let a narrow sidebar and wider content wrap when space is tight.
+primary_spatial_problem: Let a narrow sidebar and wider content wrap when space is tight.
+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/sidebar/
+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. -->
+
+# sidebar
+
+## When To Use
+
+Use this pattern when you need to let a narrow sidebar and wider content wrap when space is tight.
+
+## HTML
+
+```html
+<section class="sidebar" aria-labelledby="sidebar-title">
+    <article class="sidebar_primary">
+        <h2 id="sidebar-title">Quarterly planning notes</h2>
+        <p>The main article keeps priority when the available inline space changes.</p>
+    </article>
+    <aside class="sidebar_secondary">Meeting agenda and owners</aside>
+</section>
+```
+
+## CSS
+
+```css
+.sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.sidebar_primary {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: 16rem;
+}
+
+.sidebar_secondary {
+    flex-basis: 18rem;
+    flex-grow: 1;
+}
+```
+
+## Core Properties
+
+- `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow`, `min-inline-size` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `flex-wrap`, `gap`, `flex-basis`, `flex-grow`, `min-inline-size` 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 `sidebar` 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/split-screen.md

@@ -0,0 +1,92 @@
+---
+type: Layout Pattern
+name: split-screen
+title: split-screen
+category: Split / Sidebar
+description: Split a viewport or region into two balanced panes.
+primary_spatial_problem: Split a viewport or region into two balanced panes.
+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. -->
+
+# split-screen
+
+## When To Use
+
+Use this pattern when you need to split a viewport or region into two balanced panes.
+
+## HTML
+
+```html
+<section class="split_screen" aria-label="Compare documents">
+    <section class="split_screen_pane">Draft contract</section>
+    <section class="split_screen_pane">Reviewed contract</section>
+</section>
+```
+
+## CSS
+
+```css
+.split_screen {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
+    min-block-size: 100dvh;
+}
+
+.split_screen_pane {
+    min-inline-size: 0;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns`, `min-block-size`, `min-inline-size` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns`, `min-block-size`, `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 `split_screen` 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/sticky-aside.md

@@ -0,0 +1,97 @@
+---
+type: Layout Pattern
+name: sticky-aside
+title: sticky-aside
+category: Split / Sidebar
+description: Keep related aside content visible during long reads.
+primary_spatial_problem: Keep related aside content visible during long reads.
+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://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position
+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. -->
+
+# sticky-aside
+
+## When To Use
+
+Use this pattern when you need to keep related aside content visible during long reads.
+
+## HTML
+
+```html
+<section class="sticky_aside" aria-label="Long article">
+    <main class="sticky_aside_main">Article sections continue down the page.</main>
+    <aside class="sticky_aside_side">Table of contents</aside>
+</section>
+```
+
+## CSS
+
+```css
+.sticky_aside {
+    align-items: start;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr) 16rem;
+}
+
+.sticky_aside_main {
+    min-inline-size: 0;
+}
+
+.sticky_aside_side {
+    inset-block-start: 1rem;
+    position: sticky;
+}
+```
+
+## Core Properties
+
+- `align-items`, `display`, `gap`, `grid-template-columns`, `min-inline-size`, `inset-block-start`, `position` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `align-items`, `display`, `gap`, `grid-template-columns`, `min-inline-size`, `inset-block-start`, `position` 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 `sticky_aside` 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.