@cruglobal/cornerstone-components 0.1.0

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

@@ -0,0 +1,273 @@
+# Prose
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/utilities/prose
+
+Wrap a block of content in `cs-prose` to apply a hierarchical, asymmetric typographic rhythm: generous space above headings, tighter space below, more breathing room around major non-text blocks, and a true section divider for `<hr>`. Spacing is em-based and scales with `cs-font-size-*` utilities.
+
+Reach for it on documentation, blog posts, articles, or marketing copy. Element styling (color, font, borders) still comes from [native styles](https://cruglobal.github.io/cornerstone-design-system/utilities/native/); `cs-prose` only adjusts rhythm, type scale, and the reading column.
+
+## Using Prose
+
+Wrap your long-form content in any block element with the `cs-prose` class.
+
+```html
+<article class="cs-prose">
+  <h2>Section heading</h2>
+  <p>Body content…</p>
+</article>
+```
+
+By default, content is constrained to a comfortable reading column of `65ch`. Override `--cs-prose-line-length` on the container — or set `max-inline-size` directly — to widen, narrow, or remove the constraint.
+
+## Examples
+
+### Headings & Paragraphs
+
+Each heading level gets generous space above and tight space below, so the eye reads it as part of the section it introduces — not the one it follows. When two headings sit back-to-back, the second tightens up so it reads as subordinate to the first.
+
+```html
+<article class="cs-prose">
+  <h1>A short history of paper</h1>
+  <h2>From bark to broadsheet</h2>
+  <p>
+    Long before pulp mills and printing presses, people wrote on whatever surface would hold a mark. Clay, papyrus, palm
+    leaves, bark, animal skins — each one pinned a culture's words to a place and a moment.
+  </p>
+
+  <h3>The rag era</h3>
+  <p>
+    Early European paper was beaten from cotton and linen rags. Quality was measured in fiber: the longer the strand,
+    the stronger the sheet, the longer it survived in a binding.
+  </p>
+
+  <h4>Watermarks and laid lines</h4>
+  <p>
+    Hold a rag sheet up to the light and you can still see the maker's mark and the fine lines pressed in by the mould —
+    small signatures of the hand that pulled it.
+  </p>
+</article>
+```
+
+### Lists
+
+Lists get a small breath between multi-line items. Quiet markers and bold `<dt>` terms come from [native styles](https://cruglobal.github.io/cornerstone-design-system/utilities/native/).
+
+```html
+<article class="cs-prose">
+  <ul>
+    <li>Loose-leaf greens, kept cool and dry.</li>
+    <li>
+      Black tea pressed into wheels and aged for decades, sometimes longer than the people drinking it have been alive.
+    </li>
+    <li>Fresh herbs, picked the morning of and steeped just past warm.</li>
+  </ul>
+
+  <ol>
+    <li>Warm the pot with a splash of hot water; pour it out.</li>
+    <li>Measure one teaspoon of leaves per cup, plus one for the pot.</li>
+    <li>Pour, cover, and wait — three minutes for black, two for green.</li>
+  </ol>
+
+  <dl>
+    <dt>Steep</dt>
+    <dd>To soak leaves in hot water until the flavor is fully released.</dd>
+    <dt>Decant</dt>
+    <dd>To pour brewed tea off its leaves to halt further extraction.</dd>
+    <dt>Cupping</dt>
+    <dd>A side-by-side tasting used to evaluate tea or coffee.</dd>
+  </dl>
+</article>
+```
+
+### Inline Elements
+
+Inline elements you'd reach for in long-form writing — `<kbd>`, `<mark>`, `<sub>`/`<sup>`, `<abbr>` — work as expected inside a prose container, styled by [native styles](https://cruglobal.github.io/cornerstone-design-system/utilities/native/).
+
+```html
+<article class="cs-prose">
+  <p>
+    Press <kbd>⌘</kbd> + <kbd>K</kbd> to open the command palette and <mark>jump anywhere</mark> from the keyboard.
+    Inline notation reads cleanly too — H<sub>2</sub>O, E=mc<sup>2</sup> — and abbreviations like
+    <abbr title="As Soon As Possible">ASAP</abbr> hint their full meaning on hover.
+  </p>
+</article>
+```
+
+### Major Blocks
+
+Code samples, tables, callouts, and collapsible `<details>` get more breathing room than running prose, so they read as distinct chunks of content rather than another sentence.
+
+```html
+<article class="cs-prose">
+  <h2>Reading a film canister</h2>
+  <p>Most rolls of film list the same three pieces of information on the side.</p>
+
+  <pre><code>ISO 400
+36 exposures
+develop in HC-110, dilution B</code></pre>
+
+  <table>
+    <thead>
+      <tr>
+        <th>ISO</th>
+        <th>Best for</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>100</td>
+        <td>Bright daylight, fine grain</td>
+      </tr>
+      <tr>
+        <td>400</td>
+        <td>Mixed conditions, everyday use</td>
+      </tr>
+      <tr>
+        <td>3200</td>
+        <td>Low light, available light</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <details>
+    <summary>What does "push processing" mean?</summary>
+    <p>
+      Exposing film at a higher ISO than its rated speed, then developing it longer to compensate. You gain a stop or
+      two in low light, at the cost of more grain and deeper contrast.
+    </p>
+  </details>
+
+  <cs-callout variant="brand">
+    <cs-icon slot="icon" name="lightbulb"></cs-icon>
+    Note the development time on the canister with a permanent marker — it saves a trip back to the binder later.
+  </cs-callout>
+</article>
+```
+
+### Section Breaks
+
+`<hr>` marks a topic shift. Its own margin defines the gap; the heading or paragraph that follows hugs up to it so the divider stays visually anchored to what comes next.
+
+```html
+<article class="cs-prose">
+  <p>
+    A morning routine, repeated long enough, stops needing motivation. The coffee gets made, the bed gets pulled flat,
+    the kettle clicks on while the blinds go up.
+  </p>
+
+  <hr />
+
+  <h3>When the routine breaks</h3>
+  <p>
+    Travel, illness, a new schedule — the small steps drift apart. The trick is to rebuild around one anchor first, then
+    let the rest follow.
+  </p>
+</article>
+```
+
+## Typographic Details
+
+A few quieter refinements come along with the rhythm:
+
+- **Oldstyle proportional figures** in running text so numerals sit alongside letters more naturally.
+- **Hanging punctuation** pulls opening quotes, em-dashes, and trailing stops into the margin (Safari today; progressive enhancement elsewhere).
+- **Long-word breaks** on `<code>` and `<pre>` so URLs and identifiers can't overflow the column.
+
+## Composing with Font Size Utilities
+
+Apply any [`cs-font-size-*`](https://cruglobal.github.io/cornerstone-design-system/utilities/text/#font-size) utility to a `cs-prose` container and text, headings, and rhythm scale together. No size variants required.
+
+```html
+<div class="cs-cluster cs-align-items-start" style="gap: var(--cs-space-l);">
+  <article class="cs-prose" style="--cs-prose-line-length: 28ch;">
+    <h3>Default size</h3>
+    <p>A quiet morning is the rarest hour of the day — claim it before the world wakes up.</p>
+    <ul>
+      <li>One cup, one book, one window.</li>
+      <li>No notifications until the second pour.</li>
+    </ul>
+  </article>
+
+  <article class="cs-prose cs-font-size-s" style="--cs-prose-line-length: 28ch;">
+    <h3>With cs-font-size-s</h3>
+    <p>A quiet morning is the rarest hour of the day — claim it before the world wakes up.</p>
+    <ul>
+      <li>One cup, one book, one window.</li>
+      <li>No notifications until the second pour.</li>
+    </ul>
+  </article>
+</div>
+```
+
+## Adjusting Rhythm
+
+Set `--cs-prose-rhythm-scale` on the prose container to multiply every margin in the system. Values below `1` tighten the rhythm; values above loosen it. Type sizes are unaffected.
+
+```html
+<div class="cs-cluster cs-align-items-start" style="gap: var(--cs-space-l);">
+  <article class="cs-prose" style="--cs-prose-line-length: 28ch;">
+    <h3>Default rhythm</h3>
+    <p>Two paragraphs of the same length, at the same size.</p>
+    <p>The space between them is what changes from one card to the next.</p>
+  </article>
+
+  <article class="cs-prose" style="--cs-prose-line-length: 28ch; --cs-prose-rhythm-scale: 0.6;">
+    <h3>Tighter rhythm</h3>
+    <p>Two paragraphs of the same length, at the same size.</p>
+    <p>The space between them is what changes from one card to the next.</p>
+  </article>
+</div>
+```
+
+## Composing with Other Utilities
+
+The `cs-prose` class and its element rules sit at `0,0,0` specificity, so any utility class you apply alongside — `cs-heading-m`, `cs-cluster`, `cs-text-center`, and so on — wins automatically. The same goes for plain element rules in your own stylesheet, no `!important` or specificity tricks required.
+
+```css
+/* Wins against cs-prose's `h2 { font-size: 2em }` */
+h2.release-header {
+  font-size: var(--cs-font-size-m);
+}
+```
+
+## Theming
+
+Color flows from your theme's [color tokens](https://cruglobal.github.io/cornerstone-design-system/tokens/color/), so prose follows dark mode and theme changes automatically. To recolor an element inside prose, use a descendant selector on your container.
+
+```css
+.changelog.cs-prose a {
+  color: var(--cs-color-brand-on-quiet);
+}
+```
+
+## Opting out of Prose
+
+Apply `cs-not-prose` to any element inside a `cs-prose` container to disable prose rhythm for that element and its descendants. Other utilities — `cs-cluster`, `cs-stack`, `cs-font-size-*` — keep working in the opt-out subtree.
+
+```html
+<article class="cs-prose cs-font-size-s">
+  <h3>Ready when you are</h3>
+  <p>
+    The content in this section follows prose rhythm and adopts a smaller font size. The callout below is given
+    <code>cs-not-prose</code>, so its spacing and font sizing revert to element defaults.
+  </p>
+
+  <cs-callout class="cs-not-prose" variant="warning">
+    <cs-icon slot="icon" name="ink_highlighter"></cs-icon>
+    <div class="cs-stack cs-gap-s">
+      <h4>Leave it to the prose</h4>
+      <p>
+        This callout and its child elements are exempt from <code>cs-prose</code> rules, thanks to
+        <code>cs-not-prose</code>.
+      </p>
+    </div>
+  </cs-callout>
+
+  <p>And the content after picks the rhythm back up where it left off.</p>
+  <ul>
+    <li>Asymmetric spacing</li>
+    <li>Relative font sizing</li>
+    <li>Comfortable line length</li>
+  </ul>
+</article>
+```

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

@@ -0,0 +1,25 @@
+# Rounding Utilities
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/utilities/rounding
+
+<style>
+  .preview-block {
+    background-color: var(--cs-color-neutral-fill-loud);
+    min-block-size: 2em;
+  }
+</style>
+
+These utility classes round the corners of any element using the radius tokens from your theme, so buttons, cards, images, and custom components can all share the same corner style without hard-coded values. Common uses include rounding an image inside a [frame](https://cruglobal.github.io/cornerstone-design-system/utilities/frame), shaping an avatar into a circle, or giving a tag a pill silhouette.
+
+Each class corresponds to one of the [`--cs-border-radius-*`](https://cruglobal.github.io/cornerstone-design-system/tokens/borders/#radius) tokens in your theme, so the corner style you pick automatically updates if you adjust your theme's rounding scale.
+
+## Rounding Classes
+
+| Class Name                | `border-radius` Value       | Preview                                                                                 |
+| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
+| `cs-border-radius-s`      | `--cs-border-radius-s`      | <div class="preview-block" style="border-radius: var(--cs-border-radius-s)"></div>      |
+| `cs-border-radius-m`      | `--cs-border-radius-m`      | <div class="preview-block" style="border-radius: var(--cs-border-radius-m)"></div>      |
+| `cs-border-radius-l`      | `--cs-border-radius-l`      | <div class="preview-block" style="border-radius: var(--cs-border-radius-l)"></div>      |
+| `cs-border-radius-pill`   | `--cs-border-radius-pill`   | <div class="preview-block" style="border-radius: var(--cs-border-radius-pill)"></div>   |
+| `cs-border-radius-circle` | `--cs-border-radius-circle` | <div class="preview-block" style="border-radius: var(--cs-border-radius-circle)"></div> |
+| `cs-border-radius-square` | `--cs-border-radius-square` | <div class="preview-block" style="border-radius: var(--cs-border-radius-square)"></div> |

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

@@ -0,0 +1,227 @@
+# Text
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/utilities/text
+
+<style>
+  th {
+    min-inline-size: 15ch;
+  }
+</style>
+
+Text utility classes use design tokens from your Cornerstone theme and standard CSS properties to style text elements on the fly.
+
+The classes on this page cover the most common needs: picking a size and weight for body copy, styling headings, aligning paragraphs, truncating overflow, and changing font color. Every class is built on your theme's typography tokens, so switching themes or tweaking your type scale updates the whole site at once.
+
+## Body
+
+Use `cs-body-*` classes to style the main content of your pages. Each class specifies a `font-size` that corresponds to a [font size token](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-size) from your theme.
+
+> **Info**
+>
+> `3xs` and `2xs` fall below typical legibility. It's best to keep their use to non-essential UI only (e.g. labels, metadata) to maintain accessibility.
+
+Alternatively, use `cs-body` to apply the same styling without an explicit font size.
+
+| Class Name    | Preview                                            |
+| ------------- | -------------------------------------------------- |
+| `cs-body-3xs` | <div class="cs-body-3xs">Five boxing wizards</div> |
+| `cs-body-2xs` | <div class="cs-body-2xs">Five boxing wizards</div> |
+| `cs-body-xs`  | <div class="cs-body-xs">Five boxing wizards</div>  |
+| `cs-body-s`   | <div class="cs-body-s">Five boxing wizards</div>   |
+| `cs-body-m`   | <div class="cs-body-m">Five boxing wizards</div>   |
+| `cs-body-l`   | <div class="cs-body-l">Five boxing wizards</div>   |
+| `cs-body-xl`  | <div class="cs-body-xl">Five boxing wizards</div>  |
+| `cs-body-2xl` | <div class="cs-body-2xl">Five boxing wizards</div> |
+| `cs-body-3xl` | <div class="cs-body-3xl">Five boxing wizards</div> |
+| `cs-body-4xl` | <div class="cs-body-4xl">Five boxing wizards</div> |
+| `cs-body-5xl` | <div class="cs-body-5xl">Five boxing wizards</div> |
+
+## Headings
+
+Use `cs-heading-*` classes to style section titles and headings in your content. Each class specifies a `font-size` that corresponds to a [font size token](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-size) from your theme.
+
+Alternatively, use `cs-heading` to apply the same styling without an explicit font size.
+
+| Class Name       | Preview                                               |
+| ---------------- | ----------------------------------------------------- |
+| `cs-heading-3xs` | <div class="cs-heading-3xs">Five boxing wizards</div> |
+| `cs-heading-2xs` | <div class="cs-heading-2xs">Five boxing wizards</div> |
+| `cs-heading-xs`  | <div class="cs-heading-xs">Five boxing wizards</div>  |
+| `cs-heading-s`   | <div class="cs-heading-s">Five boxing wizards</div>   |
+| `cs-heading-m`   | <div class="cs-heading-m">Five boxing wizards</div>   |
+| `cs-heading-l`   | <div class="cs-heading-l">Five boxing wizards</div>   |
+| `cs-heading-xl`  | <div class="cs-heading-xl">Five boxing wizards</div>  |
+| `cs-heading-2xl` | <div class="cs-heading-2xl">Five boxing wizards</div> |
+| `cs-heading-3xl` | <div class="cs-heading-3xl">Five boxing wizards</div> |
+| `cs-heading-4xl` | <div class="cs-heading-4xl">Five boxing wizards</div> |
+| `cs-heading-5xl` | <div class="cs-heading-5xl">Five boxing wizards</div> |
+
+## Captions
+
+Use `cs-caption-*` classes to style descriptions or auxiliary text in your content. Each class specifies a `font-size` that corresponds to a [font size token](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-size) from your theme.
+
+Alternatively, use `cs-caption` to apply the same styling without an explicit font size.
+
+| Class Name       | Preview                                               |
+| ---------------- | ----------------------------------------------------- |
+| `cs-caption-3xs` | <div class="cs-caption-3xs">Five boxing wizards</div> |
+| `cs-caption-2xs` | <div class="cs-caption-2xs">Five boxing wizards</div> |
+| `cs-caption-xs`  | <div class="cs-caption-xs">Five boxing wizards</div>  |
+| `cs-caption-s`   | <div class="cs-caption-s">Five boxing wizards</div>   |
+| `cs-caption-m`   | <div class="cs-caption-m">Five boxing wizards</div>   |
+| `cs-caption-l`   | <div class="cs-caption-l">Five boxing wizards</div>   |
+| `cs-caption-xl`  | <div class="cs-caption-xl">Five boxing wizards</div>  |
+| `cs-caption-2xl` | <div class="cs-caption-2xl">Five boxing wizards</div> |
+| `cs-caption-3xl` | <div class="cs-caption-3xl">Five boxing wizards</div> |
+| `cs-caption-4xl` | <div class="cs-caption-4xl">Five boxing wizards</div> |
+| `cs-caption-5xl` | <div class="cs-caption-5xl">Five boxing wizards</div> |
+
+## Longform
+
+Use `cs-longform-*` classes to style lengthy content like essays or blog posts. Each class specifies a `font-size` that corresponds to a [font size token](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-size) from your theme.
+
+Alternatively, use `cs-longform` to apply the same styling without an explicit font size.
+
+| Class Name        | Preview                                                |
+| ----------------- | ------------------------------------------------------ |
+| `cs-longform-3xs` | <div class="cs-longform-3xs">Five boxing wizards</div> |
+| `cs-longform-2xs` | <div class="cs-longform-2xs">Five boxing wizards</div> |
+| `cs-longform-xs`  | <div class="cs-longform-xs">Five boxing wizards</div>  |
+| `cs-longform-s`   | <div class="cs-longform-s">Five boxing wizards</div>   |
+| `cs-longform-m`   | <div class="cs-longform-m">Five boxing wizards</div>   |
+| `cs-longform-l`   | <div class="cs-longform-l">Five boxing wizards</div>   |
+| `cs-longform-xl`  | <div class="cs-longform-xl">Five boxing wizards</div>  |
+| `cs-longform-2xl` | <div class="cs-longform-2xl">Five boxing wizards</div> |
+| `cs-longform-3xl` | <div class="cs-longform-3xl">Five boxing wizards</div> |
+| `cs-longform-4xl` | <div class="cs-longform-4xl">Five boxing wizards</div> |
+| `cs-longform-5xl` | <div class="cs-longform-5xl">Five boxing wizards</div> |
+
+## Links
+
+Use `cs-link` to give interactive text a link-like appearance. Alternatively, use `cs-link-plain` to remove typical link styles from `<a>` elements.
+
+| Class Name      | Preview                                                  |
+| --------------- | -------------------------------------------------------- |
+| `cs-link`       | <div class="cs-link">Five boxing wizards</div>           |
+| `cs-link-plain` | <a href="" class="cs-link-plain">Five boxing wizards</a> |
+
+## Lists
+
+Ordered (`<ol>`) and unordered (`<ul>`) lists are given default styles by either Cornerstone's [native styles](https://cruglobal.github.io/cornerstone-design-system/utilities/native/) or your browser. Use `cs-list-plain` to clear any built-in list styles.
+
+| Class Name      | Preview                                                                                                  |
+| --------------- | -------------------------------------------------------------------------------------------------------- |
+| `cs-list-plain` | <ol class="cs-list-plain"><li>First list item</li><li>Second list item</li><li>Final list item</li></ol> |
+
+## Form Controls
+
+Use `cs-form-control-*` classes to style labels, values, placeholders, and hints outside of typical form control contexts with [form control tokens](https://cruglobal.github.io/cornerstone-design-system/tokens/component-groups/#form-controls) from your theme.
+
+| Class Name                    | Preview                                                            |
+| ----------------------------- | ------------------------------------------------------------------ |
+| `cs-form-control-label`       | <div class="cs-form-control-label">Five boxing wizards</div>       |
+| `cs-form-control-value`       | <div class="cs-form-control-value">Five boxing wizards</div>       |
+| `cs-form-control-placeholder` | <div class="cs-form-control-placeholder">Five boxing wizards</div> |
+| `cs-form-control-hint`        | <div class="cs-form-control-hint">Five boxing wizards</div>        |
+
+## Font Size
+
+Use single-purpose `cs-font-size-*` classes to apply a given [font size](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-size) from your theme to any element without additional styling.
+
+| Class Name         | Preview                                                 |
+| ------------------ | ------------------------------------------------------- |
+| `cs-font-size-3xs` | <div class="cs-font-size-3xs">Five boxing wizards</div> |
+| `cs-font-size-2xs` | <div class="cs-font-size-2xs">Five boxing wizards</div> |
+| `cs-font-size-xs`  | <div class="cs-font-size-xs">Five boxing wizards</div>  |
+| `cs-font-size-s`   | <div class="cs-font-size-s">Five boxing wizards</div>   |
+| `cs-font-size-m`   | <div class="cs-font-size-m">Five boxing wizards</div>   |
+| `cs-font-size-l`   | <div class="cs-font-size-l">Five boxing wizards</div>   |
+| `cs-font-size-xl`  | <div class="cs-font-size-xl">Five boxing wizards</div>  |
+| `cs-font-size-2xl` | <div class="cs-font-size-2xl">Five boxing wizards</div> |
+| `cs-font-size-3xl` | <div class="cs-font-size-3xl">Five boxing wizards</div> |
+| `cs-font-size-4xl` | <div class="cs-font-size-4xl">Five boxing wizards</div> |
+| `cs-font-size-5xl` | <div class="cs-font-size-5xl">Five boxing wizards</div> |
+
+## Font Weight
+
+Use single-purpose `cs-font-weight-*` classes to apply a given [font weight](https://cruglobal.github.io/cornerstone-design-system/tokens/typography/#font-weight) from your theme to any element without additional styling.
+
+| Class Name                | Preview                                                        |
+| ------------------------- | -------------------------------------------------------------- |
+| `cs-font-weight-light`    | <div class="cs-font-weight-light">Five boxing wizards</div>    |
+| `cs-font-weight-normal`   | <div class="cs-font-weight-normal">Five boxing wizards</div>   |
+| `cs-font-weight-semibold` | <div class="cs-font-weight-semibold">Five boxing wizards</div> |
+| `cs-font-weight-bold`     | <div class="cs-font-weight-bold">Five boxing wizards</div>     |
+
+## Text Color
+
+Use single-purpose `cs-color-text-*` classes to apply a given [text color](https://cruglobal.github.io/cornerstone-design-system/tokens/color/#text) from your theme to any element without additional styling.
+
+| Class Name             | Preview                                                     |
+| ---------------------- | ----------------------------------------------------------- |
+| `cs-color-text-quiet`  | <div class="cs-color-text-quiet">Five boxing wizards</div>  |
+| `cs-color-text-normal` | <div class="cs-color-text-normal">Five boxing wizards</div> |
+| `cs-color-text-link`   | <div class="cs-color-text-link">Five boxing wizards</div>   |
+
+## Wrapping
+
+Use these classes to control how text wraps across lines. They apply standard CSS [`text-wrap`](https://developer.mozilla.org/docs/Web/CSS/text-wrap) values.
+
+| Class Name        | Preview                                                                                                                                                 |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cs-text-nowrap`  | <div class="cs-text-nowrap" style="max-width: 40ch; overflow: hidden;">The five boxing wizards jump quickly. How quickly daft jumping zebras vex!</div> |
+| `cs-text-balance` | <div class="cs-text-balance" style="max-width: 40ch;">The five boxing wizards jump quickly. How quickly daft jumping zebras vex!</div>                  |
+| `cs-text-pretty`  | <div class="cs-text-pretty" style="max-width: 40ch;">The five boxing wizards jump quickly. How quickly daft jumping zebras vex!</div>                   |
+
+> **Info**
+>
+> `cs-text-pretty` is wrapped in an `@supports` rule because Firefox does not yet support `text-wrap: pretty`. In unsupported browsers, the class has no effect and text wraps normally.
+
+> **Info**
+>
+> The original `cs-text-wrap-nowrap`, `cs-text-wrap-balance`, and `cs-text-wrap-pretty` class names continue to work as aliases for backwards compatibility. These older names are deprecated and will be removed in a future major version; update to the shorter `cs-text-*` names above.
+
+## Transform
+
+Use these classes to change the case of text. They apply standard CSS [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) values.
+
+| Class Name           | Preview                                                   |
+| -------------------- | --------------------------------------------------------- |
+| `cs-text-uppercase`  | <div class="cs-text-uppercase">Five boxing wizards</div>  |
+| `cs-text-lowercase`  | <div class="cs-text-lowercase">Five boxing wizards</div>  |
+| `cs-text-capitalize` | <div class="cs-text-capitalize">Five boxing wizards</div> |
+
+> **Info**
+>
+> Large blocks of uppercase text are [harder for everyone to read](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) and especially difficult for folks with dyslexia. Reserve it for buttons, badges, or short headings.
+
+## Alignment
+
+<style>
+  .preview-wrapper {
+    border: var(--cs-border-width-s) dashed var(--cs-color-neutral-border-normal);
+    border-radius: var(--cs-border-radius-m);
+    padding: var(--cs-space-xs);
+  }
+</style>
+
+Use these classes to align text within its container. They apply standard CSS [`text-align`](https://developer.mozilla.org/docs/Web/CSS/text-align) values using logical properties, so they adapt automatically to the document's writing direction.
+
+| Class Name        | Preview                                                                                                                       |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `cs-text-start`   | <div class="cs-text-start preview-wrapper">Five boxing wizards</div>                                                          |
+| `cs-text-center`  | <div class="cs-text-center preview-wrapper">Five boxing wizards</div>                                                         |
+| `cs-text-end`     | <div class="cs-text-end preview-wrapper">Five boxing wizards</div>                                                            |
+| `cs-text-justify` | <div class="cs-text-justify preview-wrapper">The five boxing wizards jump quickly. How quickly daft jumping zebras vex!</div> |
+
+> **Info**
+>
+> Justified text can create uneven word spacing that's [harder for everyone to read](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html) and especially difficult for folks with dyslexia. Reserve it for short, narrow text columns.
+
+## Truncation
+
+Use the `cs-text-truncate` class to truncate text with an ellipsis instead of letting it overflow or wrap.
+
+| Class Name         | Preview                                                                                                                                 |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `cs-text-truncate` | <div class="cs-text-truncate" style="max-width: 40ch;">The five boxing wizards jump quickly. How quickly daft jumping zebras vex!</div> |