@cruglobal/cornerstone-components 0.1.0

package/dist/bundled/skills/cornerstone/references/utilities/layout.md

@@ -0,0 +1,1142 @@
+# Layout Utilities
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/utilities
+
+## Stack
+
+<style>
+  :is(.cs-flank, .cs-grid, .cs-stack) > [class*='cs-stack']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-stack'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+
+  /* The align-items demos need children of differing width for the difference to be visible.
+     These must come *after* the `div:empty` default above: `:empty` is a pseudo-class, so
+     `div:empty` and `div.demo-w-1` are both 0,2,1 and the tie is broken by source order. The inline
+     styles these replaced won automatically; a class has to be placed deliberately. */
+  [class*='cs-stack'] div.demo-w-1 {
+    min-inline-size: var(--cs-space-4xl);
+  }
+
+  [class*='cs-stack'] div.demo-w-2 {
+    min-inline-size: calc(var(--cs-space-4xl) * 1.5);
+  }
+
+  [class*='cs-stack'] div.demo-w-3 {
+    min-inline-size: calc(var(--cs-space-4xl) * 2);
+  }
+</style>
+
+A stack arranges its children in a vertical column with an equal gap between each item, so you don't have to add top or bottom margins to every element you put into it. It's the go-to layout for forms, paragraphs of text, card bodies, and anywhere you want consistent vertical rhythm.
+
+By default, items stretch to fill the stack's width. Pair `cs-stack` with a [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to control the spacing and a [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how children line up horizontally.
+
+```html
+<div class="cs-stack">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.
+
+```html
+<div class="cs-stack">
+  <cs-input label="Email">
+    <cs-icon slot="start" name="mail"></cs-icon>
+  </cs-input>
+  <cs-input label="Password" type="password">
+    <cs-icon slot="start" name="lock"></cs-icon>
+  </cs-input>
+  <cs-checkbox>Remember me on this device</cs-checkbox>
+  <cs-button appearance="filled">Log In</cs-button>
+</div>
+```
+
+```html
+<div class="cs-stack cs-gap-2xl">
+  <h3>Aragorn's Squash</h3>
+  <p>
+    Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight
+    rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa
+    sun's slaying most handling.
+  </p>
+  <p>
+    Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest
+    draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.
+  </p>
+</div>
+```
+
+## Align Items
+
+By default, items stretch to fill the inline size of the `cs-stack` container. Add any [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how items line up in the inline direction.
+
+```html
+<div class="cs-grid">
+  <div class="cs-stack cs-align-items-start">
+    <div class="demo-w-1"></div>
+    <div class="demo-w-3"></div>
+    <div class="demo-w-2"></div>
+  </div>
+  <div class="cs-stack cs-align-items-center">
+    <div class="demo-w-1"></div>
+    <div class="demo-w-3"></div>
+    <div class="demo-w-2"></div>
+  </div>
+  <div class="cs-stack cs-align-items-end">
+    <div class="demo-w-1"></div>
+    <div class="demo-w-3"></div>
+    <div class="demo-w-2"></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between stack items uses `--cs-space-m` from your theme. Add any [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing between items.
+
+```html
+<div class="cs-grid">
+  <div class="cs-stack cs-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-stack cs-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+---
+
+## Cluster
+
+<style>
+  /* The align-items demos need vertical room for start/end/center/stretch to differ — twice the
+     height of a demo box. */
+  .align-demo {
+    min-block-size: calc(var(--cs-space-4xl) * 2);
+  }
+
+  :is(.cs-flank, .cs-grid, .cs-stack) > [class*='cs-cluster']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-cluster'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+A cluster arranges its children inline with even spacing and wraps them onto a new line whenever the container runs out of room. Reach for it whenever you have a horizontal group of items of varying widths, like tag lists, button rows, inline metadata, or breadcrumb-style trails, and want the layout to stay tidy on every screen size without writing any media queries.
+
+By default, cluster children are centered vertically. Pair `cs-cluster` with a [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing and a [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how items align on the cross axis.
+
+```html
+<div class="cs-cluster">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<!-- We'll vary the div sizes to show the flow of cluster elements -->
+<style>
+  .cs-cluster div:empty:nth-child(3n) {
+    min-inline-size: 6rem;
+  }
+  .cs-cluster div:empty:nth-child(3n + 2) {
+    min-inline-size: 8rem;
+  }
+</style>
+```
+
+## Examples
+
+Clusters are great for inline lists and aligning items of varying sizes.
+
+```html
+<div class="cs-cluster">
+  <cs-icon name="web"></cs-icon>
+  <a href="#">Components</a>
+  <a href="#">Layout</a>
+  <a href="#">Patterns</a>
+  <a href="#">Theming</a>
+</div>
+```
+
+```html
+<div class="cs-stack">
+  <h3 class="cs-heading-2xl">Withywindle Pub and Eatery</h3>
+  <div class="cs-cluster cs-gap-xs">
+    <cs-rating value="4.6" read-only></cs-rating>
+    <strong>4.6</strong>
+    <span>(419 reviews)</span>
+  </div>
+  <div class="cs-cluster cs-gap-xs">
+    <div class="cs-cluster cs-gap-3xs">
+      <cs-icon name="attach_money" style="color: var(--cs-color-green-60);"></cs-icon>
+      <cs-icon name="attach_money" style="color: var(--cs-color-green-60);"></cs-icon>
+      <cs-icon name="attach_money" style="color: var(--cs-color-green-60);"></cs-icon>
+    </div>
+    <span class="cs-caption-s">&bull;</span>
+    <cs-tag size="s">Comfort Food</cs-tag>
+    <cs-tag size="s">Gastropub</cs-tag>
+    <cs-tag size="s">Cocktail Bar</cs-tag>
+    <cs-tag size="s">Vegetarian</cs-tag>
+    <cs-tag size="s">Gluten Free</cs-tag>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `cs-cluster` container. Add any [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how items line up in the block direction.
+
+```html
+<div class="cs-stack">
+  <div class="cs-cluster cs-align-items-start align-demo">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-cluster cs-align-items-end align-demo">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-cluster cs-align-items-center align-demo">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-cluster cs-align-items-stretch align-demo">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between cluster items uses `--cs-space-m` from your theme. Add any [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing between items.
+
+```html
+<div class="cs-stack">
+  <div class="cs-cluster cs-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-cluster cs-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+---
+
+## Grid
+
+<style>
+  :is(.cs-flank, .cs-grid, .cs-stack) > [class*='cs-grid']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-grid'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+A grid places its children in evenly-sized columns that shrink, grow, and reflow as the container resizes, without any breakpoints to manage. Drop any number of items into `cs-grid` and the utility figures out how many fit on each row based on the container's width and the minimum column size you've asked for. It's the quickest way to build card galleries, product listings, dashboards, and any content that should adapt from one column on a phone to several on a desktop.
+
+Set `--min-column-size` to change the threshold at which items start to wrap, pair `cs-grid` with a [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to adjust the spacing between cells, or add `cs-span-grid` to an individual item to make it span every column.
+
+```html
+<div class="cs-grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Grids work especially well for card lists and content designed for browsing.
+
+```html
+<div class="cs-grid">
+  <div class="cs-stack cs-gap-s">
+    <div class="cs-frame cs-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
+    </div>
+    <h3 class="cs-heading-m">Tulip</h3>
+    <em>Tulipa gesneriana</em>
+  </div>
+  <div class="cs-stack cs-gap-s">
+    <div class="cs-frame cs-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
+    </div>
+    <h3 class="cs-heading-m">Peony</h3>
+    <em>Paeonia officinalis</em>
+  </div>
+  <div class="cs-stack cs-gap-s">
+    <div class="cs-frame cs-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
+    </div>
+    <h3 class="cs-heading-m">Poppy</h3>
+    <em>Papaver rhoeas</em>
+  </div>
+  <div class="cs-stack cs-gap-s">
+    <div class="cs-frame cs-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
+    </div>
+    <h3 class="cs-heading-m">Sunflower</h3>
+    <em>Helianthus annuus</em>
+  </div>
+  <div class="cs-stack cs-gap-s">
+    <div class="cs-frame cs-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
+    </div>
+    <h3 class="cs-heading-m">Daisy</h3>
+    <em>Bellis perennis</em>
+  </div>
+</div>
+```
+
+```html
+<div class="cs-grid" style="--min-column-size: 30ch;">
+  <cs-card>
+    <div class="cs-flank">
+      <cs-avatar shape="rounded">
+        <cs-icon slot="icon" name="public"></cs-icon>
+      </cs-avatar>
+      <div class="cs-stack cs-gap-3xs">
+        <span class="cs-caption-xs">Population (Zion)</span>
+        <span class="cs-cluster cs-gap-xs">
+          <span class="cs-heading-2xl">251,999</span>
+          <cs-badge variant="danger">-3%&nbsp;<cs-icon name="trending_down"></cs-icon></cs-badge>
+        </span>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-flank">
+      <cs-avatar shape="rounded">
+        <cs-icon slot="icon" name="memory"></cs-icon>
+      </cs-avatar>
+      <div class="cs-stack cs-gap-3xs">
+        <span class="cs-caption-xs">Minds Freed</span>
+        <span class="cs-cluster cs-gap-xs">
+          <span class="cs-heading-2xl">0.36%</span>
+          <cs-badge variant="success">+0.03%&nbsp;<cs-icon name="trending_up"></cs-icon></cs-badge>
+        </span>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-flank">
+      <cs-avatar shape="rounded">
+        <cs-icon slot="icon" name="smart_toy"></cs-icon>
+      </cs-avatar>
+      <div class="cs-stack cs-gap-3xs">
+        <span class="cs-caption-xs">Agents Discovered</span>
+        <span class="cs-cluster cs-gap-xs">
+          <span class="cs-heading-2xl">3</span>
+          <cs-badge variant="neutral">±0%&nbsp;<cs-icon name="remove"></cs-icon></cs-badge>
+        </span>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-flank">
+      <cs-avatar shape="rounded">
+        <cs-icon slot="icon" name="raven"></cs-icon>
+      </cs-avatar>
+      <div class="cs-stack cs-gap-3xs">
+        <span class="cs-caption-xs">Sentinels Controlled</span>
+        <span class="cs-cluster cs-gap-xs">
+          <span class="cs-heading-2xl">208</span>
+          <cs-badge variant="success">+1%&nbsp;<cs-icon name="trending_up"></cs-icon></cs-badge>
+        </span>
+      </div>
+    </div>
+  </cs-card>
+</div>
+
+<style>
+  cs-badge > cs-icon {
+    color: color-mix(in oklab, currentColor, transparent 40%);
+  }
+</style>
+```
+
+## Size
+
+By default, grid items will wrap when the grid's column size is less than `20ch`, but you can set a custom minimum column size using the `--min-column-size` custom property.
+
+```html
+<div class="cs-stack">
+  <div class="cs-grid" style="--min-column-size: 200px;">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-grid" style="--min-column-size: 6rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between grid items uses `--cs-space-m` from your theme. Add any [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing between cells.
+
+```html
+<div class="cs-stack">
+  <div class="cs-grid cs-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-grid cs-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Span Grid
+
+You can add `cs-span-grid` to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.
+
+```html
+<div class="cs-grid">
+  <div></div>
+  <div></div>
+  <div class="cs-span-grid"></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+---
+
+## Split
+
+<style>
+  /* Vertical room for the align-items demos to differ — twice a demo box, and four times for the
+     taller flank example. */
+  .align-demo {
+    min-block-size: calc(var(--cs-space-4xl) * 2);
+  }
+
+  .tall-demo {
+    block-size: calc(var(--cs-space-4xl) * 4);
+  }
+
+  :is(.cs-flank, .cs-grid, .cs-stack) > [class*='cs-split']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-split'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+A split pushes its children to opposite ends of the container, filling the space between them. It's what you want whenever you need a logo on one side and navigation on the other, a section heading paired with an action button, or a list item whose label and value sit at opposite ends of the row. Any number of children work: the first one hugs the start, the last one hugs the end, and anything in between is evenly distributed.
+
+By default a split runs horizontally; append `:column` to stack items vertically instead. When the container gets too narrow for everything to fit on one row, the items wrap automatically.
+
+```html
+<div class="cs-split">
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Splits are especially helpful for navigation, header, and footer layouts.
+
+```html
+<div class="cs-flank">
+  <div class="cs-split:column">
+    <div class="cs-stack">
+      <cs-button appearance="plain">
+        <cs-icon name="home" label="Home"></cs-icon>
+      </cs-button>
+      <cs-button appearance="plain">
+        <cs-icon name="calendar_today" label="Calendar"></cs-icon>
+      </cs-button>
+      <cs-button appearance="plain">
+        <cs-icon name="mail" label="Mail"></cs-icon>
+      </cs-button>
+    </div>
+    <div class="cs-stack">
+      <cs-divider></cs-divider>
+      <cs-button appearance="plain">
+        <cs-icon name="logout" label="Sign Out"></cs-icon>
+      </cs-button>
+    </div>
+  </div>
+  <div class="placeholder"></div>
+</div>
+
+<style>
+  .placeholder {
+    min-block-size: 300px;
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: dashed var(--cs-border-width-s) var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+  }
+</style>
+```
+
+```html
+<div class="cs-stack">
+  <div class="cs-split">
+    <cs-icon name="web" label="Cornerstone" class="cs-font-size-xl"></cs-icon>
+    <div class="cs-cluster">
+      <cs-button appearance="filled">Sign Up</cs-button>
+      <cs-button appearance="outlined">Log In</cs-button>
+    </div>
+  </div>
+  <div class="placeholder"></div>
+</div>
+
+<style>
+  .placeholder {
+    min-block-size: 300px;
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: dashed var(--cs-border-width-s) var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+  }
+</style>
+```
+
+## Direction
+
+Items can be split across a row or a column by appending `:row` or `:column` to the `cs-split` class.
+
+```html
+<div class="cs-flank cs-align-items-start tall-demo">
+  <div class="cs-split:column">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-split:row">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered on the cross axis of the `cs-split` container. Add any [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how items line up: in the block direction for `cs-split:row` and in the inline direction for `cs-split:column`.
+
+```html
+<div class="cs-stack">
+  <div class="cs-split cs-align-items-start align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-split cs-align-items-end align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-split cs-align-items-center align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-split cs-align-items-stretch align-demo">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+A split's gap determines how close items can be before they wrap. By default, the gap between split items uses `--cs-space-m` from your theme. Add any [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing between items.
+
+```html
+<div class="cs-stack">
+  <div class="cs-split cs-gap-3xs">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-split cs-gap-3xl">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+---
+
+## Flank
+
+<style>
+  /* The align-items demos need vertical room for start/end/center/stretch to differ — twice the
+     height of a demo box. */
+  .align-demo {
+    min-block-size: calc(var(--cs-space-4xl) * 2);
+  }
+
+  :is(.cs-flank, .cs-grid, .cs-stack) > [class*='cs-flank']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-l);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-flank'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+A flank pairs two items side by side, where one item (the "flank") sits at its natural size while the other stretches to fill the remaining space. It's the right fit for any "small thing next to a larger thing" pattern: an avatar next to a name and bio, an icon beside a paragraph of text, an input followed by a submit button, or a sidebar alongside page content.
+
+By default the first child is the flank, but you can pick either end with `cs-flank:start` or `cs-flank:end`. When the main content gets too narrow, the two items wrap onto separate lines automatically.
+
+```html
+<div class="cs-flank">
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.
+
+```html
+<div class="cs-flank:end cs-gap-xs">
+  <cs-input>
+    <cs-icon slot="start" name="search"></cs-icon>
+  </cs-input>
+  <cs-button appearance="filled">Search</cs-button>
+</div>
+```
+
+```html
+<div class="cs-stack cs-gap-xl">
+  <div class="cs-flank cs-align-items-start">
+    <cs-avatar
+      image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20"
+      label="Gandalf's avatar"
+    ></cs-avatar>
+    <div class="cs-stack cs-gap-3xs">
+      <strong>Gandalf</strong>
+      <p class="cs-body-s">
+        All we have to decide is what to do with the time that is given to us. There are other forces at work in this
+        world, Frodo, besides the will of evil.
+      </p>
+    </div>
+  </div>
+  <div class="cs-flank cs-align-items-start">
+    <cs-avatar
+      image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20"
+      label="Boromir's avatar"
+    ></cs-avatar>
+    <div class="cs-stack cs-gap-3xs">
+      <strong>Boromir</strong>
+      <p class="cs-body-s">
+        One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
+        that does not sleep, and the Great Eye is ever watchful.
+      </p>
+    </div>
+  </div>
+  <div class="cs-flank cs-align-items-start">
+    <cs-avatar
+      image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20"
+      label="Galadriel's avatar"
+    ></cs-avatar>
+    <div class="cs-stack cs-gap-3xs">
+      <strong>Galadriel</strong>
+      <p class="cs-body-s">
+        The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
+        is lost, for none now live who remember it.
+      </p>
+    </div>
+  </div>
+</div>
+```
+
+## Position
+
+By default, the first item in the `cs-flank` container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending `:start` or `:end` to the `cs-flank` class.
+
+```html
+<div class="cs-stack">
+  <div class="cs-flank:start">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank:end">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Size
+
+The flank's inline size is determined by the size of its content, but you can set a target size using the `--flank-size` custom property. When the flank wraps, it stretches to fill the inline size of the container.
+
+```html
+<div class="cs-stack">
+  <div class="cs-flank" style="--flank-size: 200px;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank" style="--flank-size: 6rem;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the `--content-percentage` custom property.
+
+```html
+<div class="cs-stack">
+  <div class="cs-flank" style="--content-percentage: 70%;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank" style="--content-percentage: 85%;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `cs-flank` container. Add any [`cs-align-items-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/align-items) class to change how items line up in the block direction.
+
+```html
+<div class="cs-stack">
+  <div class="cs-flank cs-align-items-start align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank cs-align-items-end align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank cs-align-items-center align-demo">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank cs-align-items-stretch align-demo">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between flank items uses `--cs-space-m` from your theme. Add any [`cs-gap-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/gap) class to change the spacing between items.
+
+```html
+<div class="cs-stack">
+  <div class="cs-flank cs-gap-2xs">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="cs-flank cs-gap-2xl">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+---
+
+## Frame
+
+<style>
+  [class*='cs-frame']:has(div:empty) {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    padding: var(--cs-space-s);
+  }
+
+  [class*='cs-frame'] div:empty {
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+A frame is a box that keeps a fixed shape no matter how big or small it gets. Wrap an image, video, map, or placeholder in `cs-frame` and it stays a square by default, or a landscape, portrait, or any custom aspect ratio you specify, even as the surrounding layout resizes. That means no more letterboxing, no more collapsed boxes waiting on a slow image to load, and no more cards that end up different heights.
+
+Pair `cs-frame` with one of the [`cs-border-radius-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/rounding) classes to round the corners without cropping the content inside.
+
+```html
+<div class="cs-frame" style="max-inline-size: 20rem;">
+  <div></div>
+</div>
+```
+
+## Examples
+
+Frames are well-suited for images and image placeholders.
+
+```html
+<div class="cs-flank" style="--flank-size: 8rem;">
+  <div class="cs-frame cs-border-radius-m">
+    <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt="" />
+  </div>
+  <div class="cs-flank:end" style="--content-percentage: 70%">
+    <div class="cs-stack cs-gap-xs">
+      <h3>The Lord of the Rings: The Fellowship of the Ring</h3>
+      <span>J.R.R. Tolkien</span>
+    </div>
+    <cs-button id="options-menu" appearance="plain">
+      <cs-icon name="more_horiz" label="Options"></cs-icon>
+    </cs-button>
+    <cs-tooltip for="options-menu">Options</cs-tooltip>
+  </div>
+</div>
+```
+
+```html
+<div class="cs-grid" style="--min-column-size: 25ch;">
+  <cs-card>
+    <div class="cs-frame:landscape" slot="media">
+      <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
+    </div>
+    <div class="cs-stack cs-gap-xs">
+      <h3 class="cs-heading-m">White-socks</h3>
+      <span class="cs-body-s">Kitten &bull; Male</span>
+      <div class="cs-flank:end cs-gap-xs">
+        <cs-button size="s" appearance="filled" variant="brand">Adopt this pet</cs-button>
+        <cs-button id="fav-whitesocks" appearance="plain" size="s">
+          <cs-icon name="favorite" label="Favorite"></cs-icon>
+        </cs-button>
+        <cs-tooltip for="fav-whitesocks">Favorite</cs-tooltip>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-frame:landscape" slot="header">
+      <div class="cs-stack cs-align-items-center cs-gap-xs cs-caption-s">
+        <cs-icon name="pets" variant="fill"></cs-icon>
+        <span>Photo coming soon</span>
+      </div>
+    </div>
+    <div class="cs-stack cs-gap-xs">
+      <h3 class="cs-heading-m">Bumpkin</h3>
+      <span class="cs-body-s">Adult &bull; Male</span>
+      <div class="cs-flank:end cs-gap-xs">
+        <cs-button size="s" appearance="filled" variant="brand">Adopt this pet</cs-button>
+        <cs-button id="fav-bumpkin" appearance="plain" size="s">
+          <cs-icon name="favorite" label="Favorite"></cs-icon>
+        </cs-button>
+        <cs-tooltip for="fav-bumpkin">Favorite</cs-tooltip>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-frame:landscape" slot="media">
+      <img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
+    </div>
+    <div class="cs-stack cs-gap-xs">
+      <h3 class="cs-heading-m">Swish-tail</h3>
+      <span class="cs-body-s">Kitten &bull; Female</span>
+      <div class="cs-flank:end cs-gap-xs">
+        <cs-button size="s" appearance="filled" variant="brand">Adopt this pet</cs-button>
+        <cs-button id="fav-swishtail" appearance="plain" size="s">
+          <cs-icon name="favorite" label="Favorite"></cs-icon>
+        </cs-button>
+        <cs-tooltip for="fav-swishtail">Favorite</cs-tooltip>
+      </div>
+    </div>
+  </cs-card>
+  <cs-card>
+    <div class="cs-frame:landscape" slot="media">
+      <img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
+    </div>
+    <div class="cs-stack cs-gap-xs">
+      <h3 class="cs-heading-m">Sharp-ears</h3>
+      <span class="cs-body-s">Adult &bull; Female</span>
+      <div class="cs-flank:end cs-gap-xs">
+        <cs-button size="s" appearance="filled" variant="brand">Adopt this pet</cs-button>
+        <cs-button id="fav-sharpears" appearance="plain" size="s">
+          <cs-icon name="favorite" label="Favorite"></cs-icon>
+        </cs-button>
+        <cs-tooltip for="fav-sharpears">Favorite</cs-tooltip>
+      </div>
+    </div>
+  </cs-card>
+</div>
+```
+
+## Aspect Ratio
+
+Frames have a square aspect ratio by default. You can append `:square` (1 / 1), `:landscape` (16 / 9), or `:portrait` (9 / 16) to the `cs-frame` class in your markup to specify an aspect ratio for the frame. Alternatively, you can define the `aspect-ratio` property to set a custom proportion.
+
+```html
+<div class="cs-grid">
+  <div class="cs-frame:landscape">
+    <div></div>
+  </div>
+  <div class="cs-frame:portrait">
+    <div></div>
+  </div>
+  <div class="cs-frame" style="aspect-ratio: 4 / 3;">
+    <div></div>
+  </div>
+</div>
+```
+
+## Border Radius
+
+Frames have a square border radius by default. Add any [`cs-border-radius-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/rounding) class to round the corners, or define the `border-radius` property to set custom rounding.
+
+```html
+<div class="cs-grid">
+  <div class="cs-frame cs-border-radius-l">
+    <div></div>
+  </div>
+  <div class="cs-frame cs-border-radius-circle">
+    <div></div>
+  </div>
+  <div class="cs-frame" style="border-radius: 50% 0%;">
+    <div></div>
+  </div>
+</div>
+```
+
+---
+
+## Gap
+
+<style>
+  .preview-wrapper {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 3em;
+    min-inline-size: 5em;
+    padding: var(--cs-space-2xs);
+  }
+
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-s);
+    min-block-size: 1em;
+  }
+</style>
+
+These utility classes set the space between items inside a flex or grid container. Pair them with a layout utility like [cluster](https://cruglobal.github.io/cornerstone-design-system/utilities/cluster), [stack](https://cruglobal.github.io/cornerstone-design-system/utilities/stack), [grid](https://cruglobal.github.io/cornerstone-design-system/utilities/grid), or [split](https://cruglobal.github.io/cornerstone-design-system/utilities/split) to override that layout's default spacing, or apply `cs-gap-*` to any `display: flex` or `display: grid` element of your own to get the same tokens without writing custom CSS.
+
+Every class besides `cs-gap-0` corresponds to one of the [`--cs-space-*`](https://cruglobal.github.io/cornerstone-design-system/tokens/space) tokens in your theme, so the spacing you pick stays in sync with the rest of your design system.
+
+## Gap Classes
+
+| Class Name   | `gap` Value      | Preview                                                                                                                     |
+| ------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `cs-gap-0`   | `0`              | <div class="preview-wrapper cs-cluster cs-gap-0"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `cs-gap-3xs` | `--cs-space-3xs` | <div class="preview-wrapper cs-cluster cs-gap-3xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-gap-2xs` | `--cs-space-2xs` | <div class="preview-wrapper cs-cluster cs-gap-2xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-gap-xs`  | `--cs-space-xs`  | <div class="preview-wrapper cs-cluster cs-gap-xs"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `cs-gap-s`   | `--cs-space-s`   | <div class="preview-wrapper cs-cluster cs-gap-s"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `cs-gap-m`   | `--cs-space-m`   | <div class="preview-wrapper cs-cluster cs-gap-m"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `cs-gap-l`   | `--cs-space-l`   | <div class="preview-wrapper cs-cluster cs-gap-l"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `cs-gap-xl`  | `--cs-space-xl`  | <div class="preview-wrapper cs-cluster cs-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `cs-gap-2xl` | `--cs-space-2xl` | <div class="preview-wrapper cs-cluster cs-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-gap-3xl` | `--cs-space-3xl` | <div class="preview-wrapper cs-cluster cs-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-gap-4xl` | `--cs-space-4xl` | <div class="preview-wrapper cs-cluster cs-gap-4xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-gap-5xl` | `--cs-space-5xl` | <div class="preview-wrapper cs-cluster cs-gap-5xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+
+---
+
+## Align Items
+
+<style>
+  .preview-wrapper {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 3em;
+    min-inline-size: 5em;
+    padding: var(--cs-space-2xs);
+  }
+  
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-s);
+    min-block-size: 1em;
+  }
+</style>
+
+These utility classes control how flex and grid items line up across the container's [cross axis](#whats-the-cross-axis), which is the axis perpendicular to the one its children flow along. Reach for them any time the default alignment of a [cluster](https://cruglobal.github.io/cornerstone-design-system/utilities/cluster), [stack](https://cruglobal.github.io/cornerstone-design-system/utilities/stack), [flank](https://cruglobal.github.io/cornerstone-design-system/utilities/flank), [split](https://cruglobal.github.io/cornerstone-design-system/utilities/split), or [grid](https://cruglobal.github.io/cornerstone-design-system/utilities/grid) doesn't match what you're after: centering icons next to text, making all cards in a row share the same height, or pinning form labels to the top of each row.
+
+| Class Name                | `align-items` Value | Preview                                                                                                                                             |
+| ------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cs-align-items-baseline` | `baseline`          | <div class="cs-cluster cs-gap-2xs cs-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-align-items-center`   | `center`            | <div class="cs-cluster cs-gap-2xs cs-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `cs-align-items-end`      | `flex-end`          | <div class="cs-cluster cs-gap-2xs cs-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>      |
+| `cs-align-items-start`    | `flex-start`        | <div class="cs-cluster cs-gap-2xs cs-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>    |
+| `cs-align-items-stretch`  | `stretch`           | <div class="cs-cluster cs-gap-2xs cs-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>  |
+
+## Override with Align Self
+
+When you need a flex or grid item to deviate from the `align-items` property of its container, use the `cs-align-self-*` classes to set the item's `align-self` property and individually change its alignment on the container's [cross axis](#whats-the-cross-axis).
+
+| Class Name               | `align-self` Value | Preview                                                                                                                                            |
+| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cs-align-self-center`   | `center`           | <div class="cs-cluster cs-gap-2xs preview-wrapper"><div class="preview-block de-emphasize"></div><div class="preview-block cs-align-self-center"></div><div class="preview-block de-emphasize"></div></div>   |
+| `cs-align-self-baseline` | `baseline`         | <div class="cs-cluster cs-gap-2xs preview-wrapper"><div class="preview-block de-emphasize"></div><div class="preview-block cs-align-self-baseline"></div><div class="preview-block de-emphasize"></div></div> |
+| `cs-align-self-end`      | `flex-end`         | <div class="cs-cluster cs-gap-2xs preview-wrapper"><div class="preview-block de-emphasize"></div><div class="preview-block cs-align-self-end"></div><div class="preview-block de-emphasize"></div></div>      |
+| `cs-align-self-start`    | `flex-start`       | <div class="cs-cluster cs-gap-2xs preview-wrapper"><div class="preview-block de-emphasize"></div><div class="preview-block cs-align-self-start"></div><div class="preview-block de-emphasize"></div></div>    |
+| `cs-align-self-stretch`  | `stretch`          | <div class="cs-cluster cs-gap-2xs preview-wrapper"><div class="preview-block de-emphasize"></div><div class="preview-block cs-align-self-stretch"></div><div class="preview-block de-emphasize"></div></div>  |
+
+## What's the Cross Axis?
+
+The cross axis runs perpendicular to a container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.
+
+---
+
+## Justify Content
+
+<style>
+  .preview-wrapper {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 3em;
+    min-inline-size: 5em;
+    padding: var(--cs-space-2xs);
+  }
+
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-s);
+    min-block-size: 1em;
+  }
+</style>
+
+These utility classes control how space is distributed between items along a flex or grid container's [main axis](#whats-the-main-axis), which is the axis its children flow along. Reach for them when you want to push items to one end of a [cluster](https://cruglobal.github.io/cornerstone-design-system/utilities/cluster) or [stack](https://cruglobal.github.io/cornerstone-design-system/utilities/stack), center a row of buttons, or spread a set of navigation links evenly across a header.
+
+| Class Name                         | `justify-content` Value | Preview                                                                                                                                                      |
+| ---------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `cs-justify-content-start`         | `flex-start`            | <div class="cs-cluster cs-gap-2xs cs-justify-content-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>         |
+| `cs-justify-content-end`           | `flex-end`              | <div class="cs-cluster cs-gap-2xs cs-justify-content-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>           |
+| `cs-justify-content-center`        | `center`                | <div class="cs-cluster cs-gap-2xs cs-justify-content-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>        |
+| `cs-justify-content-space-around`  | `space-around`          | <div class="cs-cluster cs-gap-2xs cs-justify-content-space-around preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `cs-justify-content-space-between` | `space-between`         | <div class="cs-cluster cs-gap-2xs cs-justify-content-space-between preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `cs-justify-content-space-evenly`  | `space-evenly`          | <div class="cs-cluster cs-gap-2xs cs-justify-content-space-evenly preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+
+## What's the Main Axis?
+
+The main axis runs parallel to a container's content direction. For grid containers and flex containers where `flex-direction` is `row`, the main axis runs in the inline direction. For containers where `flex-direction` is `column`, the main axis runs in the block direction.
+
+---
+
+## Flex Wrap
+
+<style>
+  .preview-wrapper {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-m);
+    min-block-size: 3em;
+    max-inline-size: 6em;
+    padding: var(--cs-space-2xs);
+
+    counter-reset: item-counter;
+  }
+  
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--cs-color-neutral-fill-loud);
+    border-radius: var(--cs-border-radius-s);
+    min-block-size: 2em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      counter-increment: item-counter;
+      content: counter(item-counter);
+      color: var(--cs-color-neutral-on-loud);
+    }
+  }
+</style>
+
+These utility classes control whether the items inside a flex container wrap onto a new line when they run out of horizontal space, and in which direction. Use them to force a [cluster](https://cruglobal.github.io/cornerstone-design-system/utilities/cluster) or [split](https://cruglobal.github.io/cornerstone-design-system/utilities/split) to stay on a single line regardless of width, or to flip the wrap direction so new rows appear above the previous one instead of below.
+
+## Flex Wrap Classes
+
+| Class Name             | `flex-wrap` Value | Preview                                                                                                                                                                           |
+| ---------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cs-flex-wrap`         | `wrap`            | <div class="cs-cluster cs-gap-2xs cs-flex-wrap preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>         |
+| `cs-flex-nowrap`       | `nowrap`          | <div class="cs-cluster cs-gap-2xs cs-flex-nowrap preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div>       |
+| `cs-flex-wrap-reverse` | `wrap-reverse`    | <div class="cs-cluster cs-gap-2xs cs-flex-wrap-reverse preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div><div class="preview-block"></div></div> |
+
+---