diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index e3e0bbac01..f3af6eb1f7 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [develop, beta]
+    branches: [develop, beta, main]
   pull_request:
-    branches: [develop, beta]
+    branches: [develop, beta, main]
 
 jobs:
   build-and-test:
diff --git a/package-lock.json b/package-lock.json
index d0f5a1a491..f0723f4d6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18086,7 +18086,9 @@
                 "@docsearch/js": "^4.3.2",
                 "@hbsnow/rehype-sectionize": "^1.0.7",
                 "@stackoverflow/stacks": "*",
+                "@stackoverflow/stacks-editor": "*",
                 "@stackoverflow/stacks-icons": "*",
+                "@stackoverflow/stacks-icons-legacy": "*",
                 "@stackoverflow/stacks-svelte": "*",
                 "@stefanprobst/rehype-extract-toc": "^3.0.0",
                 "better-auth": "^1.4.7",
diff --git a/packages/stacks-classic/lib/esm-no-css.ts b/packages/stacks-classic/lib/esm-no-css.ts
new file mode 100644
index 0000000000..72e8402536
--- /dev/null
+++ b/packages/stacks-classic/lib/esm-no-css.ts
@@ -0,0 +1,26 @@
+// ESM entry for bundlers that need named exports (e.g. Vite/Rollup).
+// Mirrors lib/index.ts but omits the CSS side-effect import;
+// consumers should import the stylesheet separately.
+import {
+    BannerController,
+    ModalController,
+    PopoverController,
+    TableController,
+    TabListController,
+    ToastController,
+    TooltipController,
+} from "./controllers";
+import { application, StacksApplication } from "./stacks";
+
+application.register("s-banner", BannerController);
+application.register("s-modal", ModalController);
+application.register("s-toast", ToastController);
+application.register("s-navigation-tablist", TabListController);
+application.register("s-popover", PopoverController);
+application.register("s-table", TableController);
+application.register("s-tooltip", TooltipController);
+
+StacksApplication.finalize();
+
+export * from "./controllers";
+export * from "./stacks";
diff --git a/packages/stacks-docs-next/.gitignore b/packages/stacks-docs-next/.gitignore
index 785f956d1d..7df20a667c 100644
--- a/packages/stacks-docs-next/.gitignore
+++ b/packages/stacks-docs-next/.gitignore
@@ -22,5 +22,4 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-/static/docs
-/static/legacy
\ No newline at end of file
+/static/docs
\ No newline at end of file
diff --git a/packages/stacks-docs-next/CLAUDE.md b/packages/stacks-docs-next/CLAUDE.md
new file mode 100644
index 0000000000..648547345b
--- /dev/null
+++ b/packages/stacks-docs-next/CLAUDE.md
@@ -0,0 +1,196 @@
+# stacks-docs-next — Claude Instructions
+
+This is the SvelteKit documentation site for the Stacks v3 design system. Pages are written in mdsvex (`.md` files with Svelte support).
+
+## Page anatomy
+
+### Frontmatter
+
+```yaml
+---
+title: "Page Title"
+description: "…"        # shown in the page header and meta
+figma: "https://…"      # optional — links to Figma file
+svelte: "https://…"     # optional — links to stacks-svelte component
+js: true                # only if the page has a JavaScript section
+updated: 2026-01-15     # ISO date of last meaningful content update
+---
+```
+
+### Script block
+
+```svelte
+<script lang="ts">
+    import { ComponentName } from '@stackoverflow/stacks-svelte';
+    import { IconName } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [ … ];
+</script>
+```
+
+### Content
+
+Use standard markdown for prose. Svelte components can be used anywhere in the body. Fenced code blocks use explicit language tags (` ```html `, ` ```js `, etc.).
+
+## Adding a new page
+
+1. Create `src/docs/public/<section>/<name>.md`
+2. Add an entry to `src/structure.yaml` under the correct section in **alphabetical order** — no `legacy:` key needed for new pages:
+
+```yaml
+- title: "Page Title"
+  slug: "page-name"
+```
+
+## Available doc components
+
+| Component | Location | Purpose |
+|---|---|---|
+| `ClassTable` | `$components/ClassTable.svelte` | CSS class / JS attribute reference tables |
+| `Example` | `$components/Example.svelte` | Bordered container for static example content |
+| `Grid` | `$components/Grid.svelte` | Equal-width responsive column grid for Do/Don't blocks |
+| `GridColumn` | `$components/GridColumn.svelte` | Column within a `Grid`; accepts `extraClasses`, `padding` prop |
+| `PreviewTable` | `$components/PreviewTable.svelte` | Table of component previews: Example \| Class \| Description |
+| `BannerPreview` | `$components/BannerPreview.svelte` | Static pre-built banner instance for illustration |
+| `BannerDemo` | `$components/BannerDemo.svelte` | Interactive banner playground with user controls |
+| `StacksEditorDemo` | `$components/StacksEditorDemo.svelte` | Interactive Stacks editor playground |
+| `TableSortDemo` | `$components/TableSortDemo.svelte` | Interactive sortable table playground |
+
+**Naming convention:** `Example` = generic wrapper; `*Preview` = static pre-built component instance; `*Demo` = interactive playground with user controls.
+
+### ClassTable
+
+Use `ClassTable` for every reference table — never raw markdown tables.
+
+```svelte
+<ClassTable {classes} expandable />
+
+<!-- JS section tables — rename columns as appropriate -->
+<ClassTable classes={attributes} headings={{ class: 'Attribute', parent: 'Applies to' }} />
+<ClassTable classes={events}     headings={{ class: 'Event',     parent: 'Applies to' }} />
+```
+
+**ClassTableRow fields:** `class`, `parent`, `modifies`, `output`, `description`, `define`, `responsive`.
+- Only populate relevant fields — `ClassTable` auto-hides columns with no data.
+- Use `'N/A'` (string) for explicitly empty `parent`/`modifies` — renders as muted text.
+- The `headings` prop renames any column: `headings={{ class: 'Selector', description: 'Notes' }}`.
+
+### Example
+
+All component examples must be wrapped in `<Example>`. Multiple labelled variants in one block:
+
+```svelte
+<Example>
+    <div class="d-flex g16 ai-start fw-wrap">
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Label</span>
+            <ComponentName />
+        </div>
+    </div>
+</Example>
+```
+
+Sub-example labels always use `class="ff-mono mb8"`.
+
+### Grid / GridColumn
+
+`Grid` renders an equal-width responsive CSS grid (stacks to a single column below 780px). Use it for Do/Don't comparisons and side-by-side content blocks.
+
+```svelte
+<Grid>
+    <GridColumn extraClasses="bg-red-100">
+        <!-- Don't content -->
+    </GridColumn>
+    <GridColumn extraClasses="bg-green-100">
+        <!-- Do content -->
+    </GridColumn>
+</Grid>
+```
+
+`GridColumn` props:
+- `extraClasses` — appended to the column div (default: `bg-black-200`)
+- `padding` — adds `p24` when `true` (default: `true`); set `false` if you're applying `py*` in `extraClasses` to avoid conflict
+- `...rest` — any extra attributes (e.g. `style="background: var(--brand-color-orange)"`) are spread onto the outer div
+
+For the `column-strike` diagonal overlay on "Instead of this" blocks, add it to `extraClasses`:
+
+```svelte
+<GridColumn extraClasses="bg-black-200 column-strike">…</GridColumn>
+```
+
+### Svelte components vs raw HTML
+
+- **Always prefer** Svelte components from `@stackoverflow/stacks-svelte` when one exists.
+- **Fall back to raw HTML** only when the component's prop API can't express what the example needs.
+- Check `packages/stacks-svelte/src/components/index.ts` for available components.
+- Check story files (`*.stories.svelte`) for usage patterns.
+
+For popover/menu examples, wrap content in `s-popover is-visible ps-relative` (`ws2 p8` or `ws3 p8`).
+
+## Rehype plugins (automatic — no action needed)
+
+The `svelte.config.js` rehype pipeline automatically:
+- Adds `docs-heading docs-h2/h3/h4` to markdown headings
+- Adds `docs-copy` to `p` and `ol` elements **in markdown prose only**
+- Adds `docs-section` to `<section>` elements (via rehype-sectionize)
+- Adds `docs-link` to `<a>` elements
+- Adds syntax highlighting via `s-code-block` to fenced code blocks
+- Extracts the TOC from headings and exposes it as `metadata.toc`
+
+## Key conventions and gotchas
+
+### docs-copy not applied inside Svelte component slots
+
+Rehype only processes markdown-level elements. Any `<p>`, `<ul>`, or `<ol>` written as raw HTML inside a Svelte component slot (e.g. inside `<GridColumn>`, `<Example>`) **will not** receive `docs-copy` automatically — add the class manually:
+
+```svelte
+<GridColumn>
+    <p class="docs-copy">This text needs the class added explicitly.</p>
+    <ul class="docs-copy ml0 pl16">
+        <li>Same for lists</li>
+    </ul>
+</GridColumn>
+```
+
+### Notice component — always wrap content in `<p>`
+
+The `Notice` component uses flexbox internally. Bare text and inline elements become flex items and break the layout:
+
+```svelte
+<!-- Correct -->
+<Notice variant="info" class="mb16">
+    <p>Text with <code>inline code</code> and <a href="…">links</a>.</p>
+</Notice>
+
+<!-- Wrong — bare text/inline elements become flex items -->
+<Notice variant="info" class="mb16">
+    Text with <code>inline code</code> and <a href="…">links</a>.
+</Notice>
+```
+
+### Global h1 size
+
+The global `h1` rule sets `font-size: var(--fs-display3)` (4.5rem / 72px) — designed for page hero titles. If you use `<h1>` inside a content block (e.g. a `GridColumn`), add a scoped `<style>` to the page to bring it to a more appropriate size:
+
+```svelte
+<style>
+    h1 {
+        font-size: var(--fs-headline1);
+        font-weight: 700;
+        line-height: 1.2;
+    }
+</style>
+```
+
+### Brand background colors
+
+Not all `bg-brand-*` utility classes exist. If a class is missing (e.g. `bg-brand-orange`), use an inline `style` with the CSS variable instead:
+
+```svelte
+<GridColumn style="background: var(--brand-color-orange)">
+```
+
+Available brand color CSS variables are defined in `src/app.css` under `:root`.
diff --git a/packages/stacks-docs-next/package.json b/packages/stacks-docs-next/package.json
index 15cedb2235..4a95d63662 100644
--- a/packages/stacks-docs-next/package.json
+++ b/packages/stacks-docs-next/package.json
@@ -4,8 +4,7 @@
     "type": "module",
     "scripts": {
         "dev": "vite dev",
-        "predev": "node scripts/copy-legacy.mjs",
-        "prebuild": "npm run build -w @stackoverflow/stacks && npm run build -w @stackoverflow/stacks-svelte && npm run build -w @stackoverflow/stacks-docs && node scripts/copy-legacy.mjs",
+        "prebuild": "npm run build -w @stackoverflow/stacks && npm run build -w @stackoverflow/stacks-svelte",
         "build": "bash netlify-setup.sh && npm run init-private-content && vite build",
         "preview": "vite preview",
         "prepare": "svelte-kit sync || echo ''",
@@ -28,7 +27,9 @@
         "@docsearch/js": "^4.3.2",
         "@hbsnow/rehype-sectionize": "^1.0.7",
         "@stackoverflow/stacks": "*",
+        "@stackoverflow/stacks-editor": "*",
         "@stackoverflow/stacks-icons": "*",
+        "@stackoverflow/stacks-icons-legacy": "*",
         "@stackoverflow/stacks-svelte": "*",
         "@stefanprobst/rehype-extract-toc": "^3.0.0",
         "better-auth": "^1.4.7",
diff --git a/packages/stacks-docs-next/scripts/copy-legacy.mjs b/packages/stacks-docs-next/scripts/copy-legacy.mjs
deleted file mode 100644
index 1e507c227b..0000000000
--- a/packages/stacks-docs-next/scripts/copy-legacy.mjs
+++ /dev/null
@@ -1,40 +0,0 @@
-// Handles legacy Eleventy site content
-
-import fs from "fs";
-import path from "path";
-
-const site = "../stacks-docs/_site";
-
-if (!fs.existsSync(site)) {
-    console.warn("stacks-docs/_site not found, skipping legacy copy");
-    process.exit(0);
-}
-
-fs.mkdirSync("static/legacy", { recursive: true });
-
-// Copy compiled assets
-fs.cpSync(`${site}/assets`, "static/legacy/assets", { recursive: true });
-
-// Copy fragment HTML files only, preserving directory structure
-fs.cpSync(site, "static/legacy/fragments", {
-    recursive: true,
-    filter: (src) => {
-        const stat = fs.statSync(src);
-        if (stat.isDirectory()) return true;
-        return path.basename(src) === "fragment.html";
-    },
-});
-
-// Copy legacy JS bundle
-const docsJs = "../stacks-docs/assets/dist/docs.js";
-if (fs.existsSync(docsJs)) {
-    fs.copyFileSync(docsJs, "static/legacy/docs.js");
-}
-
-// Copy legacy llms.txt
-const llms = "../stacks-docs/_site/llms.txt";
-if (fs.existsSync(llms)) {
-    fs.copyFileSync(llms, "static/legacy/llms.txt");
-}
-
-console.log("Legacy assets copied successfully");
diff --git a/packages/stacks-docs-next/src/app.css b/packages/stacks-docs-next/src/app.css
index 136ed17898..d945a28e70 100644
--- a/packages/stacks-docs-next/src/app.css
+++ b/packages/stacks-docs-next/src/app.css
@@ -1,5 +1,7 @@
 @import "@stackoverflow/stacks/dist/css/stacks.css";
 
+/* Brand color tokens — used by brand docs components.
+   The utility classes (.bg-brand-*, .fc-brand-*) are already provided by Stacks CSS. */
 :root {
     --brand-color-orange: #ff5e00;
     --brand-color-orange-medium: #6e1527;
@@ -31,83 +33,61 @@
     --brand-color-gray-200: #dee0e3;
 }
 
-/* Add to Stacks classic eventually */
-
-.bg-brand-orange {
-    background: var(--brand-color-orange);
-}
-.fc-brand-orange {
-    color: var(--brand-color-orange) !important;
-}
-.bg-brand-orange-medium {
-    background: var(--brand-color-orange-medium);
-}
-.bg-brand-orange-dark {
-    background: var(--brand-color-orange-dark);
-}
-
-.bg-brand-white {
-    background: var(--brand-color-white);
-}
-.bg-brand-black {
-    background: var(--brand-color-black);
-}
-.bg-brand-off-white {
-    background: var(--brand-color-off-white);
-}
-
-.bg-brand-beige {
-    background: var(--brand-color-beige);
-}
-
-.bg-brand-blue {
-    background: var(--brand-color-blue);
-}
-.bg-brand-blue-light {
-    background: var(--brand-color-blue-light);
-}
-.bg-brand-blue-dark {
-    background: var(--brand-color-blue-dark);
-}
-
-.bg-brand-purple {
-    background: var(--brand-color-purple);
-}
-.bg-brand-purple-dark {
-    background: var(--brand-color-purple-dark);
-}
-
-.bg-brand-pink {
-    background: var(--brand-color-pink);
-}
-.bg-brand-pink-dark {
-    background: var(--brand-color-pink-dark);
-}
-
-.bg-brand-green {
-    background: var(--brand-color-green);
-}
-.bg-brand-green-dark {
-    background: var(--brand-color-green-dark);
-}
-
-.bg-brand-yellow {
-    background: var(--brand-color-yellow);
-}
-.bg-brand-yellow-dark {
-    background: var(--brand-color-yellow-dark);
-}
-
-.bg-brand-gray {
-    background: var(--brand-color-gray);
-}
-.bg-brand-gray-200 {
-    background: var(--brand-color-gray-200);
+/* Custom theme color palette — activates when body has theme-custom + themed classes.
+   Primary: teal (h:170 s:37% l:48%), Secondary: purple (h:260 s:29% l:55%).
+   Matches the custom theme defined in stacks-docs. */
+body.theme-custom.themed {
+    --theme-base-primary-color-h: 170;
+    --theme-base-primary-color-s: 37%;
+    --theme-base-primary-color-l: 48%;
+    --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .9)));
+    --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .75)));
+    --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .5)));
+    --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
+    --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -.3)));
+    --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -.6)));
+    --theme-primary-custom: var(--theme-primary-custom-400);
+    --theme-base-secondary-color-h: 260;
+    --theme-base-secondary-color-s: 29%;
+    --theme-base-secondary-color-l: 55%;
+    --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .9)));
+    --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .75)));
+    --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .5)));
+    --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
+    --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.3)));
+    --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.6)));
+    --theme-secondary-custom: var(--theme-secondary-custom-400);
+    --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+    --theme-secondary-custom-translucent: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+    /* Dark mode variants */
+    --theme-dark-primary-color-h: 170;
+    --theme-dark-primary-color-s: 50%;
+    --theme-dark-primary-color-l: 60%;
+    --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.7)));
+    --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.5)));
+    --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.2)));
+    --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
+    --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * .5)));
+    --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * .8)));
+    --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
+    --theme-dark-secondary-color-h: 260;
+    --theme-dark-secondary-color-s: 70%;
+    --theme-dark-secondary-color-l: 70%;
+    --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.7)));
+    --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.5)));
+    --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.2)));
+    --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
+    --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .5)));
+    --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8)));
+    --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
+    --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+    --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
 }
 
 /* Override Stacks defaults */
 html,
 body {
+    --fw-bold: 700;
     --ff-sans:
         "Stack Sans Text", -apple-system, BlinkMacSystemFont,
         "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
@@ -131,10 +111,6 @@ body {
     src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
 }
 
-.ff-stack-sans {
-    font-family: "Stack Sans Text";
-    font-weight: 400;
-}
 .ff-stack-sans-headline,
 .ff-stack-sans-headline-notch {
     font-family: "Stack Sans Headline";
@@ -143,24 +119,9 @@ body {
     font-feature-settings: "ss01" 1 !important;
 }
 
-.fw-extralight {
-    font-weight: 200;
-}
-.fw-light {
-    font-weight: 300;
-}
-.fw-regular {
-    font-weight: 400;
-}
-.fw-medium {
-    font-weight: 500;
-}
-.fw-semibold {
-    font-weight: 600;
-}
-.fw-bold,
-.s-prose strong {
-    font-weight: 700;
+.docs-copy strong {
+    color: var(--black-600);
+    font-weight: var(--fw-bold);
 }
 
 body {
@@ -179,7 +140,7 @@ h5 {
     font-weight: 400;
 }
 h1 {
-    font-size: 72px;
+    font-size: var(--fs-display3);
     line-height: 106%;
     font-weight: 500;
     margin-top: 0;
@@ -187,94 +148,142 @@ h1 {
 h1 {
     font-feature-settings: "ss01" 1;
 }
-main {
-    min-height: calc(100vh - 24px);
-}
-main,
-footer {
-    margin-left: 20%;
+/* Three-column page layout — nav | content | toc */
+.layout-root {
+    min-height: 100vh;
 }
 
-@media (max-width: 48.75rem) {
-    main,
-    footer {
-        margin-left: 0%;
-    }
+.layout-hero {
+    aspect-ratio: 1030 / 540;
 }
 
-/* Document styles */
-
-.doc h1 a,
-.doc h2 a,
-.doc h3 a,
-.doc h4 a,
-.doc h5 a {
+/* Prose paragraph styling — applied to all p elements by the addDocClasses rehype plugin */
+.docs-copy {
+    color: var(--black-500);
+    font-size: var(--fs-body2);
+    line-height: var(--lh-lg);
+    margin-bottom: var(--su16);
+    margin-top: 0;
+}
+.docs-copy a:not([class]),
+.docs-copy .s-link {
+    text-decoration: underline;
+}
+.docs-copy .docs-link {
     color: inherit;
+}
+.docs-copy code {
+    background-color: var(--black-200);
+    color: var(--black-600);
+    font-family: var(--ff-mono);
+    font-size: var(--fs-fine);
+    padding: var(--su2) var(--su4);
+}
+/* Document styles — individual classes applied by the addDocClasses rehype plugin */
+
+/* Links and SVGs inside headings */
+.docs-heading .docs-link,
+.docs-heading .docs-heading-anchor {
+    color: inherit !important;
     text-decoration: none;
 }
-.doc h1 svg,
-.doc h2 svg,
-.doc h3 svg,
-.doc h4 svg,
-.doc h5 svg {
+.docs-heading svg {
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: var(--su4);
+}
+
+/* Heading flex layout (heading text + anchor icon side-by-side) */
+.docs-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--su8);
+    font-weight: var(--fw-bold);
 }
-.doc img,
-.doc iframe {
+
+/* Heading anchor icon appended by rehype-autolink-headings */
+.docs-heading-anchor {
+    flex-shrink: 0;
+    color: var(--black-300);
+    line-height: 1;
+    margin-bottom: var(--su2);
+}
+.docs-heading-anchor:hover {
+    color: var(--black-600);
+}
+
+/* Heading-specific overrides */
+.docs-h2 {
+    font-size: var(--fs-headline1);
+    margin-bottom: var(--su16);
+}
+.docs-h3 {
+    color: var(--black-500);
+    margin-top: var(--su48);
+}
+.docs-h2 + .docs-section > .docs-h3 {
+    margin-top: var(--su24);
+}
+.docs-h4 {
+    color: var(--black-400);
+    margin-bottom: var(--su12);
+    margin-top: var(--su16);
+}
+
+/* Images and iframes */
+.docs-img,
+.docs-iframe {
     width: 100%;
     height: auto;
     display: block;
 }
-.doc iframe {
+.docs-iframe {
     aspect-ratio: 16 / 9.675;
 }
-.doc .doc__grid {
-    margin: 12px 0;
+
+/* Grid layout helper */
+.docs-grid {
+    margin: var(--su12) 0;
 }
-.doc .doc__grid:not(.doc__grid + .doc__grid):not(:has(+ .doc__grid)) {
-    margin: 32px 0;
+.docs-grid:not(.docs-grid + .docs-grid):not(:has(+ .docs-grid)) {
+    margin: var(--su32) 0;
 }
-.doc section {
+
+/* Sections generated by rehype-sectionize */
+.docs-section {
     border-top: 1px solid var(--black-150);
     position: relative;
-    padding: 20px 0;
-    margin: 20px 0;
-}
-.doc h1 a,
-.doc h2 a,
-.doc h3 a,
-.doc h4 a {
-    color: inherit !important;
+    padding: calc(var(--su24) + var(--sun4)) 0;
+    margin: calc(var(--su24) + var(--sun4)) 0;
 }
-.doc section[data-heading-rank] {
-    margin-top: 32px;
+.docs-section[data-heading-rank] {
+    margin-top: var(--su24);
 }
-.doc section[data-heading-rank="2"] > p {
+.docs-section[data-heading-rank="2"] > .docs-p {
     color: var(--fc-medium);
 }
-.doc section > section {
+.docs-section > .docs-section {
     border-top: 0;
     padding: 0;
     margin: 0;
 }
-.doc p:not(:has(img)),
-.doc li {
-    max-width: 800px;
+
+/* Prose elements */
+.docs-ul,
+.docs-copy ol {
+    margin-bottom: 1.1em;
+    margin-top: 0;
+}
+.docs-li {
+    max-width: var(--su848);
 }
-.doc ul li {
+.docs-ul > .docs-li {
     list-style-type: square;
 }
-.doc nav ul li {
+.docs-nav .docs-li {
     list-style: none;
 }
-.doc h2 {
-    font-size: var(--_pr-h1-fs);
-}
-.doc h4 {
-    color: var(--black-400);
-}
-.doc a {
+.docs-link {
     font-weight: 500;
 }
 
@@ -305,7 +314,7 @@ footer {
     border: var(--su1) solid var(--black-200);
     border-radius: var(--su2);
     font-family: var(--ff-mono);
-    font-size: 0.875em;
+    font-size: var(--fs-fine);
     overflow-wrap: break-word;
     margin: var(--sun1);
     padding: 0.125em 0.1875em 0.0625em;
@@ -340,6 +349,70 @@ footer {
     border-color: var(--black-300);
 }
 
+/* Docs card — used in example containers to simulate a card-like context */
+.docs-card {
+    border: var(--su1) solid var(--black-225);
+    border-radius: var(--su4);
+    padding: var(--su16);
+}
+
+/* Notices in doc content get breathing room below */
+.docs .s-notice {
+    margin-bottom: var(--su16);
+}
+
+/* Paragraphs inside doc notices inherit docs-copy typography */
+.docs .s-notice p {
+    color: inherit;
+    font-size: var(--fs-body1);
+    line-height: var(--lh-lg);
+    margin-bottom: 0;
+    margin-top: 0;
+}
+.docs .s-notice p strong {
+    font-weight: var(--fw-bold);
+}
+
+/* s-prose inside example containers — reset docs-specific font overrides so
+   the prose renders with standard product fonts, not the docs custom typefaces.
+   Covers both <Example> containers and the prose page's custom expandable wrapper. */
+.example-container .s-prose,
+.docs-prose-example .s-prose {
+    --ff-sans: -apple-system, BlinkMacSystemFont,
+        "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
+    --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
+        "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+    font-family: var(--ff-sans);
+    font-weight: initial;
+}
+
+/* The global h1–h5 rule applies "Stack Sans Headline" with higher specificity
+   than the container reset above, so headings need an explicit override. */
+.example-container h1,
+.example-container h2,
+.example-container h3,
+.example-container h4,
+.example-container h5,
+.example-container h6,
+.example-container .s-prose h1,
+.example-container .s-prose h2,
+.example-container .s-prose h3,
+.example-container .s-prose h4,
+.example-container .s-prose h5,
+.example-container .s-prose h6,
+.docs-prose-example .s-prose h1,
+.docs-prose-example .s-prose h2,
+.docs-prose-example .s-prose h3,
+.docs-prose-example .s-prose h4,
+.docs-prose-example .s-prose h5,
+.docs-prose-example .s-prose h6 {
+    font-family: var(--ff-sans);
+}
+
+.hmn6 .s-editor-resizable {
+    min-height: var(--su640) !important;
+}
+
 /* Agolia Docsearch */
 
 .DocSearch-Container {
diff --git a/packages/stacks-docs-next/src/components/BannerDemo.svelte b/packages/stacks-docs-next/src/components/BannerDemo.svelte
new file mode 100644
index 0000000000..7b48c20dee
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/BannerDemo.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Icon, Select, SelectItem, Checkbox } from '@stackoverflow/stacks-svelte';
+    import { IconAlert, IconCross } from '@stackoverflow/stacks-icons/icons';
+
+    const variants = [
+        { value: '',                   label: 'Base' },
+        { value: 's-banner__info',     label: 'Info' },
+        { value: 's-banner__success',  label: 'Success' },
+        { value: 's-banner__warning',  label: 'Warning' },
+        { value: 's-banner__danger',   label: 'Danger' },
+        { value: 's-banner__featured', label: 'Featured' },
+        { value: 's-banner__activity', label: 'Activity' },
+    ] as const;
+
+    let selectedVariant = $state('s-banner__warning');
+    let important = $state(true);
+    let pinned = $state(true);
+    let visible = $state(false);
+
+    const bannerClass = $derived(
+        ['s-banner', selectedVariant, important && 's-banner__important', pinned && 'is-pinned']
+            .filter(Boolean).join(' ')
+    );
+</script>
+
+{#if visible}
+    <aside class={bannerClass} role="alert" aria-hidden="false">
+        <span class="s-banner--icon"><Icon src={IconAlert} /></span>
+        <span><strong>Stacks is currently frozen in read-only mode.</strong> Contact the team to restore access.</span>
+        <div class="s-banner--actions">
+            <button type="button" class="s-link s-banner--dismiss" onclick={() => visible = false}>
+                <Icon src={IconCross} />
+            </button>
+        </div>
+    </aside>
+{/if}
+
+<div class="ba bc-black-225 bar-sm p16 bg-black-100 d-flex ai-center g16 fw-wrap">
+    <Select id="banner-style" label="Style" bind:selected={selectedVariant} labelPlacement="left">
+        {#each variants as v (v.value)}
+            <SelectItem value={v.value} text={v.label} />
+        {/each}
+    </Select>
+
+    <Checkbox id="banner-important" name="banner-important" label="Important?" bind:checked={important} />
+
+    <Checkbox id="banner-pinned" name="banner-pinned" label="Pinned?" bind:checked={pinned} />
+
+    <button
+        type="button"
+        class="s-btn s-btn__filled ml-auto"
+        onclick={() => visible = true}
+    >
+        Show example
+    </button>
+</div>
diff --git a/packages/stacks-docs-next/src/components/BannerPreview.svelte b/packages/stacks-docs-next/src/components/BannerPreview.svelte
new file mode 100644
index 0000000000..568c03573f
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/BannerPreview.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconAlert, IconCross } from '@stackoverflow/stacks-icons/icons';
+
+    type Variant = 'info' | 'success' | 'warning' | 'danger' | 'featured' | 'activity';
+
+    interface Props {
+        variant?: Variant;
+        important?: boolean;
+        class?: string;
+    }
+
+    let { variant, important = false, class: extraClass = '' }: Props = $props();
+
+    const bannerClass = $derived(
+        ['s-banner is-pinned ps-relative', variant && `s-banner__${variant}`, important && 's-banner__important', extraClass]
+            .filter(Boolean).join(' ')
+    );
+</script>
+
+<aside class={bannerClass} role="presentation" aria-hidden="false" style="z-index: 1;">
+    <span class="s-banner--icon"><Icon src={IconAlert} /></span>
+    <span>
+        <strong>Stacks is currently frozen in read-only mode.</strong> Contact the team to restore access.
+    </span>
+    <div class="s-banner--actions">
+        <button type="button" class="s-link s-banner--dismiss"><Icon src={IconCross} /></button>
+    </div>
+</aside>
diff --git a/packages/stacks-docs-next/src/components/ClassTable.svelte b/packages/stacks-docs-next/src/components/ClassTable.svelte
new file mode 100644
index 0000000000..c6a6381676
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/ClassTable.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconCheckFillCircle } from '@stackoverflow/stacks-icons/icons';
+
+    export type ClassTableRow = {
+        class: string;
+        /** The parent element this class must be a child of */
+        parent?: string;
+        /** What class this modifies — used on component pages */
+        modifies?: string;
+        /** CSS property output — used on base utility pages */
+        output?: string;
+        /** Human-readable description — used on component pages */
+        description?: string;
+        /** Human-readable definition — used on base utility pages */
+        define?: string;
+        /** Whether the class can be triggered on hover */
+        hover?: boolean;
+        /** Whether the class can be triggered on focus */
+        focus?: boolean;
+        /** Whether the class has a responsive variant */
+        responsive?: boolean;
+        /** Whether the class applies in print context */
+        print?: boolean;
+    };
+
+    type ColKey = keyof Omit<ClassTableRow, 'class'>;
+
+    interface Props {
+        classes: ClassTableRow[];
+        /**
+         * Show an expand button when the table is tall enough to warrant it.
+         * Defaults to true.
+         */
+        expandable?: boolean;
+        /**
+         * Label for the expand button. Defaults to "Show All Classes".
+         * Override for tables used in non-class contexts.
+         */
+        expandButtonText?: string;
+        /**
+         * Whether to render the column heading row. Defaults to true.
+         * Set to false for tables embedded in contexts that provide their own headings.
+         */
+        showHeadings?: boolean;
+        /**
+         * Override individual column heading labels.
+         * e.g. { class: 'Selector', description: 'Notes' }
+         */
+        headings?: Partial<Record<'class' | ColKey, string>>;
+    }
+
+    let {
+        classes,
+        expandable = false,
+        expandButtonText = 'Show All Classes',
+        showHeadings = true,
+        headings = {},
+    }: Props = $props();
+
+    let expanded = $state(false);
+
+    const defaultLabels: Record<'class' | ColKey, string> = {
+        class: 'Class',
+        parent: 'Parent',
+        modifies: 'Modifies',
+        output: 'Output',
+        description: 'Description',
+        define: 'Definition',
+        hover: 'Hover?',
+        focus: 'Focus?',
+        responsive: 'Responsive?',
+        print: 'Print?',
+    };
+
+    function label(col: 'class' | ColKey): string {
+        return headings[col] ?? defaultLabels[col];
+    }
+
+    const booleanIconCols: ColKey[] = ['hover', 'focus', 'responsive', 'print'];
+
+    // Show columns in a fixed order, only those with at least one value.
+    const orderedCols: ColKey[] = ['output', 'description', 'define', 'parent', 'modifies', 'hover', 'focus', 'responsive', 'print'];
+    const activeCols = $derived(
+        orderedCols.filter(col => classes.some(r => r[col] !== undefined))
+    );
+</script>
+
+<!-- role="region" + aria-label satisfies the a11y requirement for tabindex on a non-interactive element -->
+<div
+    role="region"
+    aria-label={label('class') + ' table'}
+    tabindex="0"
+    class="overflow-x-auto s-anchors s-anchors__underlined {expandable && !expanded ? 'v-truncate-fade' : ''}"
+>
+    <table class="s-table s-table__bx-simple">
+        {#if showHeadings}
+            <thead>
+                <tr>
+                    <th scope="col">{label('class')}</th>
+                    {#each activeCols as col (col)}
+                        <th scope="col" class="{col === 'description' || col === 'define' ? 's-table--cell5' : ''} {booleanIconCols.includes(col) ? 'ta-center' : ''}">{label(col)}</th>
+                    {/each}
+                </tr>
+            </thead>
+        {/if}
+        <tbody class="fs-caption">
+            {#each classes as row (row.class)}
+                <tr>
+                    <th scope="row"><code>{row.class}</code></th>
+                    {#each activeCols as col (col)}
+                        <td class="{col === 'output' ? 'ff-mono' : ''} {booleanIconCols.includes(col) ? 'ta-center' : ''}">
+                            {#if booleanIconCols.includes(col)}
+                                {#if (row as Record<string, unknown>)[col]}
+                                    <Icon src={IconCheckFillCircle} class="fc-green-400 w16 h16" title="Yes" />
+                                {/if}
+                            {:else}
+                                {@const val = String((row as Record<string, unknown>)[col] ?? '')}
+                                {#if val === 'N/A'}
+                                    <span class="fc-black-350">N/A</span>
+                                {:else if val.startsWith('.')}
+                                    <code>{val}</code>
+                                {:else}
+                                    {val}
+                                {/if}
+                            {/if}
+                        </td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>
+
+<style>
+    code {
+        background-color: var(--black-200);
+        color: var(--black-600);
+        font-family: var(--ff-mono);
+        font-size: var(--fs-fine);
+        padding: var(--su2) var(--su4);
+    }
+</style>
+
+{#if expandable && !expanded}
+    <button
+        type="button"
+        class="s-btn s-btn__tonal s-btn__sm w100 mt2 mb32"
+        aria-expanded="false"
+        onclick={() => expanded = true}
+    >
+        {expandButtonText}
+    </button>
+{:else}
+    <div class="mb32"></div>
+{/if}
diff --git a/packages/stacks-docs-next/src/components/Contents.svelte b/packages/stacks-docs-next/src/components/Contents.svelte
index 3097fed471..355a943384 100644
--- a/packages/stacks-docs-next/src/components/Contents.svelte
+++ b/packages/stacks-docs-next/src/components/Contents.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconChevron16Down, IconChevron16Up } from '@stackoverflow/stacks-icons'
 
   interface TocItem {
     id: string;
@@ -17,8 +15,6 @@
   let indicatorHeight = $state(0);
   let navElement: HTMLElement | null = null;
   let linkElements: Map<string, HTMLElement> = new SvelteMap();
-  let isOpen = $state(false);
-
   // Flatten toc to get all items including children
   function flattenToc(items: TocItem[]): TocItem[] {
     const result: TocItem[] = [];
@@ -72,43 +68,40 @@
   $effect(() => {
     if (typeof window === 'undefined' || allItems.length === 0) return;
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        // Find the first intersecting heading
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const id = entry.target.id;
-            if (activeId !== id) {
-              activeId = id;
-              updateIndicatorPosition(id);
-            }
-            break;
-          }
+    // The active item is the last heading that has scrolled past the
+    // top threshold — this is more accurate than IntersectionObserver
+    // which can fire too early when a heading enters the viewport.
+    const OFFSET = 120; // px from the top of the viewport
+
+    function updateActive() {
+      let found: string | null = null;
+
+      for (const item of allItems) {
+        const el = document.getElementById(item.id);
+        if (!el) continue;
+        if (el.getBoundingClientRect().top <= OFFSET) {
+          found = item.id;
+        } else {
+          break; // headings are in DOM order — stop once we pass the threshold
         }
-      },
-      {
-        rootMargin: '-100px 0px -66% 0px',
-        threshold: 0.5
       }
-    );
 
-    // Wait for DOM to be ready
-    const timeoutId = setTimeout(() => {
-      allItems.forEach(item => {
-        const element = document.getElementById(item.id);
-        if (element) observer.observe(element);
-      });
-
-      // Set initial active
-      if (allItems.length > 0 && !activeId) {
-        activeId = allItems[0].id;
-        updateIndicatorPosition(allItems[0].id);
+      const next = found ?? (allItems.length > 0 ? allItems[0].id : null);
+      if (next && next !== activeId) {
+        activeId = next;
+        updateIndicatorPosition(next);
       }
+    }
+
+    // Wait for DOM to be ready then attach scroll listener
+    const timeoutId = setTimeout(() => {
+      updateActive();
+      window.addEventListener('scroll', updateActive, { passive: true });
     }, 50);
 
     return () => {
       clearTimeout(timeoutId);
-      observer.disconnect();
+      window.removeEventListener('scroll', updateActive);
     };
   });
 
@@ -131,19 +124,11 @@
   }
 </script>
 
-<aside class="flex--item3 md:order-first ml32 md:ml0">
-  {#if toc.length > 0}
-    <div class="ps-sticky t0 py24 mt6 pr24 md:pb0 overflow-auto hmx-screen md:hmx-initial">
-      <button
-        class="d-none md:d-block s-btn s-btn__tonal s-btn__icon w100 mb12 d-flex jc-space-between"
-        onclick={() => isOpen = !isOpen}
-      >
-        <Icon src={isOpen ? IconChevron16Up : IconChevron16Down} />
-        Contents
-      </button>
-
-      <nav bind:this={navElement} class={`ps-relative d-block ${!isOpen ? 'd-block md:d-none' : ''}`}>
-        <h2 class="fs-body2 fw-bold mb12 px6 fc-black-400 d-block sm:d-none">Contents</h2>
+{#if toc.length > 0}
+<aside class="layout-toc fl-shrink0 w30 wmn2 wmx3 md:d-none ff-stack-sans-headline">
+    <div class="ps-sticky t0 py24 mt6 px32 md:pb0 overflow-auto hmx-screen md:hmx-initial">
+      <nav bind:this={navElement} class="ps-relative">
+        <h2 class="fs-body2 fw-bold mb12 px6 fc-black-400">Contents</h2>
 
         <div
           class="contents-indicator ps-absolute l0 r0 z-base pe-none"
@@ -158,9 +143,8 @@
                 use:registerLink={item.id}
                 class="s-navigation--item fs-caption bar0 ps-relative fw-bold fc-black ai-start"
                 class:is-active={activeId === item.id}
-                onclick={() => isOpen = false}
               >
-                <span class="fl-shrink0 w24 d-flex ai-center fc-orange-400">{(index + 1).toString().padStart(2, "0")}</span>
+                <span class="fl-shrink0 w24 d-flex ai-center fc-theme-primary">{(index + 1).toString().padStart(2, "0")}</span>
                 <span>{item.value}</span>
               </a>
               {#if item.children && item.children.length > 0}
@@ -172,7 +156,6 @@
                         use:registerLink={child.id}
                         class="s-navigation--item fs-caption bar0 ps-relative"
                         class:is-active={activeId === child.id}
-                        onclick={() => isOpen = false}
                       >
                         {child.value}
                       </a>
@@ -185,8 +168,8 @@
         </ul>
       </nav>
     </div>
-  {/if}
 </aside>
+{/if}
 
 <style>
   .contents-indicator {
diff --git a/packages/stacks-docs-next/src/components/Example.svelte b/packages/stacks-docs-next/src/components/Example.svelte
new file mode 100644
index 0000000000..bf9096e1fa
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/Example.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        children: Snippet;
+    }
+
+    let { children }: Props = $props();
+</script>
+
+<div class="ba bc-black-225 p16 mb32 overflow-visible example-container">
+    {@render children()}
+</div>
+
+<style>
+    /* Reset to system sans-serif inside examples so rendered components
+       reflect what users see in a product, not the docs' custom font. */
+    .example-container {
+        --ff-sans: -apple-system, BlinkMacSystemFont,
+            "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
+        font-family: var(--ff-sans);
+        font-weight: initial;
+    }
+</style>
diff --git a/packages/stacks-docs-next/src/components/Grid.svelte b/packages/stacks-docs-next/src/components/Grid.svelte
index 528c2b58b1..59e969ce8b 100644
--- a/packages/stacks-docs-next/src/components/Grid.svelte
+++ b/packages/stacks-docs-next/src/components/Grid.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-
   let { children } = $props();
-
-  const columnCount = setContext('columnCount', writable(0));
 </script>
 
-<div class={`doc__grid d-grid grid__${$columnCount} sm:grid__1 g12`}>
+<div class="doc-grid mb16">
   {@render children()}
 </div>
+
+<style>
+  .doc-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+    gap: var(--su12);
+  }
+  @media (max-width: 48.75rem) {
+    .doc-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/packages/stacks-docs-next/src/components/GridColumn.svelte b/packages/stacks-docs-next/src/components/GridColumn.svelte
index f0c5e98118..349c3f0ef1 100644
--- a/packages/stacks-docs-next/src/components/GridColumn.svelte
+++ b/packages/stacks-docs-next/src/components/GridColumn.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-
   let { children, padding = true, extraClasses = "bg-black-200", ...rest } = $props();
-
-  getContext('columnCount').update((i: number) => i + 1)
 </script>
 
-<div class={`flex--item ps-relative column ${extraClasses}`} {...rest} class:p24={padding}>
+<div class={`fl-grow1 ps-relative column ${extraClasses}`} {...rest} class:p24={padding}>
   <div class="column__inner h100">
     {@render children()}
   </div>
diff --git a/packages/stacks-docs-next/src/components/Navigation.svelte b/packages/stacks-docs-next/src/components/Navigation.svelte
index 4838d2d8f4..84f1c8cc94 100644
--- a/packages/stacks-docs-next/src/components/Navigation.svelte
+++ b/packages/stacks-docs-next/src/components/Navigation.svelte
@@ -124,7 +124,7 @@
     border-radius: 6px !important;
   }
   .s-navigation--item:hover {
-    background: var(--orange-400) !important;
+    background: var(--theme-primary) !important;
     color: var(--white) !important;
   }
 	.s-navigation--item.is-selected,
diff --git a/packages/stacks-docs-next/src/components/PreviewTable.svelte b/packages/stacks-docs-next/src/components/PreviewTable.svelte
new file mode 100644
index 0000000000..7fdba57a77
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/PreviewTable.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    export type PreviewTableRow = {
+        classes: string[];
+        description: string;
+        [key: string]: unknown;
+    };
+
+    interface Props {
+        rows: PreviewTableRow[];
+        /** Label for the class column. Defaults to "Class". */
+        columnLabel?: string;
+        /** Whether to show the class column. Defaults to true. */
+        showClasses?: boolean;
+        /**
+         * Snippet that receives the row and renders the live example.
+         * e.g. {#snippet example(row)}<Bling type={row.type} />{/snippet}
+         */
+        example: Snippet<[PreviewTableRow]>;
+    }
+
+    let { rows, columnLabel = 'Class', showClasses = true, example }: Props = $props();
+</script>
+
+<div class="overflow-x-auto">
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Example</th>
+                {#if showClasses}
+                    <th scope="col" class="s-table--cell5">{columnLabel}</th>
+                {/if}
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each rows as row, i (i)}
+                <tr>
+                    <td class="va-middle pr8">
+                        {@render example(row)}
+                    </td>
+                    {#if showClasses}
+                        <td class="va-middle">
+                            <div class="d-flex g4 fw-wrap">
+                                {#each row.classes as cls (cls)}
+                                    {#if cls === 'N/A'}
+                                        <span class="fc-black-350">N/A</span>
+                                    {:else}
+                                        <code>{cls}</code>
+                                    {/if}
+                                {/each}
+                            </div>
+                        </td>
+                    {/if}
+                    <td class="va-middle">{row.description}</td>
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>
diff --git a/packages/stacks-docs-next/src/components/ProseContent.svelte b/packages/stacks-docs-next/src/components/ProseContent.svelte
new file mode 100644
index 0000000000..b886bbf88e
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/ProseContent.svelte
@@ -0,0 +1,75 @@
+<p>Stacks adds a new <code>s-prose</code> class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:</p>
+<pre><code class="language-html">&lt;article class="s-prose"&gt;
+  &lt;h1&gt;Garlic bread with cheese: What the science tells us&lt;/h1&gt;
+  &lt;p&gt;For years parents have espoused the health benefits of eating garlic bread…&lt;/p&gt;
+&lt;/article&gt;</code></pre>
+
+<h2>What to expect from here on out</h2>
+<p>What follows from here is just a bunch of absolute nonsense we've written to dogfood the component itself. It includes every sensible typographic element we could think of, like <strong>bold text</strong>, unordered lists, ordered lists, code blocks, block quotes, <em>and even italics</em>.</p>
+<p>It's important to cover all of these use cases for a few reasons:</p>
+<ol>
+    <li>We want everything to look good out of the box.</li>
+    <li>Really just the first reason, that's the whole point of the plugin.</li>
+    <li>Here's a third pretend reason though a list with three items looks more realistic than a list with two items.</li>
+</ol>
+
+<h3>Typography should be easy</h3>
+<p>So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.</p>
+<p>Something a wise person once told me about typography is:</p>
+<blockquote><p>Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.</p></blockquote>
+<p>It's probably important that images look okay here by default as well:</p>
+<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="two people performing a transaction at a counter on either side of a point of sale system in a trendy salon" />
+<p>Now I'm going to show you an example of an unordered list to make sure that looks good, too:</p>
+<ul>
+    <li>So here is the first item in this list.</li>
+    <li>In this example we're keeping the items short.</li>
+    <li>Later, we'll use longer, more complex list items.</li>
+</ul>
+
+<h2>What if we stack headings?</h2>
+<h3>We should make sure that looks good, too.</h3>
+<p>Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.</p>
+<h3>When a heading comes after a paragraph…</h3>
+<p>When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.</p>
+<ul>
+    <li>
+        <p><strong>I often do this thing where list items have headings.</strong></p>
+        <p>For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.</p>
+    </li>
+    <li>
+        <p><strong>Since this is a list, I need at least two items.</strong></p>
+        <p>I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item.</p>
+    </li>
+</ul>
+
+<h2>Code should look okay by default.</h2>
+<p>Here's what a default <code>tailwind.config.js</code> file looks like at the time of writing:</p>
+<pre><code class="language-js">module.exports = &#123;
+  purge: [],
+  theme: &#123; extend: &#123;&#125; &#125;,
+  variants: &#123;&#125;,
+  plugins: [],
+&#125;</code></pre>
+<p>Hopefully that looks good enough to you.</p>
+
+<h2>There are other elements we need to style</h2>
+<p>I almost forgot to mention links, like <a href="https://stackoverflow.com">Stack Overflow</a>.</p>
+<p>We even included table styles, check it out:</p>
+<div class="s-table-container">
+    <table class="s-table">
+        <thead>
+            <tr><th>Wrestler</th><th>Origin</th><th>Finisher</th></tr>
+        </thead>
+        <tbody>
+            <tr><td>Bret "The Hitman" Hart</td><td>Calgary, AB</td><td>Sharpshooter</td></tr>
+            <tr><td>Stone Cold Steve Austin</td><td>Austin, TX</td><td>Stone Cold Stunner</td></tr>
+            <tr><td>Randy Savage</td><td>Sarasota, FL</td><td>Elbow Drop</td></tr>
+        </tbody>
+    </table>
+</div>
+<p>We also need to make sure inline code looks good, like if I wanted to talk about <code>&lt;span&gt;</code> elements or tell you the good news about <code>@tailwindcss/typography</code>.</p>
+<h3>Sometimes I even use <code>code</code> in headings</h3>
+<p>Even though it's probably a bad idea, and historically I've had a hard time making it look good. This <em>"wrap the code blocks in backticks"</em> approach is the best we've come up with.</p>
+<h3>We haven't used an <code>hr</code> yet</h3>
+<hr />
+<p>We just used one. What do you think? Pretty nice, right?</p>
diff --git a/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte b/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte
new file mode 100644
index 0000000000..8fb26e3ff2
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte
@@ -0,0 +1,81 @@
+<h1>The Comprehensive Formatting Test</h1>
+
+<h2>Code Formatting</h2>
+<ul>
+    <li>Inline code formatting: <code>System.out.println("Hello World!");</code></li>
+    <li>Block code formatting:</li>
+</ul>
+<pre><code>System.out.println("Hello World!");
+System.out.println("Code Block!");</code></pre>
+<pre><code class="language-html">&lt;div class="s-progress s-progress__stepped"&gt;
+    &lt;div class="s-progress--step is-complete"&gt;
+        &lt;a href="…" class="s-progress--stop"&gt;…&lt;/a&gt;
+        &lt;div class="s-progress--bar"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h2>Headers</h2>
+<h1>H1 Header</h1>
+<h2>H2 Header</h2>
+<h3>H3 Header</h3>
+<h4>H4 Header</h4>
+<h5>H5 Header</h5>
+<h6>H6 Header</h6>
+
+<h2>Emphasis</h2>
+<p>This is <em>italic</em> and this is <strong>bold</strong>. <strong><em>Bold and italic.</em></strong></p>
+
+<h2>Lists</h2>
+<h3>Unordered</h3>
+<ul>
+    <li>Item one</li>
+    <li>Item two
+        <ul>
+            <li>Nested item A</li>
+            <li>Nested item B</li>
+        </ul>
+    </li>
+    <li>Item three</li>
+</ul>
+<h3>Ordered</h3>
+<ol>
+    <li>First item</li>
+    <li>Second item
+        <ol>
+            <li>Nested first</li>
+            <li>Nested second</li>
+        </ol>
+    </li>
+    <li>Third item</li>
+</ol>
+
+<h2>Blockquotes</h2>
+<blockquote>
+    <p>This is a blockquote. It can span multiple lines and should be styled appropriately.</p>
+    <p>It can also have multiple paragraphs.</p>
+</blockquote>
+
+<h2>Links</h2>
+<p>Here's a <a href="https://stackoverflow.com">link to Stack Overflow</a>.</p>
+
+<h2>Images</h2>
+<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Placeholder" />
+
+<h2>Tables</h2>
+<div class="s-table-container">
+    <table class="s-table">
+        <thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead>
+        <tbody>
+            <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td></tr>
+            <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<h2>Horizontal Rules</h2>
+<hr />
+<p>Content after a horizontal rule.</p>
+
+<h2>Inline elements</h2>
+<p>This paragraph contains <strong>bold</strong>, <em>italic</em>, <code>inline code</code>, and a <a href="#">link</a>.</p>
+<p>It can also include <sup>superscript</sup> and <sub>subscript</sub> text.</p>
diff --git a/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte
new file mode 100644
index 0000000000..7ae818ebaa
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    interface Props {
+        /** Initial content for the editor (Markdown) */
+        content?: string;
+        /** Options passed directly to StacksEditor */
+        options?: Record<string, unknown>;
+        /** Additional CSS classes for the container */
+        class?: string;
+    }
+
+    let { content = '', options = {}, class: extraClass = '' }: Props = $props();
+
+    let container: HTMLDivElement;
+
+    onMount(async () => {
+        const [{ StacksEditor }] = await Promise.all([
+            import('@stackoverflow/stacks-editor'),
+            import('@stackoverflow/stacks-editor/dist/styles.css'),
+        ]);
+
+        new StacksEditor(container, content, options);
+    });
+</script>
+
+<div bind:this={container} class={extraClass}></div>
diff --git a/packages/stacks-docs-next/src/components/TableSortDemo.svelte b/packages/stacks-docs-next/src/components/TableSortDemo.svelte
new file mode 100644
index 0000000000..bf13c7d775
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/TableSortDemo.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconChevron16Up, IconChevron16Down, IconChevron16UpDown } from '@stackoverflow/stacks-icons/icons';
+
+    const rows = [
+        { season: 'Winter', month: 'December', monthSort: 12, temp: 2  },
+        { season: 'Spring', month: 'March',    monthSort: 3,  temp: 13 },
+        { season: 'Summer', month: 'June',     monthSort: 6,  temp: 25 },
+        { season: 'Fall',   month: 'September',monthSort: 9,  temp: 13 },
+    ];
+
+    let col = $state<number | null>(null);
+    let dir = $state<'asc' | 'desc'>('asc');
+
+    const sorted = $derived.by(() => {
+        if (col === null) return rows;
+        return [...rows].sort((a, b) => {
+            let v: number;
+            if (col === 0)      v = a.season.localeCompare(b.season);
+            else if (col === 1) v = a.monthSort - b.monthSort;
+            else                v = a.temp - b.temp;
+            return dir === 'asc' ? v : -v;
+        });
+    });
+
+    function sort(c: number) {
+        if (col === c) dir = dir === 'asc' ? 'desc' : 'asc';
+        else { col = c; dir = 'asc'; }
+    }
+
+    function icon(c: number) {
+        if (col !== c) return IconChevron16UpDown;
+        return dir === 'asc' ? IconChevron16Up : IconChevron16Down;
+    }
+
+    const headers = ['Season', 'Starts in month', 'Typical temperature in °C'];
+</script>
+
+<div class="s-table-container">
+    <table class="s-table s-table__sortable">
+        <thead>
+            <tr>
+                {#each headers as h, c (c)}
+                    <th scope="col" class:is-sorted={col === c} data-s-table-target="column">
+                        <button type="button" onclick={() => sort(c)}>
+                            {h}
+                            <Icon src={icon(c)} aria-hidden="true" />
+                        </button>
+                    </th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each sorted as r (r.season)}
+                <tr>
+                    <td>{r.season}</td>
+                    <td>{r.month}</td>
+                    <td>{r.temp}</td>
+                </tr>
+            {/each}
+            <tr class="fw-bold">
+                <td colspan="2">Average temperature</td>
+                <td>13</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/packages/stacks-docs-next/src/docs/private b/packages/stacks-docs-next/src/docs/private
index 71343d3bf6..2361368c91 160000
--- a/packages/stacks-docs-next/src/docs/private
+++ b/packages/stacks-docs-next/src/docs/private
@@ -1 +1 @@
-Subproject commit 71343d3bf6d083067a72bc72a2d9eb86b6b6ee69
+Subproject commit 2361368c91fa01d9b2e1cdd4ceede6014b0a8dad
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte b/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte
index 391961990c..ac8f86740a 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte
@@ -8,7 +8,7 @@
   const { business = false } = $props()
 </script>
 
-<div class="colors overflow-auto">
+<div class="colors">
   {#each colors as color (color.cssVar)}
     <ColorSwatch
       {color}
@@ -23,7 +23,7 @@
 <style>
   .colors {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 10px;
     grid-auto-rows: 120px;
   }
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte b/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte
index 19fbb2d178..ca0a8f436e 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte
@@ -60,7 +60,7 @@
 </script>
 
 
-<Navigation class="mbn24" label="Theme" overflow="scroll">
+<Navigation class="mb8" label="Theme" overflow="scroll">
   {#each themes as theme, index (theme.name)}
     <NavigationItem 
       onclick={() => selected = index}
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte
index a3b4b4e1b6..62bc6d85e6 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte
@@ -162,7 +162,7 @@
 
 <div>
   {#key selectedWeight.file}
-    <Navigation class="ws-nowrap" label="Font weight" overflow="scroll">
+    <Navigation class="mb8" label="Font weight" overflow="scroll">
       {#each fontWeights as weight (weight.file)}
         <NavigationItem
           text={weight.label}
@@ -173,7 +173,7 @@
     </Navigation>
 
     <Grid>
-      <GridColumn extraClasses="bg-brand-orange">
+      <GridColumn style="background: var(--brand-color-orange)">
         {#if loading}
           <div class="ta-center p32">
             <div class="fs-headline2 fc-medium">Loading font...</div>
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte
index 0d730ff991..2c8899aadf 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte
@@ -12,7 +12,7 @@
     <div class="my12 ta-center">Text Normal</div>
     <div class="my12 ta-center fs-caption">Text Normal</div>
   </GridColumn>
-  <GridColumn extraClasses="bg-brand-beige d-flex">
+  <GridColumn extraClasses="d-flex" style="background: var(--brand-color-beige)">
     <svg height="377" viewBox="0 0 377 377" width="377" class="d-block w100 h-auto">
       <path d="m87 22h290v328h-290z" fill="#201c1d"/>
       <path d="m99.6602 35.1046h12.8207v12.6955h-12.8207z" fill="#ff5e00"/>
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte
index 638b2d42b9..cda723d10f 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte
@@ -13,7 +13,7 @@
   let notch = $state(true);
 </script>
 
-<Navigation class="ws-nowrap" label="Font weight" overflow="scroll">
+<Navigation class="mb8" label="Font weight" overflow="scroll">
   {#each weights as weight (weight)}
     <NavigationItem
       text={weight}
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/index.md b/packages/stacks-docs-next/src/docs/public/brand/typography/index.md
index cef2757d94..bd27260343 100644
--- a/packages/stacks-docs-next/src/docs/public/brand/typography/index.md
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/index.md
@@ -29,6 +29,7 @@ Our primary typeface is called **Stack Sans**. Crafted uniquely for Stack Overfl
 
 <TypographyWeights />
 
+<div class="mt16">
 <Grid>
   <GridColumn extraClasses="bg-brand-yellow d:fc-white lh-md">
 
@@ -49,6 +50,7 @@ Our primary typeface is called **Stack Sans**. Crafted uniquely for Stack Overfl
 
   </GridColumn>
 </Grid>
+</div>
 
 ## Glyph set
 
diff --git a/packages/stacks-docs-next/src/docs/public/copy/naming.md b/packages/stacks-docs-next/src/docs/public/copy/naming.md
index ffe5ac8f81..9873c287ae 100644
--- a/packages/stacks-docs-next/src/docs/public/copy/naming.md
+++ b/packages/stacks-docs-next/src/docs/public/copy/naming.md
@@ -74,7 +74,7 @@ The legal entity is **Stack Exchange Inc.** However, most of the time we refer t
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>StackOverflow</li>
       <li>Stackoverflow</li>
       <li>stackoverflow</li>
@@ -84,7 +84,7 @@ The legal entity is **Stack Exchange Inc.** However, most of the time we refer t
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow</li>
     </ul>
   </GridColumn>
@@ -99,7 +99,7 @@ However, when disambiguation is necessary, use these conventions:
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> When referring to the company</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow (in most contexts)</li>
       <li>“We at Stack Overflow believe…”</li>
       <li>“Stack Overflow announced today…”</li>
@@ -108,7 +108,7 @@ However, when disambiguation is necessary, use these conventions:
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> When referring to website</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow (in most contexts)</li>
       <li>“stackoverflow.com” (when being very specific)</li>
       <li>“Ask a question on Stack Overflow”</li>
@@ -124,7 +124,7 @@ Use contextual clues or specific phrasing when you need to make the distinction
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>“Stack Overflow has 183+ public platforms, and business products”</li>
       <li>“Visit stackoverflow.com to ask questions, or try Stack Internal for your team”</li>
       <li>“Unlike the public Stack Overflow site, Stack Internal is private to your organization”</li>
@@ -146,7 +146,7 @@ Our data licensing product provides ethical access to Stack Overflow’s vast da
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow Knowledge Solutions</li>
       <li>SOKS</li>
       <li>OverflowAPI</li>
@@ -157,7 +157,7 @@ Our data licensing product provides ethical access to Stack Overflow’s vast da
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Data Licensing</li>
     </ul>
   </GridColumn>
@@ -172,7 +172,7 @@ Our advertising platform for reaching developers and technologists.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow Talent</li>
       <li>Stack Overflow Employer Branding</li>
       <li>Stack Overflow Advertising</li>
@@ -182,7 +182,7 @@ Our advertising platform for reaching developers and technologists.
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Ads</li>
     </ul>
   </GridColumn>
@@ -197,7 +197,7 @@ In November 2025 we renamed **Stack Overflow for Teams** to **Stack Internal**.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow for Teams</li>
       <li>SO4T</li>
       <li>SOE</li>
@@ -211,7 +211,7 @@ In November 2025 we renamed **Stack Overflow for Teams** to **Stack Internal**.
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Internal</li>
     </ul>
   </GridColumn>
@@ -224,7 +224,7 @@ Both **Stack \_\_\_** and **Stack Overflow \_\_\_** are acceptable when referrin
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Use Stack ___</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Inside the product themselves</li>
       <li>Internal communications (presentations, emails, Slack)</li>
       <li>Official social media posts from company accounts</li>
@@ -234,7 +234,7 @@ Both **Stack \_\_\_** and **Stack Overflow \_\_\_** are acceptable when referrin
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Use Stack Overflow ___</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>External communications where context is unclear</li>
       <li>First mention of a product in outreach materials</li>
       <li>App stores, marketplaces, and review sites</li>
@@ -251,7 +251,7 @@ Stack Internal tier names are unchanged from previous naming.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow Enterprise</li>
       <li>Stack Overflow for Enterprise</li>
       <li>Stack Overflow Business</li>
@@ -261,7 +261,7 @@ Stack Internal tier names are unchanged from previous naming.
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Internal (Enterprise)</li>
       <li>Stack Internal (Business)</li>
       <li>Use tier name alone after first full mention (e.g., "Enterprise")</li>
@@ -276,7 +276,7 @@ When referring to Stack Internal instances and users in product contexts:
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Team (capitalized when referring to an instance)</li>
       <li>Members</li>
       <li>Users</li>
@@ -285,7 +285,7 @@ When referring to Stack Internal instances and users in product contexts:
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>team (lowercase, where "Stack Internal" is too formal)</li>
       <li>teammates (for the collective name of users)</li>
       <li>Stack Internal (when being specific e.g., …your Stack Internal…)</li>
@@ -300,7 +300,7 @@ The OverflowAI brand has been retired. When referring to AI functionality:
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>OverflowAI</li>
       <li>Overflow AI</li>
       <li>Stack AI</li>
@@ -310,7 +310,7 @@ The OverflowAI brand has been retired. When referring to AI functionality:
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Refer to specific features by name (e.g., "Enhanced Search")</li>
       <li>Use "Stack Internal's AI features" when referring collectively</li>
       <li>Avoid collective references when possible</li>
@@ -325,7 +325,7 @@ The following brands and visual identities have been retired:
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow Labs</li>
       <li>Collectives on Stack Overflow visual identity</li>
       <li>Old style product logos (i.e., Teams, Talent, Advertising)</li>
@@ -334,7 +334,7 @@ The following brands and visual identities have been retired:
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Refer to the <a href="https://stackoverflow.blog/releases" class="s-link__underlined">releases</a> section on the blog</li>
       <li>Refer to these products in text when contextually appropriate</li>
       <li>Link to historical content (blog posts, documentation)</li>
diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md
index 59f7690718..e93b15ce99 100644
--- a/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md
+++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md
@@ -69,14 +69,14 @@ We want to help folks fix errors quickly, so error messages should be concise. S
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Can't create 'Engineering' because a team with that name already exists. Specify a different name."</li>
       <li>"Your notification failed and needs to be re-authorized."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"'Engineering' already exists. Try another team name."</li>
       <li>"Notification failed, please <a href="#">re-authorize it</a>."</li>
     </ul>
@@ -92,13 +92,13 @@ Apologize when it's the system's fault and let the user know it's not their faul
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Your changes couldn't be saved."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"We couldn't save your changes."</li>
     </ul>
   </GridColumn>
@@ -111,14 +111,14 @@ Sometimes it's the user's fault, but there are ways to tell them without soundin
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"You've missed your name."</li>
       <li>"You can't leave this blank."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Please enter your name."</li>
       <li>"Please enter a team name."</li>
     </ul>
@@ -136,13 +136,13 @@ Tone is how you say something. A message's tone should depend on how serious the
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"The password entered does not match our records. Please re-enter your password."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"That password's not right. Try again."</li>
     </ul>
   </GridColumn>
@@ -153,13 +153,13 @@ At the same time, error messages are not the place to be clever or make jokes. T
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Whoops! Looks like your card was declined. Better ask Mom for another one."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"This card was declined. Try another payment method."</li>
     </ul>
   </GridColumn>
@@ -225,14 +225,14 @@ A good success message provides clear information that the performed action was
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Successfully saved."</li>
       <li>"Upgrade complete."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Your account details have been saved."</li>
       <li>"You've upgraded to the Business tier of Teams."</li>
     </ul>
@@ -246,14 +246,14 @@ Tone is how you say something. Excitement makes sense for successfully finishing
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Thanks for updating your email."</li>
       <li>"Account created."</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>"Your email has been updated."</li>
       <li>"Thanks for signing up. Your account has been created."</li>
     </ul>
diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md
index 2aa0fb7757..dd19b46331 100644
--- a/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md
+++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md
@@ -8,7 +8,7 @@ updated: 2026-02-12
   import Grid from '$components/Grid.svelte'
   import GridColumn from '$components/GridColumn.svelte'
 
-  import { Icon } from '@stackoverflow/stacks-svelte';
+  import { Icon, Checkbox, TextInput } from '@stackoverflow/stacks-svelte';
   import { IconCheckFillCircle, IconCrossFillCircle } from '@stackoverflow/stacks-icons'
 </script>
 
@@ -20,51 +20,21 @@ Preferences and settings should always be written in the affirmative—even if t
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-dont-1" checked />
-        <label class="s-label fw-normal" for="affirmative-dont-1">Disable sticky header</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-dont-2" />
-        <label class="s-label fw-normal" for="affirmative-dont-2">Disable left navigation</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-dont-3" checked />
-        <label class="s-label fw-normal" for="affirmative-dont-3">Disable light mode</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-dont-4" />
-        <label class="s-label fw-normal" for="affirmative-dont-4">Disallow advertising</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-dont-5" checked />
-        <label class="s-label fw-normal" for="affirmative-dont-5">Hide your real name</label>
-      </div>
+      <Checkbox id="affirmative-dont-1" name="affirmative-dont-1" label="Disable sticky header" checked />
+      <Checkbox id="affirmative-dont-2" name="affirmative-dont-2" label="Disable left navigation" />
+      <Checkbox id="affirmative-dont-3" name="affirmative-dont-3" label="Disable light mode" checked />
+      <Checkbox id="affirmative-dont-4" name="affirmative-dont-4" label="Disallow advertising" />
+      <Checkbox id="affirmative-dont-5" name="affirmative-dont-5" label="Hide your real name" checked />
     </div>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-do-1" />
-        <label class="s-label fw-normal" for="affirmative-do-1">Enable sticky header</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-do-2" checked />
-        <label class="s-label fw-normal" for="affirmative-do-2">Enable left navigation</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-do-3" />
-        <label class="s-label fw-normal" for="affirmative-do-3">Enable dark mode</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-do-4" checked />
-        <label class="s-label fw-normal" for="affirmative-do-4">Allow advertising</label>
-      </div>
-      <div class="d-flex g8 ai-center">
-        <input class="s-checkbox" type="checkbox" id="affirmative-do-5" />
-        <label class="s-label fw-normal" for="affirmative-do-5">Show your real name</label>
-      </div>
+      <Checkbox id="affirmative-do-1" name="affirmative-do-1" label="Enable sticky header" />
+      <Checkbox id="affirmative-do-2" name="affirmative-do-2" label="Enable left navigation" checked />
+      <Checkbox id="affirmative-do-3" name="affirmative-do-3" label="Enable dark mode" />
+      <Checkbox id="affirmative-do-4" name="affirmative-do-4" label="Allow advertising" checked />
+      <Checkbox id="affirmative-do-5" name="affirmative-do-5" label="Show your real name" />
     </div>
   </GridColumn>
 </Grid>
@@ -83,44 +53,23 @@ Avoid using tooltips.
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-dont-1">Site name</label>
-        <input class="s-input" id="descriptions-dont-1" type="text" />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-dont-2">App descriptor</label>
-        <input class="s-input" id="descriptions-dont-2" type="text" />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-dont-3">Industries</label>
-        <input class="s-input" id="descriptions-dont-3" type="text" placeholder="e.g. Advertising, Finance" />
-      </div>
+      <TextInput id="descriptions-dont-1" label="Site name" />
+      <TextInput id="descriptions-dont-2" label="App descriptor" />
+      <TextInput id="descriptions-dont-3" label="Industries" placeholder="e.g. Advertising, Finance" />
     </div>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-do-1">
-          Site name
-          <p class="s-description mt2">Describes the site in the product, emails, integrations, and logs.</p>
-        </label>
-        <input class="s-input" id="descriptions-do-1" type="text" />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-do-2">
-          App descriptor
-          <p class="s-description mt2">This is automatically generated. You only need to manually set this if you're reinstalling the app.</p>
-        </label>
-        <input class="s-input" id="descriptions-do-2" type="text" />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="descriptions-do-3">
-          Industries
-          <p class="s-description mt2">Add up to 4.</p>
-        </label>
-        <input class="s-input" id="descriptions-do-3" type="text" placeholder="e.g. Advertising, Finance" />
-      </div>
+      <TextInput id="descriptions-do-1" label="Site name">
+        {#snippet description()}Describes the site in the product, emails, integrations, and logs.{/snippet}
+      </TextInput>
+      <TextInput id="descriptions-do-2" label="App descriptor">
+        {#snippet description()}This is automatically generated. You only need to manually set this if you're reinstalling the app.{/snippet}
+      </TextInput>
+      <TextInput id="descriptions-do-3" label="Industries" placeholder="e.g. Advertising, Finance">
+        {#snippet description()}Add up to 4.{/snippet}
+      </TextInput>
     </div>
   </GridColumn>
 </Grid>
@@ -135,33 +84,19 @@ Placeholder text disappears once a character is typed in the input, so the user
   <GridColumn extraClasses="bg-red-100">
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="placeholder-dont-1">Single sign-on Service URL</label>
-        <input class="s-input" id="placeholder-dont-1" type="text" placeholder="Must be https" />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="placeholder-dont-2">Role</label>
-        <input class="s-input" id="placeholder-dont-2" type="text" placeholder="Add up to 2 roles" />
-      </div>
+      <TextInput id="placeholder-dont-1" label="Single sign-on Service URL" placeholder="Must be https" />
+      <TextInput id="placeholder-dont-2" label="Role" placeholder="Add up to 2 roles" />
     </div>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheckFillCircle} /> Do</h4>
     <div class="d-flex fd-column g16">
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="placeholder-do-1">
-          Single sign-on Service URL
-          <p class="s-description mt2">Must be https</p>
-        </label>
-        <input class="s-input" id="placeholder-do-1" type="text" placeholder="https://..." />
-      </div>
-      <div class="d-flex gy4 fd-column">
-        <label class="d-block s-label" for="placeholder-do-2">
-          Role
-          <p class="s-description mt2">Add up to 2 roles</p>
-        </label>
-        <input class="s-input" id="placeholder-do-2" type="text" placeholder="e.g. Full Stack, Back-end" />
-      </div>
+      <TextInput id="placeholder-do-1" label="Single sign-on Service URL" placeholder="https://...">
+        {#snippet description()}Must be https{/snippet}
+      </TextInput>
+      <TextInput id="placeholder-do-2" label="Role" placeholder="e.g. Full Stack, Back-end">
+        {#snippet description()}Add up to 2 roles{/snippet}
+      </TextInput>
     </div>
   </GridColumn>
 </Grid>
diff --git a/packages/stacks-docs-next/src/docs/public/copy/styleguide.md b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md
index c934f6c010..b3255f38a9 100644
--- a/packages/stacks-docs-next/src/docs/public/copy/styleguide.md
+++ b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md
@@ -21,7 +21,7 @@ When Stack Overflow products appear in running text, always capitalize the full
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Sign up for stack internal today</li>
       <li>Our stack ads platform reaches millions</li>
       <li>Access stack data licensing</li>
@@ -30,7 +30,7 @@ When Stack Overflow products appear in running text, always capitalize the full
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Sign up for Stack Internal today</li>
       <li>Our Stack Ads platform reaches millions</li>
       <li>Access Stack Data Licensing</li>
@@ -46,7 +46,7 @@ Feature names should be capitalized when referring to the specific Stack Overflo
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Use enhanced search to find answers</li>
       <li>Join a collective on Stack Overflow</li>
       <li>The Enhanced Search Feature is powered by AI</li>
@@ -54,7 +54,7 @@ Feature names should be capitalized when referring to the specific Stack Overflo
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Use Enhanced Search to find answers</li>
       <li>Join a Collective on Stack Overflow</li>
       <li>Enhanced Search is powered by AI</li>
@@ -70,14 +70,14 @@ When using product-related terms generically (not referring to the Stack Overflo
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>We offer Data Licensing to our clients (when not referring to the specific product)</li>
       <li>internal knowledge sharing tools (when specifically referring to Stack Internal)</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Many companies offer data licensing to their clients</li>
       <li>Stack Internal helps teams with internal knowledge sharing</li>
       <li>We provide advertising solutions through Stack Ads</li>
@@ -95,14 +95,14 @@ Use standard possessive rules with Stack Overflow and product names.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflows’ mission</li>
       <li>Stack Internals’ features</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow’s mission</li>
       <li>Stack Internal’s features</li>
       <li>Stack Ads’ reach (or “the reach of Stack Ads”)</li>
@@ -117,14 +117,14 @@ Avoid pluralizing product names. Use “instances”, “deployments” or simil
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Multiple Stack Internals</li>
       <li>Two Stack Ads</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Multiple Stack Internal instances</li>
       <li>Two Stack Internal deployments</li>
       <li>Several Stack Ads campaigns</li>
@@ -141,7 +141,7 @@ Never use abbreviations in external-facing materials including marketing, docume
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>SO provides data licensing</li>
       <li>Try SI for your team</li>
       <li>SOE and SIE (for tiers)</li>
@@ -150,7 +150,7 @@ Never use abbreviations in external-facing materials including marketing, docume
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Overflow provides data licensing</li>
       <li>Try Stack Internal for your team</li>
       <li>Stack Internal (Enterprise)</li>
@@ -166,7 +166,7 @@ In internal Slack, emails, or presentations, abbreviations may be used for brevi
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Acceptable internally</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>SO (for Stack Overflow, after first mention)</li>
       <li>SI (for Stack Internal, after first mention)</li>
       <li>In code: Use descriptive variable names, abbreviations acceptable where conventional</li>
@@ -181,7 +181,7 @@ When referring to multiple products together, use "and" and maintain each produc
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Internal & Ads customers</li>
       <li>SI/SA users</li>
       <li>Stack Overflow’s Internal and Ads products</li>
@@ -189,7 +189,7 @@ When referring to multiple products together, use "and" and maintain each produc
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Stack Internal and Stack Ads customers</li>
       <li>Customers using Stack Internal, Stack Ads, or Stack Data Licensing</li>
       <li>Stack Overflow Business products</li>
@@ -204,7 +204,7 @@ After the first mention of a product name, you may use shortened forms if the co
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>First mention: “Stack Internal provides private knowledge management”. Second mention: “Internal helps teams collaborate…”</li>
       <li>First mention: “Stack Overflow Business includes three products”. Second mention: “Business customers have access to…”</li>
       <li>Use “the product”, “the platform”, or “it” when context is unmistakable</li>
@@ -221,7 +221,7 @@ Use sentence case for all headings. This means capitalizing the first word, the
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>User Roles</li>
       <li>Performance Overview</li>
       <li>Edit Your Profile</li>
@@ -230,7 +230,7 @@ Use sentence case for all headings. This means capitalizing the first word, the
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>User roles</li>
       <li>Performance overview</li>
       <li>Edit your profile</li>
@@ -246,7 +246,7 @@ Capitalize “Articles” when referring to the specific Stack Overflow feature
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>I’m writing an article and then I’m going to put it in our team’s articles section</li>
       <li>In articles, you can find how-to guides</li>
       <li>Create articles</li>
@@ -254,7 +254,7 @@ Capitalize “Articles” when referring to the specific Stack Overflow feature
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>I’m writing an article and then I’m going to put it in our team’s Articles section</li>
       <li>In Articles, you can find how-to guides, blog posts, and articles</li>
       <li>Create Articles</li>
@@ -269,14 +269,14 @@ Always capitalize user roles in relation to management systems.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>employees</li>
       <li>Recommended members</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Employees</li>
       <li>Recommended Members</li>
     </ul>
@@ -290,7 +290,7 @@ Always capitalize “Collective” or “Collectives” when used as a proper no
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>join the Google Cloud collective</li>
       <li>join an Collective</li>
       <li>A company’s Collective page will be located at the top right of the screen</li>
@@ -298,7 +298,7 @@ Always capitalize “Collective” or “Collectives” when used as a proper no
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>join the Google Cloud Collective</li>
       <li>join a collective</li>
       <li>A company’s collective page will be located at the top right of the screen</li>
@@ -313,7 +313,7 @@ Capitalize “Communities” and “Community” when referring to the Stack Int
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>With Communities you can help your teammates know what’s trending</li>
       <li>Subscribe to a Community and get notifications for new questions and answers</li>
     </ul>
@@ -334,7 +334,7 @@ Questions, answers, and other types of posts have **scores**. A post’s score i
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Highest voted posts</li>
       <li>Total number of votes for this answer</li>
       <li>Only top voted answers are eligible</li>
@@ -343,7 +343,7 @@ Questions, answers, and other types of posts have **scores**. A post’s score i
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Highest scored posts</li>
       <li>Total score for this answer</li>
       <li>Only top scored answers are eligible</li>
@@ -361,13 +361,13 @@ Write in the active voice, particularly if the user needs to do something.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>You should update your profile</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Your profile needs updating.</li>
     </ul>
   </GridColumn>
@@ -378,14 +378,14 @@ While it’s generally best to avoid the passive voice, in certain situations it
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>We cancelled your order</li>
       <li>We've suspended your account</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Your order has been cancelled</li>
       <li>Your account has been suspended</li>
     </ul>
@@ -399,14 +399,14 @@ Contractions make copy sound more human. Avoid contractions that sound awkward w
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>This’ll help you get answers to your questions</li>
       <li>There must've been an error with your order</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>It’s designed to help you get answers to your questions</li>
       <li>There’s an error with your order</li>
     </ul>
@@ -420,7 +420,7 @@ Use American spelling for all public-facing content. When in doubt, check the [M
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Recognise</li>
       <li>Travelled</li>
       <li>Colour</li>
@@ -429,7 +429,7 @@ Use American spelling for all public-facing content. When in doubt, check the [M
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Recognize</li>
       <li>Traveled</li>
       <li>Color</li>
@@ -445,7 +445,7 @@ Leave off possessives when referring to users or features when possible. If you
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>My Teams</li>
       <li>My settings</li>
       <li>Change my email settings</li>
@@ -453,7 +453,7 @@ Leave off possessives when referring to users or features when possible. If you
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Teams</li>
       <li>Settings</li>
       <li>Change your email settings</li>
@@ -468,14 +468,14 @@ Use “their” as a singular, gender-neutral pronoun when the gender of the sub
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>When a new user is added, he or she will be able to edit content</li>
       <li>We appreciate the guys and gals of Stack Overflow</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>When a new user is added, they'll be able to edit content</li>
       <li>We appreciate the Stack Overflow community</li>
     </ul>
@@ -489,7 +489,7 @@ Take extra care with “login” and “log in”. The former is a noun while th
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Login to ask a question</li>
       <li>Add a log in to your account</li>
       <li>Signup to ask a question</li>
@@ -498,7 +498,7 @@ Take extra care with “login” and “log in”. The former is a noun while th
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Log in to ask a question</li>
       <li>Add a login to your account</li>
       <li>Sign up to ask a question</li>
@@ -514,7 +514,7 @@ Use the abbreviated version “OK” (fully capitalized in every context). This
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Okay</li>
       <li>okay</li>
       <li>Ok</li>
@@ -522,7 +522,7 @@ Use the abbreviated version “OK” (fully capitalized in every context). This
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>OK</li>
     </ul>
   </GridColumn>
@@ -537,14 +537,14 @@ Don’t use ampersands (&) unless it’s part of a branded term. Spell out the w
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Update your email address & password</li>
       <li>Stack Overflow Q and A</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Update your email address and password</li>
       <li>Stack Overflow Q&A</li>
     </ul>
@@ -558,14 +558,14 @@ Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’9
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Admins role</li>
       <li>Moderators’s tasks</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Admin’s role</li>
       <li>Moderators’ tasks</li>
     </ul>
@@ -583,14 +583,14 @@ Use the oxford comma in sentences. Don’t use a comma to separate two distinct
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Our community is rooted in kindness, collaboration and mutual respect</li>
       <li>Thanks for contacting us, we'll be in touch soon</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Our community is rooted in kindness, collaboration, and mutual respect</li>
       <li>Thank you for contacting us. We'll be in touch soon</li>
     </ul>
@@ -604,14 +604,14 @@ The ellipsis (…) can be used in place of missing text. Avoid using ellipses in
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Avoid subjective questions… stick to fact-based questions</li>
       <li>Search...</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Avoid subjective questions. Stick to fact-based questions</li>
       <li>Search…</li>
     </ul>
@@ -631,14 +631,14 @@ Use an en dash with no spaces (–) for a fixed range of numbers. Avoid using em
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Start your free 14 day trial</li>
       <li>January 7 – 9</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Start your free 14-day trial</li>
       <li>January 7–9</li>
     </ul>
@@ -656,13 +656,13 @@ Avoid using question marks wherever possible. Reword into affirmative statements
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Want to learn more?</li>
     </ul>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Learn more</li>
     </ul>
   </GridColumn>
@@ -696,7 +696,7 @@ Don’t write dates numerically since differing international standards can lead
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>September 2, '19</li>
       <li>9-2-19</li>
       <li>September 2nd</li>
@@ -704,7 +704,7 @@ Don’t write dates numerically since differing international standards can lead
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>September 2, 2019</li>
       <li>Sep. 2, 2019</li>
       <li>September 2</li>
@@ -721,7 +721,7 @@ If indicating both date and time, separate them with the word “at” rather th
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>15:30</li>
       <li>September 2, 2019 @ 4:35 pm</li>
       <li>September 2, 2019, 4:35 pm</li>
@@ -729,7 +729,7 @@ If indicating both date and time, separate them with the word “at” rather th
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>3:30 pm</li>
       <li>September 2, 2019 at 4:35 pm</li>
     </ul>
@@ -749,7 +749,7 @@ Buttons and links should be clear and predictable. Button and link text should b
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don’t</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>New team</li>
       <li>Settings</li>
       <li>Post Job</li>
@@ -757,7 +757,7 @@ Buttons and links should be clear and predictable. Button and link text should b
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Create new team</li>
       <li>View settings</li>
       <li>Post job</li>
@@ -789,7 +789,7 @@ A good URL can also provide a solid foundation for SEO/AEO.
 <Grid>
   <GridColumn extraClasses="bg-red-100">
     <h3 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCross24FillCircle} /> Don't</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Avoid using branded language e.g., `/overflowapi`</li>
       <li>Avoid overly long lengths e.g., `/introducing-stack-internal-powering-the-human-intelligence-layer-of-enterprise-ai/`</li>
       <li>Use underscores e.g., `/user_settings`</li>
@@ -799,7 +799,7 @@ A good URL can also provide a solid foundation for SEO/AEO.
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h3 class="d-flex ai-center g8 fc-green-500 mb16"><Icon src={IconCheck24FillCircle} /> Do</h3>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Instead say what it is e.g., `/api-dashboard`</li>
       <li>Instead summarise the content e.g., `/announcing-stack-internal`</li>
       <li>Use hyphens e.g., `/user-settings`</li>
@@ -814,7 +814,7 @@ A good URL can also provide a solid foundation for SEO/AEO.
 <Grid>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="fc-green-500">Use path segments for:</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Core content hierarchy and navigation</li>
       <li>Specific resources: `/users/12345/ada-lovelace`</li>
       <li>Content categories: `/questions/tagged/python`</li>
@@ -823,7 +823,7 @@ A good URL can also provide a solid foundation for SEO/AEO.
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
     <h4 class="fc-green-500">Use query parameters for:</h4>
-    <ul class="ml0 pl16">
+    <ul class="docs-copy ml0 pl16">
       <li>Filters, sorting, and temporary state</li>
       <li>Sorting options: `/questions?tab=newest&sort=votes`</li>
       <li>Search and pagination: `/search?q=javascript&page=2`</li>
diff --git a/packages/stacks-docs-next/src/docs/public/copy/voice.md b/packages/stacks-docs-next/src/docs/public/copy/voice.md
index d234594153..96d4dd5fc4 100644
--- a/packages/stacks-docs-next/src/docs/public/copy/voice.md
+++ b/packages/stacks-docs-next/src/docs/public/copy/voice.md
@@ -7,6 +7,15 @@ updated: 2025-09-25
   import GridColumn from '$components/GridColumn.svelte'
 </script>
 
+<style>
+  h1 {
+    font-size: var(--fs-headline1);
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: var(--su8);
+  }
+</style>
+
 ## What is Tone of Voice?
 
 Tone of voice (TOV) isn’t what a brand says, it’s how it says it. 
@@ -62,12 +71,12 @@ If you’re not sure how normal or formal you’re being, read what you’ve wri
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
     <h1>The knowledge you need to keep creating.</h1>
-    <p>Stack Overflow is a place for technologists and businesses to learn and share knowledge.</p>
+    <p class="docs-copy">Stack Overflow is a place for technologists and businesses to learn and share knowledge.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
     <h1>The knowledge required to power innovation.</h1>
-    <p>Stack Overflow provides comprehensive information and data for technologists and businesses.</p>
+    <p class="docs-copy">Stack Overflow provides comprehensive information and data for technologists and businesses.</p>
   </GridColumn>
 </Grid>
 
@@ -81,11 +90,11 @@ You can explain context or reasoning after, if you like, but keep it concise. Th
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
     <h1>Switch (100 opinions) for one right answer</h1>
-    <p>Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.</p>
+    <p class="docs-copy">Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
-    <p>When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works. </p>
+    <p class="docs-copy">When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works. </p>
   </GridColumn>
 </Grid>
 
@@ -102,11 +111,11 @@ Check out the Spirited section for more tips on making our writing a little more
 <Grid>
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
-    <p>Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.</p>
+    <p class="docs-copy">Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
-    <p>Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.</p>
+    <p class="docs-copy">Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.</p>
   </GridColumn>
 </Grid>
 
@@ -124,12 +133,12 @@ Done well, this kind of writing earns trust, gives us an air of expertise and au
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
     <h1>You can’t know everything</h1>
-    <p>But with Stack Internal, you can find someone who does.</p>
+    <p class="docs-copy">But with Stack Internal, you can find someone who does.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
     <h1>Become an expert in your field</h1>
-    <p>Stack Internal puts valuable knowledge at your fingertips.</p>
+    <p class="docs-copy">Stack Internal puts valuable knowledge at your fingertips.</p>
   </GridColumn>
 </Grid>
 
@@ -141,12 +150,12 @@ If there’s no expectation to subvert, no convention to challenge or no feather
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
     <h1>Find knowledge to upskill. Reskill. Outskill.</h1>
-    <p>We can’t promise you a promotion, but we can promise you’ll learn something.</p>
+    <p class="docs-copy">We can’t promise you a promotion, but we can promise you’ll learn something.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
     <h1>Supercharge your future</h1>
-    <p>Access the knowledge you need to boost your skills and transform your career.</p>
+    <p class="docs-copy">Access the knowledge you need to boost your skills and transform your career.</p>
   </GridColumn>
 </Grid>
 
@@ -177,12 +186,12 @@ If we’re excited about something, we let it show. If we believe in something,
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <div class="ps-absolute t12 l12">Say this…</div>
     <h1>One place. A million breakthroughs.</h1>
-    <p>Join a community of technologists, businesses and developers working things out, together.</p>
+    <p class="docs-copy">Join a community of technologists, businesses and developers working things out, together.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <div class="ps-absolute t12 l12">Instead of this…</div>
     <h1>The leading place for technical knowledge.</h1>
-    <p>Here’s to changing the world, one question at a time.</p>
+    <p class="docs-copy">Here’s to changing the world, one question at a time.</p>
   </GridColumn>
 </Grid>
 
@@ -197,25 +206,25 @@ Like computers, readers have a limit on how much they can process and remember 
 <Grid>
   <GridColumn>
     <h4>Structure and scanability</h4>
-    <p>Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.</p>
+    <p class="docs-copy">Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.</p>
   </GridColumn>
   <GridColumn>
     <h4>Density</h4>
-    <p>Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.</p>
+    <p class="docs-copy">Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.</p>
   </GridColumn>
   <GridColumn>
     <h4>Control your sentence lengths</h4>
-    <p>Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.</p>
+    <p class="docs-copy">Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.</p>
   </GridColumn>
 </Grid>
 
 <Grid>
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <h1>Teaching developers. And models.</h1>
-    <p>Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.</p>
+    <p class="docs-copy">Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
-    <p>As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data –  built up over fifteen years of questions and answers posted on our public forum – to train your AI models.</p>
+    <p class="docs-copy">As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data –  built up over fifteen years of questions and answers posted on our public forum – to train your AI models.</p>
   </GridColumn>
 </Grid>
 
@@ -227,10 +236,10 @@ That said, in certain situations the passive voice can help soften a message. Th
 
 <Grid>
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
-    <p>With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.</p>
+    <p class="docs-copy">With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
-    <p>With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable. </p>
+    <p class="docs-copy">With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable. </p>
   </GridColumn>
 </Grid>
 
@@ -245,11 +254,11 @@ Learn more about how we dial these aspects of our voice up and down in different
 <Grid>
   <GridColumn extraClasses="py64 ta-center bg-brand-yellow d:fc-white">
     <h1>Content Health.</h1>
-    <p>These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.</p>
+    <p class="docs-copy">These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.</p>
   </GridColumn>
   <GridColumn extraClasses="py64 ta-center bg-black-200 column-strike">
     <h1>Content Health.</h1>
-    <p>Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.</p>
+    <p class="docs-copy">Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.</p>
   </GridColumn>
 </Grid>
 
@@ -268,15 +277,15 @@ There are no hard rules around this. It’s about reading the room and thinking
 <Grid>
   <GridColumn extraClasses="bg-brand-blue-light d:fc-white">
     <h4 class="fc-black d:fc-white">B2B</h4>
-    <p>When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.</p>
+    <p class="docs-copy">When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.</p>
   </GridColumn>
   <GridColumn extraClasses="bg-brand-blue-light d:fc-white">
     <h4 class="fc-black d:fc-white">In product</h4>
-    <p>In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.</p>
+    <p class="docs-copy">In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.</p>
   </GridColumn>
   <GridColumn extraClasses="bg-brand-blue-light d:fc-white">
     <h4 class="fc-black d:fc-white">Support</h4>
-    <p>Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.</p>
+    <p class="docs-copy">Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.</p>
   </GridColumn>
 </Grid>
 
@@ -285,14 +294,14 @@ There are no hard rules around this. It’s about reading the room and thinking
 <Grid>
   <GridColumn extraClasses="bg-brand-pink d:fc-white">
     <h4 class="fc-black d:fc-white">B2C</h4>
-    <p>Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.</p>
+    <p class="docs-copy">Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.</p>
   </GridColumn>
   <GridColumn extraClasses="bg-brand-pink d:fc-white">
     <h4 class="fc-black d:fc-white">Social Media</h4>
-    <p>On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.</p>
+    <p class="docs-copy">On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.</p>
   </GridColumn>
   <GridColumn extraClasses="bg-brand-pink d:fc-white">
     <h4 class="fc-black d:fc-white">Email Marketing</h4>
-    <p>As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand. </p>
+    <p class="docs-copy">As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand. </p>
   </GridColumn>
 </Grid>
diff --git a/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md
index 1236576679..469b1b4ca3 100644
--- a/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md
+++ b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md
@@ -8,7 +8,8 @@ updated: 2026-02-12
   import Grid from '$components/Grid.svelte'
   import GridColumn from '$components/GridColumn.svelte'
 
-  import { Icon } from '@stackoverflow/stacks-svelte';
+  import { Icon, Notice } from '@stackoverflow/stacks-svelte';
+  import Example from '$components/Example.svelte'
   import { IconCheckFillCircle, IconCrossFillCircle } from '@stackoverflow/stacks-icons'
 </script>
 
@@ -88,13 +89,15 @@ If an image does not convey any meaning to the user, leave the alt-text blank.
 </div>
 ```
 
-<div class="d-flex fd-column gy8 wmx3 ba bc-black-225 bar-md p16 mb16">
+<Example>
+<div class="d-flex fd-column gy8 wmx3 ba bc-black-225 bar-md p16">
   <div class="flex--item">
     <svg width="48" height="49" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M24 49a24 24 0 1 0 0-48 24 24 0 0 0 0 48z" fill="#F4F2F7"/><path d="M12.6 30.3l-2 2 5.4 5.4 2-2-5.4-5.4z" fill="#E2D3ED"/><path d="M12.2 27.4c2-3 17.4-26.4 34.3-26.9-.4 17-23.7 32.4-26.8 34.4l-7.5-7.5z" fill="#fff"/><path d="M46 1c-.9 16-22.2 30.6-26.2 33.3l-7-7C15.6 23.4 30 2 46 1zm1-1C28.3 0 11.6 27.5 11.6 27.5l8 8S47.1 18.8 47 0z" fill="#27348B"/><path d="M40.4 3.4a5.2 5.2 0 0 0 5.7 5.4c.7-2.1 1-4.3 1-6.6-2.2 0-4.5.4-6.7 1.2z" fill="#E2D3ED"/><path d="M40.4 16.1L29.1 41.5h-6.6v-5M31 6.7L5.5 18.4v6.1h5.3M18.3 34.2l-2 2-5.4-5.3 2-2M45.2 6.7a4.8 4.8 0 0 1-4.9-4.8" stroke="#27348B" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.1 44l5.5-5.4M9.9 37.3l2.6-2.6M5.8 38.8l4-4M9.5 40.2l2.7-2.6" stroke="#27348B" stroke-miterlimit="10" stroke-linecap="round"/><path d="M46 1c-.9 16-22.2 30.6-26.2 33.3l-7-7C15.6 23.4 30 2 46 1zm1-1C28.3 0 11.6 27.5 11.6 27.5l8 8S47.1 18.8 47 0z" fill="#27348B"/><circle cx="36.5" cy="12.5" r="2.5" fill="#FFB935"/><circle cx="36.5" cy="10.5" r="2" stroke="#F48024"/><circle cx="30.5" cy="18.5" r="2.5" fill="#FFB935"/><circle cx="30.5" cy="16.5" r="2" stroke="#F48024"/><circle cx="24.5" cy="24.5" r="2.5" fill="#FFB935"/><circle cx="24.5" cy="22.5" r="2" stroke="#F48024"/></svg>
   </div>
   <h2 class="flex--item fs-body3 fw-normal fc-dark m0">Improve efficiency and ship better code</h2>
   <p class="flex--item fs-body1 fc-medium m0">There's a reason the world's largest developer teams rely on Stack Overflow Enterprise—it leads to better product and allows distributed teams to securely collaborate and share knowledge.</p>
 </div>
+</Example>
 
 The rocket here doesn't add meaningful information.
 
@@ -110,7 +113,8 @@ If an image has a label nearby, leave the alt-text blank.
 </div>
 ```
 
-<div class="d-flex gx8 ai-center wmx4 ba bc-black-225 bar-md p16 mb16">
+<Example>
+<div class="d-flex gx8 ai-center wmx4 ba bc-black-225 bar-md p16">
   <div class="flex--item">
     <svg width="44" height="43" viewBox="0 0 44.3 63.4" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m3.8 19.9h36.9v9.5h-36.9z" fill="#f48024"/><path d="m3.8 52.6v-9.6h36.9v9.6" fill="none" stroke="#4c8dbd" stroke-miterlimit="10"/><path d="m39.6 31.9v8h-10.5v-8zm1-1h-12.5v10h12.4v-10z" fill="#4c8dbd"/><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="m15.2 13.6h26.3m-28.6-2.2v4.6m-11.8.9h42.6m-43.2 35.5v-41.8h43.2v41.7h-43.2z" stroke="#4c8dbd"/><path d="m9.1 13.6h1.6" stroke="#f48024"/><path d="m6 13.6h1.6" stroke="#f48024"/><path d="m2.8 13.6h1.6" stroke="#f48024"/></g><path d="m3.8 30.9h22.6v9.9h-22.6z" fill="#cde8f9"/></svg>
   </div>
@@ -119,16 +123,13 @@ If an image has a label nearby, leave the alt-text blank.
     <p class="flex--item fs-body1 fc-medium m0">This ad unit is the most visible on the site.</p>
   </div>
 </div>
+</Example>
 
 The nearby text here already explains what the graphic illustrates. If there was alt-text here, screen readers would repeat information to the user.
 
-<div class="s-notice s-notice__info mb16">
-  <div class="d-flex fd-column gs8 gsy">
-    <div class="flex--item">
-      <strong>Note:</strong> In these cases, leaving the alt attribute empty (<code class="stacks-code bg-blue-300">alt=""</code>) will cause a screenreader to skip over the image. <strong>Never <em>remove</em> the alt-attribute.</strong> When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. "SO underscore logo dot png").
-    </div>
-  </div>
-</div>
+<Notice variant="info" class="mb16">
+  <p><strong>Note:</strong> In these cases, leaving the alt attribute empty (<code>alt=""</code>) will cause a screenreader to skip over the image. <strong>Never <em>remove</em> the alt-attribute.</strong> When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. "SO underscore logo dot png").</p>
+</Notice>
 
 ## How to add alt-text
 
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md
deleted file mode 100644
index 34bb92c3f3..0000000000
--- a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: Backgrounds
-description: Atomic classes for controlling the background properties of an element’s background image.
-updated: 2025-12-05
----
-
-<script lang="ts">
-const backgroundAttachment = [
-  {
-    "class": ".bg-fixed",
-    "output": "background-attachment: fixed;"
-  },
-  {
-    "class": ".bg-local",
-    "output": "background-attachment: local;"
-  },
-  {
-    "class": ".bg-scroll",
-    "output": "background-attachment: scroll;"
-  }
-]
-
-const backgroundPosition = [
-  {
-    "class": ".bg-bottom",
-    "output": "background-position: bottom;"
-  },
-  {
-    "class": ".bg-center",
-    "output": "background-position: center;"
-  },
-  {
-    "class": ".bg-left",
-    "output": "background-position: left;"
-  },
-  {
-    "class": ".bg-left-bottom",
-    "output": "background-position: left bottom;"
-  },
-  {
-    "class": ".bg-left-top",
-    "output": "background-position: left top;"
-  },
-  {
-    "class": ".bg-right",
-    "output": "background-position: right;"
-  },
-  {
-    "class": ".bg-right-bottom",
-    "output": "background-position: right bottom;"
-  },
-  {
-    "class": ".bg-right-top",
-    "output": "background-position: right top;"
-  },
-  {
-    "class": ".bg-top",
-    "output": "background-position: top;"
-  }
-]
-
-const backgroundRepeat = [
-  {
-    "class": ".bg-repeat",
-    "output": "background-repeat: repeat;"
-  },
-  {
-    "class": ".bg-no-repeat",
-    "output": "background-repeat: no-repeat;"
-  },
-  {
-    "class": ".bg-repeat-x",
-    "output": "background-repeat: repeat-x;"
-  },
-  {
-    "class": ".bg-repeat-y",
-    "output": "background-repeat: repeat-y;"
-  }
-]
-
-const backgroundSize = [
-  {
-    "class": ".bg-auto",
-    "output": "background-size: auto;"
-  },
-  {
-    "class": ".bg-cover",
-    "output": "background-size: cover;"
-  },
-  {
-    "class": ".bg-contain",
-    "output": "background-size: contain;"
-  }
-]
-
-const backgroundImage = [
-  {
-    "class": ".bg-image-none",
-    "output": "background-image: none;"
-  }
-]
-</script>
-
-## Background size
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each backgroundSize as bgSize}
-        <tr>
-          <th scope="row"><code class="stacks-code">{bgSize.class}</code></th>
-          <td class="ff-mono">{bgSize.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-## Background repeat
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each backgroundRepeat as bgRepeat}
-        <tr>
-          <th scope="row"><code class="stacks-code">{bgRepeat.class}</code></th>
-          <td class="ff-mono">{bgRepeat.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-## Background position
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each backgroundPosition as bgPosition}
-        <tr>
-          <th scope="row"><code class="stacks-code">{bgPosition.class}</code></th>
-          <td class="ff-mono">{bgPosition.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-### Background position examples
-
-```html
-<div class="bg-no-repeat bg-bottom">…</div>
-<div class="bg-no-repeat bg-center">…</div>
-<div class="bg-no-repeat bg-left">…</div>
-<div class="bg-no-repeat bg-left-bottom">…</div>
-<div class="bg-no-repeat bg-left-top">…</div>
-<div class="bg-no-repeat bg-right">…</div>
-<div class="bg-no-repeat bg-right-bottom">…</div>
-<div class="bg-no-repeat bg-right-top">…</div>
-<div class="bg-no-repeat bg-top">…</div>
-```
-
-<div class="d-flex flex__allitems3 w100 g8 fc-black-600 ff-mono fw-wrap">
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-bottom">.bg-bottom</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-center">.bg-center</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-left">.bg-left</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-left-bottom">.bg-left-bottom</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-left-top">.bg-left-top</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-right">.bg-right</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-right-bottom">.bg-right-bottom</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-right-top">.bg-right-top</div>
-  <div class="flex--item p12 bg-black-200 hs1 ba bc-black-225 stacks-bg-img bg-no-repeat bg-top">.bg-top</div>
-</div>
-
-## Background attachment
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each backgroundAttachment as bgAttachment}
-        <tr>
-          <th scope="row"><code class="stacks-code">{bgAttachment.class}</code></th>
-          <td class="ff-mono">{bgAttachment.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-## Background image
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each backgroundImage as bgImage}
-        <tr>
-          <th scope="row"><code class="stacks-code">{bgImage.class}</code></th>
-          <td class="ff-mono">{bgImage.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-## Background utilities
-
-### Loading
-
-Adding the `.bg-loading` class applies a shimmering gradient animation to a container's background. Use it to create flexible skeleton placeholders that mimic the shape and layout of content while it loads.
-
-```html
-<div class="p16">
-    <div class="ws3 d-flex g16">
-        <div class="v-visible-sr">Loading…</div>
-        <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
-        <div class="d-flex fd-column g8 jc-space-between w100">
-            <div class="bg-loading bar-md h24"></div>
-            <div class="bg-loading bar-md h24"></div>
-            <div class="bg-loading bar-md h24 w70"></div>
-        </div>
-    </div>
-</div>
-```
-
-<div class="p16">
-  <div class="ws3 d-flex g16">
-    <div class="v-visible-sr">Loading…</div>
-    <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
-    <div class="d-flex fd-column g8 jc-space-between w100">
-      <div class="bg-loading bar-md h24"></div>
-      <div class="bg-loading bar-md h24"></div>
-      <div class="bg-loading bar-md h24 w70"></div>
-    </div>
-  </div>
-</div>
-
-### Confetti
-
-Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects `prefers-reduced-motion` and displays the static version of the background when necessary. No JavaScript required.
-
-```html
-<div class="bg-confetti-animated">…</div>
-<div class="bg-confetti-static">…</div>
-```
-
-#### Animated
-
-<div class="bg-confetti-animated hs1"></div>
-
-#### Static
-
-<div class="bg-confetti-static h64"></div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg
new file mode 100644
index 0000000000..a104d14772
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg
@@ -0,0 +1 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M63.9 3H2.90002V64H63.9V3Z" fill="#FFB935"/><path d="M60 1V60H1V1H60ZM61 0H0V61H61V0Z" fill="#F48024"/><path d="M0 47.3L0.2 44.3L17.8 26.7L28.8 37.7L27.4 39.1L17.8 29.5L0 47.3Z" fill="#F48024"/><path d="M21.4 46.9L20 45.5L47.8 17.7L59.9 29.8V32.6L47.8 20.5L21.4 46.9Z" fill="#F48024"/><path d="M15.3 18.4C17.8957 18.4 20 16.2957 20 13.7C20 11.1043 17.8957 9 15.3 9C12.7042 9 10.6 11.1043 10.6 13.7C10.6 16.2957 12.7042 18.4 15.3 18.4Z" fill="white"/><path d="M30.5 49.8H52" stroke="white" stroke-miterlimit="10"/><path d="M12.6 54H57.2" stroke="white" stroke-miterlimit="10"/></g><defs><clipPath id="clip0"><rect width="63.9" height="64" fill="white"/></clipPath></defs></svg>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md
new file mode 100644
index 0000000000..0d34f3e758
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md
@@ -0,0 +1,150 @@
+---
+title: Backgrounds
+description: Atomic classes for controlling the background properties of an element.
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+    import illustrationBgImage from './illustrationBgImage.svg';
+
+    const backgroundSize: ClassTableRow[] = [
+        { class: '.bg-auto',    output: 'background-size: auto;' },
+        { class: '.bg-cover',   output: 'background-size: cover;' },
+        { class: '.bg-contain', output: 'background-size: contain;' },
+    ];
+
+    const backgroundRepeat: ClassTableRow[] = [
+        { class: '.bg-repeat',   output: 'background-repeat: repeat;' },
+        { class: '.bg-no-repeat', output: 'background-repeat: no-repeat;' },
+        { class: '.bg-repeat-x', output: 'background-repeat: repeat-x;' },
+        { class: '.bg-repeat-y', output: 'background-repeat: repeat-y;' },
+    ];
+
+    const backgroundPosition: ClassTableRow[] = [
+        { class: '.bg-bottom',       output: 'background-position: bottom;' },
+        { class: '.bg-center',       output: 'background-position: center;' },
+        { class: '.bg-left',         output: 'background-position: left;' },
+        { class: '.bg-left-bottom',  output: 'background-position: left bottom;' },
+        { class: '.bg-left-top',     output: 'background-position: left top;' },
+        { class: '.bg-right',        output: 'background-position: right;' },
+        { class: '.bg-right-bottom', output: 'background-position: right bottom;' },
+        { class: '.bg-right-top',    output: 'background-position: right top;' },
+        { class: '.bg-top',          output: 'background-position: top;' },
+    ];
+
+    const backgroundAttachment: ClassTableRow[] = [
+        { class: '.bg-fixed',  output: 'background-attachment: fixed;' },
+        { class: '.bg-local',  output: 'background-attachment: local;' },
+        { class: '.bg-scroll', output: 'background-attachment: scroll;' },
+    ];
+
+    const backgroundImage: ClassTableRow[] = [
+        { class: '.bg-image-none', output: 'background-image: none;' },
+    ];
+</script>
+
+## Background size
+
+<ClassTable classes={backgroundSize} />
+
+## Background repeat
+
+<ClassTable classes={backgroundRepeat} />
+
+## Background position
+
+<ClassTable classes={backgroundPosition} />
+
+### Background position examples
+
+```html
+<div class="bg-no-repeat bg-bottom">…</div>
+<div class="bg-no-repeat bg-center">…</div>
+<div class="bg-no-repeat bg-left">…</div>
+<div class="bg-no-repeat bg-left-bottom">…</div>
+<div class="bg-no-repeat bg-left-top">…</div>
+<div class="bg-no-repeat bg-right">…</div>
+<div class="bg-no-repeat bg-right-bottom">…</div>
+<div class="bg-no-repeat bg-right-top">…</div>
+<div class="bg-no-repeat bg-top">…</div>
+```
+
+<Example>
+    <div class="d-grid grid__3 sm:grid__2 w100 g8 fc-black-600 ff-mono fw-wrap">
+        {#each backgroundPosition as item}
+            <div class="d-flex fd-column g4 p8">
+                <code>{item.class}</code>
+                <div
+                    class="hs1 w100 bg-black-200 ba bc-black-225 bg-no-repeat {item.class.slice(1)}"
+                    style="background-image: url('{illustrationBgImage}');"
+                ></div>
+            </div>
+        {/each}
+    </div>
+</Example>
+
+## Background attachment
+
+<ClassTable classes={backgroundAttachment} />
+
+## Background image
+
+<ClassTable classes={backgroundImage} />
+
+## Background utilities
+
+### Loading
+
+Adding the `.bg-loading` class applies a shimmering gradient animation to a container's background. Use it to create flexible skeleton placeholders that mimic the shape and layout of content while it loads.
+
+```html
+<div class="p16">
+    <div class="ws3 d-flex g16">
+        <div class="v-visible-sr">Loading…</div>
+        <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
+        <div class="d-flex fd-column g8 jc-space-between w100">
+            <div class="bg-loading bar-md h24"></div>
+            <div class="bg-loading bar-md h24"></div>
+            <div class="bg-loading bar-md h24 w70"></div>
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="p16">
+        <div class="ws3 d-flex g16">
+            <div class="v-visible-sr">Loading…</div>
+            <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
+            <div class="d-flex fd-column g8 jc-space-between w100">
+                <div class="bg-loading bar-md h24"></div>
+                <div class="bg-loading bar-md h24"></div>
+                <div class="bg-loading bar-md h24 w70"></div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Confetti
+
+Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects `prefers-reduced-motion` and displays the static version of the background when necessary. No JavaScript required.
+
+```html
+<div class="bg-confetti-animated">…</div>
+<div class="bg-confetti-static">…</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g16">
+        <div>
+            <span class="ff-mono mb8 d-block">Animated</span>
+            <div class="bg-confetti-animated hs1"></div>
+        </div>
+        <div>
+            <span class="ff-mono mb8 d-block">Static</span>
+            <div class="bg-confetti-static h64"></div>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md b/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md
index 55458c4361..14eb9c134c 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md
@@ -1,292 +1,229 @@
 ---
 title: Border radius
 description: Stacks provides atomic classes for border radius.
-updated: 2025-12-05
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
-
-  const borderRadius = [
-    {
-      class: "bar0",
-      output: "border-radius: 0",
-      define: "Apply a border radius of 0 to all corners",
-      responsive: true
-    },
-    {
-      class: "btlr0",
-      output: "border-top-left-radius: 0",
-      define: "Apply a border radius of 0 to the top left corner",
-      responsive: false
-    },
-    {
-      class: "btrr0",
-      output: "border-top-right-radius: 0",
-      define: "Apply a border radius of 0 to the top right corner",
-      responsive: false
-    },
-    {
-      class: "bblr0",
-      output: "border-bottom-left-radius: 0",
-      define: "Apply a border radius of 0 to the bottom left corner",
-      responsive: false
-    },
-    {
-      class: "bbrr0",
-      output: "border-bottom-right-radius: 0",
-      define: "Apply a border radius of 0 to the bottom right corner",
-      responsive: false
-    },
-    {
-      class: "btr0",
-      output: "border-top-left-radius: 0; border-top-right-radius: 0",
-      define: "Apply a border radius of 0 to the top corners",
-      responsive: false
-    },
-    {
-      class: "brr0",
-      output: "border-top-right-radius: 0; border-bottom-right-radius: 0",
-      define: "Apply a border radius of 0 to the right corners",
-      responsive: false
-    },
-    {
-      class: "bbr0",
-      output: "border-bottom-left-radius: 0; border-bottom-right-radius: 0",
-      define: "Apply a border radius of 0 to the bottom corners",
-      responsive: false
-    },
-    {
-      class: "blr0",
-      output: "border-bottom-left-radius: 0; border-top-left-radius: 0",
-      define: "Apply a border radius of 0 to the left corners",
-      responsive: false
-    },
-    {
-      class: "bar-md",
-      output: "border-radius: 10px",
-      define: "Apply a border radius of 10px to all corners",
-      responsive: false
-    },
-    {
-      class: "btlr-md",
-      output: "border-top-left-radius: 10px",
-      define: "Apply a border radius of 10px to the top left corner",
-      responsive: false
-    },
-    {
-      class: "btrr-md",
-      output: "border-top-right-radius: 10px",
-      define: "Apply a border radius of 10px to the top right corner",
-      responsive: false
-    },
-    {
-      class: "bblr-md",
-      output: "border-bottom-left-radius: 10px",
-      define: "Apply a border radius of 10px to the bottom left corner",
-      responsive: false
-    },
-    {
-      class: "bbrr-md",
-      output: "border-bottom-right-radius: 10px",
-      define: "Apply a border radius of 10px to the bottom right corner",
-      responsive: false
-    },
-    {
-      class: "btr-md",
-      output: "border-top-left-radius: 10px; border-top-right-radius: 10px",
-      define: "Apply a border radius of 10px to the top corners",
-      responsive: false
-    },
-    {
-      class: "brr-md",
-      output: "border-top-right-radius: 10px; border-bottom-right-radius: 10px",
-      define: "Apply a border radius of 10px to the right corners",
-      responsive: false
-    },
-    {
-      class: "bbr-md",
-      output: "border-bottom-left-radius: 10px; border-bottom-right-radius: 10px",
-      define: "Apply a border radius of 10px to the bottom corners",
-      responsive: false
-    },
-    {
-      class: "blr-md",
-      output: "border-bottom-left-radius: 10px; border-top-left-radius: 10px",
-      define: "Apply a border radius of 10px to the left corners",
-      responsive: false
-    },
-    {
-      class: "bar-pill",
-      output: "border-radius: 1000px",
-      define: "Apply a border radius of 1000px to each corner for a 100% rounding of the left and right corners",
-      responsive: false
-    },
-    {
-      class: "bar-circle",
-      output: "border-radius: 100%",
-      define: "Apply a border radius of 100% to each corner circular appearance",
-      responsive: false
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.bar0',      output: 'border-radius: 0',                                                        define: 'Apply a border radius of 0 to all corners',                          responsive: true },
+        { class: '.btlr0',     output: 'border-top-left-radius: 0',                                               define: 'Apply a border radius of 0 to the top left corner' },
+        { class: '.btrr0',     output: 'border-top-right-radius: 0',                                              define: 'Apply a border radius of 0 to the top right corner' },
+        { class: '.bblr0',     output: 'border-bottom-left-radius: 0',                                            define: 'Apply a border radius of 0 to the bottom left corner' },
+        { class: '.bbrr0',     output: 'border-bottom-right-radius: 0',                                           define: 'Apply a border radius of 0 to the bottom right corner' },
+        { class: '.btr0',      output: 'border-top-left-radius: 0; border-top-right-radius: 0',                   define: 'Apply a border radius of 0 to the top corners' },
+        { class: '.brr0',      output: 'border-top-right-radius: 0; border-bottom-right-radius: 0',               define: 'Apply a border radius of 0 to the right corners' },
+        { class: '.bbr0',      output: 'border-bottom-left-radius: 0; border-bottom-right-radius: 0',             define: 'Apply a border radius of 0 to the bottom corners' },
+        { class: '.blr0',      output: 'border-bottom-left-radius: 0; border-top-left-radius: 0',                 define: 'Apply a border radius of 0 to the left corners' },
+        { class: '.bar-md',    output: 'border-radius: 10px',                                                     define: 'Apply a border radius of 10px to all corners' },
+        { class: '.btlr-md',   output: 'border-top-left-radius: 10px',                                            define: 'Apply a border radius of 10px to the top left corner' },
+        { class: '.btrr-md',   output: 'border-top-right-radius: 10px',                                           define: 'Apply a border radius of 10px to the top right corner' },
+        { class: '.bblr-md',   output: 'border-bottom-left-radius: 10px',                                         define: 'Apply a border radius of 10px to the bottom left corner' },
+        { class: '.bbrr-md',   output: 'border-bottom-right-radius: 10px',                                        define: 'Apply a border radius of 10px to the bottom right corner' },
+        { class: '.btr-md',    output: 'border-top-left-radius: 10px; border-top-right-radius: 10px',             define: 'Apply a border radius of 10px to the top corners' },
+        { class: '.brr-md',    output: 'border-top-right-radius: 10px; border-bottom-right-radius: 10px',         define: 'Apply a border radius of 10px to the right corners' },
+        { class: '.bbr-md',    output: 'border-bottom-left-radius: 10px; border-bottom-right-radius: 10px',       define: 'Apply a border radius of 10px to the bottom corners' },
+        { class: '.blr-md',    output: 'border-bottom-left-radius: 10px; border-top-left-radius: 10px',           define: 'Apply a border radius of 10px to the left corners' },
+        { class: '.bar-pill',  output: 'border-radius: 1000px',                                                   define: 'Apply a border radius of 1000px to each corner for a 100% rounding of the left and right corners' },
+        { class: '.bar-circle',output: 'border-radius: 100%',                                                     define: 'Apply a border radius of 100% to each corner for a circular appearance' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Abbreviation</th>
-        <th class="s-table--cell4" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th scope="col">
-          <a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each borderRadius as border}
-        <tr>
-          <th scope="row"><code class="stacks-code">{border.class}</code></th>
-          <th class="ff-mono">{border.output}</th>
-          <td>{border.define}</td>
-          <td class="ta-center">
-            <Icon src={border.responsive ? IconCheckFillCircle : IconCrossCircle} class={border.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} expandable headings={{ class: 'Abbreviation', define: 'Definition' }} />
 
 ## Examples
 
 ### All corners
 
-```
-<div class="bar0">0px Border radius</div>
-<div class="bar-md">10px Border radius</div>
-<div class="bar-circle">Circle Border radius</div>
-<div class="bar-pill">1000px Border radius</div>
-```
-
-<div class="d-flex w100 g8 fw-wrap">
-  <div class="flex--item flex__center p12 bg-black-200 bar0 ba bc-black-225">0px Border Radius</div>
-  <div class="flex--item flex__center p12 bg-black-200 bar-md ba bc-black-225">10px Border Radius</div>
-  <div class="flex--item flex__center p8 bg-black-200 bar-circle ba bc-black-225 ta-center w64">Circle Border Radius</div>
-  <div class="flex--item flex__center p12 bg-black-200 bar-pill ba bc-black-225">1000px Border Radius</div>
-</div>
+```html
+<div class="bar0">…</div>
+<div class="bar-md">…</div>
+<div class="bar-circle">…</div>
+<div class="bar-pill">…</div>
+```
+
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .bar0
+            <div class="docs-box bar0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bar-md
+            <div class="docs-box bar-md h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bar-circle
+            <div class="docs-box bar-circle h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bar-pill
+            <div class="docs-box bar-pill h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Top left corner
 
-```
-<div class="btlr0">0px Top Left Border Radius</div>
-<div class="btlr-md">10px Top Left Border Radius</div>
+```html
+<div class="btlr0">…</div>
+<div class="btlr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 btlr0 ba bc-black-225">0px Top Left Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 btlr-md ba bc-black-225">10px Top Left Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .btlr0
+            <div class="docs-box btlr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .btlr-md
+            <div class="docs-box btlr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Top right corner
 
-```
-<div class="btrr0">0px Top Right Border Radius</div>
-<div class="btrr-md">10px Top Right Border Radius</div>
+```html
+<div class="btrr0">…</div>
+<div class="btrr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 btrr0 ba bc-black-225">0px Top Right Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 btrr-md ba bc-black-225">10px Top Right Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .btrr0
+            <div class="docs-box btrr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .btrr-md
+            <div class="docs-box btrr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Bottom right corner
 
-```
-<div class="bbrr0">0px Bottom Right Border Radius</div>
-<div class="bbrr-md">10px Bottom Right Border Radius</div>
+```html
+<div class="bbrr0">…</div>
+<div class="bbrr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 bbrr0 ba bc-black-225">0px Bottom Right Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 bbrr-md ba bc-black-225">10px Bottom Right Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .bbrr0
+            <div class="docs-box bbrr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bbrr-md
+            <div class="docs-box bbrr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Bottom left corner
 
-```
-<div class="bblr0">0px Bottom Left Border Radius</div>
-<div class="bblr-md">10px Bottom Left Border Radius</div>
+```html
+<div class="bblr0">…</div>
+<div class="bblr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 bblr0 ba bc-black-225">0px Bottom Left Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 bblr-md ba bc-black-225">10px Bottom Left Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .bblr0
+            <div class="docs-box bblr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bblr-md
+            <div class="docs-box bblr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Top corners
 
-```
-<div class="btr0">0px Top Border Radius</div>
-<div class="btr-md">10px Top Border Radius</div>
+```html
+<div class="btr0">…</div>
+<div class="btr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 btr0 ba bc-black-225">0px Top Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 btr-md ba bc-black-225">10px Top Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .btr0
+            <div class="docs-box btr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .btr-md
+            <div class="docs-box btr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Bottom corners
 
-```
-<div class="bbr0">0px Bottom Border Radius</div>
-<div class="bbr-md">10px Bottom Border Radius</div>
+```html
+<div class="bbr0">…</div>
+<div class="bbr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 bbr0 ba bc-black-225">0px Bottom Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 bbr-md ba bc-black-225">10px Bottom Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .bbr0
+            <div class="docs-box bbr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .bbr-md
+            <div class="docs-box bbr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Left corners
 
-```
-<div class="blr0">0px Left Border Radius</div>
-<div class="blr-md">10px Left Border Radius</div>
+```html
+<div class="blr0">…</div>
+<div class="blr-md">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 blr0 ba bc-black-225">0px Left Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 blr-md ba bc-black-225">10px Left Border Radius</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .blr0
+            <div class="docs-box blr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .blr-md
+            <div class="docs-box blr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
 
 ### Right corners
 
-```
-<div class="brr0">0px Right Border Radius</div>
-<div class="brr-md">10px Right Border Radius</div>
-```
-
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex w100 g8 fw-wrap">
-    <div class="flex--item flex__center p12 bg-black-200 brr0 ba bc-black-225">0px Right Border Radius</div>
-    <div class="flex--item flex__center p12 bg-black-200 brr-md ba bc-black-225">10px Right Border Radius</div>
-  </div>
-</div>
+```html
+<div class="brr0">…</div>
+<div class="brr-md">…</div>
+```
+
+<Example>
+    <div class="d-flex fw-wrap g32 w100 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            .brr0
+            <div class="docs-box brr0 h64 w128"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            .brr-md
+            <div class="docs-box brr-md h64 w128"></div>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/borders.md b/packages/stacks-docs-next/src/docs/public/system/base/borders.md
index 0f9bf673d4..e83388c570 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/borders.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/borders.md
@@ -1,96 +1,71 @@
 ---
 title: Borders
 description: Stacks provides atomic classes for borders.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
-
-  const borderClasses = [
-    { class: 'ba', define: 'all sides', output: 'border: solid 1px #000', responsive: true },
-    { class: 'bt', define: 'top', output: 'border-top: solid 1px #000', responsive: true },
-    { class: 'bb', define: 'bottom', output: 'border-bottom: solid 1px #000', responsive: true },
-    { class: 'bl', define: 'left', output: 'border-left: solid 1px #000', responsive: true },
-    { class: 'br', define: 'right', output: 'border-right: solid 1px #000', responsive: true },
-    { class: 'by', define: 'top and bottom', output: 'border-top: solid 1px #000; border-bottom: solid 1px #000;' },
-    { class: 'bx', define: 'left and right', output: 'border-left: solid 1px #000; border-right: solid 1px #000;' }
-  ];
-
-  const widthClasses = [
-    { class: 'baw0', define: 'zero, all sides', output: 'border-width: 0' },
-    { class: 'btw0', define: 'zero, top', output: 'border-top-width: 0', responsive: true },
-    { class: 'bbw0', define: 'zero, bottom', output: 'border-bottom-width: 0', responsive: true },
-    { class: 'blw0', define: 'zero, left', output: 'border-left-width: 0', responsive: true },
-    { class: 'brw0', define: 'zero, right', output: 'border-right-width: 0', responsive: true },
-    { class: 'byw0', define: 'zero, top and bottom', output: 'border-top-width: 0; border-bottom-width: 0;' },
-    { class: 'bxw0', define: 'zero, left and right', output: 'border-left-width: 0; border-right-width: 0;' },
-    { class: 'baw1', define: '1px, all', output: 'border-width: 1px' },
-    { class: 'btw1', define: '1px, top', output: 'border-top-width: 1px' },
-    { class: 'bbw1', define: '1px, bottom', output: 'border-bottom-width: 1px' },
-    { class: 'blw1', define: '1px, left', output: 'border-left-width: 1px' },
-    { class: 'brw1', define: '1px, right', output: 'border-right-width: 1px' },
-    { class: 'byw1', define: '1px, top and bottom', output: 'border-top-width: 1px; border-bottom-width: 1px;' },
-    { class: 'bxw1', define: '1px, left and right', output: 'border-left-width: 1px; border-right-width: 1px;' },
-    { class: 'baw2', define: '2px, all', output: 'border-width: 2px' },
-    { class: 'btw2', define: '2px, top', output: 'border-top-width: 2px' },
-    { class: 'bbw2', define: '2px, bottom', output: 'border-bottom-width: 2px' },
-    { class: 'blw2', define: '2px, left', output: 'border-left-width: 2px' },
-    { class: 'brw2', define: '2px, right', output: 'border-right-width: 2px' },
-    { class: 'byw2', define: '2px, top and bottom', output: 'border-top-width: 2px; border-bottom-width: 2px;' },
-    { class: 'bxw2', define: '2px, left and right', output: 'border-left-width: 2px; border-right-width: 2px;' },
-    { class: 'baw3', define: '4px, all', output: 'border-width: 4px' },
-    { class: 'btw3', define: '4px, top', output: 'border-top-width: 4px' },
-    { class: 'bbw3', define: '4px, bottom', output: 'border-bottom-width: 4px' },
-    { class: 'blw3', define: '4px, left', output: 'border-left-width: 4px' },
-    { class: 'brw3', define: '4px, right', output: 'border-right-width: 4px' },
-    { class: 'byw3', define: '4px, top and bottom', output: 'border-top-width: 4px; border-bottom-width: 4px;' },
-    { class: 'bxw3', define: '4px, left and right', output: 'border-left-width: 4px; border-right-width: 4px;' }
-  ];
-
-  const styleClasses = [
-    { class: 'bas-solid', define: 'Applies a solid border style to all sides', output: 'border-style: solid' },
-    { class: 'bts-solid', define: 'Applies a solid border style to the top side', output: 'border-top-style: solid' },
-    { class: 'brs-solid', define: 'Applies a solid border style to the right side', output: 'border-right-style: solid' },
-    { class: 'bbs-solid', define: 'Applies a solid border style to the bottom side', output: 'border-bottom-style: solid' },
-    { class: 'bls-solid', define: 'Applies a solid border style to the left side', output: 'border-left-style: solid' },
-    { class: 'bas-dashed', define: 'Applies a dashed border style to all sides', output: 'border-style: dashed' },
-    { class: 'bts-dashed', define: 'Applies a dashed border style to the top side', output: 'border-top-style: dashed' },
-    { class: 'brs-dashed', define: 'Applies a dashed border style to the right side', output: 'border-right-style: dashed' },
-    { class: 'bbs-dashed', define: 'Applies a dashed border style to the bottom side', output: 'border-bottom-style: dashed' },
-    { class: 'bls-dashed', define: 'Applies a dashed border style to the left side', output: 'border-left-style: dashed' }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const borderClasses: ClassTableRow[] = [
+        { class: '.ba', define: 'All sides',        output: 'border: solid 1px',                                            responsive: true },
+        { class: '.bt', define: 'Top',              output: 'border-top: solid 1px',                                        responsive: true },
+        { class: '.bb', define: 'Bottom',           output: 'border-bottom: solid 1px',                                     responsive: true },
+        { class: '.bl', define: 'Left',             output: 'border-left: solid 1px',                                       responsive: true },
+        { class: '.br', define: 'Right',            output: 'border-right: solid 1px',                                      responsive: true },
+        { class: '.by', define: 'Top and bottom',   output: 'border-top: solid 1px; border-bottom: solid 1px;' },
+        { class: '.bx', define: 'Left and right',   output: 'border-left: solid 1px; border-right: solid 1px;' },
+    ];
+
+    const widthClasses: ClassTableRow[] = [
+        { class: '.baw0', define: 'Zero, all sides',        output: 'border-width: 0' },
+        { class: '.btw0', define: 'Zero, top',              output: 'border-top-width: 0',                                  responsive: true },
+        { class: '.bbw0', define: 'Zero, bottom',           output: 'border-bottom-width: 0',                               responsive: true },
+        { class: '.blw0', define: 'Zero, left',             output: 'border-left-width: 0',                                 responsive: true },
+        { class: '.brw0', define: 'Zero, right',            output: 'border-right-width: 0',                                responsive: true },
+        { class: '.byw0', define: 'Zero, top and bottom',   output: 'border-top-width: 0; border-bottom-width: 0;' },
+        { class: '.bxw0', define: 'Zero, left and right',   output: 'border-left-width: 0; border-right-width: 0;' },
+        { class: '.baw1', define: '1px, all',               output: 'border-width: 1px' },
+        { class: '.btw1', define: '1px, top',               output: 'border-top-width: 1px' },
+        { class: '.bbw1', define: '1px, bottom',            output: 'border-bottom-width: 1px' },
+        { class: '.blw1', define: '1px, left',              output: 'border-left-width: 1px' },
+        { class: '.brw1', define: '1px, right',             output: 'border-right-width: 1px' },
+        { class: '.byw1', define: '1px, top and bottom',    output: 'border-top-width: 1px; border-bottom-width: 1px;' },
+        { class: '.bxw1', define: '1px, left and right',    output: 'border-left-width: 1px; border-right-width: 1px;' },
+        { class: '.baw2', define: '2px, all',               output: 'border-width: 2px' },
+        { class: '.btw2', define: '2px, top',               output: 'border-top-width: 2px' },
+        { class: '.bbw2', define: '2px, bottom',            output: 'border-bottom-width: 2px' },
+        { class: '.blw2', define: '2px, left',              output: 'border-left-width: 2px' },
+        { class: '.brw2', define: '2px, right',             output: 'border-right-width: 2px' },
+        { class: '.byw2', define: '2px, top and bottom',    output: 'border-top-width: 2px; border-bottom-width: 2px;' },
+        { class: '.bxw2', define: '2px, left and right',    output: 'border-left-width: 2px; border-right-width: 2px;' },
+        { class: '.baw3', define: '4px, all',               output: 'border-width: 4px' },
+        { class: '.btw3', define: '4px, top',               output: 'border-top-width: 4px' },
+        { class: '.bbw3', define: '4px, bottom',            output: 'border-bottom-width: 4px' },
+        { class: '.blw3', define: '4px, left',              output: 'border-left-width: 4px' },
+        { class: '.brw3', define: '4px, right',             output: 'border-right-width: 4px' },
+        { class: '.byw3', define: '4px, top and bottom',    output: 'border-top-width: 4px; border-bottom-width: 4px;' },
+        { class: '.bxw3', define: '4px, left and right',    output: 'border-left-width: 4px; border-right-width: 4px;' },
+    ];
+
+    const styleClasses: ClassTableRow[] = [
+        { class: '.bas-solid',  define: 'All sides',    output: 'border-style: solid' },
+        { class: '.bts-solid',  define: 'Top',          output: 'border-top-style: solid' },
+        { class: '.brs-solid',  define: 'Right',        output: 'border-right-style: solid' },
+        { class: '.bbs-solid',  define: 'Bottom',       output: 'border-bottom-style: solid' },
+        { class: '.bls-solid',  define: 'Left',         output: 'border-left-style: solid' },
+        { class: '.bas-dashed', define: 'All sides',    output: 'border-style: dashed' },
+        { class: '.bts-dashed', define: 'Top',          output: 'border-top-style: dashed' },
+        { class: '.brs-dashed', define: 'Right',        output: 'border-right-style: dashed' },
+        { class: '.bbs-dashed', define: 'Bottom',       output: 'border-bottom-style: dashed' },
+        { class: '.bls-dashed', define: 'Left',         output: 'border-left-style: dashed' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Output</th>
-        <th scope="col">Apply border to</th>
-        <th scope="col">
-          <a class="s-link s-link__inherit" href="/system/develop/conditional-classes#responsive">Responsive?</a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each borderClasses as border}
-        <tr>
-          <th scope="row"><code class="stacks-code">.{border.class}</code></th>
-          <td class="ff-mono">{border.output}</td>
-          <td>{border.define}</td>
-          <td class="ta-center">
-            <Icon src={border.responsive ? IconCheckFillCircle : IconCrossCircle} class={border.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={borderClasses} headings={{ define: 'Apply border to' }} />
 
 ## Examples
 
@@ -104,42 +79,19 @@ updated: 2025-12-16
 <div class="by">…</div>
 ```
 
-<div class="stacks-preview--example d-flex g8 fw-wrap">
-  {#each borderClasses as border}
-    <div class="p12 bg-black-200 {border.class}">{border.define}</div>
-  {/each}
-</div>
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        {#each borderClasses as item}
+            <div class="p12 bg-black-200 {item.class.slice(1)}">{item.define}</div>
+        {/each}
+    </div>
+</Example>
 
 ## Width
 
 ### Width classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Output</th>
-        <th scope="col">Border width, side(s)</th>
-        <th scope="col">
-          <a class="s-link s-link__inherit" href="/system/develop/conditional-classes#responsive">Responsive?</a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each widthClasses as border}
-        <tr>
-          <th scope="row"><code class="stacks-code">.{border.class}</code></th>
-          <td class="ff-mono">{border.output}</td>
-          <td>{border.define}</td>
-          <td class="ta-center">
-            <Icon src={border.responsive ? IconCheckFillCircle : IconCrossCircle} class={border.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={widthClasses} headings={{ define: 'Border width, side(s)' }} />
 
 ### Width examples
 
@@ -151,38 +103,21 @@ updated: 2025-12-16
 <div class="ba baw3">…</div>
 ```
 
-<div class="stacks-preview--example d-flex g8 fw-wrap">
-  <div class="p12 bg-black-200 ba">.ba</div>
-  <div class="p12 bg-black-200 ba brw0">.ba.brw0</div>
-  <div class="p12 bg-black-200 ba bbw0">.ba.bbw0</div>
-  <div class="p12 bg-black-200 ba baw2">.ba.baw2</div>
-  <div class="p12 bg-black-200 ba baw3">.ba.baw3</div>
-</div>
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        <div class="p12 bg-black-200 ba">.ba</div>
+        <div class="p12 bg-black-200 ba brw0">.ba.brw0</div>
+        <div class="p12 bg-black-200 ba bbw0">.ba.bbw0</div>
+        <div class="p12 bg-black-200 ba baw2">.ba.baw2</div>
+        <div class="p12 bg-black-200 ba baw3">.ba.baw3</div>
+    </div>
+</Example>
 
 ## Style
 
 ### Style classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each styleClasses as border}
-        <tr>
-          <th scope="row"><code class="stacks-code">.{border.class}</code></th>
-          <td class="ff-mono">{border.output}</td>
-          <td>{border.define}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={styleClasses} headings={{ define: 'Side(s)' }} />
 
 ### Style examples
 
@@ -192,16 +127,14 @@ updated: 2025-12-16
 <div class="ba brs-dashed">…</div>
 ```
 
-<div class="stacks-preview--example">
-  <div class="d-flex w100 g8 ai-center">
-    <div class="flex--item p12 ba bas-solid bg-black-200">Solid border style</div>
-    <div class="flex--item p12 ba bas-dashed bg-black-200">Dashed border style</div>
-    <div class="flex--item p12 ba brs-dashed bg-black-200">Dashed border right style</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex g8 ai-center">
+        <div class="p12 ba bas-solid bg-black-200">Solid border style</div>
+        <div class="p12 ba bas-dashed bg-black-200">Dashed border style</div>
+        <div class="p12 ba brs-dashed bg-black-200">Dashed border right style</div>
+    </div>
+</Example>
 
 ## Color
 
-### Color classes
-
 Each color stop is available as a border class. See the [colors documentation](/system/foundation/colors#classes) for all available classes.
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md
index 1723c5890c..1c92acf228 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md
@@ -2,99 +2,26 @@
 title: Box shadow
 figma: https://svelte.stackoverflow.design/figma/box-shadows
 description: Box shadow atomic classes allow you to change an element's box shadow quickly.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
 
-  const boxShadowClasses = [
-    {
-      class: 'bs-none',
-      output: 'box-shadow: none;',
-      hover: false,
-      focus: false,
-      responsive: true
-    },
-    {
-      class: 'bs-sm',
-      output: `box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05),
-0 1px 4px hsla(0, 0%, 0%, 0.05),
-0 2px 8px hsla(0, 0%, 0%, 0.05)`,
-      hover: true,
-      focus: false,
-      responsive: false
-    },
-    {
-      class: 'bs-md',
-      output: `box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.06),
-0 2px 6px hsla(0, 0%, 0%, 0.06),
-0 3px 8px hsla(0, 0%, 0%, 0.09)`,
-      hover: true,
-      focus: false,
-      responsive: false
-    },
-    {
-      class: 'bs-lg',
-      output: `box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09),
-0 3px 8px hsla(0, 0%, 0%, 0.09),
-0 4px 13px hsla(0, 0%, 0%, 0.13)`,
-      hover: true,
-      focus: false,
-      responsive: false
-    },
-    {
-      class: 'bs-xl',
-      output: `box-shadow: 0 10px 24px hsla(0, 0%, 0%, 0.05),
-0 20px 48px hsla(0, 0%, 0%, 0.05),
-0 1px 4px hsla(0, 0%, 0%, 0.1)`,
-      hover: false,
-      focus: false,
-      responsive: false
-    },
-    {
-      class: 'bs-ring',
-      output: 'box-shadow: 0 0 0 var(--su4) var(--focus-ring);',
-      hover: true,
-      focus: true,
-      responsive: false
-    }
-  ];
+    const classes: ClassTableRow[] = [
+        { class: '.bs-none', responsive: true },
+        { class: '.bs-sm',   hover: true },
+        { class: '.bs-md',   hover: true },
+        { class: '.bs-lg',   hover: true },
+        { class: '.bs-xl' },
+        { class: '.bs-ring', hover: true, focus: true }
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn5 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Output</th>
-        <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#hover">Hover?</a></th>
-        <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#focus">Focus?</a></th>
-        <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each boxShadowClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white pl0" style="white-space: pre-line;">{item.output}</code></td>
-          <td class="ta-center">
-            <Icon src={item.hover ? IconCheckFillCircle : IconCrossCircle} class={item.hover ? "fc-green-400" : "fc-black-200"} />
-          </td>
-          <td class="ta-center">
-            <Icon src={item.focus ? IconCheckFillCircle : IconCrossCircle} class={item.focus ? "fc-green-400" : "fc-black-200"} />
-          </td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -106,12 +33,12 @@ updated: 2025-12-16
 <div class="bs-ring">…</div>
 ```
 
-<div class="stacks-preview--example">
-  <div class="d-flex g16 fw-wrap ai-center">
-    <div class="flex--item bs-sm bg-white ba bc-black-225 p12">.bs-sm</div>
-    <div class="flex--item bs-md bg-white ba bc-black-225 p12">.bs-md</div>
-    <div class="flex--item bs-lg bg-white ba bc-black-225 p12">.bs-lg</div>
-    <div class="flex--item bs-xl bg-white ba bc-black-225 p12">.bs-xl</div>
-    <div class="flex--item bs-ring bg-white ba bc-black-225 p12">.bs-ring</div>
-  </div>
-</div>
+<Example>
+    <div class="d-flex g16 fw-wrap ai-center">
+        <div class="bs-sm bg-white ba bc-black-225 p12">.bs-sm</div>
+        <div class="bs-md bg-white ba bc-black-225 p12">.bs-md</div>
+        <div class="bs-lg bg-white ba bc-black-225 p12">.bs-lg</div>
+        <div class="bs-xl bg-white ba bc-black-225 p12">.bs-xl</div>
+        <div class="bs-ring bg-white ba bc-black-225 p12">.bs-ring</div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md
index 9cb8ef5d2d..c6af4e1329 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md
@@ -1,51 +1,23 @@
 ---
 title: Box sizing
 description: Box-sizing atomic classes allow one to determine what is used to determine an element's width or height.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const boxSizingClasses = [
-    {
-      class: 'box-content',
-      output: 'box-sizing: content-box;',
-      define: "Indicates that the element's width and height affects only the element's content box, that is the area minus the element's margin, padding, and borders. <em>This is the default browser value.</em>"
-    },
-    {
-      class: 'box-border',
-      output: 'box-sizing: border-box;',
-      define: "Indicates that the element's width and height affects the entire element. <em>This is the <strong>preferred</strong> default value for Stacks.</em>"
-    },
-    {
-      class: 'box-unset',
-      output: 'box-sizing: unset;',
-      define: "Removes the previously set <code class='stacks-code'>box-sizing</code> value, reverting it back to the initial browser value."
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.box-content', output: 'box-sizing: content-box;', define: "Indicates that the element's width and height affects only the element's content box, that is the area minus the element's margin, padding, and borders. This is the default browser value." },
+        { class: '.box-border',  output: 'box-sizing: border-box;',  define: "Indicates that the element's width and height affects the entire element. This is the preferred default value for Stacks." },
+        { class: '.box-unset',   output: 'box-sizing: unset;',       define: 'Removes the previously set box-sizing value, reverting it back to the initial browser value.' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn5 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each boxSizingClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="p8"><p class="mb0">{@html item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} headings={{ define: 'Definition' }} />
 
 ## Examples
 
@@ -55,7 +27,7 @@ updated: 2025-12-16
 <div class="box-border">…</div>
 ```
 
-<div class="stacks-preview--example ps-relative fs-caption ff-mono">
+<Example>
   <div class="d-flex g16 w100 fc-black-600 ff-mono fw-wrap">
     <div class="d-flex fd-column bg-black-200 ba bc-black-225">
       <p class="mt0 p12"><strong>Parent container</strong></p>
@@ -94,4 +66,4 @@ updated: 2025-12-16
       </div>
     </div>
   </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/current-color.md b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md
index 3a12979da7..67b775079e 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/current-color.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md
@@ -3,12 +3,20 @@ title: Current color
 description: Atomic classes allow you to quickly add currentColor to an element's fill or stroke property.
 ---
 
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.fill-current',   output: 'fill: currentColor;' },
+        { class: '.stroke-current', output: 'stroke: currentColor;' },
+    ];
+</script>
+
 ## Classes
 
-| Class             | Output                  |
-| ----------------- | ----------------------- |
-| `.fill-current`   | `fill: currentColor;`   |
-| `.stroke-current` | `stroke: currentColor;` |
+<ClassTable {classes} />
 
 ## Examples
 
@@ -22,27 +30,21 @@ When applied to an SVG, applying `currentColor` to the fill or stroke property a
 <svg class="stroke-current fc-orange-400">…</svg>
 ```
 
-<div class="d-flex gx24 fw-wrap">
-  <div class="flex--item">
-    <svg class="fill-current" width="104" height="90" viewBox="0 0 104 90">
-      <path d="M55.0894583,89.9999915 C46.779388,89.9787951 40,82.8534991 40,74.0011148 C40,65.1487306 46.6899296,58.0022382 55,58.0022382 L78,58.0022382 L78,54.002519 L55,54.002519 C44.4335759,54.002519 36,62.9843505 36,74.0011148 C36,80.539398 39.0020198,86.3534623 43.6515559,89.9999915 L28,89.9999915 C16.8806721,90.0095223 0,82.0005532 0,66.0016765 C0,55.0024488 2.78962218,50.2102556 10.8564986,42.7043187 L14.3142395,39.8328917 L9.84593964,38.342865 C4.16478873,36.2854066 0.0363141251,31.9503852 0,27.0044147 L0,22.0047657 L16,22.0047657 L16,18.0050465 C16,6.57300556 28.0063527,-0.737764358 39.3693862,0.0592423703 C51.7564643,0.992036345 60,11.005538 60,24.0046253 C60,30.004204 59,34.6705431 57,38.0036424 L78,38.0036424 C82,38.0036424 84.1200113,36.4411211 86.7283637,34.0695153 C89,32.0040636 91,30.004204 97,30.004204 C101.114191,30.0103083 103.995366,33.162855 104,38.0036424 L104,63.0018871 C103.983654,77.7086979 92.7263972,89.9835751 78,89.9999915 L55.0894583,89.9999915 Z M31,24.0046253 C33.7614237,24.0046253 36,21.7662062 36,19.0049763 C36,16.2437465 33.7614237,14.0053274 31,14.0053274 C28.2385763,14.0053274 26,16.2437465 26,19.0049763 C26,21.7662062 28.2385763,24.0046253 31,24.0046253 Z"/>
-    </svg>
-  </div>
-  <div class="flex--item">
-    <svg class="fill-current fc-orange-400" width="104" height="90" viewBox="0 0 104 90">
-      <path d="M55.0894583,89.9999915 C46.779388,89.9787951 40,82.8534991 40,74.0011148 C40,65.1487306 46.6899296,58.0022382 55,58.0022382 L78,58.0022382 L78,54.002519 L55,54.002519 C44.4335759,54.002519 36,62.9843505 36,74.0011148 C36,80.539398 39.0020198,86.3534623 43.6515559,89.9999915 L28,89.9999915 C16.8806721,90.0095223 0,82.0005532 0,66.0016765 C0,55.0024488 2.78962218,50.2102556 10.8564986,42.7043187 L14.3142395,39.8328917 L9.84593964,38.342865 C4.16478873,36.2854066 0.0363141251,31.9503852 0,27.0044147 L0,22.0047657 L16,22.0047657 L16,18.0050465 C16,6.57300556 28.0063527,-0.737764358 39.3693862,0.0592423703 C51.7564643,0.992036345 60,11.005538 60,24.0046253 C60,30.004204 59,34.6705431 57,38.0036424 L78,38.0036424 C82,38.0036424 84.1200113,36.4411211 86.7283637,34.0695153 C89,32.0040636 91,30.004204 97,30.004204 C101.114191,30.0103083 103.995366,33.162855 104,38.0036424 L104,63.0018871 C103.983654,77.7086979 92.7263972,89.9835751 78,89.9999915 L55.0894583,89.9999915 Z M31,24.0046253 C33.7614237,24.0046253 36,21.7662062 36,19.0049763 C36,16.2437465 33.7614237,14.0053274 31,14.0053274 C28.2385763,14.0053274 26,16.2437465 26,19.0049763 C26,21.7662062 28.2385763,24.0046253 31,24.0046253 Z"/>
-    </svg>
-  </div>
-  <div class="flex--item">
-    <svg class="stroke-current" width="104" height="90" fill="none">
-      <path stroke-width="4" d="M28 88c-5.15 0-11.74-1.87-17-5.62C5.76 78.65 2 73.2 2 66c0-5.33.68-8.94 2.2-12.08 1.54-3.16 4.02-6.02 7.98-9.71l3.41-2.84 2.77-2.3-3.41-1.13-4.45-1.49C5.25 34.55 2.03 30.76 2 27v-3h16v-6c0-4.94 2.58-9.06 6.59-11.93a22.94 22.94 0 0 1 14.63-4.02C50.42 2.9 58 11.9 58 24c0 5.82-.98 10.08-2.72 12.97L53.47 40H78c2.29 0 4.13-.45 5.79-1.29a19.68 19.68 0 0 0 4.28-3.16l.17-.15c1.1-1 1.93-1.76 3.11-2.34 1.2-.6 2.88-1.06 5.65-1.06 1.52 0 2.7.57 3.54 1.52.86.96 1.46 2.46 1.46 4.49V63c-.02 13.7-10.48 24.98-24 25H28z"/>
-      <path stroke-width="4" d="M36 19a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
-    </svg>
-  </div>
-  <div class="flex--item">
-    <svg class="stroke-current fc-orange-400" width="104" height="90" fill="none">
-      <path stroke-width="4" d="M28 88c-5.15 0-11.74-1.87-17-5.62C5.76 78.65 2 73.2 2 66c0-5.33.68-8.94 2.2-12.08 1.54-3.16 4.02-6.02 7.98-9.71l3.41-2.84 2.77-2.3-3.41-1.13-4.45-1.49C5.25 34.55 2.03 30.76 2 27v-3h16v-6c0-4.94 2.58-9.06 6.59-11.93a22.94 22.94 0 0 1 14.63-4.02C50.42 2.9 58 11.9 58 24c0 5.82-.98 10.08-2.72 12.97L53.47 40H78c2.29 0 4.13-.45 5.79-1.29a19.68 19.68 0 0 0 4.28-3.16l.17-.15c1.1-1 1.93-1.76 3.11-2.34 1.2-.6 2.88-1.06 5.65-1.06 1.52 0 2.7.57 3.54 1.52.86.96 1.46 2.46 1.46 4.49V63c-.02 13.7-10.48 24.98-24 25H28z"/>
-      <path stroke-width="4" d="M36 19a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
-    </svg>
-  </div>
-</div>
+<Example>
+    <div class="d-flex g24 fw-wrap">
+        <svg class="fill-current" width="104" height="90" viewBox="0 0 104 90">
+            <path d="M55.0894583,89.9999915 C46.779388,89.9787951 40,82.8534991 40,74.0011148 C40,65.1487306 46.6899296,58.0022382 55,58.0022382 L78,58.0022382 L78,54.002519 L55,54.002519 C44.4335759,54.002519 36,62.9843505 36,74.0011148 C36,80.539398 39.0020198,86.3534623 43.6515559,89.9999915 L28,89.9999915 C16.8806721,90.0095223 0,82.0005532 0,66.0016765 C0,55.0024488 2.78962218,50.2102556 10.8564986,42.7043187 L14.3142395,39.8328917 L9.84593964,38.342865 C4.16478873,36.2854066 0.0363141251,31.9503852 0,27.0044147 L0,22.0047657 L16,22.0047657 L16,18.0050465 C16,6.57300556 28.0063527,-0.737764358 39.3693862,0.0592423703 C51.7564643,0.992036345 60,11.005538 60,24.0046253 C60,30.004204 59,34.6705431 57,38.0036424 L78,38.0036424 C82,38.0036424 84.1200113,36.4411211 86.7283637,34.0695153 C89,32.0040636 91,30.004204 97,30.004204 C101.114191,30.0103083 103.995366,33.162855 104,38.0036424 L104,63.0018871 C103.983654,77.7086979 92.7263972,89.9835751 78,89.9999915 L55.0894583,89.9999915 Z M31,24.0046253 C33.7614237,24.0046253 36,21.7662062 36,19.0049763 C36,16.2437465 33.7614237,14.0053274 31,14.0053274 C28.2385763,14.0053274 26,16.2437465 26,19.0049763 C26,21.7662062 28.2385763,24.0046253 31,24.0046253 Z"/>
+        </svg>
+        <svg class="fill-current fc-orange-400" width="104" height="90" viewBox="0 0 104 90">
+            <path d="M55.0894583,89.9999915 C46.779388,89.9787951 40,82.8534991 40,74.0011148 C40,65.1487306 46.6899296,58.0022382 55,58.0022382 L78,58.0022382 L78,54.002519 L55,54.002519 C44.4335759,54.002519 36,62.9843505 36,74.0011148 C36,80.539398 39.0020198,86.3534623 43.6515559,89.9999915 L28,89.9999915 C16.8806721,90.0095223 0,82.0005532 0,66.0016765 C0,55.0024488 2.78962218,50.2102556 10.8564986,42.7043187 L14.3142395,39.8328917 L9.84593964,38.342865 C4.16478873,36.2854066 0.0363141251,31.9503852 0,27.0044147 L0,22.0047657 L16,22.0047657 L16,18.0050465 C16,6.57300556 28.0063527,-0.737764358 39.3693862,0.0592423703 C51.7564643,0.992036345 60,11.005538 60,24.0046253 C60,30.004204 59,34.6705431 57,38.0036424 L78,38.0036424 C82,38.0036424 84.1200113,36.4411211 86.7283637,34.0695153 C89,32.0040636 91,30.004204 97,30.004204 C101.114191,30.0103083 103.995366,33.162855 104,38.0036424 L104,63.0018871 C103.983654,77.7086979 92.7263972,89.9835751 78,89.9999915 L55.0894583,89.9999915 Z M31,24.0046253 C33.7614237,24.0046253 36,21.7662062 36,19.0049763 C36,16.2437465 33.7614237,14.0053274 31,14.0053274 C28.2385763,14.0053274 26,16.2437465 26,19.0049763 C26,21.7662062 28.2385763,24.0046253 31,24.0046253 Z"/>
+        </svg>
+        <svg class="stroke-current" width="104" height="90" fill="none">
+            <path stroke-width="4" d="M28 88c-5.15 0-11.74-1.87-17-5.62C5.76 78.65 2 73.2 2 66c0-5.33.68-8.94 2.2-12.08 1.54-3.16 4.02-6.02 7.98-9.71l3.41-2.84 2.77-2.3-3.41-1.13-4.45-1.49C5.25 34.55 2.03 30.76 2 27v-3h16v-6c0-4.94 2.58-9.06 6.59-11.93a22.94 22.94 0 0 1 14.63-4.02C50.42 2.9 58 11.9 58 24c0 5.82-.98 10.08-2.72 12.97L53.47 40H78c2.29 0 4.13-.45 5.79-1.29a19.68 19.68 0 0 0 4.28-3.16l.17-.15c1.1-1 1.93-1.76 3.11-2.34 1.2-.6 2.88-1.06 5.65-1.06 1.52 0 2.7.57 3.54 1.52.86.96 1.46 2.46 1.46 4.49V63c-.02 13.7-10.48 24.98-24 25H28z"/>
+            <path stroke-width="4" d="M36 19a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
+        </svg>
+        <svg class="stroke-current fc-orange-400" width="104" height="90" fill="none">
+            <path stroke-width="4" d="M28 88c-5.15 0-11.74-1.87-17-5.62C5.76 78.65 2 73.2 2 66c0-5.33.68-8.94 2.2-12.08 1.54-3.16 4.02-6.02 7.98-9.71l3.41-2.84 2.77-2.3-3.41-1.13-4.45-1.49C5.25 34.55 2.03 30.76 2 27v-3h16v-6c0-4.94 2.58-9.06 6.59-11.93a22.94 22.94 0 0 1 14.63-4.02C50.42 2.9 58 11.9 58 24c0 5.82-.98 10.08-2.72 12.97L53.47 40H78c2.29 0 4.13-.45 5.79-1.29a19.68 19.68 0 0 0 4.28-3.16l.17-.15c1.1-1 1.93-1.76 3.11-2.34 1.2-.6 2.88-1.06 5.65-1.06 1.52 0 2.7.57 3.54 1.52.86.96 1.46 2.46 1.46 4.49V63c-.02 13.7-10.48 24.98-24 25H28z"/>
+            <path stroke-width="4" d="M36 19a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
+        </svg>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/cursors.md b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md
index 769dd2bec0..edae75126c 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/cursors.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md
@@ -1,66 +1,28 @@
 ---
 title: Cursors
 description: Atomic cursor classes allow you to quickly change an element's cursor behavior.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const cursorClasses = [
-    {
-      class: 'c-auto',
-      output: 'cursor: auto;'
-    },
-    {
-      class: 'c-default',
-      output: 'cursor: default;'
-    },
-    {
-      class: 'c-pointer',
-      output: 'cursor: pointer;'
-    },
-    {
-      class: 'c-text',
-      output: 'cursor: text;'
-    },
-    {
-      class: 'c-wait',
-      output: 'cursor: wait;'
-    },
-    {
-      class: 'c-move',
-      output: 'cursor: move;'
-    },
-    {
-      class: 'c-not-allowed',
-      output: 'cursor: not-allowed;'
-    },
-    {
-      class: 'c-help',
-      output: 'cursor: help;'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.c-auto',        output: 'cursor: auto;' },
+        { class: '.c-default',     output: 'cursor: default;' },
+        { class: '.c-pointer',     output: 'cursor: pointer;' },
+        { class: '.c-text',        output: 'cursor: text;' },
+        { class: '.c-wait',        output: 'cursor: wait;' },
+        { class: '.c-move',        output: 'cursor: move;' },
+        { class: '.c-not-allowed', output: 'cursor: not-allowed;' },
+        { class: '.c-help',        output: 'cursor: help;' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each cursorClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -75,31 +37,31 @@ updated: 2025-12-16
 <div class="c-help">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-auto">
-      .c-auto
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-default">
-      .c-default
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-pointer">
-      .c-pointer
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-text">
-      .c-text
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-wait">
-      .c-wait
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-move">
-      .c-move
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-not-allowed">
-      .c-not-allowed
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 c-help">
-      .c-help
+<Example>
+    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
+        <div class="bg-black-200 p12 ba bc-black-225 c-auto">
+            .c-auto
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-default">
+            .c-default
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-pointer">
+            .c-pointer
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-text">
+            .c-text
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-wait">
+            .c-wait
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-move">
+            .c-move
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-not-allowed">
+            .c-not-allowed
+        </div>
+        <div class="bg-black-200 p12 ba bc-black-225 c-help">
+            .c-help
+        </div>
     </div>
-  </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/display.md b/packages/stacks-docs-next/src/docs/public/system/base/display.md
index 6c19ce2e5a..bb3549f4a8 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/display.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/display.md
@@ -1,121 +1,28 @@
 ---
 title: Display
 description: Display atomic classes allow you to change an element's display quickly.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
 
-  const displayClasses = [
-    {
-      class: 'd-block',
-      output: 'display: block;',
-      define: 'This turns any element into a block-level element.',
-      responsive: true,
-      print: true
-    },
-    {
-      class: 'd-inline',
-      output: 'display: inline;',
-      define: 'Turns any element into an inline element that flows like text.',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-inline-block',
-      output: 'display: inline-block;',
-      define: 'Turns any element into a block-level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-flex',
-      output: 'display: flex;',
-      define: 'Lays out its content according to the flexbox model.',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-inline-flex',
-      output: 'display: inline-flex;',
-      define: 'This makes the element behave like an inline element and lays out its content according to the flexbox model.',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-grid',
-      output: 'display: grid;',
-      define: 'This lays out an element and its contents using grid layout.',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-inline-grid',
-      output: 'display: inline-grid;',
-      define: 'This makes the element behave like an inline element and lays out its content according to the grid model.',
-      responsive: true,
-      print: false
-    },
-    {
-      class: 'd-table',
-      output: 'display: table;',
-      define: 'This makes your element behave like <code class="stacks-code">table</code> HTML elements. It defines a block-level box.',
-      responsive: false,
-      print: false
-    },
-    {
-      class: 'd-table-cell',
-      output: 'display: table-cell;',
-      define: 'These elements behave like <code class="stacks-code">td</code> HTML elements.',
-      responsive: false,
-      print: false
-    },
-    {
-      class: 'd-none',
-      output: 'display: none;',
-      define: 'Effectively removes the element from the DOM. Useful for showing / hiding elements.<br/>To hide things when the page is printed, apply <code class="stacks-code">.print:d-none</code>',
-      responsive: true,
-      print: true
-    },
-    {
-      class: 'd-unset',
-      output: 'display: unset;',
-      define: 'Removes any display property from the element.',
-      responsive: false,
-      print: false
-    }
-  ];
+    const classes: ClassTableRow[] = [
+        { class: '.d-block',       output: 'display: block;',        define: 'This turns any element into a block-level element.',                                                                                                                                  responsive: true, print: true },
+        { class: '.d-inline',      output: 'display: inline;',       define: 'Turns any element into an inline element that flows like text.',                                                                                                                      responsive: true },
+        { class: '.d-inline-block',output: 'display: inline-block;', define: 'Turns any element into a block-level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)',              responsive: true },
+        { class: '.d-flex',        output: 'display: flex;',         define: 'Lays out its content according to the flexbox model.',                                                                                                                                responsive: true },
+        { class: '.d-inline-flex', output: 'display: inline-flex;',  define: 'This makes the element behave like an inline element and lays out its content according to the flexbox model.',                                                                      responsive: true },
+        { class: '.d-grid',        output: 'display: grid;',         define: 'This lays out an element and its contents using grid layout.',                                                                                                                       responsive: true },
+        { class: '.d-inline-grid', output: 'display: inline-grid;',  define: 'This makes the element behave like an inline element and lays out its content according to the grid model.',                                                                         responsive: true },
+        { class: '.d-table',       output: 'display: table;',        define: 'This makes your element behave like table HTML elements. It defines a block-level box.' },
+        { class: '.d-table-cell',  output: 'display: table-cell;',   define: 'These elements behave like td HTML elements.' },
+        { class: '.d-none',        output: 'display: none;',         define: 'Effectively removes the element from the DOM. Useful for showing / hiding elements. To hide things when the page is printed, apply .print:d-none',                                   responsive: true, print: true },
+        { class: '.d-unset',       output: 'display: unset;',        define: 'Removes any display property from the element.' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn5 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell1 ta-center" scope="col"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#responsive">Responsive?</a></th>
-        <th class="s-table--cell1 ta-center" scope="col"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#print">Print?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each displayClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td><p class="mb0">{@html item.define}</p></td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-          <td class="ta-center">
-            <Icon src={item.print ? IconCheckFillCircle : IconCrossCircle} class={item.print ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/flex.md b/packages/stacks-docs-next/src/docs/public/system/base/flex.md
index 14008b9ab6..74948b72ee 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/flex.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/flex.md
@@ -1,368 +1,113 @@
 ---
 title: Flex
 description: Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this <a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/" rel="external">interactive introduction</a> by Joshua Comeau.
-updated: 2025-12-05
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
-
-  const flexItem = [
-    {
-      "class": ".flex--item1",
-      "all": ".flex__allitems1",
-      "output": "flex-basis: 8.333333333%;"
-    },
-    {
-      "class": ".flex--item2",
-      "all": ".flex__allitems2",
-      "output": "flex-basis: 16.666666667%;"
-    },
-    {
-      "class": ".flex--item3",
-      "all": ".flex__allitems3",
-      "output": "flex-basis: 24.999999999%;"
-    },
-    {
-      "class": ".flex--item4",
-      "all": ".flex__allitems4",
-      "output": "flex-basis: 33.333333332%;"
-    },
-    {
-      "class": ".flex--item5",
-      "all": ".flex__allitems5",
-      "output": "flex-basis: 41.666666665%;"
-    },
-    {
-      "class": ".flex--item6",
-      "all": ".flex__allitems6",
-      "output": "flex-basis: 50%;"
-    },
-    {
-      "class": ".flex--item7",
-      "all": ".flex__allitems7",
-      "output": "flex-basis: 58.333333331%;"
-    },
-    {
-      "class": ".flex--item8",
-      "all": ".flex__allitems8",
-      "output": "flex-basis: 66.666666664%;"
-    },
-    {
-      "class": ".flex--item9",
-      "all": ".flex__allitems9",
-      "output": "flex-basis: 74.999999997%;"
-    },
-    {
-      "class": ".flex--item10",
-      "all": ".flex__allitems10",
-      "output": "flex-basis: 83.33333333%;"
-    },
-    {
-      "class": ".flex--item11",
-      "all": ".flex__allitems11",
-      "output": "flex-basis: 91.666666663%;"
-    },
-    {
-      "class": ".flex--item12",
-      "all": ".flex__allitems12",
-      "output": "flex-basis: 100%;"
-    }
-  ]
-
-  const gutter = [
-    {
-      "class": ".gs2",
-      "output": "2px"
-    },
-    {
-      "class": ".gs4",
-      "output": "4px"
-    },
-    {
-      "class": ".gs6",
-      "output": "6px"
-    },
-    {
-      "class": ".gs8",
-      "output": "8px"
-    },
-    {
-      "class": ".gs12",
-      "output": "12px"
-    },
-    {
-      "class": ".gs16",
-      "output": "16px"
-    },
-    {
-      "class": ".gs24",
-      "output": "24px"
-    },
-    {
-      "class": ".gs32",
-      "output": "32px"
-    },
-    {
-      "class": ".gs48",
-      "output": "48px"
-    },
-    {
-      "class": ".gs64",
-      "output": "64px"
-    },
-    {
-      "class": ".gsx",
-      "output": "Applies margins only to left and right"
-    },
-    {
-      "class": ".gsy",
-      "output": "Applies margins only to top and bottom"
-    }
-  ]
-
-  const justification = [
-    {
-      "class": ".jc-center",
-      "define": "Centers child elements along the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".jc-end",
-      "define": "Aligns child elements at the end of the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".jc-space-around",
-      "define": "Equally distributes the remaining space around child elements. Note that this doesn't mean the spaces are visually equal, but that the same space unit is applied to both sides of a child element. The first item would have one unit of space against the container edge, but the next item would have two units of space between itself and the first item.",
-      "responsive": true
-    },
-    {
-      "class": ".jc-space-between",
-      "define": "Evenly distributes the space between child elements along a parent's main axis with the first item starting on the start line and the last item on the end line.",
-      "responsive": true
-    },
-    {
-      "class": ".jc-space-evenly",
-      "define": "The spacing between any two items (and spacing between the edges) are equal.",
-      "responsive": true
-    },
-    {
-      "class": ".jc-start",
-      "define": "Aligns child elements at the start of the parent's main axis.",
-      "responsive": true
-    }
-  ]
-
-  const alignItems = [
-    {
-      "class": ".ai-baseline",
-      "define": "Aligns child elements along the baseline of a parent's cross axis.",
-      "responsive": true
-    },
-    {
-      "class": ".ai-center",
-      "define": "Centers child elements along the parent's cross axis.",
-      "responsive": true
-    },
-    {
-      "class": ".ai-end",
-      "define": "Places child elements at the end of the parent's cross axis.",
-      "responsive": true
-    },
-    {
-      "class": ".ai-start",
-      "define": "Places child elements at the start of the parent's cross axis.",
-      "responsive": true
-    },
-    {
-      "class": ".ai-stretch",
-      "define": "Stretches child elements along the parent's cross axis.",
-      "responsive": true
-    }
-  ]
-
-  const flexDirection = [
-    {
-      "class": ".fd-row",
-      "define": "Sets the flex direction to a row.",
-      "responsive": true
-    },
-    {
-      "class": ".fd-row-reverse",
-      "define": "Reverses the row flex direction.",
-      "responsive": true
-    },
-    {
-      "class": ".fd-column",
-      "define": "Sets the flex direction to a column.",
-      "responsive": true
-    },
-    {
-      "class": ".fd-column-reverse",
-      "define": "Reverses the column flex direction.",
-      "responsive": true
-    }
-  ]
-
-  const alignContent = [
-    {
-      "class": ".ac-center",
-      "define": "Distributes child elements starting from the center along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    },
-    {
-      "class": ".ac-end",
-      "define": "Distributes child elements starting from the end along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    },
-    {
-      "class": ".ac-space-around",
-      "define": "Distributes child elements with space around along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    },
-    {
-      "class": ".ac-space-between",
-      "define": "Distributes child elements with space between along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    },
-    {
-      "class": ".ac-start",
-      "define": "Distributes child elements starting from the start along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    },
-    {
-      "class": ".ac-stretch",
-      "define": "Distributes child elements stretching them along a parent's cross axis. This only works with more than one line.",
-      "responsive": false
-    }
-  ]
-
-  const alignSelf = [
-    {
-      "class": ".as-auto",
-      "define": "Auto re-aligns a child element along the parent's main axis based on the ai-[x] value.",
-      "responsive": true
-    },
-    {
-      "class": ".as-baseline",
-      "define": "Re-aligns a child element along the baseline of the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".as-center",
-      "define": "Centers a child element along the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".as-end",
-      "define": "Re-aligns a child element to the end of the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".as-start",
-      "define": "Re-aligns a child element to the start of the parent's main axis.",
-      "responsive": true
-    },
-    {
-      "class": ".as-stretch",
-      "define": "Stretches a child element along the parent's main axis.",
-      "responsive": true
-    }
-  ]
-
-  const flexWrap = [
-    {
-      "class": ".fw-wrap",
-      "define": "Wraps the child cells within a parent.",
-      "responsive": true
-    },
-    {
-      "class": ".fw-reverse",
-      "define": "Reverses the wrap direction.",
-      "responsive": true
-    },
-    {
-      "class": ".fw-nowrap",
-      "define": "Removes the wrap direction.",
-      "responsive": true
-    }
-  ]
-
-  const order = [
-    {
-      "class": ".order-first",
-      "define": "Places the child element first within a parent container.",
-      "responsive": true
-    },
-    {
-      "class": ".order-last",
-      "define": "Places the child element last within a parent container.",
-      "responsive": true
-    }
-  ]
-
-  const flex = [
-    {
-      "class": ".fl-grow1",
-      "define": "Sets flex-grow to allow a flex item to grow to fill any available space.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-grow0",
-      "define": "Prevents a flex item from growing.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-shrink1",
-      "define": "Allows a flex item to shrink if needed.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-shrink0",
-      "define": "Prevents a flex item from shrinking.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-none",
-      "define": "Prevents a flex item from growing or shrinking.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-initial",
-      "define": "Allows a flex item to shrink but not grow, taking into account its initial size.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-auto",
-      "define": "Allows a flex item to grow and shrink, taking into account its initial size.",
-      "responsive": true
-    },
-    {
-      "class": ".fl-equal",
-      "define": "Allow a flex item to grow and shrink as needed, ignoring its initial size. If all children within a flex layout have .<code class='stacks-code'>.fl-equal</code> enabled, they'll be the same size. See also <code class='stacks-code'>.flex__fl-equal</code>",
-      "responsive": true
-    }
-  ]
-
-  const helpers = [
-    {
-      "class": ".flex__center",
-      "define": "Centers child elements along a parent's main and cross axis.",
-      "responsive": false
-    },
-    {
-      "class": ".flex__fl-shrink0",
-      "define": "Disables shrinking from all child elements",
-      "responsive": false
-    },
-    {
-      "class": ".flex__fl-equal",
-      "define": "Makes each child element grow equally",
-      "responsive": false
-    }
-  ]
+    import { Notice, Badge } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const flexItem: ClassTableRow[] = [
+        { class: '.flex--item1',  parent: '.flex__allitems1',  output: 'flex-basis: 8.333333333%;' },
+        { class: '.flex--item2',  parent: '.flex__allitems2',  output: 'flex-basis: 16.666666667%;' },
+        { class: '.flex--item3',  parent: '.flex__allitems3',  output: 'flex-basis: 24.999999999%;' },
+        { class: '.flex--item4',  parent: '.flex__allitems4',  output: 'flex-basis: 33.333333332%;' },
+        { class: '.flex--item5',  parent: '.flex__allitems5',  output: 'flex-basis: 41.666666665%;' },
+        { class: '.flex--item6',  parent: '.flex__allitems6',  output: 'flex-basis: 50%;' },
+        { class: '.flex--item7',  parent: '.flex__allitems7',  output: 'flex-basis: 58.333333331%;' },
+        { class: '.flex--item8',  parent: '.flex__allitems8',  output: 'flex-basis: 66.666666664%;' },
+        { class: '.flex--item9',  parent: '.flex__allitems9',  output: 'flex-basis: 74.999999997%;' },
+        { class: '.flex--item10', parent: '.flex__allitems10', output: 'flex-basis: 83.33333333%;' },
+        { class: '.flex--item11', parent: '.flex__allitems11', output: 'flex-basis: 91.666666663%;' },
+        { class: '.flex--item12', parent: '.flex__allitems12', output: 'flex-basis: 100%;' },
+    ];
+
+    const gutter: ClassTableRow[] = [
+        { class: '.gs2',  output: '2px' },
+        { class: '.gs4',  output: '4px' },
+        { class: '.gs6',  output: '6px' },
+        { class: '.gs8',  output: '8px' },
+        { class: '.gs12', output: '12px' },
+        { class: '.gs16', output: '16px' },
+        { class: '.gs24', output: '24px' },
+        { class: '.gs32', output: '32px' },
+        { class: '.gs48', output: '48px' },
+        { class: '.gs64', output: '64px' },
+        { class: '.gsx',  output: 'Applies margins only to left and right' },
+        { class: '.gsy',  output: 'Applies margins only to top and bottom' },
+    ];
+
+    const justification: ClassTableRow[] = [
+        { class: '.jc-center',        define: "Centers child elements along the parent's main axis.", responsive: true },
+        { class: '.jc-end',           define: "Aligns child elements at the end of the parent's main axis.", responsive: true },
+        { class: '.jc-space-around',  define: "Equally distributes the remaining space around child elements. Note that this doesn't mean the spaces are visually equal, but that the same space unit is applied to both sides of a child element. The first item would have one unit of space against the container edge, but the next item would have two units of space between itself and the first item.", responsive: true },
+        { class: '.jc-space-between', define: "Evenly distributes the space between child elements along a parent's main axis with the first item starting on the start line and the last item on the end line.", responsive: true },
+        { class: '.jc-space-evenly',  define: 'The spacing between any two items (and spacing between the edges) are equal.', responsive: true },
+        { class: '.jc-start',         define: "Aligns child elements at the start of the parent's main axis.", responsive: true },
+    ];
+
+    const alignItems: ClassTableRow[] = [
+        { class: '.ai-baseline', define: "Aligns child elements along the baseline of a parent's cross axis.", responsive: true },
+        { class: '.ai-center',   define: "Centers child elements along the parent's cross axis.", responsive: true },
+        { class: '.ai-end',      define: "Places child elements at the end of the parent's cross axis.", responsive: true },
+        { class: '.ai-start',    define: "Places child elements at the start of the parent's cross axis.", responsive: true },
+        { class: '.ai-stretch',  define: "Stretches child elements along the parent's cross axis.", responsive: true },
+    ];
+
+    const flexDirection: ClassTableRow[] = [
+        { class: '.fd-row',            define: 'Sets the flex direction to a row.', responsive: true },
+        { class: '.fd-row-reverse',    define: 'Reverses the row flex direction.', responsive: true },
+        { class: '.fd-column',         define: 'Sets the flex direction to a column.', responsive: true },
+        { class: '.fd-column-reverse', define: 'Reverses the column flex direction.', responsive: true },
+    ];
+
+    const alignContent: ClassTableRow[] = [
+        { class: '.ac-center',        define: "Distributes child elements starting from the center along a parent's cross axis. This only works with more than one line." },
+        { class: '.ac-end',           define: "Distributes child elements starting from the end along a parent's cross axis. This only works with more than one line." },
+        { class: '.ac-space-around',  define: "Distributes child elements with space around along a parent's cross axis. This only works with more than one line." },
+        { class: '.ac-space-between', define: "Distributes child elements with space between along a parent's cross axis. This only works with more than one line." },
+        { class: '.ac-start',         define: "Distributes child elements starting from the start along a parent's cross axis. This only works with more than one line." },
+        { class: '.ac-stretch',       define: "Distributes child elements stretching them along a parent's cross axis. This only works with more than one line." },
+    ];
+
+    const alignSelf: ClassTableRow[] = [
+        { class: '.as-auto',     define: "Auto re-aligns a child element along the parent's main axis based on the ai-[x] value.", responsive: true },
+        { class: '.as-baseline', define: "Re-aligns a child element along the baseline of the parent's main axis.", responsive: true },
+        { class: '.as-center',   define: "Centers a child element along the parent's main axis.", responsive: true },
+        { class: '.as-end',      define: "Re-aligns a child element to the end of the parent's main axis.", responsive: true },
+        { class: '.as-start',    define: "Re-aligns a child element to the start of the parent's main axis.", responsive: true },
+        { class: '.as-stretch',  define: "Stretches a child element along the parent's main axis.", responsive: true },
+    ];
+
+    const flexWrap: ClassTableRow[] = [
+        { class: '.fw-wrap',    define: 'Wraps the child cells within a parent.', responsive: true },
+        { class: '.fw-reverse', define: 'Reverses the wrap direction.', responsive: true },
+        { class: '.fw-nowrap',  define: 'Removes the wrap direction.', responsive: true },
+    ];
+
+    const order: ClassTableRow[] = [
+        { class: '.order-first', define: 'Places the child element first within a parent container.', responsive: true },
+        { class: '.order-last',  define: 'Places the child element last within a parent container.', responsive: true },
+    ];
+
+    const flex: ClassTableRow[] = [
+        { class: '.fl-grow1',   define: 'Sets flex-grow to allow a flex item to grow to fill any available space.', responsive: true },
+        { class: '.fl-grow0',   define: 'Prevents a flex item from growing.', responsive: true },
+        { class: '.fl-shrink1', define: 'Allows a flex item to shrink if needed.', responsive: true },
+        { class: '.fl-shrink0', define: 'Prevents a flex item from shrinking.', responsive: true },
+        { class: '.fl-none',    define: 'Prevents a flex item from growing or shrinking.', responsive: true },
+        { class: '.fl-initial', define: 'Allows a flex item to shrink but not grow, taking into account its initial size.', responsive: true },
+        { class: '.fl-auto',    define: 'Allows a flex item to grow and shrink, taking into account its initial size.', responsive: true },
+        { class: '.fl-equal',   define: "Allow a flex item to grow and shrink as needed, ignoring its initial size. If all children within a flex layout have .fl-equal enabled, they'll be the same size. See also .flex__fl-equal", responsive: true },
+    ];
+
+    const helpers: ClassTableRow[] = [
+        { class: '.flex__center',     define: "Centers child elements along a parent's main and cross axis." },
+        { class: '.flex__fl-shrink0', define: 'Disables shrinking from all child elements' },
+        { class: '.flex__fl-equal',   define: 'Makes each child element grow equally' },
+    ];
 </script>
 
 <style>
@@ -378,7 +123,7 @@ updated: 2025-12-05
 
 ## Basic flex layout
 
-A flex layout is initiated with the <code class="stacks-code">.d-flex</code> class. By default, <code class="stacks-code">display: flex;</code> starts a non-wrapping row. To convert it to a column, apply the <code class="stacks-code">.fd-column</code> atomic class.
+A flex layout is initiated with the `.d-flex` class. By default, `display: flex;` starts a non-wrapping row. To convert it to a column, apply the `.fd-column` atomic class.
 
 ```html
 <div class="d-flex">
@@ -391,24 +136,26 @@ A flex layout is initiated with the <code class="stacks-code">.d-flex</code> cla
 </div>
 ```
 
-<div class="d-flex g16 fd-column">
-    <div class="flex--item">
-        <div class="d-flex g4">
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+<Example>
+    <div class="d-flex g16 fd-column">
+        <div>
+            <div class="d-flex g4">
+                <div><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+                <div><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex g4 fd-column">
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+        <div>
+            <div class="d-flex g4 fd-column">
+                <div><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+                <div><div class="d-flex flex__center stacks-flex-example--item">.flex--item</div></div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Fluid
 
-By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the <code class="stacks-code">.fl-grow1</code> to the individual item, or <code class="stacks-code">.flex\_\_fl-equal</code> to the parent to apply to all children.
+By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the `.fl-grow1` to the individual item, or `.flex__fl-equal` to the parent to apply to all children.
 
 ### Fluid examples
 
@@ -424,21 +171,23 @@ By default, all flex items will only be as wide as their content. If you would l
 </div>
 ```
 
-<div class="d-flex g16 fd-column">
-    <div class="flex--item">
-        <div class="d-flex g4">
-            <div class="flex--item fl-grow1"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item.fl-grow1</div></div>
-            <div class="flex--item"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+<Example>
+    <div class="d-flex g16 fd-column">
+        <div>
+            <div class="d-flex g4">
+                <div class="fl-grow1"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item.fl-grow1</div></div>
+                <div><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex g4 flex__fl-equal">
-            <div class="flex--item"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
-            <div class="flex--item"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
-            <div class="flex--item"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+        <div>
+            <div class="d-flex g4 flex__fl-equal">
+                <div><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+                <div><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+                <div><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item</div></div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Fixed cells
 
@@ -446,26 +195,7 @@ You can either fix the width of an individual element or fix the width of all ch
 
 ### Fixed classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn5 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Individual Width</th>
-        <th scope="col">Uniform Width</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each flexItem as item}
-        <tr>
-          <td><code class="stacks-code">{item.class}</code></td>
-          <td><code class="stacks-code">{item.all}</code></td>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={flexItem} headings={{ class: 'Individual Width', parent: 'All Items' }} />
 
 ### Fixed examples
 
@@ -487,67 +217,48 @@ You can either fix the width of an individual element or fix the width of all ch
 </div>
 ```
 
-<div class="d-flex g32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.flex--item[x]</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8">
-            <div class="d-flex g4">
-                <div class="flex--item2 stacks-flex-example--item ta-center">.flex--item2</div>
-                <div class="flex--item10 stacks-flex-example--item ta-center">.flex--item10</div>
+<Example>
+    <div class="d-flex g32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.flex--item[x]</div>
+            <div class="bg-black-100 ba bc-black-200 p8">
+                <div class="d-flex g4">
+                    <div class="flex--item2 stacks-flex-example--item ta-center">.flex--item2</div>
+                    <div class="flex--item10 stacks-flex-example--item ta-center">.flex--item10</div>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.flex--item[x] and standard .flex--item</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8">
-            <div class="d-flex g4">
-                <div class="flex--item3 stacks-flex-example--item ta-center">.flex--item3</div>
-                <div class="flex--item6 stacks-flex-example--item ta-center">.flex--item6</div>
-                <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.flex--item[x] and standard .flex--item</div>
+            <div class="bg-black-100 ba bc-black-200 p8">
+                <div class="d-flex g4">
+                    <div class="flex--item3 stacks-flex-example--item ta-center">.flex--item3</div>
+                    <div class="flex--item6 stacks-flex-example--item ta-center">.flex--item6</div>
+                    <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.d-flex.flex__allitems4</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8">
-            <div class="d-flex g4 flex__allitems4 fw-wrap">
-                <div class="flex--item stacks-flex-example--item">.flex--item</div>
-                <div class="flex--item stacks-flex-example--item">.flex--item</div>
-                <div class="flex--item stacks-flex-example--item">.flex--item</div>
-                <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.d-flex.flex__allitems4</div>
+            <div class="bg-black-100 ba bc-black-200 p8">
+                <div class="d-flex g4 flex__allitems4 fw-wrap">
+                    <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                    <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                    <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                    <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                </div>
             </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Helpers
 
-We have a few helper classes you can add to a <code class="stacks-code">.d-flex</code> container that affect the child <code class="stacks-code">.flex--item</code>s.
+We have a few helper classes you can add to a `.d-flex` container that affect the child `.flex--item`s.
 
 ### Helper classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each helpers as helper}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{helper.class}</code></td>
-          <td>{helper.define}</td>
-          <td class="ta-center">
-            <Icon src={helper.responsive ? IconCheckFillCircle : IconCrossCircle} class={helper.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={helpers} />
 
 ### Helpers examples
 
@@ -567,30 +278,32 @@ We have a few helper classes you can add to a <code class="stacks-code">.d-flex<
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.flex__center</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex flex__center hs1">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.flex__center</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex flex__center hs1">
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.flex__fl-shrink0</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-shrink0">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.flex__fl-shrink0</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-shrink0">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.flex__fl-equal</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-equal">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.flex__fl-equal</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-equal">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Nested flex layouts
 
@@ -609,45 +322,30 @@ Flex layouts can be nested within each other. This allows you to create unique,
 </div>
 ```
 
-<div class="d-flex g4">
-    <div class="flex--item fl-grow1 p12 stacks-flex-example--item">
-        <div class="d-flex g12 flex__fl-equal">
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item bg-black-150">.flex--item</div></div>
-            <div class="flex--item"><div class="d-flex flex__center stacks-flex-example--item bg-black-150">.flex--item</div></div>
+<Example>
+    <div class="d-flex g4">
+        <div class="fl-grow1 p12 stacks-flex-example--item">
+            <div class="d-flex g12 flex__fl-equal">
+                <div><div class="d-flex flex__center stacks-flex-example--item bg-black-150">.flex--item</div></div>
+                <div><div class="d-flex flex__center stacks-flex-example--item bg-black-150">.flex--item</div></div>
+            </div>
         </div>
+        <div class="flex--item2"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item2</div></div>
+        <div class="flex--item2"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item2</div></div>
     </div>
-    <div class="flex--item2"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item2</div></div>
-    <div class="flex--item2"><div class="d-flex flex__center h100 stacks-flex-example--item">.flex--item2</div></div>
-</div>
+</Example>
 
 ## Gutters
 
-<div class="s-notice s-notice__warning mb16">
-  <p class="mb0"><strong>Deprecation:</strong> gutters will be removed in a future release.<br> Please use <a href="/product/base/gap">gap classes</a> to set spacing on flex items.</p>
-</div>
+<Notice variant="warning" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Deprecation:</strong> gutters will be removed in a future release.<br> Please use <a href="/product/base/gap">gap classes</a> to set spacing on flex items.</p>
+</Notice>
 
 Sometimes gutters are desired between cells. To do so apply the appropriate class to the parent wrapper. The gutter applies a margin to all sides. The sizes available are the same as <a href="/product/base/spacing">the spacing units</a>.
 
 ### Gutter classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each gutter as item}
-        <tr>
-          <td><code class="stacks-code">{item.class}</code></td>
-          <td>{item.output}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={gutter} headings={{ output: 'Size' }} />
 
 ### Gutter examples
 
@@ -666,40 +364,42 @@ Sometimes gutters are desired between cells. To do so apply the appropriate clas
 </div>
 ```
 
-<div class="d-flex gs32 gsy fd-column">
-    <div class="flex--item bg-orange-200">
-        <div class="d-flex flex__allitems6 gs16 fw-wrap">
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
+<Example>
+    <div class="d-flex gs32 gsy fd-column">
+        <div class="bg-orange-200">
+            <div class="d-flex flex__allitems6 gs16 fw-wrap">
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16</div></div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item bg-orange-200">
-        <div class="d-flex flex__allitems6 gs16 gsx fw-wrap">
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx -- Row gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx -- Row gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx -- Row gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx -- Row gutters only</div></div>
+        <div class="bg-orange-200">
+            <div class="d-flex flex__allitems6 gs16 gsx fw-wrap">
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx — Row gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx — Row gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx — Row gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsx — Row gutters only</div></div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item bg-orange-200">
-        <div class="d-flex flex__fl-equal fd-column gs16 gsy">
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy -- Column gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy -- Column gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy -- Column gutters only</div></div>
-            <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy -- Column gutters only</div></div>
+        <div class="bg-orange-200">
+            <div class="d-flex flex__fl-equal fd-column gs16 gsy">
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy — Column gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy — Column gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy — Column gutters only</div></div>
+                <div class="flex--item"><div class="stacks-flex-example--item">.gs16.gsy — Column gutters only</div></div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ### Nested gutters
 
-<div class="s-notice s-notice__warning mb16">
-  <p class="mb0"><strong>Note:</strong> Nested flex layouts with <a href="#gutters">gutter spacing</a> will conflict with each other in unpredictable ways. <strong>TL;DR?</strong> Don't stick a <code class="stacks-code">.d-flex</code> directly into a <code class="stacks-code">.d-flex</code>, instead stick a <code class="stacks-code">.d-flex</code> into a <code class="stacks-code">.flex--item</code> like so:</p>
-</div>
+<Notice variant="warning" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Note:</strong> Nested flex layouts with <a href="#gutters">gutter spacing</a> will conflict with each other in unpredictable ways. <strong>TL;DR?</strong> Don't stick a <code>.d-flex</code> directly into a <code>.d-flex</code>, instead stick a <code>.d-flex</code> into a <code>.flex--item</code> like so:</p>
+</Notice>
 
-If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child's parent wrapper margins will be overwritten by the parent. To have the child flex layout's gutter spacing honored, you have to put the child flex layout within a <code class="stacks-code">.flex--item</code> wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.
+If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child's parent wrapper margins will be overwritten by the parent. To have the child flex layout's gutter spacing honored, you have to put the child flex layout within a `.flex--item` wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.
 
 #### Do
 
@@ -715,17 +415,19 @@ If you are nesting a flex layout with gutter spacing into another flex layout th
 </div>
 ```
 
-<div class="d-flex gs32 mb24">
-    <div class="flex--item stacks-flex-example--item">.flex--item</div>
-    <div class="flex--item">
-        <div class="d-flex gs16">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gs32 mb24">
+        <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div class="flex--item">
+            <div class="d-flex gs16">
+                <div class="flex--item stacks-flex-example--item">.flex--item</div>
+                <div class="flex--item stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
-#### Don’t
+#### Don't
 
 ```html
 <div class="d-flex gs32">
@@ -737,13 +439,15 @@ If you are nesting a flex layout with gutter spacing into another flex layout th
 </div>
 ```
 
-<div class="d-flex gs32">
-    <div class="flex--item stacks-flex-example--item">.flex--item</div>
-    <div class="d-flex gs16">
-        <div class="flex--item stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gs32">
         <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div class="d-flex gs16">
+            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        </div>
     </div>
-</div>
+</Example>
 
 ## Flex direction
 
@@ -751,28 +455,7 @@ On a flex container, you can set the direction of the child items.
 
 ### Flex direction classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each flexDirection as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={flexDirection} />
 
 ### Flex direction examples
 
@@ -799,43 +482,45 @@ On a flex container, you can set the direction of the child items.
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.fd-row</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
-        </div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fd-row">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.fd-row</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fd-row">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fd-row-reverse</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fd-row-reverse">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
+        <div>
+            <div class="mb8 ff-mono">.fd-row-reverse</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fd-row-reverse">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fd-column</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fd-column">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
+        <div>
+            <div class="mb8 ff-mono">.fd-column</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fd-column">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fd-column-reverse</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fd-column-reverse">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
+        <div>
+            <div class="mb8 ff-mono">.fd-column-reverse</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fd-column-reverse">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Flex wrap
 
@@ -843,28 +528,7 @@ On a flex container, you can control if the children wrap.
 
 ### Flex wrap classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each flexWrap as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={flexWrap} />
 
 ### Flex wrap examples
 
@@ -883,83 +547,64 @@ On a flex container, you can control if the children wrap.
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fw-wrap</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fw-wrap">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 4</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 5</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 6</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 7</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 8</div>
-        </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fw-reverse</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fw-reverse">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 4</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 5</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 6</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 7</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 8</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.fw-wrap</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fw-wrap">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+                <div class="stacks-flex-example--item">.flex--item 4</div>
+                <div class="stacks-flex-example--item">.flex--item 5</div>
+                <div class="stacks-flex-example--item">.flex--item 6</div>
+                <div class="stacks-flex-example--item">.flex--item 7</div>
+                <div class="stacks-flex-example--item">.flex--item 8</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.fw-nowrap</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
+        <div>
+            <div class="mb8 ff-mono">.fw-reverse</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fw-reverse">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+                <div class="stacks-flex-example--item">.flex--item 4</div>
+                <div class="stacks-flex-example--item">.flex--item 5</div>
+                <div class="stacks-flex-example--item">.flex--item 6</div>
+                <div class="stacks-flex-example--item">.flex--item 7</div>
+                <div class="stacks-flex-example--item">.flex--item 8</div>
+            </div>
         </div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 fw-nowrap overflow-x-hidden">
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item ws-nowrap stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.fw-nowrap</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 fw-nowrap overflow-x-hidden">
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+                <div class="ws-nowrap stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Justify content
 
-Flex items can be controlled with atomic classes on the container's main axis. This means controlling how a <code class="stacks-code">.flex--item</code> is aligned left to right when in an <code class="stacks-code">.fd-row</code>, and top and bottom in an <code class="stacks-code">.fd-column</code>.
+Flex items can be controlled with atomic classes on the container's main axis. This means controlling how a `.flex--item` is aligned left to right when in an `.fd-row`, and top and bottom in an `.fd-column`.
 
 ### Justify content classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each justification as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={justification} />
 
 ### Justify content examples
 
@@ -996,88 +641,69 @@ Flex items can be controlled with atomic classes on the container's main axis. T
 </div>
 ```
 
-<div class="d-flex gy48 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.jc-center</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-        </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.jc-end</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-end">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gy48 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.jc-center</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.jc-space-around</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-around">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.jc-end</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-end">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.jc-space-between</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-between">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.jc-space-around</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-around">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.jc-space-evenly</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-evenly">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.jc-space-between</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-between">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.jc-start</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
+        <div>
+            <div class="mb8 ff-mono">.jc-space-evenly</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-space-evenly">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 jc-start">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.jc-start</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 jc-start">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Align items
 
-Flex items can be controlled with atomic classes on the container's cross axis. This means controlling how a <code class="stacks-code">.flex--item</code> is aligned top to bottom when in an <code class="stacks-code">.fd-row</code>, and left to right in an <code class="stacks-code">.fd-column</code>.
+Flex items can be controlled with atomic classes on the container's cross axis. This means controlling how a `.flex--item` is aligned top to bottom when in an `.fd-row`, and left to right in an `.fd-column`.
 
 ### Align items classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each alignItems as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={alignItems} />
 
 ### Align items examples
 
@@ -1109,51 +735,53 @@ Flex items can be controlled with atomic classes on the container's cross axis.
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ai-baseline</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 ai-baseline">
-            <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex ai-end stacks-flex-example--item h48">.flex--item</div>
-        </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ai-center</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 ai-center">
-            <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.ai-baseline</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-baseline">
+                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
+                <div class="stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex ai-end stacks-flex-example--item h48">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ai-end</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 ai-end">
-            <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.ai-center</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-center">
+                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ai-start</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 ai-start">
-            <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.ai-end</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-end">
+                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.ai-stretch</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
+        <div>
+            <div class="mb8 ff-mono">.ai-start</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-start">
+                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
+            </div>
         </div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4 ai-stretch">
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.ai-stretch</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-stretch">
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Align content
 
@@ -1161,28 +789,7 @@ Flex items can be controlled with atomic classes on the container's cross axis.
 
 ### Align content classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each alignContent as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={alignContent} />
 
 ### Align content examples
 
@@ -1219,120 +826,101 @@ Flex items can be controlled with atomic classes on the container's cross axis.
 </div>
 ```
 
-<div class="d-flex gy48 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ac-center</div>
-        <div class="bar-md hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-center fw-wrap">
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-        </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ac-end</div>
-        <div class="bar-md hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-end fw-wrap">
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gy48 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.ac-center</div>
+            <div class="hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-center fw-wrap">
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ac-space-around</div>
-        <div class="bar-md hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-space-around fw-wrap">
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.ac-end</div>
+            <div class="hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-end fw-wrap">
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.ac-space-between</div>
-        <div class="bar-md hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-space-between fw-wrap">
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.ac-space-around</div>
+            <div class="hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-space-around fw-wrap">
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.ac-start</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
+        <div>
+            <div class="mb8 ff-mono">.ac-space-between</div>
+            <div class="hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-space-between fw-wrap">
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-        <div class="bar-md hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-start fw-wrap">
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item h-auto stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.ac-start</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="hs2 bg-black-100 ba bc-black-200 p8 d-flex g4 ac-start fw-wrap">
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+                <div class="h-auto stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Align self
 
-A flex container's <code class="stacks-code">align-items</code> can be overridden on individual items within a flex layout.
+A flex container's `align-items` can be overridden on individual items within a flex layout.
 
 ### Align self classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each alignSelf as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={alignSelf} />
 
 ### Align self examples
 
@@ -1369,59 +957,61 @@ A flex container's <code class="stacks-code">align-items</code> can be overridde
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="d-flex ai-center mb8">
-            <div class="flex--item ff-mono">.as-auto</div>
-            <div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>
-        </div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-auto">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="d-flex ai-center mb8">
+                <div class="ff-mono">.as-auto</div>
+                <Badge text="Default" class="ml6" />
+            </div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-auto">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.as-baseline</div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-baseline">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.as-baseline</div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-baseline">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.as-center</div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-center">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.as-center</div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-center">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.as-end</div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-end">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.as-end</div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-end">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.as-start</div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-start">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.as-start</div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-start">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.as-stretch</div>
-        <div class="bar-md hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center ai-center">
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-stretch">.flex--item</div>
-            <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.as-stretch</div>
+            <div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center ai-center">
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-stretch">.flex--item</div>
+                <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Order
 
@@ -1429,28 +1019,7 @@ Within a flex layout, you can force the position of individual elements.
 
 ### Order classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each order as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={order} />
 
 ### Order examples
 
@@ -1467,24 +1036,26 @@ Within a flex layout, you can force the position of individual elements.
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.order-first</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 order-first">.flex--item 3</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.order-first</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 order-first">.flex--item 3</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.order-last</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 order-last">.flex--item 1</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 2</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item 3</div>
+        <div>
+            <div class="mb8 ff-mono">.order-last</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 order-last">.flex--item 1</div>
+                <div class="stacks-flex-example--item">.flex--item 2</div>
+                <div class="stacks-flex-example--item">.flex--item 3</div>
+            </div>
         </div>
     </div>
-</div>
+</Example>
 
 ## Flex shrink and grow
 
@@ -1492,28 +1063,7 @@ You can control the growing and shrinking behavior of individual elements within
 
 ### Flex classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each flex as item}
-        <tr>
-          <td><code class="stacks-code ws-nowrap">{item.class}</code></td>
-          <td>{@html item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={flex} />
 
 ### Flex examples
 
@@ -1560,73 +1110,71 @@ You can control the growing and shrinking behavior of individual elements within
 </div>
 ```
 
-<div class="d-flex gy32 fd-column">
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-grow1</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-grow1">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+<Example>
+    <div class="d-flex gy32 fd-column">
+        <div>
+            <div class="mb8 ff-mono">.fl-grow1</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-grow1">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-grow0</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-grow0">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-grow0</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-grow0">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-shrink1</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink1">.flex--<br>item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-shrink1</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink1">.flex--<br>item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-shrink0</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item fl-grow1">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink0">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item fl-grow1">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-shrink0</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item fl-grow1">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink0">.flex--item</div>
+                <div class="stacks-flex-example--item fl-grow1">.flex--item</div>
+            </div>
         </div>
-    </div>
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-none</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item fl-grow1">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-none">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item fl-grow1">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-none</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item fl-grow1">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-none">.flex--item</div>
+                <div class="stacks-flex-example--item fl-grow1">.flex--item</div>
+            </div>
         </div>
-    </div>
-
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-initial</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-initial">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-initial</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-initial">.flex--item</div>
+                <div class="stacks-flex-example--item">.flex--item</div>
+            </div>
         </div>
-    </div>
-
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-auto</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item fl-auto">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-auto .ws2">.flex--item.ws2</div>
-            <div class="flex--item stacks-flex-example--item fl-auto">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-auto</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item fl-auto">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-auto .ws2">.flex--item.ws2</div>
+                <div class="stacks-flex-example--item fl-auto">.flex--item</div>
+            </div>
         </div>
-    </div>
-
-    <div class="flex--item">
-        <div class="mb8 ff-mono">.fl-equal</div>
-        <div class="bar-md bg-black-100 ba bc-black-200 p8 d-flex g4">
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
-            <div class="flex--item stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
+        <div>
+            <div class="mb8 ff-mono">.fl-equal</div>
+            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
+                <div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal">.flex--item</div>
+            </div>
         </div>
     </div>
-
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/floats.md b/packages/stacks-docs-next/src/docs/public/system/base/floats.md
index 0e9b65a664..1c7f8c8fb6 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/floats.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/floats.md
@@ -1,76 +1,28 @@
 ---
 title: Floats
 description: Float and clear atomic classes allow you to change how an element is positioned within the layout. These should be used when possible to help create consistency.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const floatClasses = [
-    {
-      class: 'float-left',
-      output: 'float: left;',
-      define: 'Indicates that the element must float on the left side of the parent container.'
-    },
-    {
-      class: 'float-right',
-      output: 'float: right;',
-      define: 'Indicates that the element must float on the right side of the parent container.'
-    },
-    {
-      class: 'float-none',
-      output: 'float: none;',
-      define: 'Indicates that the element must not float.'
-    },
-    {
-      class: 'clearfix',
-      output: '.clearfix();',
-      define: 'This class calls the <code class="stacks-code">.clearfix();</code> mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The <code class="stacks-code">.clearfix</code> class forces the parent container to not collapse.'
-    },
-    {
-      class: 'clear-left',
-      output: 'clear: left;',
-      define: 'Indicates that the element must be moved down to clear past <em>left</em> floats.'
-    },
-    {
-      class: 'clear-right',
-      output: 'clear: right;',
-      define: 'Indicates that the element must be moved down to clear past <em>right</em> floats.'
-    },
-    {
-      class: 'clear-both',
-      output: 'clear: both;',
-      define: 'Indicates that the element must be moved down to clear past <em>left and right</em> floats.'
-    },
-    {
-      class: 'clear-none',
-      output: 'clear: none;',
-      define: 'Indicates that the element does not need to be moved down to clear past floats.'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.float-left',  output: 'float: left;',   define: 'Indicates that the element must float on the left side of the parent container.' },
+        { class: '.float-right', output: 'float: right;',  define: 'Indicates that the element must float on the right side of the parent container.' },
+        { class: '.float-none',  output: 'float: none;',   define: 'Indicates that the element must not float.' },
+        { class: '.clearfix',    output: '.clearfix();',    define: 'This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.' },
+        { class: '.clear-left',  output: 'clear: left;',   define: 'Indicates that the element must be moved down to clear past left floats.' },
+        { class: '.clear-right', output: 'clear: right;',  define: 'Indicates that the element must be moved down to clear past right floats.' },
+        { class: '.clear-both',  output: 'clear: both;',   define: 'Indicates that the element must be moved down to clear past left and right floats.' },
+        { class: '.clear-none',  output: 'clear: none;',   define: 'Indicates that the element does not need to be moved down to clear past floats.' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell2" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody class="fs-caption">
-      {#each floatClasses as item}
-        <tr>
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="p8"><p class="mb0">{@html item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} headings={{ define: 'Definition' }} />
 
 ## Examples
 
@@ -84,13 +36,13 @@ updated: 2025-12-16
 </div>
 ```
 
-<div class="stacks-preview--example ps-relative fs-caption ff-mono">
+<Example>
   <div class="ps-relative clearfix fc-black-600 ff-mono">
     <div class="ps-relative float-none my4 w50 bg-black-200 p12 ba bc-black-225">.float-none</div>
     <div class="ps-relative float-left my4 w25 bg-black-200 p12 ba bc-black-225">.float-left</div>
     <div class="ps-relative float-right my4 w25 bg-black-200 p12 ba bc-black-225">.float-right</div>
   </div>
-</div>
+</Example>
 
 ### Clears
 
@@ -112,7 +64,7 @@ updated: 2025-12-16
 </div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
+<Example>
   <div class="clearfix fc-black-600 ff-mono mb24">
     <div class="ps-relative float-left mb12 mr12 w25 bg-black-200 p12 ba bc-black-225">.float-left</div>
     <div class="ps-relative float-left mb12 mr12 w25 bg-black-200 p12 ba bc-black-225">.float-left</div>
@@ -128,4 +80,4 @@ updated: 2025-12-16
     <div class="ps-relative float-right mb12 mr12 w25 bg-black-200 p12 ba bc-black-225">.float-right</div>
     <div class="ps-relative clear-both mr12 w25 bg-black-200 p12 ba bc-black-225">.clear-both</div>
   </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/gap.md b/packages/stacks-docs-next/src/docs/public/system/base/gap.md
index 8ddc8c14cb..36e67512a7 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/gap.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/gap.md
@@ -1,85 +1,62 @@
 ---
 title: Gap
-description: Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts.
-updated: 2025-12-17
+description: Atomic CSS gap classes allow you to set spacing on the direct children of elements with <code>flexbox</code> and <code>grid</code> layouts.
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
-
-  const gapClasses = [
-    { "class": "g0", "output": "gap: 0", "define": "Add no space between items", "responsive": true },
-    { "class": "g1", "output": "gap: 1px", "define": "Space out items by 1px", "responsive": true },
-    { "class": "g2", "output": "gap: 2px", "define": "Space out items by 2px", "responsive": true },
-    { "class": "g4", "output": "gap: 4px", "define": "Space out items by 4px", "responsive": true },
-    { "class": "g6", "output": "gap: 6px", "define": "Space out items by 6px", "responsive": true },
-    { "class": "g8", "output": "gap: 8px", "define": "Space out items by 8px", "responsive": true },
-    { "class": "g12", "output": "gap: 12px", "define": "Space out items by 12px", "responsive": true },
-    { "class": "g16", "output": "gap: 16px", "define": "Space out items by 16px", "responsive": true },
-    { "class": "g24", "output": "gap: 24px", "define": "Space out items by 24px", "responsive": true },
-    { "class": "g32", "output": "gap: 32px", "define": "Space out items by 32px", "responsive": true },
-    { "class": "g48", "output": "gap: 48px", "define": "Space out items by 48px", "responsive": true },
-    { "class": "g64", "output": "gap: 64px", "define": "Space out items by 64px", "responsive": true }
-  ];
-
-  const rowGapClasses = [
-    { "class": "gy0", "define": "Add no space between rows", "responsive": true },
-    { "class": "gy1", "define": "Space out rows by 1px", "responsive": true },
-    { "class": "gy2", "define": "Space out rows by 2px", "responsive": true },
-    { "class": "gy4", "define": "Space out rows by 4px", "responsive": true },
-    { "class": "gy6", "define": "Space out rows by 6px", "responsive": true },
-    { "class": "gy8", "define": "Space out rows by 8px", "responsive": true },
-    { "class": "gy12", "define": "Space out rows by 12px", "responsive": true },
-    { "class": "gy16", "define": "Space out rows by 16px", "responsive": true },
-    { "class": "gy24", "define": "Space out rows by 24px", "responsive": true },
-    { "class": "gy32", "define": "Space out rows by 32px", "responsive": true },
-    { "class": "gy48", "define": "Space out rows by 48px", "responsive": true },
-    { "class": "gy64", "define": "Space out rows by 64px", "responsive": true }
-  ];
-
-  const columnGapClasses = [
-    { "class": "gx0", "define": "Add no space between columns", "responsive": true },
-    { "class": "gx1", "define": "Space out columns by 1px", "responsive": true },
-    { "class": "gx2", "define": "Space out columns by 2px", "responsive": true },
-    { "class": "gx4", "define": "Space out columns by 4px", "responsive": true },
-    { "class": "gx6", "define": "Space out columns by 6px", "responsive": true },
-    { "class": "gx8", "define": "Space out columns by 8px", "responsive": true },
-    { "class": "gx12", "define": "Space out columns by 12px", "responsive": true },
-    { "class": "gx16", "define": "Space out columns by 16px", "responsive": true },
-    { "class": "gx24", "define": "Space out columns by 24px", "responsive": true },
-    { "class": "gx32", "define": "Space out columns by 32px", "responsive": true },
-    { "class": "gx48", "define": "Space out columns by 48px", "responsive": true },
-    { "class": "gx64", "define": "Space out columns by 64px", "responsive": true }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const gapClasses: ClassTableRow[] = [
+        { class: '.g0',  output: 'gap: 0',     define: 'Add no space between items',  responsive: true },
+        { class: '.g1',  output: 'gap: 1px',   define: 'Space out items by 1px',      responsive: true },
+        { class: '.g2',  output: 'gap: 2px',   define: 'Space out items by 2px',      responsive: true },
+        { class: '.g4',  output: 'gap: 4px',   define: 'Space out items by 4px',      responsive: true },
+        { class: '.g6',  output: 'gap: 6px',   define: 'Space out items by 6px',      responsive: true },
+        { class: '.g8',  output: 'gap: 8px',   define: 'Space out items by 8px',      responsive: true },
+        { class: '.g12', output: 'gap: 12px',  define: 'Space out items by 12px',     responsive: true },
+        { class: '.g16', output: 'gap: 16px',  define: 'Space out items by 16px',     responsive: true },
+        { class: '.g24', output: 'gap: 24px',  define: 'Space out items by 24px',     responsive: true },
+        { class: '.g32', output: 'gap: 32px',  define: 'Space out items by 32px',     responsive: true },
+        { class: '.g48', output: 'gap: 48px',  define: 'Space out items by 48px',     responsive: true },
+        { class: '.g64', output: 'gap: 64px',  define: 'Space out items by 64px',     responsive: true },
+    ];
+
+    const columnGapClasses: ClassTableRow[] = [
+        { class: '.gx0',  define: 'Add no space between columns', responsive: true },
+        { class: '.gx1',  define: 'Space out columns by 1px',     responsive: true },
+        { class: '.gx2',  define: 'Space out columns by 2px',     responsive: true },
+        { class: '.gx4',  define: 'Space out columns by 4px',     responsive: true },
+        { class: '.gx6',  define: 'Space out columns by 6px',     responsive: true },
+        { class: '.gx8',  define: 'Space out columns by 8px',     responsive: true },
+        { class: '.gx12', define: 'Space out columns by 12px',    responsive: true },
+        { class: '.gx16', define: 'Space out columns by 16px',    responsive: true },
+        { class: '.gx24', define: 'Space out columns by 24px',    responsive: true },
+        { class: '.gx32', define: 'Space out columns by 32px',    responsive: true },
+        { class: '.gx48', define: 'Space out columns by 48px',    responsive: true },
+        { class: '.gx64', define: 'Space out columns by 64px',    responsive: true },
+    ];
+
+    const rowGapClasses: ClassTableRow[] = [
+        { class: '.gy0',  define: 'Add no space between rows', responsive: true },
+        { class: '.gy1',  define: 'Space out rows by 1px',     responsive: true },
+        { class: '.gy2',  define: 'Space out rows by 2px',     responsive: true },
+        { class: '.gy4',  define: 'Space out rows by 4px',     responsive: true },
+        { class: '.gy6',  define: 'Space out rows by 6px',     responsive: true },
+        { class: '.gy8',  define: 'Space out rows by 8px',     responsive: true },
+        { class: '.gy12', define: 'Space out rows by 12px',    responsive: true },
+        { class: '.gy16', define: 'Space out rows by 16px',    responsive: true },
+        { class: '.gy24', define: 'Space out rows by 24px',    responsive: true },
+        { class: '.gy32', define: 'Space out rows by 32px',    responsive: true },
+        { class: '.gy48', define: 'Space out rows by 48px',    responsive: true },
+        { class: '.gy64', define: 'Space out rows by 64px',    responsive: true },
+    ];
 </script>
 
 ## Gap classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each gapClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={gapClasses} />
 
 ### Examples
 
@@ -97,47 +74,148 @@ updated: 2025-12-17
 <div class="d-grid g64">…</div>
 ```
 
-<div class="stacks-preview--example ff-mono">
-  {#each gapClasses as item}
-    <div class="mb16 d-grid {item.class} grid__3 bg-black-200 ba bc-black-225 p16">
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300">
-        .{item.class}
-      </div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+<Example>
+    <div class="d-flex fd-column g24 w100 ff-mono">
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g0</div>
+            <div class="d-grid g0 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g1</div>
+            <div class="d-grid g1 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g2</div>
+            <div class="d-grid g2 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g4</div>
+            <div class="d-grid g4 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g6</div>
+            <div class="d-grid g6 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g8</div>
+            <div class="d-grid g8 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g12</div>
+            <div class="d-grid g12 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g16</div>
+            <div class="d-grid g16 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g24</div>
+            <div class="d-grid g24 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g32</div>
+            <div class="d-grid g32 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g48</div>
+            <div class="d-grid g48 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.g64</div>
+            <div class="d-grid g64 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
     </div>
-  {/each}
-</div>
+</Example>
 
 ## Column gap
 
 Spacing can be set on just the x-axis with `.gx` classes. They can be used independently or in combination with other atomic gap classes.
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each columnGapClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={columnGapClasses} />
 
 ### Column examples
 
@@ -155,47 +233,148 @@ Spacing can be set on just the x-axis with `.gx` classes. They can be used indep
 <div class="d-grid gx64">…</div>
 ```
 
-<div class="stacks-preview--example ff-mono">
-  {#each columnGapClasses as item}
-    <div class="mb16 d-grid {item.class} grid__3 bg-black-200 ba bc-black-225 p16">
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300">
-        .{item.class}
-      </div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+<Example>
+    <div class="d-flex fd-column g24 w100 ff-mono">
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx0</div>
+            <div class="d-grid gx0 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx1</div>
+            <div class="d-grid gx1 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx2</div>
+            <div class="d-grid gx2 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx4</div>
+            <div class="d-grid gx4 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx6</div>
+            <div class="d-grid gx6 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx8</div>
+            <div class="d-grid gx8 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx12</div>
+            <div class="d-grid gx12 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx16</div>
+            <div class="d-grid gx16 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx24</div>
+            <div class="d-grid gx24 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx32</div>
+            <div class="d-grid gx32 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx48</div>
+            <div class="d-grid gx48 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gx64</div>
+            <div class="d-grid gx64 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
     </div>
-  {/each}
-</div>
+</Example>
 
 ## Row gap
 
 Spacing can be set on just the y-axis with `.gy` classes. They can be used independently or in combination with other atomic gap classes.
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each rowGapClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            <Icon src={item.responsive ? IconCheckFillCircle : IconCrossCircle} class={item.responsive ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={rowGapClasses} />
 
 ### Row examples
 
@@ -213,17 +392,139 @@ Spacing can be set on just the y-axis with `.gy` classes. They can be used indep
 <div class="d-grid gy64">…</div>
 ```
 
-<div class="stacks-preview--example ff-mono">
-  {#each rowGapClasses as item}
-    <div class="mb16 d-grid {item.class} grid__3 bg-black-200 ba bc-black-225 p16">
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300">
-        .{item.class}
-      </div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
-      <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+<Example>
+    <div class="d-flex fd-column g24 w100 ff-mono">
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy0</div>
+            <div class="d-grid gy0 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy1</div>
+            <div class="d-grid gy1 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy2</div>
+            <div class="d-grid gy2 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy4</div>
+            <div class="d-grid gy4 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy6</div>
+            <div class="d-grid gy6 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy8</div>
+            <div class="d-grid gy8 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy12</div>
+            <div class="d-grid gy12 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy16</div>
+            <div class="d-grid gy16 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy24</div>
+            <div class="d-grid gy24 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy32</div>
+            <div class="d-grid gy32 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy48</div>
+            <div class="d-grid gy48 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
+        <div class="d-flex fd-column g0 w100">
+            <div class="mb8">.gy64</div>
+            <div class="d-grid gy64 grid__3 bg-black-200 ba bc-black-225 p16">
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+                <div class="grid--item bg-black-225 p8 h32 ba bc-black-300"></div>
+            </div>
+        </div>
     </div>
-  {/each}
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/grid.md b/packages/stacks-docs-next/src/docs/public/system/base/grid.md
index 401fbb919b..3fe04f1f86 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/grid.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/grid.md
@@ -1,711 +1,151 @@
 ---
-updated: 2025-12-05
+title: "Grid"
+description: "Atomic CSS grid classes allow you to quickly add native css grids to your container."
 ---
 
 <script lang="ts">
-const columnTemplates = [
-  {
-    "class": "grid__1",
-    "output": "grid-template-columns: repeat(1, minmax(0, 1fr))",
-    "define": "Creates a grid layout with 1 column",
-    "responsive": true
-  },
-  {
-    "class": "grid__2",
-    "output": "grid-template-columns: repeat(2, minmax(0, 2fr))",
-    "define": "Creates a grid layout with 2 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__3",
-    "output": "grid-template-columns: repeat(3, minmax(0, 3fr))",
-    "define": "Creates a grid layout with 3 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__4",
-    "output": "grid-template-columns: repeat(4, minmax(0, 4fr))",
-    "define": "Creates a grid layout with 4 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__5",
-    "output": "grid-template-columns: repeat(5, minmax(0, 5fr))",
-    "define": "Creates a grid layout with 5 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__6",
-    "output": "grid-template-columns: repeat(6, minmax(0, 6fr))",
-    "define": "Creates a grid layout with 6 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__7",
-    "output": "grid-template-columns: repeat(7, minmax(0, 7fr))",
-    "define": "Creates a grid layout with 7 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__8",
-    "output": "grid-template-columns: repeat(8, minmax(0, 8fr))",
-    "define": "Creates a grid layout with 8 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__9",
-    "output": "grid-template-columns: repeat(9, minmax(0, 9fr))",
-    "define": "Creates a grid layout with 9 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__10",
-    "output": "grid-template-columns: repeat(10, minmax(0, 10fr))",
-    "define": "Creates a grid layout with 10 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__11",
-    "output": "grid-template-columns: repeat(11, minmax(0, 11fr))",
-    "define": "Creates a grid layout with 11 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__12",
-    "output": "grid-template-columns: repeat(1, minmax(0, 12fr))",
-    "define": "Creates a grid layout with 12 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid__auto",
-    "output": "grid-template-columns: auto 1fr",
-    "define": "Creates a grid layout with auto-sized columns based on their content",
-    "responsive": true
-  }
-]
-
-const columns = [
-  {
-    "class": "grid--col-all",
-    "output": "grid-column: 1 / -1",
-    "define": "Span all the columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col1",
-    "output": "grid-column: span 1",
-    "define": "Span 1 column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col2",
-    "output": "grid-column: span 2",
-    "define": "Span 2 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col3",
-    "output": "grid-column: span 3",
-    "define": "Span 3 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col4",
-    "output": "grid-column: span 4",
-    "define": "Span 4 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col5",
-    "output": "grid-column: span 5",
-    "define": "Span 5 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col6",
-    "output": "grid-column: span 6",
-    "define": "Span 6 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col7",
-    "output": "grid-column: span 7",
-    "define": "Span 7 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col8",
-    "output": "grid-column: span 8",
-    "define": "Span 8 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col9",
-    "output": "grid-column: span 9",
-    "define": "Span 9 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col10",
-    "output": "grid-column: span 10",
-    "define": "Span 10 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col11",
-    "output": "grid-column: span 11",
-    "define": "Span 11 columns",
-    "responsive": true
-  },
-  {
-    "class": "grid--col12",
-    "output": "grid-column: span 12",
-    "define": "Span 12 columns",
-    "responsive": true
-  }
-]
-
-const rows = [
-  {
-    "class": "grid--row-all",
-    "output": "grid-row: 1 / -1",
-    "define": "Span all the rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row1",
-    "output": "grid-row: span 1",
-    "define": "Span 1 row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row2",
-    "output": "grid-row: span 2",
-    "define": "Span 2 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row3",
-    "output": "grid-row: span 3",
-    "define": "Span 3 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row4",
-    "output": "grid-row: span 4",
-    "define": "Span 4 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row5",
-    "output": "grid-row: span 5",
-    "define": "Span 5 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row6",
-    "output": "grid-row: span 6",
-    "define": "Span 6 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row7",
-    "output": "grid-row: span 7",
-    "define": "Span 7 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row8",
-    "output": "grid-row: span 8",
-    "define": "Span 8 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row9",
-    "output": "grid-row: span 9",
-    "define": "Span 9 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row10",
-    "output": "grid-row: span 10",
-    "define": "Span 10 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row11",
-    "output": "grid-row: span 11",
-    "define": "Span 11 rows",
-    "responsive": true
-  },
-  {
-    "class": "grid--row12",
-    "output": "grid-row: span 12",
-    "define": "Span 12 rows",
-    "responsive": true
-  }
-]
-
-const autoflow = [
-  {
-    "class": "g-af-row",
-    "output": "grid-auto-flow: row",
-    "define": "Items are placed by filling each row in turn, adding new rows as necessary. The default.",
-    "responsive": true
-  },
-  {
-    "class": "g-af-column",
-    "output": "grid-auto-flow: column",
-    "define": "Items are placed by filling each column in turn, adding new columns as necessary.",
-    "responsive": true
-  },
-  {
-    "class": "g-af-dense",
-    "output": "grid-auto-flow: dense",
-    "define": "Dense packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.",
-    "responsive": true
-  }
-]
-
-const columnStartEnd = [
-  {
-    "class": "grid--col-start1",
-    "output": "grid-column-start: 1",
-    "define": "Start at the 1st column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start2",
-    "output": "grid-column-start: 2",
-    "define": "Start at the 2nd column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start3",
-    "output": "grid-column-start: 3",
-    "define": "Start at the 3rd column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start4",
-    "output": "grid-column-start: 4",
-    "define": "Start at the 4th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start5",
-    "output": "grid-column-start: 5",
-    "define": "Start at the 5th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start6",
-    "output": "grid-column-start: 6",
-    "define": "Start at the 6th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start7",
-    "output": "grid-column-start: 7",
-    "define": "Start at the 7th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start8",
-    "output": "grid-column-start: 8",
-    "define": "Start at the 8th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start9",
-    "output": "grid-column-start: 9",
-    "define": "Start at the 9th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start10",
-    "output": "grid-column-start: 10",
-    "define": "Start at the 10th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start11",
-    "output": "grid-column-start: 11",
-    "define": "Start at the 11th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-start12",
-    "output": "grid-column-start: 12",
-    "define": "Start at the 12th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end2",
-    "output": "grid-column-end: 2",
-    "define": "End at the start of 2nd column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end3",
-    "output": "grid-column-end: 3",
-    "define": "End at the start of 3rd column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end4",
-    "output": "grid-column-end: 4",
-    "define": "End at the start of 4th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end5",
-    "output": "grid-column-end: 5",
-    "define": "End at the start of 5th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end6",
-    "output": "grid-column-end: 6",
-    "define": "End at the start of 6th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end7",
-    "output": "grid-column-end: 7",
-    "define": "End at the start of 7th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end8",
-    "output": "grid-column-end: 8",
-    "define": "End at the start of 8th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end9",
-    "output": "grid-column-end: 9",
-    "define": "End at the start of 9th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end10",
-    "output": "grid-column-end: 10",
-    "define": "End at the start of 10th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end11",
-    "output": "grid-column-end: 11",
-    "define": "End at the start of 11th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end12",
-    "output": "grid-column-end: 12",
-    "define": "End at the start of 12th column",
-    "responsive": true
-  },
-  {
-    "class": "grid--col-end13",
-    "output": "grid-column-end: 13",
-    "define": "End at the start of 13th column",
-    "responsive": true
-  }
-]
-
-const rowStartEnd = [
-  {
-    "class": "grid--row-start1",
-    "output": "grid-row-start: 1",
-    "define": "Start at the 1st row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start2",
-    "output": "grid-row-start: 2",
-    "define": "Start at the 2nd row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start3",
-    "output": "grid-row-start: 3",
-    "define": "Start at the 3rd row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start4",
-    "output": "grid-row-start: 4",
-    "define": "Start at the 4th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start5",
-    "output": "grid-row-start: 5",
-    "define": "Start at the 5th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start6",
-    "output": "grid-row-start: 6",
-    "define": "Start at the 6th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start7",
-    "output": "grid-row-start: 7",
-    "define": "Start at the 7th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start8",
-    "output": "grid-row-start: 8",
-    "define": "Start at the 8th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start9",
-    "output": "grid-row-start: 9",
-    "define": "Start at the 9th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start10",
-    "output": "grid-row-start: 10",
-    "define": "Start at the 10th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start11",
-    "output": "grid-row-start: 11",
-    "define": "Start at the 11th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-start12",
-    "output": "grid-row-start: 12",
-    "define": "Start at the 12th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end2",
-    "output": "grid-row-end: 2",
-    "define": "End at the start of 2nd row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end3",
-    "output": "grid-row-end: 3",
-    "define": "End at the start of 3rd row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end4",
-    "output": "grid-row-end: 4",
-    "define": "End at the start of 4th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end5",
-    "output": "grid-row-end: 5",
-    "define": "End at the start of 5th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end6",
-    "output": "grid-row-end: 6",
-    "define": "End at the start of 6th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end7",
-    "output": "grid-row-end: 7",
-    "define": "End at the start of 7th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end8",
-    "output": "grid-row-end: 8",
-    "define": "End at the start of 8th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end9",
-    "output": "grid-row-end: 9",
-    "define": "End at the start of 9th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end10",
-    "output": "grid-row-end: 10",
-    "define": "End at the start of 10th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end11",
-    "output": "grid-row-end: 11",
-    "define": "End at the start of 11th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end12",
-    "output": "grid-row-end: 12",
-    "define": "End at the start of 12th row",
-    "responsive": true
-  },
-  {
-    "class": "grid--row-end13",
-    "output": "grid-row-end: 13",
-    "define": "End at the start of 13th row",
-    "responsive": true
-  }
-]
-
-const alignment = [
-  {
-    "class": "ji-auto",
-    "output": "justify-items: auto",
-    "define": "Use the parent's justify value.",
-    "responsive": true
-  },
-  {
-    "class": "ji-center",
-    "output": "justify-items: center",
-    "define": "The items are packed flush to each other toward the center of x axis.",
-    "responsive": true
-  },
-  {
-    "class": "ji-start",
-    "output": "justify-items: start",
-    "define": "The items are packed flush to each other toward the left.",
-    "responsive": true
-  },
-  {
-    "class": "ji-end",
-    "output": "justify-items: end",
-    "define": "The items are packed flush to each other toward the right.",
-    "responsive": true
-  },
-  {
-    "class": "ji-stretch",
-    "output": "justify-items: stretch",
-    "define": "Items stretch to fill the available space",
-    "responsive": true
-  },
-  {
-    "class": "ji-unset",
-    "output": "justify-items: unset",
-    "define": "Removes any justification, effectively resetting the value",
-    "responsive": true
-  },
-  {
-    "class": "js-auto",
-    "output": "justify-self: auto",
-    "define": "Use the parent's justify value.",
-    "responsive": true
-  },
-  {
-    "class": "js-center",
-    "output": "justify-self: center",
-    "define": "The item is packed flush to the others toward the center of x axis.",
-    "responsive": true
-  },
-  {
-    "class": "js-start",
-    "output": "justify-self: start",
-    "define": "The item is packed flush to the others toward the left.",
-    "responsive": true
-  },
-  {
-    "class": "js-end",
-    "output": "justify-self: end",
-    "define": "The item is packed flush to the others toward the right.",
-    "responsive": true
-  },
-  {
-    "class": "js-stretch",
-    "output": "justify-self: stretch",
-    "define": "Item stretches to fill the available space",
-    "responsive": true
-  },
-  {
-    "class": "js-unset",
-    "output": "justify-self: unset",
-    "define": "Removes any justification, effectively resetting the value",
-    "responsive": true
-  },
-  {
-    "class": "ai-baseline",
-    "output": "align-items: baseline",
-    "define": "Aligns items along the baseline of a parent's cross axis.",
-    "responsive": true
-  },
-  {
-    "class": "ai-center",
-    "output": "align-items: center",
-    "define": "Centers child elements along the parent's cross axis.",
-    "responsive": true
-  },
-  {
-    "class": "ai-end",
-    "output": "align-items: end",
-    "define": "Places child elements at the end of the parent's cross axis.",
-    "responsive": true
-  },
-  {
-    "class": "ai-start",
-    "output": "align-items: start",
-    "define": "Places child elements at the start of the parent's cross axis.",
-    "responsive": true
-  },
-  {
-    "class": "ai-stretch",
-    "output": "align-items: stretch",
-    "define": "Stretches child elements along the parent's cross axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-auto",
-    "output": "align-self: auto;",
-    "define": "Auto re-aligns a child element along the parent's main axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-baseline",
-    "output": "align-self: baseline;",
-    "define": "Re-aligns a child element along the baseline of the parent's main axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-center",
-    "output": "align-self: center;",
-    "define": "Centers a child element along the parent's main axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-end",
-    "output": "align-self: end;",
-    "define": "Re-aligns a child element to the end of the parent's main axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-start",
-    "output": "align-self: start;",
-    "define": "Re-aligns a child element to the start of the parent's main axis.",
-    "responsive": true
-  },
-  {
-    "class": "as-stretch",
-    "output": "align-self: stretch;",
-    "define": "Stretches a child element along the parent's main axis.",
-    "responsive": true
-  }
-]
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const columnTemplates: ClassTableRow[] = [
+        { class: '.grid__1',    output: 'grid-template-columns: repeat(1, minmax(0, 1fr))',   define: 'Creates a grid layout with 1 column',                                   responsive: true },
+        { class: '.grid__2',    output: 'grid-template-columns: repeat(2, minmax(0, 2fr))',   define: 'Creates a grid layout with 2 columns',                                  responsive: true },
+        { class: '.grid__3',    output: 'grid-template-columns: repeat(3, minmax(0, 3fr))',   define: 'Creates a grid layout with 3 columns',                                  responsive: true },
+        { class: '.grid__4',    output: 'grid-template-columns: repeat(4, minmax(0, 4fr))',   define: 'Creates a grid layout with 4 columns',                                  responsive: true },
+        { class: '.grid__5',    output: 'grid-template-columns: repeat(5, minmax(0, 5fr))',   define: 'Creates a grid layout with 5 columns',                                  responsive: true },
+        { class: '.grid__6',    output: 'grid-template-columns: repeat(6, minmax(0, 6fr))',   define: 'Creates a grid layout with 6 columns',                                  responsive: true },
+        { class: '.grid__7',    output: 'grid-template-columns: repeat(7, minmax(0, 7fr))',   define: 'Creates a grid layout with 7 columns',                                  responsive: true },
+        { class: '.grid__8',    output: 'grid-template-columns: repeat(8, minmax(0, 8fr))',   define: 'Creates a grid layout with 8 columns',                                  responsive: true },
+        { class: '.grid__9',    output: 'grid-template-columns: repeat(9, minmax(0, 9fr))',   define: 'Creates a grid layout with 9 columns',                                  responsive: true },
+        { class: '.grid__10',   output: 'grid-template-columns: repeat(10, minmax(0, 10fr))', define: 'Creates a grid layout with 10 columns',                                 responsive: true },
+        { class: '.grid__11',   output: 'grid-template-columns: repeat(11, minmax(0, 11fr))', define: 'Creates a grid layout with 11 columns',                                 responsive: true },
+        { class: '.grid__12',   output: 'grid-template-columns: repeat(1, minmax(0, 12fr))',  define: 'Creates a grid layout with 12 columns',                                 responsive: true },
+        { class: '.grid__auto', output: 'grid-template-columns: auto 1fr',                    define: 'Creates a grid layout with auto-sized columns based on their content',  responsive: true },
+    ];
+
+    const columnSpans: ClassTableRow[] = [
+        { class: '.grid--col-all', output: 'grid-column: 1 / -1',  define: 'Span all the columns', responsive: true },
+        { class: '.grid--col1',    output: 'grid-column: span 1',   define: 'Span 1 column',        responsive: true },
+        { class: '.grid--col2',    output: 'grid-column: span 2',   define: 'Span 2 columns',       responsive: true },
+        { class: '.grid--col3',    output: 'grid-column: span 3',   define: 'Span 3 columns',       responsive: true },
+        { class: '.grid--col4',    output: 'grid-column: span 4',   define: 'Span 4 columns',       responsive: true },
+        { class: '.grid--col5',    output: 'grid-column: span 5',   define: 'Span 5 columns',       responsive: true },
+        { class: '.grid--col6',    output: 'grid-column: span 6',   define: 'Span 6 columns',       responsive: true },
+        { class: '.grid--col7',    output: 'grid-column: span 7',   define: 'Span 7 columns',       responsive: true },
+        { class: '.grid--col8',    output: 'grid-column: span 8',   define: 'Span 8 columns',       responsive: true },
+        { class: '.grid--col9',    output: 'grid-column: span 9',   define: 'Span 9 columns',       responsive: true },
+        { class: '.grid--col10',   output: 'grid-column: span 10',  define: 'Span 10 columns',      responsive: true },
+        { class: '.grid--col11',   output: 'grid-column: span 11',  define: 'Span 11 columns',      responsive: true },
+        { class: '.grid--col12',   output: 'grid-column: span 12',  define: 'Span 12 columns',      responsive: true },
+    ];
+
+    const rowSpans: ClassTableRow[] = [
+        { class: '.grid--row-all', output: 'grid-row: 1 / -1',  define: 'Span all the rows', responsive: true },
+        { class: '.grid--row1',    output: 'grid-row: span 1',   define: 'Span 1 row',        responsive: true },
+        { class: '.grid--row2',    output: 'grid-row: span 2',   define: 'Span 2 rows',       responsive: true },
+        { class: '.grid--row3',    output: 'grid-row: span 3',   define: 'Span 3 rows',       responsive: true },
+        { class: '.grid--row4',    output: 'grid-row: span 4',   define: 'Span 4 rows',       responsive: true },
+        { class: '.grid--row5',    output: 'grid-row: span 5',   define: 'Span 5 rows',       responsive: true },
+        { class: '.grid--row6',    output: 'grid-row: span 6',   define: 'Span 6 rows',       responsive: true },
+        { class: '.grid--row7',    output: 'grid-row: span 7',   define: 'Span 7 rows',       responsive: true },
+        { class: '.grid--row8',    output: 'grid-row: span 8',   define: 'Span 8 rows',       responsive: true },
+        { class: '.grid--row9',    output: 'grid-row: span 9',   define: 'Span 9 rows',       responsive: true },
+        { class: '.grid--row10',   output: 'grid-row: span 10',  define: 'Span 10 rows',      responsive: true },
+        { class: '.grid--row11',   output: 'grid-row: span 11',  define: 'Span 11 rows',      responsive: true },
+        { class: '.grid--row12',   output: 'grid-row: span 12',  define: 'Span 12 rows',      responsive: true },
+    ];
+
+    const autoflow: ClassTableRow[] = [
+        { class: '.g-af-row',    output: 'grid-auto-flow: row',    define: 'Items are placed by filling each row in turn, adding new rows as necessary. The default.',                                                                                                                                                   responsive: true },
+        { class: '.g-af-column', output: 'grid-auto-flow: column', define: 'Items are placed by filling each column in turn, adding new columns as necessary.',                                                                                                                                                         responsive: true },
+        { class: '.g-af-dense',  output: 'grid-auto-flow: dense',  define: 'Dense packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.',                               responsive: true },
+    ];
+
+    const columnStartEnd: ClassTableRow[] = [
+        { class: '.grid--col-start1',  output: 'grid-column-start: 1',  define: 'Start at the 1st column',         responsive: true },
+        { class: '.grid--col-start2',  output: 'grid-column-start: 2',  define: 'Start at the 2nd column',         responsive: true },
+        { class: '.grid--col-start3',  output: 'grid-column-start: 3',  define: 'Start at the 3rd column',         responsive: true },
+        { class: '.grid--col-start4',  output: 'grid-column-start: 4',  define: 'Start at the 4th column',         responsive: true },
+        { class: '.grid--col-start5',  output: 'grid-column-start: 5',  define: 'Start at the 5th column',         responsive: true },
+        { class: '.grid--col-start6',  output: 'grid-column-start: 6',  define: 'Start at the 6th column',         responsive: true },
+        { class: '.grid--col-start7',  output: 'grid-column-start: 7',  define: 'Start at the 7th column',         responsive: true },
+        { class: '.grid--col-start8',  output: 'grid-column-start: 8',  define: 'Start at the 8th column',         responsive: true },
+        { class: '.grid--col-start9',  output: 'grid-column-start: 9',  define: 'Start at the 9th column',         responsive: true },
+        { class: '.grid--col-start10', output: 'grid-column-start: 10', define: 'Start at the 10th column',        responsive: true },
+        { class: '.grid--col-start11', output: 'grid-column-start: 11', define: 'Start at the 11th column',        responsive: true },
+        { class: '.grid--col-start12', output: 'grid-column-start: 12', define: 'Start at the 12th column',        responsive: true },
+        { class: '.grid--col-end2',    output: 'grid-column-end: 2',    define: 'End at the start of 2nd column',  responsive: true },
+        { class: '.grid--col-end3',    output: 'grid-column-end: 3',    define: 'End at the start of 3rd column',  responsive: true },
+        { class: '.grid--col-end4',    output: 'grid-column-end: 4',    define: 'End at the start of 4th column',  responsive: true },
+        { class: '.grid--col-end5',    output: 'grid-column-end: 5',    define: 'End at the start of 5th column',  responsive: true },
+        { class: '.grid--col-end6',    output: 'grid-column-end: 6',    define: 'End at the start of 6th column',  responsive: true },
+        { class: '.grid--col-end7',    output: 'grid-column-end: 7',    define: 'End at the start of 7th column',  responsive: true },
+        { class: '.grid--col-end8',    output: 'grid-column-end: 8',    define: 'End at the start of 8th column',  responsive: true },
+        { class: '.grid--col-end9',    output: 'grid-column-end: 9',    define: 'End at the start of 9th column',  responsive: true },
+        { class: '.grid--col-end10',   output: 'grid-column-end: 10',   define: 'End at the start of 10th column', responsive: true },
+        { class: '.grid--col-end11',   output: 'grid-column-end: 11',   define: 'End at the start of 11th column', responsive: true },
+        { class: '.grid--col-end12',   output: 'grid-column-end: 12',   define: 'End at the start of 12th column', responsive: true },
+        { class: '.grid--col-end13',   output: 'grid-column-end: 13',   define: 'End at the start of 13th column', responsive: true },
+    ];
+
+    const rowStartEnd: ClassTableRow[] = [
+        { class: '.grid--row-start1',  output: 'grid-row-start: 1',  define: 'Start at the 1st row',         responsive: true },
+        { class: '.grid--row-start2',  output: 'grid-row-start: 2',  define: 'Start at the 2nd row',         responsive: true },
+        { class: '.grid--row-start3',  output: 'grid-row-start: 3',  define: 'Start at the 3rd row',         responsive: true },
+        { class: '.grid--row-start4',  output: 'grid-row-start: 4',  define: 'Start at the 4th row',         responsive: true },
+        { class: '.grid--row-start5',  output: 'grid-row-start: 5',  define: 'Start at the 5th row',         responsive: true },
+        { class: '.grid--row-start6',  output: 'grid-row-start: 6',  define: 'Start at the 6th row',         responsive: true },
+        { class: '.grid--row-start7',  output: 'grid-row-start: 7',  define: 'Start at the 7th row',         responsive: true },
+        { class: '.grid--row-start8',  output: 'grid-row-start: 8',  define: 'Start at the 8th row',         responsive: true },
+        { class: '.grid--row-start9',  output: 'grid-row-start: 9',  define: 'Start at the 9th row',         responsive: true },
+        { class: '.grid--row-start10', output: 'grid-row-start: 10', define: 'Start at the 10th row',        responsive: true },
+        { class: '.grid--row-start11', output: 'grid-row-start: 11', define: 'Start at the 11th row',        responsive: true },
+        { class: '.grid--row-start12', output: 'grid-row-start: 12', define: 'Start at the 12th row',        responsive: true },
+        { class: '.grid--row-end2',    output: 'grid-row-end: 2',    define: 'End at the start of 2nd row',  responsive: true },
+        { class: '.grid--row-end3',    output: 'grid-row-end: 3',    define: 'End at the start of 3rd row',  responsive: true },
+        { class: '.grid--row-end4',    output: 'grid-row-end: 4',    define: 'End at the start of 4th row',  responsive: true },
+        { class: '.grid--row-end5',    output: 'grid-row-end: 5',    define: 'End at the start of 5th row',  responsive: true },
+        { class: '.grid--row-end6',    output: 'grid-row-end: 6',    define: 'End at the start of 6th row',  responsive: true },
+        { class: '.grid--row-end7',    output: 'grid-row-end: 7',    define: 'End at the start of 7th row',  responsive: true },
+        { class: '.grid--row-end8',    output: 'grid-row-end: 8',    define: 'End at the start of 8th row',  responsive: true },
+        { class: '.grid--row-end9',    output: 'grid-row-end: 9',    define: 'End at the start of 9th row',  responsive: true },
+        { class: '.grid--row-end10',   output: 'grid-row-end: 10',   define: 'End at the start of 10th row', responsive: true },
+        { class: '.grid--row-end11',   output: 'grid-row-end: 11',   define: 'End at the start of 11th row', responsive: true },
+        { class: '.grid--row-end12',   output: 'grid-row-end: 12',   define: 'End at the start of 12th row', responsive: true },
+        { class: '.grid--row-end13',   output: 'grid-row-end: 13',   define: 'End at the start of 13th row', responsive: true },
+    ];
+
+    const alignment: ClassTableRow[] = [
+        { class: '.ji-auto',     output: 'justify-items: auto',     define: "Use the parent's justify value.",                                          responsive: true },
+        { class: '.ji-center',   output: 'justify-items: center',   define: 'The items are packed flush to each other toward the center of x axis.',    responsive: true },
+        { class: '.ji-start',    output: 'justify-items: start',    define: 'The items are packed flush to each other toward the left.',                 responsive: true },
+        { class: '.ji-end',      output: 'justify-items: end',      define: 'The items are packed flush to each other toward the right.',                responsive: true },
+        { class: '.ji-stretch',  output: 'justify-items: stretch',  define: 'Items stretch to fill the available space',                                responsive: true },
+        { class: '.ji-unset',    output: 'justify-items: unset',    define: 'Removes any justification, effectively resetting the value',               responsive: true },
+        { class: '.js-auto',     output: 'justify-self: auto',      define: "Use the parent's justify value.",                                          responsive: true },
+        { class: '.js-center',   output: 'justify-self: center',    define: 'The item is packed flush to the others toward the center of x axis.',      responsive: true },
+        { class: '.js-start',    output: 'justify-self: start',     define: 'The item is packed flush to the others toward the left.',                  responsive: true },
+        { class: '.js-end',      output: 'justify-self: end',       define: 'The item is packed flush to the others toward the right.',                 responsive: true },
+        { class: '.js-stretch',  output: 'justify-self: stretch',   define: 'Item stretches to fill the available space',                               responsive: true },
+        { class: '.js-unset',    output: 'justify-self: unset',     define: 'Removes any justification, effectively resetting the value',               responsive: true },
+        { class: '.ai-baseline', output: 'align-items: baseline',   define: "Aligns items along the baseline of a parent's cross axis.",                responsive: true },
+        { class: '.ai-center',   output: 'align-items: center',     define: "Centers child elements along the parent's cross axis.",                    responsive: true },
+        { class: '.ai-end',      output: 'align-items: end',        define: "Places child elements at the end of the parent's cross axis.",             responsive: true },
+        { class: '.ai-start',    output: 'align-items: start',      define: "Places child elements at the start of the parent's cross axis.",           responsive: true },
+        { class: '.ai-stretch',  output: 'align-items: stretch',    define: "Stretches child elements along the parent's cross axis.",                  responsive: true },
+        { class: '.as-auto',     output: 'align-self: auto;',       define: "Auto re-aligns a child element along the parent's main axis.",             responsive: true },
+        { class: '.as-baseline', output: 'align-self: baseline;',   define: "Re-aligns a child element along the baseline of the parent's main axis.",  responsive: true },
+        { class: '.as-center',   output: 'align-self: center;',     define: "Centers a child element along the parent's main axis.",                    responsive: true },
+        { class: '.as-end',      output: 'align-self: end;',        define: "Re-aligns a child element to the end of the parent's main axis.",          responsive: true },
+        { class: '.as-start',    output: 'align-self: start;',      define: "Re-aligns a child element to the start of the parent's main axis.",        responsive: true },
+        { class: '.as-stretch',  output: 'align-self: stretch;',    define: "Stretches a child element along the parent's main axis.",                  responsive: true },
+    ];
 </script>
 
 ## Overview
 
-CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike <a href="/product/base/flex">flex layouts</a> which can only do one at a time. Applying <code class="stacks-code">.d-grid</code> to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout's behavior. Applying classes to an individual <code class="stacks-code">.grid--item</code> will change that cell's behavior.
+CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike [flex layouts](/product/base/flex) which can only do one at a time. Applying `.d-grid` to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout's behavior. Applying classes to an individual `.grid--item` will change that cell's behavior.
 
 ### Examples
 
@@ -715,117 +155,50 @@ CSS Grids are the most powerful layout system available in CSS. It has two dimen
 </div>
 ```
 
-<div class="ff-mono">
-    <div>
-        .d-grid .grid__4 .g16
-        <div class="d-none sm:d-inline-block sm:highlight">.sm:g-af-row</div>
-    </div>
-    <div class="mt16 d-grid g16 grid__4 sm:g-af-row">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 grid--col-all">
+<Example>
+    <div class="d-grid g16 grid__4">
+        <div class="docs-box grid--item grid--col-all">
             <div>.grid--item</div>
             <div>.grid--col-all</div>
         </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 grid--col1 grid--row2 md:grid--col-all">
+        <div class="docs-box grid--item grid--col1 grid--row2">
             <div>.grid--item</div>
-            <div class="md:d-none">.grid--col1</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col-all</div>
+            <div>.grid--col1</div>
             <div>.grid--row2</div>
         </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 grid--col3 md:grid--col-all">
+        <div class="docs-box bg-black-200 bc-black-225 grid--item grid--col3">
             <div>.grid--item</div>
-            <div class="md:d-none">.grid--col3</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col-all</div>
+            <div>.grid--col3</div>
             <div class="mb16">.grid__2</div>
-
-            <div>.d-grid</div>
-            <div>.g16</div>
-            <div class="sm:d-none">.grid__2</div>
-            <div class="d-none sm:d-inline-block sm:highlight">.sm:g-af-row</div>
-            <div class="mt16 d-grid grid__2 g16 sm:g-af-row">
-                <div class="grid--item bg-black-225 p12 ba bc-black-300 sm:grid--col-all">
-                    <div>.grid--item</div>
-                    <div class="d-none sm:d-inline-block sm:highlight">.sm:grid--col-all</div>
-                </div>
-                <div class="grid--item bg-black-225 p12 ba bc-black-300 sm:grid--col-all">
-                    <div>.grid--item</div>
-                    <div class="d-none sm:d-inline-block sm:highlight">.sm:grid--col-all</div>
-                </div>
-                <div class="grid--item bg-black-225 p12 ba bc-black-300 sm:grid--col-all">
-                    <div>.grid--item</div>
-                    <div class="d-none sm:d-inline-block sm:highlight">.sm:grid--col-all</div>
-                </div>
-                <div class="grid--item bg-black-225 p12 ba bc-black-300 sm:grid--col-all">
-                    <div>.grid--item</div>
-                    <div class="d-none sm:d-inline-block sm:highlight">.sm:grid--col-all</div>
-                </div>
+            <div class="d-grid grid__2 g16">
+                <div class="docs-box grid--item">.grid--item</div>
+                <div class="docs-box grid--item">.grid--item</div>
+                <div class="docs-box grid--item">.grid--item</div>
+                <div class="docs-box grid--item">.grid--item</div>
             </div>
         </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 grid--col2">
+        <div class="docs-box grid--item grid--col2">
             <div>.grid--item</div>
             <div>.grid--col2</div>
         </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 grid--col1 md:grid--col2">
+        <div class="docs-box grid--item grid--col1">
             <div>.grid--item</div>
-            <div class="md:d-none">.grid--col1</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col2</div>
+            <div>.grid--col1</div>
         </div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col-all">
+        <div class="docs-box grid--item grid--col-all">
             <div>.grid--item</div>
             <div>.grid--col-all</div>
         </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 md:grid--col2 md:grid--row2">
-            <div class="md:d-none">.grid--item</div>
-            <div class="d-none md:d-inline-block md:highlight mb4">.md:grid--col2</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:has-row-2</div>
-        </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 md:grid--col2">
-            <div class="md:d-none">.grid--item</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col2</div>
-        </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 md:grid--col2">
-            <div class="md:d-none">.grid--item</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col2</div>
-        </div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 md:grid--col-all">
-            <div class="md:d-none">.grid--item</div>
-            <div class="d-none md:d-inline-block md:highlight">.md:grid--col-all</div>
-        </div>
     </div>
-
-</div>
+</Example>
 
 ## Columns
 
-To define a discrete number of columns in your grid layout, you can add a <code class="stacks-code">grid\_\_[x]</code> modifying class.
+To define a discrete number of columns in your grid layout, you can add a `grid__[x]` modifying class.
 
 ### Column classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell4" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each columnTemplates as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={columnTemplates} />
 
 ### Columns examples
 
@@ -845,162 +218,126 @@ To define a discrete number of columns in your grid layout, you can add a <code
 <div class="d-grid grid__auto">…</div>
 ```
 
-<div class="ff-mono">
-    <div class="mb16 d-grid g16 grid__1">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__2">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__3">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__4">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__5">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__6">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__7">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__8">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__9">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__10">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">10</div>
-    </div>
-
-    <div class="mb16 d-grid g16 grid__11">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">10</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">11</div>
-    </div>
-
-    <div class="mb32 d-grid g16 grid__12">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">10</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">11</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">12</div>
-    </div>
-
-    <div class="d-grid g16 grid__auto">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
+<Example>
+    <div class="ff-mono d-flex fd-column g16">
+        <div class="d-grid g8 grid__1">
+            <div class="docs-box grid--item">1</div>
+        </div>
+        <div class="d-grid g8 grid__2">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+        </div>
+        <div class="d-grid g8 grid__3">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+        </div>
+        <div class="d-grid g8 grid__4">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+        </div>
+        <div class="d-grid g8 grid__5">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+        </div>
+        <div class="d-grid g8 grid__6">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+        </div>
+        <div class="d-grid g8 grid__7">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+        </div>
+        <div class="d-grid g8 grid__8">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+        </div>
+        <div class="d-grid g8 grid__9">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+        </div>
+        <div class="d-grid g8 grid__10">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+            <div class="docs-box grid--item">10</div>
+        </div>
+        <div class="d-grid g8 grid__11">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+            <div class="docs-box grid--item">10</div>
+            <div class="docs-box grid--item">11</div>
+        </div>
+        <div class="d-grid g8 grid__12">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+            <div class="docs-box grid--item">10</div>
+            <div class="docs-box grid--item">11</div>
+            <div class="docs-box grid--item">12</div>
+        </div>
+        <div class="d-grid g8 grid__auto">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+        </div>
     </div>
-
-</div>
+</Example>
 
 ## Column and row spans
 
-You can apply <code class="stacks-code">grid--col[x]</code> to your columns, and <code class="stacks-code">grid--row[x]</code> to your rows to span a specific number of columns or rows.
+You can apply `grid--col[x]` to your columns, and `grid--row[x]` to your rows to span a specific number of columns or rows.
 
 ### Column spanning classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each columns as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={columnSpans} />
 
 ### Column examples
 
@@ -1022,76 +359,92 @@ You can apply <code class="stacks-code">grid--col[x]</code> to your columns, and
 </div>
 ```
 
-<div class="ff-mono ws-nowrap">
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col-all">.grid--col-all</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col1">.grid--col1</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col3">.grid--col3</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col4">.grid--col4</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col5">.grid--col5</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col6">.grid--col6</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col7">.grid--col7</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col8">.grid--col8</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col9">.grid--col9</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col10">.grid--col10</div>
-    </div>
-    <div class="d-grid grid__12 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col11">.grid--col11</div>
-    </div>
-    <div class="d-grid grid__12">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col12">.grid--col12</div>
+<Example>
+    <div class="ff-mono d-flex fd-column g16">
+        <div>
+            <div class="mb4">.grid--col-all</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col-all"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col1</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col1"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col2</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col3</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col3"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col4</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col4"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col5</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col5"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col6</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col6"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col7</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col7"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col8</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col8"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col9</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col9"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col10</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col10"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col11</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col11"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.grid--col12</div>
+            <div class="d-grid grid__12">
+                <div class="docs-box h24 grid--col12"></div>
+            </div>
+        </div>
     </div>
-</div>
+</Example>
 
 ### Row classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each rows as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={rowSpans} />
 
 ### Row example
 
@@ -1105,18 +458,20 @@ You can apply <code class="stacks-code">grid--col[x]</code> to your columns, and
 </div>
 ```
 
-<div class="ff-mono ws-nowrap">
-    <div class="d-grid grid__4 g16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2 grid--row4">
-            <div>.grid--col2</div>
-            <div>.grid--row4</div>
+<Example>
+    <div class="ff-mono ws-nowrap">
+        <div class="d-grid grid__4 g16">
+            <div class="docs-box grid--col2 grid--row4">
+                <div>.grid--col2</div>
+                <div>.grid--row4</div>
+            </div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
         </div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
     </div>
-</div>
+</Example>
 
 ## Autoflow
 
@@ -1124,32 +479,7 @@ If you have grid items that you don't explicitly place on the grid, the auto-pla
 
 ### Autoflow classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each autoflow as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={autoflow} />
 
 ### Autoflow examples
 
@@ -1159,47 +489,46 @@ If you have grid items that you don't explicitly place on the grid, the auto-pla
 <div class="d-grid g-af-dense">…</div>
 ```
 
-<div class="ff-mono">
-    <div class="mb16">.g-af-row</div>
-    <div class="mb32 d-grid g16 g-af-row">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-    </div>
-
-    <div class="mb16">.g-af-column</div>
-    <div class="mb32 d-grid g16 g-af-column grid__12">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">10</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">11</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">12</div>
-    </div>
-
-    <div class="mb16">.g-af-dense</div>
-    <div class="d-grid g16 g-af-dense grid__6">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--col4 bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--col5 bg-black-200 p12 ba bc-black-225">6</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">7</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">8</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">9</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">10</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">11</div>
-        <div class="grid--col6 bg-black-200 p12 ba bc-black-225">12</div>
+<Example>
+    <div class="ff-mono">
+        <div class="mb8">.g-af-row</div>
+        <div class="mb32 d-grid g8 g-af-row">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+        </div>
+        <div class="mb8">.g-af-column</div>
+        <div class="mb32 d-grid g8 g-af-column grid__12">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+            <div class="docs-box grid--item">10</div>
+            <div class="docs-box grid--item">11</div>
+            <div class="docs-box grid--item">12</div>
+        </div>
+        <div class="mb8">.g-af-dense</div>
+        <div class="d-grid g8 g-af-dense grid__6">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="grid--col4 docs-box">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="grid--col5 docs-box">6</div>
+            <div class="docs-box grid--item">7</div>
+            <div class="docs-box grid--item">8</div>
+            <div class="docs-box grid--item">9</div>
+            <div class="docs-box grid--item">10</div>
+            <div class="docs-box grid--item">11</div>
+            <div class="grid--col6 docs-box">12</div>
+        </div>
     </div>
-
-</div>
+</Example>
 
 ## Start and end
 
@@ -1207,32 +536,7 @@ If you'd like to offset a column or row and specify its start and end positionin
 
 ### Column start and end classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each columnStartEnd as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={columnStartEnd} expandable />
 
 ### Column start and end examples
 
@@ -1244,46 +548,23 @@ If you'd like to offset a column or row and specify its start and end positionin
 </div>
 ```
 
-<div class="ff-mono ws-nowrap">
-    <div class="d-grid grid__4 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col-start1 grid--col-end4">.grid--col-start1 .grid--col-end4</div>
-    </div>
-    <div class="d-grid grid__4 mb16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col-start2 grid--col-end4">.grid--col-start2 .grid--col-end4</div>
-    </div>
-    <div class="d-grid grid__4">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2 grid--col-end5">.grid--col2 .grid--col-end5</div>
+<Example>
+    <div class="ff-mono ws-nowrap">
+        <div class="d-grid grid__4 mb16">
+            <div class="docs-box grid--col-start1 grid--col-end4">.grid--col-start1 .grid--col-end4</div>
+        </div>
+        <div class="d-grid grid__4 mb16">
+            <div class="docs-box grid--col-start2 grid--col-end4">.grid--col-start2 .grid--col-end4</div>
+        </div>
+        <div class="d-grid grid__4">
+            <div class="docs-box grid--col2 grid--col-end5">.grid--col2 .grid--col-end5</div>
+        </div>
     </div>
-</div>
+</Example>
 
 ### Row start and end classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each rowStartEnd as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={rowStartEnd} expandable />
 
 ### Row start and end examples
 
@@ -1297,52 +578,29 @@ If you'd like to offset a column or row and specify its start and end positionin
 </div>
 ```
 
-<div class="ff-mono ws-nowrap">
-    <div class="d-grid grid__4 g16">
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2 grid--row-start2 grid--row-end4">
-            <div>.grid--col2</div>
-            <div>.grid--row-start2</div>
-            <div>.grid--row-end4</div>
+<Example>
+    <div class="ff-mono ws-nowrap">
+        <div class="d-grid grid__4 g16">
+            <div class="docs-box grid--col2 grid--row-start2 grid--row-end4">
+                <div>.grid--col2</div>
+                <div>.grid--row-start2</div>
+                <div>.grid--row-end4</div>
+            </div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
+            <div class="docs-box grid--col2">.grid--col2</div>
         </div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
-        <div class="bg-black-200 p12 ba bc-black-225 grid--col2">.grid--col2</div>
     </div>
-</div>
+</Example>
 
 ## Alignment
 
-On the grid container, you can apply <code class="stacks-code">align-items</code> to the y axis and <code class="stacks-code">justify-items</code> to the x axis. On individual items, you can apply <code class="stacks-code">align-self</code> on the y axis, and <code class="stacks-code">justify-self</code> on the x axis.
+On the grid container, you can apply `align-items` to the y axis and `justify-items` to the x axis. On individual items, you can apply `align-self` on the y axis, and `justify-self` on the x axis.
 
 ### Alignment classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each alignment as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td>{item.define}</td>
-          <td class="ta-center">
-            {#if item.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={alignment} expandable />
 
 ### Alignment examples
 
@@ -1355,25 +613,25 @@ On the grid container, you can apply <code class="stacks-code">align-items</code
 </div>
 ```
 
-<div class="ff-mono">
-    <div class="mb16">Default</div>
-    <div class="d-grid g-af-column mb24">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">1</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">3</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">4</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225">6</div>
-    </div>
-
-    <div class="mb16">.ji-center .ai-center</div>
-    <div class="d-grid g-af-column ji-center ai-center h96">
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 h48 as-start">1 .as-start</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 h64">2</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 as-stretch">3 .as-stretch</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 h64 js-end">4 .js-end</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 h64">5</div>
-        <div class="grid--item bg-black-200 p12 ba bc-black-225 h64">6</div>
+<Example>
+    <div class="ff-mono">
+        <div class="mb8">Default</div>
+        <div class="d-grid g-af-column mb24">
+            <div class="docs-box grid--item">1</div>
+            <div class="docs-box grid--item">2</div>
+            <div class="docs-box grid--item">3</div>
+            <div class="docs-box grid--item">4</div>
+            <div class="docs-box grid--item">5</div>
+            <div class="docs-box grid--item">6</div>
+        </div>
+        <div class="mb8">.ji-center .ai-center</div>
+        <div class="docs-box d-grid g-af-column ji-center ai-center h96">
+            <div class="docs-box grid--item h48 as-start">1 .as-start</div>
+            <div class="docs-box grid--item h64">2</div>
+            <div class="docs-box grid--item as-stretch">3 .as-stretch</div>
+            <div class="docs-box grid--item h64 js-end">4 .js-end</div>
+            <div class="docs-box grid--item h64">5</div>
+            <div class="docs-box grid--item h64">6</div>
+        </div>
     </div>
-
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/height.md b/packages/stacks-docs-next/src/docs/public/system/base/height.md
new file mode 100644
index 0000000000..f4a47a0f2c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/height.md
@@ -0,0 +1,271 @@
+---
+title: "Height"
+description: "Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. Most height classes are based on a 16px base font size and will scale based on the browser's font size."
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const pixelClasses: ClassTableRow[] = [
+        { class: '.h0',   output: 'height: 0px;',   define: '0rem' },
+        { class: '.h1',   output: 'height: 1px;',   define: '0.063rem' },
+        { class: '.h2',   output: 'height: 2px;',   define: '0.125rem' },
+        { class: '.h4',   output: 'height: 4px;',   define: '0.25rem' },
+        { class: '.h6',   output: 'height: 6px;',   define: '0.375rem' },
+        { class: '.h8',   output: 'height: 8px;',   define: '0.5rem' },
+        { class: '.h12',  output: 'height: 12px;',  define: '0.75rem' },
+        { class: '.h16',  output: 'height: 16px;',  define: '1rem' },
+        { class: '.h24',  output: 'height: 24px;',  define: '1.5rem' },
+        { class: '.h32',  output: 'height: 32px;',  define: '2rem' },
+        { class: '.h48',  output: 'height: 48px;',  define: '3rem' },
+        { class: '.h64',  output: 'height: 64px;',  define: '4rem' },
+        { class: '.h96',  output: 'height: 96px;',  define: '6rem' },
+        { class: '.h128', output: 'height: 128px;', define: '8rem' },
+    ];
+
+    const sizingUnitClasses: ClassTableRow[] = [
+        { class: '.hs1',  output: 'height: 128px;',  define: '8rem' },
+        { class: '.hs2',  output: 'height: 256px;',  define: '16rem' },
+        { class: '.hs3',  output: 'height: 344px;',  define: '21.5rem' },
+        { class: '.hs4',  output: 'height: 448px;',  define: '28rem' },
+        { class: '.hs5',  output: 'height: 512px;',  define: '32rem' },
+        { class: '.hs6',  output: 'height: 640px;',  define: '40rem' },
+        { class: '.hs7',  output: 'height: 768px;',  define: '48rem' },
+        { class: '.hs8',  output: 'height: 848px;',  define: '53rem' },
+        { class: '.hs9',  output: 'height: 960px;',  define: '60rem' },
+        { class: '.hs10', output: 'height: 1024px;', define: '64rem' },
+        { class: '.hs11', output: 'height: 1120px;', define: '70rem' },
+        { class: '.hs12', output: 'height: 1280px;', define: '80rem' },
+    ];
+
+    const fluidClasses: ClassTableRow[] = [
+        { class: '.h100',     output: 'height: 100%;',  responsive: true },
+        { class: '.h-screen', output: 'height: 100vh;', responsive: true },
+        { class: '.h-auto',   output: 'height: auto;',  responsive: true },
+    ];
+
+    const minHeightClasses: ClassTableRow[] = [
+        { class: '.hmn0',       output: 'min-height: 0;',       define: '-',       responsive: true },
+        { class: '.hmn1',       output: 'min-height: 128px;',   define: '8rem' },
+        { class: '.hmn2',       output: 'min-height: 256px;',   define: '16rem' },
+        { class: '.hmn3',       output: 'min-height: 344px;',   define: '21.5rem' },
+        { class: '.hmn4',       output: 'min-height: 448px;',   define: '28rem' },
+        { class: '.hmn5',       output: 'min-height: 512px;',   define: '32rem' },
+        { class: '.hmn6',       output: 'min-height: 640px;',   define: '40rem' },
+        { class: '.hmn7',       output: 'min-height: 768px;',   define: '48rem' },
+        { class: '.hmn8',       output: 'min-height: 848px;',   define: '53rem' },
+        { class: '.hmn9',       output: 'min-height: 960px;',   define: '60rem' },
+        { class: '.hmn10',      output: 'min-height: 1024px;',  define: '64rem' },
+        { class: '.hmn11',      output: 'min-height: 1120px;',  define: '70rem' },
+        { class: '.hmn12',      output: 'min-height: 1280px;',  define: '80rem' },
+        { class: '.hmn100',     output: 'min-height: 100%;',    define: '-',       responsive: true },
+        { class: '.hmn-screen', output: 'min-height: 100vh;',   define: '-',       responsive: true },
+        { class: '.hmn-initial',output: 'min-height: initial;', define: '-',       responsive: true },
+    ];
+
+    const maxHeightClasses: ClassTableRow[] = [
+        { class: '.hmx1',       output: 'max-height: 128px;',   define: '8rem' },
+        { class: '.hmx2',       output: 'max-height: 256px;',   define: '16rem' },
+        { class: '.hmx3',       output: 'max-height: 344px;',   define: '21.5rem' },
+        { class: '.hmx4',       output: 'max-height: 448px;',   define: '28rem' },
+        { class: '.hmx5',       output: 'max-height: 512px;',   define: '32rem' },
+        { class: '.hmx6',       output: 'max-height: 640px;',   define: '40rem' },
+        { class: '.hmx7',       output: 'max-height: 768px;',   define: '48rem' },
+        { class: '.hmx8',       output: 'max-height: 848px;',   define: '53rem' },
+        { class: '.hmx9',       output: 'max-height: 960px;',   define: '60rem' },
+        { class: '.hmx10',      output: 'max-height: 1024px;',  define: '64rem' },
+        { class: '.hmx11',      output: 'max-height: 1120px;',  define: '70rem' },
+        { class: '.hmx12',      output: 'max-height: 1280px;',  define: '80rem' },
+        { class: '.hmx100',     output: 'max-height: 100%;',    define: '-',       responsive: true },
+        { class: '.hmx-screen', output: 'max-height: 100vh;',   define: '-',       responsive: true },
+        { class: '.hmx-initial',output: 'max-height: initial;', define: '-',       responsive: true },
+    ];
+</script>
+
+## Pixel height
+
+Pixel height classes allow you to set the height of an element to a specific pixel value.
+
+### Pixel height classes
+
+<ClassTable classes={pixelClasses} expandable headings={{ define: 'rem value' }} />
+
+### Base height examples
+
+```html
+<div class="h2">…</div>
+<div class="h4">…</div>
+<div class="h6">…</div>
+<div class="h8">…</div>
+<div class="h12">…</div>
+<div class="h16">…</div>
+<div class="h24">…</div>
+<div class="h32">…</div>
+<div class="h48">…</div>
+<div class="h64">…</div>
+<div class="h96">…</div>
+<div class="h128">…</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g16 fs-caption ff-mono">
+        <div class="d-flex fd-column g4">
+            <div>.h2</div>
+            <div class="h2 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h4</div>
+            <div class="h4 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h6</div>
+            <div class="h6 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h8</div>
+            <div class="h8 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h12</div>
+            <div class="h12 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h16</div>
+            <div class="h16 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h24</div>
+            <div class="h24 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h32</div>
+            <div class="h32 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h48</div>
+            <div class="h48 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h64</div>
+            <div class="h64 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h96</div>
+            <div class="h96 docs-box p0"></div>
+        </div>
+        <div class="d-flex fd-column g4">
+            <div>.h128</div>
+            <div class="h128 docs-box p0"></div>
+        </div>
+    </div>
+</Example>
+
+## Sizing units height
+
+Sizing units height classes allow you to set the height of an element according to a predefined set of 12 common values in used in Stacks.
+
+### Sizing units height classes
+
+<ClassTable classes={sizingUnitClasses} headings={{ define: 'rem value' }} />
+
+### Sizing units height examples
+
+```html
+<div class="hs1">…</div>
+<div class="hs2">…</div>
+<div class="hs3">…</div>
+<div class="hs4">…</div>
+<div class="hs5">…</div>
+<div class="hs6">…</div>
+<div class="hs7">…</div>
+<div class="hs8">…</div>
+<div class="hs9">…</div>
+<div class="hs10">…</div>
+<div class="hs11">…</div>
+<div class="hs12">…</div>
+```
+
+<Example>
+    <div class="d-flex g4 hmx6 fs-caption ff-mono overflow-auto">
+        <div class="d-flex g6 hs12 w100 overflow-x-auto">
+            <div class="docs-box px4 hs1 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs1</div>
+            </div>
+            <div class="docs-box px4 hs2 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs2</div>
+            </div>
+            <div class="docs-box px4 hs3 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs3</div>
+            </div>
+            <div class="docs-box px4 hs4 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs4</div>
+            </div>
+            <div class="docs-box px4 hs5 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs5</div>
+            </div>
+            <div class="docs-box px4 hs6 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs6</div>
+            </div>
+            <div class="docs-box px4 hs7 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs7</div>
+            </div>
+            <div class="docs-box px4 hs8 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs8</div>
+            </div>
+            <div class="docs-box px4 hs9 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs9</div>
+            </div>
+            <div class="docs-box px4 hs10 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs10</div>
+            </div>
+            <div class="docs-box px4 hs11 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs11</div>
+            </div>
+            <div class="docs-box px4 hs12 ai-start d-flex fl-shrink0 w48" style="min-width: calc(100% / 12 - 6px);">
+                <div>.hs12</div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Fluid height
+
+Fluid height classes allow you to set the height of an element to a percentage of the parent element's height or to the full height of the viewport.
+
+### Fluid height classes
+
+<ClassTable classes={fluidClasses} />
+
+### Fluid height examples
+
+```html
+<div class="h100">…</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g4 fs-caption ff-mono">
+        <div class="d-flex docs-box p0 hs2 fs-caption ff-mono p6">
+            <div class="h100 docs-box ws2">
+                .h100
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Min height
+
+Min height classes allow you to set the minimum height of an element.
+
+### Min height classes
+
+<ClassTable classes={minHeightClasses} expandable headings={{ define: 'rem value' }} />
+
+## Max height
+
+Max height classes allow you to set the maximum height of an element.
+
+### Max height classes
+
+<ClassTable classes={maxHeightClasses} expandable headings={{ define: 'rem value' }} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md b/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md
index f584574f77..0dd6a9c3dd 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md
@@ -1,127 +1,117 @@
 ---
 title: Interactivity
 description: Atomic interactivity classes allow you to quickly change an element's interactivity.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const pointerEventsClasses = [
-    {
-      class: 'pe-auto',
-      output: 'pointer-events: auto;',
-      define: 'The element behaves as it would if the pointer-events property were not specified.'
-    },
-    {
-      class: 'pe-none',
-      output: 'pointer-events: none;',
-      define: 'Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.'
-    }
-  ];
-
-  const userSelectClasses = [
-    {
-      class: 'us-auto',
-      output: 'user-select: auto;',
-      define: 'The element behaves as it would if the user-select property were not specified.'
-    },
-    {
-      class: 'us-none',
-      output: 'user-select: none;',
-      define: 'The text of the element and its sub-elements is not selectable. It may be appropriate to combine with <code class="stacks-code">.c-default</code>'
-    }
-  ];
-
-  const userDragClasses = [
-    {
-      class: 'ud-auto',
-      output: 'user-drag: auto;',
-      define: 'The element behaves as it would if the user-drag property were not specified.'
-    },
-    {
-      class: 'ud-none',
-      output: 'user-drag: none;',
-      define: 'The element and its sub-elements are not draggable. When applied to an image, the ghosted image will not appear in a loaded mouse cursor.'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const pointerEvents: ClassTableRow[] = [
+        { class: '.pe-auto', output: 'pointer-events: auto;', define: 'The element behaves as it would if the pointer-events property were not specified.' },
+        { class: '.pe-none', output: 'pointer-events: none;', define: 'Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.' },
+    ];
+
+    const focus: ClassTableRow[] = [
+        { class: '.focus',               define: 'The element will have the default Stacks focus style applied.' },
+        { class: '.focus-inset',         define: 'The element will have the inset Stacks focus style applied.' },
+        { class: '.focus-bordered',      define: 'The element will have the default Stacks focus style applied and match the border to the focus style.' },
+        { class: '.focus-inset-bordered', define: 'The element will have the inset Stacks focus style applied and match the border to the focus style.' },
+    ];
+
+    const userSelect: ClassTableRow[] = [
+        { class: '.us-auto', output: 'user-select: auto;', define: 'The element behaves as it would if the user-select property were not specified.' },
+        { class: '.us-none', output: 'user-select: none;', define: 'The text of the element and its sub-elements is not selectable. It may be appropriate to combine with `.c-default`' },
+    ];
 </script>
 
 ## Pointer events
 
 The pointer-events CSS property enables or disables all mouse events on an element.
 
-### Pointer events classes
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each pointerEventsClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="p8"><p class="mb0">{item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+### Classes
+
+<ClassTable classes={pointerEvents} />
+
+### Examples
+
+```html
+<div class="pe-auto">…</div>
+<div class="pe-none">…</div>
+```
+
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        <button class="pe-auto s-btn s-btn__tonal ff-mono">.pe-auto</button>
+        <button class="pe-none s-btn s-btn__tonal ff-mono">.pe-none</button>
+    </div>
+</Example>
+
+## Focus
+
+The focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix `f:` to only apply the style when the element is focused.
+
+### Classes
+
+<ClassTable classes={focus} />
+
+### Examples
+
+```html
+<div class="focus">…</div>
+<div class="focus-inset">…</div>
+<div class="focus-bordered">…</div>
+<div class="focus-inset-bordered">…</div>
+```
+
+<Example>
+    <div class="d-flex g16 fw-wrap">
+        <div class="focus ba bc-black-225 p12 ff-mono">.focus</div>
+        <div class="focus-inset ba bc-black-225 p12 ff-mono">.focus-inset</div>
+        <div class="focus-bordered ba bc-black-225 p12 ff-mono">.focus-bordered</div>
+        <div class="focus-inset-bordered ba bc-black-225 p12 ff-mono">.focus-inset-bordered</div>
+    </div>
+</Example>
+
+### Conditional focus examples
+
+Add the conditional prefix `f:` to only apply the style when the element is focused.
+
+```html
+<div class="f:focus" role="button" tabindex="0">…</div>
+<div class="f:focus-inset" role="button" tabindex="0">…</div>
+<div class="f:focus-bordered" role="button" tabindex="0">…</div>
+<div class="f:focus-inset-bordered" role="button" tabindex="0">…</div>
+```
+
+<Example>
+    <div class="d-flex g16 fw-wrap">
+        <div role="button" tabindex="0" class="f:focus ba bc-black-225 p12 ff-mono">.f:focus</div>
+        <div role="button" tabindex="0" class="f:focus-inset ba bc-black-225 p12 ff-mono">.f:focus-inset</div>
+        <div role="button" tabindex="0" class="f:focus-bordered ba bc-black-225 p12 ff-mono">.f:focus-bordered</div>
+        <div role="button" tabindex="0" class="f:focus-inset-bordered ba bc-black-225 p12 ff-mono">.f:focus-inset-bordered</div>
+    </div>
+</Example>
 
 ## User select
 
 The user-select CSS property controls whether the user can select text.
 
-### User select classes
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each userSelectClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="p8"><p class="mb0">{@html item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-## User drag
-
-The user-drag CSS property controls whether an element can be dragged.
-
-### User drag classes
-
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each userDragClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="p8"><p class="mb0">{item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+### Classes
+
+<ClassTable classes={userSelect} />
+
+### Examples
+
+```html
+<div class="us-auto">…</div>
+<div class="us-none">…</div>
+```
+
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        <div class="us-auto ba bc-black-225 p12 ff-mono">.us-auto</div>
+        <div class="us-none ba bc-black-225 p12 ff-mono">.us-none</div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/lists.md b/packages/stacks-docs-next/src/docs/public/system/base/lists.md
index cc2217485a..d562d83de6 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/lists.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/lists.md
@@ -1,62 +1,27 @@
 ---
 title: Lists
 description: Stacks provides a few atomic classes to help style lists.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const listClasses = [
-    {
-      class: 'list-reset',
-      output: 'list-style: none; margin: 0; padding: 0;'
-    },
-    {
-      class: 'list-ls-none',
-      output: 'list-style: none;'
-    },
-    {
-      class: 'list-ls-disc',
-      output: 'list-style-type: disc;'
-    },
-    {
-      class: 'list-ls-decimal',
-      output: 'list-style-type: decimal;'
-    },
-    {
-      class: 'list-ls-unset',
-      output: 'list-style-type: inherit;'
-    },
-    {
-      class: 'list-inside',
-      output: 'list-style-position: inside;'
-    },
-    {
-      class: 'list-outside',
-      output: 'list-style-position: outside;'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.list-reset',      output: 'list-style: none; margin: 0; padding: 0;' },
+        { class: '.list-ls-none',    output: 'list-style: none;' },
+        { class: '.list-ls-disc',    output: 'list-style-type: disc;' },
+        { class: '.list-ls-decimal', output: 'list-style-type: decimal;' },
+        { class: '.list-ls-unset',   output: 'list-style-type: inherit;' },
+        { class: '.list-inside',     output: 'list-style-position: inside;' },
+        { class: '.list-outside',    output: 'list-style-position: outside;' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each listClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -79,36 +44,36 @@ By design, our lists inherit some sensible margins by default. However, in some
 </ol>
 ```
 
-<div class="stacks-preview--example">
-  <ol class="list-reset">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ol>
-  <ul class="list-ls-none">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ul>
-  <ul class="list-ls-disc">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ul>
-  <ol class="list-ls-decimal">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ol>
-</div>
+<Example>
+    <ol class="list-reset">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ol>
+    <ul class="list-ls-none">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ul>
+    <ul class="list-ls-disc">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ul>
+    <ol class="list-ls-decimal">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ol>
+</Example>
 
 ### List Position
 
@@ -123,20 +88,19 @@ By default, the position of markers in a list item are outside their containing
 </ul>
 ```
 
-<div class="stacks-preview--example">
-  <ul class="list-reset list-ls-disc list-inside bg-black-200 mb16">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ul>
-
-  <ul class="list-reset list-ls-disc list-outside bg-black-200">
-    <li>List item 1</li>
-    <li>List item 2</li>
-    <li>List item 3</li>
-    <li>List item 4</li>
-    <li>List item 5</li>
-  </ul>
-</div>
+<Example>
+    <ul class="list-reset list-ls-disc list-inside bg-black-200 mb16">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ul>
+    <ul class="list-reset list-ls-disc list-outside bg-black-200">
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+        <li>List item 4</li>
+        <li>List item 5</li>
+    </ul>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/margin.md b/packages/stacks-docs-next/src/docs/public/system/base/margin.md
new file mode 100644
index 0000000000..3d2a117074
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/margin.md
@@ -0,0 +1,327 @@
+---
+title: "Margin"
+description: "Stacks provides atomic classes to override margin."
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const baseAbbreviations: ClassTableRow[] = [
+        { class: 'm',  output: 'margin',          description: 'Responsive' },
+        { class: 'mt', output: 'margin-top',       description: 'Responsive' },
+        { class: 'mr', output: 'margin-right',     description: 'Responsive' },
+        { class: 'mb', output: 'margin-bottom',    description: 'Responsive' },
+        { class: 'ml', output: 'margin-left',      description: 'Responsive' },
+        { class: 'mx', output: 'margin x-axis',    description: 'Responsive' },
+        { class: 'my', output: 'margin y-axis',    description: 'Responsive' },
+    ];
+
+    const baseClasses: ClassTableRow[] = [
+        { class: '.m0',    output: 'margin: 0' },
+        { class: '.m1',    output: 'margin: 1px' },
+        { class: '.m2',    output: 'margin: 2px' },
+        { class: '.m4',    output: 'margin: 4px' },
+        { class: '.m6',    output: 'margin: 6px' },
+        { class: '.m8',    output: 'margin: 8px' },
+        { class: '.m12',   output: 'margin: 12px' },
+        { class: '.m16',   output: 'margin: 16px' },
+        { class: '.m24',   output: 'margin: 24px' },
+        { class: '.m32',   output: 'margin: 32px' },
+        { class: '.m48',   output: 'margin: 48px' },
+        { class: '.m64',   output: 'margin: 64px' },
+        { class: '.m96',   output: 'margin: 96px' },
+        { class: '.m128',  output: 'margin: 128px' },
+        { class: '.m50',   output: 'margin: 50%' },
+        { class: '.m100',  output: 'margin: 100%' },
+        { class: '.mt0',   output: 'margin-top: 0' },
+        { class: '.mt1',   output: 'margin-top: 1px' },
+        { class: '.mt2',   output: 'margin-top: 2px' },
+        { class: '.mt4',   output: 'margin-top: 4px' },
+        { class: '.mt6',   output: 'margin-top: 6px' },
+        { class: '.mt8',   output: 'margin-top: 8px' },
+        { class: '.mt12',  output: 'margin-top: 12px' },
+        { class: '.mt16',  output: 'margin-top: 16px' },
+        { class: '.mt24',  output: 'margin-top: 24px' },
+        { class: '.mt32',  output: 'margin-top: 32px' },
+        { class: '.mt48',  output: 'margin-top: 48px' },
+        { class: '.mt64',  output: 'margin-top: 64px' },
+        { class: '.mt96',  output: 'margin-top: 96px' },
+        { class: '.mt128', output: 'margin-top: 128px' },
+        { class: '.mt50',  output: 'margin-top: 50%' },
+        { class: '.mt100', output: 'margin-top: 100%' },
+        { class: '.mr0',   output: 'margin-right: 0' },
+        { class: '.mr1',   output: 'margin-right: 1px' },
+        { class: '.mr2',   output: 'margin-right: 2px' },
+        { class: '.mr4',   output: 'margin-right: 4px' },
+        { class: '.mr6',   output: 'margin-right: 6px' },
+        { class: '.mr8',   output: 'margin-right: 8px' },
+        { class: '.mr12',  output: 'margin-right: 12px' },
+        { class: '.mr16',  output: 'margin-right: 16px' },
+        { class: '.mr24',  output: 'margin-right: 24px' },
+        { class: '.mr32',  output: 'margin-right: 32px' },
+        { class: '.mr48',  output: 'margin-right: 48px' },
+        { class: '.mr64',  output: 'margin-right: 64px' },
+        { class: '.mr96',  output: 'margin-right: 96px' },
+        { class: '.mr128', output: 'margin-right: 128px' },
+        { class: '.mr50',  output: 'margin-right: 50%' },
+        { class: '.mr100', output: 'margin-right: 100%' },
+        { class: '.mb0',   output: 'margin-bottom: 0' },
+        { class: '.mb1',   output: 'margin-bottom: 1px' },
+        { class: '.mb2',   output: 'margin-bottom: 2px' },
+        { class: '.mb4',   output: 'margin-bottom: 4px' },
+        { class: '.mb6',   output: 'margin-bottom: 6px' },
+        { class: '.mb8',   output: 'margin-bottom: 8px' },
+        { class: '.mb12',  output: 'margin-bottom: 12px' },
+        { class: '.mb16',  output: 'margin-bottom: 16px' },
+        { class: '.mb24',  output: 'margin-bottom: 24px' },
+        { class: '.mb32',  output: 'margin-bottom: 32px' },
+        { class: '.mb48',  output: 'margin-bottom: 48px' },
+        { class: '.mb64',  output: 'margin-bottom: 64px' },
+        { class: '.mb96',  output: 'margin-bottom: 96px' },
+        { class: '.mb128', output: 'margin-bottom: 128px' },
+        { class: '.mb50',  output: 'margin-bottom: 50%' },
+        { class: '.mb100', output: 'margin-bottom: 100%' },
+        { class: '.ml0',   output: 'margin-left: 0' },
+        { class: '.ml1',   output: 'margin-left: 1px' },
+        { class: '.ml2',   output: 'margin-left: 2px' },
+        { class: '.ml4',   output: 'margin-left: 4px' },
+        { class: '.ml6',   output: 'margin-left: 6px' },
+        { class: '.ml8',   output: 'margin-left: 8px' },
+        { class: '.ml12',  output: 'margin-left: 12px' },
+        { class: '.ml16',  output: 'margin-left: 16px' },
+        { class: '.ml24',  output: 'margin-left: 24px' },
+        { class: '.ml32',  output: 'margin-left: 32px' },
+        { class: '.ml48',  output: 'margin-left: 48px' },
+        { class: '.ml64',  output: 'margin-left: 64px' },
+        { class: '.ml96',  output: 'margin-left: 96px' },
+        { class: '.ml128', output: 'margin-left: 128px' },
+        { class: '.ml50',  output: 'margin-left: 50%' },
+        { class: '.ml100', output: 'margin-left: 100%' },
+        { class: '.mx0',   output: 'margin-left: 0; margin-right: 0' },
+        { class: '.mx1',   output: 'margin-left: 1px; margin-right: 1px' },
+        { class: '.mx2',   output: 'margin-left: 2px; margin-right: 2px' },
+        { class: '.mx4',   output: 'margin-left: 4px; margin-right: 4px' },
+        { class: '.mx6',   output: 'margin-left: 6px; margin-right: 6px' },
+        { class: '.mx8',   output: 'margin-left: 8px; margin-right: 8px' },
+        { class: '.mx12',  output: 'margin-left: 12px; margin-right: 12px' },
+        { class: '.mx16',  output: 'margin-left: 16px; margin-right: 16px' },
+        { class: '.mx24',  output: 'margin-left: 24px; margin-right: 24px' },
+        { class: '.mx32',  output: 'margin-left: 32px; margin-right: 32px' },
+        { class: '.mx48',  output: 'margin-left: 48px; margin-right: 48px' },
+        { class: '.mx64',  output: 'margin-left: 64px; margin-right: 64px' },
+        { class: '.mx96',  output: 'margin-left: 96px; margin-right: 96px' },
+        { class: '.mx128', output: 'margin-left: 128px; margin-right: 128px' },
+        { class: '.mx50',  output: 'margin-left: 50%; margin-right: 50%' },
+        { class: '.mx100', output: 'margin-left: 100%; margin-right: 100%' },
+        { class: '.my0',   output: 'margin-top: 0; margin-bottom: 0' },
+        { class: '.my1',   output: 'margin-top: 1px; margin-bottom: 1px' },
+        { class: '.my2',   output: 'margin-top: 2px; margin-bottom: 2px' },
+        { class: '.my4',   output: 'margin-top: 4px; margin-bottom: 4px' },
+        { class: '.my6',   output: 'margin-top: 6px; margin-bottom: 6px' },
+        { class: '.my8',   output: 'margin-top: 8px; margin-bottom: 8px' },
+        { class: '.my12',  output: 'margin-top: 12px; margin-bottom: 12px' },
+        { class: '.my16',  output: 'margin-top: 16px; margin-bottom: 16px' },
+        { class: '.my24',  output: 'margin-top: 24px; margin-bottom: 24px' },
+        { class: '.my32',  output: 'margin-top: 32px; margin-bottom: 32px' },
+        { class: '.my48',  output: 'margin-top: 48px; margin-bottom: 48px' },
+        { class: '.my64',  output: 'margin-top: 64px; margin-bottom: 64px' },
+        { class: '.my96',  output: 'margin-top: 96px; margin-bottom: 96px' },
+        { class: '.my128', output: 'margin-top: 128px; margin-bottom: 128px' },
+        { class: '.my50',  output: 'margin-top: 50%; margin-bottom: 50%' },
+        { class: '.my100', output: 'margin-top: 100%; margin-bottom: 100%' },
+    ];
+
+    const negativeAbbreviations: ClassTableRow[] = [
+        { class: 'mn',  output: 'margin',          description: 'Responsive' },
+        { class: 'mtn', output: 'margin-top',       description: 'Responsive' },
+        { class: 'mrn', output: 'margin-right',     description: 'Responsive' },
+        { class: 'mbn', output: 'margin-bottom',    description: 'Responsive' },
+        { class: 'mln', output: 'margin-left',      description: 'Responsive' },
+        { class: 'mxn', output: 'margin x-axis',    description: 'Responsive' },
+        { class: 'myn', output: 'margin y-axis',    description: 'Responsive' },
+    ];
+
+    const negativeClasses: ClassTableRow[] = [
+        { class: '.mn1',    output: 'margin: -1px' },
+        { class: '.mn2',    output: 'margin: -2px' },
+        { class: '.mn4',    output: 'margin: -4px' },
+        { class: '.mn6',    output: 'margin: -6px' },
+        { class: '.mn8',    output: 'margin: -8px' },
+        { class: '.mn12',   output: 'margin: -12px' },
+        { class: '.mn16',   output: 'margin: -16px' },
+        { class: '.mn24',   output: 'margin: -24px' },
+        { class: '.mn32',   output: 'margin: -32px' },
+        { class: '.mn48',   output: 'margin: -48px' },
+        { class: '.mn64',   output: 'margin: -64px' },
+        { class: '.mn96',   output: 'margin: -96px' },
+        { class: '.mn128',  output: 'margin: -128px' },
+        { class: '.mn50',   output: 'margin: -50%' },
+        { class: '.mn100',  output: 'margin: -100%' },
+        { class: '.mtn1',   output: 'margin-top: -1px' },
+        { class: '.mtn2',   output: 'margin-top: -2px' },
+        { class: '.mtn4',   output: 'margin-top: -4px' },
+        { class: '.mtn6',   output: 'margin-top: -6px' },
+        { class: '.mtn8',   output: 'margin-top: -8px' },
+        { class: '.mtn12',  output: 'margin-top: -12px' },
+        { class: '.mtn16',  output: 'margin-top: -16px' },
+        { class: '.mtn24',  output: 'margin-top: -24px' },
+        { class: '.mtn32',  output: 'margin-top: -32px' },
+        { class: '.mtn48',  output: 'margin-top: -48px' },
+        { class: '.mtn64',  output: 'margin-top: -64px' },
+        { class: '.mtn96',  output: 'margin-top: -96px' },
+        { class: '.mtn128', output: 'margin-top: -128px' },
+        { class: '.mtn50',  output: 'margin-top: -50%' },
+        { class: '.mtn100', output: 'margin-top: -100%' },
+        { class: '.mrn1',   output: 'margin-right: -1px' },
+        { class: '.mrn2',   output: 'margin-right: -2px' },
+        { class: '.mrn4',   output: 'margin-right: -4px' },
+        { class: '.mrn6',   output: 'margin-right: -6px' },
+        { class: '.mrn8',   output: 'margin-right: -8px' },
+        { class: '.mrn12',  output: 'margin-right: -12px' },
+        { class: '.mrn16',  output: 'margin-right: -16px' },
+        { class: '.mrn24',  output: 'margin-right: -24px' },
+        { class: '.mrn32',  output: 'margin-right: -32px' },
+        { class: '.mrn48',  output: 'margin-right: -48px' },
+        { class: '.mrn64',  output: 'margin-right: -64px' },
+        { class: '.mrn96',  output: 'margin-right: -96px' },
+        { class: '.mrn128', output: 'margin-right: -128px' },
+        { class: '.mrn50',  output: 'margin-right: -50%' },
+        { class: '.mrn100', output: 'margin-right: -100%' },
+        { class: '.mbn1',   output: 'margin-bottom: -1px' },
+        { class: '.mbn2',   output: 'margin-bottom: -2px' },
+        { class: '.mbn4',   output: 'margin-bottom: -4px' },
+        { class: '.mbn6',   output: 'margin-bottom: -6px' },
+        { class: '.mbn8',   output: 'margin-bottom: -8px' },
+        { class: '.mbn12',  output: 'margin-bottom: -12px' },
+        { class: '.mbn16',  output: 'margin-bottom: -16px' },
+        { class: '.mbn24',  output: 'margin-bottom: -24px' },
+        { class: '.mbn32',  output: 'margin-bottom: -32px' },
+        { class: '.mbn48',  output: 'margin-bottom: -48px' },
+        { class: '.mbn64',  output: 'margin-bottom: -64px' },
+        { class: '.mbn96',  output: 'margin-bottom: -96px' },
+        { class: '.mbn128', output: 'margin-bottom: -128px' },
+        { class: '.mbn50',  output: 'margin-bottom: -50%' },
+        { class: '.mbn100', output: 'margin-bottom: -100%' },
+        { class: '.mln1',   output: 'margin-left: -1px' },
+        { class: '.mln2',   output: 'margin-left: -2px' },
+        { class: '.mln4',   output: 'margin-left: -4px' },
+        { class: '.mln6',   output: 'margin-left: -6px' },
+        { class: '.mln8',   output: 'margin-left: -8px' },
+        { class: '.mln12',  output: 'margin-left: -12px' },
+        { class: '.mln16',  output: 'margin-left: -16px' },
+        { class: '.mln24',  output: 'margin-left: -24px' },
+        { class: '.mln32',  output: 'margin-left: -32px' },
+        { class: '.mln48',  output: 'margin-left: -48px' },
+        { class: '.mln64',  output: 'margin-left: -64px' },
+        { class: '.mln96',  output: 'margin-left: -96px' },
+        { class: '.mln128', output: 'margin-left: -128px' },
+        { class: '.mln50',  output: 'margin-left: -50%' },
+        { class: '.mln100', output: 'margin-left: -100%' },
+        { class: '.mxn1',   output: 'margin-left: -1px; margin-right: -1px' },
+        { class: '.mxn2',   output: 'margin-left: -2px; margin-right: -2px' },
+        { class: '.mxn4',   output: 'margin-left: -4px; margin-right: -4px' },
+        { class: '.mxn6',   output: 'margin-left: -6px; margin-right: -6px' },
+        { class: '.mxn8',   output: 'margin-left: -8px; margin-right: -8px' },
+        { class: '.mxn12',  output: 'margin-left: -12px; margin-right: -12px' },
+        { class: '.mxn16',  output: 'margin-left: -16px; margin-right: -16px' },
+        { class: '.mxn24',  output: 'margin-left: -24px; margin-right: -24px' },
+        { class: '.mxn32',  output: 'margin-left: -32px; margin-right: -32px' },
+        { class: '.mxn48',  output: 'margin-left: -48px; margin-right: -48px' },
+        { class: '.mxn64',  output: 'margin-left: -64px; margin-right: -64px' },
+        { class: '.mxn96',  output: 'margin-left: -96px; margin-right: -96px' },
+        { class: '.mxn128', output: 'margin-left: -128px; margin-right: -128px' },
+        { class: '.mxn50',  output: 'margin-left: -50%; margin-right: -50%' },
+        { class: '.mxn100', output: 'margin-left: -100%; margin-right: -100%' },
+        { class: '.myn1',   output: 'margin-top: -1px; margin-bottom: -1px' },
+        { class: '.myn2',   output: 'margin-top: -2px; margin-bottom: -2px' },
+        { class: '.myn4',   output: 'margin-top: -4px; margin-bottom: -4px' },
+        { class: '.myn6',   output: 'margin-top: -6px; margin-bottom: -6px' },
+        { class: '.myn8',   output: 'margin-top: -8px; margin-bottom: -8px' },
+        { class: '.myn12',  output: 'margin-top: -12px; margin-bottom: -12px' },
+        { class: '.myn16',  output: 'margin-top: -16px; margin-bottom: -16px' },
+        { class: '.myn24',  output: 'margin-top: -24px; margin-bottom: -24px' },
+        { class: '.myn32',  output: 'margin-top: -32px; margin-bottom: -32px' },
+        { class: '.myn48',  output: 'margin-top: -48px; margin-bottom: -48px' },
+        { class: '.myn64',  output: 'margin-top: -64px; margin-bottom: -64px' },
+        { class: '.myn96',  output: 'margin-top: -96px; margin-bottom: -96px' },
+        { class: '.myn128', output: 'margin-top: -128px; margin-bottom: -128px' },
+        { class: '.myn50',  output: 'margin-top: -50%; margin-bottom: -50%' },
+        { class: '.myn100', output: 'margin-top: -100%; margin-bottom: -100%' },
+    ];
+
+    const autoClasses: ClassTableRow[] = [
+        { class: '.m-auto',  output: 'margin: auto' },
+        { class: '.mt-auto', output: 'margin-top: auto' },
+        { class: '.mr-auto', output: 'margin-right: auto' },
+        { class: '.mb-auto', output: 'margin-bottom: auto' },
+        { class: '.ml-auto', output: 'margin-left: auto' },
+        { class: '.mx-auto', output: 'margin-left: auto; margin-right: auto' },
+        { class: '.my-auto', output: 'margin-top: auto; margin-bottom: auto' },
+    ];
+</script>
+
+## Base
+
+Immutable margin utilities are based on our global white space scale. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+
+### Abbreviations
+
+<ClassTable classes={baseAbbreviations} headings={{ class: 'Abbreviation', output: 'Property', description: 'Responsive?' }} />
+
+### Base examples
+
+```html
+<div class="mt8 mr4 mb32 ml64">
+    …
+</div>
+```
+
+<Example>
+    <div class="docs-box bg-black-100">
+        <div class="docs-box mt8 mr4 mb32 ml64">
+            Example div with different margins applied
+        </div>
+    </div>
+</Example>
+
+### Base classes
+
+<ClassTable classes={baseClasses} expandable />
+
+## Negative
+
+Immutable margin utilities are based on our global white space scale. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+
+### Abbreviations
+
+<ClassTable classes={negativeAbbreviations} headings={{ class: 'Abbreviation', output: 'Property', description: 'Responsive?' }} />
+
+### Negative examples
+
+```html
+<div class="mtn8 mrn4 mbn32 mln64">
+    …
+</div>
+```
+
+<Example>
+    <div class="docs-box bg-black-100 p48">
+        <div class="docs-box mtn8 mrn4 mbn32 mln64">
+            Example div with different margins applied
+        </div>
+    </div>
+</Example>
+
+### Negative classes
+
+<ClassTable classes={negativeClasses} expandable />
+
+## Auto
+
+Stacks provides additional automatic margin classes. These come in handy when positioning individual flex items within flex layouts, or horizontally centering a block-level element.
+
+### Auto classes
+
+<ClassTable classes={autoClasses} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md b/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md
index 05812bdb08..ad89edb370 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md
@@ -1,66 +1,50 @@
 ---
 title: Object fit
-description: Atomic classes that control the sizing of an <code class="stacks-code">img</code> or <code class="stacks-code">video</code> relative to its container.
-updated: 2025-12-16
+description: Atomic classes that control the sizing of an <code>img</code> or <code>video</code> relative to its container.
 ---
 
 <script lang="ts">
-  const objectFitClasses = [
-    {
-      class: '.of-contain',
-      output: 'object-fit: contain',
-      define: 'Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box.'
-    },
-    {
-      class: '.of-cover',
-      output: 'object-fit: cover',
-      define: 'Cover the entire content box with the content while preserving its aspect ratio. This may crop the content.'
-    },
-    {
-      class: '.of-fill',
-      output: 'object-fit: fill',
-      define: 'Stretch and scale the content\'s dimensions to match its content box. <em>This is the default browser value.</em>'
-    },
-    {
-      class: '.of-none',
-      output: 'object-fit: none',
-      define: 'Prevent the content from being resized.'
-    },
-    {
-      class: '.of-scale-down',
-      output: 'object-fit: scale-down',
-      define: 'When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content\'s original dimensions.'
-    },
-    {
-      class: '.op-center',
-      output: 'object-position: center',
-      define: 'Center the content within its content box.'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        {
+            class: '.of-contain',
+            output: 'object-fit: contain',
+            define: 'Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box.'
+        },
+        {
+            class: '.of-cover',
+            output: 'object-fit: cover',
+            define: 'Cover the entire content box with the content while preserving its aspect ratio. This may crop the content.'
+        },
+        {
+            class: '.of-fill',
+            output: 'object-fit: fill',
+            define: "Stretch and scale the content's dimensions to match its content box. <em>This is the default browser value.</em>"
+        },
+        {
+            class: '.of-none',
+            output: 'object-fit: none',
+            define: 'Prevent the content from being resized.'
+        },
+        {
+            class: '.of-scale-down',
+            output: 'object-fit: scale-down',
+            define: "When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content's original dimensions."
+        },
+        {
+            class: '.op-center',
+            output: 'object-position: center',
+            define: 'Center the content within its content box.'
+        }
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each objectFitClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td><p class="mb0">{@html item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -73,85 +57,85 @@ updated: 2025-12-16
 <img class="of-none op-center" src="…" />
 ```
 
-<div class="stacks-preview--example ff-mono">
-  <div class="d-flex g32 fw-wrap">
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.of-contain</div>
-      <img
-        class="of-contain ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .of-contain"
-      />
-      <img
-        class="of-contain ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .of-contain"
-      />
-    </div>
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.of-cover</div>
-      <img
-        class="of-cover ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .of-cover"
-      />
-      <img
-        class="of-cover ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .of-cover"
-      />
-    </div>
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.of-fill</div>
-      <img
-        class="of-fill ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .of-fill"
-      />
-      <img
-        class="of-fill ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .of-fill"
-      />
-    </div>
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.of-none</div>
-      <img
-        class="of-none ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .of-none"
-      />
-      <img
-        class="of-none ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .of-none"
-      />
-    </div>
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.of-scale-down</div>
-      <img
-        class="of-scale-down ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .of-scale-down"
-      />
-      <img
-        class="of-scale-down ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .of-scale-down"
-      />
-    </div>
-    <div class="flex--item">
-      <div class="mb8 ff-mono">.op-center.of-none</div>
-      <img
-        class="op-center of-none ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/400x240/e4e6e8"
-        alt="placeholder for .op-center.of-none"
-      />
-      <img
-        class="op-center of-none ba bc-black-225 hs1 ws1"
-        src="https://fakeimg.pl/90x60/e4e6e8"
-        alt="placeholder for .op-center.of-none"
-      />
+<Example>
+    <div class="d-flex g32 fw-wrap ff-mono">
+        <div class="flex--item">
+            <div class="mb8">.of-contain</div>
+            <img
+                class="of-contain ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .of-contain"
+            />
+            <img
+                class="of-contain ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .of-contain"
+            />
+        </div>
+        <div class="flex--item">
+            <div class="mb8">.of-cover</div>
+            <img
+                class="of-cover ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .of-cover"
+            />
+            <img
+                class="of-cover ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .of-cover"
+            />
+        </div>
+        <div class="flex--item">
+            <div class="mb8">.of-fill</div>
+            <img
+                class="of-fill ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .of-fill"
+            />
+            <img
+                class="of-fill ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .of-fill"
+            />
+        </div>
+        <div class="flex--item">
+            <div class="mb8">.of-none</div>
+            <img
+                class="of-none ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .of-none"
+            />
+            <img
+                class="of-none ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .of-none"
+            />
+        </div>
+        <div class="flex--item">
+            <div class="mb8">.of-scale-down</div>
+            <img
+                class="of-scale-down ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .of-scale-down"
+            />
+            <img
+                class="of-scale-down ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .of-scale-down"
+            />
+        </div>
+        <div class="flex--item">
+            <div class="mb8">.op-center.of-none</div>
+            <img
+                class="op-center of-none ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-wide.svg"
+                alt="placeholder for .op-center.of-none"
+            />
+            <img
+                class="op-center of-none ba bc-black-225 hs1 ws1"
+                src="/images/object-fit-small.svg"
+                alt="placeholder for .op-center.of-none"
+            />
+        </div>
     </div>
-  </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/opacity.md b/packages/stacks-docs-next/src/docs/public/system/base/opacity.md
index 5fe0660750..7535408816 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/opacity.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/opacity.md
@@ -1,117 +1,32 @@
 ---
 title: Opacity
 description: Atomic opacity classes allow you to change an element's opacity quickly.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  import { Icon } from '@stackoverflow/stacks-svelte';
-  import { IconCheckFillCircle, IconCrossCircle } from '@stackoverflow/stacks-icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
 
-  const opacityClasses = [
-    {
-      class: 'o0',
-      output: 'opacity: 0;',
-      hover: true,
-      focus: false
-    },
-    {
-      class: 'o5',
-      output: 'opacity: 0.05;',
-      hover: true,
-      focus: false
-    },
-    {
-      class: 'o10',
-      output: 'opacity: 0.1;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o20',
-      output: 'opacity: 0.2;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o30',
-      output: 'opacity: 0.3;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o40',
-      output: 'opacity: 0.4;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o50',
-      output: 'opacity: 0.5;',
-      hover: true,
-      focus: false
-    },
-    {
-      class: 'o60',
-      output: 'opacity: 0.6;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o70',
-      output: 'opacity: 0.7;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o80',
-      output: 'opacity: 0.8;',
-      hover: true,
-      focus: false
-    },
-    {
-      class: 'o90',
-      output: 'opacity: 0.9;',
-      hover: false,
-      focus: false
-    },
-    {
-      class: 'o100',
-      output: 'opacity: 1;',
-      hover: true,
-      focus: true
-    }
-  ];
+    const classes: ClassTableRow[] = [
+        { class: '.o0',   output: 'opacity: 0',    hover: true },
+        { class: '.o5',   output: 'opacity: 0.05', hover: true },
+        { class: '.o10',  output: 'opacity: 0.1' },
+        { class: '.o20',  output: 'opacity: 0.2' },
+        { class: '.o30',  output: 'opacity: 0.3' },
+        { class: '.o40',  output: 'opacity: 0.4' },
+        { class: '.o50',  output: 'opacity: 0.5',  hover: true },
+        { class: '.o60',  output: 'opacity: 0.6' },
+        { class: '.o70',  output: 'opacity: 0.7' },
+        { class: '.o80',  output: 'opacity: 0.8',  hover: true },
+        { class: '.o90',  output: 'opacity: 0.9' },
+        { class: '.o100', output: 'opacity: 1',    hover: true, focus: true },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-        <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#hover">Hover?</a></th>
-        <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="/system/develop/conditional-classes#focus">Focus?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each opacityClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td class="ta-center">
-            <Icon src={item.hover ? IconCheckFillCircle : IconCrossCircle} class={item.hover ? "fc-green-400" : "fc-black-200"} />
-          </td>
-          <td class="ta-center">
-            <Icon src={item.focus ? IconCheckFillCircle : IconCrossCircle} class={item.focus ? "fc-green-400" : "fc-black-200"} />
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -130,17 +45,19 @@ updated: 2025-12-16
 <div class="o100">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="o0 my4 bg-black-200 p12 ba bc-black-225">.o0</div>
-  <div class="o5 my4 bg-black-200 p12 ba bc-black-225">.o5</div>
-  <div class="o10 my4 bg-black-200 p12 ba bc-black-225">.o10</div>
-  <div class="o20 my4 bg-black-200 p12 ba bc-black-225">.o20</div>
-  <div class="o30 my4 bg-black-200 p12 ba bc-black-225">.o30</div>
-  <div class="o40 my4 bg-black-200 p12 ba bc-black-225">.o40</div>
-  <div class="o50 my4 bg-black-200 p12 ba bc-black-225">.o50</div>
-  <div class="o60 my4 bg-black-200 p12 ba bc-black-225">.o60</div>
-  <div class="o70 my4 bg-black-200 p12 ba bc-black-225">.o70</div>
-  <div class="o80 my4 bg-black-200 p12 ba bc-black-225">.o80</div>
-  <div class="o90 my4 bg-black-200 p12 ba bc-black-225">.o90</div>
-  <div class="o100 my4 bg-black-200 p12 ba bc-black-225">.o100</div>
-</div>
+<Example>
+    <div class="d-flex fd-column g8 fs-caption ff-mono">
+        <div class="o0   bg-black-200 p12 ba bc-black-225">.o0</div>
+        <div class="o5   bg-black-200 p12 ba bc-black-225">.o5</div>
+        <div class="o10  bg-black-200 p12 ba bc-black-225">.o10</div>
+        <div class="o20  bg-black-200 p12 ba bc-black-225">.o20</div>
+        <div class="o30  bg-black-200 p12 ba bc-black-225">.o30</div>
+        <div class="o40  bg-black-200 p12 ba bc-black-225">.o40</div>
+        <div class="o50  bg-black-200 p12 ba bc-black-225">.o50</div>
+        <div class="o60  bg-black-200 p12 ba bc-black-225">.o60</div>
+        <div class="o70  bg-black-200 p12 ba bc-black-225">.o70</div>
+        <div class="o80  bg-black-200 p12 ba bc-black-225">.o80</div>
+        <div class="o90  bg-black-200 p12 ba bc-black-225">.o90</div>
+        <div class="o100 bg-black-200 p12 ba bc-black-225">.o100</div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/outline.md b/packages/stacks-docs-next/src/docs/public/system/base/outline.md
index f59f67182f..b5b2647ce0 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/outline.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/outline.md
@@ -1,52 +1,35 @@
 ---
 title: Outline
 description: Atomic outline classes allow you to quickly change an element's outline styling.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  import { Notice } from '@stackoverflow/stacks-svelte';
-
-  const outlineClasses = [
-    {
-      class: 'outline-none',
-      output: 'outline: 0;',
-      define: "Removes the browser's default focus style. To maintain accessibility, care should be taken to replace the style that's been removed."
-    },
-    {
-      class: 'outline-ring',
-      output: 'outline: solid var(--su4) var(--translucent-secondary);',
-      define: 'Adds an outline using our translucent secondary color.'
-    }
-  ];
+    import { Notice } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        {
+            class: '.outline-none',
+            output: 'outline: 0;',
+            define: "Removes the browser's default focus style. To maintain accessibility, care should be taken to replace the style that's been removed."
+        },
+        {
+            class: '.outline-ring',
+            output: 'outline: solid var(--su4) var(--translucent-secondary);',
+            define: 'Adds an outline using our translucent secondary color.'
+        }
+    ];
 </script>
 
-<Notice variant="warning">
-  <strong>Warning:</strong> <code>.outline-ring</code> does not meet our accessibility standards for focus state styling and should be used for decorative purposes only.
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Warning:</strong> <code>.outline-ring</code> does not meet our accessibility standards for focus state styling and should be used for decorative purposes only.</p>
 </Notice>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell4" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each outlineClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td><p class="mb0">{item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -55,7 +38,7 @@ updated: 2025-12-16
 <div class="outline-ring">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="outline-none d-inline-block bg-black-200 p12 ba bc-black-225">.outline-none</div>
-  <div class="outline-ring d-inline-block bg-black-200 p12 ba bc-black-225">.outline-ring</div>
-</div>
+<Example>
+    <div class="outline-none d-inline-block bg-black-200 p12 ba bc-black-225">.outline-none</div>
+    <div class="outline-ring d-inline-block bg-black-200 p12 ba bc-black-225">.outline-ring</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/overflow.md b/packages/stacks-docs-next/src/docs/public/system/base/overflow.md
index 3693b8c4c3..53c3ce0615 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/overflow.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/overflow.md
@@ -1,86 +1,70 @@
 ---
 title: Overflow
 description: Atomic overflow classes allow you to change an element's overflow properties quickly.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const overflowClasses = [
-    {
-      class: 'overflow-auto',
-      output: 'overflow: auto;',
-      define: 'If content fits inside the content box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
-    },
-    {
-      class: 'overflow-x-auto',
-      output: 'overflow-x: auto;',
-      define: 'If content fits inside the content box, it looks the same as visible in the x dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
-    },
-    {
-      class: 'overflow-y-auto',
-      output: 'overflow-y: auto;',
-      define: 'If content fits inside the content box, it looks the same as visible in the y dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
-    },
-    {
-      class: 'overflow-hidden',
-      output: 'overflow: hidden;',
-      define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided.'
-    },
-    {
-      class: 'overflow-x-hidden',
-      output: 'overflow-x: hidden;',
-      define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided in the x dimension.'
-    },
-    {
-      class: 'overflow-y-hidden',
-      output: 'overflow-y: hidden;',
-      define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided in the y dimension.'
-    },
-    {
-      class: 'overflow-scroll',
-      output: 'overflow: scroll;',
-      define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.'
-    },
-    {
-      class: 'overflow-x-scroll',
-      output: 'overflow-x: scroll;',
-      define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the x dimension.'
-    },
-    {
-      class: 'overflow-y-scroll',
-      output: 'overflow-y: scroll;',
-      define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the y dimension.'
-    },
-    {
-      class: 'overflow-visible',
-      output: 'overflow: visible;',
-      define: 'Content is not clipped and may be rendered outside the content box. This is the default value.'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        {
+            class: '.overflow-auto',
+            output: 'overflow: auto;',
+            define: 'If content fits inside the content box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
+        },
+        {
+            class: '.overflow-x-auto',
+            output: 'overflow-x: auto;',
+            define: 'If content fits inside the content box, it looks the same as visible in the x dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
+        },
+        {
+            class: '.overflow-y-auto',
+            output: 'overflow-y: auto;',
+            define: 'If content fits inside the content box, it looks the same as visible in the y dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.'
+        },
+        {
+            class: '.overflow-hidden',
+            output: 'overflow: hidden;',
+            define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided.'
+        },
+        {
+            class: '.overflow-x-hidden',
+            output: 'overflow-x: hidden;',
+            define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided in the x dimension.'
+        },
+        {
+            class: '.overflow-y-hidden',
+            output: 'overflow-y: hidden;',
+            define: 'Content is clipped if necessary to fit the content box. No scrollbars are provided in the y dimension.'
+        },
+        {
+            class: '.overflow-scroll',
+            output: 'overflow: scroll;',
+            define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.'
+        },
+        {
+            class: '.overflow-x-scroll',
+            output: 'overflow-x: scroll;',
+            define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the x dimension.'
+        },
+        {
+            class: '.overflow-y-scroll',
+            output: 'overflow-y: scroll;',
+            define: 'Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the y dimension.'
+        },
+        {
+            class: '.overflow-visible',
+            output: 'overflow: visible;',
+            define: 'Content is not clipped and may be rendered outside the content box. This is the default value.'
+        }
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn4 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell3" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each overflowClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-          <td><p class="mb0">{item.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -96,3 +80,68 @@ updated: 2025-12-16
 <div class="overflow-y-scroll">…</div>
 <div class="overflow-visible">…</div>
 ```
+
+<Example>
+    <div class="overflow-x-auto d-grid grid__3 sm:grid__2 md:grid__3 lg:grid__2 g16 fs-caption ff-mono pb64" tabindex="0">
+        <div>
+            <div class="mb4">.overflow-auto</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-auto">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-x-auto</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-x-auto">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-y-auto</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-y-auto">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-hidden</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-hidden">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-x-hidden</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-x-hidden">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-y-hidden</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-y-hidden">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-scroll</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-scroll">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-x-scroll</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-x-scroll">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-y-scroll</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-y-scroll">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+        <div>
+            <div class="mb4">.overflow-visible</div>
+            <div class="ba bc-black-225 pt32 hs2 overflow-visible">
+                <div class="ba bc-black-225 hs2 ws2"></div>
+            </div>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/padding.md b/packages/stacks-docs-next/src/docs/public/system/base/padding.md
new file mode 100644
index 0000000000..ca7666921f
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/padding.md
@@ -0,0 +1,155 @@
+---
+title: "Padding"
+description: "Stacks provides atomic classes to override padding."
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const abbreviations: ClassTableRow[] = [
+        { class: 'p',  description: 'padding',         responsive: true },
+        { class: 'pt', description: 'padding-top',     responsive: true },
+        { class: 'pr', description: 'padding-right',   responsive: true },
+        { class: 'pb', description: 'padding-bottom',  responsive: true },
+        { class: 'pl', description: 'padding-left',    responsive: true },
+        { class: 'px', description: 'padding x-axis',  responsive: true },
+        { class: 'py', description: 'padding y-axis',  responsive: true },
+    ];
+
+    const classes: ClassTableRow[] = [
+        { class: '.p0',    output: 'padding: 0',       responsive: true },
+        { class: '.p1',    output: 'padding: 1px',     responsive: true },
+        { class: '.p2',    output: 'padding: 2px',     responsive: true },
+        { class: '.p4',    output: 'padding: 4px',     responsive: true },
+        { class: '.p6',    output: 'padding: 6px',     responsive: true },
+        { class: '.p8',    output: 'padding: 8px',     responsive: true },
+        { class: '.p12',   output: 'padding: 12px',    responsive: true },
+        { class: '.p16',   output: 'padding: 16px',    responsive: true },
+        { class: '.p24',   output: 'padding: 24px',    responsive: true },
+        { class: '.p32',   output: 'padding: 32px',    responsive: true },
+        { class: '.p48',   output: 'padding: 48px',    responsive: true },
+        { class: '.p64',   output: 'padding: 64px',    responsive: true },
+        { class: '.p96',   output: 'padding: 96px',    responsive: true },
+        { class: '.p128',  output: 'padding: 128px',   responsive: true },
+        { class: '.p50',   output: 'padding: 50%',     responsive: true },
+        { class: '.p100',  output: 'padding: 100%',    responsive: true },
+        { class: '.pt0',   output: 'padding-top: 0',       responsive: true },
+        { class: '.pt1',   output: 'padding-top: 1px',     responsive: true },
+        { class: '.pt2',   output: 'padding-top: 2px',     responsive: true },
+        { class: '.pt4',   output: 'padding-top: 4px',     responsive: true },
+        { class: '.pt6',   output: 'padding-top: 6px',     responsive: true },
+        { class: '.pt8',   output: 'padding-top: 8px',     responsive: true },
+        { class: '.pt12',  output: 'padding-top: 12px',    responsive: true },
+        { class: '.pt16',  output: 'padding-top: 16px',    responsive: true },
+        { class: '.pt24',  output: 'padding-top: 24px',    responsive: true },
+        { class: '.pt32',  output: 'padding-top: 32px',    responsive: true },
+        { class: '.pt48',  output: 'padding-top: 48px',    responsive: true },
+        { class: '.pt64',  output: 'padding-top: 64px',    responsive: true },
+        { class: '.pt96',  output: 'padding-top: 96px',    responsive: true },
+        { class: '.pt128', output: 'padding-top: 128px',   responsive: true },
+        { class: '.pt50',  output: 'padding-top: 50%',     responsive: true },
+        { class: '.pt100', output: 'padding-top: 100%',    responsive: true },
+        { class: '.pr0',   output: 'padding-right: 0',       responsive: true },
+        { class: '.pr1',   output: 'padding-right: 1px',     responsive: true },
+        { class: '.pr2',   output: 'padding-right: 2px',     responsive: true },
+        { class: '.pr4',   output: 'padding-right: 4px',     responsive: true },
+        { class: '.pr6',   output: 'padding-right: 6px',     responsive: true },
+        { class: '.pr8',   output: 'padding-right: 8px',     responsive: true },
+        { class: '.pr12',  output: 'padding-right: 12px',    responsive: true },
+        { class: '.pr16',  output: 'padding-right: 16px',    responsive: true },
+        { class: '.pr24',  output: 'padding-right: 24px',    responsive: true },
+        { class: '.pr32',  output: 'padding-right: 32px',    responsive: true },
+        { class: '.pr48',  output: 'padding-right: 48px',    responsive: true },
+        { class: '.pr64',  output: 'padding-right: 64px',    responsive: true },
+        { class: '.pr96',  output: 'padding-right: 96px',    responsive: true },
+        { class: '.pr128', output: 'padding-right: 128px',   responsive: true },
+        { class: '.pr50',  output: 'padding-right: 50%',     responsive: true },
+        { class: '.pr100', output: 'padding-right: 100%',    responsive: true },
+        { class: '.pb0',   output: 'padding-bottom: 0',       responsive: true },
+        { class: '.pb1',   output: 'padding-bottom: 1px',     responsive: true },
+        { class: '.pb2',   output: 'padding-bottom: 2px',     responsive: true },
+        { class: '.pb4',   output: 'padding-bottom: 4px',     responsive: true },
+        { class: '.pb6',   output: 'padding-bottom: 6px',     responsive: true },
+        { class: '.pb8',   output: 'padding-bottom: 8px',     responsive: true },
+        { class: '.pb12',  output: 'padding-bottom: 12px',    responsive: true },
+        { class: '.pb16',  output: 'padding-bottom: 16px',    responsive: true },
+        { class: '.pb24',  output: 'padding-bottom: 24px',    responsive: true },
+        { class: '.pb32',  output: 'padding-bottom: 32px',    responsive: true },
+        { class: '.pb48',  output: 'padding-bottom: 48px',    responsive: true },
+        { class: '.pb64',  output: 'padding-bottom: 64px',    responsive: true },
+        { class: '.pb96',  output: 'padding-bottom: 96px',    responsive: true },
+        { class: '.pb128', output: 'padding-bottom: 128px',   responsive: true },
+        { class: '.pb50',  output: 'padding-bottom: 50%',     responsive: true },
+        { class: '.pb100', output: 'padding-bottom: 100%',    responsive: true },
+        { class: '.pl0',   output: 'padding-left: 0',       responsive: true },
+        { class: '.pl1',   output: 'padding-left: 1px',     responsive: true },
+        { class: '.pl2',   output: 'padding-left: 2px',     responsive: true },
+        { class: '.pl4',   output: 'padding-left: 4px',     responsive: true },
+        { class: '.pl6',   output: 'padding-left: 6px',     responsive: true },
+        { class: '.pl8',   output: 'padding-left: 8px',     responsive: true },
+        { class: '.pl12',  output: 'padding-left: 12px',    responsive: true },
+        { class: '.pl16',  output: 'padding-left: 16px',    responsive: true },
+        { class: '.pl24',  output: 'padding-left: 24px',    responsive: true },
+        { class: '.pl32',  output: 'padding-left: 32px',    responsive: true },
+        { class: '.pl48',  output: 'padding-left: 48px',    responsive: true },
+        { class: '.pl64',  output: 'padding-left: 64px',    responsive: true },
+        { class: '.pl96',  output: 'padding-left: 96px',    responsive: true },
+        { class: '.pl128', output: 'padding-left: 128px',   responsive: true },
+        { class: '.pl50',  output: 'padding-left: 50%',     responsive: true },
+        { class: '.pl100', output: 'padding-left: 100%',    responsive: true },
+        { class: '.px1',   output: 'padding-left: 1px; padding-right: 1px',     responsive: true },
+        { class: '.px2',   output: 'padding-left: 2px; padding-right: 2px',     responsive: true },
+        { class: '.px4',   output: 'padding-left: 4px; padding-right: 4px',     responsive: true },
+        { class: '.px6',   output: 'padding-left: 6px; padding-right: 6px',     responsive: true },
+        { class: '.px8',   output: 'padding-left: 8px; padding-right: 8px',     responsive: true },
+        { class: '.px12',  output: 'padding-left: 12px; padding-right: 12px',   responsive: true },
+        { class: '.px16',  output: 'padding-left: 16px; padding-right: 16px',   responsive: true },
+        { class: '.px24',  output: 'padding-left: 24px; padding-right: 24px',   responsive: true },
+        { class: '.px32',  output: 'padding-left: 32px; padding-right: 32px',   responsive: true },
+        { class: '.px48',  output: 'padding-left: 48px; padding-right: 48px',   responsive: true },
+        { class: '.px64',  output: 'padding-left: 64px; padding-right: 64px',   responsive: true },
+        { class: '.px96',  output: 'padding-left: 96px; padding-right: 96px',   responsive: true },
+        { class: '.px128', output: 'padding-left: 128px; padding-right: 128px', responsive: true },
+        { class: '.py1',   output: 'padding-top: 1px; padding-bottom: 1px',     responsive: true },
+        { class: '.py2',   output: 'padding-top: 2px; padding-bottom: 2px',     responsive: true },
+        { class: '.py4',   output: 'padding-top: 4px; padding-bottom: 4px',     responsive: true },
+        { class: '.py6',   output: 'padding-top: 6px; padding-bottom: 6px',     responsive: true },
+        { class: '.py8',   output: 'padding-top: 8px; padding-bottom: 8px',     responsive: true },
+        { class: '.py12',  output: 'padding-top: 12px; padding-bottom: 12px',   responsive: true },
+        { class: '.py16',  output: 'padding-top: 16px; padding-bottom: 16px',   responsive: true },
+        { class: '.py24',  output: 'padding-top: 24px; padding-bottom: 24px',   responsive: true },
+        { class: '.py32',  output: 'padding-top: 32px; padding-bottom: 32px',   responsive: true },
+        { class: '.py48',  output: 'padding-top: 48px; padding-bottom: 48px',   responsive: true },
+        { class: '.py64',  output: 'padding-top: 64px; padding-bottom: 64px',   responsive: true },
+        { class: '.py96',  output: 'padding-top: 96px; padding-bottom: 96px',   responsive: true },
+        { class: '.py128', output: 'padding-top: 128px; padding-bottom: 128px', responsive: true },
+    ];
+</script>
+
+## Padding
+
+Immutable padding utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+
+Padding should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.
+
+### Padding class abbreviations
+
+<ClassTable classes={abbreviations} headings={{ class: 'Abbreviation', description: 'Property' }} />
+
+### Padding classes
+
+```html
+<div class="pt4 pr64 pb64 pl64">
+    …
+</div>
+```
+
+<Example>
+    <div class="pt4 pr64 pb64 pl64 bg-black-200 p12 ba bc-black-225">
+        Example div with different paddings applied
+    </div>
+</Example>
+
+<ClassTable {classes} expandable />
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/position.md b/packages/stacks-docs-next/src/docs/public/system/base/position.md
index 073bfd9853..f3f31883e3 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/position.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/position.md
@@ -1,122 +1,73 @@
 ---
 title: Positioning
-description: Atomic positioning classes allow you to quickly change an element’s position.
-updated: 2025-12-05
+description: Atomic positioning classes allow you to quickly change an element's position.
 ---
 
 <script lang="ts">
-const positionClasses = [
-  {
-    "class": "ps-absolute",
-    "output": "position: absolute;",
-    "define": "Absolutely positions an element. Typically is used in conjunction with <code class='stacks-code'>top</code>, <code class='stacks-code'>right</code>, <code class='stacks-code'>bottom</code>, and <code class='stacks-code'>left</code> properties.<br><em>Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don't have a <code class='stacks-code'>z-index</code> assigned.</em>",
-    "responsive": true
-  },
-  {
-    "class": "ps-fixed",
-    "output": "position: fixed;",
-    "define": "Fixes an element within the viewport. Typically is used in conjunction with <code class='stacks-code'>top</code>, <code class='stacks-code'>right</code>, <code class='stacks-code'>bottom</code>, and <code class='stacks-code'>left</code> properties.<br><em>Note: Fixing an element's position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.</em>",
-    "responsive": true
-  },
-  {
-    "class": "ps-relative",
-    "output": "position: relative;",
-    "define": "Relatively positions an element in relation to elements around it. The <code class='stacks-code'>top</code> and <code class='stacks-code'>bottom</code> properties specify the vertical offset from its normal position. In the same way the <code class='stacks-code'>left</code> and <code class='stacks-code'>right</code> properties specify the horizontal offset.",
-    "responsive": true
-  },
-  {
-    "class": "ps-static",
-    "output": "position: static;",
-    "define": "An element is positioned according to the document's flow. The <code class='stacks-code'>top</code>, <code class='stacks-code'>right</code>, <code class='stacks-code'>bottom</code>, <code class='stacks-code'>left</code>, and <code class='stacks-code'>z-index</code> properties have <em>no effect</em>.<br><strong>This is the default value.</strong>",
-    "responsive": true
-  },
-  {
-    "class": "ps-sticky",
-    "output": "position: sticky;",
-    "define": "An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.<br><strong class='mb4'>Notes:</strong><br/>Sticky elements, by design, will not work inside an element with <code class='stacks-code'>overflow:hidden;</code> or <code class='stacks-code'>overflow:auto;</code> values.",
-    "responsive": true
-  },
-  {
-    "class": "ps-unset",
-    "output": "position: unset;",
-    "define": "Removes previously set <code class='stacks-code'>position</code> value, reverting the element back to the initial browser value.",
-    "responsive": true
-  }
-]
-
-const coordinateDefinitions = [
-  {
-    "term": "t",
-    "define": "top"
-  },
-  {
-    "term": "r",
-    "define": "right"
-  },
-  {
-    "term": "b",
-    "define": "bottom"
-  },
-  {
-    "term": "l",
-    "define": "left"
-  },
-  {
-    "term": "i",
-    "define": "inset"
-  },
-  {
-    "term": "tn",
-    "define": "negative top"
-  },
-  {
-    "term": "rn",
-    "define": "negative right"
-  },
-  {
-    "term": "bn",
-    "define": "negative bottom"
-  },
-  {
-    "term": "ln",
-    "define": "negative left"
-  }
-]
-
-const positionValues = "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%".split(", ")
-const positionProperties = "t, r, b, l, i".split(", ")
-const positionPropertiesNegative = "t, r, b, l".split(", ")
-const positionValuesNegative = "1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%".split(", ")
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const positions: ClassTableRow[] = [
+        {
+            class: '.ps-absolute',
+            output: 'position: absolute;',
+            define: 'Absolutely positions an element. Typically is used in conjunction with `top`, `right`, `bottom`, and `left` properties. Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don\'t have a `z-index` assigned.',
+            responsive: true,
+        },
+        {
+            class: '.ps-fixed',
+            output: 'position: fixed;',
+            define: 'Fixes an element within the viewport. Typically is used in conjunction with `top`, `right`, `bottom`, and `left` properties. Note: Fixing an element\'s position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.',
+            responsive: true,
+        },
+        {
+            class: '.ps-relative',
+            output: 'position: relative;',
+            define: 'Relatively positions an element in relation to elements around it. The `top` and `bottom` properties specify the vertical offset from its normal position. In the same way the `left` and `right` properties specify the horizontal offset.',
+            responsive: true,
+        },
+        {
+            class: '.ps-static',
+            output: 'position: static;',
+            define: 'An element is positioned according to the document\'s flow. The `top`, `right`, `bottom`, `left`, and `z-index` properties have no effect. This is the default value.',
+            responsive: true,
+        },
+        {
+            class: '.ps-sticky',
+            output: 'position: sticky;',
+            define: 'An element is positioned according to the document\'s flow, and then offset relative to its flow root and containing block. This creates a new stacking context. Note: Sticky elements, by design, will not work inside an element with `overflow:hidden;` or `overflow:auto;` values.',
+            responsive: true,
+        },
+        {
+            class: '.ps-unset',
+            output: 'position: unset;',
+            define: 'Removes previously set `position` value, reverting the element back to the initial browser value.',
+            responsive: true,
+        },
+    ];
+
+    const coordinateAbbreviations: ClassTableRow[] = [
+        { class: 't',  define: 'top', responsive: true },
+        { class: 'r',  define: 'right', responsive: true },
+        { class: 'b',  define: 'bottom', responsive: true },
+        { class: 'l',  define: 'left', responsive: true },
+        { class: 'i',  define: 'inset', responsive: true },
+        { class: 'tn', define: 'negative top', responsive: true },
+        { class: 'rn', define: 'negative right', responsive: true },
+        { class: 'bn', define: 'negative bottom', responsive: true },
+        { class: 'ln', define: 'negative left', responsive: true },
+    ];
+
+    const positionValues = ['0', '1px', '2px', '4px', '6px', '8px', '12px', '16px', '24px', '32px', '48px', '64px', '96px', '128px', '50%', '100%'];
+    const positionProperties = ['t', 'r', 'b', 'l', 'i'];
+    const positionPropertiesNegative = ['t', 'r', 'b', 'l'];
+    const positionValuesNegative = ['1px', '2px', '4px', '6px', '8px', '12px', '16px', '24px', '32px', '48px', '64px', '96px', '128px', '50%', '100%'];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell3" scope="col">Output</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="/product/develop/conditional-classes#responsive">Responsive?</a></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each positionClasses as atomic}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{atomic.class}</code></th>
-          <td><code class="stacks-code bg-white">{atomic.output}</code></td>
-          <td>{@html atomic.define}</td>
-          <td class="ta-center">
-            {#if atomic.responsive}
-              <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={positions} expandable />
 
 ## Examples
 
@@ -129,14 +80,16 @@ const positionValuesNegative = "1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px,
 <div class="ps-unset">…</div>
 ```
 
-<div class="overflow-y-scroll fs-caption ff-mono hs2" tabindex="0">
-    <div class="d-flex w100 ps-relative">
-        <div class="ps-static p12 bg-black-200 ba bc-black-225 ws1 hs1"><strong>.ps-static</strong></div>
-        <div class="ps-relative p12 bg-black-200 ba bc-black-225 t32 r24 ws1 hs4"><strong>.ps-relative</strong><br/><br/>.t32<br/>r24</div>
-        <div class="ps-absolute p12 bg-black-200 ba bc-black-225 t48 r32 ws1 hs2"><strong>.ps-absolute</strong><br/><br/>.t48<br/>.r32</div>
-        <div class="ps-sticky p12 bg-black-200 ba bc-black-225 t64 ws1 hs2"><strong>.ps-sticky</strong><br/><br/>.t64</div>
+<Example>
+    <div class="overflow-y-scroll fs-caption ff-mono hs2" tabindex="0">
+        <div class="d-flex w100 ps-relative">
+            <div class="ps-static p12 bg-black-200 ba bc-black-225 ws1 hs1"><strong>.ps-static</strong></div>
+            <div class="ps-relative p12 bg-black-200 ba bc-black-225 t32 r24 ws1 hs4"><strong>.ps-relative</strong><br/><br/>.t32<br/>r24</div>
+            <div class="ps-absolute p12 bg-black-200 ba bc-black-225 t48 r32 ws1 hs2"><strong>.ps-absolute</strong><br/><br/>.t48<br/>.r32</div>
+            <div class="ps-sticky p12 bg-black-200 ba bc-black-225 t64 ws1 hs2"><strong>.ps-sticky</strong><br/><br/>.t64</div>
+        </div>
     </div>
-</div>
+</Example>
 
 ## Coordinates
 
@@ -144,28 +97,7 @@ Our spacing units aren't limited to margin and padding; they also apply to top,
 
 ### Coordinate classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Abbreviation</th>
-        <th scope="col">Definition</th>
-        <th class="s-table--cell2 ta-center" scope="col">Responsive?</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each coordinateDefinitions as space}
-        <tr>
-          <th scope="row">{space.term}</th>
-          <td>{space.define}</td>
-          <td class="ta-center">
-            <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable classes={coordinateAbbreviations} headings={{ class: 'Abbreviation', define: 'Definition' }} />
 
 ### Coordinate examples
 
@@ -177,86 +109,79 @@ Our spacing units aren't limited to margin and padding; they also apply to top,
 <div class="ps-absolute i64">…</div>
 ```
 
-<div class="ps-relative hs2">
-    <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t12 l12 z-selected">
-        .t12 .l12
-    </div>
-
-    <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t48 r24 z-selected">
-        .t48 .r24
-    </div>
-
-    <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t50 l50 z-selected">
-        .t50 .l50
-    </div>
-
-    <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono b48 l48 z-selected">
-        .b48 .l48
-    </div>
-
-    <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono rn8 bn8 z-selected">
-        .rn8 .bn8
-    </div>
-    <div class="ps-absolute bg-black-200 p12 ba bc-black-225 ff-mono i64 z-base">
-        .i64
+<Example>
+    <div class="ps-relative hs2">
+        <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t12 l12 z-selected">
+            .t12 .l12
+        </div>
+        <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t48 r24 z-selected">
+            .t48 .r24
+        </div>
+        <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono t50 l50 z-selected">
+            .t50 .l50
+        </div>
+        <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono b48 l48 z-selected">
+            .b48 .l48
+        </div>
+        <div class="ps-absolute w20 bg-black-200 p12 ba bc-black-225 ff-mono rn8 bn8 z-selected">
+            .rn8 .bn8
+        </div>
+        <div class="ps-absolute bg-black-200 p12 ba bc-black-225 ff-mono i64 z-base">
+            .i64
+        </div>
     </div>
-
-</div>
+</Example>
 
 ## Positive coordinates
 
-<div class="overflow-x-auto mb48 mt24" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Prefix</th>
-        {#each positionValues as value}
-          <th scope="col" class="ta-center ff-mono">{value}</th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each positionProperties as className}
-        <tr>
-          <th scope="row">{className}</th>
-          {#each positionValues as value}
-            {#if className === "i"}
-              {#if value === "50%" || value === "100%"}
-                <td>-</td>
-              {:else}
-                <td><code>.{className}{value.replace("px", "")}</code></td>
-              {/if}
-            {:else}
-              <td><code>.{className}{value.replace("px", "").replace("%", "")}</code></td>
-            {/if}
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
+<div class="overflow-x-auto mb32" tabindex="0" role="region" aria-label="Positive coordinate classes table">
+    <table class="s-table s-table__bx-simple fs-caption">
+        <thead>
+            <tr>
+                <th scope="col">Prefix</th>
+                {#each positionValues as value}
+                    <th scope="col" class="ta-center ff-mono">{value}</th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each positionProperties as prefix}
+                <tr>
+                    <th scope="row">{prefix}</th>
+                    {#each positionValues as value}
+                        {#if prefix === 'i' && (value === '50%' || value === '100%')}
+                            <td>-</td>
+                        {:else}
+                            <td><code>.{prefix}{value.replace('px', '').replace('%', '')}</code></td>
+                        {/if}
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
 </div>
 
 ## Negative coordinates
 
-<div class="overflow-x-auto mb48 mt24" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Prefix</th>
-        {#each positionValuesNegative as value}
-          <th scope="col" class="ta-center ff-mono">-{value}</th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each positionPropertiesNegative as className}
-        <tr>
-          <th scope="row">{className}n</th>
-          {#each positionValuesNegative as value}
-            <td><code>.{className}n{value.replace("px", "").replace("%", "")}</code></td>
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
+<div class="overflow-x-auto mb32" tabindex="0" role="region" aria-label="Negative coordinate classes table">
+    <table class="s-table s-table__bx-simple fs-caption">
+        <thead>
+            <tr>
+                <th scope="col">Prefix</th>
+                {#each positionValuesNegative as value}
+                    <th scope="col" class="ta-center ff-mono">-{value}</th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each positionPropertiesNegative as prefix}
+                <tr>
+                    <th scope="row">{prefix}n</th>
+                    {#each positionValuesNegative as value}
+                        <td><code>.{prefix}n{value.replace('px', '').replace('%', '')}</code></td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
 </div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/transitions.md b/packages/stacks-docs-next/src/docs/public/system/base/transitions.md
index 0970c91680..08564d16a8 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/transitions.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/transitions.md
@@ -1,57 +1,24 @@
 ---
 title: Transitions
 description: Atomic transition classes allow you to quickly apply transitions properties to an element. You can modify an element's transition duration, property, or delay.
-updated: 2025-12-17
 ---
 
 <script lang="ts">
-  const transitionClasses = [
-    {
-      "class": "t",
-      "output": "transition-duration: .1s; transition-property: all; transition-timing-function: ease-in; transition-delay: 0s;",
-      "define": "Apply a default transition style to an element."
-    },
-    {
-      "class": "t-slow",
-      "output": "transition-duration: .25s;",
-      "define": "Slow down the default transition to 0.25s."
-    },
-    {
-      "class": "t-fast",
-      "output": "transition-duration: .05s;",
-      "define": "Speed up the default transition to 0.05s."
-    },
-    {
-      "class": "t-unset",
-      "output": "transition-property: none;",
-      "define": "Remove transition properties from an element."
-    },
-    {
-      "class": "t-bg",
-      "output": "transition-property: background-color;",
-      "define": "Transition the background property of an element."
-    },
-    {
-      "class": "t-opacity",
-      "output": "transition-property: opacity;",
-      "define": "Transition the opacity property of an element."
-    },
-    {
-      "class": "t-shadow",
-      "output": "transition-property: box-shadow;",
-      "define": "Transition the box shadow property of an element."
-    },
-    {
-      "class": "t-delay",
-      "output": "transition-delay: .25s;",
-      "define": "Apply a transition delay to an element."
-    },
-    {
-      "class": "t-delay-unset",
-      "output": "transition-delay: 0s;",
-      "define": "Remove a transition delay from an element."
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.t',            output: 'transition-duration: .1s; transition-property: all; transition-timing-function: ease-in; transition-delay: 0s;', define: 'Apply a default transition style to an element.' },
+        { class: '.t-slow',       output: 'transition-duration: .25s;',          define: 'Slow down the default transition to 0.25s.' },
+        { class: '.t-fast',       output: 'transition-duration: .05s;',          define: 'Speed up the default transition to 0.05s.' },
+        { class: '.t-unset',      output: 'transition-property: none;',          define: 'Remove transition properties from an element.' },
+        { class: '.t-bg',         output: 'transition-property: background-color;', define: 'Transition the background property of an element.' },
+        { class: '.t-opacity',    output: 'transition-property: opacity;',       define: 'Transition the opacity property of an element.' },
+        { class: '.t-shadow',     output: 'transition-property: box-shadow;',    define: 'Transition the box shadow property of an element.' },
+        { class: '.t-delay',      output: 'transition-delay: .25s;',             define: 'Apply a transition delay to an element.' },
+        { class: '.t-delay-unset', output: 'transition-delay: 0s;',              define: 'Remove a transition delay from an element.' },
+    ];
 </script>
 
 You can trigger CSS transitions directly with pseudo classes like `:hover` which activate on mouse over, `:focus` which activates when user tabs onto or clicks into an input element, or `active` when a user clicks on an element.
@@ -60,26 +27,7 @@ You can also trigger a CSS transition using JavaScript by adding or removing a c
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th class="s-table--cell2" scope="col">Class</th>
-        <th class="s-table--cell6" scope="col">Output</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each transitionClasses as atomic}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{atomic.class}</code></th>
-          <td><code class="stacks-code bg-white">{atomic.output}</code></td>
-          <td><p class="mb0">{atomic.define}</p></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Base transition
 
@@ -89,13 +37,13 @@ The base transition applies a default duration timing function to an element.
 <div class="t">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t h:bg-orange-500">
-      .t
+<Example>
+    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t h:bg-orange-500">
+            .t
+        </div>
     </div>
-  </div>
-</div>
+</Example>
 
 ## Speed
 
@@ -106,16 +54,16 @@ Change an elements default transition duration.
 <div class="t-fast">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-slow h:bg-orange-500">
-      .t-slow
+<Example>
+    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-slow h:bg-orange-500">
+            .t-slow
+        </div>
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-fast h:bg-orange-500">
+            .t-fast
+        </div>
     </div>
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-fast h:bg-orange-500">
-      .t-fast
-    </div>
-  </div>
-</div>
+</Example>
 
 ## Property
 
@@ -128,22 +76,22 @@ Target a specific CSS property for transition, or remove the default transition.
 <div class="t-shadow">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-unset h:bg-orange-500">
-      .t-unset
-    </div>
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-bg h:bg-orange-500">
-      .t-bg
-    </div>
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-opacity h:o50">
-      .t-opacity
+<Example>
+    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-unset h:bg-orange-500">
+            .t-unset
+        </div>
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-bg h:bg-orange-500">
+            .t-bg
+        </div>
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-opacity h:o50">
+            .t-opacity
+        </div>
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-shadow h:bs-lg">
+            .t-shadow
+        </div>
     </div>
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-shadow h:bs-lg">
-      .t-shadow
-    </div>
-  </div>
-</div>
+</Example>
 
 ## Delay
 
@@ -154,13 +102,13 @@ Refers to how long you want to wait before starting the duration.
 <div class="t-delay-unset">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-delay h:bg-orange-500">
-      .t-delay
-    </div>
-    <div class="flex--item bg-black-200 ba bc-black-225 bar-md p32 t t-delay-unset h:bg-orange-500">
-      .t-delay-unset
+<Example>
+    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-delay h:bg-orange-500">
+            .t-delay
+        </div>
+        <div class="flex--item bg-black-200 ba bc-black-225 p32 t t-delay-unset h:bg-orange-500">
+            .t-delay-unset
+        </div>
     </div>
-  </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/truncation.md b/packages/stacks-docs-next/src/docs/public/system/base/truncation.md
index 0e9b1e1e1e..735388b102 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/truncation.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/truncation.md
@@ -1,49 +1,25 @@
 ---
 title: Truncation
 description: Stacks provides utility classes for various types of truncation.
-updated: 2025-12-17
 ---
 
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.truncate',           parent: 'N/A', description: 'Text is cropped to the width of its parent with an ellipsis.' },
+        { class: '.v-truncate[x]',      parent: 'N/A', description: 'Text is cropped to the length of [x] number of lines with an ellipsis.' },
+        { class: '.v-truncate-fade',    parent: 'N/A', description: 'Text is cropped by visually fading it out.' },
+        { class: '.v-truncate-fade__sm', parent: '.v-truncate-fade', description: 'Reduces the height of the visible text.' },
+        { class: '.v-truncate-fade__lg', parent: '.v-truncate-fade', description: 'Increases the amount of visible text.' },
+    ];
+</script>
+
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn5 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col" class="s-table--cell3">Class</th>
-        <th scope="col" class="s-table--cell3">Applies to</th>
-        <th scope="col">Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code class="stacks-code">.truncate</code></td>
-        <td></td>
-        <td>Text is cropped to the width of its parent with an ellipsis.</td>
-      </tr>
-      <tr>
-        <td><code class="stacks-code">.v-truncate[x]</code></td>
-        <td></td>
-        <td>Text is cropped to the length of [x] number of lines with an ellipsis.</td>
-      </tr>
-      <tr>
-        <td><code class="stacks-code">.v-truncate-fade</code></td>
-        <td></td>
-        <td>Text is cropped by visually fading it out.</td>
-      </tr>
-      <tr>
-        <td><code class="stacks-code">.v-truncate-fade__sm</code></td>
-        <td><code class="stacks-code">.v-truncate-fade</code></td>
-        <td>Reduces the height of the visible text</td>
-      </tr>
-      <tr>
-        <td><code class="stacks-code">.v-truncate-fade__lg</code></td>
-        <td><code class="stacks-code">.v-truncate-fade</code></td>
-        <td>Increases the amount of visible text.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -60,31 +36,26 @@ CSS offers truncation on arbitrarily-long strings. This can help sanitize user-i
 <p class="v-truncate5">…</p>
 ```
 
-<div class="stacks-preview--example">
-  <div class="truncate wmx3 mb16">
-    Regardless of length, this text will be truncated horizontally. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate1 wmx3 mb16">
-    Regardless of length, this text will be this text will be truncated to 1 line, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate2 wmx3 mb16">
-    Regardless of length, this text will be this text will be truncated to 2 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate3 wmx3 mb16">
-    Regardless of length, this text will be this text will be truncated to 3 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate4 wmx3 mb16">
-    Regardless of length, this text will be this text will be truncated to 4 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate5 wmx3">
-    Regardless of length, this text will be this text will be truncated to 5 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-</div>
+<Example>
+    <div class="truncate wmx3 mb16">
+        Regardless of length, this text will be truncated horizontally. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate1 wmx3 mb16">
+        Regardless of length, this text will be truncated to 1 line, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate2 wmx3 mb16">
+        Regardless of length, this text will be truncated to 2 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate3 wmx3 mb16">
+        Regardless of length, this text will be truncated to 3 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate4 wmx3 mb16">
+        Regardless of length, this text will be truncated to 4 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate5 wmx3">
+        Regardless of length, this text will be truncated to 5 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</Example>
 
 ### Fade
 
@@ -96,16 +67,14 @@ Alternatively, you can use a vertical fade that will set `max-height` and sets a
 <p class="v-truncate-fade v-truncate-fade__lg">…</p>
 ```
 
-<div class="stacks-preview--example">
-  <div class="v-truncate-fade v-truncate-fade__sm wmx3 mb16">
-    Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate-fade wmx3 mb16">
-    Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-
-  <div class="v-truncate-fade v-truncate-fade__lg wmx3">
-    Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </div>
-</div>
+<Example>
+    <div class="v-truncate-fade v-truncate-fade__sm wmx3 mb16">
+        Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate-fade wmx3 mb16">
+        Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="v-truncate-fade v-truncate-fade__lg wmx3">
+        Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md b/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md
index 9e7737f2d3..965c129355 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md
@@ -1,66 +1,29 @@
 ---
 title: Vertical alignment
 description: Atomic vertical alignment classes allow you to change an element's vertical alignment quickly.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const verticalAlignmentClasses = [
-    {
-      class: 'va-baseline',
-      output: 'vertical-align: baseline;'
-    },
-    {
-      class: 'va-bottom',
-      output: 'vertical-align: bottom;'
-    },
-    {
-      class: 'va-middle',
-      output: 'vertical-align: middle;'
-    },
-    {
-      class: 'va-sub',
-      output: 'vertical-align: sub;'
-    },
-    {
-      class: 'va-super',
-      output: 'vertical-align: super;'
-    },
-    {
-      class: 'va-text-bottom',
-      output: 'vertical-align: text-bottom;'
-    },
-    {
-      class: 'va-text-top',
-      output: 'vertical-align: text-top;'
-    },
-    {
-      class: 'va-top',
-      output: 'vertical-align: top;'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.va-baseline',    output: 'vertical-align: baseline;' },
+        { class: '.va-bottom',      output: 'vertical-align: bottom;' },
+        { class: '.va-middle',      output: 'vertical-align: middle;' },
+        { class: '.va-sub',         output: 'vertical-align: sub;' },
+        { class: '.va-super',       output: 'vertical-align: super;' },
+        { class: '.va-text-bottom', output: 'vertical-align: text-bottom;' },
+        { class: '.va-text-top',    output: 'vertical-align: text-top;' },
+        { class: '.va-top',         output: 'vertical-align: top;' },
+        { class: '.va-unset',       output: 'vertical-align: unset;' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb48" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each verticalAlignmentClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -76,15 +39,21 @@ updated: 2025-12-16
 <div class="va-unset">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono overflow-x-scroll" tabindex="0">
-  <div style="width: 860px;">
-    <div class="va-baseline my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-baseline</div>
-    <div class="va-bottom my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-bottom</div>
-    <div class="va-middle my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-middle</div>
-    <div class="va-sub my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-sub</div>
-    <div class="va-super my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-super</div>
-    <div class="va-text-bottom my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-text-bottom</div>
-    <div class="va-text-top my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-text-top</div>
-    <div class="va-top my4 bg-black-200 p12 ba bc-black-225 d-inline">.va-top</div>
-  </div>
-</div>
+<Example>
+    <div
+        class="overflow-x-scroll py8 ws-nowrap fs-caption ff-mono"
+        tabindex="0"
+        role="region"
+        aria-label="Vertical alignment example"
+    >
+        <span class="va-baseline my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-baseline</span>
+        <span class="va-bottom my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-bottom</span>
+        <span class="va-middle my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-middle</span>
+        <span class="va-sub my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-sub</span>
+        <span class="va-super my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-super</span>
+        <span class="va-text-bottom my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-text-bottom</span>
+        <span class="va-text-top my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-text-top</span>
+        <span class="va-top my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-top</span>
+        <span class="va-unset my4 bg-black-200 p12 ba bc-black-225 d-inline-block">.va-unset</span>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/visibility.md b/packages/stacks-docs-next/src/docs/public/system/base/visibility.md
index 3c49100b66..b6bef1fe79 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/visibility.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/visibility.md
@@ -1,46 +1,23 @@
 ---
 title: Visibility
 description: Atomic visibility classes allow you to quickly change an element's visibility.
-updated: 2025-12-16
 ---
 
 <script lang="ts">
-  const visibilityClasses = [
-    {
-      class: 'v-visible',
-      definition: 'The element visible'
-    },
-    {
-      class: 'v-visible-sr',
-      definition: 'The element is visible only to screen readers'
-    },
-    {
-      class: 'v-hidden',
-      definition: 'The element is invisible, but still affects layout as normal'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.v-visible',    define: 'The element visible' },
+        { class: '.v-visible-sr', define: 'The element is visible only to screen readers' },
+        { class: '.v-hidden',     define: 'The element is invisible, but still affects layout as normal' },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Definition</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each visibilityClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td>{item.definition}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -50,16 +27,10 @@ updated: 2025-12-16
 <div class="v-hidden">…</div>
 ```
 
-<div class="stacks-preview--example fs-caption ff-mono">
-  <div class="d-flex g8 fw-wrap">
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 v-visible">
-      .v-visible
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 v-visible-sr">
-      .v-visible-sr
-    </div>
-    <div class="flex--item bg-black-200 p12 ba bc-black-225 v-hidden">
-      .v-hidden
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        <div class="flex--item bg-black-200 p12 ba bc-black-225 v-visible">.v-visible</div>
+        <div class="flex--item bg-black-200 p12 ba bc-black-225 v-visible-sr">.v-visible-sr</div>
+        <div class="flex--item bg-black-200 p12 ba bc-black-225 v-hidden">.v-hidden</div>
     </div>
-  </div>
-</div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/width.md b/packages/stacks-docs-next/src/docs/public/system/base/width.md
new file mode 100644
index 0000000000..827eded2f1
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/width.md
@@ -0,0 +1,376 @@
+---
+title: Width
+description: Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. Most width classes are based on a 16px base font size and will scale based on the browser's font size.
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const pixelClasses: ClassTableRow[] = [
+        { class: '.w0',   output: 'width: 0px;',   define: '0rem' },
+        { class: '.w1',   output: 'width: 1px;',   define: '0.063rem' },
+        { class: '.w2',   output: 'width: 2px;',   define: '0.125rem' },
+        { class: '.w4',   output: 'width: 4px;',   define: '0.25rem' },
+        { class: '.w6',   output: 'width: 6px;',   define: '0.375rem' },
+        { class: '.w8',   output: 'width: 8px;',   define: '0.5rem' },
+        { class: '.w12',  output: 'width: 12px;',  define: '0.75rem' },
+        { class: '.w16',  output: 'width: 16px;',  define: '1rem' },
+        { class: '.w24',  output: 'width: 24px;',  define: '1.5rem' },
+        { class: '.w32',  output: 'width: 32px;',  define: '2rem' },
+        { class: '.w48',  output: 'width: 48px;',  define: '3rem' },
+        { class: '.w64',  output: 'width: 64px;',  define: '4rem' },
+        { class: '.w96',  output: 'width: 96px;',  define: '6rem' },
+        { class: '.w128', output: 'width: 128px;', define: '8rem' },
+    ];
+
+    const sizingUnitsClasses: ClassTableRow[] = [
+        { class: '.ws1',  output: 'width: 128px;',  define: '8rem' },
+        { class: '.ws2',  output: 'width: 256px;',  define: '16rem' },
+        { class: '.ws3',  output: 'width: 344px;',  define: '21.5rem' },
+        { class: '.ws4',  output: 'width: 448px;',  define: '28rem' },
+        { class: '.ws5',  output: 'width: 512px;',  define: '32rem' },
+        { class: '.ws6',  output: 'width: 640px;',  define: '40rem' },
+        { class: '.ws7',  output: 'width: 768px;',  define: '48rem' },
+        { class: '.ws8',  output: 'width: 848px;',  define: '53rem' },
+        { class: '.ws9',  output: 'width: 960px;',  define: '60rem' },
+        { class: '.ws10', output: 'width: 1024px;', define: '64rem' },
+        { class: '.ws11', output: 'width: 1120px;', define: '70rem' },
+        { class: '.ws12', output: 'width: 1280px;', define: '80rem' },
+    ];
+
+    const fluidClasses: ClassTableRow[] = [
+        { class: '.w10',     output: 'width: 10%;'   },
+        { class: '.w20',     output: 'width: 20%;'   },
+        { class: '.w25',     output: 'width: 25%;',  responsive: true },
+        { class: '.w30',     output: 'width: 30%;'   },
+        { class: '.w33',     output: 'width: 33%;',  responsive: true },
+        { class: '.w40',     output: 'width: 40%;'   },
+        { class: '.w50',     output: 'width: 50%;',  responsive: true },
+        { class: '.w60',     output: 'width: 60%;'   },
+        { class: '.w66',     output: 'width: 66%;'   },
+        { class: '.w70',     output: 'width: 70%;'   },
+        { class: '.w75',     output: 'width: 75%;',  responsive: true },
+        { class: '.w80',     output: 'width: 80%;'   },
+        { class: '.w90',     output: 'width: 90%;'   },
+        { class: '.w100',    output: 'width: 100%;', responsive: true },
+        { class: '.w-screen', output: 'width: 100vw;', responsive: true },
+        { class: '.w-auto',  output: 'width: auto;', responsive: true },
+    ];
+
+    const minWidthClasses: ClassTableRow[] = [
+        { class: '.wmn0',       output: 'min-width: 0;',        responsive: true },
+        { class: '.wmn1',       output: 'min-width: 128px;',    define: '8rem' },
+        { class: '.wmn2',       output: 'min-width: 256px;',    define: '16rem' },
+        { class: '.wmn3',       output: 'min-width: 344px;',    define: '21.5rem' },
+        { class: '.wmn4',       output: 'min-width: 448px;',    define: '28rem' },
+        { class: '.wmn5',       output: 'min-width: 512px;',    define: '32rem' },
+        { class: '.wmn6',       output: 'min-width: 640px;',    define: '40rem' },
+        { class: '.wmn7',       output: 'min-width: 768px;',    define: '48rem' },
+        { class: '.wmn8',       output: 'min-width: 848px;',    define: '53rem' },
+        { class: '.wmn9',       output: 'min-width: 960px;',    define: '60rem' },
+        { class: '.wmn10',      output: 'min-width: 1024px;',   define: '64rem' },
+        { class: '.wmn11',      output: 'min-width: 1120px;',   define: '70rem' },
+        { class: '.wmn12',      output: 'min-width: 1280px;',   define: '80rem' },
+        { class: '.wmn25',      output: 'min-width: 25%;'  },
+        { class: '.wmn50',      output: 'min-width: 50%;'  },
+        { class: '.wmn75',      output: 'min-width: 75%;'  },
+        { class: '.wmn100',     output: 'min-width: 100%;', responsive: true },
+        { class: '.wmn-screen', output: 'min-width: 100vw;', responsive: true },
+        { class: '.wmn-initial', output: 'min-width: initial;', responsive: true },
+    ];
+
+    const maxWidthClasses: ClassTableRow[] = [
+        { class: '.wmx1',       output: 'max-width: 128px;',  define: '8rem' },
+        { class: '.wmx2',       output: 'max-width: 256px;',  define: '16rem' },
+        { class: '.wmx3',       output: 'max-width: 344px;',  define: '21.5rem' },
+        { class: '.wmx4',       output: 'max-width: 448px;',  define: '28rem' },
+        { class: '.wmx5',       output: 'max-width: 512px;',  define: '32rem' },
+        { class: '.wmx6',       output: 'max-width: 640px;',  define: '40rem' },
+        { class: '.wmx7',       output: 'max-width: 768px;',  define: '48rem' },
+        { class: '.wmx8',       output: 'max-width: 848px;',  define: '53rem' },
+        { class: '.wmx9',       output: 'max-width: 960px;',  define: '60rem' },
+        { class: '.wmx10',      output: 'max-width: 1024px;', define: '64rem' },
+        { class: '.wmx11',      output: 'max-width: 1120px;', define: '70rem' },
+        { class: '.wmx12',      output: 'max-width: 1280px;', define: '80rem' },
+        { class: '.wmx25',      output: 'max-width: 25%;'  },
+        { class: '.wmx50',      output: 'max-width: 50%;'  },
+        { class: '.wmx75',      output: 'max-width: 75%;'  },
+        { class: '.wmx100',     output: 'max-width: 100%;', responsive: true },
+        { class: '.wmx-screen', output: 'max-width: 100vw;', responsive: true },
+        { class: '.wmx-initial', output: 'max-width: initial;', responsive: true },
+    ];
+</script>
+
+## Pixel width
+
+Pixel width classes allow you to set the width of an element to a specific pixel value.
+
+### Pixel width classes
+
+<ClassTable classes={pixelClasses} headings={{ define: 'rem value' }} expandable />
+
+### Pixel width examples
+
+```html
+<div class="w0">…</div>
+<div class="w1">…</div>
+<div class="w2">…</div>
+<div class="w4">…</div>
+<div class="w6">…</div>
+<div class="w8">…</div>
+<div class="w12">…</div>
+<div class="w16">…</div>
+<div class="w24">…</div>
+<div class="w32">…</div>
+<div class="w48">…</div>
+<div class="w64">…</div>
+<div class="w96">…</div>
+<div class="w128">…</div>
+```
+
+<Example>
+    <div class="d-flex g8 fd-column fs-caption ff-mono">
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w0</div>
+            <div class="w0 h24"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w1</div>
+            <div class="w1 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w2</div>
+            <div class="w2 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w4</div>
+            <div class="w4 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w6</div>
+            <div class="w6 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w8</div>
+            <div class="w8 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w12</div>
+            <div class="w12 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w16</div>
+            <div class="w16 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w24</div>
+            <div class="w24 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w32</div>
+            <div class="w32 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w48</div>
+            <div class="w48 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w64</div>
+            <div class="w64 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w96</div>
+            <div class="w96 h24 docs-box p0"></div>
+        </div>
+        <div class="d-grid grid__12 g4">
+            <div class="grid--col1">.w128</div>
+            <div class="w128 h24 docs-box p0"></div>
+        </div>
+    </div>
+</Example>
+
+## Sizing units width
+
+Sizing units width classes allow you to set the width of an element according to a predefined set of 12 common values in used in Stacks.
+
+### Sizing units width classes
+
+<ClassTable classes={sizingUnitsClasses} headings={{ define: 'rem value' }} />
+
+### Sizing units width examples
+
+```html
+<div class="ws1">…</div>
+<div class="ws2">…</div>
+<div class="ws3">…</div>
+<div class="ws4">…</div>
+<div class="ws5">…</div>
+<div class="ws6">…</div>
+<div class="ws7">…</div>
+<div class="ws8">…</div>
+<div class="ws9">…</div>
+<div class="ws10">…</div>
+<div class="ws11">…</div>
+<div class="ws12">…</div>
+```
+
+<Example>
+    <div class="d-flex g4 fd-column fs-caption ff-mono overflow-x-auto">
+        <div class="docs-box p0 ws1 ai-center d-flex h48">
+            <div>.ws1</div>
+        </div>
+        <div class="docs-box p0 ws2 ai-center d-flex h48">
+            <div>.ws2</div>
+        </div>
+        <div class="docs-box p0 ws3 ai-center d-flex h48">
+            <div>.ws3</div>
+        </div>
+        <div class="docs-box p0 ws4 ai-center d-flex h48">
+            <div>.ws4</div>
+        </div>
+        <div class="docs-box p0 ws5 ai-center d-flex h48">
+            <div>.ws5</div>
+        </div>
+        <div class="docs-box p0 ws6 ai-center d-flex h48">
+            <div>.ws6</div>
+        </div>
+        <div class="docs-box p0 ws7 ai-center d-flex h48">
+            <div>.ws7</div>
+        </div>
+        <div class="docs-box p0 ws8 ai-center d-flex h48">
+            <div>.ws8</div>
+        </div>
+        <div class="docs-box p0 ws9 ai-center d-flex h48">
+            <div>.ws9</div>
+        </div>
+        <div class="docs-box p0 ws10 ai-center d-flex h48">
+            <div>.ws10</div>
+        </div>
+        <div class="docs-box p0 ws11 ai-center d-flex h48">
+            <div>.ws11</div>
+        </div>
+        <div class="docs-box p0 ws12 ai-center d-flex h48">
+            <div>.ws12</div>
+        </div>
+    </div>
+</Example>
+
+## Fluid width
+
+Fluid width classes allow you to set the width of an element to a percentage of the parent element's width or to the full width of the viewport.
+
+### Fluid width classes
+
+<ClassTable classes={fluidClasses} />
+
+### Fluid width examples
+
+```html
+<div class="w10">…</div>
+<div class="w20">…</div>
+<div class="w25">…</div>
+<div class="w30">…</div>
+<div class="w33">…</div>
+<div class="w40">…</div>
+<div class="w50">…</div>
+<div class="w60">…</div>
+<div class="w66">…</div>
+<div class="w70">…</div>
+<div class="w75">…</div>
+<div class="w80">…</div>
+<div class="w90">…</div>
+<div class="w100">…</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g4 fs-caption ff-mono">
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w10 ai-center py4">
+                <div>.w10</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w20 ai-center py4">
+                <div>.w20</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w25 ai-center py4">
+                <div>.w25</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w30 ai-center py4">
+                <div>.w30</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w33 ai-center py4">
+                <div>.w33</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w40 ai-center py4">
+                <div>.w40</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w50 ai-center py4">
+                <div>.w50</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w60 ai-center py4">
+                <div>.w60</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w66 ai-center py4">
+                <div>.w66</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w70 ai-center py4">
+                <div>.w70</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w75 ai-center py4">
+                <div>.w75</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w80 ai-center py4">
+                <div>.w80</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w90 ai-center py4">
+                <div>.w90</div>
+            </div>
+        </div>
+        <div class="docs-box p0 bg-black-100">
+            <div class="docs-box w100 ai-center py4">
+                <div>.w100</div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Min width
+
+Min width classes allow you to set the minimum width of an element.
+
+### Min width classes
+
+<ClassTable classes={minWidthClasses} headings={{ define: 'rem value' }} expandable />
+
+## Max width
+
+Max width classes allow you to set the maximum width of an element.
+
+### Max width classes
+
+<ClassTable classes={maxWidthClasses} headings={{ define: 'rem value' }} expandable />
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/z-index.md b/packages/stacks-docs-next/src/docs/public/system/base/z-index.md
index 916ece05dd..9aeb424851 100644
--- a/packages/stacks-docs-next/src/docs/public/system/base/z-index.md
+++ b/packages/stacks-docs-next/src/docs/public/system/base/z-index.md
@@ -1,82 +1,32 @@
 ---
 title: Z-Index
-description: Atomic z-index classes allow you to change an element’s z-index quickly.
-updated: 2025-12-16
+description: Atomic z-index classes allow you to change an element's z-index quickly.
 ---
 
 <script lang="ts">
-  const zIndexClasses = [
-    {
-      class: 'z-hide',
-      output: 'z-index: -1;'
-    },
-    {
-      class: 'z-base',
-      output: 'z-index: 0;'
-    },
-    {
-      class: 'z-selected',
-      output: 'z-index: 25;'
-    },
-    {
-      class: 'z-active',
-      output: 'z-index: 50;'
-    },
-    {
-      class: 'z-dropdown',
-      output: 'z-index: 1000;'
-    },
-    {
-      class: 'z-popover',
-      output: 'z-index: 2000;'
-    },
-    {
-      class: 'z-tooltip',
-      output: 'z-index: 3000;'
-    },
-    {
-      class: 'z-banner',
-      output: 'z-index: 4000;'
-    },
-    {
-      class: 'z-nav',
-      output: 'z-index: 5000;'
-    },
-    {
-      class: 'z-nav-fixed',
-      output: 'z-index: 5050;'
-    },
-    {
-      class: 'z-modal-bg',
-      output: 'z-index: 8050;'
-    },
-    {
-      class: 'z-modal',
-      output: 'z-index: 9000;'
-    }
-  ];
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.z-hide',      output: 'z-index: -1;'    },
+        { class: '.z-base',      output: 'z-index: 0;'     },
+        { class: '.z-selected',  output: 'z-index: 25;'    },
+        { class: '.z-active',    output: 'z-index: 50;'    },
+        { class: '.z-dropdown',  output: 'z-index: 1000;'  },
+        { class: '.z-popover',   output: 'z-index: 2000;'  },
+        { class: '.z-tooltip',   output: 'z-index: 3000;'  },
+        { class: '.z-banner',    output: 'z-index: 4000;'  },
+        { class: '.z-nav',       output: 'z-index: 5000;'  },
+        { class: '.z-nav-fixed', output: 'z-index: 5050;'  },
+        { class: '.z-modal-bg',  output: 'z-index: 8050;'  },
+        { class: '.z-modal',     output: 'z-index: 9000;'  },
+    ];
 </script>
 
 ## Classes
 
-<div class="overflow-x-auto mb32" tabindex="0">
-  <table class="wmn3 s-table s-table__bx-simple">
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Output</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each zIndexClasses as item}
-        <tr class="fs-caption">
-          <th scope="row"><code class="stacks-code">.{item.class}</code></th>
-          <td><code class="stacks-code bg-white">{item.output}</code></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<ClassTable {classes} />
 
 ## Examples
 
@@ -95,19 +45,21 @@ updated: 2025-12-16
 <div class="z-modal">…</div>
 ```
 
-<div class="stacks-preview--example ps-relative fs-caption ff-mono overflow-x-auto" style="height: 552px;" tabindex="0">
-  <div class="h100" style="width: 520px;">
-    <div class="z-base bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px;">.z-base</div>
-    <div class="z-hide bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 40px; left: 40px;"><span class="ps-absolute d-block" style="bottom: 12px; left: 12px;">.z-hide</span></div>
-    <div class="z-selected bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 80px; left: 80px;">.z-selected</div>
-    <div class="z-active bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 120px; left: 120px;">.z-active</div>
-    <div class="z-dropdown bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 160px; left: 160px;">.z-dropdown</div>
-    <div class="z-popover bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 200px; left: 200px;">.z-popover</div>
-    <div class="z-tooltip bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 240px; left: 240px;">.z-tooltip</div>
-    <div class="z-banner bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 280px; left: 280px;">.z-banner</div>
-    <div class="z-nav bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 320px; left: 320px;">.z-nav</div>
-    <div class="z-nav-fixed bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 360px; left: 360px;">.z-nav-fixed</div>
-    <div class="z-modal-bg bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 400px; left: 400px;">.z-modal-bg</div>
-    <div class="z-modal bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 440px; left: 440px;">.z-modal</div>
-  </div>
-</div>
+<Example>
+    <div class="ps-relative fs-caption ff-mono overflow-x-auto" style="height: 552px;">
+        <div class="h100" style="width: 520px;">
+            <div class="z-base bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px;">.z-base</div>
+            <div class="z-hide bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 40px; left: 40px;"><span class="ps-absolute d-block" style="bottom: 12px; left: 12px;">.z-hide</span></div>
+            <div class="z-selected bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 80px; left: 80px;">.z-selected</div>
+            <div class="z-active bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 120px; left: 120px;">.z-active</div>
+            <div class="z-dropdown bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 160px; left: 160px;">.z-dropdown</div>
+            <div class="z-popover bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 200px; left: 200px;">.z-popover</div>
+            <div class="z-tooltip bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 240px; left: 240px;">.z-tooltip</div>
+            <div class="z-banner bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 280px; left: 280px;">.z-banner</div>
+            <div class="z-nav bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 320px; left: 320px;">.z-nav</div>
+            <div class="z-nav-fixed bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 360px; left: 360px;">.z-nav-fixed</div>
+            <div class="z-modal-bg bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 400px; left: 400px;">.z-modal-bg</div>
+            <div class="z-modal bg-black-200 p12 ba bc-black-225 ps-absolute" style="height: 80px; width: 80px; top: 440px; left: 440px;">.z-modal</div>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md b/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md
new file mode 100644
index 0000000000..8df09d12b7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md
@@ -0,0 +1,193 @@
+---
+title: "Activity indicator"
+description: "Stacks provides a small jewel for indicating new activity."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-activityindicator--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18796"
+---
+
+<script lang="ts">
+    import { ActivityIndicator, Icon } from '@stackoverflow/stacks-svelte';
+    import { IconNotification } from '@stackoverflow/stacks-icons/icons';
+    import { IconShieldXSm } from '@stackoverflow/stacks-icons-legacy/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        {
+            class: '.s-activity-indicator',
+            modifies: 'N/A',
+            description: 'Base activity indicator element with theme-aware coloring',
+        },
+        {
+            class: '.s-activity-indicator__success',
+            modifies: '.s-activity-indicator',
+            description: 'Applies success state styling',
+        },
+        {
+            class: '.s-activity-indicator__warning',
+            modifies: '.s-activity-indicator',
+            description: 'Applies warning state styling',
+        },
+        {
+            class: '.s-activity-indicator__danger',
+            modifies: '.s-activity-indicator',
+            description: 'Applies danger state styling',
+        },
+        {
+            class: '.s-activity-indicator__sm',
+            modifies: '.s-activity-indicator',
+            description: 'Renders the indicator at a smaller size',
+        },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Examples
+
+### Default
+
+By default, our indicator has no positioning attached to it. Depending on your context, you can modify the activity indicator's positioning using any combination of atomic classes. Since our activity indicator has no inherent semantic meaning, make sure to include [visually-hidden, screenreader-only](/system/base/visibility) text with the `v-visible-sr` class.
+
+```html
+<div class="s-activity-indicator">
+    <div class="v-visible-sr">New activity</div>
+</div>
+
+<div class="s-activity-indicator">
+    …
+    <div class="v-visible-sr">…</div>
+</div>
+
+<div class="s-activity-indicator">
+    …
+    <div class="v-visible-sr">…</div>
+</div>
+
+<div class="s-activity-indicator">
+    …
+    <div class="v-visible-sr">…</div>
+</div>
+
+<div class="s-activity-indicator">
+    …
+</div>
+
+<a href="#" class="s-link s-link__muted">
+    <div class="s-avatar bg-red-400 ps-relative">
+        <div class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm">
+            <div class="v-visible-sr">…</div>
+        </div>
+        <div class="s-avatar--letter">…</div>
+        @Svg.ShieldXSm.With("native s-avatar--badge")
+    </div>
+    <span class="pl4">…</span>
+</a>
+
+<div class="ps-relative">
+    @Svg.Notification
+
+    <div class="s-activity-indicator s-activity-indicator__sm ps-absolute tn4 rn4 ba baw2 bc-white box-content">
+        <div class="v-visible-sr">…</div>
+    </div>
+</div>
+
+<div class="ps-relative">
+    @Svg.Notification
+
+    <div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
+        <div class="s-activity-indicator">
+            3 <div class="v-visible-sr">…</div>
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex g24 ai-center fw-wrap">
+        <ActivityIndicator label="New activity" />
+        <ActivityIndicator label="New activity" content={3} />
+        <ActivityIndicator label="New activity" content={12} />
+        <ActivityIndicator label="New activity" content={370} />
+        <ActivityIndicator label="New activity" content="new" />
+
+        <a href="#" class="s-link s-link__muted">
+            <div class="s-avatar bg-red-400 d:bg-red-200 ps-relative">
+                <ActivityIndicator label="New activity" size="sm" class="s-avatar--indicator" />
+                <div class="s-avatar--letter">G</div>
+                <Icon src={IconShieldXSm} class="native s-avatar--badge" />
+            </div>
+            <span class="pl4">Grayson</span>
+        </a>
+
+        <div class="fc-medium ps-relative">
+            <Icon src={IconNotification} />
+            <ActivityIndicator label="New activity" size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
+        </div>
+
+        <div class="fc-medium ps-relative">
+            <Icon src={IconNotification} />
+            <div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
+                <ActivityIndicator label="New activity" content={3} />
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Variations
+
+Stacks also provides alternative styling for success, warning, and danger states.
+
+```html
+<div class="s-activity-indicator s-activity-indicator__success">
+    <div class="v-visible-sr">New activity</div>
+</div>
+<div class="s-activity-indicator s-activity-indicator__warning">
+    <div class="v-visible-sr">New activity</div>
+</div>
+<div class="s-activity-indicator s-activity-indicator__danger">
+    <div class="v-visible-sr">New activity</div>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g24">
+        {#each [
+            { variant: 'success', bg: 'bg-blue-400 d:bg-blue-200' },
+            { variant: 'warning', bg: 'bg-yellow-400 d:bg-yellow-200' },
+            { variant: 'danger',  bg: 'bg-red-400 d:bg-red-200' },
+        ] as { variant, bg }}
+            <div class="d-flex g24 ai-center fw-wrap">
+                <ActivityIndicator label="New activity" {variant} />
+                <ActivityIndicator label="New activity" {variant} content={3} />
+                <ActivityIndicator label="New activity" {variant} content={12} />
+                <ActivityIndicator label="New activity" {variant} content={370} />
+                <ActivityIndicator label="New activity" {variant} content="new" />
+
+                <a href="#" class="s-link s-link__muted">
+                    <div class="s-avatar {bg} ps-relative">
+                        <ActivityIndicator label="New activity" {variant} size="sm" class="s-avatar--indicator" />
+                        <div class="s-avatar--letter">G</div>
+                        <Icon src={IconShieldXSm} class="native s-avatar--badge" />
+                    </div>
+                    <span class="pl4">Grayson</span>
+                </a>
+
+                <div class="fc-medium ps-relative">
+                    <Icon src={IconNotification} />
+                    <ActivityIndicator label="New activity" {variant} size="sm" class="ps-absolute tn4 rn4 ba baw2 bc-white box-content" />
+                </div>
+
+                <div class="fc-medium ps-relative">
+                    <Icon src={IconNotification} />
+                    <div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
+                        <ActivityIndicator label="New activity" {variant} content={3} />
+                    </div>
+                </div>
+            </div>
+        {/each}
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/avatars.md b/packages/stacks-docs-next/src/docs/public/system/components/avatars.md
new file mode 100644
index 0000000000..b36afdd985
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/avatars.md
@@ -0,0 +1,233 @@
+---
+title: "Avatars"
+description: "Avatars are used to quickly identify users or teams."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-avatar--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18797&p=f&t=c9NSyJWdASb80eVC-0"
+---
+
+<script lang="ts">
+    import { Avatar, ActivityIndicator } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-avatar',            parent: 'N/A',       modifies: 'N/A',       description: 'The base avatar at 16px.' },
+        { class: '.s-avatar--image',     parent: '.s-avatar', modifies: 'N/A',       description: 'A child element for displaying a user\'s profile image.' },
+        { class: '.s-avatar--letter',    parent: '.s-avatar', modifies: 'N/A',       description: 'A child element for displaying an abbreviated Team name.' },
+        { class: '.s-avatar--badge',     parent: '.s-avatar', modifies: 'N/A',       description: 'A child element that provides positioning to the shield on Team avatars.' },
+        { class: '.s-avatar--indicator', parent: '.s-avatar', modifies: 'N/A',       description: 'A child element that provides positioning to the activity indicator on user\'s avatars.' },
+        { class: '.s-avatar__24',        parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 24px.' },
+        { class: '.s-avatar__32',        parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 32px.' },
+        { class: '.s-avatar__48',        parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 48px.' },
+        { class: '.s-avatar__64',        parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 64px.' },
+        { class: '.s-avatar__96',        parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 96px.' },
+        { class: '.s-avatar__128',       parent: 'N/A',       modifies: '.s-avatar', description: 'Adds the proper border radius and scaling at 128px.' },
+    ];
+
+    const sizes = [16, 24, 32, 48, 64, 96, 128] as const;
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Examples
+
+### Users
+
+Including an image with the class `s-avatar--image` within `s-avatar` will apply the correct size. Remember, you'll want to double the size of the avatar image to account for retina screens.
+
+```html
+<a href="…" class="s-avatar">
+    <img class="s-avatar--image" src="https://picsum.photos/32" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__24">
+    <img class="s-avatar--image" src="https://picsum.photos/48" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__32">
+    <img class="s-avatar--image" src="https://picsum.photos/64" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__48">
+    <img class="s-avatar--image" src="https://picsum.photos/96" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__64">
+    <img class="s-avatar--image" src="https://picsum.photos/128" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__96">
+    <img class="s-avatar--image" src="https://picsum.photos/192" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__128">
+    <img class="s-avatar--image" src="https://picsum.photos/256" />
+</a>
+```
+
+<Example>
+    <table class="s-table s-table__b0 s-table__sm">
+            <thead>
+                <tr>
+                    <th scope="col">Size</th>
+                    <th scope="col">Class</th>
+                    <th scope="col">Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each sizes as size}
+                    <tr>
+                        <td><code>{size}px</code></td>
+                        <td><code>.s-avatar{size > 16 ? `__${size}` : ''}</code></td>
+                        <td>
+                            <Avatar
+                                name="Example user"
+                                src="https://picsum.photos/{size * 2}"
+                                {size}
+                                href="#"
+                            />
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+    </table>
+</Example>
+
+### Activity
+
+Avatars can display activity indicators to show activities or status changes. Add the `s-avatar--indicator` class to a child element of `s-avatar` along with `s-activity-indicator` and `s-activity-indicator__sm` classes. The indicator is positioned at the top-right corner of the avatar.
+
+```html
+<a href="…" class="s-avatar">
+    <div
+        class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+    >
+        <div class="v-visible-sr">Online</div>
+    </div>
+    <img class="s-avatar--image" src="https://picsum.photos/32" />
+</a>
+
+<a href="…" class="s-avatar s-avatar__24">
+    <div
+        class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+    >
+        <div class="v-visible-sr">Online</div>
+    </div>
+    <img class="s-avatar--image" src="https://picsum.photos/48" />
+</a>
+```
+
+<Example>
+    <table class="s-table s-table__b0 s-table__sm">
+            <thead>
+                <tr>
+                    <th scope="col">Size</th>
+                    <th scope="col">Class</th>
+                    <th scope="col">Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each [16, 24] as size}
+                    <tr>
+                        <td><code>{size}px</code></td>
+                        <td><code>.s-avatar{size > 16 ? `__${size}` : ''}</code></td>
+                        <td>
+                            <Avatar
+                                name="Example user"
+                                src="https://picsum.photos/{size * 2}"
+                                status="online"
+                                {size}
+                                href="#"
+                            />
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+    </table>
+</Example>
+
+### Stack Internal
+
+When displaying a team's identity, we badge the avatar with a shield. We fall back to the first letter of their name and a color we choose at random. As Stack Internal administrators add more data—choosing a color or uploading an avatar—we progressively enhance the avatar.
+
+In this example, from left to right, we have a team name of Hum with no avatar or custom color. In the middle we have a team name of Hum with a custom color. In the last example, we have a team name of Hum with a custom avatar applied.
+
+```html
+<a href="…" class="s-link s-link__muted">
+    <div class="s-avatar">
+        <div class="s-avatar--letter" aria-hidden="true">H</div>
+        @Svg.ShieldXSm.With("native s-avatar--badge")
+    </div>
+    <span class="pl4">Team name</span>
+</a>
+
+<a href="…" class="s-avatar s-avatar__24">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+
+<a href="…" class="s-avatar s-avatar__32">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+
+<a href="…" class="s-avatar s-avatar__48">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+
+<a href="…" class="s-avatar s-avatar__64">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+
+<a href="…" class="s-avatar s-avatar__96">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+
+<a href="…" class="s-avatar s-avatar__128">
+    <div class="s-avatar--letter" aria-hidden="true">H</div>
+    <span class="v-visible-sr">Hum</span>
+    @Svg.ShieldXSm.With("native s-avatar--badge")
+</a>
+```
+
+<Example>
+    <table class="s-table s-table__b0 s-table__sm">
+            <thead>
+                <tr>
+                    <th scope="col">Size</th>
+                    <th scope="col">Class</th>
+                    <th scope="col">Custom color</th>
+                    <th scope="col">Brand color</th>
+                    <th scope="col">Custom avatar</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each sizes as size}
+                    <tr>
+                        <td><code>{size}px</code></td>
+                        <td><code>.s-avatar{size > 16 ? `__${size}` : ''}</code></td>
+                        <td>
+                            <Avatar name="Hum" letter="H" badge {size} href="#" class="bg-blue-400" />
+                        </td>
+                        <td>
+                            <Avatar name="Hum" letter="H" badge {size} href="#" class="bg-theme-primary" />
+                        </td>
+                        <td>
+                            <Avatar name="Hum" src="/images/team-avatar.png" badge {size} href="#" />
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+    </table>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/badges.md b/packages/stacks-docs-next/src/docs/public/system/components/badges.md
new file mode 100644
index 0000000000..0059d2994d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/badges.md
@@ -0,0 +1,366 @@
+---
+title: "Badges"
+description: "Badges are labels used for flags, earned achievements, and number totals."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-badge--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18799&p=f&m=dev"
+---
+
+<script lang="ts">
+    import { Badge } from '@stackoverflow/stacks-svelte';
+    import {
+        IconDocument, IconCompose, IconEye, IconFlag,
+        IconChallenge, IconKey, IconCheck, IconStar,
+        IconNotification, IconVoteUp,
+    } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import PreviewTable from '$components/PreviewTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+    import type { PreviewTableRow } from '$components/PreviewTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-badge',            modifies: 'N/A',      description: 'Base badge element.' },
+        { class: '.s-badge__gold',      modifies: '.s-badge', description: 'Badge indicating a gold award.' },
+        { class: '.s-badge__silver',    modifies: '.s-badge', description: 'Badge indicating a silver award.' },
+        { class: '.s-badge__bronze',    modifies: '.s-badge', description: 'Badge indicating a bronze award.' },
+        { class: '.s-badge__important', modifies: '.s-badge', description: 'Applies important styling to the badge.' },
+        { class: '.s-badge__squared',   modifies: '.s-badge', description: 'Applies a background color to the badge\'s icon.' },
+        { class: '.s-badge__info',      modifies: '.s-badge', description: 'Badge indicating an info status.' },
+        { class: '.s-badge__warning',   modifies: '.s-badge', description: 'Badge indicating a warning status.' },
+        { class: '.s-badge__danger',    modifies: '.s-badge', description: 'Badge indicating a danger status.' },
+        { class: '.s-badge__critical',  modifies: '.s-badge', description: 'Badge indicating a critical status.' },
+        { class: '.s-badge__tonal',     modifies: '.s-badge', description: 'Badge indicating a tonal status.' },
+        { class: '.s-badge__success',   modifies: '.s-badge', description: 'Badge indicating a success status.' },
+        { class: '.s-badge__featured',  modifies: '.s-badge', description: 'Badge indicating a featured status.' },
+        { class: '.s-badge__sm',        modifies: '.s-badge', description: 'Applies a small size to the badge.' },
+        { class: '.s-badge__lg',        modifies: '.s-badge', description: 'Applies a large size to the badge.' },
+    ];
+
+    const achievementRows: PreviewTableRow[] = [
+        { classes: [], award: 'gold',   text: 'Great Question',    description: 'Gold badge achievement that a user earns within a community.' },
+        { classes: [], award: 'silver', text: 'Favorite Question', description: 'Silver badge achievement that a user earns within a community.' },
+        { classes: [], award: 'bronze', text: 'Altruist',          description: 'Bronze badge achievement that a user earns within a community.' },
+    ];
+
+    const tagRows: PreviewTableRow[] = [
+        { classes: ['.s-badge__gold'],   award: 'gold',   text: 'python',     description: 'Gold badge achievement that a user earns for a specific tag within a community.' },
+        { classes: ['.s-badge__silver'], award: 'silver', text: 'css',        description: 'Silver badge achievement that a user earns for a specific tag within a community.' },
+        { classes: ['.s-badge__bronze'], award: 'bronze', text: 'javascript', description: 'Bronze badge achievement that a user earns for a specific tag within a community.' },
+    ];
+
+    const statesRows: PreviewTableRow[] = [
+        { classes: ['N/A'],              state: undefined,    icon: IconDocument, label: 'Archived', description: "Neutral badge styling. Can be used to indicate an inactive state that requires minimal visual emphasis." },
+        { classes: ['.s-badge__info'],    state: 'info',      icon: IconCompose,  label: 'Draft',    description: 'Info badge styling.' },
+        { classes: ['.s-badge__warning'], state: 'warning',   icon: IconEye,      label: 'Review',   description: 'Warning badge styling.' },
+        { classes: ['.s-badge__danger'],  state: 'danger',    icon: IconFlag,     label: 'Closed',   description: 'Danger badge styling.' },
+        { classes: ['.s-badge__critical'],state: 'critical',  icon: IconChallenge,label: 'Deleted',  description: 'Critical badge styling.' },
+        { classes: ['.s-badge__tonal'],   state: 'tonal',     icon: IconKey,      label: 'Pinned',   description: 'Tonal badge styling.' },
+        { classes: ['.s-badge__success'], state: 'success',   icon: IconCheck,    label: 'Success',  description: 'Success badge styling.' },
+        { classes: ['.s-badge__featured'],state: 'featured',  icon: IconStar,     label: 'New',      description: 'Featured badge styling. Can be used to draw attention to the new features and changes.' },
+    ];
+
+    const squaredRows: PreviewTableRow[] = [
+        { classes: ['.s-badge__squared', '.s-badge__success'], state: 'success', icon: IconCheck,  label: 'Accepted answer', description: 'Success badge styling in squared variant.' },
+        { classes: ['.s-badge__squared', '.s-badge__featured'],state: 'featured',icon: IconVoteUp, label: 'Earn badge',      description: 'Featured badge styling in squared variant.' },
+    ];
+
+    const importantRows: PreviewTableRow[] = [
+        { classes: ['.s-badge__warning', '.s-badge__squared', '.s-badge__important'], state: 'warning',  squared: true,  icon: IconNotification, label: 'Needs attention', description: 'Warning badge styling in squared variant with important styling.' },
+        { classes: ['.s-badge__danger',  '.s-badge__important'],                      state: 'danger',   squared: false, icon: IconVoteUp,       label: 'Ending soon',     description: 'Danger badge styling with important styling.' },
+        { classes: ['.s-badge__critical','.s-badge__important'],                      state: 'critical', squared: false, icon: undefined,        label: 'Spam',            description: 'Critical badge styling with important styling.' },
+        { classes: ['.s-badge__info',    '.s-badge__important'],                      state: 'info',     squared: false, icon: undefined,        label: '+100',            description: 'Info badge styling in small size with important styling.', size: 'sm' },
+    ];
+
+    const userRows: PreviewTableRow[] = [
+        { classes: ['.s-badge__admin'],     userType: 'admin',     label: 'Admin',     description: 'Badge indicating user is an admin.' },
+        { classes: ['.s-badge__moderator'], userType: 'moderator', label: 'Moderator', description: 'Badge indicating user is an moderator.' },
+        { classes: ['.s-badge__staff'],     userType: 'staff',     label: 'Staff',     description: 'Badge indicating user is staff.' },
+        { classes: ['.s-badge__ai'],        userType: 'ai',        label: 'AI',        description: 'Badge indicating content is AI generated.' },
+        { classes: ['.s-badge__bot'],       userType: 'bot',       label: 'Bot',       description: 'Badge indicating user is a bot.' },
+        { classes: ['.s-badge__new'],       userType: 'new',       label: 'New',       description: 'Badge indicating new user.' },
+    ];
+
+    const sizesRows: PreviewTableRow[] = [
+        { classes: ['.s-badge__sm'], size: 'sm',      label: 'Small',   description: 'The badge in small size.' },
+        { classes: ['N/A'],          size: undefined, label: 'Default', description: 'The badge in default size.' },
+        { classes: ['.s-badge__lg'], size: 'lg',      label: 'Large',   description: 'The badge in large size.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Styles
+
+### Default
+
+```html
+<span class="s-badge">
+    default
+</span>
+```
+
+<Example>
+    <Badge text="default" />
+</Example>
+
+### General
+
+A general-purpose badge used for functional information and system-level status updates.
+
+```html
+<span class="s-badge">
+    <span class="s-bling s-bling__filled">
+        <span class="v-visible-sr">Badge</span>
+    </span>
+    general
+</span>
+```
+
+<Example>
+    <Badge text="general" type="general" label="Badge" />
+</Example>
+
+### Reputation
+
+A reputation badge to display a user's total rep count.
+
+```html
+<span class="s-badge">
+    <span class="s-bling s-bling__filled s-bling__rep">
+        <span class="v-visible-sr">Rep badge</span>
+    </span>
+    99 rep
+</span>
+```
+
+<Example>
+    <Badge text="99 rep" type="reputation" label="Rep badge" />
+</Example>
+
+### Activity
+
+An activity badge to signal real-time events and draw attention.
+
+```html
+<span class="s-badge">
+    <span class="s-bling s-bling__filled s-bling__activity">
+        <span class="v-visible-sr">Activity badge</span>
+    </span>
+    new message
+</span>
+```
+
+<Example>
+    <Badge text="new message" type="activity" label="Activity badge" />
+</Example>
+
+### Achievement
+
+Badges that provide information about user achievements.
+
+```html
+<span class="s-badge">
+    <span class="s-bling s-bling__filled s-bling__gold">
+        <span class="v-visible-sr">Gold badge</span>
+    </span>
+    Great Question
+</span>
+<span class="s-badge">
+    <span class="s-bling s-bling__filled s-bling__silver">
+        <span class="v-visible-sr">Silver badge</span>
+    </span>
+    Favorite Question
+</span>
+<span class="s-badge">
+    <span class="s-bling s-bling__filled s-bling__bronze">
+        <span class="v-visible-sr">Bronze badge</span>
+    </span>
+    Altruist
+</span>
+```
+
+<Example>
+    <PreviewTable rows={achievementRows} showClasses={false}>
+        {#snippet example(row)}
+            <Badge text={row.text} type="achievement" award={row.award} label="{row.award} badge" />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### Tag
+
+Badges that display achievements a user has earned for their contributions within a specific topic/tag.
+
+```html
+<span class="s-badge s-badge__gold">
+    <span class="s-bling s-bling__gold">
+        <span class="v-visible-sr">Gold tag badge</span>
+    </span>
+    python
+</span>
+<span class="s-badge s-badge__silver">
+    <span class="s-bling s-bling__silver">
+        <span class="v-visible-sr">Silver tag badge</span>
+    </span>
+    css
+</span>
+<span class="s-badge s-badge__bronze">
+    <span class="s-bling s-bling__bronze">
+        <span class="v-visible-sr">Bronze tag badge</span>
+    </span>
+    javascript
+</span>
+```
+
+<Example>
+    <PreviewTable rows={tagRows} columnLabel="Modifier class">
+        {#snippet example(row)}
+            <Badge text={row.text} type="tag" award={row.award} label="{row.award} tag badge" />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### States
+
+Use State badges to communicate semantic status or severity, such as success, warning, or danger. These variants apply specific system colors to convey meaning and can be configured with or without icons.
+
+```html
+<span class="s-badge">
+    @Svg.Document
+    Archived
+</span>
+<span class="s-badge s-badge__info">
+    @Svg.Compose
+    Draft
+</span>
+<span class="s-badge s-badge__warning">
+    @Svg.Eye
+    Review
+</span>
+<span class="s-badge s-badge__danger">
+    @Svg.Flag
+    Closed
+</span>
+<span class="s-badge s-badge__critical">
+    @Svg.Challenge
+    Deleted
+</span>
+<span class="s-badge s-badge__tonal">
+    @Svg.Key
+    Pinned
+</span>
+<span class="s-badge s-badge__success">
+    @Svg.Check
+    Success
+</span>
+<span class="s-badge s-badge__featured">
+    @Svg.Star
+    New
+</span>
+```
+
+<Example>
+    <PreviewTable rows={statesRows} columnLabel="Modifier class">
+        {#snippet example(row)}
+            <Badge text={row.label} type="state" state={row.state} icon={row.icon} />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### Squared
+
+Use the squared variant sparingly to provide additional emphasis, reserving it primarily for states related to gamification or achievements.
+
+```html
+<span class="s-badge s-badge__squared s-badge__success">
+    @Svg.Check
+    Accepted answer
+</span>
+<span class="s-badge s-badge__squared s-badge__featured">
+    @Svg.VoteUp
+    Earn badge
+</span>
+```
+
+<Example>
+    <PreviewTable rows={squaredRows} columnLabel="Modifier classes">
+        {#snippet example(row)}
+            <Badge text={row.label} type="state" state={row.state} squared icon={row.icon} />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### Important
+
+Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user.
+
+```html
+<span class="s-badge s-badge__warning s-badge__squared s-badge__important">
+    @Svg.Notification
+    Needs attention
+</span>
+<span class="s-badge s-badge__danger s-badge__important">
+    @Svg.VoteUp
+    Ending soon
+</span>
+<span class="s-badge s-badge__critical s-badge__important">
+    Spam
+</span>
+<span class="s-badge s-badge__info s-badge__sm s-badge__important">
+    +100
+</span>
+```
+
+<Example>
+    <PreviewTable rows={importantRows} columnLabel="Modifier classes">
+        {#snippet example(row)}
+            <Badge text={row.label} type="state" state={row.state} important
+                squared={row.squared} icon={row.icon} size={row.size} />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### User
+
+```html
+<span class="s-badge s-badge__admin">Admin</span>
+<span class="s-badge s-badge__moderator">Moderator</span>
+<span class="s-badge s-badge__staff">Staff</span>
+<span class="s-badge s-badge__bot">Bot</span>
+<span class="s-badge s-badge__ai">AI</span>
+<span class="s-badge s-badge__new">New</span>
+```
+
+<Example>
+    <PreviewTable rows={userRows} columnLabel="Class">
+        {#snippet example(row)}
+            <Badge text={row.label} type="user" userType={row.userType} />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+### Sizes
+
+Badges come in three sizes.
+
+```html
+<span class="s-badge s-badge__sm">
+    Small
+</span>
+<span class="s-badge">
+    Default
+</span>
+<span class="s-badge s-badge__lg">
+    Large
+</span>
+```
+
+<Example>
+    <PreviewTable rows={sizesRows} columnLabel="Modifier class">
+        {#snippet example(row)}
+            <Badge text={row.label} size={row.size} />
+        {/snippet}
+    </PreviewTable>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/banners.md b/packages/stacks-docs-next/src/docs/public/system/components/banners.md
new file mode 100644
index 0000000000..dbc8535d7d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/banners.md
@@ -0,0 +1,197 @@
+---
+title: "Banners"
+description: "Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=5982-7648&m=dev"
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import BannerPreview from '$components/BannerPreview.svelte';
+    import BannerDemo from '$components/BannerDemo.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const attributes: ClassTableRow[] = [
+        { class: 'data-controller="s-banner"',             parent: 'Controller element', description: 'Wires up the element to the banner controller. This may be a `.s-banner` element or a wrapper element.' },
+        { class: 'data-s-banner-target="banner"',          parent: '.s-banner element',  description: 'Wires up the element that is to be shown/hidden.' },
+        { class: 'data-s-banner-remove-when-hidden="true"',parent: 'Controller element', description: '(optional) Removes the banner from the DOM entirely when it is hidden.' },
+    ];
+
+    const events: ClassTableRow[] = [
+        { class: 's-banner:show',   parent: 'Banner target', description: 'Fires immediately before showing the banner. Calling `.preventDefault()` cancels the display of the banner.' },
+        { class: 's-banner:shown',  parent: 'Banner target', description: 'Fires after the banner has been visually shown.' },
+        { class: 's-banner:hide',   parent: 'Banner target', description: 'Fires immediately before hiding the banner. Calling `.preventDefault()` cancels the removal of the banner.' },
+        { class: 's-banner:hidden', parent: 'Banner target', description: 'Fires after the banner has been visually hidden.' },
+    ];
+
+    const eventDetails: ClassTableRow[] = [
+        { class: 'dispatcher', parent: 'N/A', description: 'Contains the `Element` that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.' },
+    ];
+
+    const helpers: ClassTableRow[] = [
+        { class: 'Stacks.showBanner', parent: 'Controller element', description: 'Helper to manually show an s-banner element via external JS.' },
+        { class: 'Stacks.hideBanner', parent: 'Controller element', description: 'Helper to manually hide an s-banner element via external JS.' },
+    ];
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-banner',              parent: 'N/A',        modifies: 'N/A',        description: 'Base banner element.' },
+        { class: '.s-banner--actions',     parent: '.s-banner',  modifies: 'N/A',        description: 'Container styling for banner actions including the dismiss button.' },
+        { class: '.s-banner--dismiss',     parent: '.s-banner',  modifies: 'N/A',        description: 'Applies to child button element within the banner to position it appropriately.' },
+        { class: '.s-banner__important',   parent: 'N/A',        modifies: '.s-banner',  description: 'Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user.' },
+        { class: '.s-banner__info',        parent: 'N/A',        modifies: '.s-banner',  description: 'Applies info (blue) visual styles.' },
+        { class: '.s-banner__success',     parent: 'N/A',        modifies: '.s-banner',  description: 'Applies success (green) visual styles.' },
+        { class: '.s-banner__warning',     parent: 'N/A',        modifies: '.s-banner',  description: 'Applies warning (yellow) visual styles.' },
+        { class: '.s-banner__danger',      parent: 'N/A',        modifies: '.s-banner',  description: 'Applies danger (red) visual styles.' },
+        { class: '.s-banner__featured',    parent: 'N/A',        modifies: '.s-banner',  description: 'Applies featured (purple) visual styles.' },
+        { class: '.s-banner__activity',    parent: 'N/A',        modifies: '.s-banner',  description: 'Applies activity (pink) visual styles.' },
+        { class: '.is-pinned',             parent: 'N/A',        modifies: '.s-banner',  description: 'Pins the banner to the top of the browser window.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Usage guidelines
+
+System banners are used for **system** messaging. They are full-width notices placed in one of two locations:
+
+- **Pinned to the top of the browser window** — Use when the banner relates to the entire website (e.g. the site is in read-only mode). Add `.is-pinned` to pin the banner above all other content including the topbar.
+- **Below the top navigation bar** — The default placement. Use when the banner affects only a particular area of the product (e.g. a subscription is about to expire).
+
+Refer to the [Classes section](#classes) for more information on how to apply the correct styles.
+
+## Examples
+
+<BannerDemo />
+
+### Base
+
+```html
+<div class="s-banner" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview />
+    <BannerPreview important class="mt8" />
+</Example>
+
+### Info
+
+```html
+<div class="s-banner s-banner__info" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__info s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="info" />
+    <BannerPreview variant="info" important class="mt8" />
+</Example>
+
+### Success
+
+```html
+<div class="s-banner s-banner__success" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__success s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="success" />
+    <BannerPreview variant="success" important class="mt8" />
+</Example>
+
+### Warning
+
+```html
+<div class="s-banner s-banner__warning" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__warning s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="warning" />
+    <BannerPreview variant="warning" important class="mt8" />
+</Example>
+
+### Danger
+
+```html
+<div class="s-banner s-banner__danger" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__danger s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="danger" />
+    <BannerPreview variant="danger" important class="mt8" />
+</Example>
+
+### Featured
+
+```html
+<div class="s-banner s-banner__featured" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__featured s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="featured" />
+    <BannerPreview variant="featured" important class="mt8" />
+</Example>
+
+### Activity
+
+```html
+<div class="s-banner s-banner__activity" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__activity s-banner__important" role="alert" aria-hidden="false">…</div>
+```
+
+<Example>
+    <BannerPreview variant="activity" />
+    <BannerPreview variant="activity" important class="mt8" />
+</Example>
+
+## JavaScript
+
+The `.s-banner` component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.
+
+### Example
+
+```html
+<div
+    role="alert"
+    id="example-banner"
+    class="s-banner"
+    aria-labelledby="example-message"
+    aria-hidden="true"
+    data-controller="s-banner"
+    data-s-banner-target="banner">
+    Example banner
+</div>
+…
+<button
+    data-toggle="s-banner"
+    data-target="#example-banner">
+    Show banner
+</button>
+```
+
+```javascript
+document.querySelector(".js-banner-toggle").addEventListener("click", function(e) {
+    Stacks.showBanner(document.querySelector("#example-banner"));
+});
+```
+
+### Attributes
+
+<ClassTable classes={attributes} headings={{ class: 'Attribute', parent: 'Applies to' }} />
+
+### Events
+
+<ClassTable classes={events} headings={{ class: 'Event', parent: 'Applies to' }} />
+
+### Event details
+
+<ClassTable classes={eventDetails} headings={{ class: 'event.detail', parent: 'Applicable events' }} />
+
+### Helpers
+
+<ClassTable classes={helpers} headings={{ class: 'Function', parent: 'Applies to' }} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/bling.md b/packages/stacks-docs-next/src/docs/public/system/components/bling.md
new file mode 100644
index 0000000000..86cb29358c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/bling.md
@@ -0,0 +1,119 @@
+---
+title: "Bling"
+description: "Bling is used to indicate award type in badges and user cards."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-bling--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18798"
+---
+
+<script lang="ts">
+    import { Bling } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import PreviewTable from '$components/PreviewTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+    import type { PreviewTableRow } from '$components/PreviewTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-bling',           modifies: 'N/A',      description: 'Base bling element.' },
+        { class: '.s-bling__gold',     modifies: '.s-bling', description: 'Gold bling element.' },
+        { class: '.s-bling__silver',   modifies: '.s-bling', description: 'Silver bling element.' },
+        { class: '.s-bling__bronze',   modifies: '.s-bling', description: 'Bronze bling element.' },
+        { class: '.s-bling__activity', modifies: '.s-bling', description: 'Activity bling element.' },
+        { class: '.s-bling__filled',   modifies: '.s-bling', description: 'Filled bling element.' },
+        { class: '.s-bling__rep',      modifies: '.s-bling', description: 'Reputation bling element.' },
+        { class: '.s-bling__sm',       modifies: '.s-bling', description: 'Small bling element.' },
+        { class: '.s-bling__lg',       modifies: '.s-bling', description: 'Large bling element.' },
+    ];
+
+    const types: PreviewTableRow[] = [
+        { type: undefined, classes: ['.s-bling'],                           description: 'A general bling shape used for reputation, notifications or other.' },
+        { type: 'gold',    classes: ['.s-bling', '.s-bling__gold'],         description: 'The "gold" award bling shape.' },
+        { type: 'silver',  classes: ['.s-bling', '.s-bling__silver'],       description: 'The "silver" award bling shape.' },
+        { type: 'bronze',  classes: ['.s-bling', '.s-bling__bronze'],       description: 'The "bronze" award bling shape.' },
+    ];
+
+    const filled: PreviewTableRow[] = [
+        { type: undefined,  classes: ['.s-bling', '.s-bling__filled'],                       description: 'A general bling used for information, status, labels or other.' },
+        { type: 'rep',      classes: ['.s-bling', '.s-bling__filled', '.s-bling__rep'],      description: 'A "rep" bling used for general reputation points.' },
+        { type: 'activity', classes: ['.s-bling', '.s-bling__filled', '.s-bling__activity'], description: 'An activity bling to signal real-time events and draw attention.' },
+        { type: 'gold',     classes: ['.s-bling', '.s-bling__filled', '.s-bling__gold'],     description: 'A "gold" award bling.' },
+        { type: 'silver',   classes: ['.s-bling', '.s-bling__filled', '.s-bling__silver'],   description: 'A "silver" award bling.' },
+        { type: 'bronze',   classes: ['.s-bling', '.s-bling__filled', '.s-bling__bronze'],   description: 'A "bronze" award bling.' },
+    ];
+
+    const sizes: PreviewTableRow[] = [
+        { size: 'sm',      classes: ['.s-bling', '.s-bling__filled', '.s-bling__sm'], description: 'A "sm" bling.' },
+        { size: undefined, classes: ['.s-bling', '.s-bling__filled'],                 description: 'A "default" bling.' },
+        { size: 'lg',      classes: ['.s-bling', '.s-bling__filled', '.s-bling__lg'], description: 'A "lg" bling.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Types
+
+Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.
+
+```html
+<span class="s-bling">
+    <span class="v-visible-sr">…</span>
+</span>
+<span class="s-bling s-bling__gold">
+    <span class="v-visible-sr">…</span>
+</span>
+<span class="s-bling s-bling__silver">
+    <span class="v-visible-sr">…</span>
+</span>
+<span class="s-bling s-bling__bronze">
+    <span class="v-visible-sr">…</span>
+</span>
+```
+
+<Example>
+    <PreviewTable rows={types}>
+        {#snippet example(row)}
+            <Bling name="{row.type ?? 'default'} bling" type={row.type} />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+## Filled
+
+Use the filled bling style to represent a specific achievement badge or to display the total count of badges a user has earned.
+
+```html
+<span class="s-bling s-bling__filled">…</span>
+<span class="s-bling s-bling__filled s-bling__rep">…</span>
+<span class="s-bling s-bling__filled s-bling__activity">…</span>
+<span class="s-bling s-bling__filled s-bling__gold">…</span>
+<span class="s-bling s-bling__filled s-bling__silver">…</span>
+<span class="s-bling s-bling__filled s-bling__bronze">…</span>
+```
+
+<Example>
+    <PreviewTable rows={filled}>
+        {#snippet example(row)}
+            <Bling name="{row.type ?? 'default'} bling" type={row.type} filled />
+        {/snippet}
+    </PreviewTable>
+</Example>
+
+## Sizes
+
+A bling component has a default size. To change the bling's size, apply one of the following sizing classes along with the base `.s-bling` class.
+
+```html
+<span class="s-bling s-bling__filled s-bling__sm">…</span>
+<span class="s-bling s-bling__filled">…</span>
+<span class="s-bling s-bling__filled s-bling__lg">…</span>
+```
+
+<Example>
+    <PreviewTable rows={sizes}>
+        {#snippet example(row)}
+            <Bling name="{row.size ?? 'default'} bling" filled size={row.size} />
+        {/snippet}
+    </PreviewTable>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md b/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md
new file mode 100644
index 0000000000..c885601155
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md
@@ -0,0 +1,11 @@
+---
+title: "Breadcrumbs"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md b/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md
new file mode 100644
index 0000000000..6a1d8098ea
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md
@@ -0,0 +1,11 @@
+---
+title: "Button Groups"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/buttons.md b/packages/stacks-docs-next/src/docs/public/system/components/buttons.md
new file mode 100644
index 0000000000..0dee0b6a3a
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/buttons.md
@@ -0,0 +1,398 @@
+---
+title: Buttons
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-button--docs
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18802"
+description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
+---
+
+<script lang="ts">
+  import { Button, Icon } from '@stackoverflow/stacks-svelte';
+  import type { Brand, Size, Variant, Weight } from '@stackoverflow/stacks-svelte';
+
+  import { IconTrash, IconArrowUp, IconServiceFacebook, IconServiceGoogle, IconServiceGitHub } from '@stackoverflow/stacks-icons';
+
+  const ButtonBrands: Brand[] = ["", "facebook", "github", "google"];
+  const ButtonSizes: Size[] = ["", "xs", "sm", "lg"];
+  const ButtonVariants: Variant[] = ["", "danger", "featured", "tonal"];
+  const ButtonWeights: Weight[] = ["", "clear"];
+
+  import ButtonTable from './buttons/ButtonTable.svelte';
+  import AnchorButtonTable from './buttons/AnchorButtonTable.svelte';
+  import LoadingButtonTable from './buttons/LoadingButtonTable.svelte';
+  import DropdownButtonTable from './buttons/DropdownButtonTable.svelte';
+  import BadgeButtonTable from './buttons/BadgeButtonTable.svelte';
+  import SizeTable from './buttons/SizeTable.svelte';
+  import ToggleButtonDemo from './buttons/ToggleButtonDemo.svelte';
+  import ClassTable from '$components/ClassTable.svelte';
+  import Example from '$components/Example.svelte';
+  import { Notice } from '@stackoverflow/stacks-svelte';
+  import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+  const classes: ClassTableRow[] = [
+    { class: '.s-btn',           parent: 'N/A',    modifies: 'N/A',    description: 'Base button element.' },
+    { class: '.s-btn--badge',    parent: '.s-btn', modifies: 'N/A',    description: 'Badge container for the button.' },
+    { class: '.s-btn__clear',    parent: 'N/A',    modifies: '.s-btn', description: 'Clear button variant.' },
+    { class: '.s-btn__danger',   parent: 'N/A',    modifies: '.s-btn', description: 'Danger button variant.' },
+    { class: '.s-btn__featured', parent: 'N/A',    modifies: '.s-btn', description: 'Featured button variant.' },
+    { class: '.s-btn__tonal',    parent: 'N/A',    modifies: '.s-btn', description: 'Tonal button variant.' },
+    { class: '.s-btn__dropdown', parent: 'N/A',    modifies: '.s-btn', description: 'Dropdown button variant.' },
+    { class: '.s-btn__icon',     parent: 'N/A',    modifies: '.s-btn', description: 'Icon button variant.' },
+    { class: '.s-btn__link',     parent: 'N/A',    modifies: '.s-btn', description: 'Link button variant.' },
+    { class: '.s-btn__unset',    parent: 'N/A',    modifies: '.s-btn', description: 'Unset button variant.' },
+    { class: '.s-btn__facebook', parent: 'N/A',    modifies: '.s-btn', description: 'Facebook button variant.' },
+    { class: '.s-btn__github',   parent: 'N/A',    modifies: '.s-btn', description: 'GitHub button variant.' },
+    { class: '.s-btn__google',   parent: 'N/A',    modifies: '.s-btn', description: 'Google button variant.' },
+    { class: '.s-btn__xs',       parent: 'N/A',    modifies: '.s-btn', description: 'Extra small button variant.' },
+    { class: '.s-btn__sm',       parent: 'N/A',    modifies: '.s-btn', description: 'Small button variant.' },
+    { class: '.s-btn__lg',       parent: 'N/A',    modifies: '.s-btn', description: 'Large button variant.' },
+  ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Styles
+
+Stacks provides 3 different button styles:
+
+1. [Base](#base)
+2. [Danger](#danger)
+3. [Featured](#featured)
+4. [Tonal](#tonal)
+
+Each style is explained below, detailing how and where to use these styles.
+
+### Base
+
+Base buttons can gain clear styling with the `.s-btn__clear` class.
+
+```html
+<button class="s-btn" type="button">…</button>
+<button class="s-btn s-btn__clear" type="button">…</button>
+```
+
+<Example>
+    <ButtonTable />
+</Example>
+
+### Danger
+
+Danger buttons are a secondary button style, used to visually communicate destructive actions such as deleting content, accounts, or canceling services.
+
+```html
+<button class="s-btn s-btn__danger" type="button">…</button>
+<button class="s-btn s-btn__danger s-btn__clear" type="button">…</button>
+```
+
+<Example>
+    <ButtonTable variant="danger" />
+</Example>
+
+### Featured
+
+Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.
+
+```html
+<button class="s-btn s-btn__featured" type="button">…</button>
+<button class="s-btn s-btn__featured s-btn__clear" type="button">…</button>
+```
+
+<Example>
+    <ButtonTable variant="featured" />
+</Example>
+
+### Tonal
+
+Tonal buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.
+
+```html
+<button class="s-btn s-btn__tonal" type="button">…</button>
+<button class="s-btn s-btn__clear s-btn__tonal" type="button">…</button>
+```
+
+<Example>
+    <ButtonTable variant="tonal" />
+</Example>
+
+## Anchors
+
+Anchors can be rendered with the `.s-btn` to adopt a button-like visual style for a link.
+
+```html
+<a href="#" class="s-btn">Ask question</a>
+```
+
+<Example>
+    <AnchorButtonTable variants={ButtonVariants} weights={ButtonWeights} />
+</Example>
+
+## Loading
+
+Any button can have a loading state applied by adding the `.is-loading` state class.
+
+```html
+<button class="s-btn is-loading" type="button">…</button>
+```
+
+<Example>
+    <LoadingButtonTable variants={ButtonVariants} weights={ButtonWeights} />
+</Example>
+
+## Dropdowns
+
+Adding the class `.s-btn__dropdown` to any button style will add an appropriately-styled caret. These should be paired with a menu or popover.
+
+```html
+<button class="s-btn s-btn__dropdown" type="button">Dropdown</button>
+```
+
+<Example>
+    <DropdownButtonTable variants={ButtonVariants} weights={ButtonWeights} />
+</Example>
+
+## Badges
+
+Adding an `.s-btn--badge` to any button will add an appropriately-styled badge.
+
+```html
+<button class="s-btn" type="button">
+    Badge
+    <span class="s-btn--badge">
+        <span class="s-btn--number">198</span>
+    </span>
+</button>
+```
+
+<Example>
+    <BadgeButtonTable variants={ButtonVariants} weights={ButtonWeights} />
+</Example>
+
+## Sizes
+
+A button's default font-size is determined by the `@body-fs` variable. To change the button's font-size, use the following classes with `.s-btn`:
+
+<Notice variant="warning" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <span><strong>Note:</strong> Avoid using icons within the extra small button size. This variant is designed for tight spaces, and standard icons are too large to fit without breaking the button's height and layout.</span>
+</Notice>
+
+<Example>
+    <SizeTable sizes={ButtonSizes} />
+</Example>
+
+## Toggle buttons
+
+Each button class has a selected state which can be visually activated by applying the `.is-selected` class. When a button can switch between selected and unselected states, it is important to also annotate the button with the `aria-pressed` attribute for accessibility. A `title` attribute may also be appropriate to describe what will happen when pressing the button.
+
+```html
+<button class="s-btn" type="button" aria-pressed="false" title="…">…</button>
+<button class="s-btn is-selected" type="button" aria-pressed="true" title="…">
+    …
+</button>
+
+<script>
+    toggleButton.addEventListener('click', () => {
+        let wasSelected = toggleButton.getAttribute('aria-pressed') === 'true';
+        let isSelected = !wasSelected;
+        toggleButton.classList.toggle('is-selected', isSelected);
+        toggleButton.setAttribute('aria-pressed', isSelected.toString());
+        …
+    });
+</script>
+```
+
+<ToggleButtonDemo />
+
+## Additional styles
+
+Stacks provides additional classes for cases that are a bit more rare.
+
+### Disabled
+
+<Example>
+    <div class="overflow-x-auto">
+        <table class="wmn5 s-table s-table__bx-simple">
+            <thead>
+                <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col" class="s-table--cell4">Attribute</th>
+                    <th scope="col">Definition</th>
+                    <th scope="col" class="ta-center">Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row" class="va-middle">Disabled</th>
+                    <td class="va-middle"><code>[aria-disabled="true"]</code></td>
+                    <td class="va-middle">Adds disabled styling to any element with <code>.s-btn</code> applied.</td>
+                    <td class="va-middle ta-center px4"><Button href="#" weight="clear" disabled>Ask question</Button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Resets
+
+<Example>
+    <div class="overflow-x-auto">
+        <table class="wmn5 s-table s-table__bx-simple">
+            <thead>
+                <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col" class="s-table--cell4">Class</th>
+                    <th scope="col">Definition</th>
+                    <th scope="col" class="ta-center">Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row" class="va-middle">Unset</th>
+                    <td class="va-middle"><code>.s-btn__unset</code></td>
+                    <td class="va-middle">Removes all styling from a button and reverts focus states to browser default.</td>
+                    <td class="va-middle ta-center px4"><Button unset class="ws-nowrap">Unset button</Button></td>
+                </tr>
+                <tr>
+                    <th scope="row" class="va-middle">Link</th>
+                    <td class="va-middle"><code>.s-btn__link</code></td>
+                    <td class="va-middle">Styles a button element as though it were a link. Instead of transforming an <code>s-btn</code> to a link, you most likely want to style a <code>button</code> as a <a href="/system/components/links">link</a>.</td>
+                    <td class="va-middle ta-center px4"><Button link class="ws-nowrap">Link button</Button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Icons
+
+<Example>
+    <div class="overflow-x-auto">
+        <table class="wmn5 s-table s-table__bx-simple">
+            <thead>
+                <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col" class="s-table--cell4">Class</th>
+                    <th scope="col">Definition</th>
+                    <th scope="col" class="ta-center">Examples</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row" class="va-middle">Icon</th>
+                    <td class="va-middle"><code>.s-btn__icon</code></td>
+                    <td class="va-middle">Adds some margin overrides that apply to an icon within a button.</td>
+                    <td class="va-middle ta-center px4">
+                        <div class="d-flex ai-center g4">
+                            <button class="s-btn s-btn__danger s-btn__icon ws-nowrap" type="button"><Icon src={IconTrash} /> Delete</button>
+                            <button class="s-btn s-btn__icon s-btn__link" type="button" aria-label="up"><Icon src={IconArrowUp} /><span class="v-visible-sr">up</span></button>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Social
+
+<Example>
+    <div class="overflow-x-auto">
+        <table class="wmn5 s-table s-table__bx-simple">
+            <thead>
+                <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col" class="s-table--cell4">Class</th>
+                    <th scope="col">Definition</th>
+                    <th scope="col" class="ta-center">Examples</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row" class="va-middle">Facebook</th>
+                    <td class="va-middle"><code>.s-btn__facebook</code></td>
+                    <td class="va-middle">Styles a button consistent with Facebook's branding.</td>
+                    <td class="va-middle ta-center px4"><button class="s-btn s-btn__icon s-btn__facebook ws-nowrap" type="button"><Icon src={IconServiceFacebook} /> Facebook</button></td>
+                </tr>
+                <tr>
+                    <th scope="row" class="va-middle">Google</th>
+                    <td class="va-middle"><code>.s-btn__google</code></td>
+                    <td class="va-middle">Styles a button consistent with Google's branding.</td>
+                    <td class="va-middle ta-center px4"><button class="s-btn s-btn__icon s-btn__google ws-nowrap" type="button"><Icon src={IconServiceGoogle} class="native" /> Google</button></td>
+                </tr>
+                <tr>
+                    <th scope="row" class="va-middle">GitHub</th>
+                    <td class="va-middle"><code>.s-btn__github</code></td>
+                    <td class="va-middle">Styles a button consistent with GitHub's branding.</td>
+                    <td class="va-middle ta-center px4"><button class="s-btn s-btn__icon s-btn__github ws-nowrap" type="button"><Icon src={IconServiceGitHub} /> GitHub</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Ordering
+
+To maintain product consistency, buttons should maintain the following layout ordering:
+
+### Within a row
+
+Most button groups should be ordered from the most important to the least important action, left to right.
+
+```html
+<button class="s-btn" type="button">Post answer</button>
+<button class="s-btn s-btn__clear" type="button">Cancel</button>
+```
+
+<Example>
+    <div class="d-flex g4 fw-wrap">
+        <Button>Post answer</Button>
+        <Button weight="clear">Cancel</Button>
+    </div>
+</Example>
+
+### Within a column
+
+Sometimes the layout dictates that buttons need to be stacked on top of each other. Again, these buttons should be stacked from the most important to the least important, top to bottom.
+
+```html
+<div class="d-flex g4 fd-column">
+    <button class="s-btn" type="button">Post answer</button>
+    <button class="s-btn s-btn__clear" type="button">Cancel</button>
+</div>
+```
+
+<Example>
+    <div class="d-flex g4 fd-column wmx2">
+        <Button>Post answer</Button>
+        <Button weight="clear">Cancel</Button>
+    </div>
+</Example>
+
+### Within a header
+
+Sometimes the best place for a series of actions is in the same area as the title. In these cases, the buttons should be pulled to the right. Within this instance, the button order should be reversed with the most important action to the far right and the least important action to the far left.
+
+```html
+<div class="d-flex g4">
+    <div class="d-flex ai-center sm:fd-column sm:ai-start">
+        <h3 class="mb0 sm:mb16 mr-auto fs-title fw-normal">
+            Write your response
+        </h3>
+
+        <div class="d-flex g4 sm:fd-row-reverse sm:jc-end">
+            <button class="s-btn s-btn__clear" type="button">Cancel</button>
+            <button class="s-btn" type="button">Post answer</button>
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex ai-center sm:fd-column sm:ai-start">
+        <h3 class="mb0 sm:mb16 mr-auto fs-title fw-normal">Write your response</h3>
+        <div class="d-flex g4 sm:fd-row-reverse sm:jc-end">
+            <Button>Cancel</Button>
+            <Button weight="clear">Post answer</Button>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md b/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
deleted file mode 100644
index 0ea20570f7..0000000000
--- a/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-title: Buttons
-svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-button--docs
-figma: https://svelte.stackoverflow.design/figma/buttons
-description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
-updated: 2025-12-09
----
-
-<script lang="ts">
-  import { Button, Icon } from '@stackoverflow/stacks-svelte';
-  import type { Brand, Size, Variant, Weight } from '@stackoverflow/stacks-svelte';
-
-  import { IconTrash, IconArrowUp, IconServiceFacebook, IconServiceGoogle, IconServiceGitHub } from '@stackoverflow/stacks-icons';
-
-  const ButtonBrands: Brand[] = ["", "facebook", "github", "google"];
-  const ButtonSizes: Size[] = ["", "xs", "sm", "lg"];
-  const ButtonVariants: Variant[] = ["", "danger", "featured", "tonal"];
-  const ButtonWeights: Weight[] = ["", "clear"];
-
-  import ButtonTable from './ButtonTable.svelte';
-  import AnchorButtonTable from './AnchorButtonTable.svelte';
-  import LoadingButtonTable from './LoadingButtonTable.svelte';
-  import DropdownButtonTable from './DropdownButtonTable.svelte';
-  import BadgeButtonTable from './BadgeButtonTable.svelte';
-  import SizeTable from './SizeTable.svelte';
-  import ToggleButtonDemo from './ToggleButtonDemo.svelte';
-</script>
-
-## Styles
-
-Stacks provides 3 different button styles:
-
-1. [Base](#base)
-2. [Danger](#danger)
-3. [Featured](#featured)
-4. [Tonal](#tonal)
-
-Each style is explained below, detailing how and where to use these styles.
-
-### Base
-
-Base buttons can gain clear styling with the `.s-btn__clear` class.
-
-```html
-<button class="s-btn" type="button">…</button>
-<button class="s-btn s-btn__clear" type="button">…</button>
-```
-
-<ButtonTable />
-
-### Danger
-
-Danger buttons are a secondary button style, used to visually communicate destructive actions such as deleting content, accounts, or canceling services.
-
-```html
-<button class="s-btn s-btn__danger" type="button">…</button>
-<button class="s-btn s-btn__danger s-btn__clear" type="button">…</button>
-```
-
-<ButtonTable variant="danger" />
-
-### Featured
-
-Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.
-
-```html
-<button class="s-btn s-btn__featured" type="button">…</button>
-<button class="s-btn s-btn__featured s-btn__clear" type="button">…</button>
-```
-
-<ButtonTable variant="featured" />
-
-### Tonal
-
-Tonal buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.
-
-```html
-<button class="s-btn s-btn__tonal" type="button">…</button>
-<button class="s-btn s-btn__clear s-btn__tonal" type="button">…</button>
-```
-
-<ButtonTable variant="tonal" />
-
-## Anchors
-
-Anchors can be rendered with the `.s-btn` to adopt a button-like visual style for a link.
-
-```html
-<a href="#" class="s-btn">Ask question</a>
-```
-
-<AnchorButtonTable variants={ButtonVariants} weights={ButtonWeights} />
-
-## Loading
-
-Any button can have a loading state applied by adding the `.is-loading` state class.
-
-```html
-<button class="s-btn is-loading" type="button">…</button>
-```
-
-<LoadingButtonTable variants={ButtonVariants} weights={ButtonWeights} />
-
-## Dropdowns
-
-Adding the class `.s-btn__dropdown` to any button style will add an appropriately-styled caret. These should be paired with a menu or popover.
-
-```html
-<button class="s-btn s-btn__dropdown" type="button">Dropdown</button>
-```
-
-<DropdownButtonTable variants={ButtonVariants} weights={ButtonWeights} />
-
-## Badges
-
-Adding an `.s-btn--badge` to any button will add an appropriately-styled badge.
-
-```html
-<button class="s-btn" type="button">
-    Badge
-    <span class="s-btn--badge">
-        <span class="s-btn--number">198</span>
-    </span>
-</button>
-```
-
-<BadgeButtonTable variants={ButtonVariants} weights={ButtonWeights} />
-
-## Sizes
-
-A button's default font-size is determined by the `@body-fs` variable. To change the button's font-size, use the following classes with `.s-btn`:
-
-<SizeTable sizes={ButtonSizes} />
-
-## Toggle buttons
-
-Each button class has a selected state which can be visually activated by applying the `.is-selected` class. When a button can switch between selected and unselected states, it is important to also annotate the button with the `aria-pressed` attribute for accessibility. A `title` attribute may also be appropriate to describe what will happen when pressing the button.
-
-```html
-<button class="s-btn" type="button" aria-pressed="false" title="…">…</button>
-<button class="s-btn is-selected" type="button" aria-pressed="true" title="…">
-    …
-</button>
-
-<script>
-    toggleButton.addEventListener('click', () => {
-        let wasSelected = toggleButton.getAttribute('aria-pressed') === 'true';
-        let isSelected = !wasSelected;
-        toggleButton.classList.toggle('is-selected', isSelected);
-        toggleButton.setAttribute('aria-pressed', isSelected.toString());
-        …
-    });
-</script>
-```
-
-<ToggleButtonDemo />
-
-## Additional styles
-
-Stacks provides additional classes for cases that are a bit more rare.
-
-### Disabled
-
-| Type     | Class                    | Definition                                                  | Example                                                        |
-| -------- | ------------------------ | ----------------------------------------------------------- | -------------------------------------------------------------- |
-| Disabled | `[aria-disabled="true"]` | Adds disabled styling to any element with `.s-btn` applied. | <Button href="#" weight="clear" disabled>Ask question</Button> |
-
-### Resets
-
-| Type  | Class           | Definition                                                                                                                                                                                             | Example                                               |
-| ----- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| Unset | `.s-btn__unset` | Removes all styling from a button and reverts focus states to browser default.                                                                                                                         | <Button unset class="ws-nowrap">Unset button</Button> |
-| Link  | `.s-btn__link`  | Styles a button element as though it were a link. Instead of transforming an `s-btn` to a link, you most likely want to style a `button` as a [link](/product/components/links/#single-link-examples). | <Button link class="ws-nowrap">Link button</Button>   |
-
-### Icons
-
-| Type | Class          | Definition                                                       | Examples                                                                                                                                                                                                                                                                                                     |
-| ---- | -------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Icon | `.s-btn__icon` | Adds some margin overrides that apply to an icon within a button | <div class="d-flex ai-center"><button class="s-btn s-btn__danger s-btn__icon ws-nowrap mr8" type="button"><Icon src={IconTrash} /> Delete</button> <button class="s-btn s-btn__icon s-btn__link" type="button" aria-label="up"><Icon src={IconArrowUp} /><span class="v-visible-sr">up</span></button></div> |
-
-### Social
-
-| Type     | Class              | Definition                                          | Examples                                                                                                                       |
-| -------- | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| Facebook | `.s-btn__facebook` | Styles a button consistent with Facebook's branding | <button class="s-btn s-btn__icon s-btn__facebook ws-nowrap" type="button"><Icon src={IconServiceFacebook} /> Facebook</button> |
-| Google   | `.s-btn__google`   | Styles a button consistent with Google's branding   | <button class="s-btn s-btn__icon s-btn__google ws-nowrap" type="button"><Icon src={IconServiceGoogle} /> Google</button>       |
-| GitHub   | `.s-btn__github`   | Styles a button consistent with GitHub's branding   | <button class="s-btn s-btn__icon s-btn__github ws-nowrap" type="button"><Icon src={IconServiceGitHub} /> GitHub</button>       |
-
-## Ordering
-
-To maintain product consistency, buttons should maintain the following layout ordering:
-
-### Within a row
-
-Most button groups should be ordered from the most important to the least important action, left to right.
-
-```html
-<button class="s-btn" type="button">Post answer</button>
-<button class="s-btn s-btn__clear" type="button">Cancel</button>
-```
-
-<div class="d-flex g4 fw-wrap">
-  <Button>Post answer</Button>
-  <Button weight="clear">Cancel</Button>
-</div>
-
-### Within a column
-
-Sometimes the layout dictates that buttons need to be stacked on top of each other. Again, these buttons should be stacked from the most important to the least important, top to bottom.
-
-```html
-<div class="d-flex g4 fd-column">
-    <button class="s-btn" type="button">Post answer</button>
-    <button class="s-btn s-btn__clear" type="button">Cancel</button>
-</div>
-```
-
-<div class="d-flex g4 fd-column wmx2">
-  <Button>Post answer</Button>
-  <Button weight="clear">Cancel</Button>
-</div>
-
-### Within a header
-
-Sometimes the best place for a series of actions is in the same area as the title. In these cases, the buttons should be pulled to the right. Within this instance, the button order should be reversed with the most important action to the far right and the least important action to the far left.
-
-```html
-<div class="d-flex g4">
-    <div class="d-flex ai-center sm:fd-column sm:ai-start">
-        <h3 class="mb0 sm:mb16 mr-auto fs-title fw-normal">
-            Write your response
-        </h3>
-
-        <div class="d-flex g4 sm:fd-row-reverse sm:jc-end">
-            <button class="s-btn s-btn__clear" type="button">Cancel</button>
-            <button class="s-btn" type="button">Post answer</button>
-        </div>
-    </div>
-</div>
-```
-
-<div class="d-flex ai-center sm:fd-column sm:ai-start">
-  <h3 class="mb0 sm:mb16 mr-auto fs-title fw-normal">Write your response</h3>
-  <div class="d-flex g4 sm:fd-row-reverse sm:jc-end">
-    <Button>Cancel</Button>
-    <Button weight="clear">Post answer</Button>
-  </div>
-</div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/cards.md b/packages/stacks-docs-next/src/docs/public/system/components/cards.md
new file mode 100644
index 0000000000..ce3aa89273
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/cards.md
@@ -0,0 +1,11 @@
+---
+title: "Cards"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/code-blocks.md b/packages/stacks-docs-next/src/docs/public/system/components/code-blocks.md
new file mode 100644
index 0000000000..adf06832e7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/code-blocks.md
@@ -0,0 +1,472 @@
+---
+title: "Code blocks"
+description: "Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18805"
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-code-block',  modifies: 'N/A',           description: 'Base code block style.' },
+        { class: '.linenums',      modifies: '.s-code-block', description: 'Adds a line numbers column to the code block.' },
+        { class: '.linenums:<n>',  modifies: '.s-code-block', description: 'Adds a line numbers column to the code block starting at a number <n>.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Language examples
+
+The following examples are a small subset of the languages that `highlight.js` supports.
+
+### HTML
+
+```html
+<pre class="s-code-block language-html">
+    …
+</pre>
+```
+
+<Example>
+
+```html
+<form class="d-flex gy4 fd-column">
+    <label class="s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+```
+
+</Example>
+
+### JavaScript
+
+```html
+<pre class="s-code-block language-javascript">
+    …
+</pre>
+```
+
+<Example>
+
+```javascript
+import React, { Component } from 'react'
+import { IP } from '../constants/IP'
+import { withAuth0 } from '@auth0/auth0-react';
+
+class AddATournament extends Component {
+    componentDidMount() {
+        this.myNewListOfAllTournamentsWithAuth()
+    }
+}
+
+export default withAuth0(AddATournament);
+```
+
+</Example>
+
+### CSS
+
+```html
+<pre class="s-code-block language-css">
+    …
+</pre>
+```
+
+<Example>
+
+```css
+.s-input,
+.s-textarea {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.6em 0.7em;
+    border: 1px solid var(--bc-darker);
+    border-radius: 3px;
+    background-color: var(--white);
+    color: var(--fc-dark);
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.15384615;
+    scrollbar-color: var(--scrollbar) transparent;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+    .s-input,
+    .s-textarea {
+        font-size: 16px;
+        padding: 0.36em 0.55em;
+    }
+    .s-input::-webkit-input-placeholder,
+    .s-textarea::-webkit-input-placeholder {
+        line-height: normal !important;
+    }
+}
+```
+
+</Example>
+
+### Java
+
+```html
+<pre class="s-code-block language-java">
+    …
+</pre>
+```
+
+<Example>
+
+```java
+package l2f.gameserver.model;
+
+public abstract strictfp class L2Char extends L2Object {
+  public static final Short ERROR = 0x0001;
+
+  public void moveTo(int x, int y, int z) {
+    _ai = null;
+    log("Should not be called");
+    if (1 > 5) { // what?
+      return;
+    }
+  }
+}
+```
+
+</Example>
+
+### Ruby
+
+```html
+<pre class="s-code-block language-ruby">
+    …
+</pre>
+```
+
+<Example>
+
+```ruby
+# The Greeter class
+class Greeter
+  def initialize(name)
+    @name = name.capitalize
+  end
+
+  def salute
+    puts "Hello #{@name}!"
+  end
+end
+
+g = Greeter.new("world")
+g.salute
+```
+
+</Example>
+
+### Python
+
+```html
+<pre class="s-code-block language-python">
+    …
+</pre>
+```
+
+<Example>
+
+```python
+def all_indices(value, qlist):
+    indices = []
+    idx = -1
+    while True:
+        try:
+            idx = qlist.index(value, idx+1)
+            indices.append(idx)
+        except ValueError:
+            break
+    return indices
+
+all_indices("foo", ["foo","bar","baz","foo"])
+```
+
+</Example>
+
+### Objective-C
+
+```html
+<pre class="s-code-block language-objectivec">
+    …
+</pre>
+```
+
+<Example>
+
+```objectivec
+#import <UIKit/UIKit.h>
+#import "Dependency.h"
+
+@protocol WorldDataSource
+@optional
+- (NSString*)worldName;
+@required
+- (BOOL)allowsToLive;
+@end
+
+@property (nonatomic, readonly) NSString *title;
+- (IBAction) show;
+@end
+
+- (UITextField *) userName {
+    UITextField *retval = nil;
+    @synchronized(self) {
+        retval = [[userName retain] autorelease];
+    }
+    return retval;
+}
+
+- (void) setUserName:(UITextField *)userName_ {
+    @synchronized(self) {
+      [userName_ retain];
+      [userName release];
+      userName = userName_;
+    }
+}
+```
+
+</Example>
+
+### Swift
+
+```html
+<pre class="s-code-block language-swift">
+    …
+</pre>
+```
+
+<Example>
+
+```swift
+import Foundation
+
+@objc class Person: Entity {
+  var name: String!
+  var age:  Int!
+
+  init(name: String, age: Int) {
+    /* /* ... */ */
+  }
+
+  // Return a descriptive string for this person
+  func description(offset: Int = 0) -> String {
+    return "\(name) is \(age + offset) years old"
+  }
+}
+```
+
+</Example>
+
+### Less
+
+```html
+<pre class="s-code-block language-less">
+    …
+</pre>
+```
+
+<Example>
+
+```less
+@import "fruits";
+
+@rhythm: 1.5em;
+
+@media screen and (min-resolution: 2dppx) {
+    body {font-size: 125%}
+}
+
+section > .foo + #bar:hover [href*="less"] {
+    margin:     @rhythm 0 0 @rhythm;
+    padding:    calc(5% + 20px);
+    background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat;
+    background-image: linear-gradient(-135deg, wheat, fuchsia) !important ;
+    background-blend-mode: multiply;
+}
+
+@font-face {
+    font-family: /* ? */ 'Omega';
+    src: url('../fonts/omega-webfont.woff?v=2.0.2');
+}
+
+.icon-baz::before {
+    display:     inline-block;
+    font-family: "Omega", Alpha, sans-serif;
+    content:     "\f085";
+    color:       rgba(98, 76 /* or 54 */, 231, .75);
+}
+```
+
+</Example>
+
+### JSON
+
+```html
+<pre class="s-code-block language-json">
+    …
+</pre>
+```
+
+<Example>
+
+```json
+[
+  {
+    "title": "apples",
+    "count": [12000, 20000],
+    "description": {"text": "...", "sensitive": false}
+  },
+  {
+    "title": "oranges",
+    "count": [17500, null],
+    "description": {"text": "...", "sensitive": false}
+  }
+]
+```
+
+</Example>
+
+### C#
+
+```html
+<pre class="s-code-block language-csharp">
+    …
+</pre>
+```
+
+<Example>
+
+```csharp
+using System.IO.Compression;
+
+#pragma warning disable 414, 3021
+
+namespace MyApplication
+{
+    [Obsolete("...")]
+    class Program : IInterface
+    {
+        public static List<int> JustDoIt(int count)
+        {
+            Console.WriteLine($"Hello {Name}!");
+            return new List<int>(new int[] { 1, 2, 3 })
+        }
+    }
+}
+```
+
+</Example>
+
+### SQL
+
+```html
+<pre class="s-code-block language-sql">
+    …
+</pre>
+```
+
+<Example>
+
+```sql
+CREATE TABLE "topic" (
+    "id" serial NOT NULL PRIMARY KEY,
+    "forum_id" integer NOT NULL,
+    "subject" varchar(255) NOT NULL
+);
+ALTER TABLE "topic"
+ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
+REFERENCES "forum" ("id");
+
+-- Initials
+insert into "topic" ("forum_id", "subject")
+values (2, 'D''artagnian');
+```
+
+</Example>
+
+### Diff
+
+```html
+<pre class="s-code-block language-diff">
+    …
+</pre>
+```
+
+<Example>
+
+```diff
+Index: languages/ini.js
+===================================================================
+--- languages/ini.js    (revision 199)
++++ languages/ini.js    (revision 200)
+@@ -1,8 +1,7 @@
+ hljs.LANGUAGES.ini =
+ {
+   case_insensitive: true,
+-  defaultMode:
+-  {
++  defaultMode: {
+     contains: ['comment', 'title', 'setting'],
+     illegal: '[^\\s]'
+   },
+
+*** /path/to/original timestamp
+--- /path/to/new      timestamp
+***************
+*** 1,3 ****
+--- 1,9 ----
++ This is an important
++ notice! It should
++ therefore be located at
++ the beginning of this
++ document!
+
+! compress the size of the
+! changes.
+
+  It is important to spell
+```
+
+</Example>
+
+## Line numbers
+
+Add `.linenums` to include line numbers on a code block.
+
+### Default
+
+```html
+<pre class="s-code-block language-html linenums">
+    …
+</pre>
+```
+
+<Example>
+<pre class="language-html s-code-block" tabindex="0"><code class="language-html s-code-block"><code class="s-code-block--line-numbers"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex g4 fd-column"</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"full-name"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"full-name"</span>/&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre>
+</Example>
+
+### Offset
+
+Append a number preceeded by `:` to `.linenums` to offset the start of the line numbers.
+
+```html
+<pre class="s-code-block language-json linenums:23">
+    …
+</pre>
+```
+
+<Example>
+<pre class="language-json s-code-block" tabindex="0"><code class="language-json s-code-block"><code class="s-code-block--line-numbers"><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div><div>32</div><div>33</div><div>34</div></code>[<br>  &#123;<br>    <span class="hljs-attr">"title"</span>: <span class="hljs-string">"apples"</span>,<br>    <span class="hljs-attr">"count"</span>: [<span class="hljs-number">12000</span>, <span class="hljs-number">20000</span>],<br>    <span class="hljs-attr">"description"</span>: &#123;<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>&#125;<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">"title"</span>: <span class="hljs-string">"oranges"</span>,<br>    <span class="hljs-attr">"count"</span>: [<span class="hljs-number">17500</span>, <span class="hljs-literal">null</span>],<br>    <span class="hljs-attr">"description"</span>: &#123;<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>&#125;<br>  &#125;<br>]</code></pre>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/editor/editor-example-content.ts b/packages/stacks-docs-next/src/docs/public/system/components/editor/editor-example-content.ts
new file mode 100644
index 0000000000..e624664c7a
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/editor/editor-example-content.ts
@@ -0,0 +1 @@
+export const editorExampleContent = "Stacks adds a new `s-prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:\n\n```html\n<article class=\"s-prose\">\n  <h1>Garlic bread with cheese: What the science tells us</h1>\n  <p>\n    For years parents have espoused the health benefits of eating garlic bread with cheese to their\n    children, with the food earning such an iconic status in our culture that kids will often dress\n    up as warm, cheesy loaf for Halloween.\n  </p>\n  <p>\n    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases\n    springing up around the country.\n  </p>\n  <!-- ... -->\n</article>\n```\n\n## What to expect from here on out\n\nWhat follows from here is just a bunch of absolute nonsense we\u2019ve written to dogfood the component itself. It includes every sensible typographic element we could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.\n\nIt\u2019s important to cover all of these use cases for a few reasons:\n\n1. We want everything to look good out of the box.\n2. Really just the first reason, that\u2019s the whole point of the plugin.\n3. Here\u2019s a third pretend reason though a list with three items looks more realistic than a list with two items.\n\nNow we\u2019re going to try out another header style.\n\n### Typography should be easy\n\nSo that\u2019s a header for you\u2014with any luck if we\u2019ve done our job correctly that will look pretty reasonable.\n\nSomething a wise person once told me about typography is:\n\n> Typography is pretty important if you don\u2019t want your stuff to look like trash. Make it good then it won\u2019t be bad.\n\nIt\u2019s probably important that images look okay here by default as well:\n\n<img\n  src=\"https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80\"\n  alt=\"two people performing a transaction at a counter on either side of a point of sale system in a trendy salon\"\n/>\n\nNow I\u2019m going to show you an example of an unordered list to make sure that looks good, too:\n\n- So here is the first item in this list.\n- In this example we\u2019re keeping the items short.\n- Later, we\u2019ll use longer, more complex list items.\n\nAnd that\u2019s the end of this section.\n\n## What if we stack headings?\n\n### We should make sure that looks good, too.\n\nSometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.\n\n### When a heading comes after a paragraph \u2026\n\nWhen a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let\u2019s see what a more complex list would look like.\n\n- **I often do this thing where list items have headings.**\n\n  For some reason I think this looks cool which is unfortunate because it\u2019s pretty annoying to get the styles right.\n\n  I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn\u2019t write this way.\n\n- **Since this is a list, I need at least two items.**\n\n  I explained what I\u2019m doing already in the previous list item, but a list wouldn\u2019t be a list if it only had one item, and we really want this to look realistic. That\u2019s why I\u2019ve added this second list item so I actually have something to look at when writing the styles.\n\n- **It\u2019s not a bad idea to add a third item either.**\n\n  I think it probably would\u2019ve been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.\n\nAfter this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.\n\n## Code should look okay by default.\n\nHere\u2019s what a default `tailwind.config.js` file looks like at the time of writing:\n\n```js\nmodule.exports = {\n  purge: [],\n  theme: {\n    extend: {},\n  },\n  variants: {},\n  plugins: [],\n}\n```\n\nHopefully that looks good enough to you.\n\n### What about nested lists?\n\nNested lists basically always look bad which is why editors like Medium don\u2019t even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.\n\n1. **Nested lists are rarely a good idea.**\n   - You might feel like you are being really \u201corganized\u201d or something but you are just creating a gross shape on the screen that is hard to read.\n   - Nested navigation in UIs is a bad idea too, keep things as flat as possible.\n   - Nesting tons of folders in your source code is also not helpful.\n2. **Since we need to have more items, here\u2019s another one.**\n   - I\u2019m not sure if we\u2019ll bother styling more than two levels deep.\n   - Two is already too much, three is guaranteed to be a bad idea.\n   - If you nest four levels deep you belong in prison.\n3. **Two items isn\u2019t really a list, three is good though.**\n   - Again please don\u2019t nest lists if you want people to actually read your content.\n   - Nobody wants to look at this.\n   - I\u2019m upset that we even have to bother styling this.\n\nThe most annoying thing about lists in Markdown is that `<li>` elements aren\u2019t given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.\n\n- **For example, here\u2019s another nested list.**\n\n  But this time with a second paragraph.\n\n  - These list items won\u2019t have `<p>` tags\n  - Because they are only one line each\n\n- **But in this second top-level list item, they will.**\n\n  This is especially annoying because of the spacing on this paragraph.\n\n  - As you can see here, because I\u2019ve added a second line, this list item now has a `<p>` tag.\n\n    This is the second line I\u2019m talking about by the way.\n\n  - Finally here\u2019s another list item so it\u2019s more like a list.\n\n- A closing list item, but with no nested list, because why not?\n\nAnd finally a sentence to close off this section.\n\n## There are other elements we need to style\n\nI almost forgot to mention links, like [Stack Overflow](https://stackoverflow.com).\n\nWe even included table styles, check it out:\n\n<div class=\"s-table-container\">\n  <table class=\"s-table\">\n    <thead>\n      <tr>\n        <th>Wrestler</th>\n        <th>Origin</th>\n        <th>Finisher</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>Bret \"The Hitman\" Hart</td>\n        <td>Calgary, AB</td>\n        <td>Sharpshooter</td>\n      </tr>\n      <tr>\n        <td>Stone Cold Steve Austin</td>\n        <td>Austin, TX</td>\n        <td>Stone Cold Stunner</td>\n      </tr>\n      <tr>\n        <td>Randy Savage</td>\n        <td>Sarasota, FL</td>\n        <td>Elbow Drop</td>\n      </tr>\n      <tr>\n        <td>Vader</td>\n        <td>Boulder, CO</td>\n        <td>Vader Bomb</td>\n      </tr>\n      <tr>\n        <td>Razor Ramon</td>\n        <td>Chuluota, FL</td>\n        <td>Razor\u2019s Edge</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\nWe also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements.\n\n### Sometimes I even use `code` in headings\n\nAnother thing I\u2019ve done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`stackexchange/stacks`](https://github.com/stackexchange/stacks) repository.\n\n### We still need to think about stacked headings though.\n\n#### Let\u2019s make sure we don\u2019t screw that up with `h4` elements, either.\n\nPhew, with any luck we have styled the headings above this text and they look pretty good.\n\n##### We should also make sure we're styling `h5` elements as well.\n\nLet\u2019s add a closing paragraph here so things end with a decently sized block of text. I can\u2019t explain why I want things to end that way but I have to assume it\u2019s because I think things will look weird or unbalanced if there is a heading too close to the end of the document.\n\n###### And, finally, an `h6`.\nUltimately, though, we also want to support the `h6` headers.\n\nWhat I\u2019ve written here is probably long enough, but adding this final sentence can\u2019t hurt.";
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/editor/index.md b/packages/stacks-docs-next/src/docs/public/system/components/editor/index.md
new file mode 100644
index 0000000000..66ef3e5aaf
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/editor/index.md
@@ -0,0 +1,99 @@
+---
+title: "Editor"
+description: "The Stacks editor adds \"what you see is what you get\" and Markdown capabilities to textareas. It is available as a separate <a href=\"https://github.com/StackExchange/Stacks-Editor\">Editor</a> repository, but requires Stacks' CSS for styling."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18806"
+js: true
+---
+
+<script lang="ts">
+    import Example from '$components/Example.svelte';
+    import StacksEditorDemo from '$components/StacksEditorDemo.svelte';
+    import { editorExampleContent } from './editor-example-content';
+</script>
+
+Because of its size, the Stacks editor is bundled independently of Stacks. You can install it a few ways:
+
+## Installation
+
+### NPM
+
+The Stacks Editor is available as an NPM package. To make it available in your node modules, `npm install @stackoverflow/stacks-editor`
+
+### Import via Modules or CommonJS
+
+```javascript
+import { StacksEditor } from "@stackoverflow/stacks-editor";
+// Don't forget to include the styles as well
+import "@stackoverflow/stacks-editor/styles.css";
+
+new StacksEditor(
+    document.querySelector("#editor-container"),
+    "*Hello* World!",
+    {}
+);
+```
+
+### Import via script tag
+
+```html
+<!-- Include the bundled styles -->
+<link rel="stylesheet" src="path/to/node_modules/@stackoverflow/stacks-editor/dist/styles.css"/>
+
+<div id="editor-container"></div>
+
+<!-- highlight.js is not included in the bundle, but is required -->
+<script src="path/to/highlight.pack.js"></script>
+<script src="path/to/node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>
+<script>
+    new window.stacksEditor.StacksEditor(
+        document.querySelector("#editor-container"),
+        "*Hello* World!",
+        {}
+    );
+</script>
+```
+
+## Configuration
+
+There are several options you can pass to the Stacks Editor.
+
+## Examples
+
+### Empty
+
+```html
+<div id="editor-example-1"></div>
+<script>
+    new window.stacksEditor.StacksEditor(
+        document.querySelector("#editor-example-1"),
+        "",
+        {}
+    );
+</script>
+```
+
+<Example>
+    <StacksEditorDemo />
+</Example>
+
+### Textarea content with tables enabled
+
+```html
+<textarea id="editor-content-2" class="d-none">…</textarea>
+<div id="editor-example-2"></div>
+<script>
+    new window.stacksEditor.StacksEditor(
+        document.querySelector("#editor-example-2"),
+        document.querySelector("#editor-content-2").value,
+        { parserFeatures: { tables: true } }
+    );
+</script>
+```
+
+<Example>
+    <StacksEditorDemo
+        content={editorExampleContent}
+        options={{ parserFeatures: { tables: true } }}
+        class="hmn6"
+    />
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/empty-states.md b/packages/stacks-docs-next/src/docs/public/system/components/empty-states.md
new file mode 100644
index 0000000000..6985623179
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/empty-states.md
@@ -0,0 +1,88 @@
+---
+title: "Empty states"
+description: "Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user's last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-emptystate--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18807&p=f&m=dev"
+---
+
+<script lang="ts">
+    import { EmptyState, Button } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-empty-state', modifies: 'N/A', description: 'Base empty state style.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## No data or results
+
+Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.
+
+### Actionable
+
+If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.
+
+```html
+<div class="s-empty-state wmx4 p48">
+    @Svg.Spot.Empty.With("native")
+    <h4 class="s-empty-state--title">No questions match your result.</h4>
+    <p>Try refining your search term or trying something more general.</p>
+    <button class="s-btn s-btn__tonal">Clear filters</button>
+</div>
+```
+
+<Example>
+    <EmptyState title="No questions match your result." class="wmx4 p48">
+        {#snippet description()}
+            Try refining your search term or trying something more general.
+        {/snippet}
+        {#snippet actions()}
+            <Button variant="tonal">Clear filters</Button>
+        {/snippet}
+    </EmptyState>
+</Example>
+
+### Non-actionable
+
+If the user can't take an action to fix the situation, it's appropriate to set expectations.
+
+```html
+<div class="s-empty-state wmx4 p48">
+    @Svg.Spot.Empty.With("native")
+    <h4 class="s-empty-state--title">User trends not ready</h4>
+    <p>Please check back in a few days.</p>
+</div>
+```
+
+<Example>
+    <EmptyState title="User trends not ready" class="wmx4 p48">
+        {#snippet description()}
+            Please check back in a few days.
+        {/snippet}
+    </EmptyState>
+</Example>
+
+### Minimal
+
+If desired, both the title and call-to-action may be omitted for a minimal look.
+
+```html
+<div class="s-empty-state wmx4 p48">
+    @Svg.Spot.Empty.With("native")
+    <p>There's no data associated with <a href="#" class="s-link s-link__underlined">this account</a>.</p>
+</div>
+```
+
+<Example>
+    <EmptyState class="wmx4 p48">
+        {#snippet description()}
+            There's no data associated with <a href="#" class="s-link s-link__underlined">this account</a>.
+        {/snippet}
+    </EmptyState>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/expandable.md b/packages/stacks-docs-next/src/docs/public/system/components/expandable.md
new file mode 100644
index 0000000000..051858e8d6
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/expandable.md
@@ -0,0 +1,11 @@
+---
+title: "Expandable"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/link-previews.md b/packages/stacks-docs-next/src/docs/public/system/components/link-previews.md
new file mode 100644
index 0000000000..9ca09cb22d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/link-previews.md
@@ -0,0 +1,11 @@
+---
+title: "Link Previews"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/links.md b/packages/stacks-docs-next/src/docs/public/system/components/links.md
new file mode 100644
index 0000000000..71b446994d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/links.md
@@ -0,0 +1,150 @@
+---
+title: "Links"
+description: "Links are lightly styled via the <code>a</code> element by default. In addition, we provide <code>.s-link</code> and its variations. In rare situations, <code>.s-link</code> can be applied to a <code>button</code> while maintaining the look of an anchor."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-link--docs"
+---
+
+<script lang="ts">
+    import { Link } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const linkClasses: ClassTableRow[] = [
+        { class: '.s-link',             modifies: 'N/A',       description: 'Base link style that is used almost universally.' },
+        { class: '.s-link__grayscale',  modifies: '.s-link',   description: 'A link style modification with our default text color.' },
+        { class: '.s-link__muted',      modifies: '.s-link',   description: 'Applies a visually muted style to the base style.' },
+        { class: '.s-link__danger',     modifies: '.s-link',   description: 'Applies an important, destructive red to the base style.' },
+        { class: '.s-link__inherit',    modifies: '.s-link',   description: "Applies the parent element's text color." },
+        { class: '.s-link__underlined', modifies: '.s-link',   description: "Adds an underline to the link's text." },
+        { class: '.s-link__dropdown',   modifies: '.s-link',   description: 'Applies a caret for dropdowns and additional interactivity.' },
+    ];
+
+    const anchorClasses: ClassTableRow[] = [
+        { class: '.s-anchors',             modifies: 'N/A',        description: 'A consistent link style is applied to all descendent anchors.' },
+        { class: '.s-anchors__default',    modifies: '.s-anchors', description: "All descendent links receive s-link's default styling." },
+        { class: '.s-anchors__grayscale',  modifies: '.s-anchors', description: 'Applies gray styling to all descendent links.' },
+        { class: '.s-anchors__muted',      modifies: '.s-anchors', description: 'Applies a visually muted style to all descendent links.' },
+        { class: '.s-anchors__danger',     modifies: '.s-anchors', description: 'Applies an important, destructive red to all descendent links.' },
+        { class: '.s-anchors__underlined', modifies: '.s-anchors', description: 'Applies an underline to all descendent links.' },
+        { class: '.s-anchors__inherit',    modifies: '.s-anchors', description: "Applies the parent element's text color to all descendent links." },
+    ];
+</script>
+
+## Links
+
+### Link classes
+
+<ClassTable classes={linkClasses} />
+
+### Single link examples
+
+```html
+<a class="s-link" href="#">Default</a>
+<a class="s-link s-link__grayscale" href="#">Grayscale</a>
+<a class="s-link s-link__muted" href="#">Muted</a>
+<a class="s-link s-link__danger" href="#">Danger</a>
+<a class="s-link s-link__inherit" href="#">Inherit</a>
+<a class="s-link s-link__underlined" href="#">Underlined</a>
+<button class="s-link">Button Link</button>
+<a class="s-link s-link__dropdown" href="#">Links</a>
+```
+
+<Example>
+    <div class="d-flex g8 ai-center fw-wrap">
+        <Link href="#">Default</Link>
+        <Link href="#" variant="grayscale">Grayscale</Link>
+        <Link href="#" variant="muted">Muted</Link>
+        <Link href="#" variant="danger">Danger</Link>
+        <Link href="#" variant="inherit">Inherit</Link>
+        <Link href="#" underlined>Underlined</Link>
+        <Link>Button Link</Link>
+        <Link href="#" dropdown>Links</Link>
+    </div>
+</Example>
+
+### Accessibility
+
+Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it's a link is the color of the text, it will require an underline in addition to the color. Reference [WCAG SC 1.4.1](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73) for more details.
+
+## Anchors
+
+### Anchor classes
+
+<ClassTable classes={anchorClasses} />
+
+### Anchor examples
+
+Sometimes you need to give all `<a>` elements inside a container or component the same color, even when it's impractical or even impossible to give each anchor element an `s-link` class (e.g. because the markup is generated from Markdown).
+
+In this case, you can add the `s-anchors` class together with one of the modifiers `s-anchors__default`, `s-anchors__grayscale`, `s-anchors__muted`, `s-anchors__danger`, or `s-anchors__inherit` to the container.
+
+```html
+<div class="s-anchors">…</div>
+<div class="s-anchors s-anchors__grayscale">…</div>
+<div class="s-anchors s-anchors__muted">…</div>
+<div class="s-anchors s-anchors__danger">…</div>
+<div class="s-anchors s-anchors__underlined">…</div>
+<div class="s-anchors s-anchors__inherit">…</div>
+```
+
+<Example>
+    <div class="s-anchors docs-card mb8">
+        There is a <a href="#">default link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+    <div class="s-anchors s-anchors__grayscale docs-card mb8 fc-orange-500">
+        There is a <a href="#">grayscale link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+    <div class="s-anchors s-anchors__muted docs-card mb8">
+        There is a <a href="#">muted link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+    <div class="s-anchors s-anchors__danger docs-card mb8">
+        There is a <a href="#">danger link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+    <div class="s-anchors s-anchors__underlined docs-card mb8">
+        There is a <a href="#">underlined link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+    <div class="s-anchors s-anchors__inherit docs-card mb8 fc-green-400">
+        There is a <a href="#">inherit link here</a>, <button class="s-btn s-btn__link">a button</button>, and <a href="https://stackoverflow.com">another one</a>.
+    </div>
+</Example>
+
+<!-- TODO: .s-anchors classes need to be fixed to apply the appropriate styles when within an .s-prose container -->
+
+One additional level of nesting is supported, but even that should be exceedingly rare. More than that is not supported.
+
+```html
+<div class="s-anchors s-anchors__danger">
+    All <a href="#">links</a> in this <a href="#">outer box</a>
+    are <a href="#">dangerous</a>.
+    <div class="s-anchors s-anchors__default w70 mt8">
+        But all <a href="#">links</a> in this <a href="#">inner box</a>
+        have the <a href="#">default</a> link color.
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-anchors s-anchors__danger docs-card">
+        All <a href="#">links</a> in this <a href="#">outer box</a> are <a href="#">dangerous</a>.
+        <div class="s-anchors s-anchors__default docs-card w70 mt8">
+            But all <a href="#">links</a> in this <a href="#">inner box</a> have the <a href="#">default</a> link color.
+        </div>
+    </div>
+</Example>
+
+An explicit `s-link` on an anchor overrides any `s-anchors` setting:
+
+```html
+<div class="s-anchors s-anchors__danger">
+    All <a href="#">links</a> in this <a href="#">box</a> are <a href="#">dangerous</a>,
+    except for <a class="s-link">this one</a> which uses the default color, and
+    <a class="s-link s-link__muted">this muted link</a>.
+</div>
+```
+
+<Example>
+    <div class="s-anchors s-anchors__danger docs-card">
+        All <a href="#">links</a> in this <a href="#">box</a> are <a href="#">dangerous</a>, except for <a class="s-link">this one</a> which uses the default color, and <a class="s-link s-link__muted">this muted link</a>.
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/loader.md b/packages/stacks-docs-next/src/docs/public/system/components/loader.md
new file mode 100644
index 0000000000..0d00faa0b0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/loader.md
@@ -0,0 +1,55 @@
+---
+title: "Loader"
+description: "The loader component indicates an active wait state for a page, section, or interactive element."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-loader--docs"
+---
+
+<script lang="ts">
+    import { Loader } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import PreviewTable from '$components/PreviewTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+    import type { PreviewTableRow } from '$components/PreviewTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-loader',          parent: 'N/A',       modifies: 'N/A',       description: 'Base class for the loader component.' },
+        { class: '.s-loader--sr-text', parent: '.s-loader', modifies: 'N/A',       description: 'Necessary to render the center loader block and renders the accessible text.' },
+        { class: '.s-loader__sm',      parent: 'N/A',       modifies: '.s-loader', description: 'A small variant of the loader component.' },
+        { class: '.s-loader__lg',      parent: 'N/A',       modifies: '.s-loader', description: 'A large variant of the loader component.' },
+    ];
+
+    const sizes: PreviewTableRow[] = [
+        { size: 'sm',      classes: ['.s-loader', '.s-loader__sm'], description: 'A small variant of the loader component.' },
+        { size: undefined, classes: ['.s-loader'],                  description: 'Base class for the loader component.' },
+        { size: 'lg',      classes: ['.s-loader', '.s-loader__lg'], description: 'A large variant of the loader component.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Examples
+
+### Base
+
+The base loader component displays three animated squares.
+
+```html
+<div class="s-loader">
+    <div class="s-loader--sr-text">Loading…</div>
+</div>
+```
+
+<Example>
+    <Loader />
+</Example>
+
+### Sizes
+
+<PreviewTable rows={sizes}>
+    {#snippet example(row)}
+        <Loader size={row.size} />
+    {/snippet}
+</PreviewTable>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/menus.md b/packages/stacks-docs-next/src/docs/public/system/components/menus.md
new file mode 100644
index 0000000000..2449c8a368
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/menus.md
@@ -0,0 +1,270 @@
+---
+title: "Menus"
+description: "A menu offers a contextual list of actions or functions."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-menu--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18810"
+---
+
+<script lang="ts">
+    import { Menu, MenuItem, MenuDivider, MenuTitle, MenuCheckItem } from '@stackoverflow/stacks-svelte';
+    import { IconHome, IconInbox, IconSettings } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-menu',                parent: 'N/A',             modifies: 'N/A',              description: 'Base container styling for a menu.' },
+        { class: '.s-menu--divider',       parent: '.s-menu',         modifies: 'N/A',              description: 'Adds a divider line between menu sections.' },
+        { class: '.s-menu--item',          parent: '.s-menu',         modifies: 'N/A',              description: 'Applies link styling to link within a menu. Used for actionable elements.' },
+        { class: '.s-menu--title',         parent: '.s-menu',         modifies: 'N/A',              description: 'Adds appropriate styling for a title within a menu.' },
+        { class: '.s-menu--icon',          parent: '.s-menu--item',   modifies: 'N/A',              description: 'Applies styling to an icon.' },
+        { class: '.s-menu--action',        parent: '.s-menu--item',   modifies: 'N/A',              description: 'Applies link styling to link within a menu. Used for actionable elements.' },
+        { class: '.s-menu--action__danger',parent: 'N/A',             modifies: '.s-menu--action',  description: 'Applies danger styling to a menu link. Used for destructive actions.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Examples
+
+A menu displays a list of choices temporarily, and usually represent tasks or actions. Don't confuse menus for [navigation](/system/components/navigation).
+
+### Basic
+
+At its most basic, a menu is a simple styled list of contextual actions. Because they're contextual, it's strongly recommended that a menu is contained within a [popover](/system/components/popovers) or a [card](/system/components/cards). When placed in various containers, you'll need to either account for the padding on the container, or use negative margins on the menu component itself.
+
+```html
+<div class="s-popover p8">
+    <ul class="s-menu" role="menu">
+        <li class="s-menu--item" role="menuitem">
+            <a class="s-menu--action" href="…">…</a>
+        </li>
+        <li class="s-menu--item" role="menuitem">
+            <button class="s-menu--action">…</button>
+        </li>
+    </ul>
+</div>
+
+<ul class="s-menu" role="menu">
+    <li class="s-menu--item" role="menuitem">
+        <a class="s-menu--action" href="…">…</a>
+    </li>
+</ul>
+```
+
+<Example>
+    <div class="d-flex g16 ai-start fw-wrap">
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Within a popover</span>
+            <div class="s-popover is-visible ps-relative ws2 p8">
+                <Menu>
+                    <MenuItem href="#">Share</MenuItem>
+                    <MenuItem href="#">Edit</MenuItem>
+                    <MenuItem href="#">Follow</MenuItem>
+                </Menu>
+            </div>
+        </div>
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Within a card</span>
+            <div class="docs-card p8 ws1">
+                <Menu>
+                    <MenuItem href="#">Share</MenuItem>
+                    <MenuItem href="#">Edit</MenuItem>
+                    <MenuItem href="#">Follow</MenuItem>
+                </Menu>
+            </div>
+        </div>
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">No container</span>
+            <Menu class="ws1">
+                <MenuItem href="#">Share</MenuItem>
+                <MenuItem href="#">Edit</MenuItem>
+                <MenuItem href="#">Follow</MenuItem>
+            </Menu>
+        </div>
+    </div>
+</Example>
+
+### Titles and dividers
+
+You can split up your menu by using either titles, dividers, or some combination of the two. Titles help group similar conceptual actions—in this example, we've grouped all sharing options. We've also split our destructive actions into their own section using a divider.
+
+```html
+<div class="s-popover px0 py4">
+    <ul class="s-menu" role="menu">
+        <li class="s-menu--title" role="separator">…</li>
+        <li class="s-menu--item" role="menuitem">
+            <a class="s-menu--action" href="…">…</a>
+        </li>
+        <li class="s-menu--divider" role="separator"></li>
+        <li class="s-menu--item" role="menuitem">
+            <a class="s-menu--action s-menu--action__danger" href="…">…</a>
+        </li>
+    </ul>
+</div>
+```
+
+<Example>
+    <div class="s-popover is-visible ps-relative ws2 p8">
+        <Menu>
+            <MenuTitle>Share</MenuTitle>
+            <MenuItem href="#">Email</MenuItem>
+            <MenuItem href="#">Facebook</MenuItem>
+            <MenuItem href="#">Twitter</MenuItem>
+            <MenuDivider />
+            <MenuItem href="#" danger>Deactivate</MenuItem>
+            <MenuItem href="#" danger>Delete</MenuItem>
+        </Menu>
+    </div>
+</Example>
+
+### Icons
+
+Icons can be added to menu items to help visually distinguish actions. Include the `s-menu--icon` class on the icon to ensure proper spacing and alignment.
+
+```html
+<ul class="s-menu" role="menu">
+    <li class="s-menu--item" role="menuitem">
+        <a class="s-menu--action" href="#">
+            @Svg.Home.With("s-menu--icon")
+            Home
+        </a>
+    </li>
+    <li class="s-menu--item" role="menuitem">
+        <a class="s-menu--action" href="#">
+            @Svg.Inbox.With("s-menu--icon")
+            Inbox
+        </a>
+    </li>
+    <li class="s-menu--item" role="menuitem">
+        <a class="s-menu--action" href="#">
+            @Svg.Settings.With("s-menu--icon")
+            Settings
+        </a>
+    </li>
+</ul>
+```
+
+<Example>
+    <div class="s-popover is-visible ps-relative ws2 p8">
+        <Menu>
+            <MenuItem href="#" icon={IconHome}>Home</MenuItem>
+            <MenuItem href="#" icon={IconInbox}>Inbox</MenuItem>
+            <MenuItem href="#" icon={IconSettings}>Settings</MenuItem>
+        </Menu>
+    </div>
+</Example>
+
+### Selected states
+
+To create selectable menu items, add `.s-checkbox.s-checkbox__checkmark` or `.s-radio.s-radio__checkmark` to the `.s-menu--action` element and include a radio or checkbox input as a child element. When the input is `:checked`, the corresponding menu item displays a checkmark.
+
+```html
+<fieldset class="s-menu s-form-group">
+    <legend class="s-menu--title">…</legend>
+    <div class="s-menu--item">
+        <label class="s-menu--action s-radio s-radio__checkmark" for="…">
+            <input type="radio" id="…" name="…" value="…">
+            …
+        </label>
+    </div>
+    …
+</fieldset>
+
+<fieldset class="s-menu s-form-group">
+    <legend class="s-menu--title">…</legend>
+    <div class="s-menu--item">
+        <label class="s-menu--action s-checkbox s-checkbox__checkmark" for="…">
+            <input type="checkbox" id="…" name="…" value="…">
+            …
+        </label>
+    </div>
+    …
+</fieldset>
+```
+
+<Example>
+    <div class="d-flex g16 ai-start fw-wrap">
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">With radio input</span>
+            <div class="s-popover is-visible ps-relative ws2 p8">
+                <Menu type="fieldset">
+                    <MenuTitle type="legend">Select one</MenuTitle>
+                    <MenuCheckItem id="radio-frequent" type="radio" name="sort-radio" label="Frequent" checked />
+                    <MenuCheckItem id="radio-votes"    type="radio" name="sort-radio" label="Votes" />
+                    <MenuCheckItem id="radio-unanswered" type="radio" name="sort-radio" label="Unanswered" />
+                </Menu>
+            </div>
+        </div>
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">With checkbox input</span>
+            <div class="s-popover is-visible ps-relative ws2 p8">
+                <Menu type="fieldset">
+                    <MenuTitle type="legend">Select multiple</MenuTitle>
+                    <MenuCheckItem id="check-frequent" type="checkbox" name="sort-check" label="Frequent" checked />
+                    <MenuCheckItem id="check-votes"    type="checkbox" name="sort-check" label="Votes" />
+                    <MenuCheckItem id="check-unanswered" type="checkbox" name="sort-check" label="Unanswered" checked />
+                </Menu>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Radio groups
+
+In the case of user management, it's appropriate to include radio options. In this example, we're setting a user's role. While our examples up to this point have all been simple unordered lists, the `s-menu` component works on any markup including `fieldset`.
+
+```html
+<div class="s-menu" role="menu">
+    <fieldset>
+        <legend class="s-menu--title">…</legend>
+        <label class="s-menu--item s-radio" for="…">
+            <input type="radio" name="…" id="…" role="menuitemradio" checked>
+            <div>
+                <div class="s-label">…</div>
+                <div class="s-description mt2">…</div>
+            </div>
+        </label>
+        <label class="s-menu--item s-radio" for="…">
+            <input type="radio" name="…" id="…" role="menuitemradio">
+            <div>
+                <div class="s-label">…</div>
+                <div class="s-description mt2">…</div>
+            </div>
+        </label>
+    </fieldset>
+</div>
+```
+
+<Example>
+    <div class="s-popover is-visible ps-relative ws3 p8">
+        <div class="s-menu" role="menu">
+            <fieldset>
+                <legend class="s-menu--title">Role</legend>
+                <label class="s-menu--item s-radio" for="role-user">
+                    <input type="radio" name="user-role" id="role-user" role="menuitemradio" checked>
+                    <div>
+                        <div class="s-label">User</div>
+                        <div class="s-description mt2">Can view, ask, answer, and edit questions. Can also vote on and flag content.</div>
+                    </div>
+                </label>
+                <label class="s-menu--item s-radio" for="role-moderator">
+                    <input type="radio" name="user-role" id="role-moderator" role="menuitemradio">
+                    <div>
+                        <div class="s-label">Moderator</div>
+                        <div class="s-description mt2">Everything a user can do, but can also delete and close questions.</div>
+                    </div>
+                </label>
+                <label class="s-menu--item s-radio" for="role-admin">
+                    <input type="radio" name="user-role" id="role-admin" role="menuitemradio">
+                    <div>
+                        <div class="s-label">Admin</div>
+                        <div class="s-description mt2">Everything a moderator can do and can also manage users, permissions, and site settings.</div>
+                    </div>
+                </label>
+            </fieldset>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/modals.md b/packages/stacks-docs-next/src/docs/public/system/components/modals.md
new file mode 100644
index 0000000000..3c3ab40b99
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/modals.md
@@ -0,0 +1,241 @@
+---
+title: "Modals"
+description: "Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-modal--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18811&p=f&t=c9NSyJWdASb80eVC-0"
+js: true
+---
+
+<script lang="ts">
+    import { Modal, Button } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-modal',          parent: 'N/A',               modifies: 'N/A',              description: 'Base parent container for modals.' },
+        { class: '.s-modal--dialog',  parent: '.s-modal',          modifies: 'N/A',              description: 'Creates a container that holds the modal dialog with proper padding and shadows.' },
+        { class: '.s-modal--body',    parent: '.s-modal--dialog',  modifies: 'N/A',              description: "Adds proper styling to the modal dialog's body text." },
+        { class: '.s-modal--close',   parent: '.s-modal--dialog',  modifies: 'N/A',              description: 'Used to dismiss a modal.' },
+        { class: '.s-modal--header',  parent: '.s-modal--dialog',  modifies: 'N/A',              description: "Adds proper styling to the modal dialog's header." },
+        { class: '.s-modal--footer',  parent: '.s-modal--dialog',  modifies: 'N/A',              description: 'Adds the desired spacing to the row of button actions.' },
+        { class: '.s-modal__danger',  parent: 'N/A',               modifies: '.s-modal',         description: 'Adds styling for potentially dangerous actions.' },
+        { class: '.s-modal__full',    parent: 'N/A',               modifies: '.s-modal--dialog', description: 'Makes the container take up as much of the screen as possible.' },
+    ];
+
+    const attributes: ClassTableRow[] = [
+        { class: 'data-controller="s-modal"',                parent: 'Controller element',        description: 'Wires up the element to the modal controller. This may be a `.s-modal` element or a wrapper element.' },
+        { class: 'data-s-modal-target="modal"',              parent: '.s-modal element',           description: 'Wires up the element that is to be shown/hidden.' },
+        { class: 'data-s-modal-target="initialFocus"',       parent: 'Any child focusable element',description: 'Designates which element to focus on modal show. If absent, defaults to the first focusable element within the modal.' },
+        { class: 'data-action="s-modal#toggle"',             parent: 'Any child focusable element',description: 'Wires up the element that is to be shown/hidden.' },
+        { class: 'data-action="s-modal#hide"',               parent: 'Any child focusable element',description: 'Wires up the element that is to be shown/hidden.' },
+        { class: 'data-s-modal-return-element="[selector]"', parent: 'Controller element',        description: 'Designates the element to return focus to when the modal is closed. If left unset, focus is not altered on close.' },
+        { class: 'data-s-modal-remove-when-hidden="true"',   parent: 'Controller element',        description: 'Removes the modal from the DOM entirely when it is hidden.' },
+    ];
+
+    const events: ClassTableRow[] = [
+        { class: 's-modal:show',   parent: 'Modal target', description: 'Fires immediately before showing the modal. Calling `.preventDefault()` cancels the display of the modal.' },
+        { class: 's-modal:shown',  parent: 'Modal target', description: 'Fires after the modal has been visually shown.' },
+        { class: 's-modal:hide',   parent: 'Modal target', description: 'Fires immediately before hiding the modal. Calling `.preventDefault()` cancels the removal of the modal.' },
+        { class: 's-modal:hidden', parent: 'Modal target', description: 'Fires after the modal has been visually hidden.' },
+    ];
+
+    const eventDetails: ClassTableRow[] = [
+        { class: 'dispatcher',     parent: 'Modal target', description: 'Contains the `Element` that initiated the event. For instance, the button clicked to show, the element clicked outside the modal that caused it to hide, etc.' },
+        { class: 'returnElement',  parent: 'Modal target', description: 'Contains the `Element` to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.' },
+    ];
+
+    const helpers: ClassTableRow[] = [
+        { class: 'Stacks.showModal', parent: 'Controller element', description: 'Helper to manually show an s-modal element via external JS.' },
+        { class: 'Stacks.hideModal', parent: 'Controller element', description: 'Helper to manually hide an s-modal element via external JS.' },
+    ];
+
+    const accessibility: ClassTableRow[] = [
+        { class: 'aria-describedby="[id]"', parent: 'Modal target', description: "Supply the modal's summary copy id. Assistive technologies use this to associate static text with a widget, element groups, headings, definitions, etc." },
+        { class: 'aria-hidden="[state]"',   parent: 'Modal target', description: 'Informs assistive technologies if they should ignore the element. This should not be confused with the HTML5 `hidden` attribute.' },
+        { class: 'aria-label="[text]"',     parent: 'Modal target', description: 'Labels the element for assistive technologies.' },
+        { class: 'aria-labelledby="[id]"',  parent: 'Modal target', description: "Supply the modal's title id here. Assistive technologies use this to catalog the document objects correctly." },
+        { class: 'role="dialog"',           parent: 'Modal target', description: 'Identifies dialog elements for assistive technologies.' },
+        { class: 'role="document"',         parent: 'Modal target', description: 'Helps assistive technologies to switch their reading mode from the larger document to a focused dialog window.' },
+    ];
+
+    const sizes: ClassTableRow[] = [
+        { class: '.s-modal__full', description: '100% - 48px' },
+    ];
+
+    let showBase   = $state(false);
+    let showDanger = $state(false);
+
+    const lorem = 'Nullam ornare lectus vitae lacinia gravida. Donec pretium dui mauris, quis aliquet ipsum pharetra non. Fusce tincidunt felis dui. Morbi sit amet ipsum nisi.';
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## JavaScript
+
+### Attributes
+
+<ClassTable classes={attributes} headings={{ class: 'Attribute', parent: 'Applies to' }} expandable expandButtonText="Show all attributes" />
+
+### Events
+
+<ClassTable classes={events} headings={{ class: 'Event', parent: 'Applies to' }} />
+
+### Event details
+
+<ClassTable classes={eventDetails} headings={{ class: 'Property', parent: 'Applies to' }} />
+
+### Helpers
+
+<ClassTable classes={helpers} headings={{ class: 'Helper', parent: 'Applies to' }} />
+
+## Accessibility
+
+<ClassTable classes={accessibility} headings={{ class: 'Attribute', parent: 'Applies to' }} />
+
+## Examples
+
+You can wire up a modal along with the corresponding button by wrapping both in a `s-modal` controller and attaching the corresponding `data-*` attributes. Make sure to set `data-s-modal-return-element` if you want your button to refocus on close.
+
+```html
+<div data-controller="s-modal" data-s-modal-return-element="#js-return-focus">
+    <button type="button" id="js-return-focus" data-action="s-modal#show">Show modal</button>
+    <aside class="s-modal" data-s-modal-target="modal" id="modal-base" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description" aria-hidden="true">
+        <div class="s-modal--dialog" role="document">
+            <h1 class="s-modal--header" id="modal-title">…</h1>
+            <p class="s-modal--body" id="modal-description">…</p>
+            <div class="d-flex gx8 s-modal--footer">
+                <button class="s-btn" type="button">…</button>
+                <button class="s-btn s-btn__danger" type="button" data-action="s-modal#hide">…</button>
+            </div>
+            <button class="s-modal--close s-btn s-btn__clear" type="button" aria-label="Close" data-action="s-modal#hide">
+                @Svg.Cross
+            </button>
+        </div>
+    </aside>
+</div>
+```
+
+Alternatively, you can also use the built in helper to display a modal straight from your JS file. This is useful for the times when your modal markup can't live next to your button or if it is generated dynamically (e.g. from an AJAX call).
+
+```html
+<button class="s-btn js-modal-toggle" type="button">Show modal</button>
+<aside class="s-modal" id="modal-base" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description" aria-hidden="true"
+    data-controller="s-modal" data-s-modal-target="modal">
+    …
+</aside>
+```
+
+```javascript
+document.querySelector(".js-modal-toggle").addEventListener("click", function(e) {
+    Stacks.showModal(document.querySelector("#modal-base"));
+});
+```
+
+<Example>
+    <div class="d-flex g8 fw-wrap">
+        <Button onclick={() => showBase = true}>Launch example modal</Button>
+        <Button variant="danger" onclick={() => showDanger = true}>Launch example modal w/ danger state</Button>
+    </div>
+</Example>
+
+<Modal id="modal-launch-base" visible={showBase} onclose={() => showBase = false}>
+    {#snippet header()}Example title{/snippet}
+    {#snippet body()}{lorem}{/snippet}
+    {#snippet footer()}
+        <Button>Save changes</Button>
+        <Button weight="clear" onclick={() => showBase = false}>Cancel</Button>
+    {/snippet}
+</Modal>
+
+<Modal id="modal-launch-danger" visible={showDanger} state="danger" onclose={() => showDanger = false}>
+    {#snippet header()}Example title{/snippet}
+    {#snippet body()}{lorem}{/snippet}
+    {#snippet footer()}
+        <Button variant="danger">Save changes</Button>
+        <Button weight="clear" onclick={() => showDanger = false}>Cancel</Button>
+    {/snippet}
+</Modal>
+
+### Danger state
+
+Not every modal is sunshine and rainbows. Sometimes there are potentially drastic things that could happen by hitting a confirm button in a modal—such as deleting an account. In moments like this, add the `.s-modal__danger` class to `.s-modal`. Additionally, you should switch the buttons to `.s-btn__danger`, since the main call to action will be destructive.
+
+```html
+<aside class="s-modal s-modal__danger" id="modal-base" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description" aria-hidden="true"
+    data-controller="s-modal" data-s-modal-target="modal">
+    <div class="s-modal--dialog" role="document">
+        <h1 class="s-modal--header" id="modal-title">…</h1>
+        <p class="s-modal--body" id="modal-description">…</p>
+        <div class="d-flex gx8 s-modal--footer">
+            <button class="s-btn s-btn__danger" type="button">…</button>
+            <button class="s-btn s-btn__clear" type="button" data-action="s-modal#hide">…</button>
+        </div>
+        <button class="s-modal--close s-btn s-btn__clear" type="button" aria-label="Close" data-action="s-modal#hide">
+            @Svg.Cross
+        </button>
+    </div>
+</aside>
+```
+
+<div class="ba bc-black-225 bar-sm mb32 overflow-visible">
+    <div class="ps-relative d-flex jc-center hs3">
+        <aside class="s-modal s-modal__danger ps-absolute z-base mn1" role="presentation"
+            aria-labelledby="modal-inline-danger-title"
+            aria-describedby="modal-inline-danger-description"
+            aria-hidden="false">
+            <div class="s-modal--dialog" role="document">
+                <h1 class="s-modal--header" id="modal-inline-danger-title">Example title</h1>
+                <p class="s-modal--body" id="modal-inline-danger-description">{lorem}</p>
+                <div class="d-flex g8 s-modal--footer">
+                    <button class="s-btn s-btn__danger" type="button">Save changes</button>
+                    <button class="s-btn s-btn__clear" type="button">Cancel</button>
+                </div>
+            </div>
+        </aside>
+    </div>
+</div>
+
+### Celebratory
+
+Sometimes it's appropriate to confirm a user's action with some confetti. You can combine our [confetti background utility](/system/base/backgrounds#confetti) with some extra spacing by adding the `s-modal__celebration` modifier.
+
+```html
+<aside class="s-modal s-modal__celebration" id="modal-base" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description" aria-hidden="true" data-controller="s-modal" data-s-modal-target="modal">
+    <div class="s-modal--dialog" role="document">
+        <h1 class="s-modal--header" id="modal-title">…</h1>
+        <p class="s-modal--body" id="modal-description">…</p>
+        <div class="d-flex gx8 s-modal--footer">
+            <button class="s-btn" type="button">…</button>
+        </div>
+        <button class="s-modal--close s-btn s-btn__clear" type="button" aria-label="Close" data-action="s-modal#hide">
+            @Svg.Cross
+        </button>
+    </div>
+</aside>
+```
+
+<div class="ba bc-black-225 bar-sm mb32 overflow-visible">
+    <div class="ps-relative d-flex jc-center hs3">
+        <aside class="s-modal s-modal__celebration ps-absolute z-base mn1" role="presentation"
+            aria-labelledby="modal-inline-celebration-title"
+            aria-describedby="modal-inline-celebration-description"
+            aria-hidden="false">
+            <div class="s-modal--dialog" role="document">
+                <h1 class="s-modal--header" id="modal-inline-celebration-title">Congratulations!</h1>
+                <p class="s-modal--body" id="modal-inline-celebration-description">{lorem}</p>
+                <div class="d-flex g8 s-modal--footer">
+                    <button class="s-btn" type="button">Got it!</button>
+                </div>
+            </div>
+        </aside>
+    </div>
+</div>
+
+## Sizes
+
+Most modal dialogs look good by default, but may need some combination of `.ws[x]` or `.wmx[x]` classes applied to `.s-modal--dialog`. Additionally, the following class is available for modals:
+
+<ClassTable classes={sizes} headings={{ description: 'Value' }} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/navigation.md b/packages/stacks-docs-next/src/docs/public/system/components/navigation.md
new file mode 100644
index 0000000000..cd01ba45d3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/navigation.md
@@ -0,0 +1,414 @@
+---
+title: "Navigation"
+description: "Our navigation component is a collection of buttons that respond gracefully to various window sizes and parent containers."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-navigation--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18812&t=5ggsDIb9OENEwDl0-1"
+js: true
+---
+
+<script lang="ts">
+    import { Navigation, NavigationItem, NavigationGroup, Button, Badge, ActivityIndicator } from '@stackoverflow/stacks-svelte';
+    import {
+        IconQandA, IconQandAFill,
+        IconTagStack, IconTagStackFill,
+        IconUserStack, IconUserStackFill,
+        IconSettings, IconSettingsFill,
+        IconHome, IconHomeFill,
+        IconJobs, IconJobsFill,
+    } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-navigation',                  parent: 'N/A',                  modifies: 'N/A',                 description: 'Base parent container for navigation.' },
+        { class: '.s-navigation--item',            parent: '.s-navigation',        modifies: 'N/A',                 description: 'The individual item in a navigation.' },
+        { class: '.s-navigation--avatar',          parent: '.s-navigation--item',  modifies: 'N/A',                 description: 'Applies styling to the avatar of the navigation item.' },
+        { class: '.s-navigation--icon',            parent: '.s-navigation--item',  modifies: 'N/A',                 description: 'Applies styling to the icon of the navigation item.' },
+        { class: '.s-navigation--item-text',       parent: '.s-navigation--item',  modifies: 'N/A',                 description: 'The element meant to contain the text of the navigation item.' },
+        { class: '.s-navigation__scroll',          parent: 'N/A',                  modifies: '.s-navigation',       description: 'When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations.' },
+        { class: '.s-navigation__sm',              parent: 'N/A',                  modifies: '.s-navigation',       description: 'Tightens up the overall spacing and reduces the text size.' },
+        { class: '.s-navigation__vertical',        parent: 'N/A',                  modifies: '.s-navigation',       description: 'Renders the navigation vertically.' },
+        { class: '.s-navigation--item__dropdown',  parent: 'N/A',                  modifies: '.s-navigation--item', description: 'Adds a small caret that indicates a dropdown.' },
+        { class: '.is-selected',                   parent: 'N/A',                  modifies: '.s-navigation--item', description: "Applies to a navigation item that's currently selected / active." },
+    ];
+
+    const layoutShiftAttributes: ClassTableRow[] = [
+        { class: 'data-text="[value]"', parent: '.s-navigation--item-text', description: 'Prevents layout shift when changing selected button. Value should be the text of the navigation item.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+### Preventing layout shift
+
+Horizontal layout shift may occur when changing which item is selected within the navigation component. We recommend including the `data-text` attribute on the child navigation item text element with the value duplicating the text of the item to prevent the layout shift. See below for examples.
+
+<ClassTable classes={layoutShiftAttributes} headings={{ class: 'Item', parent: 'Applied to' }} />
+
+## Horizontal
+
+Care should be taken to only include at most one primary and one secondary navigation per page. Using multiple navigations with the same style can cause user confusion.
+
+Forcing a navigation to scroll is an established pattern on mobile devices, so it may be appropriate to use it in that context. Wrapping tends to make more sense on larger screens, where the user isn't forced to scroll passed a ton of navigation chrome.
+
+### Horizontal default
+
+Use the default size for primary page-level navigation, typically placed near the top of the page.
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <div class="d-flex fd-column g16">
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Full width</span>
+            <Navigation label="horizontal full width navigation">
+                <NavigationItem href="#" text="Product" selected />
+                <NavigationItem href="#" text="Email" />
+                <NavigationItem href="#" text="Content" />
+                <NavigationItem href="#" text="Brand" />
+                <NavigationItem href="#" text="Marketing" />
+            </Navigation>
+        </div>
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Wrapped</span>
+            <Navigation label="horizontal wrapped navigation" class="wmx2">
+                <NavigationItem href="#" text="Product" selected />
+                <NavigationItem href="#" text="Email" />
+                <NavigationItem href="#" text="Content" />
+                <NavigationItem href="#" text="Brand" />
+                <NavigationItem href="#" text="Marketing" />
+            </Navigation>
+        </div>
+    </div>
+</Example>
+
+### Icons
+
+Use the icon variant for a prominent, secondary horizontal navigation bar that directs users to main page sections. Limit use to one per page and do not use it for in-page filtering. Icon styles should change with the state of the item (ex: selected items use a fill icon)
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Content">Content</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Topics">Topics</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="People">People</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item s-navigation--item__dropdown">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Settings">Settings</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <div class="d-flex jc-space-between sm:d-block">
+        <Navigation label="horizontal navigation with icons" class="d-inline-block">
+            <NavigationItem href="#" text="Content" icon={IconQandA} iconSelected={IconQandAFill} selected />
+            <NavigationItem href="#" text="Topics" icon={IconTagStack} iconSelected={IconTagStackFill} />
+            <NavigationItem href="#" text="People" icon={IconUserStack} iconSelected={IconUserStackFill} />
+            <NavigationItem href="#" text="Settings" icon={IconSettings} iconSelected={IconSettingsFill}>
+                {#snippet dropdown()}{/snippet}
+            </NavigationItem>
+        </Navigation>
+        <Button variant="tonal" dropdown>Today</Button>
+    </div>
+</Example>
+
+### Scrolling
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__scroll">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="scrolling navigation" overflow="scroll" class="wmx3">
+        <NavigationItem href="#" text="Product" selected />
+        <NavigationItem href="#" text="Email" />
+        <NavigationItem href="#" text="Content" />
+        <NavigationItem href="#" text="Brand" />
+        <NavigationItem href="#" text="Marketing" />
+    </Navigation>
+</Example>
+
+### Dropdown
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__scroll">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item s-navigation--item__dropdown">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="dropdown navigation" overflow="scroll" class="wmx3">
+        <NavigationItem href="#" text="Product" selected />
+        <NavigationItem href="#" text="Email" />
+        <NavigationItem href="#" text="More">
+            {#snippet dropdown()}{/snippet}
+        </NavigationItem>
+    </Navigation>
+</Example>
+
+### Small
+
+Use the small variant for on-page filtering in space-constrained areas, such as controlling small lists. Avoid using icons on the small variant.
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__sm">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="small navigation" size="sm">
+        <NavigationItem href="#" text="Product" selected />
+        <NavigationItem href="#" text="Email" />
+        <NavigationItem href="#" text="Content" />
+        <NavigationItem href="#" text="Brand" />
+        <NavigationItem href="#" text="Marketing" />
+    </Navigation>
+</Example>
+
+## Vertical
+
+Stacks also provides a vertical variation with support for section headers.
+
+### Vertical default
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__vertical">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <span class="s-navigation--item-text" data-text="…">…</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="vertical default navigation" orientation="vertical" class="ws2">
+        <NavigationItem href="#" text="Product" selected />
+        <NavigationItem href="#" text="Email" />
+        <NavigationItem href="#" text="Content" />
+        <NavigationItem href="#" text="Brand" />
+        <NavigationItem href="#" text="Marketing" />
+    </Navigation>
+</Example>
+
+### Vertical Icons
+
+Vertical navigation items with icons have a larger padding.
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__vertical">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Home">Home</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item d-flex jc-space-between">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Jobs">Jobs</span>
+                <div class="s-badge s-badge__xs s-badge__featured ml-auto">New</div>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item d-flex jc-space-between">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Saves">Saves</span>
+                <div class="s-activity-indicator ml-auto">
+                    3 <div class="v-visible-sr">new activities</div>
+                </div>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <svg class="s-navigation--icon" aria-hidden="true">…</svg>
+                <span class="s-navigation--item-text" data-text="Users">Users</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="vertical navigation with icons" orientation="vertical" class="ws2">
+        <NavigationItem href="#" text="Home" icon={IconHome} iconSelected={IconHomeFill} selected />
+        <NavigationItem href="#" text="Jobs" icon={IconJobs} iconSelected={IconJobsFill}>
+            {#snippet trailing()}
+                <Badge text="New" type="state" state="featured" size="sm" />
+            {/snippet}
+        </NavigationItem>
+        <NavigationItem href="#" text="Saves" icon={IconTagStack} iconSelected={IconTagStackFill}>
+            {#snippet trailing()}
+                <ActivityIndicator label="3 new activities" content="3" />
+            {/snippet}
+        </NavigationItem>
+        <NavigationItem href="#" text="Users" icon={IconUserStack} iconSelected={IconUserStackFill} />
+    </Navigation>
+</Example>
+
+### Avatar
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__vertical">
+        <li>
+            <a href="…" class="s-navigation--item is-selected">
+                <div class="s-navigation--avatar s-avatar">
+                    <img class="s-avatar--image" src="…" />
+                </div>
+                <span class="s-navigation--item-text" data-text="Humson">Humson</span>
+            </a>
+        </li>
+        <li>
+            <a href="…" class="s-navigation--item">
+                <div class="s-navigation--avatar s-avatar">
+                    <img class="s-avatar--image" src="…" />
+                </div>
+                <span class="s-navigation--item-text" data-text="Samson">Samson</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="avatar navigation" orientation="vertical" class="ws2">
+        <NavigationItem href="#" text="Humson" avatar="https://picsum.photos/32" selected />
+        <NavigationItem href="#" text="Samson" avatar="https://picsum.photos/32" />
+    </Navigation>
+</Example>
+
+### Titles
+
+```html
+<nav aria-label="…">
+    <ul class="s-navigation s-navigation__vertical">
+        <li>
+            <h4 class="s-navigation--title" id="nav-section1">…</h4>
+            <ul aria-labelledby="nav-section1">
+                <li>
+                    <a href="…" class="s-navigation--item is-selected">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h4 class="s-navigation--title" id="nav-section2">…</h4>
+            <ul aria-labelledby="nav-section2">
+                <li>
+                    <a href="…" class="s-navigation--item">
+                        <span class="s-navigation--item-text" data-text="…">…</span>
+                    </a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <Navigation label="titles navigation" orientation="vertical" class="ws2">
+        <NavigationGroup title="Resources">
+            <NavigationItem href="#" text="Icons" selected />
+            <NavigationItem href="#" text="Spot illustrations" />
+        </NavigationGroup>
+        <NavigationGroup title="Base">
+            <NavigationItem href="#" text="Home" icon={IconHome} iconSelected={IconHomeFill} selected />
+            <NavigationItem href="#" text="Jobs" icon={IconJobs} iconSelected={IconJobsFill} />
+            <NavigationItem href="#" text="Saves" icon={IconTagStack} iconSelected={IconTagStackFill} />
+            <NavigationItem href="#" text="Users" icon={IconUserStack} iconSelected={IconUserStackFill} />
+        </NavigationGroup>
+    </Navigation>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/notices.md b/packages/stacks-docs-next/src/docs/public/system/components/notices.md
new file mode 100644
index 0000000000..6f6052c6db
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/notices.md
@@ -0,0 +1,273 @@
+---
+title: "Notices"
+description: "Notices deliver <strong>System</strong> and <strong>Engagement</strong> messaging, informing the user about product or account statuses and related actions."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-notice--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=612-18813&p=f&m=dev"
+js: true
+---
+
+<script lang="ts">
+    import { Notice, NoticeAction, Link, Button } from '@stackoverflow/stacks-svelte';
+    import { IconCross, IconInfo } from '@stackoverflow/stacks-icons/icons';
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-notice',            parent: 'N/A',       modifies: 'N/A',       description: 'Base notice parent class. Use inside `.s-toast` when rendered as a toast.' },
+        { class: '.s-notice--actions',   parent: '.s-notice', modifies: 'N/A',       description: 'Container styling for notice actions including the dismiss button.' },
+        { class: '.s-notice--dismiss',   parent: '.s-notice', modifies: 'N/A',       description: 'Applies to child button element within the notice to position it appropriately.' },
+        { class: '.s-notice__activity',  parent: 'N/A',       modifies: '.s-notice', description: 'Applies activity (pink) visual styles.' },
+        { class: '.s-notice__danger',    parent: 'N/A',       modifies: '.s-notice', description: 'Applies danger (red) visual styles.' },
+        { class: '.s-notice__featured',  parent: 'N/A',       modifies: '.s-notice', description: 'Applies featured (purple) visual styles.' },
+        { class: '.s-notice__important', parent: 'N/A',       modifies: '.s-notice', description: 'Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user.' },
+        { class: '.s-notice__info',      parent: 'N/A',       modifies: '.s-notice', description: 'Applies info (blue) visual styles.' },
+        { class: '.s-notice__success',   parent: 'N/A',       modifies: '.s-notice', description: 'Applies success (green) visual styles.' },
+        { class: '.s-notice__warning',   parent: 'N/A',       modifies: '.s-notice', description: 'Applies warning (yellow) visual styles.' },
+        { class: '.s-toast',             parent: 'N/A',       modifies: 'N/A',       description: 'Parent of `.s-notice`. See the Toast section for more information.' },
+    ];
+
+    const accessibility: ClassTableRow[] = [
+        { class: 'aria-labelledby="[id]"', parent: '.s-toast',  description: 'Used to reference the alert message within the dialog. If you are using `.s-toast`, this must be applied.' },
+        { class: 'aria-hidden="[state]"',  parent: '.s-toast',  description: 'Informs assistive technologies if they should ignore the element. When applied to `.s-toast`, Stacks will use this attribute to show or hide the toast.' },
+        { class: 'aria-label="[text]"',    parent: '.s-btn',    description: 'Labels the element for assistive technologies. This should be used on any button that does not contain text content.' },
+        { class: 'role="alert"',           parent: '.s-notice', description: 'A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit aria-live value of assertive and implicit aria-atomic value of true.' },
+        { class: 'role="alertdialog"',     parent: '.s-toast',  description: 'The wrapping content area of an alert. Elements with the alertdialog role must use the aria-describedby attribute to reference the alert message within the dialog.' },
+        { class: 'role="status"',          parent: '.s-notice', description: 'A form of live region which contains advisory information but is not important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true.' },
+    ];
+
+    const toastAttributes: ClassTableRow[] = [
+        { class: 'data-controller="s-toast"',             parent: 'Controller element',        description: 'Wires up the element to the toast controller. This may be a `.s-toast` element or a wrapper element.' },
+        { class: 'data-s-toast-target="toast"',           parent: 'Controller element',        description: 'Wires up the element that is to be shown/hidden.' },
+        { class: 'data-s-toast-target="initialFocus"',    parent: 'Any child focusable element',description: 'Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.' },
+        { class: 'data-action="s-toast#toggle"',          parent: 'Toggling element',          description: 'Wires up the element to toggle the visibility of a toast.' },
+        { class: 'data-s-toast-return-element="[selector]"', parent: 'Controller element',     description: '(optional) Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.' },
+        { class: 'data-s-toast-remove-when-hidden="true"',parent: 'Controller element',        description: '(optional) Removes the toast from the DOM entirely when it is hidden.' },
+    ];
+
+    const toastEvents: ClassTableRow[] = [
+        { class: 's-toast:show',   parent: 'Toast target', description: 'Fires immediately before showing the toast. Calling `.preventDefault()` cancels the display of the toast.' },
+        { class: 's-toast:shown',  parent: 'Toast target', description: 'Fires after the toast has been visually shown.' },
+        { class: 's-toast:hide',   parent: 'Toast target', description: 'Fires immediately before hiding the toast. Calling `.preventDefault()` cancels the removal of the toast.' },
+        { class: 's-toast:hidden', parent: 'Toast target', description: 'Fires after the toast has been visually hidden.' },
+    ];
+
+    const toastEventDetails: ClassTableRow[] = [
+        { class: 'dispatcher',     parent: 's-toast:*',                  description: 'Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.' },
+        { class: 'returnElement',  parent: 's-toast:show, s-toast:hide', description: 'Contains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.' },
+    ];
+
+    const toastHelpers: ClassTableRow[] = [
+        { class: 'Stacks.showToast', parent: 'element', description: 'Helper to manually show an s-toast element via external JS.' },
+        { class: 'Stacks.hideToast', parent: 'element', description: 'Helper to manually hide an s-toast element via external JS.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Accessibility
+
+<ClassTable classes={accessibility} headings={{ class: 'Item', parent: 'Applies to' }} expandable expandButtonText="Show all accessibility items" />
+
+## Examples
+
+### Base
+
+```html
+<div class="s-notice" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__info" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__success" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>… <a href="…">…</a></span>
+</div>
+<div class="s-notice s-notice__warning" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__danger" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__featured" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__activity" role="status">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+```
+
+<Example>
+    <div class="d-flex g8 fd-column">
+        <Notice role="presentation" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Default filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="info" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Info filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="success" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Success filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Warning filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="danger" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Danger filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="featured" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Featured filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="activity" class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Activity filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+    </div>
+</Example>
+
+### Important
+
+Used sparingly for when an important notice needs to be noticed
+
+```html
+<div class="s-notice s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__info s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__success s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>… <a href="…">…</a></span>
+</div>
+<div class="s-notice s-notice__warning s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__danger s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__featured s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+<div class="s-notice s-notice__activity s-notice__important" role="alert">
+    <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+    <span>…</span>
+</div>
+```
+
+<Example>
+    <div class="d-flex g8 fd-column">
+        <Notice role="presentation" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Default filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="info" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Info filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="success" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Success filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="warning" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Warning filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="danger" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Danger filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="featured" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Featured filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+        <Notice role="presentation" variant="activity" important class="s-anchors s-anchors__inherit s-anchors__underlined"><span>Activity filled message style <code>and some code</code> notice. <a href="#">Link</a></span></Notice>
+    </div>
+</Example>
+
+### Styling child links
+
+We recommend using [descendent anchor](/product/components/links/#descendent-anchors) classes, typically `.s-anchors.s-anchors__inherit.s-anchors__underlined` for notices containing links generated from markdown when you cannot manually generate the inner html.
+
+```html
+<div class="s-notice s-notice__info" role="presentation">
+    <span>Notice with <a href="#" class="s-link">default link style</a></span>
+</div>
+<div class="s-notice s-notice__info s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
+    <span>Notice with <a href="#">styled link</a></span>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">Default</span>
+            <Notice role="presentation" variant="info">
+                <span>Notice with <a href="#" class="s-link">default link style</a></span>
+            </Notice>
+        </div>
+        <div class="d-flex fd-column g8">
+            <span class="ff-mono mb8">.s-anchors .s-anchors__inherit .s-anchors__underlined</span>
+            <Notice role="presentation" variant="info" class="s-anchors s-anchors__inherit s-anchors__underlined">
+                <span>Notice with <a href="#">styled link</a></span>
+            </Notice>
+        </div>
+    </div>
+</Example>
+
+## Toast
+
+<Notice variant="warning" role="presentation" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.</p>
+</Notice>
+
+Toasts are floating notices that are aligned to the center top of the page. They disappear after a set time. Visibility is changed with animation by toggling between `aria-hidden="true"` and `aria-hidden="false"`. When including a dismiss button the `.s-notice--dismiss` class should be applied to the button for toast-specific styling.
+
+```html
+<div
+    role="alertdialog"
+    id="example-toast"
+    class="s-toast"
+    aria-hidden="true"
+    aria-labelledby="toast-message"
+    data-controller="s-toast"
+    data-s-toast-target="toast"
+    data-s-toast-return-element=".js-example-toast-open[data-target='#example-toast']">
+    <aside class="s-notice d-flex wmn4">
+        <span class="s-notice--icon"><svg aria-hidden="true">…</svg></span>
+        <span>Toast notice message with an undo button</span>
+        <div class="s-notice--actions">
+            <button type="button" class="s-link s-link__underlined">Undo</button>
+            <button type="button" class="s-link s-notice--dismiss js-toast-close" aria-label="Dismiss">
+                <svg aria-hidden="true">…</svg>
+            </button>
+        </div>
+    </aside>
+</div>
+```
+
+<Example>
+    <div class="ps-relative d-flex gy8 fd-column jc-center">
+        <div class="s-toast ps-static" aria-hidden="false" role="presentation">
+            <div class="s-notice d-flex wmn4">
+                <span class="s-notice--icon"><Icon src={IconInfo} /></span>
+                <span>Default toast with an undo button.</span>
+                <div class="s-notice--actions">
+                    <button type="button" class="s-link s-link__underlined">Undo</button>
+                    <button type="button" class="s-link s-notice--dismiss" aria-label="Dismiss"><Icon src={IconCross} /></button>
+                </div>
+            </div>
+        </div>
+        <div class="s-toast ps-static" aria-hidden="false" role="presentation">
+            <div class="s-notice s-notice__info d-flex wmn4">
+                <span class="s-notice--icon"><Icon src={IconInfo} /></span>
+                <span>Info toast with an undo button.</span>
+                <div class="s-notice--actions">
+                    <button type="button" class="s-link s-link__underlined">Undo</button>
+                    <button type="button" class="s-link s-notice--dismiss" aria-label="Dismiss"><Icon src={IconCross} /></button>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### JavaScript
+
+#### Attributes
+
+<ClassTable classes={toastAttributes} headings={{ class: 'Attribute', parent: 'Applies to' }} />
+
+#### Events
+
+<ClassTable classes={toastEvents} headings={{ class: 'Event', parent: 'Applies to' }} />
+
+#### Event details
+
+<ClassTable classes={toastEventDetails} headings={{ class: 'event.detail', parent: 'Applicable events' }} />
+
+#### Helpers
+
+The following helpers are available to manually show and hide a toast notice.
+
+<ClassTable classes={toastHelpers} headings={{ class: 'Function', parent: 'Parameters' }} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/page-titles.md b/packages/stacks-docs-next/src/docs/public/system/components/page-titles.md
new file mode 100644
index 0000000000..832c4924cb
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/page-titles.md
@@ -0,0 +1,11 @@
+---
+title: "Page Titles"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/pagination.md b/packages/stacks-docs-next/src/docs/public/system/components/pagination.md
new file mode 100644
index 0000000000..ec2fd0c835
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/pagination.md
@@ -0,0 +1,77 @@
+---
+title: "Pagination"
+description: "Pagination splits content into pages, as seen on questions, tags, users, and jobs listings."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1189-2035&t=JFrmhokx3ZOeRP9b-0"
+---
+
+<script lang="ts">
+    import { PaginationController } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-pagination',              parent: 'N/A',                  modifies: 'N/A',                       description: 'Base pagination style.' },
+        { class: '.s-pagination--item',        parent: '.s-pagination',        modifies: 'N/A',                       description: "A child element that's used as a link and labeled with the page number." },
+        { class: '.s-pagination--item__clear', parent: 'N/A',                  modifies: '.s-pagination--item',       description: 'Clears the background and removes any interactivity. Used for ellipses and descriptions.' },
+        { class: '.s-pagination--item__nav',   parent: 'N/A',                  modifies: '.s-pagination--item',       description: 'Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page.' },
+        { class: '.is-selected',               parent: 'N/A',                  modifies: '.s-pagination--item',       description: 'Active state that\'s applied to the current page.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Example
+
+```html
+<nav class="s-pagination" aria-label="pagination">
+    <ul>
+        <li>
+            <a class="s-pagination--item s-pagination--item__nav" href="#">
+                <svg aria-hidden="true">…</svg>
+                <span class="v-visible-sr">previous page</span>
+            </a>
+        </li>
+        <li>
+            <a class="s-pagination--item is-selected" href="…" aria-current="page">
+                <span class="v-visible-sr">page</span>
+                1
+            </a>
+        </li>
+        <li>
+            <a class="s-pagination--item" href="…">
+                <span class="v-visible-sr">page</span>
+                2
+            </a>
+        </li>
+        <li>
+            <span class="s-pagination--item s-pagination--item__clear">…</span>
+        </li>
+        <li>
+            <a class="s-pagination--item" href="…">
+                <span class="v-visible-sr">page</span>
+                122386
+            </a>
+        </li>
+        <li>
+            <a class="s-pagination--item s-pagination--item__nav" href="…">
+                <svg aria-hidden="true">…</svg>
+                <span class="v-visible-sr">next page</span>
+            </a>
+        </li>
+    </ul>
+</nav>
+```
+
+<Example>
+    <div class="overflow-x-auto mln24">
+        <PaginationController
+            page={2}
+            totalPages={122386}
+            urlGenerator={(p) => '#'}
+        />
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/popovers.md b/packages/stacks-docs-next/src/docs/public/system/components/popovers.md
new file mode 100644
index 0000000000..67f90f844c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/popovers.md
@@ -0,0 +1,451 @@
+---
+title: "Popovers"
+description: "Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-popover--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1617-27089&t=W4QmlFOpYoEpInDB-0"
+js: true
+---
+
+<script lang="ts">
+    import { Popover, PopoverReference, PopoverContent, PopoverCloseButton, Button, Notice, EmptyState } from '@stackoverflow/stacks-svelte';
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconInfo } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-popover',           parent: 'N/A',       modifies: 'N/A',       description: 'Base parent container for popovers.' },
+        { class: '.s-popover--close',    parent: '.s-popover', modifies: 'N/A',       description: 'Used to dismiss a popover.' },
+        { class: '.s-popover--content',  parent: '.s-popover', modifies: 'N/A',       description: 'Wrapper around the popover content to apply appropriate overflow styles.' },
+        { class: '.s-popover__tooltip',  parent: 'N/A',        modifies: '.s-popover', description: 'Removes minimum size constraints to support shorter tooltip text.' },
+        { class: '.is-visible',          parent: 'N/A',        modifies: '.s-popover', description: 'This class toggles the popover visibility.' },
+    ];
+
+    const interactiveAttributes: ClassTableRow[] = [
+        { class: 'id="{POPOVER_ID}"',                              parent: '.s-popover',          description: 'A unique id that the popover\'s toggling element can target. Matches the value of `[aria-controls]` on the toggling element.' },
+        { class: 'data-controller="s-popover"',                    parent: 'Controller element',  description: 'Wires up the element to the popover controller. This may be a toggling element or a wrapper element.' },
+        { class: 'data-s-popover-reference-selector="[selector]"', parent: 'Controller element',  description: '(optional) Designates the element to use as the popover reference. If left unset, defaults to the controller element.' },
+        { class: 'aria-controls="{POPOVER_ID}"',                   parent: 'Reference element',   description: 'Associates the element to the desired popover element.' },
+        { class: 'data-action="s-popover#toggle"',                 parent: 'Toggling element',    description: 'Wires up the element to toggle the visibility of a generic popover.' },
+        { class: 'data-s-popover-toggle-class="[class list]"',     parent: 'Controller element',  description: 'Adds an optional space-delineated list of classes to be toggled on the originating element when the popover is shown or hidden.' },
+        { class: 'data-s-popover-placement="[placement]"',         parent: 'Controller element',  description: 'Dictates where to place the popover in relation to the reference element. Defaults to `bottom`. Accepted placements are `auto`, `top`, `right`, `bottom`, `left`, each with optional `-start` and `-end` variations.' },
+        { class: 'data-s-popover-auto-show="[true|false]"',        parent: 'Controller element',  description: '(optional) If `true`, the popover will appear immediately when the Stacks controller is first connected. Use this instead of `.is-visible` to prevent the popover from appearing before it has been correctly positioned.' },
+        { class: 'data-s-popover-hide-on-outside-click="[value]"', parent: 'Controller element',  description: '(optional) Default: `always`. Values: `always` — hides on outside clicks; `if-in-viewport` — only hides if the popover is in the viewport; `never` — does not hide on outside clicks; `after-dismissal` — does not hide on outside clicks unless it has been dismissed at least once.' },
+    ];
+
+    const interactiveEvents: ClassTableRow[] = [
+        { class: 's-popover:show',   description: 'Fires immediately before showing and positioning the popover. Can be used to create or initialize the popover element. Calling `.preventDefault()` cancels the display.' },
+        { class: 's-popover:shown',  description: 'Fires immediately after showing the popover.' },
+        { class: 's-popover:hide',   description: 'Fires immediately before hiding the popover. Calling `.preventDefault()` prevents the removal of the popover.' },
+        { class: 's-popover:hidden', description: 'Fires immediately after hiding the popover.' },
+    ];
+
+    const dispatchedEvents: ClassTableRow[] = [
+        { class: 'dispatcher', parent: 's-popover:*', description: 'Contains the `Element` that initiated the event. For instance, the button clicked to show, the element clicked outside the popover that caused it to hide, etc.' },
+    ];
+
+    const tooltipAttributes: ClassTableRow[] = [
+        { class: 'id="{POPOVER_ID}"',                            parent: '.s-popover',         description: 'A unique id that the popover\'s toggling element can target. Matches the value of `[aria-describedby]` on the toggling element.' },
+        { class: 'data-controller="s-tooltip"',                  parent: 'Controller element', description: 'Wires up the element to the tooltip controller.' },
+        { class: 'data-s-tooltip-reference-selector="[selector]"', parent: 'Controller element', description: '(optional) Designates the element to use as the tooltip reference. If left unset, defaults to the controller element.' },
+        { class: 'aria-describedby="{POPOVER_ID}"',              parent: 'Reference element',  description: 'Associates the element to the desired popover element.' },
+        { class: 'title="{TITLE}"',                              parent: 'Controller element', description: 'If `aria-describedby` is not present or valid, and the title attribute exists, the title will be removed from the element and used to create a popover immediately after the element. All content will be escaped and inserted as text.' },
+        { class: 'data-s-tooltip-html-title="{TITLE}"',          parent: 'Controller element', description: 'Acts the same as the `title` attribute, but inserts the raw text directly as HTML. If both exist on the element, this attribute takes precedence.' },
+        { class: 'data-s-tooltip-placement="[placement]"',       parent: 'Controller element', description: 'Dictates where to place the tooltip in relation to the reference element. Defaults to `bottom`. Accepted placements are `auto`, `top`, `right`, `bottom`, `left`, each with optional `-start` and `-end` variations.' },
+    ];
+
+    const tooltipEvents: ClassTableRow[] = [
+        { class: 's-tooltip:show',   parent: 'Controller element', description: 'Fires immediately before showing and positioning the tooltip. Calling `.preventDefault()` cancels the display.' },
+        { class: 's-tooltip:shown',  parent: 'Controller element', description: 'Fires immediately after showing the tooltip.' },
+        { class: 's-tooltip:hide',   parent: 'Controller element', description: 'Fires immediately before hiding the tooltip. Calling `.preventDefault()` prevents the removal of the tooltip.' },
+        { class: 's-tooltip:hidden', parent: 'Controller element', description: 'Fires immediately after hiding the tooltip.' },
+    ];
+
+    const tooltipDispatchedEvents: ClassTableRow[] = [
+        { class: 'dispatcher', parent: 's-tooltip:*', description: 'Contains the `Element` that initiated the event. For instance, the element hovered over to show, etc.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Interactive popovers
+
+Stacks provides a Stimulus controller that allows you to interactively display a popover from a source element. Positioning direction are managed for you by [Popper.js](https://popper.js.org), a powerful popover positioning library we've added as a dependency. These popovers are automatically hidden when user click outside the popover or tap the `Esc` key.
+
+### Interactive Attributes
+
+<ClassTable classes={interactiveAttributes} headings={{ class: 'Attribute', parent: 'Applied to' }} expandable expandButtonText="Show all interactive attributes" />
+
+### Interactive Events
+
+<ClassTable classes={interactiveEvents} headings={{ class: 'Event' }} />
+
+### Dispatched Events
+
+<ClassTable classes={dispatchedEvents} headings={{ class: 'Event', parent: 'Element' }} />
+
+## Examples
+
+<Example>
+    <div class="d-flex ai-center g8 fw-wrap">
+        <Popover id="popover-form-example" placement="bottom-start">
+            <PopoverReference>
+                <Button>Show example popover</Button>
+            </PopoverReference>
+            <PopoverContent class="ws2">
+                <form class="d-flex fd-column g8">
+                    <div class="d-flex gy4 fd-column">
+                        <label class="s-label" for="example-username">Username</label>
+                        <input class="s-input" id="example-username" type="text" />
+                    </div>
+                    <div class="d-flex gy4 fd-column">
+                        <label class="s-label" for="example-password">Password</label>
+                        <input class="s-input" id="example-password" type="password" />
+                    </div>
+                    <button type="button" class="s-btn w100">Sign in</button>
+                    <a href="#" class="s-btn s-btn__tonal w100">Create an account</a>
+                </form>
+            </PopoverContent>
+        </Popover>
+
+        <Popover id="popover-empty-example" placement="bottom">
+            <PopoverReference>
+                <Button dropdown>Show example popover</Button>
+            </PopoverReference>
+            <PopoverContent>
+                <EmptyState class="wmx2">
+                    {#snippet description()}
+                        There's no data associated with your account yet. Please check back tomorrow.
+                    {/snippet}
+                    {#snippet actions()}
+                        <Button variant="tonal">Link an account</Button>
+                    {/snippet}
+                </EmptyState>
+            </PopoverContent>
+        </Popover>
+
+        <Popover id="popover-info-example" placement="top">
+            <PopoverReference>
+                <button class="s-btn s-btn__tonal p4" type="button">
+                    <Icon src={IconInfo} />
+                    <span class="v-visible-sr">info</span>
+                </button>
+            </PopoverReference>
+            <PopoverContent>
+                <p>We know you hate spam, and we do too. That's why we make it easy for you to update your email preferences or unsubscribe at anytime.</p>
+                <p class="mb0">We never share your email address with third parties for marketing purposes.</p>
+            </PopoverContent>
+        </Popover>
+    </div>
+</Example>
+
+### Default interactivity
+
+To enable interactive popovers, you will need to add the above attributes to the popover's originating button. Custom positioning can be specified using the `data-s-popover-placement`. In the following example, we've chosen `bottom-start`. No positioning classes need to be added to your markup, only the data attributes.
+
+To promote being able to tab to an open popover, it's best to place the popover immediately after the toggling button in the markup as siblings.
+
+```html
+<button class="s-btn s-btn__dropdown" role="button"
+        aria-controls="popover-example"
+        aria-expanded="false"
+        data-controller="s-popover"
+        data-action="s-popover#toggle"
+        data-s-popover-placement="bottom-start"
+        data-s-popover-toggle-class="is-selected">
+    …
+</button>
+<div class="s-popover"
+    id="popover-example"
+    role="menu">
+    <div class="s-popover--content">
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <Popover id="popover-default-example" placement="bottom-start">
+        <PopoverReference>
+            <Button dropdown>Popover button</Button>
+        </PopoverReference>
+        <PopoverContent>
+            Example popover content
+        </PopoverContent>
+    </Popover>
+</Example>
+
+### Dismissible
+
+In the case of new feature callouts, it may be appropriate to include an explicit dismiss button. You can add one using the styling provided by `.s-popover--close`.
+
+In order for to close the popover with an explicit close button, you'll need to add the controller to a parent as illustrated in the following example code:
+
+```html
+<div class="…"
+    data-controller="s-popover"
+    data-s-popover-reference-selector="#reference-element">
+
+    <button id="reference-element" class="s-btn s-btn__dropdown"
+            aria-controls="popover-example"
+            aria-expanded="true"
+            data-action="s-popover#toggle">
+        …
+    </button>
+
+    <div id="popover-example" class="s-popover is-visible" role="menu">
+        <button class="s-popover--close s-btn s-btn__tonal" aria-label="Close"
+            data-action="s-popover#toggle">
+            <svg aria-hidden="true">…</svg>
+        </button>
+        <div class="s-popover--content">
+            …
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <Popover id="popover-dismissible-example" placement="bottom-start">
+        <PopoverReference>
+            <Button dropdown>Show dismissible popover</Button>
+        </PopoverReference>
+        <PopoverContent>
+            <PopoverCloseButton />
+            <p class="mb0">Dismissible persistent popover presented with a close button</p>
+        </PopoverContent>
+    </Popover>
+</Example>
+
+### JavaScript interaction
+
+There may be cases where you need to show or hide a popover via JavaScript. For example, if you need to show a popover at a specific time or if you need to hide a popover from an event outside of the controller, Stacks provides convenience methods to achieve this.
+
+```javascript
+Stacks.application.register("section", class extends Stacks.StacksController {
+    static targets = ["help"];
+
+    showHelp(event) {
+        Stacks.showPopover(this.helpTarget);
+        event.stopPropagation();
+    }
+    hideHelp(event) {
+        Stacks.hidePopover(this.helpTarget);
+    }
+});
+```
+
+<Example>
+    <div>
+        <div class="d-flex ai-center jc-space-between mb16">
+            <h1 class="fs-headline1 mb0" role="presentation">Lorem ipsum</h1>
+            <Popover id="popover-js-example" placement="left">
+                <PopoverReference>
+                    <button type="button" class="s-btn s-btn__tonal p0">
+                        <Icon src={IconInfo} />
+                        <span class="v-visible-sr">help</span>
+                    </button>
+                </PopoverReference>
+                <PopoverContent>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </PopoverContent>
+            </Popover>
+        </div>
+        <p class="fc-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et metus molestie nulla luctus sodales ac luctus justo. Aenean iaculis ac ante sit amet aliquam. Duis dolor velit, imperdiet sed mauris eu, sollicitudin egestas nisl.</p>
+    </div>
+</Example>
+
+### JavaScript configuration (popovers)
+
+Situations may also arise where popovers need to be attached to an element after the document is rendered. For example, a button could have a contextual menu that is too expensive to serve up on every page load.
+
+Popovers can be attached to an element after the fact using `Stacks.attachPopover`.
+
+This method takes three parameters, the element to attach the popover to, the popover either as an element or an HTML string, and optional options for displaying the popover.
+
+```javascript
+Stacks.application.register("actions", class extends Stacks.StacksController {
+
+    var loaded = false;
+
+    async load() {
+        if (this.loaded) { return; }
+        Stacks.attachPopover(this.element,
+                             await fetch(`/posts/{postId}/actions`),
+                             { autoShow: true, toggleOnClick: true });
+        this.loaded = true;
+    }
+});
+```
+
+## Tooltips
+
+When a popover is intended only for display as an on-hover tooltip and contains no interactive text, the `s-tooltip` controller can be used in place of `s-popover`. This is a separate controller that can be used alongside `s-popover` on a single target element.
+
+### Tooltip hover attributes
+
+<ClassTable classes={tooltipAttributes} headings={{ class: 'Attribute', parent: 'Applied to' }} expandable expandButtonText="Show all tooltip hover attributes" />
+
+### Tooltip hover events
+
+<ClassTable classes={tooltipEvents} headings={{ class: 'Event', parent: 'Element' }} expandable expandButtonText="Show all tooltip hover events" />
+
+### Tooltip dispatched events
+
+<ClassTable classes={tooltipDispatchedEvents} headings={{ class: 'Event', parent: 'Element' }} />
+
+## Tooltip examples
+
+If the user doesn't need to interact with the _contents_ of the popover, it may be appropriate to only show it on hover. This will make popovers feel like a tooltip. To do so, we provide an alternative controller, `s-tooltip`, that shows the tooltip only on hover.
+
+### Title attribute
+
+In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the `title` attribute.
+
+```html
+<button class="s-btn" role="button"
+        title="…"
+        data-controller="s-tooltip"
+        data-s-tooltip-placement="bottom-start">
+    …
+</button>
+```
+
+<Example>
+    <Popover id="popover-tooltip-title-example" placement="bottom-start" tooltip>
+        <PopoverReference>
+            <Button>Hover tooltip popover</Button>
+        </PopoverReference>
+        <PopoverContent>
+            This popover shows content from the title attribute.
+        </PopoverContent>
+    </Popover>
+</Example>
+
+### JavaScript configuration (tooltips)
+
+In cases where the tooltip needs to display simple text or HTML, the popover can be configured using JavaScript. Plain text tooltips will render characters like &lt;, &gt;, and &amp; as is. HTML tooltips will render the HTML as expected.
+
+```javascript
+Stacks.setTooltipText(el,
+    "Plain text tooltip",
+    {
+        placement: "top-start"
+    });
+
+Stacks.setTooltipHtml(el,
+    "Tooltip <i>with</i> HTML",
+    {
+        placement: "top-end"
+    });
+```
+
+### Rich tooltips
+
+When a rich tooltip is required, a popover element can be configured in much the same way as an `s-popover` controller, with the most notable difference being the use of `aria-describedby` instead of `aria-controls`.
+
+```html
+<button
+    class="s-btn"
+    role="button"
+    aria-describedby="tooltip-example"
+    aria-expanded="false"
+    data-controller="s-tooltip">
+    …
+</button>
+<div
+    class="s-popover s-popover__tooltip"
+    id="tooltip-example"
+    role="tooltip">
+    <div class="s-popover--content">
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <Popover id="popover-rich-tooltip-example" tooltip>
+        <PopoverReference>
+            <Button>Hover tooltip popover</Button>
+        </PopoverReference>
+        <PopoverContent>
+            <div class="s-empty-state wmx2">
+                <p class="mb0">There's no data associated with your account yet. Please visit our <a href="#" class="s-link">help page</a> for more information.</p>
+            </div>
+        </PopoverContent>
+    </Popover>
+</Example>
+
+### Tooltips and interactive popovers
+
+Hover tooltips can be used alongside interactive popovers. Tooltips will not appear when the interactive popover is visible.
+
+```html
+<button class="s-btn s-btn__dropdown" role="button"
+        aria-controls="popover-example"
+        aria-expanded="false"
+        data-controller="s-popover s-tooltip"
+        data-action="s-popover#toggle"
+        data-s-popover-placement="bottom-start"
+        data-s-popover-toggle-class="is-selected"
+        title="…"
+        data-s-tooltip-placement="top-start">
+    …
+</button>
+<div class="s-popover"
+       id="popover-example"
+       role="menu">
+    <div class="s-popover--content">
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <Popover id="popover-tooltip-combined-click" placement="bottom-start">
+        <PopoverReference>
+            <button id="combined-trigger" class="s-btn s-btn__dropdown">Popover button with tooltip hover</button>
+        </PopoverReference>
+        <PopoverContent>
+            <div class="tt-uppercase fs-fine fc-light">Saved filters</div>
+            <div class="fc-black-350 fs-caption ta-center p16">
+                Save custom sorting &amp; filtering for easy access.
+            </div>
+        </PopoverContent>
+    </Popover>
+    <Popover id="popover-tooltip-combined-hover" tooltip placement="top-start">
+        <PopoverReference elementId="combined-trigger" />
+        <PopoverContent>View your saved filters</PopoverContent>
+    </Popover>
+</Example>
+
+## Manual placement
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined" role="presentation">
+    <p>Our Stimulus popover controller handles the positioning of popovers for you. Popovers <em>can</em> be positioned manually for various legacy reasons, but we recommend using the <code>s-popover</code> controller's <code>placement</code> property instead.</p>
+</Notice>
+
+### Manual examples
+
+Popovers can also be positioned manually if you aren't using the built-in JavaScript interactivity. Practically, this might look like adding something like `t8 l8` to `.s-popover`.
+
+By default, popovers are hidden and positioned absolutely. Adding the class `.is-visible` will show the popover.
+
+```html
+<div class="s-popover">
+    <div class="s-popover--content">
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-popover ps-relative is-visible">
+        <div class="s-popover--content">
+            <p class="mb0">Example popover with manual placement</p>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/post-summary.md b/packages/stacks-docs-next/src/docs/public/system/components/post-summary.md
new file mode 100644
index 0000000000..ee4d86bd47
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/post-summary.md
@@ -0,0 +1,441 @@
+---
+title: "Post summary"
+description: "The post summary component summarizes various content and associated meta data into a highly configurable component."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-postsummary--docs"
+---
+
+<script lang="ts">
+    import { PostSummary, PostSummaryAnswer, Tag } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-post-summary',                  parent: 'N/A',                       modifies: 'N/A',                        description: 'Base parent container for a post summary.' },
+        { class: '.s-post-summary--answers',         parent: '.s-post-summary',           modifies: 'N/A',                        description: 'Container for the post summary answers.' },
+        { class: '.s-post-summary--content',         parent: '.s-post-summary',           modifies: 'N/A',                        description: 'Container for the post summary content.' },
+        { class: '.s-post-summary--stats',           parent: '.s-post-summary',           modifies: 'N/A',                        description: 'Container for the post summary stats.' },
+        { class: '.s-post-summary--tags',            parent: '.s-post-summary',           modifies: 'N/A',                        description: 'Container for the post summary tags.' },
+        { class: '.s-post-summary--title',           parent: '.s-post-summary',           modifies: 'N/A',                        description: 'Container for the post summary title.' },
+        { class: '.s-post-summary--answer',          parent: '.s-post-summary--answers',  modifies: 'N/A',                        description: 'Container for a post summary answer.' },
+        { class: '.s-post-summary--content-meta',    parent: '.s-post-summary--content',  modifies: 'N/A',                        description: 'A container for post meta data, things like tags and user cards.' },
+        { class: '.s-post-summary--content-type',    parent: '.s-post-summary--content',  modifies: 'N/A',                        description: 'Container for the post summary content type.' },
+        { class: '.s-post-summary--excerpt',         parent: '.s-post-summary--content',  modifies: 'N/A',                        description: 'Container for the post summary excerpt.' },
+        { class: '.s-post-summary--stats-answers',   parent: '.s-post-summary--stats',    modifies: 'N/A',                        description: 'Container for the post summary answers stat.' },
+        { class: '.s-post-summary--stats-bounty',    parent: '.s-post-summary--stats',    modifies: 'N/A',                        description: 'Container for the post summary bounty stat.' },
+        { class: '.s-post-summary--stats-item',      parent: '.s-post-summary--stats',    modifies: 'N/A',                        description: 'A generic container for views, comments, read time, and other meta data which prepends a separator icon.' },
+        { class: '.s-post-summary--stats-votes',     parent: '.s-post-summary--stats',    modifies: 'N/A',                        description: 'Container for the post summary votes stat.' },
+        { class: '.s-post-summary--title-link',      parent: '.s-post-summary--title',    modifies: 'N/A',                        description: 'Link styling for the post summary title.' },
+        { class: '.s-post-summary--title-icon',      parent: '.s-post-summary--title',    modifies: 'N/A',                        description: 'Icon styling for the post summary title.' },
+        { class: '.s-post-summary--sm-hide',         parent: 'N/A',                       modifies: '.s-post-summary > *',        description: 'Hides the element on small screens.' },
+        { class: '.s-post-summary--sm-show',         parent: 'N/A',                       modifies: '.s-post-summary > *',        description: 'Shows the element on small screens.' },
+        { class: '.s-post-summary__answered',        parent: 'N/A',                       modifies: '.s-post-summary',            description: 'Adds the styling necessary for a question with an accepted answer.' },
+        { class: '.s-post-summary__deleted',         parent: 'N/A',                       modifies: '.s-post-summary',            description: 'Adds the styling necessary for a deleted post.' },
+        { class: '.s-post-summary--answer__accepted',parent: 'N/A',                       modifies: '.s-post-summary--answer',    description: 'Adds the styling necessary for an accepted answer.' },
+    ];
+
+    const excerpt = 'I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user\'s query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.';
+    const title = 'How to reduce hallucinations and improve source relevance in a RAG pipeline?';
+    const base = {
+        href: '#',
+        title,
+        excerpt,
+        readableTimestamp: 'asked 2 hours ago',
+        utcTimestamp: '2026-01-09T12:15:39Z',
+        userAvatar: 'https://picsum.photos/32',
+        userName: 'SofiaAlc',
+        userProfileUrl: '#',
+        userReputation: 1,
+        votes: 24,
+        answers: 1,
+        views: 98,
+    };
+    const answerBase = {
+        href: '#',
+        excerpt,
+        readableTimestamp: 'answered 1 hour ago',
+        utcTimestamp: '2026-01-09T13:15:39Z',
+        userAvatar: 'https://picsum.photos/33',
+        userName: 'SofiaAlc',
+        userProfileUrl: '#',
+        userReputation: 1,
+        votes: 12,
+    };
+
+    const excerptSizeLabels: Record<number, string> = {
+        0: 'No excerpt',
+        1: 'Small (1 line)',
+        2: 'Medium (2 lines)',
+        3: 'Large (3 lines)',
+    };
+
+    const stateItems = [
+        { state: 'draft'    as const },
+        { state: 'review'   as const },
+        { state: 'closed'   as const },
+        { state: 'archived' as const },
+        { state: 'pinned'   as const },
+    ];
+    const contentTypeItems = [
+        { name: 'announcement'    as const, url: '#' },
+        { name: 'how-to-guide'    as const, url: '#' },
+        { name: 'knowledge-article' as const, url: '#' },
+        { name: 'policy'          as const, url: '#' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Examples
+
+### Base
+
+Use the post summary component to provide a concise summary of a question, article, or other content.
+
+```html
+<div class="s-post-summary">
+    <div class="s-post-summary--stats s-post-summary--sm-hide">
+        <div class="s-post-summary--stats-votes">…</div>
+        <div class="s-post-summary--stats-answers">…</div>
+    </div>
+    <div class="s-post-summary--content">
+        <div class="s-post-summary--content-meta">
+            <div class="s-user-card s-user-card__sm">…</div>
+            <div class="s-post-summary--stats s-post-summary--sm-show">…</div>
+            <div class="s-post-summary--stats-item">… views</div>
+        </div>
+        <div class="s-post-summary--title">
+            <a class="s-post-summary--title-link" href="…">…</a>
+        </div>
+        <p class="s-post-summary--excerpt v-truncate3">…</p>
+        <div class="s-post-summary--tags">
+            <a class="s-tag" href="…">…</a>
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <PostSummary {...base}>
+        {#snippet tags()}
+            <Tag href="#">retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### Answered
+
+Add the `.s-post-summary__answered` modifier class to indicate that the post has an accepted answer.
+
+```html
+<div class="s-post-summary s-post-summary__answered">
+    …
+</div>
+```
+
+<Example>
+    <PostSummary {...base} acceptedAnswer>
+        {#snippet tags()}
+            <Tag href="#">retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### Bountied
+
+Include the `.s-post-summary--stats-bounty` element to indicate that the post has a bounty.
+
+```html
+<div class="s-post-summary">
+    <div class="s-post-summary--stats s-post-summary--sm-hide">
+        <div class="s-post-summary--stats-votes">…</div>
+        <div class="s-post-summary--stats-answers">…</div>
+        <div class="s-post-summary--stats-bounty">
+            +50 <span class="v-visible-sr">bounty</span>
+        </div>
+    </div>
+    …
+</div>
+```
+
+<Example>
+    <PostSummary {...base} bounty={50}>
+        {#snippet tags()}
+            <Tag href="#">retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### Ignored
+
+Including an ignored tag will automatically apply custom ignored styling to the post summary.
+
+```html
+<div class="s-post-summary">
+    …
+    <div class="s-post-summary--tags">
+        <a class="s-tag s-tag__ignored" href="…">…</a>
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <PostSummary {...base} acceptedAnswer bounty={50}>
+        {#snippet tags()}
+            <Tag href="#" ignored>retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+            <Tag href="#">ai</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### Watched
+
+Including a watched tag will automatically apply custom watched styling to the post summary.
+
+```html
+<div class="s-post-summary">
+    …
+    <div class="s-post-summary--tags">
+        <a class="s-tag s-tag__watched" href="…">…</a>
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <PostSummary {...base} acceptedAnswer>
+        {#snippet tags()}
+            <Tag href="#" watched>retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+            <Tag href="#">ai</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### Deleted
+
+Include the `.s-post-summary__deleted` modifier class applies custom deleted styling to the post summary.
+
+```html
+<div class="s-post-summary s-post-summary__deleted">
+    …
+</div>
+```
+
+<Example>
+    <PostSummary {...base} acceptedAnswer state="deleted">
+        {#snippet tags()}
+            <Tag href="#">retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+        {/snippet}
+    </PostSummary>
+</Example>
+
+### State badges
+
+Include the appropriate state badge to indicate the current state of the post.
+
+```html
+<!-- Draft -->
+<div class="s-post-summary">
+    <div class="s-post-summary--content">
+        <div class="s-post-summary--sm-show">
+            <span class="s-badge s-badge__sm s-badge__info">Draft</span>
+        </div>
+        <div class="s-post-summary--content-meta">
+            …
+            <span class="s-badge s-badge__info ml-auto s-post-summary--sm-hide">Draft</span>
+        </div>
+        …
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g32">
+        {#each stateItems as item}
+            <PostSummary {...base} state={item.state}>
+                {#snippet tags()}
+                    <Tag href="#">retrieval-augmented-generation</Tag>
+                    <Tag href="#">langchain</Tag>
+                    <Tag href="#">llm</Tag>
+                    <Tag href="#">vector-database</Tag>
+                {/snippet}
+            </PostSummary>
+        {/each}
+    </div>
+</Example>
+
+### Content types
+
+Include the appropriate content type badge to indicate the type of content the post represents.
+
+```html
+<!-- Announcement -->
+<div class="s-post-summary">
+    …
+    <div class="s-post-summary--content">
+        …
+        <div class="s-post-summary--tags">
+            <a class="s-post-summary--content-type" href="#">Announcement</a>
+            …
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g32">
+        {#each contentTypeItems as ct}
+            <PostSummary {...base} contentType={ct}>
+                {#snippet tags()}
+                    <Tag href="#">retrieval-augmented-generation</Tag>
+                    <Tag href="#">langchain</Tag>
+                {/snippet}
+            </PostSummary>
+        {/each}
+    </div>
+</Example>
+
+### Excerpt sizes
+
+Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also [Truncation](/system/base/truncation/).
+
+#### Classes
+
+| Class | Description |
+|---|---|
+| `.v-truncate1` | Truncates the excerpt to 1 line of text. |
+| `.v-truncate2` | Truncates the excerpt to 2 lines of text. |
+| `.v-truncate3` | Truncates the excerpt to 3 lines of text. |
+
+#### Examples
+
+```html
+<!-- No excerpt -->
+<div class="s-post-summary">…</div>
+
+<!-- 1-line excerpt -->
+<div class="s-post-summary">
+    …
+    <p class="s-post-summary--excerpt v-truncate1">…</p>
+    …
+</div>
+
+<!-- 2-line excerpt -->
+<div class="s-post-summary">
+    …
+    <p class="s-post-summary--excerpt v-truncate2">…</p>
+    …
+</div>
+
+<!-- 3-line excerpt -->
+<div class="s-post-summary">
+    …
+    <p class="s-post-summary--excerpt v-truncate3">…</p>
+    …
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g32">
+        {#each [0, 1, 2, 3] as lines}
+            <div class="d-flex fd-column g8">
+                <span class="ff-mono mb8">{excerptSizeLabels[lines]}</span>
+                <PostSummary {...base} excerptLines={lines}>
+                    {#snippet tags()}
+                        <Tag href="#">retrieval-augmented-generation</Tag>
+                        <Tag href="#">langchain</Tag>
+                        <Tag href="#">llm</Tag>
+                        <Tag href="#">vector-database</Tag>
+                    {/snippet}
+                </PostSummary>
+            </div>
+        {/each}
+    </div>
+</Example>
+
+### Small container
+
+Post summaries adapt to their container size. When shown with a container smaller than 448px, the post summary renders with a compact layout.
+
+```html
+<div class="s-post-summary">…</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g32 wmx3">
+        <PostSummary {...base} excerptLines={2}>
+            {#snippet tags()}
+                <Tag href="#">retrieval-augmented-generation</Tag>
+                <Tag href="#">langchain</Tag>
+            {/snippet}
+        </PostSummary>
+        <PostSummary {...base} acceptedAnswer excerptLines={2}>
+            {#snippet tags()}
+                <Tag href="#">retrieval-augmented-generation</Tag>
+                <Tag href="#">langchain</Tag>
+            {/snippet}
+        </PostSummary>
+        <PostSummary {...base} bounty={50} excerptLines={2}>
+            {#snippet tags()}
+                <Tag href="#">retrieval-augmented-generation</Tag>
+                <Tag href="#">langchain</Tag>
+            {/snippet}
+        </PostSummary>
+    </div>
+</Example>
+
+### Answers
+
+Answers to a question can be shown in a post summary. Include the `.s-post-summary--answers` container to show the answers.
+
+For accepted answers, add the `.s-post-summary--answer__accepted` modifier class and display the `Accepted answer` text and icon as shown in the example below.
+
+```html
+<div class="s-post-summary">
+    …
+    <div class="s-post-summary--answers">
+        <div class="s-post-summary--answer s-post-summary--answer__accepted">
+            …
+        </div>
+        <div class="s-post-summary--answer">
+            …
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <PostSummary {...base} acceptedAnswer answers={2}>
+        {#snippet tags()}
+            <Tag href="#">retrieval-augmented-generation</Tag>
+            <Tag href="#">langchain</Tag>
+            <Tag href="#">llm</Tag>
+            <Tag href="#">vector-database</Tag>
+        {/snippet}
+        {#snippet answerPreviews()}
+            <PostSummaryAnswer {...answerBase} accepted votes={18} />
+            <PostSummaryAnswer {...answerBase} votes={5} />
+        {/snippet}
+    </PostSummary>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/progress-bars.md b/packages/stacks-docs-next/src/docs/public/system/components/progress-bars.md
new file mode 100644
index 0000000000..088c8f1ae8
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/progress-bars.md
@@ -0,0 +1,11 @@
+---
+title: "Progress Bars"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/prose.md b/packages/stacks-docs-next/src/docs/public/system/components/prose.md
new file mode 100644
index 0000000000..f9315d21ae
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/prose.md
@@ -0,0 +1,117 @@
+---
+title: "Prose"
+description: "The prose component provides proper styling for rendered Markdown."
+---
+
+<script lang="ts">
+    import { Button } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import ProseContent from '$components/ProseContent.svelte';
+    import ProseContentSandbox from '$components/ProseContentSandbox.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-prose',     parent: 'N/A', modifies: 'N/A',      description: 'Adds proper styling for rendered Markdown.' },
+        { class: '.s-prose__sm', parent: 'N/A', modifies: '.s-prose', description: 'Decreases the base font size and line height.' },
+    ];
+
+    let minimalExpanded = $state(false);
+    let fullExpanded    = $state(false);
+    let smallExpanded   = $state(false);
+</script>
+
+## Parameters
+
+<ClassTable {classes} />
+
+## Examples
+
+### Minimal
+
+We modified this test document from the folks at [Tailwind](https://github.com/tailwindcss/typography/blob/master/README.md) to demonstrate and explain our design choices.
+
+<div class="docs-prose-example d-flex fd-column ba bc-black-200 bar-sm mb32">
+    <div class="ps-sticky bg-white z-popover py8 t0 bb bc-black-200">
+        <div class="px16">
+            <Button
+                variant="tonal"
+                aria-expanded={minimalExpanded}
+                aria-controls="prose-example-minimal"
+                onclick={() => minimalExpanded = !minimalExpanded}
+            >{minimalExpanded ? 'Collapse example' : 'Expand example'}</Button>
+        </div>
+    </div>
+    <div class="px16 py8">
+        <pre class="s-code-block" tabindex="0"><code class="s-code-block language-html">&lt;div class="s-prose"&gt;
+    …
+&lt;/div&gt;</code></pre>
+    </div>
+    <div
+        id="prose-example-minimal"
+        class="px16 overflow-y-auto"
+        class:hmx4={!minimalExpanded}
+    >
+        <div class="s-prose" role="presentation">
+            <ProseContent />
+        </div>
+    </div>
+</div>
+
+### Full Markdown spec
+
+This example includes the full kitchen-sink collection of everything the Markdown spec includes.
+
+<div class="docs-prose-example d-flex fd-column ba bc-black-200 bar-sm mb32">
+    <div class="ps-sticky bg-white z-popover py8 t0 bb bc-black-200">
+        <div class="px16">
+            <Button
+                variant="tonal"
+                aria-expanded={fullExpanded}
+                aria-controls="prose-example-full"
+                onclick={() => fullExpanded = !fullExpanded}
+            >{fullExpanded ? 'Collapse example' : 'Expand example'}</Button>
+        </div>
+    </div>
+    <div
+        id="prose-example-full"
+        class="px16 overflow-y-auto"
+        class:hmx4={!fullExpanded}
+    >
+        <div class="s-prose" role="presentation">
+            <ProseContentSandbox />
+        </div>
+    </div>
+</div>
+
+## Sizing
+
+### Small
+
+In ancillary content like comments or side-discussions, it may be appropriate to add the small variation.
+
+<div class="docs-prose-example d-flex fd-column ba bc-black-200 bar-sm mb32">
+    <div class="ps-sticky bg-white z-popover py8 t0 bb bc-black-200">
+        <div class="px16">
+            <Button
+                variant="tonal"
+                aria-expanded={smallExpanded}
+                aria-controls="prose-example-small"
+                onclick={() => smallExpanded = !smallExpanded}
+            >{smallExpanded ? 'Collapse example' : 'Expand example'}</Button>
+        </div>
+    </div>
+    <div class="px16 py8">
+        <pre class="s-code-block" tabindex="0"><code class="s-code-block language-html">&lt;div class="s-prose s-prose__sm"&gt;
+    …
+&lt;/div&gt;</code></pre>
+    </div>
+    <div
+        id="prose-example-small"
+        class="px16 overflow-y-auto"
+        class:hmx4={!smallExpanded}
+    >
+        <div class="s-prose s-prose__sm" role="presentation">
+            <ProseContent />
+        </div>
+    </div>
+</div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/sidebar-widgets.md b/packages/stacks-docs-next/src/docs/public/system/components/sidebar-widgets.md
new file mode 100644
index 0000000000..db416908b7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/sidebar-widgets.md
@@ -0,0 +1,70 @@
+---
+title: "Sidebar widgets"
+description: "Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses."
+---
+
+<script lang="ts">
+    import { Notice, Icon } from '@stackoverflow/stacks-svelte';
+    import { IconAward, IconPlus } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-sidebarwidget',          parent: 'N/A',                  modifies: 'N/A', description: 'Base sidebar widget style.' },
+        { class: '.s-sidebarwidget--content', parent: '.s-sidebarwidget',     modifies: 'N/A', description: 'Container for the sidebar widget content.' },
+        { class: '.s-sidebarwidget--header',  parent: '.s-sidebarwidget',     modifies: 'N/A', description: 'Container for the sidebar widget header.' },
+        { class: '.s-sidebarwidget--footer',  parent: '.s-sidebarwidget',     modifies: 'N/A', description: 'Container for the sidebar widget footer.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Basic style
+
+In its simplest form, `.s-sidebarwidget` is comprised of a `.s-sidebarwidget--content` section and optional `.s-sidebarwidget--header` and `.s-sidebarwidget--footer` sections. Together these classes create a widget with appropriate inner spacing for you to put whatever you want into it.
+
+<Notice variant="info" role="presentation" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>By default the content is a flex container. If you require <code>display: block</code> instead, add the <code>d-block</code> class.</p>
+</Notice>
+
+<Notice variant="warning" role="presentation" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>The examples of <code>s-sidebarwidget--header</code> are shown with <code>h2</code> elements, but the appropriate heading level may differ depending on context. Please use the appropriate heading level for your context to ensure heading levels only increase by 1.</p>
+</Notice>
+
+```html
+<div class="s-sidebarwidget">
+    <div class="s-sidebarwidget--header">
+        <h2>…</h2>
+        <a class="s-btn s-btn__xs s-btn__clear s-sidebarwidget--action">…</a>
+    </div>
+    <div class="s-sidebarwidget--content">
+        …
+        <button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
+    </div>
+    <div class="s-sidebarwidget--footer">
+        <button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-sidebarwidget wmx3 mx-auto">
+        <div class="s-sidebarwidget--header">
+            <div class="mr8"><Icon src={IconAward} /></div>
+            <h2>Community Achievements</h2>
+            <a href="#" class="s-btn s-btn__xs s-btn__clear s-sidebarwidget--action">
+                <Icon src={IconPlus} class="mr4" />Track
+            </a>
+        </div>
+        <div class="s-sidebarwidget--content">
+            <span>You've earned 3 new badges this week! Keep contributing to unlock more achievements and privileges within the community.</span>
+            <button class="s-btn s-btn__tonal s-sidebarwidget--action">View all badges</button>
+        </div>
+        <div class="s-sidebarwidget--footer">
+            <button class="s-btn s-btn__tonal s-sidebarwidget--action">See your progress</button>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/tables.md b/packages/stacks-docs-next/src/docs/public/system/components/tables.md
new file mode 100644
index 0000000000..f31ff061db
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/tables.md
@@ -0,0 +1,880 @@
+---
+title: "Tables"
+description: "Tables are used to list all information from a data set. The base style establishes preferred padding, font-size, and font-weight treatments. To enhance or customize the look of the table, apply any additional classes listed below."
+js: true
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import TableSortDemo from '$components/TableSortDemo.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-table-container',  parent: 'N/A',                   modifies: 'N/A',         description: 'Container for the table.' },
+        { class: '.s-table',            parent: '.s-table-container',    modifies: 'N/A',         description: 'Base table style.' },
+        { class: '.s-table--cell:n',    parent: '.s-table > tr > td',    modifies: 'N/A',         description: 'Table cell width in 12 evenly divided columns. Replace `:n` with the number of columns the cell should span.' },
+        { class: '.s-table__b0',        parent: 'N/A',                   modifies: '.s-table',    description: 'Removes all table cell borders.' },
+        { class: '.s-table__bx',        parent: 'N/A',                   modifies: '.s-table',    description: 'Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered.' },
+        { class: '.s-table__bx-simple', parent: 'N/A',                   modifies: '.s-table',    description: 'Removes most of the default borders and backgrounds. Good for tables without much data that don\'t need to be sorted or filtered.' },
+        { class: '.s-table__sortable',  parent: 'N/A',                   modifies: '.s-table',    description: 'Applies styling to imply the table is sortable.' },
+        { class: '.s-table__stripes',   parent: 'N/A',                   modifies: '.s-table',    description: 'Apply zebra striping to the table.' },
+        { class: '.s-table__sm',        parent: 'N/A',                   modifies: '.s-table',    description: 'Apply a condensed sizing to the table.' },
+        { class: '.s-table__lg',        parent: 'N/A',                   modifies: '.s-table',    description: 'Apply a large sizing to the table.' },
+    ];
+
+    const widths: ClassTableRow[] = [
+        { class: '.s-table--cell1',  output: '8.3333333%'   },
+        { class: '.s-table--cell2',  output: '16.6666667%'  },
+        { class: '.s-table--cell3',  output: '25%'          },
+        { class: '.s-table--cell4',  output: '33.3333333%'  },
+        { class: '.s-table--cell5',  output: '41.6666667%'  },
+        { class: '.s-table--cell6',  output: '50%'          },
+        { class: '.s-table--cell7',  output: '58.3333333%'  },
+        { class: '.s-table--cell8',  output: '66.6666667%'  },
+        { class: '.s-table--cell9',  output: '75%'          },
+        { class: '.s-table--cell10', output: '83.3333333%'  },
+        { class: '.s-table--cell11', output: '91.6666667%'  },
+        { class: '.s-table--cell12', output: '100%'         },
+    ];
+
+    const dataAttributes: ClassTableRow[] = [
+        { class: 'data-controller="s-table"',       parent: 'table', description: 'Wires up the table to the JS controller.' },
+        { class: 'data-s-table-target="column"',    parent: 'th',    description: 'Marks this as a sortable column for the purpose of modifying arrow icons.' },
+        { class: 'data-action="click-&gt;s-table#sort"', parent: 'button', description: 'Causes a click on the header cell to sort by this column.' },
+        { class: 'data-s-table-sort-to="top"',      parent: 'tr',    description: 'Forces the sorting of a row to the top.' },
+        { class: 'data-s-table-sort-to="bottom"',   parent: 'tr',    description: 'Forces the sorting of a row to the bottom.' },
+        { class: 'data-s-table-sort-val="[x]"',     parent: 'td',    description: 'Optionally use a custom value for sorting instead of the cell\'s text content.' },
+    ];
+
+    const atomic: ClassTableRow[] = [
+        { class: '.tl-auto',  output: 'table-layout: auto;'  },
+        { class: '.tl-fixed', output: 'table-layout: fixed;' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Default style
+
+Tables should be wrapped in a container, `.s-table-container`. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        <thead>
+            <tr>
+                <th scope="col"></th>
+                <th scope="col"></th>
+                <th scope="col"></th>
+                <th scope="col"></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th scope="row"></th>
+                <td></td>
+                <td></td>
+                <td></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table">
+            <thead>
+                <tr>
+                    <th scope="col">Name</th>
+                    <th scope="col">Username</th>
+                    <th scope="col">Joined</th>
+                    <th scope="col">Last seen</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th><a>Aaron Shekey</a></th>
+                    <td>aaronshekey</td>
+                    <td>Dec 1 '17 at 20:24</td>
+                    <td>just now</td>
+                </tr>
+                <tr>
+                    <th><a>Joshua Hynes</a></th>
+                    <td>joshuahynes</td>
+                    <td>Feb 12 at 18:47</td>
+                    <td>Aug 10 at 14:57</td>
+                </tr>
+                <tr>
+                    <th><a>Piper Lawson</a></th>
+                    <td>piperlawson</td>
+                    <td>Jul 5 at 14:32</td>
+                    <td>Aug 14 at 12:41</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Borders & backgrounds
+
+By default, tables are outlined, have borders on all cells, and have a styled header. Depending on the size and complexity of a table, these can all be configured.
+
+### Horizontal borders
+
+Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered.
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__bx">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__bx">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First name</th>
+                    <th scope="col">Last name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+                <tr><th scope="row">3</th><td>Paweł</td><td>L.</td><td>@pawełl</td></tr>
+                <tr><th scope="row">4</th><td>Ted</td><td>G.</td><td>@so-ted</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Simple borders
+
+Removes most of the default borders and backgrounds. Good for tables without much data that don't need to be sorted or filtered.
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__bx-simple">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__bx-simple">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First name</th>
+                    <th scope="col">Last name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+                <tr><th scope="row">3</th><td>Paweł</td><td>L.</td><td>@pawełl</td></tr>
+                <tr><th scope="row">4</th><td>Ted</td><td>G.</td><td>@so-ted</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### No borders
+
+Removes all table cell borders.
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__b0">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__b0">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First name</th>
+                    <th scope="col">Last name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+                <tr><th scope="row">3</th><td>Paweł</td><td>L.</td><td>@pawełl</td></tr>
+                <tr><th scope="row">4</th><td>Ted</td><td>G.</td><td>@so-ted</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Zebra striping
+
+When tables have a lot of information, you can help users group information and isolate data by adding zebra striping.
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__stripes">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__stripes">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+                <tr><th scope="row">3</th><td>Paweł</td><td>L.</td><td>@pawełl</td></tr>
+                <tr><th scope="row">4</th><td>Ted</td><td>G.</td><td>@so-ted</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Spacing
+
+A table's padding can be changed to be more or less condensed.
+
+### Small
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__sm">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__sm">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Default
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Paweł</td><td>L.</td><td>@pawełl</td></tr>
+                <tr><th scope="row">2</th><td>Ted</td><td>G.</td><td>@so-ted</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### Large
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__lg">
+        …
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__lg">
+            <thead>
+                <tr>
+                    <th scope="col"></th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><th scope="row">1</th><td>Aaron</td><td>S.</td><td>@aarons</td></tr>
+                <tr><th scope="row">2</th><td>Joshua</td><td>H.</td><td>@joshuah</td></tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Cell widths
+
+Table columns will size themselves based on their content. To set a specific width, you can use one of the following table cell classes to specify the width for any column.
+
+### Classes
+
+<ClassTable classes={widths} headings={{ output: 'Width' }} />
+
+### Examples
+
+```html
+// Example 1
+<div class="s-table-container">
+    <table class="s-table">
+        <tr>
+            <td class="s-table--cell2">…</td>
+            <td>…</td>
+        </tr>
+    </table>
+</div>
+// Example 2
+<div class="s-table-container">
+    <table class="s-table">
+        <tr>
+            <td class="s-table--cell3">…</td>
+            <td class="s-table--cell6">…</td>
+            <td>…</td>
+            <td>…</td>
+            <td>…</td>
+        </tr>
+    </table>
+</div>
+// Example 3
+<div class="s-table-container">
+    <table class="s-table">
+        <tr>
+            <td class="s-table--cell4">…</td>
+            <td>…</td>
+            <td>…</td>
+            <td>…</td>
+            <td>…</td>
+            <td class="s-table--cell2">…</td>
+        </tr>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="ff-mono">
+        <div class="s-table-container mb16">
+            <table class="s-table ta-center">
+                <tbody>
+                    <tr>
+                        <td class="docs-box s-table--cell2"><strong>.s-table--cell2</strong></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="s-table-container mb16">
+            <table class="s-table ta-center">
+                <tbody>
+                    <tr>
+                        <td class="docs-box s-table--cell3"><strong>.s-table--cell3</strong></td>
+                        <td class="docs-box s-table--cell6"><strong>.s-table--cell6</strong></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="s-table-container">
+            <table class="s-table ta-center">
+                <tbody>
+                    <tr>
+                        <td class="docs-box s-table--cell4"><strong>.s-table--cell4</strong></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box"><em class="fc-light">No Class</em></td>
+                        <td class="docs-box s-table--cell2"><strong>.s-table--cell2</strong></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</Example>
+
+## Alignment
+
+### Vertical alignment
+
+The default vertical alignment is `middle`. You change a table's or a specific cell's vertical alignment by using the [Vertical Alignment atomic classes](/system/base/vertical-alignment#classes).
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        <tbody>
+            <tr>
+                <td class="va-top">…</td>
+                <td class="va-middle">…</td>
+                <td class="va-bottom">…</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="s-table-container">
+    <table class="s-table va-bottom">
+        <tbody>
+            <tr>
+                <td>…</td>
+                <td>…</td>
+                <td>…</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="ff-mono">
+        <div class="s-table-container">
+            <table class="s-table mb16">
+                <tbody>
+                    <tr>
+                        <td class="docs-box va-top hs1">.va-top</td>
+                        <td class="docs-box va-middle">.va-middle</td>
+                        <td class="docs-box va-bottom">.va-bottom</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="s-table-container">
+            <table class="s-table va-bottom">
+                <tbody>
+                    <tr>
+                        <td class="docs-box hs1">.s-table.va-bottom</td>
+                        <td class="docs-box">.s-table.va-bottom</td>
+                        <td class="docs-box">.s-table.va-bottom</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</Example>
+
+### Text alignment
+
+Text alignment can be changed at a table or cell level by using [atomic text alignment classes](/system/foundation/typography#layout-classes). Columns containing copy should be left-aligned. Columns containing numbers should be right-aligned.
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        <tbody>
+            <tr>
+                <td class="ta-left">…</td>
+                <td class="ta-center">…</td>
+                <td class="ta-right">…</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="s-table-container">
+    <table class="s-table ta-right">
+        <tbody>
+            <tr>
+                <td>…</td>
+                <td>…</td>
+                <td>…</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="ff-mono">
+        <div class="s-table-container">
+            <table class="s-table mb16">
+                <tbody>
+                    <tr>
+                        <td class="docs-box ta-left hs1">.ta-left</td>
+                        <td class="docs-box ta-center">.ta-center</td>
+                        <td class="docs-box ta-right">.ta-right</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="s-table-container">
+            <table class="s-table ta-right">
+                <tbody>
+                    <tr>
+                        <td class="docs-box hs1">.s-table.ta-right</td>
+                        <td class="docs-box">.s-table.ta-right</td>
+                        <td class="docs-box">.s-table.ta-right</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</Example>
+
+## Sortable tables
+
+To indicate that the user can sort a table by different columns, add the `s-table__sortable` class to the table.
+
+The `<th>` cells should include arrows to indicate sortability or the currently applied sorting. In addition, the column that is currently sorted should be indicated with the `is-sorted` class on its `<th>`.
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__sortable">
+        <thead>
+            <tr>
+                <th scope="col" class="is-sorted">
+                    <button type="button">Listing <svg class="svg-icon">…</svg></button>
+                </th>
+                <th scope="col">
+                    <button type="button">Status <svg class="svg-icon">…</svg></button>
+                </th>
+                …
+            </tr>
+        </thead>
+        <tbody>…</tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__sortable">
+            <thead>
+                <tr>
+                    <th scope="col" class="is-sorted">
+                        <a href="#">Listing <svg aria-hidden="true" class="svg-icon iconArrowDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="M3 5h8L7 9z"/></svg></a>
+                    </th>
+                    <th scope="col">
+                        <a href="#">Status <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"/></svg></a>
+                    </th>
+                    <th scope="col">
+                        <button type="button">Owner <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"/></svg></button>
+                    </th>
+                    <th scope="col" class="ta-right">
+                        <button type="button">Views <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"/></svg></button>
+                    </th>
+                    <th scope="col" class="ta-right">
+                        <button type="button">Applies <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"/></svg></button>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a>Site Reliability Engineer, Generalist</a><br><span class="fs-caption">Sydney, Australia</span></td>
+                    <td>Running</td>
+                    <td>Sansa Stark</td>
+                    <td class="ta-right">502</td>
+                    <td class="ta-right">13</td>
+                </tr>
+                <tr>
+                    <td><a>Senior Product Designer</a><br><span class="fs-caption">New York, NY, USA</span></td>
+                    <td>Running</td>
+                    <td>Robert Baratheon</td>
+                    <td class="ta-right">900</td>
+                    <td class="ta-right">15</td>
+                </tr>
+                <tr>
+                    <td><a>Product Manager, Developer Products</a><br><span class="fs-caption">London, England</span></td>
+                    <td>Running</td>
+                    <td>Sansa Stark</td>
+                    <td class="ta-right">3</td>
+                    <td class="ta-right">1</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+### JavaScript sorting
+
+Stacks provides built-in functionality for letting the user sort a table by the values in a column through clicking the column header. This requires the complete data to already exist in the table (e.g. it is not going to work if the table is paged and requires a call to the server to update data on sorting). See the [JavaScript introduction](/system/develop/javascript) for general information about JS in Stacks.
+
+To make your table user-sortable, do the following:
+
+1. Style the table as sortable as explained in the section above.
+2. Set `data-controller="s-table"` on the `<table>` element.
+3. Set `data-s-table-target="column"` and `data-action="click-&gt;s-table#sort"` on each of the `<th>` elements that control sorting.
+4. Add the three icons for showing _ascending sort_, _descending sort_, and _unsorted_ to each of these header cells, hiding the first two with a `d-none` class. Add the `js-sorting-indicator` class to each of the icons, and add `js-sorting-indicator-asc`, `js-sorting-indicator-desc`, and `js-sorting-indicator-none` to the appropriate icon.
+
+**Note:** Using `js-…` classes is not really the optimal way of doing this, and will probably be replaced with something better eventually. When that happens, the `js-…` mechanism will be deprecated but continue to be supported for a while, so you have ample time to update things.
+
+By default, the data is sorted by the content of the cell. If you need to use a different value, for example because your cell contains a human-readable date, add a `data-s-table-sort-val` attribute to the cell.
+
+If a column contains any data that is not an integer, the data will be sorted lexicographically. Otherwise it will be sorted numerically, with empty cells being considered the lowest number.
+
+If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add `data-s-table-sort-to="top"` or `data-s-table-sort-to="bottom"` to the `<tr>` element.
+
+### JavaScript data attributes
+
+<ClassTable classes={dataAttributes} headings={{ class: 'Attribute', parent: 'Applies to' }} />
+
+### JavaScript example
+
+```html
+<div class="s-table-container">
+    <table class="s-table s-table__sortable" data-controller="s-table">
+        <thead>
+            <tr>
+                <th scope="col" data-s-table-target="column">
+                    <button data-action="click-&gt;s-table#sort">
+                        Season
+                        <svg class="js-sorting-indicator js-sorting-indicator-asc d-none">…</svg>
+                        <svg class="js-sorting-indicator js-sorting-indicator-desc d-none">…</svg>
+                        <svg class="js-sorting-indicator js-sorting-indicator-none">…</svg>
+                    </button>
+                </th>
+                …
+            </tr>
+        </thead>
+        <tbody>
+            <tr><td>Winter</td><td data-s-table-sort-val="12">December</td><td>2</td></tr>
+            <tr><td>Spring</td><td data-s-table-sort-val="3">March</td><td>13</td></tr>
+            <tr><td>Summer</td><td data-s-table-sort-val="6">June</td><td>25</td></tr>
+            <tr><td>Fall</td><td data-s-table-sort-val="9">September</td><td>13</td></tr>
+            <tr data-s-table-sort-to="bottom" class="fw-bold">
+                <td colspan="2">Average temperature</td>
+                <td>13</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <TableSortDemo />
+</Example>
+
+## Bulk actions
+
+Generally for a checkbox input that's placed first in the table row for bulk actions.
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        <thead>
+            <tr>
+                <th scope="col" class="s-table--bulk">
+                    <label class="v-visible-sr" for="example-checkbox-1">bulk checkbox</label>
+                    <div class="s-checkbox"><input type="checkbox" id="example-checkbox-1"></div>
+                </th>
+                <th scope="col">…</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="s-table--bulk">
+                    <label class="v-visible-sr" for="example-checkbox-2">bulk checkbox</label>
+                    <div class="s-checkbox"><input type="checkbox" id="example-checkbox-2"></div>
+                </td>
+                <td>…</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table">
+            <thead>
+                <tr>
+                    <th scope="col" class="s-table--bulk">
+                        <label class="v-visible-sr" for="bulk-checkbox-1">bulk checkbox</label>
+                        <div class="s-checkbox"><input type="checkbox" id="bulk-checkbox-1"></div>
+                    </th>
+                    <th scope="col">Display Name</th>
+                    <th scope="col">Full Name</th>
+                    <th scope="col">Email</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="s-table--bulk">
+                        <label class="v-visible-sr" for="bulk-checkbox-2">bulk checkbox</label>
+                        <div class="s-checkbox"><input type="checkbox" id="bulk-checkbox-2"></div>
+                    </td>
+                    <td><a>SansaStark</a></td>
+                    <td>Sansa Stark</td>
+                    <td>sstark@company.com</td>
+                </tr>
+                <tr>
+                    <td class="s-table--bulk">
+                        <label class="v-visible-sr" for="bulk-checkbox-3">bulk checkbox</label>
+                        <div class="s-checkbox"><input type="checkbox" id="bulk-checkbox-3"></div>
+                    </td>
+                    <td><a>RobertBaratheon</a></td>
+                    <td>Robert Baratheon</td>
+                    <td>rbaratheon@company.com</td>
+                </tr>
+                <tr>
+                    <td class="s-table--bulk">
+                        <label class="v-visible-sr" for="bulk-checkbox-4">bulk checkbox</label>
+                        <div class="s-checkbox"><input type="checkbox" id="bulk-checkbox-4"></div>
+                    </td>
+                    <td><a>Test Developer To Be Is Not A Developer Yet</a></td>
+                    <td>Test Developer To Be Is Not A Developer Yet</td>
+                    <td>testdevelopertobeisnotadevyet@team-mgmt.dev.company.com</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Totals row
+
+Used mainly with data tables, the totals row increases the font-size for all cells within a row.
+
+```html
+<div class="s-table-container">
+    <table class="s-table ta-right">
+        …
+        <tfoot class="s-table--totals">
+            …
+        </tfoot>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table ta-right">
+            <thead>
+                <tr>
+                    <th scope="col" class="ta-left">Listing</th>
+                    <th scope="col" class="s-table--cell2">Views</th>
+                    <th scope="col" class="s-table--cell2">Apps</th>
+                    <th scope="col" class="s-table--cell2">App CTR</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="ta-left"><a>Site Reliability Engineer, Generalist</a></td>
+                    <td>6,871</td><td>187</td><td>5.02%</td>
+                </tr>
+                <tr>
+                    <td class="ta-left"><a>Senior Product Designer</a></td>
+                    <td>2,242</td><td>196</td><td>16.46%</td>
+                </tr>
+                <tr>
+                    <td class="ta-left"><a>Product Manager, Developer Products</a></td>
+                    <td>3,469</td><td>229</td><td>14.9%</td>
+                </tr>
+            </tbody>
+            <tfoot class="s-table--totals">
+                <tr>
+                    <th scope="row" class="ta-left">Totals</th>
+                    <td>12,582</td><td>612</td><td>14.65%</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</Example>
+
+## Inactive rows
+
+For tables that include inactive or disabled rows, such as inactive users or teams, `.is-disabled` can be applied to any `<tr>`. Additionally, `.is-enabled` can be applied to any `<th>` or `<td>` that you'd like to ignore the parent disabled styling (such as a persistent link to reactivate a disabled account).
+
+```html
+<div class="s-table-container">
+    <table class="s-table">
+        <tbody>
+            <tr class="is-disabled">
+                <td>…</td>
+                <td>…</td>
+                <td class="is-enabled"><a>Add</a></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+<Example>
+    <div class="s-table-container">
+        <table class="s-table s-table__bx">
+            <thead>
+                <tr>
+                    <th scope="col" class="ta-left">Name</th>
+                    <th scope="col">Email</th>
+                    <th scope="col">Last seen</th>
+                    <th scope="col"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th><a>Aaron Shekey</a></th>
+                    <td>emailaddress@website.com</td>
+                    <td>just now</td>
+                    <td class="ta-right"><a class="fc-red-400">Remove</a></td>
+                </tr>
+                <tr class="is-disabled">
+                    <th>Joshua Hynes</th>
+                    <td>emailaddress@website.com</td>
+                    <td>Sep 28 '18</td>
+                    <td class="ta-right is-enabled"><a>Add</a></td>
+                </tr>
+                <tr class="is-disabled">
+                    <th>Paweł Ludwiczak</th>
+                    <td>emailaddress@website.com</td>
+                    <td>Apr 17 '19</td>
+                    <td class="ta-right is-enabled"><a>Add</a></td>
+                </tr>
+                <tr>
+                    <th><a>Piper Lawson</a></th>
+                    <td>emailaddress@website.com</td>
+                    <td>Yesterday</td>
+                    <td class="ta-right"><a class="fc-red-400">Remove</a></td>
+                </tr>
+                <tr>
+                    <th><a>Ted Goas</a></th>
+                    <td>emailaddress@website.com</td>
+                    <td>5min ago</td>
+                    <td class="ta-right"><a class="fc-red-400">Remove</a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</Example>
+
+## Atomic classes
+
+Further control of table behavior is possible with atomic classes. For example, you can make non-table markup display as a table layout by pairing `.d-table`, `.d-table-cell` and `.tl-fixed`.
+
+<ClassTable classes={atomic} headings={{ output: 'Output' }} />
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/tags.md b/packages/stacks-docs-next/src/docs/public/system/components/tags.md
new file mode 100644
index 0000000000..5d813df01b
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/tags.md
@@ -0,0 +1,138 @@
+---
+title: "Tags"
+description: "Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-tag--docs"
+figma: "https://svelte.stackoverflow.design/figma/tags"
+---
+
+<script lang="ts">
+    import { Tag } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import PreviewTable from '$components/PreviewTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+    import type { PreviewTableRow } from '$components/PreviewTable.svelte';
+
+    const sizesRows: PreviewTableRow[] = [
+        { classes: ['.s-tag__sm'], size: 'sm',      label: 'css', description: 'Apply a small size to the tag.' },
+        { classes: ['N/A'],        size: undefined,  label: 'css', description: 'The default tag size.' },
+        { classes: ['.s-tag__lg'], size: 'lg',       label: 'css', description: 'Apply a large size to the tag.' },
+    ];
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-tag',             parent: 'N/A',    modifies: 'N/A',    description: 'Base tag style that is used almost universally.' },
+        { class: '.s-tag--dismiss',    parent: '.s-tag', modifies: 'N/A',    description: 'For a clear or dismiss action icon. When using this element, it should be rendered as a `button` containing the icon and the parent `.s-tag` should be rendered as a `span` element.' },
+        { class: '.s-tag--sponsor',    parent: '.s-tag', modifies: 'N/A',    description: "Correctly positions a tag's sponsor logo." },
+        { class: '.s-tag__moderator',  parent: 'N/A',    modifies: '.s-tag', description: 'Exclusively used within Meta communities by moderators (and employees) to assign unique statuses to questions.' },
+        { class: '.s-tag__required',   parent: 'N/A',    modifies: '.s-tag', description: 'Exclusively used within Meta communities to denote the post type. One of these tags are required on all Meta posts.' },
+        { class: '.s-tag__ignored',    parent: 'N/A',    modifies: '.s-tag', description: 'Prepends an icon to indicate the tag is ignored.' },
+        { class: '.s-tag__watched',    parent: 'N/A',    modifies: '.s-tag', description: 'Prepends an icon to indicate the tag is watched.' },
+        { class: '.s-tag__sm',         parent: 'N/A',    modifies: '.s-tag', description: 'Apply a small size to the tag.' },
+        { class: '.s-tag__lg',         parent: 'N/A',    modifies: '.s-tag', description: 'Apply a large size to the tag.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Accessibility
+
+Tags should be focusable and navigable with the keyboard. The various tag states (Required, Moderator, Watched, Ignored) are visually distinct but do not include any text indicators for screen readers. For that reason it is recommended to provide additional context using hidden text elements with the `v-visible-sr` class.
+
+## Examples
+
+### Default tag
+
+```html
+<a class="s-tag" href="#">…</a>
+<span class="s-tag">… <button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss … tag</span>…</button></span>
+<a class="s-tag" href="…"><img class="s-tag--sponsor" src="…"> … <div class="v-visible-sr">Sponsored tag</div></a>
+<span class="s-tag">
+    <a href="…">…</a>
+    <button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss … tag</span>…</button>
+</span>
+```
+
+<Example>
+    <div class="d-flex g4 fw-wrap">
+        <Tag href="#">jquery</Tag>
+        <Tag dismissable>javascript</Tag>
+        <Tag href="#">
+            {#snippet sponsor()}
+                <img src="https://i.stack.imgur.com/tKsDb.png" width="16" height="18" alt="Google Android" />
+            {/snippet}
+            android
+            <div class="v-visible-sr">Sponsored tag</div>
+        </Tag>
+        <Tag href="#" dismissable>javascript</Tag>
+    </div>
+</Example>
+
+### Moderator
+
+```html
+<a class="s-tag s-tag__moderator" href="#">status-completed <div class="v-visible-sr">Moderator tag</div></a>
+<span class="s-tag s-tag__moderator">status-bydesign <div class="v-visible-sr">Moderator tag</div><button class="s-tag--dismiss">…</button></span>
+<a class="s-tag s-tag__moderator" href="#">status-planned <div class="v-visible-sr">Moderator tag</div></a>
+```
+
+<Example>
+    <div class="d-flex g4 fw-wrap">
+        <Tag href="#" variant="moderator">status-completed <div class="v-visible-sr">Moderator tag</div></Tag>
+        <Tag variant="moderator" dismissable>status-bydesign <div class="v-visible-sr">Moderator tag</div></Tag>
+        <Tag href="#" variant="moderator">status-planned <div class="v-visible-sr">Moderator tag</div></Tag>
+    </div>
+</Example>
+
+### Required
+
+```html
+<a class="s-tag s-tag__required" href="#">discussion <div class="v-visible-sr">Required tag</div></a>
+<span class="s-tag s-tag__required">feature-request <div class="v-visible-sr">Required tag</div><button class="s-tag--dismiss">…</button></span>
+<a class="s-tag s-tag__required" href="#">bug <div class="v-visible-sr">Required tag</div></a>
+```
+
+<Example>
+    <div class="d-flex g4 fw-wrap">
+        <Tag href="#" variant="required">discussion <div class="v-visible-sr">Required tag</div></Tag>
+        <Tag variant="required" dismissable>feature-request <div class="v-visible-sr">Required tag</div></Tag>
+        <Tag href="#" variant="required">bug <div class="v-visible-sr">Required tag</div></Tag>
+    </div>
+</Example>
+
+### Watched
+
+```html
+<a class="s-tag s-tag__watched" href="#">asp-net <div class="v-visible-sr">Watched tag</div></a>
+```
+
+<Example>
+    <Tag href="#" watched>asp-net <div class="v-visible-sr">Watched tag</div></Tag>
+</Example>
+
+### Ignored
+
+```html
+<a class="s-tag s-tag__ignored" href="#">netscape <div class="v-visible-sr">Ignored tag</div></a>
+```
+
+<Example>
+    <Tag href="#" ignored>netscape <div class="v-visible-sr">Ignored tag</div></Tag>
+</Example>
+
+## Sizes
+
+```html
+<a class="s-tag s-tag__sm" href="#">css</a>
+<a class="s-tag" href="#">css</a>
+<a class="s-tag s-tag__lg" href="#">css</a>
+```
+
+<Example>
+    <PreviewTable rows={sizesRows} columnLabel="Modifier class">
+        {#snippet example(row)}
+            <Tag href="#" size={row.size}>{row.label}</Tag>
+        {/snippet}
+    </PreviewTable>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/toggle-switch.md b/packages/stacks-docs-next/src/docs/public/system/components/toggle-switch.md
new file mode 100644
index 0000000000..1e3cffadae
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/toggle-switch.md
@@ -0,0 +1,120 @@
+---
+title: "Toggle switch"
+description: "A toggle is used to quickly switch between two or more possible states. They are most commonly used for simple \"on/off\" switches."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1943-848"
+---
+
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import {
+        IconAssistant, IconSearch,
+        IconCodeDocument, IconDocument, IconComposeDocument,
+    } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-toggle-switch',            parent: 'N/A', modifies: 'N/A',                description: 'Base toggle switch style.' },
+        { class: '.s-toggle-switch__multiple',  parent: 'N/A', modifies: '.s-toggle-switch',   description: 'Used to style toggle switches with three or more options.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Styles
+
+### Basic toggle
+
+Toggle switches take up less space than an "on/off" radio button group and communicate their intended purpose more clearly than a checkbox that toggles functionality. They also provide consistency between desktop and mobile experiences.
+
+```html
+<div class="d-flex ai-center g8">
+    <label class="s-label" for="toggle-example-default">…</label>
+    <input class="s-toggle-switch" id="toggle-example-default" type="checkbox">
+</div>
+<div class="d-flex ai-center g8">
+    <label class="s-label" for="toggle-example-checked">…</label>
+    <input class="s-toggle-switch" id="toggle-example-checked" type="checkbox" checked>
+</div>
+<div class="d-flex ai-center g8">
+    <label class="s-label" for="toggle-example-disabled">…</label>
+    <input class="s-toggle-switch" id="toggle-example-disabled" type="checkbox" disabled>
+</div>
+<div class="d-flex ai-center g8">
+    <label class="s-label" for="toggle-example-checked-disabled">…</label>
+    <input class="s-toggle-switch" id="toggle-example-checked-disabled" type="checkbox" disabled checked>
+</div>
+```
+
+<Example>
+    <div class="d-flex fw-wrap g16">
+        <div class="d-flex ai-center g8">
+            <label class="s-label" for="toggle-example-default">Default</label>
+            <input class="s-toggle-switch" id="toggle-example-default" type="checkbox" />
+        </div>
+        <div class="d-flex ai-center g8">
+            <label class="s-label" for="toggle-example-checked">Checked</label>
+            <input class="s-toggle-switch" id="toggle-example-checked" type="checkbox" checked />
+        </div>
+        <div class="d-flex ai-center g8">
+            <label class="s-label" for="toggle-example-disabled">Disabled</label>
+            <input class="s-toggle-switch" id="toggle-example-disabled" type="checkbox" disabled />
+        </div>
+        <div class="d-flex ai-center g8">
+            <label class="s-label" for="toggle-example-checked-disabled">Checked and disabled</label>
+            <input class="s-toggle-switch" id="toggle-example-checked-disabled" type="checkbox" disabled checked />
+        </div>
+    </div>
+</Example>
+
+### Two or more options with icons
+
+Toggles switches can be extended to choose between two or more states where each state is represented by an icon. Using the `__multiple` toggle instead of a radio group and making sure labels follow their inputs in this case is important.
+
+```html
+<fieldset>
+    <div class="d-flex ai-center g8">
+        <legend class="s-label c-default">…</legend>
+        <div class="s-toggle-switch s-toggle-switch__multiple">
+            <input type="radio" name="group1" id="input-1" checked value="value1">
+            <label for="input-1" aria-label="First value" title="First value">…</label>
+            <input type="radio" name="group1" id="input-2" value="value2">
+            <label for="input-2" aria-label="Second value" title="Second value">…</label>
+            <input type="radio" name="group1" id="input-3" value="value3">
+            <label for="input-3" aria-label="Third value" title="Third value">…</label>
+        </div>
+    </div>
+</fieldset>
+```
+
+<Example>
+    <div class="d-flex fd-column g24">
+        <fieldset>
+            <div class="d-flex ai-center g8">
+                <legend class="c-default s-label">Search Style</legend>
+                <div class="s-toggle-switch s-toggle-switch__multiple">
+                    <input type="radio" name="example1" id="toggle-assistant" checked value="ai" />
+                    <label for="toggle-assistant" aria-label="AI Search" title="AI Search"><Icon src={IconAssistant} /></label>
+                    <input type="radio" name="example1" id="toggle-search" value="lexical" />
+                    <label for="toggle-search" aria-label="Lexical Search" title="Lexical Search"><Icon src={IconSearch} /></label>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <div class="d-flex ai-center g8">
+                <legend class="c-default s-label">Export Type</legend>
+                <div class="s-toggle-switch s-toggle-switch__multiple">
+                    <input type="radio" name="example2" id="toggle-xml" value="xml" />
+                    <label for="toggle-xml" aria-label="XML" title="XML"><Icon src={IconCodeDocument} /></label>
+                    <input type="radio" name="example2" id="toggle-pdf" checked value="pdf" />
+                    <label for="toggle-pdf" aria-label="PDF" title="PDF"><Icon src={IconDocument} /></label>
+                    <input type="radio" name="example2" id="toggle-json" value="json" />
+                    <label for="toggle-json" aria-label="JSON" title="JSON"><Icon src={IconComposeDocument} /></label>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/topbar.md b/packages/stacks-docs-next/src/docs/public/system/components/topbar.md
new file mode 100644
index 0000000000..44564d2b01
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/topbar.md
@@ -0,0 +1,11 @@
+---
+title: "Topbar"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/uploader.md b/packages/stacks-docs-next/src/docs/public/system/components/uploader.md
new file mode 100644
index 0000000000..ae2f900dd1
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/uploader.md
@@ -0,0 +1,11 @@
+---
+title: "Uploader"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>This component has been removed in Stacks v3. If using Stacks v2, please refer to the <a href="https://v2.stackoverflow.design/product/develop/using-stacks/">v2 documentation</a> for more information.</p>
+</Notice>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/user-cards.md b/packages/stacks-docs-next/src/docs/public/system/components/user-cards.md
new file mode 100644
index 0000000000..37aaae2ad1
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/user-cards.md
@@ -0,0 +1,1219 @@
+---
+title: "User cards"
+description: "User cards are a combination of a user and metadata about the user or post"
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-usercard--docs"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-user-card',                               parent: 'N/A', modifies: 'N/A',                       description: 'Base user card container that applies the basic style.' },
+        { class: '.s-user-card--column',                       parent: '.s-user-card',                               description: 'A container for column elements.' },
+        { class: '.s-user-card--row',                          parent: '.s-user-card',                               description: 'A container for row elements.' },
+        { class: '.s-user-card--group',                        parent: '.s-user-card',                               description: 'A container for group elements.' },
+        { class: '.s-user-card--bio',                          parent: 'N/A', modifies: 'N/A',                       description: "Container for the user's bio." },
+        { class: '.s-user-card--recognition',                  parent: 'N/A', modifies: 'N/A',                       description: 'Container for recognition by a collective.' },
+        { class: '.s-user-card--rep',                          parent: 'N/A', modifies: 'N/A',                       description: "Container for the user's reputation." },
+        { class: '.s-user-card--time',                         parent: 'N/A', modifies: 'N/A',                       description: "Container for the user's timestamp." },
+        { class: '.s-user-card--username',                     parent: 'N/A', modifies: 'N/A',                       description: "Container for the user's username." },
+        { class: '.s-user-card--group__split',                 parent: 'N/A', modifies: '.s-user-card--group',       description: 'Inserts a separator between each element.' },
+        { class: '.s-user-card__sm',                           parent: 'N/A', modifies: '.s-user-card',              description: 'Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies.' },
+        { class: '.s-user-card__lg',                           parent: 'N/A', modifies: '.s-user-card',              description: 'Use the large variant when space permits and more detailed information is desired.' },
+        { class: '.s-user-card--username__op',                 parent: 'N/A', modifies: '.s-user-card--username',    description: 'Identifies the author of the primary post when they appear in secondary contexts, like comment threads.' },
+        { class: '.s-user-card__deleted',                      parent: 'N/A', modifies: '.s-user-card',              description: "When a user is deleted, we still need to show their name, but we strip the metadata." },
+        { class: '.s-user-card--recognition-additional-bling', parent: 'N/A', modifies: 'N/A',                       description: 'This label appears within a Collective question post to signal that they are a Recognized Member.' },
+    ];
+
+    const sizes: ClassTableRow[] = [
+        { class: '.s-user-card__sm', parent: 'small', description: 'Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies.' },
+        { class: 'N/A',              parent: 'N/A',   description: 'Use the default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors.' },
+        { class: '.s-user-card__lg', parent: 'large', description: 'Use the large variant when space permits and more detailed information is desired.' },
+    ];
+
+    const states: ClassTableRow[] = [
+        { class: '.s-user-card--username__op', parent: 'Original Poster',  description: 'This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads.' },
+        { class: 'N/A',                        parent: 'New Contributor',  description: 'This label appears on a user\'s first-ever question or answer to signal that they are new to the platform.' },
+        { class: '.s-user-card__deleted',      parent: 'Deleted user',     description: 'When a user is deleted, we still need to show their name, but we strip the meta data.' },
+    ];
+
+    const additionalBling: ClassTableRow[] = [
+        { class: '.s-user-card--recognition-additional-bling', parent: 'Recognized Member', description: 'This label appears within a Collective question post to signal that they are a Recognized Member.' },
+        { class: 'N/A',                                        parent: 'Awarded',           description: 'This icon appears next to a user when they are within the top 3 positions of a Collective\'s leaderboard.' },
+    ];
+
+    const svgStarVerifiedSm = `<svg aria-hidden="true" class="svg-icon iconStarVerifiedSm" width="14" height="14" viewBox="0 0 14 14"><path d="M7.7.72c-.4-.3-.94-.3-1.34 0l-1.26.92q-.23.17-.5.2l-1.54.25c-.49.07-.87.45-.95.94l-.23 1.55q-.05.27-.2.5L.74 6.32c-.3.4-.3.94 0 1.34l.92 1.26q.17.21.2.5l.24 1.54c.08.49.46.87.95.94l1.54.24q.27.05.5.2l1.26.93c.4.3.94.3 1.34 0l1.26-.92q.21-.16.5-.21l1.54-.24c.48-.07.87-.45.94-.94l.24-1.55q.05-.27.2-.5l.93-1.25c.3-.4.3-.94 0-1.34l-.93-1.26q-.15-.21-.2-.5l-.24-1.54A1.1 1.1 0 0 0 11 2.1l-1.55-.24q-.27-.05-.5-.2zm-.4 1.72.9 2.5q.07.17.27.2l2.65.08c.28 0 .4.36.17.53L9.21 7.38a.3.3 0 0 0-.1.32l.74 2.54a.3.3 0 0 1-.46.33L7.19 9.1a.3.3 0 0 0-.33 0l-2.19 1.48a.3.3 0 0 1-.46-.33l.74-2.54a.3.3 0 0 0-.1-.32l-2.1-1.63a.3.3 0 0 1 .18-.53l2.65-.09a.3.3 0 0 0 .27-.2l.9-2.49a.3.3 0 0 1 .56 0"/></svg>`;
+    const svgAchievementsSm = `<svg aria-hidden="true" class="svg-icon iconAchievementsSm" width="14" height="14" viewBox="0 0 14 14"><path d="M11 2V1H3v1H0v3c0 1.6 1.4 3 3 3 0 0 .5 2 3 2v1H4s-1 1.5-1 2h8c0-.4-1-2-1-2H8v-1c2.5 0 3-2 3-2 1.6-.2 3-1.4 3-3V2zM3 6c-.5 0-1-.5-1-1V4h1zm9-1c0 .5-.5 1-1 1V4h1zM7 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></svg>`;
+</script>
+
+## Classes
+
+<ClassTable {classes} expandable />
+
+## Examples
+
+### Default
+
+The base style is the standard variant used to connect a user to their content, appearing most frequently in post-summary lists and on question pages. This view is flexible, allowing various metadata fields to be shown or hidden as needed.
+
+<Notice variant="info" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Note on timestamps:</strong> Hovering over the timestamp displays a popover with precise dates and a link to the post's /timeline. For authors, this shows the post creation date; for editors, it shows the last modification date.</p>
+</Notice>
+
+```html
+<div class="s-user-card">
+    <a class="s-user-card--group" href="…">
+        <!-- Note: Default variant includes avatar size modifier (s-avatar__24) -->
+        <span class="s-avatar s-avatar__24">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username">…</span>
+    </a>
+    <ul class="s-user-card--group">
+        <li class="s-user-card--rep">
+            <span class="s-bling s-bling__sm">
+                <span class="v-visible-sr">reputation bling</span>
+            </span>
+            …
+        </li>
+        <li>
+            <span class="s-bling s-bling__gold s-bling__sm">
+                <span class="v-visible-sr">gold bling</span>
+            </span>
+            …
+        </li>
+        <li>
+            <span class="s-bling s-bling__silver s-bling__sm">
+                <span class="v-visible-sr">silver bling</span>
+            </span>
+            …
+        </li>
+        <li>
+            <span class="s-bling s-bling__bronze s-bling__sm">
+                <span class="v-visible-sr">bronze bling</span>
+            </span>
+            …
+        </li>
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="2026-01-09 12:15:39Z"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li><span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span></li>
+                <li><span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span></li>
+                <li><span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span></li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
+
+### With badges
+
+Adds the [User badge](/system/components/badges#user) indicator to the usercard. Use this to signify the official role, status, or origin of the account (such as Moderator, Staff, or Bot) directly alongside the user's name.
+
+```html
+<div class="s-user-card">
+    <a class="s-user-card--group" href="…">
+        <span class="s-avatar s-avatar__24">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username">…</span>
+    </a>
+    <div class="s-user-card--group">
+        <span class="s-badge s-badge__sm">…</span>
+    </div>
+    <ul class="s-user-card--group">
+        <li class="s-user-card--rep">
+            <span class="s-bling s-bling__sm">
+                <span class="v-visible-sr">reputation bling</span>
+            </span>
+            …
+        </li>
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="2026-01-09 12:15:39Z"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">Community</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__bot">Bot</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li><span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span></li>
+                <li><span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span></li>
+                <li><span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span></li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
+
+### Sizes
+
+<ClassTable classes={sizes} headings={{ parent: 'Size' }} />
+
+#### Small
+
+Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies. Note that the small variant does not include an avatar size modifier.
+
+```html
+<div class="s-user-card s-user-card__sm">
+    <a class="s-user-card--group" href="…">
+        <!-- Note: Small variant does not include avatar size modifier -->
+        <span class="s-avatar">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username">…</span>
+    </a>
+    <ul class="s-user-card--group">
+        <li class="s-user-card--rep">
+            <span class="s-bling s-bling__sm">
+                <span class="v-visible-sr">reputation bling</span>
+            </span>
+            …
+        </li>
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="2026-01-09 12:15:39Z"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
+
+#### Large
+
+Use the large variant when space permits and more detailed information is desired. The large variant uses a different structural layout with `s-user-card--row` and `s-user-card--column` to accommodate an expanded avatar and additional profile details.
+
+```html
+<div class="s-user-card s-user-card__lg">
+    <div class="s-user-card--row">
+        <a class="s-avatar s-avatar__48" href="…">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </a>
+        <div class="s-user-card--column">
+            <div class="s-user-card--row">
+                <a class="s-user-card--username" href="…">…</a>
+                <div class="s-user-card--group">
+                    <span class="s-badge s-badge__moderator s-badge__sm"
+                        >…</span
+                    >
+                </div>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm">
+                        <span class="v-visible-sr">reputation bling</span>
+                    </span>
+                    …
+                </li>
+                …
+            </ul>
+        </div>
+    </div>
+    <div class="s-user-card--column">
+        <div class="s-user-card--row s-user-card--recognition">
+            <!-- StarVerifiedSm icon -->
+            <span>…</span>
+        </div>
+        <ul class="s-user-card--group s-user-card--group__split">
+            <li>…</li>
+            <li>…</li>
+        </ul>
+        <div class="s-user-card--bio">…</div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex g32 fw-wrap">
+        <div class="s-user-card s-user-card__lg wmx3">
+            <div class="s-user-card--row">
+                <a class="s-avatar s-avatar__48" href="#">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-48.svg" />
+                </a>
+                <div class="s-user-card--column">
+                    <div class="s-user-card--row">
+                        <a class="s-user-card--username" href="#">SofiaAlc</a>
+                        <div class="s-user-card--group">
+                            <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+                        </div>
+                    </div>
+                    <ul class="s-user-card--group">
+                        <li class="s-user-card--rep">
+                            <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                            1,775
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                            8
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                            12
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                            4
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="s-user-card--column">
+                <div class="s-user-card--row s-user-card--recognition">
+                    {@html svgStarVerifiedSm}
+                    <span>Recognized by <a href="#">AudioBubble</a></span>
+                </div>
+                <ul class="s-user-card--group s-user-card--group__split">
+                    <li>Senior Product Designer</li>
+                    <li>Vancouver, Canada</li>
+                </ul>
+                <div class="s-user-card--bio">Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.</div>
+            </div>
+        </div>
+        <div class="s-user-card s-user-card__lg wmx3">
+            <div class="s-user-card--row">
+                <a class="s-avatar s-avatar__48" href="#">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-48.svg" />
+                </a>
+                <div class="s-user-card--column">
+                    <div class="s-user-card--row">
+                        <a class="s-user-card--username" href="#">SofiaAlc</a>
+                    </div>
+                    <ul class="s-user-card--group">
+                        <li class="s-user-card--rep">
+                            <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                            1
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="s-user-card--column">
+                <ul class="s-user-card--group s-user-card--group__split">
+                    <li>Vancouver, Canada</li>
+                </ul>
+                <div class="s-user-card--bio">Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.</div>
+            </div>
+        </div>
+        <div class="s-user-card s-user-card__lg wmx3">
+            <div class="s-user-card--row">
+                <a class="s-avatar s-avatar__48" href="#">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-48.svg" />
+                </a>
+                <div class="s-user-card--column">
+                    <div class="s-user-card--row">
+                        <a class="s-user-card--username" href="#">SofiaAlc</a>
+                    </div>
+                    <ul class="s-user-card--group">
+                        <li class="s-user-card--rep">
+                            <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                            1
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                            8
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                            12
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                            4
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### States
+
+<ClassTable classes={states} headings={{ parent: 'State' }} />
+
+#### Original Poster
+
+This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads.
+
+```html
+<div class="s-user-card">
+    <a class="s-user-card--group" href="…">
+        <span class="s-avatar s-avatar__24">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span
+            class="s-user-card--username s-user-card--username__op"
+            data-s-tooltip-html-title="<a href='…' class='s-link s-link__underlined'>…</a> is the original poster"
+            data-controller="s-tooltip"
+            >…</span
+        >
+    </a>
+    <ul class="s-user-card--group">
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="Show activity on this post"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--username__op" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is the original poster" data-controller="s-tooltip">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--username__op" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is the original poster" data-controller="s-tooltip">SofiaAlc</span>
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--username__op" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is the original poster" data-controller="s-tooltip">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+        </div>
+    </div>
+</Example>
+
+#### New Contributor
+
+This label appears on a user's first-ever question or answer to signal that they are new to the platform.
+
+```html
+<div class="s-user-card">
+    <a class="s-user-card--group" href="…">
+        <span class="s-avatar s-avatar__24">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username s-user-card--new-contributor"
+            >…</span
+        >
+    </a>
+    <div class="s-user-card--group">
+        <span
+            class="s-badge s-badge__sm s-badge__new"
+            data-s-tooltip-html-title="<a href='…' class='s-link s-link__underlined'>…</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='…' class='s-link s-link__underlined'>Check out our Code of Conduct</a>"
+            data-controller="s-tooltip"
+            >New</span
+        >
+    </div>
+    <ul class="s-user-card--group">
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="Show activity on this post"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</span>
+                <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
+            </div>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
+
+#### Deleted user
+
+When a user is deleted, we still need to show their name, but we strip the metadata.
+
+```html
+<div class="s-user-card s-user-card__deleted">
+    <div class="s-user-card--group">
+        <img alt="…" src="…" />
+        <span class="s-user-card--username">…</span>
+    </div>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="Show activity on this post"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__deleted s-user-card__sm">
+            <div class="s-user-card--group">
+                <img alt="deleted user avatar" src="/images/avatar-deleted-16.svg" />
+                <span class="s-user-card--username">SofiaAlc</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card s-user-card__deleted">
+            <div class="s-user-card--group">
+                <img alt="deleted user avatar" src="/images/avatar-deleted-24.svg" />
+                <span class="s-user-card--username">SofiaAlc</span>
+            </div>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
+
+### Additional bling
+
+Use to display a specialized icon alongside the username, highlighting unique achievements. This style is additive and can be combined with any of the usercard variants listed above.
+
+<ClassTable classes={additionalBling} headings={{ parent: 'Name' }} />
+
+#### Recognized Member
+
+```html
+<!-- Small variant -->
+<div class="s-user-card s-user-card__sm">
+    <a class="s-user-card--group" href="…">
+        <span class="s-avatar">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username">…</span>
+    </a>
+    <a
+        href="…"
+        class="s-user-card--group s-user-card--recognition"
+        title="…"
+        aria-label="…"
+        data-controller="s-tooltip"
+    >
+        <!-- StarVerifiedSm icon -->
+    </a>
+    <ul class="s-user-card--group">
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="Show activity on this post"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+
+<!-- Default variant -->
+<div class="s-user-card">
+    <div class="s-user-card--column">
+        <div class="s-user-card--row">
+            <a class="s-avatar s-avatar__24" href="…">
+                <img class="s-avatar--image" alt="…" src="…" />
+            </a>
+            <a class="s-user-card--group" href="…">
+                <span class="s-user-card--username">…</span>
+            </a>
+            <ul class="s-user-card--group">
+                …
+            </ul>
+            <a
+                class="s-user-card--time"
+                href="…"
+                title="Show activity on this post"
+                data-controller="s-tooltip"
+            >
+                <time>…</time>
+            </a>
+        </div>
+        <div class="s-user-card--row">
+            <div class="s-user-card--row s-user-card--recognition">
+                <!-- StarVerifiedSm icon -->
+                <span>Recognized by <a href="…">…</a></span>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <a href="#" class="s-user-card--group s-user-card--recognition" title="Recognized by AudioBubble" aria-label="Recognized by AudioBubble" data-controller="s-tooltip">
+                {@html svgStarVerifiedSm}
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
+            </div>
+            <a href="#" class="s-user-card--group s-user-card--recognition" title="Recognized by AudioBubble" aria-label="Recognized by AudioBubble" data-controller="s-tooltip">
+                {@html svgStarVerifiedSm}
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <div class="s-user-card--column">
+                <div class="s-user-card--row">
+                    <a class="s-avatar s-avatar__24" href="#">
+                        <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                    </a>
+                    <a class="s-user-card--group" href="#">
+                        <span class="s-user-card--username">SofiaAlc</span>
+                    </a>
+                    <ul class="s-user-card--group">
+                        <li class="s-user-card--rep">
+                            <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                            1,775
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                            8
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                            12
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                            4
+                        </li>
+                    </ul>
+                    <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                        <time>asked 2 hr ago</time>
+                    </a>
+                </div>
+                <div class="s-user-card--row">
+                    <div class="s-user-card--row s-user-card--recognition">
+                        {@html svgStarVerifiedSm}
+                        <span>Recognized by <a href="#">AudioBubble</a></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="s-user-card">
+            <div class="s-user-card--column">
+                <div class="s-user-card--row">
+                    <a class="s-avatar s-avatar__24" href="#">
+                        <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                    </a>
+                    <a class="s-user-card--group" href="#">
+                        <span class="s-user-card--username">SofiaAlc</span>
+                    </a>
+                    <div class="s-user-card--group">
+                        <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
+                    </div>
+                    <ul class="s-user-card--group">
+                        <li class="s-user-card--rep">
+                            <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                            1,775
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                            8
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                            12
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                            4
+                        </li>
+                    </ul>
+                    <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                        <time>asked 2 hr ago</time>
+                    </a>
+                </div>
+                <div class="s-user-card--row">
+                    <div class="s-user-card--row s-user-card--recognition">
+                        {@html svgStarVerifiedSm}
+                        <span>Recognized by <a href="#">AudioBubble</a></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+#### Awarded
+
+This icon appears next to a user when they are within the top 3 positions of a Collective's leaderboard.
+
+```html
+<div class="s-user-card s-user-card__sm">
+    <a class="s-user-card--group" href="…">
+        <span class="s-avatar">
+            <img class="s-avatar--image" alt="…" src="…" />
+        </span>
+        <span class="s-user-card--username">…</span>
+    </a>
+    <a
+        class="s-user-card--group fc-orange-400"
+        href="…"
+        title="…"
+        aria-label="…"
+        data-controller="s-tooltip"
+    >
+        <!-- AchievementsSm icon -->
+    </a>
+    <ul class="s-user-card--group">
+        …
+    </ul>
+    <a
+        class="s-user-card--time"
+        href="…"
+        title="Show activity on this post"
+        data-controller="s-tooltip"
+    >
+        <time>…</time>
+    </a>
+</div>
+```
+
+<Example>
+    <div class="d-flex fd-column g8">
+        <div class="s-user-card s-user-card__sm">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <a class="s-user-card--group fc-orange-400" href="#" title="This user is ranked #1 on the weekly R Language leaderboard." aria-label="This user is ranked #1 on the weekly R Language leaderboard." data-controller="s-tooltip">
+                {@html svgAchievementsSm}
+            </a>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <a class="s-user-card--group fc-yellow-400" href="#" title="This user is ranked #2 on the weekly R Language leaderboard." aria-label="This user is ranked #2 on the weekly R Language leaderboard." data-controller="s-tooltip">
+                {@html svgAchievementsSm}
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li><span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span></li>
+                <li><span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span></li>
+                <li><span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span></li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+        <div class="s-user-card">
+            <a class="s-user-card--group" href="#">
+                <span class="s-avatar s-avatar__24">
+                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
+                </span>
+                <span class="s-user-card--username">SofiaAlc</span>
+            </a>
+            <div class="s-user-card--group">
+                <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
+            </div>
+            <a class="s-user-card--group fc-blue-400" href="#" title="This user is ranked #3 on the weekly R Language leaderboard." aria-label="This user is ranked #3 on the weekly R Language leaderboard." data-controller="s-tooltip">
+                {@html svgAchievementsSm}
+            </a>
+            <ul class="s-user-card--group">
+                <li class="s-user-card--rep">
+                    <span class="s-bling s-bling__sm"><span class="v-visible-sr">reputation bling</span></span>
+                    1,775
+                </li>
+                <li>
+                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
+                    8
+                </li>
+                <li>
+                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
+                    12
+                </li>
+                <li>
+                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
+                    4
+                </li>
+            </ul>
+            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
+                <time>asked 2 hr ago</time>
+            </a>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/vote.md b/packages/stacks-docs-next/src/docs/public/system/components/vote.md
new file mode 100644
index 0000000000..c3029cf4f8
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/vote.md
@@ -0,0 +1,274 @@
+---
+title: "Vote"
+description: "The vote component allows users to vote on the quality of content by casting an upvote or downvote."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-vote--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=617-18830&p=f&t=u4su1MPgebbjmcfI-0"
+---
+
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import {
+        IconVote16Up, IconVote16Down,
+        IconVote16UpFill, IconVote16DownFill,
+    } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-vote',              parent: 'N/A',            modifies: 'N/A',   description: 'Base vote component.' },
+        { class: '.s-vote--btn',         parent: '.s-vote',                           description: 'Vote button.' },
+        { class: '.s-vote--votes',       parent: '.s-vote',                           description: 'Container for vote counts.' },
+        { class: '.s-vote--downvotes',   parent: '.s-vote--votes',                    description: 'Downvote count.' },
+        { class: '.s-vote--total',       parent: '.s-vote--votes',                    description: 'Total vote count.' },
+        { class: '.s-vote--upvotes',     parent: '.s-vote--votes',                    description: 'Upvote count.' },
+        { class: '.s-vote__expanded',    parent: 'N/A', modifies: '.s-vote',          description: 'Expanded vote style that shows upvote and downvote counts separately.' },
+        { class: '.s-vote__horizontal',  parent: 'N/A', modifies: '.s-vote',          description: 'Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Examples
+
+### Base
+
+The base vote component includes an upvote button, a downvote button, and a vote count. When the vote count is zero and the current user has not voted, it should display `Vote` in place of a number. Otherwise, show the vote count and truncate large numbers (e.g., 1.2k).
+
+```html
+<div class="s-vote">
+    <button class="s-vote--btn">
+        <!-- Vote16Up icon -->
+        <span class="v-visible-sr">upvote</span>
+    </button>
+    <span class="s-vote--votes">
+        <span class="s-vote--total">12</span>
+    </span>
+    <button class="s-vote--btn">
+        <!-- Vote16Down icon -->
+        <span class="v-visible-sr">downvote</span>
+    </button>
+</div>
+```
+
+<Example>
+    <div class="d-flex ai-start fw-wrap g64">
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">Base</span>
+            <div class="s-vote">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">12</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+                </button>
+            </div>
+        </div>
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">0 vote count</span>
+            <div class="s-vote">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">Vote</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+                </button>
+            </div>
+        </div>
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">≥ 1,000 votes</span>
+            <div class="s-vote">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">27.5K</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Expanded
+
+Include the `.s-vote__expanded` modifier to show upvote and downvote counts instead of the total vote count. This modifier hides `.s-vote--total` and shows `.s-vote--upvotes` and `.s-vote--downvotes` instead.
+
+```html
+<div class="s-vote s-vote__expanded">
+    <button class="s-vote--btn">
+        <!-- Vote16Up icon -->
+        <span class="v-visible-sr">upvote</span>
+    </button>
+    <span class="s-vote--votes">
+        <span class="s-vote--upvotes">+12</span>
+        <span class="s-vote--total">20</span>
+        <span class="s-vote--downvotes">-8</span>
+    </span>
+    <button class="s-vote--btn">
+        <!-- Vote16Down icon -->
+        <span class="v-visible-sr">downvote</span>
+    </button>
+</div>
+```
+
+<Example>
+    <div class="s-vote s-vote__expanded">
+        <button class="s-vote--btn">
+            <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+        </button>
+        <span class="s-vote--votes">
+            <span class="s-vote--upvotes">+12</span>
+            <span class="s-vote--total">20</span>
+            <span class="s-vote--downvotes">-8</span>
+        </span>
+        <button class="s-vote--btn">
+            <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+        </button>
+    </div>
+</Example>
+
+### Horizontal
+
+Apply the `.s-vote__horizontal` modifier to arrange the vote buttons and counts in a horizontal layout. This layout does not officially support expanded vote count. This configuration is best suited for scenarios such as comment voting, where a more compact design is preferred.
+
+```html
+<!-- Upvote only — count inside button -->
+<div class="s-vote s-vote__horizontal">
+    <button class="s-vote--btn">
+        <!-- Vote16Up icon -->
+        <span class="v-visible-sr">upvote</span>
+        <span class="s-vote--votes">
+            <span class="s-vote--total">5</span>
+        </span>
+    </button>
+</div>
+
+<!-- With downvote — count between buttons -->
+<div class="s-vote s-vote__horizontal">
+    <button class="s-vote--btn">
+        <!-- Vote16Up icon -->
+        <span class="v-visible-sr">upvote</span>
+    </button>
+    <span class="s-vote--votes">
+        <span class="s-vote--total">10</span>
+    </span>
+    <button class="s-vote--btn">
+        <!-- Vote16Down icon -->
+        <span class="v-visible-sr">downvote</span>
+    </button>
+</div>
+```
+
+<Example>
+    <div class="d-flex ai-start fw-wrap g16">
+        <div class="s-vote s-vote__horizontal">
+            <button class="s-vote--btn">
+                <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">5</span>
+                </span>
+            </button>
+        </div>
+        <div class="s-vote s-vote__horizontal">
+            <button class="s-vote--btn">
+                <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+            </button>
+            <span class="s-vote--votes">
+                <span class="s-vote--total">10</span>
+            </span>
+            <button class="s-vote--btn">
+                <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+            </button>
+        </div>
+    </div>
+</Example>
+
+### Voted
+
+Use filled vote icons to indicate when the current user has upvoted or downvoted the content.
+
+```html
+<!-- Upvoted -->
+<div class="s-vote">
+    <button class="s-vote--btn">
+        <!-- Vote16UpFill icon -->
+        <span class="v-visible-sr">upvoted</span>
+    </button>
+    <span class="s-vote--votes">
+        <span class="s-vote--total">12</span>
+    </span>
+    <button class="s-vote--btn">
+        <!-- Vote16Down icon -->
+        <span class="v-visible-sr">downvote</span>
+    </button>
+</div>
+```
+
+<Example>
+    <div class="d-flex ai-start fw-wrap g64">
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">Upvoted</span>
+            <div class="s-vote">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16UpFill} /><span class="v-visible-sr">upvoted</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">27.5K</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Down} /><span class="v-visible-sr">downvote</span>
+                </button>
+            </div>
+        </div>
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">Downvoted</span>
+            <div class="s-vote">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">11</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16DownFill} /><span class="v-visible-sr">downvoted</span>
+                </button>
+            </div>
+        </div>
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">Horizontal upvoted</span>
+            <div class="s-vote s-vote__horizontal">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16UpFill} /><span class="v-visible-sr">upvoted</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">6</span>
+                </span>
+            </div>
+        </div>
+        <div class="d-flex fd-column ai-center g16">
+            <span class="ff-mono">Horizontal downvoted</span>
+            <div class="s-vote s-vote__horizontal">
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16Up} /><span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">4</span>
+                </span>
+                <button class="s-vote--btn">
+                    <Icon src={IconVote16DownFill} /><span class="v-visible-sr">downvoted</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md b/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md
index 16c7e34ec4..8db17c6173 100644
--- a/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md
@@ -4,6 +4,11 @@ description: This is an introduction to the JavaScript functionality provided by
 updated: 2025-12-05
 ---
 
+<script>
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconCheckFillCircle, IconCrossFillCircle } from '@stackoverflow/stacks-icons';
+</script>
+
 ## Including the Stacks JavaScript
 
 While Stacks is first and foremost a CSS library, it also provides commonly used functionality for some components via JavaScript. This functionality is optional. If you only need the styling parts of Stack, you're free to ignore the provided JavaScript. The converse is not true: The JavaScript components work under the assumption that the Stacks CSS is available.
@@ -63,7 +68,11 @@ We prefix our JavaScript target classes with `.js-` so that changing or adding a
 
 We also try to avoid IDs for _both_ visual styling and JavaScript targeting. They aren't reusable, visual styling can't be overwritten by atomic classes, and, like non-`.js-` classes, we can't tell if there is JavaScript interactivity attached at a glance.
 
-### ✓ Do
+<div class="mb32">
+    <h3 class="d-flex ai-center g8 fc-green-500 mb16">
+        <Icon src={IconCheckFillCircle} />
+        Do
+    </h3>
 
 ```html
 <div class="s-card bs-lg js-copy">…</div>
@@ -76,7 +85,13 @@ button.addEventListener('click', function() {
 });
 ```
 
-### ✗ Don’t
+</div>
+
+<div class="mb32">
+    <h3 class="d-flex ai-center g8 fc-red-500 mb16">
+        <Icon src={IconCrossFillCircle} />
+        Don’t
+    </h3>
 
 ```html
 <div class="s-card bs-lg">…</div>
@@ -95,7 +110,13 @@ button.addEventListener('click', function() {
 }
 ```
 
-### ✗ Don’t
+</div>
+
+<div class="mb32">
+    <h3 class="d-flex ai-center g8 fc-red-500 mb16">
+        <Icon src={IconCrossFillCircle} />
+        Don’t
+    </h3>
 
 ```html
 <div id="card">…</div>
@@ -113,3 +134,5 @@ button.addEventListener('click', function() {
     …
 }
 ```
+
+</div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md b/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md
index b192a7b4bb..d044a62e0d 100644
--- a/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md
@@ -4,6 +4,10 @@ description: A short guide to Stacks, a robust CSS & JavaScript Pattern library
 updated: 2025-12-05
 ---
 
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
 ## Goals
 
 Stacks is built with a unified goal: We should be writing _as little CSS & JavaScript as possible_. To achieve this goal, the Stacks team has created a robust set of reusable components. These include components like buttons, tables, and form elements.
@@ -20,7 +24,9 @@ You can also include a minified, compiled Stacks CSS style sheet that's delivere
 
 To use Stack's built-in JavaScript interactivity with your components, refer to the [JavaScript guidelines](/system/develop/javascript/).
 
-> **Warning**: If you're hotlinking to Stacks on the Stack Overflow CDN, **you are doing it wrong**. You are setting yourself up for breaking upstream changes. Instead, you should install via properly versioned package management like NPM. This will keep you pinned to a stable version.
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Warning:</strong> If you're hotlinking to Stacks on the Stack Overflow CDN, <strong>you are doing it wrong</strong>. You are setting yourself up for breaking upstream changes. Instead, you should install via properly versioned package management like NPM. This will keep you pinned to a stable version.</p>
+</Notice>
 
 ## How to best use Stacks
 
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/checkbox.md b/packages/stacks-docs-next/src/docs/public/system/forms/checkbox.md
new file mode 100644
index 0000000000..1b716736c2
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/checkbox.md
@@ -0,0 +1,368 @@
+---
+title: "Checkbox"
+description: "Checkable inputs that visually allow for multiple options or true/false values."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-checkbox--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=720-2910&p=f&m=dev"
+---
+
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Notice } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-checkbox',             parent: 'N/A',        modifies: 'N/A', description: 'Base checkbox style.' },
+        { class: '.s-checkbox__checkmark',  parent: '.s-checkbox', modifies: 'N/A', description: 'Checkmark style.' },
+    ];
+
+    const validationClasses: ClassTableRow[] = [
+        { class: '.has-warning', parent: 'Parent element', description: 'Used to warn users that the value they\'ve entered has a potential problem, but it doesn\'t block them from proceeding.' },
+        { class: '.has-error',   parent: 'Parent element', description: 'Used to alert users that the value they\'ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.' },
+        { class: '.has-success', parent: 'Parent element', description: 'Used to notify users that the value they\'ve entered is fine or has been submitted successfully.' },
+    ];
+
+    onMount(() => {
+        const el = document.getElementById('indeterminate-checkbox-1') as HTMLInputElement | null;
+        if (el) el.indeterminate = true;
+    });
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Base
+
+Use the `.s-checkbox` to wrap `input[type="checkbox"]` elements to apply checkbox styles.
+
+```html
+<div class="s-checkbox">
+    <input type="checkbox" name="example-name" id="example-item" />
+    <label class="s-label" for="example-item">Check Label</label>
+</div>
+```
+
+<Example>
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Example</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-checkbox">
+                        <input type="checkbox" name="checkbox-group-unchecked" id="checkbox-unchecked" />
+                        <label class="s-label" for="checkbox-unchecked">Checkbox label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Unchecked checkbox.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-checkbox">
+                        <input type="checkbox" name="checkbox-group-dis-unchecked" id="checkbox-disabled-unchecked" disabled />
+                        <label class="s-label" for="checkbox-disabled-unchecked">Checkbox label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Disabled unchecked checkbox.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-checkbox">
+                        <input type="checkbox" name="checkbox-group-checked" id="checkbox-checked" checked />
+                        <label class="s-label" for="checkbox-checked">Checkbox label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Checked checkbox.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-checkbox">
+                        <input type="checkbox" name="checkbox-group-dis-checked" id="checkbox-disabled-checked" disabled checked />
+                        <label class="s-label" for="checkbox-disabled-checked">Checkbox label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Disabled checked checkbox.</td>
+            </tr>
+        </tbody>
+    </table>
+</Example>
+
+### Checkmark
+
+The checkmark style is an alternative to the base checkbox style. To use the checkmark style, wrap your input and label in a container with the `.s-checkbox__checkmark` class.
+
+```html
+<label class="s-checkbox s-checkbox__checkmark" for="example-item">
+    Checkmark Label
+    <input type="checkbox" name="example-name" id="example-item" />
+</label>
+```
+
+<Example>
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Example</th>
+                <th scope="col" class="s-table--cell5">Class</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-checkbox s-checkbox__checkmark" for="checkmark-checkbox-unchecked">
+                        Checkmark label
+                        <input type="checkbox" name="checkmark-checkbox-group-unchecked" id="checkmark-checkbox-unchecked" />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-checkbox__checkmark</code></td>
+                <td class="va-middle">The checkmark, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-checkbox s-checkbox__checkmark" for="checkmark-checkbox-dis-unchecked">
+                        Checkmark label
+                        <input type="checkbox" name="checkmark-checkbox-group-dis-unchecked" id="checkmark-checkbox-dis-unchecked" disabled />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-checkbox__checkmark</code></td>
+                <td class="va-middle">Disabled, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-checkbox s-checkbox__checkmark" for="checkmark-checkbox-checked">
+                        Checkmark label
+                        <input type="checkbox" name="checkmark-checkbox-group-checked" id="checkmark-checkbox-checked" checked />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-checkbox__checkmark</code></td>
+                <td class="va-middle">The checkmark, checked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-checkbox s-checkbox__checkmark" for="checkmark-checkbox-dis-checked">
+                        Checkmark label
+                        <input type="checkbox" name="checkmark-checkbox-group-dis-checked" id="checkmark-checkbox-dis-checked" disabled checked />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-checkbox__checkmark</code></td>
+                <td class="va-middle">Disabled, checked state.</td>
+            </tr>
+        </tbody>
+    </table>
+</Example>
+
+## Accessibility
+
+The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:
+
+- All inputs should have an `id` attribute.
+- Be sure to associate the checkbox label by using the `for` attribute. The value here is the input's `id`.
+- If you have a group of related checkboxes, use the `fieldset` and `legend` to group them together.
+
+For more information, please read Gov.UK's article, [*"Using the fieldset and legend elements"*](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/).
+
+## Checkbox group
+
+### Vertical group
+
+```html
+<fieldset class="s-form-group">
+    <legend class="s-label">…</legend>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="vert-checkbox-1" />
+        <label class="s-label" for="vert-checkbox-1">…</label>
+    </div>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="vert-checkbox-2" />
+        <label class="s-label" for="vert-checkbox-2">…</label>
+    </div>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="vert-checkbox-3" />
+        <label class="s-label" for="vert-checkbox-3">…</label>
+    </div>
+</fieldset>
+```
+
+<Example>
+    <fieldset class="s-form-group">
+        <legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="vert-checkbox-Apples" checked />
+            <label class="s-label" for="vert-checkbox-Apples">Apples</label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="vert-checkbox-Oranges" />
+            <label class="s-label" for="vert-checkbox-Oranges">Oranges</label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="vert-checkbox-Bananas" />
+            <label class="s-label" for="vert-checkbox-Bananas">Bananas</label>
+        </div>
+    </fieldset>
+</Example>
+
+### Horizontal group
+
+```html
+<fieldset class="s-form-group s-form-group__horizontal">
+    <legend class="s-label">…</legend>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="hori-checkbox-1" />
+        <label class="s-label" for="hori-checkbox-1">…</label>
+    </div>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="hori-checkbox-2" />
+        <label class="s-label" for="hori-checkbox-2">…</label>
+    </div>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="hori-checkbox-3" />
+        <label class="s-label" for="hori-checkbox-3">…</label>
+    </div>
+</fieldset>
+```
+
+<Example>
+    <fieldset class="s-form-group s-form-group__horizontal">
+        <legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="hori-checkbox-Apples" checked />
+            <label class="s-label" for="hori-checkbox-Apples">Apples</label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="hori-checkbox-Oranges" />
+            <label class="s-label" for="hori-checkbox-Oranges">Oranges</label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="hori-checkbox-Bananas" />
+            <label class="s-label" for="hori-checkbox-Bananas">Bananas</label>
+        </div>
+    </fieldset>
+</Example>
+
+### With description copy
+
+```html
+<fieldset class="s-form-group">
+    <legend class="s-label">…</legend>
+    <div class="s-checkbox">
+        <input type="checkbox" name="…" id="desc-checkbox-1" />
+        <label class="s-label" for="desc-checkbox-1">
+            …
+            <p class="s-description">…</p>
+        </label>
+    </div>
+    …
+</fieldset>
+```
+
+<Example>
+    <fieldset class="s-form-group">
+        <legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="desc-checkbox-Apples" checked />
+            <label class="s-label" for="desc-checkbox-Apples">
+                Apples
+                <p class="s-description">Fresh red apples.</p>
+            </label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="desc-checkbox-Oranges" />
+            <label class="s-label" for="desc-checkbox-Oranges">
+                Oranges
+                <p class="s-description">Juicy and sweet oranges.</p>
+            </label>
+        </div>
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="desc-checkbox-Bananas" />
+            <label class="s-label" for="desc-checkbox-Bananas">
+                Bananas
+                <p class="s-description">Ripe yellow bananas.</p>
+            </label>
+        </div>
+    </fieldset>
+</Example>
+
+## Validation states
+
+Checkboxes use the same validation states as [inputs](/system/components/inputs).
+
+### Validation classes
+
+<ClassTable classes={validationClasses} headings={{ parent: 'Applies to' }} />
+
+### Validation examples
+
+```html
+<!-- Checkbox w/ warning -->
+<div class="s-checkbox has-warning">
+    <input type="checkbox" name="…" id="warn-checkbox-1" />
+    <label class="s-label" for="warn-checkbox-1">
+        …
+        <p class="s-description">…</p>
+    </label>
+</div>
+```
+
+<Example>
+    <fieldset class="s-form-group">
+        <legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
+        <div class="s-checkbox has-warning">
+            <input type="checkbox" name="" id="state-checkbox-Apples" checked />
+            <label class="s-label" for="state-checkbox-Apples">
+                Apples
+                <p class="s-description">Fresh red apples.</p>
+            </label>
+        </div>
+        <div class="s-checkbox has-error">
+            <input type="checkbox" name="" id="state-checkbox-Oranges" />
+            <label class="s-label" for="state-checkbox-Oranges">
+                Oranges
+                <p class="s-description">Juicy and sweet oranges.</p>
+            </label>
+        </div>
+        <div class="s-checkbox has-success">
+            <input type="checkbox" name="" id="state-checkbox-Bananas" />
+            <label class="s-label" for="state-checkbox-Bananas">
+                Bananas
+                <p class="s-description">Ripe yellow bananas.</p>
+            </label>
+        </div>
+    </fieldset>
+</Example>
+
+## Indeterminate state
+
+Checkboxes can be styled by using the `:indeterminate` pseudo class.
+
+<Notice variant="info" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <p><strong>Note:</strong> The <code>:indeterminate</code> pseudo class can only be set via JavaScript. Use the <code>HTMLInputElement</code> object's <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes"><code>indeterminate</code></a> property to set the state.</p>
+</Notice>
+
+```html
+<fieldset class="s-form-group">
+    <div class="s-checkbox">
+        <input type="checkbox" name="" id="indeterminate-checkbox-1" />
+        <label class="s-label" for="indeterminate-checkbox-1">Select all</label>
+    </div>
+</fieldset>
+
+<script>
+    document.getElementById("indeterminate-checkbox-1").indeterminate = true;
+</script>
+```
+
+<Example>
+    <fieldset class="s-form-group">
+        <div class="s-checkbox">
+            <input type="checkbox" name="" id="indeterminate-checkbox-1" />
+            <label class="s-label" for="indeterminate-checkbox-1">Select all</label>
+        </div>
+    </fieldset>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/inputs.md b/packages/stacks-docs-next/src/docs/public/system/forms/inputs.md
new file mode 100644
index 0000000000..57d2018a12
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/inputs.md
@@ -0,0 +1,444 @@
+---
+title: "Inputs"
+description: "Input elements are used to gather information from users."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-textinput--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=713-24991&p=f&m=dev"
+---
+
+<script lang="ts">
+    import { Icon, Notice } from '@stackoverflow/stacks-svelte';
+    import { IconAlert, IconAlertFill, IconCheck, IconLock, IconSearch } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    // Legacy icons not in current @stackoverflow/stacks-icons
+    const svgCreditCard = `<svg aria-hidden="true" class="svg-icon iconCreditCard s-input-icon s-input-icon__creditcard" width="18" height="18" viewBox="0 0 18 18"><path d="M3 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2m0 6v4h12V9zm0-3h12V5H3z"/></svg>`;
+    const svgClearSm = `<svg aria-hidden="true" class="svg-icon iconClearSm" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41 10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"/></svg>`;
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-input',             parent: 'N/A',     modifies: 'N/A',    description: 'Base input style.' },
+        { class: '.s-input__creditcard', parent: 'N/A',     modifies: '.s-input', description: 'Adds a credit card icon to the input.' },
+        { class: '.s-input__search',     parent: 'N/A',     modifies: '.s-input', description: 'Adds a search icon to the input.' },
+        { class: '.s-input__sm',         parent: 'N/A',     modifies: '.s-input', description: 'Apply a small size.' },
+        { class: '.s-input__lg',         parent: 'N/A',     modifies: '.s-input', description: 'Apply a large size.' },
+    ];
+
+    const required: ClassTableRow[] = [
+        { class: '.s-required-symbol', parent: '<abbr> element enclosing the asterisk', description: 'Used to style the asterisk indicating that a specific field is required.' },
+    ];
+
+    const validationClasses: ClassTableRow[] = [
+        { class: '.has-warning', parent: 'Parent element', description: 'Used to warn users that the value they\'ve entered has a potential problem, but it doesn\'t block them from proceeding.' },
+        { class: '.has-error',   parent: 'Parent element', description: 'Used to alert users that the value they\'ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.' },
+        { class: '.has-success', parent: 'Parent element', description: 'Used to notify users that the value they\'ve entered is fine or has been submitted successfully.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Base style
+
+Inputs are normally paired with a label, but there are times when they can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.
+
+```html
+<!-- Base -->
+<div class="s-form-group">
+    <label class="s-label" for="example-item1">Full name</label>
+    <p class="s-description">This will be shown only to employers and other Team members.</p>
+    <input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
+</div>
+
+<!-- Disabled -->
+<div class="s-form-group is-disabled">
+    <label class="s-label" for="example-item2">Display name</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
+        <svg class="svg-icon s-input-icon fc-black-400" aria-hidden="true">…</svg>
+    </div>
+</div>
+
+<!-- Readonly -->
+<div class="s-form-group ps-relative is-readonly">
+    <label class="s-label" for="example-item3">Legal name</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex gy16 fd-column">
+        <div class="s-form-group">
+            <label class="s-label" for="example-item1">Full name</label>
+            <p class="s-description">This will be shown only to employers and other Team members.</p>
+            <input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
+        </div>
+        <div class="s-form-group is-disabled">
+            <label class="s-label" for="example-item2">Display name</label>
+            <div class="d-flex ps-relative">
+                <input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
+                <Icon src={IconLock} class="s-input-icon fc-black-400" />
+            </div>
+        </div>
+        <div class="s-form-group ps-relative is-readonly">
+            <label class="s-label" for="example-item3">Legal name</label>
+            <div class="d-flex ps-relative">
+                <input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
+                <Icon src={IconLock} class="s-input-icon" />
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Accessibility
+
+The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to inputs, there are a few things to keep in mind:
+
+- All inputs should have an `id` attribute.
+- Be sure to associate the input's label by using the `for` attribute. The value here is the input's `id`.
+- If you have a group of related inputs, use the `fieldset` and `legend` to group them together.
+
+For more information, please read Gov.UK's article, [*"Using the fieldset and legend elements"*](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/).
+
+### Required input fields
+
+Labels or instructions must be provided when content requires user input. For any input field within a form that is required for successful data submission, provide the asterisk `*` as a symbol and a legend advising the meaning of the symbol before the first use.
+
+Stacks includes a special `.s-required-symbol` class to ensure the symbol (asterisk) is clearly visible.
+
+<ClassTable classes={required} headings={{ parent: 'Applies to' }} />
+
+```html
+<abbr class="s-required-symbol" title="required">*</abbr>
+```
+
+Required symbols are not necessary for areas where only a single input field is seen on the page (ex: sign up modals). For more information, see [WCAG Technique H90](https://www.w3.org/WAI/WCAG22/Techniques/html/H90).
+
+### Required input fields example
+
+```html
+<div class="d-flex w100 jc-space-between ai-center">
+    <h1 class="fs-headline1 fw-normal mb16">
+        Ask a question
+    </h1>
+    <p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
+</div>
+<form class="d-flex fd-column gy24">
+    <div class="s-form-group">
+        <label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
+        <input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
+    </div>
+    <div class="s-form-group">
+        <label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
+        <textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
+    </div>
+    <div class="s-form-group">
+        <label class="s-label" for="example-ask-members">Ask team members</label>
+        <input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
+    </div>
+</form>
+```
+
+<Example>
+    <div class="d-flex w100 jc-space-between ai-center">
+        <h1 class="fs-headline1 fw-normal mb16">
+            Ask a question
+        </h1>
+        <p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
+    </div>
+    <form class="d-flex fd-column gy24">
+        <div class="s-form-group">
+            <label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
+            <input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
+        </div>
+        <div class="s-form-group">
+            <label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
+            <textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
+        </div>
+        <div class="s-form-group">
+            <label class="s-label" for="example-ask-members">Ask team members</label>
+            <input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
+        </div>
+    </form>
+</Example>
+
+## Validation states
+
+Validation states provides the user feedback based on their interaction (or lack of interaction) with an input. These styles are applied by applying the appropriate class to the wrapping parent container.
+
+### Validation classes
+
+<ClassTable classes={validationClasses} headings={{ parent: 'Applies to' }} />
+
+### Validation guidance
+
+In most cases, validation states shouldn't be shown until after the user has submitted the form. There are certain exceptions where it can be appropriate to show a validation state without form submission—after a sufficient delay. For example, validating the existence of a username can occur after the user has stopped typing, or when they've deselected the input.
+
+Once the user is presented validation states, they can be cleared as soon as the user interacts with the form field. For example, the error state for an incorrect password should be cleared as soon as the user focuses the input to re-enter their password.
+
+Similarly to using `for` with labels, validation messages below inputs should be associated with their respective fields using the `aria-describedby` attribute for accessible behavior.
+
+### Validation examples
+
+#### Warning
+
+```html
+<div class="s-form-group has-warning">
+    <label class="s-label" for="example-warning">Username</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-warning">
+        <label class="s-label" for="example-warning">Username</label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" id="example-warning" type="text" value="AA" aria-describedby="example-warning-desc" />
+            <Icon src={IconAlert} class="s-input-icon" />
+        </div>
+        <p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
+    </div>
+</Example>
+
+#### Error
+
+<Notice variant="warning" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>In addition to using the "error" state for a field, be sure to use the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attributev"><code>aria-invalid</code></a> attribute to indicate to assistive technology that respective fields have failed validation.</p>
+</Notice>
+
+```html
+<div class="s-form-group has-error">
+    <label class="s-label" for="example-error">Username</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-error">
+        <label class="s-label" for="example-error">Username</label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" id="example-error" type="text" aria-describedby="example-error-desc" />
+            <Icon src={IconAlertFill} class="s-input-icon" />
+        </div>
+        <p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
+    </div>
+</Example>
+
+#### Success
+
+```html
+<div class="s-form-group has-success">
+    <label class="s-label" for="example-success">Username</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-success">
+        <label class="s-label" for="example-success">Username</label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" id="example-success" type="text" value="aaronshekey" aria-describedby="example-success-desc" />
+            <Icon src={IconCheck} class="s-input-icon" />
+        </div>
+        <p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
+    </div>
+</Example>
+
+## Icons
+
+### Search
+
+Stacks provides helper classes to consistently style an input used for search. First, wrap your search input in an element with relative positioning. Then, and add `s-input__search` to the input itself. Finally, be sure to add `s-input-icon` and `s-input-icon__search` to the search icon.
+
+```html
+<div class="ps-relative">
+    <label class="v-visible-sr" for="example-search">Search</label>
+    <input class="s-input s-input__search" id="example-search" type="text" placeholder="Search…" />
+    <svg class="svg-icon s-input-icon s-input-icon__search" aria-hidden="true">…</svg>
+</div>
+```
+
+<Example>
+    <div class="ps-relative">
+        <label class="v-visible-sr" for="example-search">Search</label>
+        <input class="s-input s-input__search" id="example-search" type="text" placeholder="Search…" />
+        <Icon src={IconSearch} class="s-input-icon s-input-icon__search" />
+    </div>
+</Example>
+
+### Credit Card
+
+```html
+<div class="ps-relative">
+    <label class="v-visible-sr" for="example-creditcard">Credit Card</label>
+    <input class="s-input s-input__creditcard" id="example-creditcard" type="text" />
+    <svg class="svg-icon s-input-icon s-input-icon__creditcard" aria-hidden="true">…</svg>
+</div>
+```
+
+<Example>
+    <div class="ps-relative">
+        <label class="v-visible-sr" for="example-creditcard">Credit Card</label>
+        <input class="s-input s-input__creditcard" id="example-creditcard" type="text" />
+        {@html svgCreditCard}
+    </div>
+</Example>
+
+## Sizes
+
+<table class="s-table s-table__bx-simple">
+    <thead>
+        <tr>
+            <th scope="col">Class</th>
+            <th scope="col">Name</th>
+            <th scope="col">Size</th>
+            <th scope="col">Example</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><code>.s-input__sm</code></td>
+            <td>Small</td>
+            <td>13px</td>
+            <td><input type="text" placeholder="e.g. What is Stacks?" class="s-input s-input__sm" /></td>
+        </tr>
+        <tr>
+            <td class="fc-black-350 fs-italic">N/A</td>
+            <td>Default</td>
+            <td>14px</td>
+            <td><input type="text" placeholder="e.g. What is Stacks?" class="s-input" /></td>
+        </tr>
+        <tr>
+            <td><code>.s-input__lg</code></td>
+            <td>Large</td>
+            <td>18px</td>
+            <td><input type="text" placeholder="e.g. What is Stacks?" class="s-input s-input__lg" /></td>
+        </tr>
+    </tbody>
+</table>
+
+## Input fills
+
+Input fills are used to visually connect input text boxes with related content.
+
+### Prepended inputs
+
+```html
+<div class="s-form-group">
+    <label class="s-label" for="website-url">Website URL</label>
+    <div class="d-flex">
+        <div class="s-input-fill order-first">https://</div>
+        <div class="d-flex fl-grow1 ps-relative">
+            <input class="s-input blr0" type="text" id="website-url" placeholder="www.stackoverflow.com" />
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group">
+        <label class="s-label" for="website-url">Website URL</label>
+        <div class="d-flex">
+            <div class="s-input-fill order-first">https://</div>
+            <div class="d-flex fl-grow1 ps-relative">
+                <input class="s-input blr0" type="text" id="website-url" placeholder="www.stackoverflow.com" />
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Appended inputs
+
+```html
+<div class="s-form-group">
+    <label class="s-label" for="min-salary">Minimum Salary</label>
+    <div class="d-flex">
+        <div class="d-flex ai-center order-last s-input-fill">
+            <div class="d-flex gx4 ai-center">
+                <div class="s-checkbox">
+                    <input type="checkbox" id="need-visa" />
+                    <label class="s-label" for="need-visa">Need Visa Sponsorship</label>
+                </div>
+            </div>
+        </div>
+        <div class="d-flex fl-grow1 ps-relative">
+            <input class="s-input brr0" type="number" id="min-salary" placeholder="e.g. 125,000" />
+        </div>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group">
+        <label class="s-label" for="min-salary">Minimum Salary</label>
+        <div class="d-flex">
+            <div class="d-flex ai-center order-last s-input-fill">
+                <div class="d-flex gx4 ai-center">
+                    <div class="s-checkbox">
+                        <input type="checkbox" id="need-visa" />
+                        <label class="s-label" for="need-visa">Need Visa Sponsorship</label>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex fl-grow1 ps-relative">
+                <input class="s-input brr0" type="number" id="min-salary" placeholder="e.g. 125,000" />
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Nested inputs
+
+An input can be nested within a container that has the `.s-input` class applied to display styled elements as if they're within an input.
+
+```html
+<div class="s-form-group">
+    <label class="s-label" for="tag-selector">Tags</label>
+    <div class="s-input">
+        <div class="d-flex fw-wrap gx8 myn4">
+            <span class="s-tag">
+                svelte
+                <button class="s-tag--dismiss" type="button" title="Remove tag">
+                    <span class="v-visible-sr">Dismiss svelte tag</span>
+                    <svg class="svg-icon iconClearSm" aria-hidden="true">…</svg>
+                </button>
+            </span>
+        </div>
+        <input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group">
+        <label class="s-label" for="tag-selector">Tags</label>
+        <div class="s-input">
+            <div class="d-flex fw-wrap gx8 myn4">
+                <span class="s-tag">
+                    svelte
+                    <button class="s-tag--dismiss" type="button">
+                        <span class="v-visible-sr">Dismiss svelte tag</span>
+                        {@html svgClearSm}
+                    </button>
+                </span>
+            </div>
+            <input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/labels.md b/packages/stacks-docs-next/src/docs/public/system/forms/labels.md
new file mode 100644
index 0000000000..cabde948c3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/labels.md
@@ -0,0 +1,187 @@
+---
+title: "Labels"
+description: "Labels are used to describe inputs, select menus, textareas, radio buttons, and checkboxes."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=713-24991&p=f&m=dev"
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-label',     parent: 'N/A', modifies: 'N/A',      description: 'Base label style.' },
+        { class: '.s-label__sm', parent: 'N/A', modifies: '.s-label', description: 'Apply a small size.' },
+        { class: '.s-label__lg', parent: 'N/A', modifies: '.s-label', description: 'Apply a large size.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+Labels inform users what information is being asked of them. They should be written in sentence case.
+
+<Notice variant="info" role="note" class="mb16 s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>For usability reasons, if a label is connected with an input, the <code>for="[id]"</code> attribute should be filled in. This attribute references the input's <code>id="[value]"</code> value. This makes clicking the label automatically focus the proper input.</p>
+</Notice>
+
+## Base style
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-title">Question title</label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+        </div>
+    </form>
+</Example>
+
+## Sizes
+
+<Example>
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Class</th>
+                <th scope="col">Name</th>
+                <th scope="col">Size</th>
+                <th scope="col">Example</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="va-middle"><code>.s-label__sm</code></td>
+                <td class="va-middle">Small</td>
+                <td class="va-middle">14px</td>
+                <td class="va-middle"><label class="s-label s-label__sm">Question title</label></td>
+            </tr>
+            <tr>
+                <td class="va-middle fc-black-350">N/A</td>
+                <td class="va-middle">Default</td>
+                <td class="va-middle">16px</td>
+                <td class="va-middle"><label class="s-label">Question title</label></td>
+            </tr>
+            <tr>
+                <td class="va-middle"><code>.s-label__lg</code></td>
+                <td class="va-middle">Large</td>
+                <td class="va-middle">22px</td>
+                <td class="va-middle"><label class="s-label s-label__lg">Question title</label></td>
+            </tr>
+        </tbody>
+    </table>
+</Example>
+
+## Description copy
+
+When a label or input needs further explantation, text should be placed directly underneath it.
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="example-item">
+        Question title
+    </label>
+    <p class="s-description">Clear question titles are more likely to get answered.</p>
+    <div class="d-flex ps-relative">
+        <input class="s-input" id="example-item" type="text" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?" />
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-title-copy">
+            Question title
+        </label>
+        <p class="s-description">Clear question titles are more likely to get answered.</p>
+        <div class="d-flex ps-relative">
+            <input class="s-input" id="question-title-copy" type="text" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?" />
+        </div>
+    </form>
+</Example>
+
+## Status
+
+Use status indicators to append essential context to a label. This pattern supports any of the various badge states available. When using this indicator, display the full word 'Required' rather than an asterisk. Note: If the majority of a form's inputs are required, prioritize the asterisk pattern outlined in [Input Accessibility](/system/components/inputs#accessibility) instead.
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="question-title-required">Question title<span class="s-badge s-badge__danger">Required</span></label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-title-required">Question title<span class="s-badge s-badge__danger">Required</span></label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+        </div>
+    </form>
+</Example>
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="question-tags">Question tags<span class="s-badge">Optional</span></label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-tags" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-tags">Question tags<span class="s-badge">Optional</span></label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" type="text" id="question-tags" placeholder="e.g. Why doesn't Stack Overflow use a custom web font?"/>
+        </div>
+    </form>
+</Example>
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="question-title-new">What is your favorite animal?<span class="s-badge s-badge__info">Saved for later</span></label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-title-new">What is your favorite animal?<span class="s-badge s-badge__info">Saved for later</span></label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
+        </div>
+    </form>
+</Example>
+
+```html
+<form class="s-form-group">
+    <label class="s-label" for="question-title-beta">Notify people<span class="s-badge s-badge__featured">New feature</span></label>
+    <div class="d-flex ps-relative">
+        <input class="s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
+    </div>
+</form>
+```
+
+<Example>
+    <form class="s-form-group">
+        <label class="s-label" for="question-title-beta">Notify people<span class="s-badge s-badge__featured">New feature</span></label>
+        <div class="d-flex ps-relative">
+            <input class="s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
+        </div>
+    </form>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/radio.md b/packages/stacks-docs-next/src/docs/public/system/forms/radio.md
new file mode 100644
index 0000000000..9b228cbc67
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/radio.md
@@ -0,0 +1,460 @@
+---
+title: "Radio"
+description: "Checkable inputs that visually allow for single selection from multiple options."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-radiogroup--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=720-2910&p=f&m=dev"
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-radio',             parent: 'N/A',     modifies: 'N/A',     description: 'Base radio style.' },
+        { class: '.s-radio__checkmark',  parent: '.s-radio', modifies: 'N/A',    description: 'Checkmark style.' },
+    ];
+
+    const validationClasses: ClassTableRow[] = [
+        { class: '.has-warning', parent: 'Parent element', description: 'Used to warn users that the value they\'ve entered has a potential problem, but it doesn\'t block them from proceeding.' },
+        { class: '.has-error',   parent: 'Parent element', description: 'Used to alert users that the value they\'ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.' },
+        { class: '.has-success', parent: 'Parent element', description: 'Used to notify users that the value they\'ve entered is fine or has been submitted successfully.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Base
+
+Use the `.s-radio` to wrap `input[type="radio"]` elements to apply radio styles.
+
+```html
+<div class="s-radio">
+    <input type="radio" name="example-name" id="example-item" />
+    <label class="s-label" for="example-item">Check Label</label>
+</div>
+```
+
+<Example>
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Example</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-radio">
+                        <input type="radio" name="radio-group-unchecked" id="radio-unchecked" />
+                        <label class="s-label" for="radio-unchecked">Radio label</label>
+                    </div>
+                </td>
+                <td class="va-middle">The base, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-radio">
+                        <input type="radio" name="radio-group-dis-unchecked" id="radio-disabled-unchecked" disabled />
+                        <label class="s-label" for="radio-disabled-unchecked">Radio label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Disabled, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-radio">
+                        <input type="radio" name="radio-group-checked" id="radio-checked" checked />
+                        <label class="s-label" for="radio-checked">Radio label</label>
+                    </div>
+                </td>
+                <td class="va-middle">The checked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <div class="s-radio">
+                        <input type="radio" name="radio-group-dis-checked" id="radio-disabled-checked" disabled checked />
+                        <label class="s-label" for="radio-disabled-checked">Radio label</label>
+                    </div>
+                </td>
+                <td class="va-middle">Disabled, checked state.</td>
+            </tr>
+        </tbody>
+    </table>
+</Example>
+
+### Checkmark
+
+The checkmark style is an alternative to the base radio style. To use the checkmark style, wrap your input and label in a container with the `.s-radio__checkmark` class.
+
+```html
+<label class="s-radio s-radio__checkmark" for="example-item">
+    Checkmark Label
+    <input type="radio" name="example-name" id="example-item" />
+</label>
+```
+
+<Example>
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Example</th>
+                <th scope="col" class="s-table--cell5">Class</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-radio s-radio__checkmark" for="checkmark-radio-unchecked">
+                        Checkmark label
+                        <input type="radio" name="checkmark-radio-group-unchecked" id="checkmark-radio-unchecked" />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-radio__checkmark</code></td>
+                <td class="va-middle">The checkmark, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-radio s-radio__checkmark" for="checkmark-radio-dis-unchecked">
+                        Checkmark label
+                        <input type="radio" name="checkmark-radio-group-dis-unchecked" id="checkmark-radio-dis-unchecked" disabled />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-radio__checkmark</code></td>
+                <td class="va-middle">Disabled, unchecked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-radio s-radio__checkmark" for="checkmark-radio-checked">
+                        Checkmark label
+                        <input type="radio" name="checkmark-radio-group-checked" id="checkmark-radio-checked" checked />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-radio__checkmark</code></td>
+                <td class="va-middle">The checkmark, checked state.</td>
+            </tr>
+            <tr>
+                <td class="va-middle pr8">
+                    <label class="s-radio s-radio__checkmark" for="checkmark-radio-dis-checked">
+                        Checkmark label
+                        <input type="radio" name="checkmark-radio-group-dis-checked" id="checkmark-radio-dis-checked" disabled checked />
+                    </label>
+                </td>
+                <td class="va-middle"><code>.s-radio__checkmark</code></td>
+                <td class="va-middle">Disabled, checked state.</td>
+            </tr>
+        </tbody>
+    </table>
+</Example>
+
+## Accessibility
+
+The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to radios, there are a few things to keep in mind:
+
+- All inputs should have an `id` attribute.
+- Be sure to associate the radio label by using the `for` attribute. The value here is the input's `id`.
+- If you have a group of related radios, use the `fieldset` and `legend` to group them together.
+
+For more information, please read Gov.UK's article, [*"Using the fieldset and legend elements"*](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/).
+
+## Radio group
+
+### Vertical group
+
+```html
+<fieldset class="s-form-group">
+    <legend class="s-label">…</legend>
+    <div class="s-radio">
+        <input type="radio" name="vert-radio" id="vert-radio-1" />
+        <label class="s-label" for="vert-radio-1">…</label>
+    </div>
+    <div class="s-radio">
+        <input type="radio" name="vert-radio" id="vert-radio-2" />
+        <label class="s-label" for="vert-radio-2">…</label>
+    </div>
+    <div class="s-radio">
+        <input type="radio" name="vert-radio" id="vert-radio-3" />
+        <label class="s-label" for="vert-radio-3">…</label>
+    </div>
+</fieldset>
+
+<!-- Checkmark w/ radio using .s-menu for additional styling -->
+<fieldset class="s-menu s-form-group">
+    <legend class="s-menu--title">…</legend>
+    <div class="s-menu--item">
+        <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-1">
+            <input type="radio" name="vert-checkmark" id="vert-checkmark-1" />
+            …
+        </label>
+    </div>
+    …
+</fieldset>
+```
+
+<Example>
+    <div class="d-flex g24 fd-column">
+        <fieldset class="s-form-group">
+            <legend class="s-label">Which types of fruit do you like?</legend>
+            <div class="s-radio">
+                <input type="radio" name="vert-radio" id="vert-radio-Apples" checked />
+                <label class="s-label" for="vert-radio-Apples">Apples</label>
+            </div>
+            <div class="s-radio">
+                <input type="radio" name="vert-radio" id="vert-radio-Oranges" />
+                <label class="s-label" for="vert-radio-Oranges">Oranges</label>
+            </div>
+            <div class="s-radio">
+                <input type="radio" name="vert-radio" id="vert-radio-Bananas" />
+                <label class="s-label" for="vert-radio-Bananas">Bananas</label>
+            </div>
+        </fieldset>
+        <div class="s-popover is-visible ps-relative ws2 p8">
+            <fieldset class="s-menu s-form-group">
+                <legend class="s-menu--title">Pick a fruit</legend>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-Apples">
+                        <input type="radio" name="vert-checkmark" id="vert-checkmark-Apples" checked />
+                        Apples
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-Oranges">
+                        <input type="radio" name="vert-checkmark" id="vert-checkmark-Oranges" />
+                        Oranges
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-Bananas">
+                        <input type="radio" name="vert-checkmark" id="vert-checkmark-Bananas" />
+                        Bananas
+                    </label>
+                </div>
+            </fieldset>
+        </div>
+    </div>
+</Example>
+
+### Horizontal group
+
+```html
+<fieldset class="s-form-group s-form-group__horizontal">
+    <legend class="s-label">…</legend>
+    <div class="s-radio">
+        <input type="radio" name="hori-radio" id="hori-radio-1" />
+        <label class="s-label" for="hori-radio-1">…</label>
+    </div>
+    <div class="s-radio">
+        <input type="radio" name="hori-radio" id="hori-radio-2" />
+        <label class="s-label" for="hori-radio-2">…</label>
+    </div>
+    <div class="s-radio">
+        <input type="radio" name="hori-radio" id="hori-radio-3" />
+        <label class="s-label" for="hori-radio-3">…</label>
+    </div>
+</fieldset>
+```
+
+<Example>
+    <fieldset class="s-form-group s-form-group__horizontal">
+        <legend class="s-label">Which types of fruit do you like?</legend>
+        <div class="s-radio">
+            <input type="radio" name="hori-radio" id="hori-radio-Apples" checked />
+            <label class="s-label" for="hori-radio-Apples">Apples</label>
+        </div>
+        <div class="s-radio">
+            <input type="radio" name="hori-radio" id="hori-radio-Oranges" />
+            <label class="s-label" for="hori-radio-Oranges">Oranges</label>
+        </div>
+        <div class="s-radio">
+            <input type="radio" name="hori-radio" id="hori-radio-Bananas" />
+            <label class="s-label" for="hori-radio-Bananas">Bananas</label>
+        </div>
+    </fieldset>
+</Example>
+
+### With description copy
+
+```html
+<fieldset class="s-form-group">
+    <legend class="s-label">…</legend>
+    <div class="s-radio">
+        <input type="radio" name="desc-radio" id="desc-radio-1" />
+        <label class="s-label" for="desc-radio-1">
+            …
+            <p class="s-description">…</p>
+        </label>
+    </div>
+    …
+</fieldset>
+
+<!-- Checkmark w/ radio using .s-menu for additional styling -->
+<fieldset class="s-menu s-form-group">
+    <legend class="s-menu--title">…</legend>
+    <div class="s-menu--item">
+        <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-1">
+            <input type="radio" name="desc-checkmark" id="desc-checkmark-1" />
+            <div>
+                …
+                <p class="s-description">…</p>
+            </div>
+        </label>
+    </div>
+    …
+</fieldset>
+```
+
+<Example>
+    <div class="d-flex g24 fd-column">
+        <fieldset class="s-form-group">
+            <legend class="s-label">Which types of fruit do you like?</legend>
+            <div class="s-radio">
+                <input type="radio" name="desc-radio" id="desc-radio-Apples" checked />
+                <label class="s-label" for="desc-radio-Apples">
+                    Apples
+                    <p class="s-description">Fresh red apples.</p>
+                </label>
+            </div>
+            <div class="s-radio">
+                <input type="radio" name="desc-radio" id="desc-radio-Oranges" />
+                <label class="s-label" for="desc-radio-Oranges">
+                    Oranges
+                    <p class="s-description">Juicy and sweet oranges.</p>
+                </label>
+            </div>
+            <div class="s-radio">
+                <input type="radio" name="desc-radio" id="desc-radio-Bananas" />
+                <label class="s-label" for="desc-radio-Bananas">
+                    Bananas
+                    <p class="s-description">Ripe yellow bananas.</p>
+                </label>
+            </div>
+        </fieldset>
+        <div class="s-popover is-visible ps-relative ws2 p8">
+            <fieldset class="s-menu s-form-group">
+                <legend class="s-menu--title">Pick a fruit</legend>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-Apples">
+                        <input type="radio" name="desc-checkmark" id="desc-checkmark-Apples" checked />
+                        <div>
+                            Apples
+                            <p class="s-description">Fresh red apples.</p>
+                        </div>
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-Oranges">
+                        <input type="radio" name="desc-checkmark" id="desc-checkmark-Oranges" />
+                        <div>
+                            Oranges
+                            <p class="s-description">Juicy and sweet oranges.</p>
+                        </div>
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-Bananas">
+                        <input type="radio" name="desc-checkmark" id="desc-checkmark-Bananas" />
+                        <div>
+                            Bananas
+                            <p class="s-description">Ripe yellow bananas.</p>
+                        </div>
+                    </label>
+                </div>
+            </fieldset>
+        </div>
+    </div>
+</Example>
+
+## Validation states
+
+Radios use the same validation states as [inputs](/system/components/inputs).
+
+### Validation classes
+
+<ClassTable classes={validationClasses} headings={{ parent: 'Applies to' }} />
+
+### Validation examples
+
+```html
+<!-- Radio w/ error -->
+<div class="s-radio has-error">
+    <input type="radio" name="error-radio" id="error-radio-1" />
+    <label class="s-label" for="error-radio-1">
+        …
+        <p class="s-description">…</p>
+    </label>
+</div>
+
+<!-- Checkmark w/ success -->
+<label class="s-radio s-radio__checkmark has-success" for="success-checkmark-1">
+    <input type="radio" name="success-checkmark" id="success-checkmark-1" />
+    <div>
+        …
+        <p class="s-description">…</p>
+    </div>
+</label>
+```
+
+<Example>
+    <div class="d-flex g24 fd-column">
+        <fieldset class="s-form-group">
+            <legend class="s-label">Which types of fruit do you like?</legend>
+            <div class="s-radio has-warning">
+                <input type="radio" name="state-radio" id="state-radio-Apples" checked />
+                <label class="s-label" for="state-radio-Apples">
+                    Apples
+                    <p class="s-description">Fresh red apples.</p>
+                </label>
+            </div>
+            <div class="s-radio has-error">
+                <input type="radio" name="state-radio" id="state-radio-Oranges" />
+                <label class="s-label" for="state-radio-Oranges">
+                    Oranges
+                    <p class="s-description">Juicy and sweet oranges.</p>
+                </label>
+            </div>
+            <div class="s-radio has-success">
+                <input type="radio" name="state-radio" id="state-radio-Bananas" />
+                <label class="s-label" for="state-radio-Bananas">
+                    Bananas
+                    <p class="s-description">Ripe yellow bananas.</p>
+                </label>
+            </div>
+        </fieldset>
+        <div class="s-popover is-visible ps-relative ws2 p8">
+            <fieldset class="s-menu s-form-group">
+                <legend class="s-menu--title">Pick a fruit</legend>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark has-warning" for="state-checkmark-Apples">
+                        <input type="radio" name="state-checkmark" id="state-checkmark-Apples" checked />
+                        <div>
+                            Apples
+                            <p class="s-description">Fresh red apples.</p>
+                        </div>
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark has-error" for="state-checkmark-Oranges">
+                        <input type="radio" name="state-checkmark" id="state-checkmark-Oranges" />
+                        <div>
+                            Oranges
+                            <p class="s-description">Juicy and sweet oranges.</p>
+                        </div>
+                    </label>
+                </div>
+                <div class="s-menu--item">
+                    <label class="s-menu--action s-radio s-radio__checkmark has-success" for="state-checkmark-Bananas">
+                        <input type="radio" name="state-checkmark" id="state-checkmark-Bananas" />
+                        <div>
+                            Bananas
+                            <p class="s-description">Ripe yellow bananas.</p>
+                        </div>
+                    </label>
+                </div>
+            </fieldset>
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/select.md b/packages/stacks-docs-next/src/docs/public/system/forms/select.md
new file mode 100644
index 0000000000..c315799aad
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/select.md
@@ -0,0 +1,284 @@
+---
+title: "Select"
+description: "A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the <code>select</code> tag within the <code>.s-select</code> class."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-select--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=4537-50988"
+---
+
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconAlert, IconAlertFill, IconCheck } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-select',        parent: 'N/A',      modifies: 'N/A',       description: 'Base select style.' },
+        { class: '.s-select__sm',    parent: 'N/A',      modifies: '.s-select', description: 'Apply a small size.' },
+        { class: '.s-select__lg',    parent: 'N/A',      modifies: '.s-select', description: 'Apply a large size.' },
+        { class: '.has-error',       parent: 'N/A',      modifies: '.s-select', description: 'Apply an error state.' },
+        { class: '.has-success',     parent: 'N/A',      modifies: '.s-select', description: 'Apply a success state.' },
+        { class: '.has-warning',     parent: 'N/A',      modifies: '.s-select', description: 'Apply a warning state.' },
+    ];
+
+    const validationClasses: ClassTableRow[] = [
+        { class: '.has-warning', parent: 'Parent element', description: 'Used to warn users that the value they\'ve entered has a potential problem, but it doesn\'t block them from proceeding.' },
+        { class: '.has-error',   parent: 'Parent element', description: 'Used to alert users that the value they\'ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.' },
+        { class: '.has-success', parent: 'Parent element', description: 'Used to notify users that the value they\'ve entered is fine or has been submitted successfully.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Base style
+
+```html
+<div class="s-form-group">
+    <label class="s-label" for="select-menu">
+        How will you be traveling?
+        <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+    </label>
+    <div class="s-select">
+        <select id="select-menu">
+            <option value="" selected>Please select one…</option>
+            <option value="walk">Walk</option>
+            <option value="bike">Bicycle</option>
+            <option value="car">Automobile</option>
+            <option value="rail">Train</option>
+            <option value="fly">Plane</option>
+        </select>
+    </div>
+</div>
+
+<div class="s-form-group is-disabled">
+    <label class="s-label" for="select-menu-disabled">Where are you staying?</label>
+    <div class="s-select">
+        <select id="select-menu-disabled" disabled>
+            <option value="" selected>Please select one…</option>
+            <option value="bronx">Bronx</option>
+            <option value="brooklyn">Brooklyn</option>
+            <option value="manhattan">Manhattan</option>
+            <option value="queens">Queens</option>
+            <option value="staten-island">Staten Island</option>
+        </select>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="d-flex gy16 fd-column">
+        <div>
+            <div class="s-form-group">
+                <label class="s-label" for="select-menu">
+                    How will you be traveling?
+                    <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+                </label>
+                <div class="s-select">
+                    <select id="select-menu">
+                        <option value="" selected>Please select one…</option>
+                        <option value="walk">Walk</option>
+                        <option value="bike">Bicycle</option>
+                        <option value="car">Automobile</option>
+                        <option value="rail">Train</option>
+                        <option value="fly">Plane</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="s-form-group is-disabled">
+                <label class="s-label" for="select-menu-disabled">Where are you staying?</label>
+                <div class="s-select">
+                    <select id="select-menu-disabled" disabled>
+                        <option value="" selected>Please select one…</option>
+                        <option value="bronx">Bronx</option>
+                        <option value="brooklyn">Brooklyn</option>
+                        <option value="manhattan">Manhattan</option>
+                        <option value="queens">Queens</option>
+                        <option value="staten-island">Staten Island</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Validation states
+
+Validation states provides the user feedback based on their interaction (or lack of interaction) with a select menu. These styles are applied by applying the appropriate class to the wrapping parent container.
+
+### Validation classes
+
+<ClassTable classes={validationClasses} headings={{ parent: 'Applies to' }} />
+
+### Validation examples
+
+#### Warning
+
+```html
+<div class="s-form-group has-warning">
+    <label class="s-label" for="select-menu">
+        How will you be traveling?
+        <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+    </label>
+    <div class="s-select">
+        <select id="select-menu">
+            <option value="" selected>Please select one…</option>
+            …
+        </select>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-warning">
+        <label class="s-label" for="select-menu-warning">
+            How will you be traveling?
+            <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+        </label>
+        <div class="s-select">
+            <select id="select-menu-warning">
+                <option value="" selected>Please select one…</option>
+                <option value="walk">Walk</option>
+                <option value="bike">Bicycle</option>
+                <option value="car">Automobile</option>
+                <option value="rail">Train</option>
+                <option value="fly">Plane</option>
+            </select>
+            <Icon src={IconAlert} class="s-input-icon" />
+        </div>
+    </div>
+</Example>
+
+#### Error
+
+```html
+<div class="s-form-group has-error">
+    <label class="s-label" for="select-menu">
+        How will you be traveling?
+        <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+    </label>
+    <div class="s-select">
+        <select id="select-menu">
+            <option value="" selected>Please select one…</option>
+            …
+        </select>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-error">
+        <label class="s-label" for="select-menu-error">
+            How will you be traveling?
+            <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+        </label>
+        <div class="s-select">
+            <select id="select-menu-error">
+                <option value="" selected>Please select one…</option>
+                <option value="walk">Walk</option>
+                <option value="bike">Bicycle</option>
+                <option value="car">Automobile</option>
+                <option value="rail">Train</option>
+                <option value="fly">Plane</option>
+            </select>
+            <Icon src={IconAlertFill} class="s-input-icon" />
+        </div>
+    </div>
+</Example>
+
+#### Success
+
+```html
+<div class="s-form-group has-success">
+    <label class="s-label" for="select-menu">
+        How will you be traveling?
+        <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+    </label>
+    <div class="s-select">
+        <select id="select-menu">
+            <option value="" selected>Please select one…</option>
+            …
+        </select>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-success">
+        <label class="s-label" for="select-menu-success">
+            How will you be traveling?
+            <p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
+        </label>
+        <div class="s-select">
+            <select id="select-menu-success">
+                <option value="" selected>Please select one…</option>
+                <option value="walk">Walk</option>
+                <option value="bike">Bicycle</option>
+                <option value="car">Automobile</option>
+                <option value="rail">Train</option>
+                <option value="fly">Plane</option>
+            </select>
+            <Icon src={IconCheck} class="s-input-icon" />
+        </div>
+    </div>
+</Example>
+
+## Sizes
+
+<table class="s-table s-table__bx-simple">
+    <thead>
+        <tr>
+            <th scope="col">Class</th>
+            <th scope="col">Name</th>
+            <th scope="col">Size</th>
+            <th scope="col">Example</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><code>.s-select__sm</code></td>
+            <td>Small</td>
+            <td>13px</td>
+            <td>
+                <div class="s-select s-select__sm">
+                    <select>
+                        <option>1 Example</option>
+                        <option>2 Options</option>
+                    </select>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="fc-black-350 fs-italic">N/A</td>
+            <td>Default</td>
+            <td>14px</td>
+            <td>
+                <div class="s-select">
+                    <select>
+                        <option>1 Example</option>
+                        <option>2 Options</option>
+                    </select>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td><code>.s-select__lg</code></td>
+            <td>Large</td>
+            <td>18px</td>
+            <td>
+                <div class="s-select s-select__lg">
+                    <select>
+                        <option>1 Example</option>
+                        <option>2 Options</option>
+                    </select>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/packages/stacks-docs-next/src/docs/public/system/forms/textarea.md b/packages/stacks-docs-next/src/docs/public/system/forms/textarea.md
new file mode 100644
index 0000000000..e26f3484be
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/forms/textarea.md
@@ -0,0 +1,169 @@
+---
+title: "Textarea"
+description: "Multi-line inputs used by users to enter longer text portions."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-textarea--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=4537-49735&m=dev"
+---
+
+<script lang="ts">
+    import { Icon } from '@stackoverflow/stacks-svelte';
+    import { IconAlert, IconAlertFill, IconCheck } from '@stackoverflow/stacks-icons/icons';
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const classes: ClassTableRow[] = [
+        { class: '.s-textarea',     parent: 'N/A', modifies: 'N/A',        description: 'Base textarea style.' },
+        { class: '.s-textarea__sm', parent: 'N/A', modifies: '.s-textarea', description: 'Apply a small size.' },
+        { class: '.s-textarea__lg', parent: 'N/A', modifies: '.s-textarea', description: 'Apply a large size.' },
+    ];
+
+    const validationClasses: ClassTableRow[] = [
+        { class: '.has-warning', parent: 'Parent element', description: 'Used to warn users that the value they\'ve entered has a potential problem, but it doesn\'t block them from proceeding.' },
+        { class: '.has-error',   parent: 'Parent element', description: 'Used to alert users that the value they\'ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.' },
+        { class: '.has-success', parent: 'Parent element', description: 'Used to notify users that the value they\'ve entered is fine or has been submitted successfully.' },
+    ];
+</script>
+
+## Classes
+
+<ClassTable {classes} />
+
+## Base style
+
+```html
+<div class="d-flex fd-column gy4">
+    <label class="s-label" for="example-item">Question body</label>
+    <div class="d-flex ps-relative">
+        <textarea class="s-textarea w100" id="example-item" placeholder="…"></textarea>
+    </div>
+</div>
+```
+
+<Example>
+    <div class="s-form-group">
+        <label class="s-label" for="example-item7">Question body</label>
+        <div class="d-flex ps-relative">
+            <textarea class="s-textarea ps-relative w100" id="example-item7" placeholder="e.g. The Stack Overflow glyph used to have 6 bars, but now…"></textarea>
+        </div>
+    </div>
+</Example>
+
+## Accessibility
+
+It is recommended to follow the same accessibility guidance as the [Input component](/system/components/inputs#accessibility). Including marking Textarea's as **required** via the `.s-required-symbol` class.
+
+## Validation states
+
+Validation states provides the user feedback based on their interaction (or lack of interaction) with a textarea. These styles are applied by applying the appropriate class to the wrapping parent container.
+
+### Validation classes
+
+<ClassTable classes={validationClasses} headings={{ parent: 'Applies to' }} />
+
+### Validation examples
+
+#### Warning
+
+```html
+<div class="s-form-group has-warning">
+    <label class="s-label" for="example-warning">Description</label>
+    <div class="d-flex ps-relative">
+        <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p class="s-input-message">Consider entering a description to help us better help you.</p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-warning">
+        <label class="s-label" for="example-warning-ta">Description</label>
+        <div class="d-flex ps-relative">
+            <textarea class="s-textarea w100" id="example-warning-ta" placeholder="Please describe your problem"></textarea>
+            <Icon src={IconAlert} class="s-input-icon" />
+        </div>
+        <p class="s-input-message">Consider entering a description to help us better help you.</p>
+    </div>
+</Example>
+
+#### Error
+
+```html
+<div class="s-form-group has-error">
+    <label class="s-label" for="example-error">Description</label>
+    <div class="d-flex ps-relative">
+        <textarea class="s-textarea w100" id="example-error" placeholder="Please describe your problem"></textarea>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p class="s-input-message">A description must be provided.</p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-error">
+        <label class="s-label" for="example-error-ta">Description</label>
+        <div class="d-flex ps-relative">
+            <textarea class="s-textarea w100" id="example-error-ta" placeholder="Please describe your problem"></textarea>
+            <Icon src={IconAlertFill} class="s-input-icon" />
+        </div>
+        <p class="s-input-message">A description must be provided.</p>
+    </div>
+</Example>
+
+#### Success
+
+```html
+<div class="s-form-group has-success">
+    <label class="s-label" for="example-success">Description</label>
+    <div class="d-flex ps-relative">
+        <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem">…</textarea>
+        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
+    </div>
+    <p class="s-input-message">Thanks for providing a description.</p>
+</div>
+```
+
+<Example>
+    <div class="s-form-group has-success">
+        <label class="s-label" for="example-success-ta">Description</label>
+        <div class="d-flex ps-relative">
+            <textarea class="s-textarea w100" id="example-success-ta" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it's built?</textarea>
+            <Icon src={IconCheck} class="s-input-icon" />
+        </div>
+        <p class="s-input-message">Thanks for providing a description.</p>
+    </div>
+</Example>
+
+## Sizes
+
+<table class="s-table s-table__bx-simple">
+    <thead>
+        <tr>
+            <th scope="col">Class</th>
+            <th scope="col">Name</th>
+            <th scope="col">Size</th>
+            <th scope="col">Example</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><code>.s-textarea__sm</code></td>
+            <td>Small</td>
+            <td>13px</td>
+            <td><textarea placeholder="e.g. What is Stacks?" class="s-textarea s-textarea__sm w100"></textarea></td>
+        </tr>
+        <tr>
+            <td class="fc-black-350 fs-italic">N/A</td>
+            <td>Default</td>
+            <td>14px</td>
+            <td><textarea placeholder="e.g. What is Stacks?" class="s-textarea w100"></textarea></td>
+        </tr>
+        <tr>
+            <td><code>.s-textarea__lg</code></td>
+            <td>Large</td>
+            <td>18px</td>
+            <td><textarea placeholder="e.g. What is Stacks?" class="s-textarea s-textarea__lg w100"></textarea></td>
+        </tr>
+    </tbody>
+</table>
diff --git a/packages/stacks-docs-next/src/docs/public/system/foundation/color-fundamentals.md b/packages/stacks-docs-next/src/docs/public/system/foundation/color-fundamentals.md
new file mode 100644
index 0000000000..d073fb0955
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/foundation/color-fundamentals.md
@@ -0,0 +1,736 @@
+---
+title: "Color fundamentals"
+description: "Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=34-14788"
+---
+
+## Palette
+
+### Neutral colors
+
+<p>The neutral palette consists of black, white, and grays. The neutral palette is dominant in our UI, using subtle shifts in value to create hierarchy and organize content.</p>
+
+<div class="d-flex overflow-hidden bar-md">
+    <div class="d-flex ai-end jc-end bg-black-050 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-050</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-100 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-100</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-150 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-150</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-200 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-200</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-225 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-225</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-250 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-250</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-300 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-300</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-350 fc-medium fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-350</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-400 fc-white fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-400</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-500 fc-white fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-500</span>
+    </div>
+    <div class="d-flex ai-end jc-end bg-black-600 fc-white fs-body2 box-content w100 h128 pt24 pb32">
+        <span class="v-visible-sr">black-600</span>
+    </div>
+</div>
+
+### Saturated colors
+
+<p>Stacks uses 5 colors with 6 stops per color. Colors are used sparingly and intentionally to convey meaning, draw attention to UI, or create associations.</p>
+
+<div class="d-flex sm:fd-column overflow-hidden">
+    <div class="bg-black-100 overflow-hidden p64 sm:p48 w100 theme-light__forced">
+        <div class="overflow-hidden">
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-orange-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-100</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-200</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-300</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-400</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-500</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-blue-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-100</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-200</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-300</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-400</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-500</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-green-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-100</span></div>
+                <div class="d-flex ai-end jc-end bg-green-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-200</span></div>
+                <div class="d-flex ai-end jc-end bg-green-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-300</span></div>
+                <div class="d-flex ai-end jc-end bg-green-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-400</span></div>
+                <div class="d-flex ai-end jc-end bg-green-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-500</span></div>
+                <div class="d-flex ai-end jc-end bg-green-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-red-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-100</span></div>
+                <div class="d-flex ai-end jc-end bg-red-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-200</span></div>
+                <div class="d-flex ai-end jc-end bg-red-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-300</span></div>
+                <div class="d-flex ai-end jc-end bg-red-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-400</span></div>
+                <div class="d-flex ai-end jc-end bg-red-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-500</span></div>
+                <div class="d-flex ai-end jc-end bg-red-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-yellow-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-100</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-200</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-300</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-400</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-500</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-purple-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-100</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-200</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-300</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-400</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-500</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-pink-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-100</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-200</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-300</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-400</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-500</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-600</span></div>
+            </div>
+        </div>
+    </div>
+    <div class="bg-white overflow-hidden p64 sm:p48 w100 theme-dark__forced">
+        <div class="overflow-hidden">
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-orange-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-100</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-200</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-300</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-400</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-500</span></div>
+                <div class="d-flex ai-end jc-end bg-orange-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">orange-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-blue-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-100</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-200</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-300</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-400</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-500</span></div>
+                <div class="d-flex ai-end jc-end bg-blue-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">blue-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-green-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-100</span></div>
+                <div class="d-flex ai-end jc-end bg-green-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-200</span></div>
+                <div class="d-flex ai-end jc-end bg-green-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-300</span></div>
+                <div class="d-flex ai-end jc-end bg-green-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-400</span></div>
+                <div class="d-flex ai-end jc-end bg-green-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-500</span></div>
+                <div class="d-flex ai-end jc-end bg-green-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">green-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-red-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-100</span></div>
+                <div class="d-flex ai-end jc-end bg-red-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-200</span></div>
+                <div class="d-flex ai-end jc-end bg-red-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-300</span></div>
+                <div class="d-flex ai-end jc-end bg-red-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-400</span></div>
+                <div class="d-flex ai-end jc-end bg-red-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-500</span></div>
+                <div class="d-flex ai-end jc-end bg-red-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">red-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-yellow-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-100</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-200</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-300</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-400</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-500</span></div>
+                <div class="d-flex ai-end jc-end bg-yellow-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">yellow-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-purple-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-100</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-200</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-300</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-400</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-500</span></div>
+                <div class="d-flex ai-end jc-end bg-purple-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">purple-600</span></div>
+            </div>
+            <div class="d-flex overflow-hidden fd-row-reverse">
+                <div class="d-flex ai-end jc-end bg-pink-100 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-100</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-200 fc-medium fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-200</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-300 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-300</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-400 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-400</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-500 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-500</span></div>
+                <div class="d-flex ai-end jc-end bg-pink-600 fc-white fs-body2 box-content w100 h-auto" style="aspect-ratio: 1/1"><span class="v-visible-sr">pink-600</span></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+## Usage
+
+### Color roles
+
+<p>Color roles describe the intention behind the color.</p>
+
+<div class="overflow-x-auto mb48" tabindex="0">
+    <table class="docs-table s-table s-table__bx-simple s-table__condensed va-middle fs-caption">
+        <thead>
+            <tr>
+                <th scope="col" width="36px">Role</th>
+                <th scope="col" width="36px"></th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-black-400 h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">black-400</span>
+                    </span>
+                </th>
+                <td>Neutral</td>
+                <td>Use for text and secondary UI elements, such as buttons</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-theme-secondary h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">theme-secondary</span>
+                    </span>
+                </th>
+                <td>Primary</td>
+                <td>Use for primary actions</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-theme-primary h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">theme-primary</span>
+                    </span>
+                </th>
+                <td>Accent</td>
+                <td>Use for UI that either relates to the brand or doesn't have a specific meaning tied to it.</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-blue-400 h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">blue-400</span>
+                    </span>
+                </th>
+                <td>Information</td>
+                <td>Use for UI to communicate information that you'd like the user to be aware of</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-success h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">success</span>
+                    </span>
+                </th>
+                <td>Success</td>
+                <td>Use for UI to communicate a successful action has taken place</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-warning h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">warning</span>
+                    </span>
+                </th>
+                <td>Warning</td>
+                <td>Use for UI that communicates a user should proceed with caution</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-danger h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">danger</span>
+                    </span>
+                </th>
+                <td>Danger</td>
+                <td>Use for UI that communicates the user has encountered danger or an error</td>
+            </tr>
+            <tr class="fs-body1">
+                <th scope="row">
+                    <span class="bg-purple-400 h32 w32 d-inline-block bar-md">
+                        <span class="v-visible-sr">purple-400</span>
+                    </span>
+                </th>
+                <td>Discovery</td>
+                <td>Use for UI that depicts something new, such as onboarding or a new feature</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Backgrounds
+
+<div class="d-flex fd-column bg-black-100 bar-md p32">
+    <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mb8 fd-column-reverse sm:d-none" style="margin-left: calc((1.5/11) * 100%)" role="presentation">
+        <div class="bl bc-black-250 h12 mb2"></div>
+        <div class="ta-center w100">Default background color</div>
+    </div>
+    <div class="d-flex overflow-hidden bar-md sm:fd-column">
+        <div class="d-flex ai-end jc-end bg-black-050 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-050</span>
+            <div class="mr16 md:mr0 sm:mr16">50</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-100 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-100</span>
+            <div class="mr16 md:mr0 sm:mr16">100</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-150 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-150</span>
+            <div class="mr16 md:mr0 sm:mr16">150</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-200 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-200</span>
+            <div class="mr16 md:mr0 sm:mr16">200</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-225 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-225</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-250 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-250</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-300 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-300</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-350 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-350</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-400 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-400</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-500 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-500</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-600 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-600</span>
+        </div>
+    </div>
+    <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="width: calc((4/11) * 100%)" role="presentation">
+        <div class="ba btw0 bc-black-250 h12 w100"></div>
+        <div class="bl bc-black-250 h12 mb2"></div>
+        <div class="ta-center w100">Background layers</div>
+    </div>
+</div>
+
+<p>Stops 50 through 200 are used for background layers</p>
+
+### Borders
+
+<div class="d-flex fd-column bg-black-100 bar-md p32">
+    <div class="d-flex overflow-hidden bar-md sm:fd-column">
+        <div class="d-flex ai-end jc-end bg-black-050 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-050</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-100 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-100</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-150 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-150</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-200 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-200</span>
+            <div class="mr16 md:mr0 sm:mr16">200</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-225 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-225</span>
+            <div class="mr16 md:mr0 sm:mr16">225</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-250 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-250</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-300 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-300</span>
+            <div class="mr16 md:mr0 sm:mr16">300</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-350 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-350</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-400 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-400</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-500 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-500</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-600 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-600</span>
+        </div>
+    </div>
+    <div class="d-flex w100">
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="margin-left: calc((3/11) * 100%); width: calc((2/11) * 100%)" role="presentation">
+            <div class="ba btw0 bc-black-250 h12 w100"></div>
+            <div class="bl bc-black-250 h12 mb2"></div>
+            <div class="ta-center w100">Decorative borders</div>
+        </div>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="margin-left: calc((1/11) * 100%); min-width: calc((1/11) * 100%)" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Input borders</div>
+        </div>
+    </div>
+</div>
+
+<p>Stops 200 and 225 are used for decorative borders and dividers throughout our UI. The 250 stop is used for input borders such as text field or secondary button.</p>
+
+### Text
+
+<div class="d-flex fd-column bg-black-100 bar-md p32">
+    <div class="d-flex overflow-hidden bar-md sm:fd-column">
+        <div class="d-flex ai-end jc-end bg-black-050 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-050</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-100 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-100</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-150 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-150</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-200 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-200</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-225 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-225</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-250 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-250</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-300 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-300</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-350 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-350</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-400 fc-white fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-400</span>
+            <div class="mr16 md:mr0 sm:mr16">400</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-500 fc-white fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-500</span>
+            <div class="mr16 md:mr0 sm:mr16">500</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-600 fc-white fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-600</span>
+            <div class="mr16 md:mr0 sm:mr16">600</div>
+        </div>
+    </div>
+    <div class="d-flex w100">
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="margin-left: calc((8/11) * 100%); width: calc((2/11) * 100%)" role="presentation">
+            <div class="ba btw0 bc-black-250 h12 w100"></div>
+            <div class="bl bc-black-250 h12 mb2"></div>
+            <div class="ta-center w100">Text</div>
+        </div>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none fl-shrink1" style="min-width: calc((1/11) * 100%)" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Heading</div>
+        </div>
+    </div>
+</div>
+
+<p>Stops 500 and 600 can be used for text. Neutrals, blue, red, and green can also be used at 400 and will meet APCA contrast minimums within these shades. Orange and yellow should not be used at 400 because it does not meet our contrast standards.</p>
+
+### Icons and illustrations
+
+<div class="d-flex fd-column bg-black-100 bar-md p32">
+    <div class="d-flex overflow-hidden bar-md sm:fd-column">
+        <div class="d-flex ai-end jc-end bg-black-050 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-050</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-100 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-100</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-150 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-150</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-200 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-200</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-225 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-225</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-250 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-250</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-300 fc-medium fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-300</span>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-350 fc-medium fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-350</span>
+            <div class="mr16 md:mr0 sm:mr16">350</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-400 fc-white fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-400</span>
+            <div class="mr16 md:mr0 sm:mr16">400</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-500 fc-white fs-body2 box-content w100 h64 sm:h32 p8">
+            <span class="v-visible-sr">black-500</span>
+            <div class="mr16 md:mr0 sm:mr16">500</div>
+        </div>
+        <div class="d-flex ai-end jc-end bg-black-600 fc-white fs-body2 box-content w100 sm:d-none h64 sm:h32 p8">
+            <span class="v-visible-sr">black-600</span>
+        </div>
+    </div>
+    <div class="d-flex w100">
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="margin-left: calc((7/11) * 100%); min-width: calc((1/11) * 100%)" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Illustrations</div>
+        </div>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column sm:d-none" style="width: calc((2/11) * 100%)" role="presentation">
+            <div class="ba btw0 bc-black-250 h12 w100"></div>
+            <div class="bl bc-black-250 h12 mb2"></div>
+            <div class="ta-center w100">Icons</div>
+        </div>
+    </div>
+</div>
+
+<p>Stops 400 and 500 are for icons, while 350 should be used for more detailed illustrations.</p>
+
+## Layering
+
+<p>Colors in the neutral palette are layered on top of each other to foster a sense of hierarchy and create associations.</p>
+
+<div class="d-grid grid__2 sm:fd-column">
+    <div class="theme-light__forced bg-black-100 blr-md ba bc-black-200 fc-dark fs-body2 p48 md:p16 w100">
+        <div>Body background</div>
+        <div class="bg-black-050 ba bc-black-200 bar-md p48 md:p16 mt8">
+            <div>Content</div>
+            <div class="bg-black-100 ba bc-black-200 bar-md p48 pb96 lg:p32 md:p16 mt8">
+                <div>Component</div>
+            </div>
+        </div>
+    </div>
+    <div class="theme-dark__forced bg-white brr-md ba bc-black-200 fc-dark fs-body2 p48 md:p16 w100">
+        <div>Body background</div>
+        <div class="bg-black-050 ba bc-black-200 bar-md p48 md:p16 mt8">
+            <div>Content</div>
+            <div class="bg-black-100 ba bc-black-200 bar-md p48 pb96 lg:p32 md:p16 mt8">
+                <div>Component</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="overflow-x-auto mb48" tabindex="0">
+    <table class="docs-table s-table s-table__bx-simple s-table__condensed va-middle fs-caption">
+        <thead>
+            <tr>
+                <th scope="col">Background layer</th>
+                <th scope="col">Light mode</th>
+                <th scope="col">Dark mode</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="fs-body1 s-table--cell3">
+                <th scope="row">Body background</th>
+                <td class="s-table--cell5">
+                    <div class="d-flex md:fd-column g16">
+                        <div class="d-flex ai-center g12">
+                            <span class="bg-black-100 h32 w32 d-inline-block bar-md theme-light__forced ba bc-black-200">
+                                <span class="v-visible-sr">black-100</span>
+                            </span>
+                            black-100 (Teams)
+                        </div>
+                        <div class="d-flex ai-center g12">
+                            <span class="bg-black-050 h32 w32 d-inline-block bar-md theme-light__forced ba bc-black-200">
+                                <span class="v-visible-sr">black-050</span>
+                            </span>
+                            black-100 (SO)
+                        </div>
+                    </div>
+                </td>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-white h32 w32 d-inline-block bar-md theme-dark__forced ba bc-black-200">
+                            <span class="v-visible-sr">white</span>
+                        </span>
+                        white
+                    </div>
+                </td>
+            </tr>
+            <tr class="fs-body1 s-table--cell3">
+                <th scope="row">Content</th>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-050 h32 w32 d-inline-block bar-md theme-light__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-050</span>
+                        </span>
+                        black-050
+                    </div>
+                </td>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-050 h32 w32 d-inline-block bar-md theme-dark__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-050</span>
+                        </span>
+                        black-050
+                    </div>
+                </td>
+            </tr>
+            <tr class="fs-body1 s-table--cell3">
+                <th scope="row">Component</th>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-100 h32 w32 d-inline-block bar-md theme-light__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-100</span>
+                        </span>
+                        black-100
+                    </div>
+                </td>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-100 h32 w32 d-inline-block bar-md theme-dark__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-100</span>
+                        </span>
+                        black-100
+                    </div>
+                </td>
+            </tr>
+            <tr class="fs-body1 s-table--cell3">
+                <th scope="row">Component alt</th>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-150 h32 w32 d-inline-block bar-md theme-light__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-150</span>
+                        </span>
+                        black-150
+                    </div>
+                </td>
+                <td class="s-table--cell5">
+                    <div class="d-flex ai-center g12">
+                        <span class="bg-black-150 h32 w32 d-inline-block bar-md theme-dark__forced ba bc-black-200">
+                            <span class="v-visible-sr">black-150</span>
+                        </span>
+                        black-150
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+## Emphasis levels
+
+<p>Emphasis determines the amount of contrast a color has against the default surface. Emphasis has a range from subtle to bold. Bold emphasis has more contrast against the background, which adds more attention than using UI with the subtle or default emphasis level.</p>
+
+<div class="d-flex fd-column g16">
+    <div class="d-grid grid__3 md:grid__2 sm:grid__1 md:fd-column gx16 gy32 jc-space-between bg-black-100 bar-md p32">
+        <div>
+            <div class="d-grid grid__3 g12 fs-caption">
+                <div class="bg-black-500 fc-white bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-orange-400 fc-white bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-blue-400 fc-white bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-green-400 fc-white bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-red-400 fc-white bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-yellow-400 fc-black bar-pill ta-center px8 py2">Robots</div>
+            </div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column" role="presentation">
+                <div class="ba btw0 bc-black-250 h12 w100"></div>
+                <div class="bl bc-black-250 h12 mb2"></div>
+                <div class="ta-center w100">Bold</div>
+            </div>
+        </div>
+        <div>
+            <div class="d-grid grid__3 g12 fs-caption">
+                <div class="bg-black-200 fc-black-600 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-orange-200 fc-orange-600 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-blue-200 fc-blue-600 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-green-200 fc-green-600 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-red-200 fc-red-600 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-yellow-200 fc-yellow-600 bar-pill ta-center px8 py2">Robots</div>
+            </div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column" role="presentation">
+                <div class="ba btw0 bc-black-250 h12 w100"></div>
+                <div class="bl bc-black-250 h12 mb2"></div>
+                <div class="ta-center w100">Default</div>
+            </div>
+        </div>
+        <div>
+            <div class="d-grid grid__3 g12 fs-caption">
+                <div class="bg-black-150 fc-black-500 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-orange-100 fc-orange-500 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-blue-100 fc-blue-500 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-green-100 fc-green-500 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-red-100 fc-red-500 bar-pill ta-center px8 py2">Robots</div>
+                <div class="bg-yellow-100 fc-yellow-500 bar-pill ta-center px8 py2">Robots</div>
+            </div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column" role="presentation">
+                <div class="ba btw0 bc-black-250 h12 w100"></div>
+                <div class="bl bc-black-250 h12 mb2"></div>
+                <div class="ta-center w100">Subtle</div>
+            </div>
+        </div>
+    </div>
+    <div class="d-grid grid__3 gx16 gy32 jc-space-between bg-black-100 bar-md p32">
+        <div class="ta-center">
+            <div class="fs-title fc-black">Text</div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+                <div class="bl bc-black-250 h24 mb2"></div>
+                <div class="ta-center w100">Bold</div>
+            </div>
+        </div>
+        <div class="ta-center">
+            <div class="fs-title fc-black-500">Text</div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+                <div class="bl bc-black-250 h24 mb2"></div>
+                <div class="ta-center w100">Default</div>
+            </div>
+        </div>
+        <div class="ta-center">
+            <div class="fs-title fc-black-400">Text</div>
+            <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+                <div class="bl bc-black-250 h24 mb2"></div>
+                <div class="ta-center w100">Subtle</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+## Interaction states
+
+<p>In Stacks, a component will get darker (or lighter in dark mode) as they interact with it. These progresses happen by adding 100 to the color before the interaction happens. Example: Blue-400 on hover becomes Blue-500. For a disabled button state, subtract 100 from the default color.</p>
+
+<div class="d-flex js-space-between gx16 gy32 bg-black-100 bar-md p32">
+    <div class="ta-center w100">
+        <button class="s-btn" role="presentation">Button</button>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Default</div>
+        </div>
+    </div>
+    <div class="ta-center w100">
+        <button class="s-btn" role="presentation" style="--_bu-bg: var(--theme-secondary-500)">Button</button>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Hover</div>
+        </div>
+    </div>
+    <div class="ta-center w100">
+        <button class="s-btn is-selected" role="presentation">Button</button>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Selected</div>
+        </div>
+    </div>
+    <div class="ta-center w100">
+        <button class="s-btn" disabled role="presentation">Button</button>
+        <div class="d-flex ai-center fc-light fs-caption fs-italic overflow-visible mt8 fd-column mx-auto" style="margin-left: 50%;" role="presentation">
+            <div class="bl bc-black-250 h24 mb2"></div>
+            <div class="ta-center w100">Disabled</div>
+        </div>
+    </div>
+</div>
+
+## Light, dark, and high contrast modes
+
+<p>Stacks supports light, dark, and high contrast modes. By using Stacks, you will get each of these modes for free. By using a Stacks component, an atomic color class, or CSS variable directly, your theme will switch appropriately based on the following methods:</p>
+
+<ol>
+    <li>You can apply <code>.theme-system</code> to the <code>body</code> element. This will change colors based on the <code>prefers-color-scheme</code> media query, which is ultimately powered by the user's system or browser settings. This can be preferable for folks who have their system turn to dark mode based on ambient light or time of day.</li>
+    <li>Alternatively, you can set a dark mode that is not system dependent by attaching <code>.theme-dark</code> to the <code>body</code> element.</li>
+    <li>Adding <code>.theme-highcontrast</code> to the <code>body</code> element will boost colors to WCAG Level AAA contrast ratios in as many places as possible. This mode stacks on top of both light and dark modes. The only exception is branded themed colors remain untouched by high contrast mode.</li>
+</ol>
+
+<p>There are also <a class="s-link" href="/product/develop/conditional-classes#dark-mode">conditional classes</a> that can be applied to override assumed dark mode colors, force light mode, or to force dark mode. Forcing modes can be good for previews in admin-only situations.</p>
diff --git a/packages/stacks-docs-next/src/docs/public/system/foundation/colors.md b/packages/stacks-docs-next/src/docs/public/system/foundation/colors.md
new file mode 100644
index 0000000000..8d5897d078
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/foundation/colors.md
@@ -0,0 +1,340 @@
+---
+title: "Colors"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=651-4397&t=UGqQCKW9BZQqF65O-1"
+description: "To avoid specifying color values by hand, we've included a robust set of color variables. For maintainability, please use these instead of hardcoding color values."
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+</script>
+
+## Stops
+
+<div class="d-grid g24 mt16 mb32" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
+    <div>
+        <h3 class="mb8 fs-body2">Theme primary</h3>
+        <div class="ba bc-theme-primary-400 overflow-hidden">
+            <div class="p12 bg-theme-primary fc-theme-primary-100">
+                theme-primary
+            </div>
+            <div class="p12 bg-theme-primary-100 fc-theme-primary-400">
+                theme-primary-100
+            </div>
+            <div class="p12 bg-theme-primary-200 fc-theme-primary-500">
+                theme-primary-200
+            </div>
+            <div class="p12 bg-theme-primary-300 fc-white">
+                theme-primary-300
+            </div>
+            <div class="p12 bg-theme-primary-400 fc-white">
+                theme-primary-400
+            </div>
+            <div class="p12 bg-theme-primary-500 fc-white">
+                theme-primary-500
+            </div>
+            <div class="p12 bg-theme-primary-600 fc-white">
+                theme-primary-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Theme secondary</h3>
+        <div class="ba bc-theme-secondary-400 overflow-hidden">
+            <div class="p12 bg-theme-secondary fc-theme-secondary-100">
+                theme-secondary
+            </div>
+            <div class="p12 bg-theme-secondary-100 fc-theme-secondary-400">
+                theme-secondary-100
+            </div>
+            <div class="p12 bg-theme-secondary-200 fc-theme-secondary-500">
+                theme-secondary-200
+            </div>
+            <div class="p12 bg-theme-secondary-300 fc-white">
+                theme-secondary-300
+            </div>
+            <div class="p12 bg-theme-secondary-400 fc-white">
+                theme-secondary-400
+            </div>
+            <div class="p12 bg-theme-secondary-500 fc-white">
+                theme-secondary-500
+            </div>
+            <div class="p12 bg-theme-secondary-600 fc-white">
+                theme-secondary-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Orange</h3>
+        <div class="ba bc-orange-400 overflow-hidden">
+            <div class="p12 bg-orange-100 fc-orange-400">
+                orange-100
+            </div>
+            <div class="p12 bg-orange-200 fc-orange-500">
+                orange-200
+            </div>
+            <div class="p12 bg-orange-300 fc-white">
+                orange-300
+            </div>
+            <div class="p12 bg-orange-400 fc-white">
+                orange-400
+            </div>
+            <div class="p12 bg-orange-500 fc-white">
+                orange-500
+            </div>
+            <div class="p12 bg-orange-600 fc-white">
+                orange-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Blue</h3>
+        <div class="ba bc-blue-400 overflow-hidden">
+            <div class="p12 bg-blue-100 fc-blue-400">
+                blue-100
+            </div>
+            <div class="p12 bg-blue-200 fc-blue-500">
+                blue-200
+            </div>
+            <div class="p12 bg-blue-300 fc-white">
+                blue-300
+            </div>
+            <div class="p12 bg-blue-400 fc-white">
+                blue-400
+            </div>
+            <div class="p12 bg-blue-500 fc-white">
+                blue-500
+            </div>
+            <div class="p12 bg-blue-600 fc-white">
+                blue-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Green</h3>
+        <div class="ba bc-green-400 overflow-hidden">
+            <div class="p12 bg-green-100 fc-green-400">
+                green-100
+            </div>
+            <div class="p12 bg-green-200 fc-green-500">
+                green-200
+            </div>
+            <div class="p12 bg-green-300 fc-white">
+                green-300
+            </div>
+            <div class="p12 bg-green-400 fc-white">
+                green-400
+            </div>
+            <div class="p12 bg-green-500 fc-white">
+                green-500
+            </div>
+            <div class="p12 bg-green-600 fc-white">
+                green-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Red</h3>
+        <div class="ba bc-red-400 overflow-hidden">
+            <div class="p12 bg-red-100 fc-red-400">
+                red-100
+            </div>
+            <div class="p12 bg-red-200 fc-red-500">
+                red-200
+            </div>
+            <div class="p12 bg-red-300 fc-white">
+                red-300
+            </div>
+            <div class="p12 bg-red-400 fc-white">
+                red-400
+            </div>
+            <div class="p12 bg-red-500 fc-white">
+                red-500
+            </div>
+            <div class="p12 bg-red-600 fc-white">
+                red-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Yellow</h3>
+        <div class="ba bc-yellow-400 overflow-hidden">
+            <div class="p12 bg-yellow-100 fc-yellow-400">
+                yellow-100
+            </div>
+            <div class="p12 bg-yellow-200 fc-yellow-500">
+                yellow-200
+            </div>
+            <div class="p12 bg-yellow-300 fc-white">
+                yellow-300
+            </div>
+            <div class="p12 bg-yellow-400 fc-white">
+                yellow-400
+            </div>
+            <div class="p12 bg-yellow-500 fc-white">
+                yellow-500
+            </div>
+            <div class="p12 bg-yellow-600 fc-white">
+                yellow-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Purple</h3>
+        <div class="ba bc-purple-400 overflow-hidden">
+            <div class="p12 bg-purple-100 fc-purple-400">
+                purple-100
+            </div>
+            <div class="p12 bg-purple-200 fc-purple-500">
+                purple-200
+            </div>
+            <div class="p12 bg-purple-300 fc-white">
+                purple-300
+            </div>
+            <div class="p12 bg-purple-400 fc-white">
+                purple-400
+            </div>
+            <div class="p12 bg-purple-500 fc-white">
+                purple-500
+            </div>
+            <div class="p12 bg-purple-600 fc-white">
+                purple-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Pink</h3>
+        <div class="ba bc-pink-400 overflow-hidden">
+            <div class="p12 bg-pink-100 fc-pink-400">
+                pink-100
+            </div>
+            <div class="p12 bg-pink-200 fc-pink-500">
+                pink-200
+            </div>
+            <div class="p12 bg-pink-300 fc-white">
+                pink-300
+            </div>
+            <div class="p12 bg-pink-400 fc-white">
+                pink-400
+            </div>
+            <div class="p12 bg-pink-500 fc-white">
+                pink-500
+            </div>
+            <div class="p12 bg-pink-600 fc-white">
+                pink-600
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">Black</h3>
+        <div class="ba bc-black-400 overflow-hidden">
+            <div class="p12 bg-black-050 fc-black-400">
+                black-050
+            </div>
+            <div class="p12 bg-black-100 fc-black-400">
+                black-100
+            </div>
+            <div class="p12 bg-black-150 fc-black-500">
+                black-150
+            </div>
+            <div class="p12 bg-black-200 fc-black-500">
+                black-200
+            </div>
+            <div class="p12 bg-black-225 fc-black-600">
+                black-225
+            </div>
+            <div class="p12 bg-black-250 fc-black-600">
+                black-250
+            </div>
+            <div class="p12 bg-black-300 fc-white">
+                black-300
+            </div>
+            <div class="p12 bg-black-350 fc-white">
+                black-350
+            </div>
+            <div class="p12 bg-black-400 fc-white">
+                black-400
+            </div>
+            <div class="p12 bg-black-500 fc-white">
+                black-500
+            </div>
+            <div class="p12 bg-black-600 fc-white">
+                black-600
+            </div>
+            <div class="p12 bg-black fc-white">
+                black
+            </div>
+        </div>
+    </div>
+    <div>
+        <h3 class="mb8 fs-body2">White</h3>
+        <div class="ba bc-white-400 overflow-hidden">
+            <div class="p12 bg-white fc-black">
+                white
+            </div>
+        </div>
+    </div>
+</div>
+
+## Brand
+
+<Notice variant="warning" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>Please see <a href="https://alpha.stackoverflow.design/brand/color">the brand guidelines for color use</a>, these should not be used without prior direction from the brand team.</p>
+</Notice>
+
+<div class="d-grid g24 mt16 mb32" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
+    <div>
+        <div class="ba bc-black-400 overflow-hidden theme-light__forced">
+            <div class="p12 fc-black bg-brand">
+                brand
+            </div>
+            <div class="p12 fc-white bg-brand-black">
+                brand-black
+            </div>
+            <div class="p12 fc-black bg-brand-off-white">
+                brand-off-white
+            </div>
+            <div class="p12 fc-black bg-brand-blue-light">
+                brand-blue-light
+            </div>
+            <div class="p12 fc-white bg-brand-blue">
+                brand-blue
+            </div>
+            <div class="p12 fc-white bg-brand-blue-dark">
+                brand-blue-dark
+            </div>
+            <div class="p12 fc-black bg-brand-brown-light">
+                brand-brown-light
+            </div>
+            <div class="p12 fc-black bg-brand-green">
+                brand-green
+            </div>
+            <div class="p12 fc-white bg-brand-green-dark">
+                brand-green-dark
+            </div>
+            <div class="p12 fc-white bg-brand-orange-medium">
+                brand-orange-medium
+            </div>
+            <div class="p12 fc-white bg-brand-orange-dark">
+                brand-orange-dark
+            </div>
+            <div class="p12 fc-black bg-brand-pink">
+                brand-pink
+            </div>
+            <div class="p12 fc-white bg-brand-pink-dark">
+                brand-pink-dark
+            </div>
+            <div class="p12 fc-black bg-brand-purple">
+                brand-purple
+            </div>
+            <div class="p12 fc-white bg-brand-purple-dark">
+                brand-purple-dark
+            </div>
+            <div class="p12 fc-black bg-brand-yellow">
+                brand-yellow
+            </div>
+            <div class="p12 fc-white bg-brand-yellow-dark">
+                brand-yellow-dark
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/stacks-docs-next/src/docs/public/system/foundation/theming.md b/packages/stacks-docs-next/src/docs/public/system/foundation/theming.md
new file mode 100644
index 0000000000..98ec7d1168
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/foundation/theming.md
@@ -0,0 +1,471 @@
+---
+title: "Theming"
+description: "Stacks provides a robust theming API to handle theming in various contexts."
+---
+
+<script lang="ts">
+    import { Notice } from '@stackoverflow/stacks-svelte';
+    import Example from '$components/Example.svelte';
+</script>
+
+## Default theme stops
+
+Stacks provides primary and secondary theme stops that can be overridden in your custom theme.
+
+## Theming API
+
+### Programmatic theme generation
+
+Use `.create-custom-theme-hsl-variables(@color, @tier, @modeCustom)` to create a custom theme.
+
+This function generates two sets of CSS variables: 1) independent h/s/l color variables and 2) variables at each colors stop that reference the h/s/l variables. Provide this function the arguments defined below to generate theme colors which will apply across Stacks.
+
+<div class="overflow-x-auto mb32" tabindex="0">
+    <table class="docs-table s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th class="s-table--cell2" scope="col">Argument</th>
+                <th class="s-table--cell3" scope="col">Type</th>
+                <th scope="col">Default</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody class="fs-caption">
+            <tr>
+                <td><code>@color</code></td>
+                <td>HSL, hex, or other color value</td>
+                <td></td>
+                <td>Color to use to generate theme values.</td>
+            </tr>
+            <tr>
+                <td><code>@tier</code></td>
+                <td><code>primary</code> | <code>secondary</code></td>
+                <td><code>primary</code></td>
+                <td>Color tier to generate.</td>
+            </tr>
+            <tr>
+                <td><code>@modeCustom</code></td>
+                <td><code>base</code> | <code>dark</code></td>
+                <td><code>base</code></td>
+                <td>The color mode the theme applies to.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+#### Format
+
+```css
+.theme-custom.themed {
+    .create-custom-theme-hsl-variables(hsl(172, 37%, 48%), primary);
+    .create-custom-theme-hsl-variables(hsl(259, 29%, 55%), secondary);
+    .create-custom-theme-hsl-variables(hsl(201, 70%, 55%), primary, dark);
+    .create-custom-theme-hsl-variables(hsl(270, 34%, 40%), secondary, dark);
+}
+```
+
+#### Example
+
+```css
+/* Input */
+.theme-custom.themed {
+    .create-custom-theme-hsl-variables(hsl(172, 37%, 48%), primary);
+}
+
+/* Output */
+.theme-custom.themed {
+    /* HSL variables */
+    --theme-base-primary-color-h: 172;
+    --theme-base-primary-color-s: 37%;
+    --theme-base-primary-color-l: 48%;
+    /* Color variables based on HSL variables */
+    --theme-primary-custom: var(--theme-primary-custom-400);
+    --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
+    --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
+    --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
+    --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
+    --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(15%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 45%));
+    --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 30%));
+}
+```
+
+#### Manual addition of theme variables
+
+If you need to apply a theme without using the above function, you can do so by manually adding the variables above to your CSS. The most common use for this approach is when the theme needs to change client-side, such as when allowing the user to change and preview a theme dynamically.
+
+With this approach, we recommend targeting new h/s/l color variables on a parent element that includes `.themed` class.
+
+### Live playground
+
+<!-- TODO: interactive theme playground -->
+
+<Notice variant="info" class="s-anchors s-anchors__inherit s-anchors__underlined">
+    <p>An interactive theme playground is coming soon.</p>
+</Notice>
+
+### Theme variables overrides
+
+Stacks provides CSS variables for fine grained control of theming. These variables allow you to adjust the theming on specific components and elements, as well as body background and font color.
+
+```css
+--theme-background-color
+--theme-body-font-color
+--theme-button-active-background-color
+--theme-button-color
+--theme-button-hover-background-color
+--theme-button-hover-color
+--theme-button-outlined-border-color
+--theme-button-outlined-selected-border-color
+--theme-button-primary-active-background-color
+--theme-button-primary-background-color
+--theme-button-primary-color
+--theme-button-primary-hover-background-color
+--theme-button-primary-hover-color
+--theme-button-primary-number-color
+--theme-button-primary-selected-background-color
+--theme-button-primary-selected-color
+--theme-button-selected-background-color
+--theme-button-selected-color
+--theme-link-color
+--theme-link-color-hover
+--theme-link-color-visited
+--theme-post-body-font-family
+--theme-post-title-color
+--theme-post-title-color-hover
+--theme-post-title-color-visited
+--theme-post-title-font-family
+--theme-tag-background-color
+--theme-tag-border-color
+--theme-tag-color
+--theme-tag-hover-background-color
+--theme-tag-hover-border-color
+--theme-tag-hover-color
+--theme-tag-required-background-color
+--theme-tag-required-border-color
+--theme-tag-required-color
+--theme-tag-required-hover-background-color
+--theme-tag-required-hover-border-color
+--theme-tag-required-hover-color
+--theme-topbar-height
+```
+
+## Child theming
+
+Stacks allows for further theming various portions of a page. You can simply pair the `.themed` class with an atomic color stop, and a new theming scope. For this example, we're using a class name of `.theme-team-[xxx]` with a unique ID appended.
+
+```html
+<div class="bg-theme-primary-740"></div>
+<div class="themed theme-team-001 bg-theme-primary-400"></div>
+<div class="themed theme-team-002 bg-theme-primary-400"></div>
+<div class="themed theme-team-003 bg-theme-primary-400"></div>
+
+<style>
+    .theme-team-001 {
+        --theme-base-primary-color-h: 349;
+        --theme-base-primary-color-s: 81%;
+        --theme-base-primary-color-l: 58%;
+        --theme-base-secondary-color-h: 349;
+        --theme-base-secondary-color-s: 81%;
+        --theme-base-secondary-color-l: 58%;
+    }
+
+    .theme-team-002 {
+        --theme-base-primary-color-h: 41;
+        --theme-base-primary-color-s: 93%;
+        --theme-base-primary-color-l: 58%;
+        --theme-base-secondary-color-h: 41;
+        --theme-base-secondary-color-s: 93%;
+        --theme-base-secondary-color-l: 58%;
+    }
+
+    .theme-team-003 {
+        --theme-base-primary-color-h: 288;
+        --theme-base-primary-color-s: 76%;
+        --theme-base-primary-color-l: 38%;
+        --theme-base-secondary-color-h: 288;
+        --theme-base-secondary-color-s: 76%;
+        --theme-base-secondary-color-l: 38%;
+
+        /* Override colors for dark mode only */
+        --theme-dark-primary-color-h: 288;
+        --theme-dark-primary-color-s: 45%;
+        --theme-dark-primary-color-l: 60%;
+        --theme-dark-secondary-color-h: 288;
+        --theme-dark-secondary-color-s: 45%;
+        --theme-dark-secondary-color-l: 60%;
+    }
+</style>
+```
+
+### Default
+
+<Example>
+    <div class="ba bc-black-225 p16 d:bg-black-100">
+        <div class="d-flex g24 fd-column">
+            <div class="d-flex g8 fd-column">
+                <div class="mb4 ff-mono fc-medium">body</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400"></div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-001">
+                <div class="mb4 ff-mono fc-medium">.themed.theme-team-001</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-002">
+                <div class="mb4 ff-mono fc-medium">.themed.theme-team-002</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-003">
+                <div class="mb4 ff-mono fc-medium">.themed.theme-team-003</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Light forced
+
+<Example>
+    <div class="ba bc-black-225 p16 d:bg-black-100 theme-light__forced">
+        <div class="d-flex g24 fd-column">
+            <div class="d-flex g8 fd-column">
+                <div class="mb4 ff-mono fc-medium">.theme-light__forced body</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400"></div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-001">
+                <div class="mb4 ff-mono fc-medium">.theme-light__forced .themed.theme-team-001</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-002">
+                <div class="mb4 ff-mono fc-medium">.theme-light__forced .themed.theme-team-002</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-003">
+                <div class="mb4 ff-mono fc-medium">.theme-light__forced .themed.theme-team-003</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+### Dark forced
+
+<Example>
+    <div class="ba bc-black-225 p16 bg-black-100 theme-dark__forced">
+        <div class="d-flex g24 fd-column">
+            <div class="d-flex g8 fd-column">
+                <div class="mb4 ff-mono fc-medium">.theme-dark__forced body</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400"></div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-001">
+                <div class="mb4 ff-mono fc-medium">.theme-dark__forced .themed.theme-team-001</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-002">
+                <div class="mb4 ff-mono fc-medium">.theme-dark__forced .themed.theme-team-002</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex g8 fd-column themed theme-team-003">
+                <div class="mb4 ff-mono fc-medium">.theme-dark__forced .themed.theme-team-003</div>
+                <div class="d-flex g16 ai-center">
+                    <div class="s-avatar s-avatar__32 bg-theme-primary-400">
+                        <div class="s-avatar--letter">C</div>
+                    </div>
+                    <input class="s-input s-input__xs wmx1" aria-label="demo input" placeholder="email" />
+                    <button class="s-btn s-btn__sm" type="button">Subscribe</button>
+                    <div>
+                        <div class="s-pagination">
+                            <span class="s-pagination--item is-selected">1</span>
+                            <a class="s-pagination--item">2</a>
+                            <a class="s-pagination--item">Next</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Example>
+
+<style>
+    .theme-team-001 {
+        --theme-base-primary-color-h: 349;
+        --theme-base-primary-color-s: 81%;
+        --theme-base-primary-color-l: 58%;
+        --theme-base-secondary-color-h: 349;
+        --theme-base-secondary-color-s: 81%;
+        --theme-base-secondary-color-l: 58%;
+
+        --theme-dark-primary-color-h: 349;
+        --theme-dark-primary-color-s: 81%;
+        --theme-dark-primary-color-l: 58%;
+        --theme-dark-secondary-color-h: 349;
+        --theme-dark-secondary-color-s: 81%;
+        --theme-dark-secondary-color-l: 58%;
+    }
+    .theme-team-002 {
+        --theme-base-primary-color-h: 41;
+        --theme-base-primary-color-s: 93%;
+        --theme-base-primary-color-l: 58%;
+        --theme-base-secondary-color-h: 41;
+        --theme-base-secondary-color-s: 93%;
+        --theme-base-secondary-color-l: 58%;
+
+        --theme-dark-primary-color-h: 41;
+        --theme-dark-primary-color-s: 93%;
+        --theme-dark-primary-color-l: 58%;
+        --theme-dark-secondary-color-h: 41;
+        --theme-dark-secondary-color-s: 93%;
+        --theme-dark-secondary-color-l: 58%;
+    }
+    .theme-team-003 {
+        --theme-base-primary-color-h: 288;
+        --theme-base-primary-color-s: 76%;
+        --theme-base-primary-color-l: 38%;
+        --theme-base-secondary-color-h: 288;
+        --theme-base-secondary-color-s: 76%;
+        --theme-base-secondary-color-l: 38%;
+
+        --theme-dark-primary-color-h: 288;
+        --theme-dark-primary-color-s: 45%;
+        --theme-dark-primary-color-l: 60%;
+        --theme-dark-secondary-color-h: 288;
+        --theme-dark-secondary-color-s: 45%;
+        --theme-dark-secondary-color-l: 60%;
+    }
+</style>
diff --git a/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md b/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md
new file mode 100644
index 0000000000..f5956cde44
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md
@@ -0,0 +1,406 @@
+---
+title: "Typography"
+description: "Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=50-9087"
+---
+
+<script lang="ts">
+    import ClassTable from '$components/ClassTable.svelte';
+    import Example from '$components/Example.svelte';
+    import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+    const basicClasses: ClassTableRow[] = [
+        { class: '.fw-normal',     output: 'font-weight: 400;',           define: 'Normal font weight. Maps to 400.' },
+        { class: '.fw-medium',     output: 'font-weight: 500;',           define: 'Medium font weight. Maps to 500.' },
+        { class: '.fw-bold',       output: 'font-weight: 600;',           define: 'Bold font weight. Maps to 600.' },
+        { class: '.fs-normal',     output: 'font-style: normal;',         define: 'Selects the normal font within the font-family.' },
+        { class: '.fs-italic',     output: 'font-style: italic;',         define: 'Selects the italic font within the font-family.' },
+        { class: '.tt-capitalize', output: 'text-transform: capitalize;', define: 'The first character in each word is capitalized regardless of markup.' },
+        { class: '.tt-lowercase',  output: 'text-transform: lowercase;',  define: 'All characters are lowercase regardless of markup.' },
+        { class: '.tt-uppercase',  output: 'text-transform: uppercase;',  define: 'All characters are uppercase regardless of markup.' },
+        { class: '.tt-none',       output: 'text-transform: none;',       define: 'Characters in a string remain unchanged.' },
+        { class: '.tt-unset',      output: 'text-transform: unset;',      define: 'Text-transform is unset entirely.' },
+        { class: '.td-underline',  output: 'text-decoration: underline;', define: 'Text renders with an underline.' },
+        { class: '.td-none',       output: 'text-decoration: none;',      define: 'Text renders without an underline.' },
+    ];
+
+    const layoutClasses: ClassTableRow[] = [
+        { class: '.ta-left',      output: 'text-align: left;',                                                   define: 'Inline contents are aligned to the left edge.',                                                                                                                              responsive: true },
+        { class: '.ta-center',    output: 'text-align: center;',                                                  define: 'Inline contents are aligned to the center.',                                                                                                                               responsive: true },
+        { class: '.ta-right',     output: 'text-align: right;',                                                   define: 'Inline contents are aligned to the right edge.',                                                                                                                           responsive: true },
+        { class: '.ta-justify',   output: 'text-align: justify;',                                                 define: 'Inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges, except for the last line.' },
+        { class: '.ws-normal',    output: 'white-space: normal;',                                                 define: 'Lines are broken as necessary to fill the parent.' },
+        { class: '.ws-nowrap',    output: 'white-space: nowrap;',                                                 define: 'Text wrapping is disabled.' },
+        { class: '.ws-pre',       output: 'white-space: pre;',                                                    define: "Whitespace is preserved but text won't wrap." },
+        { class: '.ws-pre-wrap',  output: 'white-space: pre-wrap;',                                               define: 'Whitespace is preserved but text will wrap. New lines are preserved.' },
+        { class: '.ws-pre-line',  output: 'white-space: pre-line;',                                               define: 'Whitespace is preserved but text will wrap. New lines are collapsed.' },
+        { class: '.ow-normal',    output: 'word-break: normal;',                                                  define: 'Restores overflow wrapping behavior.' },
+        { class: '.ow-anywhere',  output: 'overflow-wrap: anywhere;',                                             define: 'Breaks a string of characters at any point when no other acceptable break points are available and does not hyphenate the break.' },
+        { class: '.ow-break-word', output: 'overflow-wrap: break-word;',                                          define: 'Breaks a word to a new line only if the entire word cannot be placed on its own line without overflowing.' },
+        { class: '.ow-inherit',   output: 'overflow-wrap: inherit;',                                              define: 'Inherits the parent value.' },
+        { class: '.ow-intial',    output: 'overflow-wrap: intial;',                                               define: 'Restores the value to the initial value set on the body.' },
+        { class: '.ow-unset',     output: 'overflow-wrap: unset;',                                                define: 'Unsets any inherited behavior. Does not work in IE.' },
+        { class: '.break-word',   output: 'word-break: break-word; overflow-wrap: break-word; hyphens: auto;',    define: 'A utility class combining all word-break strategies when you absolutely must break a word.' },
+        { class: '.wb-normal',    output: 'word-break: normal;',                                                  define: 'Restores word break behavior.' },
+        { class: '.wb-break-all', output: 'word-break: break-all;',                                               define: 'To prevent copy from overflowing its box, breaks should occur between any two characters (excluding Chinese, Japanese, and Korean text)' },
+        { class: '.wb-keep-all',  output: 'word-break: keep-all;',                                                define: 'Removes word breaks for Chinese, Japanese, and Korean text. All other text behavior is the same as normal.' },
+        { class: '.wb-inherit',   output: 'word-break: inherit;',                                                 define: 'Inherits the parent value.' },
+        { class: '.wb-intial',    output: 'word-break: intial;',                                                  define: 'Restores the value to the initial value set on the body.' },
+        { class: '.wb-unset',     output: 'word-break: unset;',                                                   define: 'Unsets any inherited behavior.' },
+    ];
+</script>
+
+## Basic
+
+These styles should only be used as overrides. They shouldn't replace standard semantic uses of `strong` or `em` tags.
+
+### Basic classes
+
+<ClassTable classes={basicClasses} />
+
+### Basic examples
+
+```html
+<p class="fw-normal">…</p>
+<p class="fw-bold">…</p>
+
+<p class="fs-normal">…</p>
+<p class="fs-italic">…</p>
+<p class="fs-unset">…</p>
+
+<p class="tt-capitalize">…</p>
+<p class="tt-lowercase">…</p>
+<p class="tt-uppercase">…</p>
+<p class="tt-none">…</p>
+<p class="tt-unset">…</p>
+
+<a class="td-underline">…</a>
+<a class="td-none">…</a>
+```
+
+<Example>
+    <div class="d-flex fd-column gy16">
+        <div><strong>Font Weight:</strong> Normal</div>
+        <div><strong>Font Weight:</strong> <span class="fw-bold">Bold</span></div>
+        <div><strong>Font Style:</strong> <span class="fs-normal">Normal</span></div>
+        <div><strong>Font Style:</strong> <span class="fs-italic">Italic</span></div>
+        <div class="mb32"><strong>Font Style:</strong> <span class="fs-unset">Unset</span></div>
+        <div><strong>Text Transform:</strong> <span class="tt-capitalize">Capitalize</span></div>
+        <div><strong>Text Transform:</strong> <span class="tt-lowercase">Lowercase</span></div>
+        <div><strong>Text Transform:</strong> <span class="tt-uppercase">Uppercase</span></div>
+        <div><strong>Text Transform:</strong> <span class="tt-none">None</span></div>
+        <div class="mb32"><strong>Text Transform:</strong> <span class="tt-unset">Unset</span></div>
+        <div><strong>Text Decoration:</strong> <a><span class="td-underline">Underline</span></a></div>
+        <div><strong>Text Decoration:</strong> <a><span class="td-none">None</span></a></div>
+    </div>
+</Example>
+
+## Layout
+
+### Layout classes
+
+<ClassTable classes={layoutClasses} expandable />
+
+### Layout examples
+
+```html
+<p class="ta-left">Text align: Left</p>
+<p class="ta-center">Text align: Center</p>
+<p class="ta-right">Text align: Right</p>
+<p class="ta-justify">Justify: …</p>
+<p class="ta-unset">Text align: Unset</p>
+
+<p class="ws-normal">White-space: Normal</p>
+<p class="ws-nowrap">White-space: Nowrap</p>
+<p class="ws-pre">White-space: Pre</p>
+<p class="ws-pre-wrap">White-space: Pre-wrap</p>
+<p class="ws-pre-line">White-space: Pre-line</p>
+<p class="ws-unset">White-space: Unset</p>
+
+<p class="break-word">Break word</p>
+
+<p class="truncate">Truncate: …</p>
+```
+
+<Example>
+    <p class="ta-left"><strong>Text Align:</strong> Left</p>
+    <p class="ta-center"><strong>Text Align:</strong> Center</p>
+    <p class="ta-right"><strong>Text Align:</strong> Right</p>
+    <p class="ta-justify"><strong>Text Align:</strong> Justify — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p class="ta-unset mb32"><strong>Text Align:</strong> Unset</p>
+    <p class="ws-normal"><strong>White-space:</strong> Normal</p>
+    <p class="ws-nowrap"><strong>White-space:</strong> Nowrap</p>
+    <p class="ws-pre"><strong>White-space:</strong> Pre</p>
+    <p class="ws-pre-wrap"><strong>White-space:</strong> Pre-wrap</p>
+    <p class="ws-pre-line"><strong>White-space:</strong> Pre-line</p>
+    <p class="ws-unset mb32"><strong>White-space:</strong> Unset</p>
+    <p class="break-word mb32"><strong>Break word:</strong> MethionylglutaminylarginylhionylglutaminylargintyrosylglutamylmethionylglutaminylarginyltyrlarginyltyrosylglutamylMethionylglutaminylarginyltyrosylglutamylnyltyrosylserinemethionylglutaminylargiglutamylmethionyosylglutamylmethionylglutaminylglutaminylarginyltyrosylglutamylmethionylglutaminylarginyltyrosylglutamylmetyltyrosylglutamylserine</p>
+</Example>
+
+## Fonts
+
+```html
+<p class="ff-sans">…</p>
+<p class="ff-serif">…</p>
+<p class="ff-mono">…</p>
+<p class="ff-inherit">…</p>
+```
+
+<Example>
+    <div class="d-flex fd-column gy16 my0 fs-subheading">
+        <div>
+            <p class="ff-sans mb0">Sans Serif</p>
+            <p class="ff-mono fs-caption fc-light">-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"</p>
+        </div>
+        <div>
+            <p class="ff-serif mb0">Serif</p>
+            <p class="ff-mono fs-caption fc-light">Georgia, Cambria, "Times New Roman", Times, serif</p>
+        </div>
+        <div>
+            <p class="ff-mono mb0">Monospace</p>
+            <p class="ff-mono fs-caption fc-light mb0">"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace</p>
+        </div>
+    </div>
+</Example>
+
+## Sizes
+
+Fonts larger than `.fs-body1` are reduced in size at the smallest responsive breakpoint. `.fs-body1` or smaller remain fixed at their initial pixel values.
+
+### Size classes
+
+<div class="overflow-x-auto mb32" tabindex="0" role="region" aria-label="Size classes table">
+    <table class="s-table s-table__bx-simple">
+        <thead>
+            <tr>
+                <th scope="col">Class</th>
+                <th scope="col">Size</th>
+                <th scope="col">Line Height</th>
+                <th scope="col">Responsive Size</th>
+            </tr>
+        </thead>
+        <tbody class="fs-caption">
+            <tr>
+                <th scope="row"><code>.fs-fine</code></th>
+                <td><code>12px</code></td>
+                <td><code>1.36</code></td>
+                <td><code>12px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-caption</code></th>
+                <td><code>13px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>13px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-body1</code></th>
+                <td><code>14px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>14px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-body2</code></th>
+                <td><code>16px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>15px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-body3</code></th>
+                <td><code>18px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>16px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-subheading</code></th>
+                <td><code>20px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>18px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-title</code></th>
+                <td><code>22px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>20px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-headline1</code></th>
+                <td><code>28px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>23px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-headline2</code></th>
+                <td><code>36px</code></td>
+                <td><code>1.40</code></td>
+                <td><code>26px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-display1</code></th>
+                <td><code>46px</code></td>
+                <td><code>1.34</code></td>
+                <td><code>29px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-display2</code></th>
+                <td><code>58px</code></td>
+                <td><code>1.28</code></td>
+                <td><code>34px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-display3</code></th>
+                <td><code>72px</code></td>
+                <td><code>1.20</code></td>
+                <td><code>37px</code></td>
+            </tr>
+            <tr>
+                <th scope="row"><code>.fs-display4</code></th>
+                <td><code>100px</code></td>
+                <td><code>1.18</code></td>
+                <td><code>43px</code></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Size examples
+
+```html
+<p class="fs-fine">…</p>
+<p class="fs-caption">…</p>
+<p class="fs-body1">…</p>
+<p class="fs-body2">…</p>
+<p class="fs-body3">…</p>
+<p class="fs-subheading">…</p>
+<p class="fs-title">…</p>
+<p class="fs-headline1">…</p>
+<p class="fs-headline2">…</p>
+<p class="fs-display1">…</p>
+<p class="fs-display2">…</p>
+<p class="fs-display3">…</p>
+<p class="fs-display4">…</p>
+```
+
+<Example>
+    <div class="d-flex fd-column g24 my0">
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Fine</div>
+            <div class="fs-fine">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Caption</div>
+            <div class="fs-caption">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Body 1</div>
+            <div class="fs-body1">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Body 2</div>
+            <div class="fs-body2">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Body 3</div>
+            <div class="fs-body3">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Subheading</div>
+            <div class="fs-subheading">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Title</div>
+            <div class="fs-title">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Headline 1</div>
+            <div class="fs-headline1">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Headline 2</div>
+            <div class="fs-headline2">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Display 1</div>
+            <div class="fs-display1">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Display 2</div>
+            <div class="fs-display2">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Display 3</div>
+            <div class="fs-display3">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+        <div class="d-flex fd-column">
+            <div class="fc-black-400 fs-caption fw-bold">Display 4</div>
+            <div class="fs-display4">
+                <span class="v-truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+            </div>
+        </div>
+    </div>
+</Example>
+
+## Line height
+
+```html
+<p class="lh-xs">…</p>
+<p class="lh-sm">…</p>
+<p class="lh-md">…</p>
+<p class="lh-lg">…</p>
+<p class="lh-xl">…</p>
+<p class="lh-xxl">…</p>
+<p class="lh-unset">…</p>
+```
+
+<Example>
+    <p class="lh-xs"><strong>Line Height XS:</strong> This sets the <code>line-height</code> value to <code>1</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-sm"><strong>Line Height SM:</strong> This sets the <code>line-height</code> value to <code>1.15</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-md"><strong>Line Height MD:</strong> This sets the <code>line-height</code> value to <code>1.3</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-lg"><strong>Line Height LG:</strong> This sets the <code>line-height</code> value to <code>1.6</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-xl"><strong>Line Height XL:</strong> This sets the <code>line-height</code> value to <code>1.92</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-xxl"><strong>Line Height XXL:</strong> This sets the <code>line-height</code> value to <code>2</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="lh-unset"><strong>Line Height Unset:</strong> This sets the <code>line-height</code> value to <code>initial</code>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Example>
+
+## Hyphenation
+
+Our hyphenation classes determine when text that wraps across multiple lines is hyphenated. You can prevent hyphenation entirely, or allow the browser to automatically hypenate.
+
+```html
+<p class="hyphens-none">…</p>
+<p class="hyphens-auto">…</p>
+```
+
+<Example>
+    <div class="d-flex">
+        <div class="docs-box hyphens-none ow-break-word w96 mr16">
+            This text will not be hyphenated when large words break—longer words are broken by <code class="bg-black-250">.ow-break-word</code>.
+        </div>
+        <div class="docs-box hyphens-auto w96">
+            This text will be hyphenated when large words break. <code class="bg-black-250">.ow-break-word</code> shouldn't be necessary since breaks are implied by hyphenation rules.
+        </div>
+    </div>
+</Example>
diff --git a/packages/stacks-docs-next/src/routes/+layout.server.ts b/packages/stacks-docs-next/src/routes/+layout.server.ts
index 6f573059b0..278e06b9eb 100644
--- a/packages/stacks-docs-next/src/routes/+layout.server.ts
+++ b/packages/stacks-docs-next/src/routes/+layout.server.ts
@@ -38,6 +38,13 @@ export const load: LayoutServerLoad = async (event) => {
     const segments: [string] = event.url.pathname.split("/").filter(Boolean);
     const breadcrumb: { label: string; path: string }[] = [];
 
+    // Walk an item's children to find the first page path (an item with no children).
+    function firstPagePath(item: Record<string, unknown>, basePath: string): string {
+        if (!Array.isArray(item.items) || item.items.length === 0) return basePath;
+        const first = item.items[0] as Record<string, unknown>;
+        return firstPagePath(first, `${basePath}/${first.slug}`);
+    }
+
     let currentLevel = { items: structure.navigation };
     let currentPath = "";
 
@@ -47,9 +54,15 @@ export const load: LayoutServerLoad = async (event) => {
         if (item) {
             currentPath += `/${segment}`;
 
+            // If this item has children (it's a section, not a page), link to its
+            // first descendant page so the breadcrumb doesn't navigate to a 404.
+            const linkPath = Array.isArray(item.items) && item.items.length > 0
+                ? firstPagePath(item, currentPath)
+                : currentPath;
+
             breadcrumb.push({
                 label: item.title || segment,
-                path: currentPath,
+                path: linkPath,
             });
 
             currentLevel = item;
diff --git a/packages/stacks-docs-next/src/routes/+layout.svelte b/packages/stacks-docs-next/src/routes/+layout.svelte
index 3e6e67f9ce..a973ea3fba 100644
--- a/packages/stacks-docs-next/src/routes/+layout.svelte
+++ b/packages/stacks-docs-next/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
 	import { IconLogo, IconGlyph24, IconServiceGitHub, IconMenu, IconCross } from '@stackoverflow/stacks-icons'
 
 	import Navigation from '$components/Navigation.svelte';
+	import Contents from '$components/Contents.svelte';
 	import Search from '$components/Search.svelte';
 	import ThemeToggle from '$components/ThemeToggle.svelte';
 	import Login from '$src/components/LoginPrompt.svelte';
@@ -15,9 +16,15 @@
 
 	let { children, data } = $props();
 
-	let mobileMenu = $state(false)
+	let mobileMenu = $state(false);
 
-	const year = new Date().getFullYear()
+	$effect(() => {
+		document.body.classList.toggle('overflow-hidden', mobileMenu);
+		return () => { document.body.classList.remove('overflow-hidden'); };
+	});
+
+	const year = new Date().getFullYear();
+	const toc = $derived(page.data?.metadata?.toc || []);
 </script>
 
 <svelte:head>
@@ -25,9 +32,10 @@
 	<link rel="icon" href={Favicon} />
 </svelte:head>
 
-<header class="d-flex fd-column w20 sm:w100 hmx100 h-screen sm:h-auto overflow-auto ps-fixed z-nav sm:ps-static">
-	<div class="d-flex ai-center bg-black-100 pt16 px24 sm:pr6 sm:pb12 sm:pt12">
-		<a href={resolve('/')} title="Home" class="fc-brand-orange mr-auto">
+<div class="layout-root d-flex sm:fd-column">
+<header class="d-flex fd-column fl-shrink0 overflow-auto ff-stack-sans-headline w20 wmn2 wmx3 ps-sticky t0 h-screen z-nav-fixed bg-black-100 sm:h-auto sm:hmx-screen sm:overflow-hidden sm:w100 sm:wmn-initial sm:wmx-initial" class:menu-open={mobileMenu}>
+	<div class="d-flex ai-center pt32 px24 sm:pr6 sm:pb12 sm:pt12">
+		<a href={resolve('/')} title="Home" class="fc-brand mr-auto">
 			<Icon src={IconLogo} />
 		</a>
 
@@ -38,45 +46,69 @@
 		</Button>
 	</div>
 
-	<div class={`d-flex fd-column h100 ${mobileMenu ? '' : 'sm:d-none'}`}>
+	<div class={`d-flex fd-column h100 pt16 sm:fl-grow1 ${mobileMenu ? 'overflow-auto' : 'sm:d-none'}`}>
 		<Navigation
 			navigation={data.structure?.navigation}
 		/>
 
 		<div class="d-flex pt12 pb12 px12 mt-auto">
-			<div class="flex--item6 mr4 sm:mr0">
+			<div class="w50 mr4 sm:mr0">
 				<Button target="_blank" href="https://github.com/StackExchange/Stacks/" class="w100" weight="clear">
 					<Icon src={IconServiceGitHub} />
 					GitHub
 				</Button>
 			</div>
-			<div class="flex--item6 ml4 sm:ml0">
+			<div class="w50 ml4 sm:ml0">
 				<ThemeToggle />
 			</div>
 		</div>
 	</div>
 </header>
 
-<main class="main bg-white d-flex fd-column t24 sm:t0 ps-relative">
-	<!-- <div class="bg-blue-400 fc-white px24 py12">
-		This is a brand focused preview – for developer reference please see <a href="https://stackoverflow.design" class="s-link fc-white s-link__underlined">the current docs</a> or <a href="https://beta.stackoverflow.design" class="s-link fc-white s-link__underlined">the beta release</a>.
-	</div> -->
-
-	<div class="my-auto">
-		{#if data.needsAuth}
-			<Login returnUrl={page.url.pathname} />
-		{:else}
-			{@render children?.()}
-		{/if}
-	</div>
+<div class="d-flex fd-column fl-grow1 wmn0">
+	{#if page.data.active?.image}
+		<div class="layout-hero mt24 w100 hmx6 bg-cover bg-bottom bg-no-repeat" style="background-image: url({page.data.active.image})"></div>
+	{/if}
 
-	{#if !page.data.hideFooter}
-		<footer class="d-flex sm:fd-column ai-center sm:ai-start ml32 sm:ml24 py32 fc-black-400">
-			<Icon src={IconGlyph24} />
-			<div class="footer__blurb ml12 sm:ml0 sm:mt12">
-				© {year} Stack Exchange Inc.
-				All rights reserved.
+	<div class="d-flex fl-grow1 bg-white sm:mt0" class:mt24={!page.data.active?.image}>
+		<main class="main d-flex fd-column wmn0 w100">
+			<div class="d-flex fd-column fl-grow1">
+				{#if data.needsAuth}
+					<div class="my-auto">
+						<Login returnUrl={page.url.pathname} />
+					</div>
+				{:else}
+					{@render children?.()}
+				{/if}
 			</div>
-		</footer>
-	{/if}
-</main>
+
+			{#if !page.data.hideFooter}
+				<footer class="d-flex sm:fd-column ai-center sm:ai-start ml32 sm:ml24 py32 fc-black-400">
+					<Icon src={IconGlyph24} />
+					<div class="footer__blurb ml12 sm:ml0 sm:mt12">
+						© {year} Stack Exchange Inc.
+						All rights reserved.
+					</div>
+				</footer>
+			{/if}
+		</main>
+
+		{#if !page.data.hideToc}<Contents {toc} />{/if}
+	</div>
+</div>
+</div>
+
+<style>
+	@media (max-width: 48.75rem) {
+		header.menu-open {
+			position: fixed !important;
+			top: 0;
+			left: 0;
+			width: 100% !important;
+			max-width: 100% !important;
+			height: 100dvh !important;
+			max-height: 100dvh !important;
+			overflow: hidden !important;
+		}
+	}
+</style>
diff --git a/packages/stacks-docs-next/src/routes/+page.svelte b/packages/stacks-docs-next/src/routes/+page.svelte
index 9edabe05c8..30ceccb2ff 100644
--- a/packages/stacks-docs-next/src/routes/+page.svelte
+++ b/packages/stacks-docs-next/src/routes/+page.svelte
@@ -31,15 +31,17 @@
       background-size: 55% auto;
       display: flex;
       flex-direction: column;
+      flex-grow: 1;
+      width: 100%;
       padding-bottom: 30px;
     }
   </style>
 </svelte:head>
 
-<div class="page p32 sm:p24">
-  <div class="d-flex gs4 ai-center">
-    <span class="flex--item s-badge fc-purple-500 bg-purple-100">v{__APP_VERSION__}</span>
-    <a href="https://beta.svelte.stackoverflow.design/" class="flex--item s-badge">
+<div class="page p32 sm:p24 w100 wmx12 my-auto">
+  <div class="d-flex g4 ai-center">
+    <span class="s-badge fc-purple-500 bg-purple-100">v{__APP_VERSION__}</span>
+    <a href="https://beta.svelte.stackoverflow.design/" class="s-badge">
       <Icon src={IconServiceSvelte} class="native" />
       v{__SVELTE_VERSION__}
     </a>
diff --git a/packages/stacks-docs-next/src/routes/[category]/+page.svelte b/packages/stacks-docs-next/src/routes/[category]/+page.svelte
index c902114729..8f56f46ca8 100644
--- a/packages/stacks-docs-next/src/routes/[category]/+page.svelte
+++ b/packages/stacks-docs-next/src/routes/[category]/+page.svelte
@@ -4,7 +4,7 @@
   let { data } = $props();
 </script>
 
-<div class="p32 hmn-screen">
+<div class="p32 wmx12 hmn-screen">
   <h1 class="mb24">{data?.active?.title}</h1>
   <p class="fs-body3 mb24">{data?.active?.description}</p>
 
diff --git a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts
index 45d4bd9ae4..64f36de9f6 100644
--- a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts
+++ b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts
@@ -42,21 +42,6 @@ export const load: PageServerLoad = async (event) => {
         possiblePaths.includes(path)
     );
 
-    if (parent.active?.legacy) {
-        const response = await event.fetch(`/legacy/fragments/${parent.active.legacy}/fragment.html`);
-        if (response.ok) {
-            const html = (await response.text())
-                .replace(/="\/assets\//g, '="/legacy/assets/');
-            return {
-                source: "legacy" as const,
-                filename: null,
-                metadata: null,
-                markdown: null,
-                html,
-            };
-        }
-    }
-
     if (found) {
         const [filename, doc] = found;
         const loader = (await doc()) as { default: Component; metadata: Record<string, unknown> };
diff --git a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte
index 125672a7de..c5f047536e 100644
--- a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte
+++ b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte
@@ -1,86 +1,80 @@
 <script lang="ts">
-  import { IconServiceGitHub, IconServiceFigma, IconServiceSvelte, IconCheckFillCircle, IconStackCards } from '@stackoverflow/stacks-icons/icons';
-  import { Icon, Button } from '@stackoverflow/stacks-svelte';
+  import { IconServiceGitHub, IconServiceFigma, IconServiceSvelte, IconCheckFillCircle, IconLink, IconCodeBox } from '@stackoverflow/stacks-icons/icons';
+  import { Icon, Button, Link } from '@stackoverflow/stacks-svelte';
   import { resolve } from '$app/paths';
-
-  import { copyToClipboard } from '$src/lib/copyToClipboard';
-  import Contents from '$components/Contents.svelte';
+  import { page } from '$app/state';
 
   let { data } = $props();
-  let copiedMd = $state(false);
-  
-  const toc = $derived(data?.metadata?.toc || []);
+  let copied = $state(false);
 
-  const lastUpdated = $derived(new Date(data?.metadata?.updated).toLocaleDateString('en-US', { 
-    year: 'numeric', 
-    month: 'long', 
-    day: 'numeric' 
+  const lastUpdated = $derived(new Date(data?.metadata?.updated).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
   }));
 
   const pageTitle = $derived(data.active.title ? `${data.active.title} - Stack Overflow Design System` : 'Stack Overflow Design System');
   const pageDescription = $derived(data?.metadata?.description || `Documentation for ${data.active.title} in the Stack Overflow Design System`);
-  
-  function copySuccess() {
-    copiedMd = true
-   
-    setTimeout(() => {
-      copiedMd = false;
-    }, 2000);
+
+  async function copyPageUrl() {
+    await navigator.clipboard.writeText(page.url.href);
+    copied = true;
+    setTimeout(() => { copied = false; }, 2000);
   }
 </script>
 
 <svelte:head>
   <title>{pageTitle}</title>
   <meta name="description" content={pageDescription} />
-  {#if data.source === 'legacy'}
-    <script src="/legacy/docs.js"></script>
-  {/if}
 </svelte:head>
 
-<svelte:window on:copysuccess={copySuccess} />
 
-{#if data?.active?.image}
-  <img class="w100 h-auto" width="1030" height="540" alt="" src={data.active.image} />
-{/if}
-
-<article class="d-flex md:fd-column mx-auto pl32 md:pr32 sm:pl24 sm:pr24">
-  <div class="doc flex--item9 wmn1 s-prose fs-body2 pt24">
-    <div class="d-flex gs4 ai-center {data?.active?.image ? 'mb128' : 'mb24'}">
-      <nav class="flex--item fs-body2 mr-auto" aria-label="breadcrumb">
-        {#each data.breadcrumb as crumb, index (crumb.path)}
-          <a href={resolve(crumb.path)} class="pr6 s-link">{crumb.label}</a>{#if index !== data.breadcrumb.length - 1}<span class="fc-black-300 mr6">/</span>{/if}
+<article class="w100 wmx11 pl32 md:pr32 sm:pl24 sm:pr24">
+  <div class="docs fs-body2 pt24">
+    <div class="d-flex g4 ai-center sm:mb8 {data?.active?.image ? 'mb128' : 'mb24'}">
+      <nav class="d-flex ai-center g6 fs-body2 mr-auto" aria-label="breadcrumb">
+        {#each data.breadcrumb as crumb, index (crumb.label)}
+          {#if index !== 0}<span class="fc-black-300">/</span>{/if}
+          <a href={resolve(crumb.path)} class="s-link fw-bold">{crumb.label}</a>
         {/each}
+        <Button title="Copy link to this page" link icon class="d-inline-flex fc-black-400 h:fc-black-600 ml4" onclick={copyPageUrl}>
+          {#if copied}
+            <Icon src={IconCheckFillCircle} class="fc-green-400 w16 h16" />
+          {:else}
+            <Icon src={IconLink} class="w16 h16" />
+          {/if}
+        </Button>
       </nav>
 
-      <button type="button" title="Copy to Markdown" class="s-btn s-btn__sm s-btn__clear s-btn__icon" use:copyToClipboard={data.markdown}>
-        {#if copiedMd}
-          <Icon src={IconCheckFillCircle} class="fc-green-400" />
-          <span class="sm:d-none">Copied!</span>
-        {:else}
-          <Icon src={IconStackCards} />
-          <span class="sm:d-none">Copy</span>
+      <div class="d-flex ai-center g16 fs-caption">
+        {#if data?.metadata?.js}
+          <Link href="#javascript">
+            <Icon src={IconCodeBox} class="fc-green-400" />
+            <span class="sm:d-none">JavaScript</span>
+          </Link>
         {/if}
-      </button>
 
-      {#if data.filename}
-        <Button title="Edit on GitHub" size="sm" weight="clear" href={`https://github.com/StackExchange/Stacks/edit/main/packages/stacks-docs-next${data.filename}`} class="flex--item">
-          <Icon src={IconServiceGitHub} />
-          <span class="sm:d-none">Edit</span>
-        </Button>
-      {/if}
+        {#if data?.metadata?.figma}
+          <Link title="Open in Figma" href={data?.metadata?.figma}>
+            <Icon src={IconServiceFigma} class="native" />
+            <span class="sm:d-none">Figma</span>
+          </Link>
+        {/if}
 
-      {#if data?.metadata?.figma}
-        <Button title="Open in Figma" size="sm" weight="clear" icon href={data?.metadata?.figma} class="flex--item">
-          <Icon src={IconServiceFigma} class="native" />
-          <span class="sm:d-none">Figma</span>
-        </Button>
-      {/if}
-      {#if data?.metadata?.svelte}
-        <Button title="Svelte component docs" size="sm" weight="clear" icon href={data?.metadata?.svelte} class="flex--item">
-          <Icon src={IconServiceSvelte} class="native" />
-          <span class="sm:d-none">Svelte</span>
-        </Button>
-      {/if}
+        {#if data?.metadata?.svelte}
+          <Link title="Svelte component docs" href={data?.metadata?.svelte}>
+            <Icon src={IconServiceSvelte} class="native" />
+            <span class="sm:d-none">Svelte</span>
+          </Link>
+        {/if}
+
+        {#if data.filename}
+          <Link title="Edit on GitHub" href={`https://github.com/StackExchange/Stacks/edit/main/packages/stacks-docs-next${data.filename}`}>
+            <Icon src={IconServiceGitHub} />
+            <span class="sm:d-none">Edit</span>
+          </Link>
+        {/if}
+      </div>
     </div>  
 
     <header>
@@ -90,12 +84,12 @@
         </time>
       {/if}
 
-      <h1 class="fs-display2 ff-stack-sans-headline-notch mb32">
+      <h1 class="fs-display2 ff-stack-sans-headline-notch fw-bold">
         {data.active.title}
       </h1>
 
       {#if data?.metadata?.description}
-        <p class="fc-dark fs-body3 mtn16 wmx5">
+        <p class="docs-copy fc-black-500 fs-title mtn16">
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html data.metadata.description}
         </p>
@@ -104,11 +98,6 @@
 
     {#if data.source === 'md'}
       <data.Content />
-    {:else if data.source === 'legacy'}
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      {@html data.html}
     {/if}
   </div>
-
-  <Contents {toc} />
 </article>
diff --git a/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte b/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte
index 1a68419c21..40ee8589f8 100644
--- a/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte
+++ b/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte
@@ -91,186 +91,184 @@
 
 <svelte:window on:copysuccess={copySuccess} />
 
-<div class="d-flex">
-  <div class="fl-grow1 p24 wmn0">
-    <TextInput
-      id="icon-search"
-      label="Search icons and spots"
-      hideLabel
-      type="search"
-      placeholder="Search icons and spots…"
-      bind:value={search}
-    />
-
-    {#snippet section(label, entries)}
-      {#if entries.length > 0}
-        <h2 class="fs-title fw-bold mt32 mb12">
-          {label} <span class="s-badge ml4">{entries.length}</span>
-        </h2>
-
-        <div class="icons-grid">
-          {#each entries as entry (entry.name)}
-            {@const def = getDefaultVariant(entry)}
-            <button
-              class="flex--item c-pointer h:bg-black-100 s-btn s-btn__unset p12 d-flex fd-column h100 {selected?.name === entry.name ? 'bg-blue-100' : ''}"
-              onclick={() => selectEntry(entry)}
-            >
-              <div class="d-flex ai-center jc-center my-auto h100">
-                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                {@html def.svg.replace('class="', `class="w100 h-auto wmx100 ${label === 'Spots' ? 'native' : ''} `)}
-              </div>
-              <div class="fs-fine mt-auto pt8">
-                {entry.name}
-              </div>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    {/snippet}
-
-    {@render section('Icons', filteredIcons)}
-    {@render section('Spots', filteredSpots)}
-  </div>
-
-  <aside class="ws3 ps-sticky md:ps-fixed z-nav bg-white t0 r0 overflow-y-scroll fl-shrink0 bl bc-black-200 h-screen {!(selected && selectedVariant) ? 'md:d-none' : ''} ">
-    {#if selected && selectedVariant}
-      <div class="d-flex fd-column bb bc-black-200 hs3">
-        <div class="d-flex jc-space-between px12">
-          <button onclick={() => selected = null} type="button" title="Close inspector" class="d-none md:d-block px4 s-btn s-btn__sm s-btn__clear s-btn__icon">
-            <Icon src={IconCross} />
+<div class="fl-grow1 p24 wmn0">
+  <TextInput
+    id="icon-search"
+    label="Search icons and spots"
+    hideLabel
+    type="search"
+    placeholder="Search icons and spots…"
+    bind:value={search}
+  />
+
+  {#snippet section(label, entries)}
+    {#if entries.length > 0}
+      <h2 class="fs-title fw-bold mt32 mb12">
+        {label} <span class="s-badge ml4">{entries.length}</span>
+      </h2>
+
+      <div class="icons-grid">
+        {#each entries as entry (entry.name)}
+          {@const def = getDefaultVariant(entry)}
+          <button
+            class="c-pointer h:bg-black-100 s-btn s-btn__unset p12 d-flex fd-column h100 {selected?.name === entry.name ? 'bg-blue-100' : ''}"
+            onclick={() => selectEntry(entry)}
+          >
+            <div class="d-flex ai-center jc-center my-auto h100">
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+              {@html def.svg.replace('class="', `class="w100 h-auto wmx100 ${label === 'Spots' ? 'native' : ''} `)}
+            </div>
+            <div class="fs-fine mt-auto pt8">
+              {entry.name}
+            </div>
           </button>
-
-          <h3 class="fs-title fw-bold lh-sm mb0 p16 ta-center fl1 md:ta-left">{selected.name}</h3>
-        </div>
-
-        <div class="h100 d-flex bg-white d:bg-black">
-          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          {@html selectedVariant.svg.replace('class="', 'class="native m-auto ')}
-        </div>
+        {/each}
       </div>
+    {/if}
+  {/snippet}
 
-      <div class="d-flex jc-space-between ai-center bg-black-100 bb bc-black-200 py6 px16">
-        {exportName}
+  {@render section('Icons', filteredIcons)}
+  {@render section('Spots', filteredSpots)}
+</div>
 
-        <button type="button" title="Copy name" data-copy-id="name" class="px4 ml-auto s-btn s-btn__sm s-btn__clear s-btn__icon" use:copyToClipboard={exportName}>
-          {#if copied === 'name'}
-            <Icon src={IconCheckFillCircle} class="fc-green-400" />
-          {:else}
-            <Icon src={IconStackCards} />
-          {/if}
+<aside class="ws3 ps-sticky md:ps-fixed z-nav bg-white t0 r0 overflow-y-scroll fl-shrink0 bl bc-black-200 h-screen {!(selected && selectedVariant) ? 'd-none' : ''} ">
+  {#if selected && selectedVariant}
+    <div class="d-flex fd-column bb bc-black-200 hs3">
+      <div class="d-flex jc-space-between px12">
+        <button onclick={() => selected = null} type="button" title="Close inspector" class="d-none md:d-block px4 s-btn s-btn__sm s-btn__clear s-btn__icon">
+          <Icon src={IconCross} />
         </button>
 
-        <Button title="Open in Figma" size="sm" weight="clear" icon href={selectedVariant.figmaUrl} class="flex--item px4">
-          <Icon src={IconServiceFigma} class="native" />
-        </Button>
+        <h3 class="fs-title fw-bold lh-sm mb0 p16 ta-center fl1 md:ta-left">{selected.name}</h3>
       </div>
 
-      {#each variants as variant (variant.key)}
-        <div class="py16 px16 bb bc-black-200">
-          <p class="section-label tt-uppercase fw-semibold fc-black-400 mb8 fl1">{variant.key}</p>
-          <div class="d-flex g4 fw-wrap">
-            {#each variant.values as val (val)}
-              {@const isActive = selectedProps[variant.key] === val}
-              {@const compatible = isCompatible(variant.key, val)}
-
-              <button
-                type="button"
-                disabled={!compatible}
-                class="s-btn s-btn__unset py2 px4 {isActive ? 'bg-blue-200 fc-blue-600' : compatible && 'c-pointer h:bg-black-200'} {!compatible ? 'c-not-allowed fc-black-300 bg-black-100' : ''}"
-                onclick={() => setDimension(variant.key, val)}
-              >{val}</button>
-            {/each}
-          </div>
-        </div>
-      {/each}
-
-      <div class="mb16">
-        <p class="section-label tt-uppercase fw-semibold fc-black-400 mb8 pt16 px16">Usage</p>
-
-        <Navigation label="Base">
-          {#each ["Svelte", ".NET", "SVG"] as label (label)}
-            <NavigationItem
-              text={label}
-              selected={activeCodeTab === label}
-              onclick={() => activeCodeTab = label}
-            />
+      <div class="h100 d-flex bg-white d:bg-black">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html selectedVariant.svg.replace('class="', 'class="native m-auto ')}
+      </div>
+    </div>
+
+    <div class="d-flex jc-space-between ai-center bg-black-100 bb bc-black-200 py6 px16">
+      {exportName}
+
+      <button type="button" title="Copy name" data-copy-id="name" class="px4 ml-auto s-btn s-btn__sm s-btn__clear s-btn__icon" use:copyToClipboard={exportName}>
+        {#if copied === 'name'}
+          <Icon src={IconCheckFillCircle} class="fc-green-400" />
+        {:else}
+          <Icon src={IconStackCards} />
+        {/if}
+      </button>
+
+      <Button title="Open in Figma" size="sm" weight="clear" icon href={selectedVariant.figmaUrl} class="px4">
+        <Icon src={IconServiceFigma} class="native" />
+      </Button>
+    </div>
+
+    {#each variants as variant (variant.key)}
+      <div class="py16 px16 bb bc-black-200">
+        <p class="section-label tt-uppercase fw-semibold fc-black-400 mb8 fl1">{variant.key}</p>
+        <div class="d-flex g4 fw-wrap">
+          {#each variant.values as val (val)}
+            {@const isActive = selectedProps[variant.key] === val}
+            {@const compatible = isCompatible(variant.key, val)}
+
+            <button
+              type="button"
+              disabled={!compatible}
+              class="s-btn s-btn__unset py2 px4 {isActive ? 'bg-blue-200 fc-blue-600' : compatible && 'c-pointer h:bg-black-200'} {!compatible ? 'c-not-allowed fc-black-300 bg-black-100' : ''}"
+              onclick={() => setDimension(variant.key, val)}
+            >{val}</button>
           {/each}
-        </Navigation>
+        </div>
+      </div>
+    {/each}
 
-        {#if activeCodeTab === 'Svelte'}
-          <p class="m16 fs-caption">If you are working in a Svelte project, you can use the <code>Icon</code> component to render the asset as an <code>svg</code> element with the appropriate classes and attributes (<a href="https://svelte.stackoverflow.design/?path=/docs/components-icon--docs" class="s-link">docs</a>).</p>
+    <div class="mb16">
+      <p class="section-label tt-uppercase fw-semibold fc-black-400 mb8 pt16 px16">Usage</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            import &#123; Icon &#125; from '@stackoverflow/stacks-svelte';
-          </code>
+      <Navigation label="Base">
+        {#each ["Svelte", ".NET", "SVG"] as label (label)}
+          <NavigationItem
+            text={label}
+            selected={activeCodeTab === label}
+            onclick={() => activeCodeTab = label}
+          />
+        {/each}
+      </Navigation>
 
-          <p class="m16 fs-caption">Import this asset</p>
+      {#if activeCodeTab === 'Svelte'}
+        <p class="m16 fs-caption">If you are working in a Svelte project, you can use the <code>Icon</code> component to render the asset as an <code>svg</code> element with the appropriate classes and attributes (<a href="https://svelte.stackoverflow.design/?path=/docs/components-icon--docs" class="s-link">docs</a>).</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            import &#123; {selected?.isSpot ? 'Spot' : 'Icon'}{exportName} &#125; from "@stackoverflow/stacks-icons/{selected?.isSpot ? 'spots' : 'icons'}";
-          </code>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          import &#123; Icon &#125; from '@stackoverflow/stacks-svelte';
+        </code>
 
-          <p class="m16 fs-caption">Render this asset</p>
+        <p class="m16 fs-caption">Import this asset</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            &lt;Icon src=&#123;{selected?.isSpot ? 'Spot' : 'Icon'}{exportName}&#125; /&gt;
-          </code>
-        {/if}
-        {#if activeCodeTab === '.NET'}
-          <p class="m16 fs-caption">If you’re working in a .NET project, we have a helper that can be called with <code>@Svg.</code> and the icon name. By default, any icon will inherit the text color of the parent element.</p>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          import &#123; {selected?.isSpot ? 'Spot' : 'Icon'}{exportName} &#125; from "@stackoverflow/stacks-icons/{selected?.isSpot ? 'spots' : 'icons'}";
+        </code>
 
-          <p class="m16 fs-caption">Add the helper</p>
+        <p class="m16 fs-caption">Render this asset</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            @inject IModuleSvg Svg
-          </code>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          &lt;Icon src=&#123;{selected?.isSpot ? 'Spot' : 'Icon'}{exportName}&#125; /&gt;
+        </code>
+      {/if}
+      {#if activeCodeTab === '.NET'}
+        <p class="m16 fs-caption">If you’re working in a .NET project, we have a helper that can be called with <code>@Svg.</code> and the icon name. By default, any icon will inherit the text color of the parent element.</p>
 
-          <p class="m16 fs-caption">Render the asset</p>
+        <p class="m16 fs-caption">Add the helper</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            @Svg.{selectedVariant.key}
-          </code>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          @inject IModuleSvg Svg
+        </code>
 
-          <p class="m16 fs-caption">Add CSS classes as a string:</p>
+        <p class="m16 fs-caption">Render the asset</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With("native fc-black-300")
-          </code>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          @Svg.{selectedVariant.key}
+        </code>
 
-          <p class="m16 fs-caption">You can also add a <code>title</code> prop, which also removes <code>aria-hidden</code>.</p>
+        <p class="m16 fs-caption">Add CSS classes as a string:</p>
 
-          <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
-            @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With(cssClass: "fc-danger", title: "foo")
-          </code>
-        {/if}
-        {#if activeCodeTab === 'SVG'}
-          <button type="button" title="Copy SVG" data-copy-id="svg" class="m12 mb0 s-btn s-btn__sm s-btn__clear s-btn__icon" use:copyToClipboard={selectedVariant.svg}>
-            {#if copied === 'svg'}
-              <Icon src={IconCheckFillCircle} class="fc-green-400" /> Copied SVG!
-            {:else}
-              <Icon src={IconStackCards} /> Copy SVG
-            {/if}
-          </button>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With("native fc-black-300")
+        </code>
 
-          <TextArea size="sm" class="m12 hs2 ff-mono" id="asset-svg-code" label="SVG" hideLabel readonly value={selectedVariant.svg} />
-        {/if}
-      </div>
+        <p class="m16 fs-caption">You can also add a <code>title</code> prop, which also removes <code>aria-hidden</code>.</p>
 
-      <div class="fs-caption px16 pb16 fc-black-400">
-        <b>Asset last updated:</b><br/>
-        <time datetime={selectedVariant.updatedAt}>
-          {new Date(selectedVariant.updatedAt).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          })}
-        </time>
-      </div>
-    {/if}
-  </aside>
-</div>
+        <code class="d-block bg-black-100 ow-anywhere py12 px16 fs-caption">
+          @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With(cssClass: "fc-danger", title: "foo")
+        </code>
+      {/if}
+      {#if activeCodeTab === 'SVG'}
+        <button type="button" title="Copy SVG" data-copy-id="svg" class="m12 mb0 s-btn s-btn__sm s-btn__clear s-btn__icon" use:copyToClipboard={selectedVariant.svg}>
+          {#if copied === 'svg'}
+            <Icon src={IconCheckFillCircle} class="fc-green-400" /> Copied SVG!
+          {:else}
+            <Icon src={IconStackCards} /> Copy SVG
+          {/if}
+        </button>
+
+        <TextArea size="sm" class="m12 hs2 ff-mono" id="asset-svg-code" label="SVG" hideLabel readonly value={selectedVariant.svg} />
+      {/if}
+    </div>
+
+    <div class="fs-caption px16 pb16 fc-black-400">
+      <b>Asset last updated:</b><br/>
+      <time datetime={selectedVariant.updatedAt}>
+        {new Date(selectedVariant.updatedAt).toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+        })}
+      </time>
+    </div>
+  {/if}
+</aside>
 
 <style>
   .icons-grid {
diff --git a/packages/stacks-docs-next/src/routes/resources/icons/+page.ts b/packages/stacks-docs-next/src/routes/resources/icons/+page.ts
index b9f4e2a877..275326bb3f 100644
--- a/packages/stacks-docs-next/src/routes/resources/icons/+page.ts
+++ b/packages/stacks-docs-next/src/routes/resources/icons/+page.ts
@@ -1,3 +1,3 @@
 export function load() {
-  return { hideFooter: true };
+  return { hideFooter: true, fullWidth: true, hideToc: true };
 }
diff --git a/packages/stacks-docs-next/src/structure.yaml b/packages/stacks-docs-next/src/structure.yaml
index 791207521d..7d72bd3eff 100644
--- a/packages/stacks-docs-next/src/structure.yaml
+++ b/packages/stacks-docs-next/src/structure.yaml
@@ -69,19 +69,15 @@ navigation:
             items:
                 - title: "Using Stacks"
                   slug: "using-stacks"
-                  legacy: product/develop/using-stacks
 
                 - title: "Building Stacks"
                   slug: "building"
-                  legacy: product/develop/building
 
                 - title: "Conditional classes"
                   slug: "conditional-classes"
-                  legacy: product/develop/conditional-classes
 
                 - title: "JavaScript"
                   slug: "javascript"
-                  legacy: product/develop/javascript
 
           - title: "Accessibility"
             slug: "accessibility"
@@ -99,19 +95,15 @@ navigation:
             items:
                 - title: "Color fundamentals"
                   slug: "color-fundamentals"
-                  legacy: product/foundation/color-fundamentals
 
                 - title: "Color palette"
                   slug: "colors"
-                  legacy: product/foundation/colors
 
                 - title: "Theming"
                   slug: "theming"
-                  legacy: product/foundation/theming
 
                 - title: "Typography"
                   slug: "typography"
-                  legacy: product/foundation/typography
 
           - title: "Base"
             slug: "base"
@@ -119,115 +111,87 @@ navigation:
             items:
                 - title: "Backgrounds"
                   slug: "backgrounds"
-                  legacy: product/base/backgrounds
 
                 - title: "Borders"
                   slug: "borders"
-                  legacy: product/base/borders
 
                 - title: "Border radius"
                   slug: "border-radius"
-                  legacy: product/base/border-radius
 
                 - title: "Box shadow"
                   slug: "box-shadow"
-                  legacy: product/base/box-shadow
 
                 - title: "Box sizing"
                   slug: "box-sizing"
-                  legacy: product/base/box-sizing
 
                 - title: "Current color"
                   slug: "current-color"
-                  legacy: product/base/current-color
 
                 - title: "Cursors"
                   slug: "cursors"
-                  legacy: product/base/cursors
 
                 - title: "Display"
                   slug: "display"
-                  legacy: product/base/display
 
                 - title: "Flex"
                   slug: "flex"
-                  legacy: product/base/flex
 
                 - title: "Floats"
                   slug: "floats"
-                  legacy: product/base/floats
 
                 - title: "Gap"
                   slug: "gap"
-                  legacy: product/base/gap
 
                 - title: "Grid"
                   slug: "grid"
-                  legacy: product/base/grid
 
                 - title: "Height"
                   slug: "height"
-                  legacy: product/base/height
 
                 - title: "Interactivity"
                   slug: "interactivity"
-                  legacy: product/base/interactivity
 
                 - title: "Lists"
                   slug: "lists"
-                  legacy: product/base/lists
 
                 - title: "Margin"
                   slug: "margin"
-                  legacy: product/base/margin
 
                 - title: "Object fit"
                   slug: "object-fit"
-                  legacy: product/base/object-fit
 
                 - title: "Opacity"
                   slug: "opacity"
-                  legacy: product/base/opacity
 
                 - title: "Outline"
                   slug: "outline"
-                  legacy: product/base/outline
 
                 - title: "Overflow"
                   slug: "overflow"
-                  legacy: product/base/overflow
 
                 - title: "Padding"
                   slug: "padding"
-                  legacy: product/base/padding
 
                 - title: "Positioning"
                   slug: "position"
-                  legacy: product/base/position
 
                 - title: "Transitions"
                   slug: "transitions"
-                  legacy: product/base/transitions
 
                 - title: "Truncation"
                   slug: "truncation"
-                  legacy: product/base/truncation
 
                 - title: "Vertical alignment"
                   slug: "vertical-alignment"
-                  legacy: product/base/vertical-alignment
 
                 - title: "Visibility"
                   slug: "visibility"
-                  legacy: product/base/visibility
 
                 - title: "Width"
                   slug: "width"
-                  legacy: product/base/width
 
                 - title: "Z-index"
                   slug: "z-index"
-                  legacy: product/base/z-index
 
           - title: "Forms"
             slug: "forms"
@@ -235,27 +199,21 @@ navigation:
             items:
                 - title: "Checkbox"
                   slug: "checkbox"
-                  legacy: product/components/checkbox
 
                 - title: "Inputs"
                   slug: "inputs"
-                  legacy: product/components/inputs
 
                 - title: "Labels"
                   slug: "labels"
-                  legacy: product/components/labels
 
                 - title: "Radio"
                   slug: "radio"
-                  legacy: product/components/radio
 
                 - title: "Select"
                   slug: "select"
-                  legacy: product/components/select
 
                 - title: "Textarea"
                   slug: "textarea"
-                  legacy: product/components/textarea
 
           - title: "Components"
             slug: "components"
@@ -263,103 +221,105 @@ navigation:
             items:
                 - title: "Activity indicator"
                   slug: "activity-indicator"
-                  legacy: product/components/activity-indicator
 
                 - title: "Avatars"
                   slug: "avatars"
-                  legacy: product/components/avatars
 
                 - title: "Badges"
                   slug: "badges"
-                  legacy: product/components/badges
 
                 - title: "Banners"
                   slug: "banners"
-                  legacy: product/components/banners
 
                 - title: "Bling"
                   slug: "bling"
-                  legacy: product/components/bling
+
+                - title: "Breadcrumbs"
+                  slug: "breadcrumbs"
+
+                - title: "Button Groups"
+                  slug: "button-groups"
 
                 - title: "Buttons"
                   slug: "buttons"
-                  legacy: product/components/buttons
+
+                - title: "Cards"
+                  slug: "cards"
 
                 - title: "Code blocks"
                   slug: "code-blocks"
-                  legacy: product/components/code-blocks
 
                 - title: "Editor"
                   slug: "editor"
-                  legacy: product/components/editor
 
                 - title: "Empty states"
                   slug: "empty-states"
-                  legacy: product/components/empty-states
+
+                - title: "Expandable"
+                  slug: "expandable"
+
+                - title: "Link Previews"
+                  slug: "link-previews"
 
                 - title: "Links"
                   slug: "links"
-                  legacy: product/components/links
 
                 - title: "Loader"
                   slug: "loader"
-                  legacy: product/components/loader
 
                 - title: "Menus"
                   slug: "menus"
-                  legacy: product/components/menus
 
                 - title: "Modals"
                   slug: "modals"
-                  legacy: product/components/modals
 
                 - title: "Navigation"
                   slug: "navigation"
-                  legacy: product/components/navigation
 
                 - title: "Notices"
                   slug: "notices"
-                  legacy: product/components/notices
+
+                - title: "Page Titles"
+                  slug: "page-titles"
 
                 - title: "Pagination"
                   slug: "pagination"
-                  legacy: product/components/pagination
 
                 - title: "Popovers"
                   slug: "popovers"
-                  legacy: product/components/popovers
 
                 - title: "Post summary"
                   slug: "post-summary"
-                  legacy: product/components/post-summary
+
+                - title: "Progress Bars"
+                  slug: "progress-bars"
 
                 - title: "Prose"
                   slug: "prose"
-                  legacy: product/components/prose
 
                 - title: "Sidebar widgets"
                   slug: "sidebar-widgets"
-                  legacy: product/components/sidebar-widgets
 
                 - title: "Tables"
                   slug: "tables"
-                  legacy: product/components/tables
 
                 - title: "Tags"
                   slug: "tags"
-                  legacy: product/components/tags
 
                 - title: "Toggle switch"
                   slug: "toggle-switch"
-                  legacy: product/components/toggle-switch
+
+                - title: "Topbar"
+                  slug: "topbar"
+
+                - title: "Uploader"
+                  slug: "uploader"
 
                 - title: "User cards"
                   slug: "user-cards"
-                  legacy: product/components/user-cards
 
                 - title: "Vote"
                   slug: "vote"
-                  legacy: product/components/vote
 
     # - title: "Email"
     #   slug: "email"
diff --git a/packages/stacks-docs-next/static/images/avatar-deleted-16.svg b/packages/stacks-docs-next/static/images/avatar-deleted-16.svg
new file mode 100644
index 0000000000..50af19a20b
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/avatar-deleted-16.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H16V16H0V0Z" fill="url(#pattern0_8825_534)"/>
+<defs>
+<pattern id="pattern0_8825_534" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8825_534" transform="scale(0.0138889)"/>
+</pattern>
+<image id="image0_8825_534" width="72" height="72" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKZSURBVHgB7dxBbtpAFAbg92wv6I4jtDfIEWAT0UVbo4rQrBpOEOUEVU8Q9QRxV22gEo66oav6CO0NOALLLIJfPJEtHOTxMyZYIfyflMVocGx+yR4znmf+OQmFVqJPA79LBX5Mph0m/ksWyXZs60v2YbbrFPWJI6PTj/2gcJ/j6RkzX1Ex67Gm+xRbn5B0Twf9iCocq0NQCgEpvOQvyhrJKfTP9kHXo0V8t/rsRlj+k1jOwJjmts0chxYixfssO9ZUZOtwhRa2vtJjBQAA2Cts7pCzhhn+Tk762vD5oo3H06MlUztre/mfDzE/3Dt06YDFzJeMnxrVISAFAlIgIAUCUiAggJ2qPTN0/Nb3HVm2aUuz2e+grL/Xe3dGW3Pns1kYUQ0e1cSyPI8tE/EbCso6k31c0ZaYlhFRvdlQXKQVCEiBgBRe+qDsgXlSMBx8uKiy4auW27+9pa0v0hqH3DfUoOvJzWXyYPEoa5uLdCdrJB1UVRiG5tHJgnYsGX3m1KA0nE7WximmQEAKBKRAQAoEpPBEZJQ1HNn9qPTcyZ18JZe+EwAAwN5js9R21aK5bXnsobj+NfXjOL944fE65IhqTk2+FCJ8zoxf85UhIAUCUiAgBQJSVC5F2ITv++0mJvTzWi1apPPk21krRdhJUcJx732QDJifqUFMTvBndjOiJ4ZTTIGAFAhIUXt1RxmH4iC5KkTUKJ4TwLPDVaueDwWqnjeEgBQISIGAFAhIgYAUnnnRR9ZwsXiBHJGLfEkmAADA/uKqpQjmjQSm6N72j8pmAdaX9z86gFi+DYf9sKgvfW/al8LtlLKJ/PdaZ4Zy2xsmapcimHsDrlkftr68Py/2ShZMCr0mtrwcTi+b6Ng6yu5zUIqwIQSkuAe53NsA2WVtFwAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/packages/stacks-docs-next/static/images/avatar-deleted-24.svg b/packages/stacks-docs-next/static/images/avatar-deleted-24.svg
new file mode 100644
index 0000000000..dbc782c3ca
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/avatar-deleted-24.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H24V24H0V0Z" fill="url(#pattern0_8825_715)"/>
+<defs>
+<pattern id="pattern0_8825_715" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8825_715" transform="scale(0.0138889)"/>
+</pattern>
+<image id="image0_8825_715" width="72" height="72" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKZSURBVHgB7dxBbtpAFAbg92wv6I4jtDfIEWAT0UVbo4rQrBpOEOUEVU8Q9QRxV22gEo66oav6CO0NOALLLIJfPJEtHOTxMyZYIfyflMVocGx+yR4znmf+OQmFVqJPA79LBX5Mph0m/ksWyXZs60v2YbbrFPWJI6PTj/2gcJ/j6RkzX1Ex67Gm+xRbn5B0Twf9iCocq0NQCgEpvOQvyhrJKfTP9kHXo0V8t/rsRlj+k1jOwJjmts0chxYixfssO9ZUZOtwhRa2vtJjBQAA2Cts7pCzhhn+Tk762vD5oo3H06MlUztre/mfDzE/3Dt06YDFzJeMnxrVISAFAlIgIAUCUiAggJ2qPTN0/Nb3HVm2aUuz2e+grL/Xe3dGW3Pns1kYUQ0e1cSyPI8tE/EbCso6k31c0ZaYlhFRvdlQXKQVCEiBgBRe+qDsgXlSMBx8uKiy4auW27+9pa0v0hqH3DfUoOvJzWXyYPEoa5uLdCdrJB1UVRiG5tHJgnYsGX3m1KA0nE7WximmQEAKBKRAQAoEpPBEZJQ1HNn9qPTcyZ18JZe+EwAAwN5js9R21aK5bXnsobj+NfXjOL944fE65IhqTk2+FCJ8zoxf85UhIAUCUiAgBQJSVC5F2ITv++0mJvTzWi1apPPk21krRdhJUcJx732QDJifqUFMTvBndjOiJ4ZTTIGAFAhIUXt1RxmH4iC5KkTUKJ4TwLPDVaueDwWqnjeEgBQISIGAFAhIgYAUnnnRR9ZwsXiBHJGLfEkmAADA/uKqpQjmjQSm6N72j8pmAdaX9z86gFi+DYf9sKgvfW/al8LtlLKJ/PdaZ4Zy2xsmapcimHsDrlkftr68Py/2ShZMCr0mtrwcTi+b6Ng6yu5zUIqwIQSkuAe53NsA2WVtFwAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/packages/stacks-docs-next/static/images/avatar-disgusted-16.svg b/packages/stacks-docs-next/static/images/avatar-disgusted-16.svg
new file mode 100644
index 0000000000..0a970dde6b
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/avatar-disgusted-16.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16.0004" fill="#FF5E00"/>
+<rect width="3.61345" height="4.00761" transform="translate(3.59778 4.12427)" fill="white"/>
+<path d="M6.326 4.12427H4.43262V5.91318H6.326V4.12427Z" fill="#31070F"/>
+<rect width="3.61345" height="4.00761" transform="translate(8.90759 4.12427)" fill="#EEEEEE"/>
+<path d="M11.6358 4.12427H9.74243V5.91318H11.6358V4.12427Z" fill="#31070F"/>
+<path d="M10.4101 11.3256L5.95195 12.4458L5.70874 11.478L10.1669 10.3579L10.4101 11.3256Z" fill="#31070F"/>
+</svg>
diff --git a/packages/stacks-docs-next/static/images/avatar-disgusted-24.svg b/packages/stacks-docs-next/static/images/avatar-disgusted-24.svg
new file mode 100644
index 0000000000..14c079b146
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/avatar-disgusted-24.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24.0006" fill="#FF5E00"/>
+<rect width="5.42018" height="6.01141" transform="translate(5.39673 6.18628)" fill="#EEEEEE"/>
+<path d="M9.489 6.18628H6.64893V8.86966H9.489V6.18628Z" fill="#31070F"/>
+<rect width="5.42018" height="6.01141" transform="translate(13.3613 6.18628)" fill="#EEEEEE"/>
+<path d="M17.4536 6.18628H14.6135V8.86966H17.4536V6.18628Z" fill="#31070F"/>
+<path d="M15.6151 16.9882L8.92792 18.6686L8.56311 17.2169L15.2503 15.5367L15.6151 16.9882Z" fill="#31070F"/>
+</svg>
diff --git a/packages/stacks-docs-next/static/images/avatar-disgusted-48.svg b/packages/stacks-docs-next/static/images/avatar-disgusted-48.svg
new file mode 100644
index 0000000000..071bed4aa0
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/avatar-disgusted-48.svg
@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48.0012" fill="#FF5E00"/>
+<rect width="10.8404" height="12.0228" transform="translate(10.7936 12.3724)" fill="#EEEEEE"/>
+<path d="M18.9781 12.3723H13.298V17.7391H18.9781V12.3723Z" fill="#31070F"/>
+<rect width="10.8404" height="12.0228" transform="translate(26.7227 12.3723)" fill="#EEEEEE"/>
+<path d="M34.9072 12.3722H29.2271V17.7389H34.9072V12.3722Z" fill="#31070F"/>
+<path d="M31.2304 33.9766L17.856 37.3373L17.1263 34.4339L30.5008 31.0736L31.2304 33.9766Z" fill="#31070F"/>
+</svg>
diff --git a/packages/stacks-docs-next/static/images/object-fit-small.svg b/packages/stacks-docs-next/static/images/object-fit-small.svg
new file mode 100644
index 0000000000..acc73ad4d9
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/object-fit-small.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60" role="img" aria-labelledby="title desc">
+    <title id="title">Small placeholder landscape</title>
+    <desc id="desc">A neutral small landscape-style placeholder image for object-fit examples.</desc>
+    <rect width="90" height="60" fill="#dff1fb" />
+    <circle cx="71" cy="16" r="7" fill="#f7c55f" />
+    <g fill="#ffffff" opacity="0.9">
+        <ellipse cx="18" cy="16" rx="7" ry="4" />
+        <ellipse cx="24" cy="14" rx="5" ry="3" />
+        <ellipse cx="30" cy="17" rx="5" ry="3" />
+    </g>
+    <path d="M0 45 15 30 29 39 46 24 63 37 77 31 90 42V60H0Z" fill="#69a77f" />
+    <path d="M0 48 17 37 32 46 50 33 68 45 82 39 90 43V60H0Z" fill="#4d8a63" />
+    <rect y="49" width="90" height="11" fill="#7d5f49" />
+    <rect x="11" y="38" width="12" height="11" rx="1" fill="#ffffff" />
+    <rect x="15" y="42" width="5" height="7" fill="#d6e5f3" />
+    <path d="M9 39 17 33 25 39Z" fill="#f48225" />
+</svg>
diff --git a/packages/stacks-docs-next/static/images/object-fit-wide.svg b/packages/stacks-docs-next/static/images/object-fit-wide.svg
new file mode 100644
index 0000000000..813cfdb781
--- /dev/null
+++ b/packages/stacks-docs-next/static/images/object-fit-wide.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 240" role="img" aria-labelledby="title desc">
+    <title id="title">Wide placeholder landscape</title>
+    <desc id="desc">A neutral landscape-style placeholder image for object-fit examples.</desc>
+    <rect width="400" height="240" fill="#dff1fb" />
+    <circle cx="316" cy="64" r="26" fill="#f7c55f" />
+    <g fill="#ffffff" opacity="0.9">
+        <ellipse cx="82" cy="64" rx="24" ry="12" />
+        <ellipse cx="102" cy="58" rx="16" ry="10" />
+        <ellipse cx="118" cy="66" rx="18" ry="11" />
+        <ellipse cx="250" cy="82" rx="22" ry="11" />
+        <ellipse cx="269" cy="77" rx="15" ry="9" />
+        <ellipse cx="285" cy="84" rx="17" ry="10" />
+    </g>
+    <path d="M0 180 72 116 132 162 204 94 280 154 340 126 400 170V240H0Z" fill="#69a77f" />
+    <path d="M0 193 78 146 142 186 229 128 300 184 365 159 400 178V240H0Z" fill="#4d8a63" />
+    <rect y="196" width="400" height="44" fill="#7d5f49" />
+    <rect x="44" y="152" width="54" height="44" rx="4" fill="#ffffff" />
+    <rect x="58" y="166" width="26" height="30" fill="#d6e5f3" />
+    <path d="M36 156 71 132 106 156Z" fill="#f48225" />
+    <path d="M208 140c18-18 40-18 58 0s40 18 58 0v12c-18 18-40 18-58 0s-40-18-58 0Z" fill="#d0e7f4" opacity="0.65" />
+</svg>
diff --git a/packages/stacks-docs-next/static/images/team-avatar.png b/packages/stacks-docs-next/static/images/team-avatar.png
new file mode 100644
index 0000000000..55e774a8e0
Binary files /dev/null and b/packages/stacks-docs-next/static/images/team-avatar.png differ
diff --git a/packages/stacks-docs-next/static/legacy-docs.js b/packages/stacks-docs-next/static/legacy-docs.js
deleted file mode 100644
index 3d1107f640..0000000000
--- a/packages/stacks-docs-next/static/legacy-docs.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see docs.js.LICENSE.txt */
-(()=>{var e={194(e,t,n){"use strict";var r="aaAttrs",i=n(3615),s=n(990),o=n(2802),a=n(4619),c=n(6558),u=n(2206),l=n(9596);function h(e){var t,n;if((e=e||{}).input||i.error("missing input"),this.isActivated=!1,this.debug=!!e.debug,this.autoselect=!!e.autoselect,this.autoselectOnBlur=!!e.autoselectOnBlur,this.openOnFocus=!!e.openOnFocus,this.minLength=i.isNumber(e.minLength)?e.minLength:1,this.autoWidth=void 0===e.autoWidth||!!e.autoWidth,this.clearOnSelected=!!e.clearOnSelected,this.tabAutocomplete=void 0===e.tabAutocomplete||!!e.tabAutocomplete,e.hint=!!e.hint,e.hint&&e.appendTo)throw new Error("[autocomplete.js] hint and appendTo options can't be used at the same time");this.css=e.css=i.mixin({},l,e.appendTo?l.appendTo:{}),this.cssClasses=e.cssClasses=i.mixin({},l.defaultClasses,e.cssClasses||{}),this.cssClasses.prefix=e.cssClasses.formattedPrefix=i.formatPrefix(this.cssClasses.prefix,this.cssClasses.noPrefix),this.listboxId=e.listboxId=[this.cssClasses.root,"listbox",i.getUniqueId()].join("-");var a=function(e){var t,n,o,a;t=s.element(e.input),n=s.element(u.wrapper.replace("%ROOT%",e.cssClasses.root)).css(e.css.wrapper),e.appendTo||"block"!==t.css("display")||"table"!==t.parent().css("display")||n.css("display","table-cell");var c,l=u.dropdown.replace("%PREFIX%",e.cssClasses.prefix).replace("%DROPDOWN_MENU%",e.cssClasses.dropdownMenu);o=s.element(l).css(e.css.dropdown).attr({role:"listbox",id:e.listboxId}),e.templates&&e.templates.dropdownMenu&&o.html(i.templatify(e.templates.dropdownMenu)()),(a=t.clone().css(e.css.hint).css({backgroundAttachment:(c=t).css("background-attachment"),backgroundClip:c.css("background-clip"),backgroundColor:c.css("background-color"),backgroundImage:c.css("background-image"),backgroundOrigin:c.css("background-origin"),backgroundPosition:c.css("background-position"),backgroundRepeat:c.css("background-repeat"),backgroundSize:c.css("background-size")})).val("").addClass(i.className(e.cssClasses.prefix,e.cssClasses.hint,!0)).removeAttr("id name placeholder required").prop("readonly",!0).attr({"aria-hidden":"true",autocomplete:"off",spellcheck:"false",tabindex:-1}),a.removeData&&a.removeData(),t.data(r,{"aria-autocomplete":t.attr("aria-autocomplete"),"aria-expanded":t.attr("aria-expanded"),"aria-owns":t.attr("aria-owns"),autocomplete:t.attr("autocomplete"),dir:t.attr("dir"),role:t.attr("role"),spellcheck:t.attr("spellcheck"),style:t.attr("style"),type:t.attr("type")}),t.addClass(i.className(e.cssClasses.prefix,e.cssClasses.input,!0)).attr({autocomplete:"off",spellcheck:!1,role:"combobox","aria-autocomplete":e.datasets&&e.datasets[0]&&e.datasets[0].displayKey?"both":"list","aria-expanded":"false","aria-label":e.ariaLabel,"aria-owns":e.listboxId}).css(e.hint?e.css.input:e.css.inputWithNoHint);try{t.attr("dir")||t.attr("dir","auto")}catch(e){}return(n=e.appendTo?n.appendTo(s.element(e.appendTo).eq(0)).eq(0):t.wrap(n).parent()).prepend(e.hint?a:null).append(o),{wrapper:n,input:t,hint:a,menu:o}}(e);this.$node=a.wrapper;var c=this.$input=a.input;t=a.menu,n=a.hint,e.dropdownMenuContainer&&s.element(e.dropdownMenuContainer).css("position","relative").append(t.css("top","0")),c.on("blur.aa",function(e){var n=document.activeElement;i.isMsie()&&(t[0]===n||t[0].contains(n))&&(e.preventDefault(),e.stopImmediatePropagation(),i.defer(function(){c.focus()}))}),t.on("mousedown.aa",function(e){e.preventDefault()}),this.eventBus=e.eventBus||new o({el:c}),this.dropdown=new h.Dropdown({appendTo:e.appendTo,wrapper:this.$node,menu:t,datasets:e.datasets,templates:e.templates,cssClasses:e.cssClasses,minLength:this.minLength}).onSync("suggestionClicked",this._onSuggestionClicked,this).onSync("cursorMoved",this._onCursorMoved,this).onSync("cursorRemoved",this._onCursorRemoved,this).onSync("opened",this._onOpened,this).onSync("closed",this._onClosed,this).onSync("shown",this._onShown,this).onSync("empty",this._onEmpty,this).onSync("redrawn",this._onRedrawn,this).onAsync("datasetRendered",this._onDatasetRendered,this),this.input=new h.Input({input:c,hint:n}).onSync("focused",this._onFocused,this).onSync("blurred",this._onBlurred,this).onSync("enterKeyed",this._onEnterKeyed,this).onSync("tabKeyed",this._onTabKeyed,this).onSync("escKeyed",this._onEscKeyed,this).onSync("upKeyed",this._onUpKeyed,this).onSync("downKeyed",this._onDownKeyed,this).onSync("leftKeyed",this._onLeftKeyed,this).onSync("rightKeyed",this._onRightKeyed,this).onSync("queryChanged",this._onQueryChanged,this).onSync("whitespaceChanged",this._onWhitespaceChanged,this),this._bindKeyboardShortcuts(e),this._setLanguageDirection()}i.mixin(h.prototype,{_bindKeyboardShortcuts:function(e){if(e.keyboardShortcuts){var t=this.$input,n=[];i.each(e.keyboardShortcuts,function(e){"string"==typeof e&&(e=e.toUpperCase().charCodeAt(0)),n.push(e)}),s.element(document).keydown(function(e){var r=e.target||e.srcElement,i=r.tagName;if(!r.isContentEditable&&"INPUT"!==i&&"SELECT"!==i&&"TEXTAREA"!==i){var s=e.which||e.keyCode;-1!==n.indexOf(s)&&(t.focus(),e.stopPropagation(),e.preventDefault())}})}},_onSuggestionClicked:function(e,t){var n;(n=this.dropdown.getDatumForSuggestion(t))&&this._select(n,{selectionMethod:"click"})},_onCursorMoved:function(e,t){var n=this.dropdown.getDatumForCursor(),r=this.dropdown.getCurrentCursor().attr("id");this.input.setActiveDescendant(r),n&&(t&&this.input.setInputValue(n.value,!0),this.eventBus.trigger("cursorchanged",n.raw,n.datasetName))},_onCursorRemoved:function(){this.input.resetInputValue(),this._updateHint(),this.eventBus.trigger("cursorremoved")},_onDatasetRendered:function(){this._updateHint(),this.eventBus.trigger("updated")},_onOpened:function(){this._updateHint(),this.input.expand(),this.eventBus.trigger("opened")},_onEmpty:function(){this.eventBus.trigger("empty")},_onRedrawn:function(){this.$node.css("top","0px"),this.$node.css("left","0px");var e=this.$input[0].getBoundingClientRect();this.autoWidth&&this.$node.css("width",e.width+"px");var t=this.$node[0].getBoundingClientRect(),n=e.bottom-t.top;this.$node.css("top",n+"px");var r=e.left-t.left;this.$node.css("left",r+"px"),this.eventBus.trigger("redrawn")},_onShown:function(){this.eventBus.trigger("shown"),this.autoselect&&this.dropdown.cursorTopSuggestion()},_onClosed:function(){this.input.clearHint(),this.input.removeActiveDescendant(),this.input.collapse(),this.eventBus.trigger("closed")},_onFocused:function(){if(this.isActivated=!0,this.openOnFocus){var e=this.input.getQuery();e.length>=this.minLength?this.dropdown.update(e):this.dropdown.empty(),this.dropdown.open()}},_onBlurred:function(){var e,t;e=this.dropdown.getDatumForCursor(),t=this.dropdown.getDatumForTopSuggestion();var n={selectionMethod:"blur"};this.debug||(this.autoselectOnBlur&&e?this._select(e,n):this.autoselectOnBlur&&t?this._select(t,n):(this.isActivated=!1,this.dropdown.empty(),this.dropdown.close()))},_onEnterKeyed:function(e,t){var n,r;n=this.dropdown.getDatumForCursor(),r=this.dropdown.getDatumForTopSuggestion();var i={selectionMethod:"enterKey"};n?(this._select(n,i),t.preventDefault()):this.autoselect&&r&&(this._select(r,i),t.preventDefault())},_onTabKeyed:function(e,t){var n;this.tabAutocomplete?(n=this.dropdown.getDatumForCursor())?(this._select(n,{selectionMethod:"tabKey"}),t.preventDefault()):this._autocomplete(!0):this.dropdown.close()},_onEscKeyed:function(){this.dropdown.close(),this.input.resetInputValue()},_onUpKeyed:function(){var e=this.input.getQuery();this.dropdown.isEmpty&&e.length>=this.minLength?this.dropdown.update(e):this.dropdown.moveCursorUp(),this.dropdown.open()},_onDownKeyed:function(){var e=this.input.getQuery();this.dropdown.isEmpty&&e.length>=this.minLength?this.dropdown.update(e):this.dropdown.moveCursorDown(),this.dropdown.open()},_onLeftKeyed:function(){"rtl"===this.dir&&this._autocomplete()},_onRightKeyed:function(){"ltr"===this.dir&&this._autocomplete()},_onQueryChanged:function(e,t){this.input.clearHintIfInvalid(),t.length>=this.minLength?this.dropdown.update(t):this.dropdown.empty(),this.dropdown.open(),this._setLanguageDirection()},_onWhitespaceChanged:function(){this._updateHint(),this.dropdown.open()},_setLanguageDirection:function(){var e=this.input.getLanguageDirection();this.dir!==e&&(this.dir=e,this.$node.css("direction",e),this.dropdown.setLanguageDirection(e))},_updateHint:function(){var e,t,n,r,s;(e=this.dropdown.getDatumForTopSuggestion())&&this.dropdown.isVisible()&&!this.input.hasOverflow()?(t=this.input.getInputValue(),n=a.normalizeQuery(t),r=i.escapeRegExChars(n),(s=new RegExp("^(?:"+r+")(.+$)","i").exec(e.value))?this.input.setHint(t+s[1]):this.input.clearHint()):this.input.clearHint()},_autocomplete:function(e){var t,n,r,i;t=this.input.getHint(),n=this.input.getQuery(),r=e||this.input.isCursorAtEnd(),t&&n!==t&&r&&((i=this.dropdown.getDatumForTopSuggestion())&&this.input.setInputValue(i.value),this.eventBus.trigger("autocompleted",i.raw,i.datasetName))},_select:function(e,t){void 0!==e.value&&this.input.setQuery(e.value),this.clearOnSelected?this.setVal(""):this.input.setInputValue(e.value,!0),this._setLanguageDirection(),!1===this.eventBus.trigger("selected",e.raw,e.datasetName,t).isDefaultPrevented()&&(this.dropdown.close(),i.defer(i.bind(this.dropdown.empty,this.dropdown)))},open:function(){if(!this.isActivated){var e=this.input.getInputValue();e.length>=this.minLength?this.dropdown.update(e):this.dropdown.empty()}this.dropdown.open()},close:function(){this.dropdown.close()},setVal:function(e){e=i.toStr(e),this.isActivated?this.input.setInputValue(e):(this.input.setQuery(e),this.input.setInputValue(e,!0)),this._setLanguageDirection()},getVal:function(){return this.input.getQuery()},destroy:function(){var e,t,n;this.input.destroy(),this.dropdown.destroy(),e=this.$node,t=this.cssClasses,n=e.find(i.className(t.prefix,t.input)),i.each(n.data(r),function(e,t){void 0===e?n.removeAttr(t):n.attr(t,e)}),n.detach().removeClass(i.className(t.prefix,t.input,!0)).insertAfter(e),n.removeData&&n.removeData(r),e.remove(),this.$node=null},getWrapper:function(){return this.dropdown.$container[0]}}),h.Dropdown=c,h.Input=a,h.sources=n(3275),e.exports=h},200(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=(r=n(951))&&r.__esModule?r:{default:r},o={mergeKeyWithParent:function(e,t){if(void 0===e[t])return e;if("object"!==i(e[t]))return e;var n=s.default.extend({},e,e[t]);return delete n[t],n},groupBy:function(e,t){var n={};return s.default.each(e,function(e,r){if(void 0===r[t])throw new Error("[groupBy]: Object has no key "+t);var i=r[t];"string"==typeof i&&(i=i.toLowerCase()),Object.prototype.hasOwnProperty.call(n,i)||(n[i]=[]),n[i].push(r)}),n},values:function(e){return Object.keys(e).map(function(t){return e[t]})},flatten:function(e){var t=[];return e.forEach(function(e){Array.isArray(e)?e.forEach(function(e){t.push(e)}):t.push(e)}),t},flattenAndFlagFirst:function(e,t){var n=this.values(e).map(function(e){return e.map(function(e,n){return e[t]=0===n,e})});return this.flatten(n)},compact:function(e){var t=[];return e.forEach(function(e){e&&t.push(e)}),t},getHighlightedValue:function(e,t){return e._highlightResult&&e._highlightResult.hierarchy_camel&&e._highlightResult.hierarchy_camel[t]&&e._highlightResult.hierarchy_camel[t].matchLevel&&"none"!==e._highlightResult.hierarchy_camel[t].matchLevel&&e._highlightResult.hierarchy_camel[t].value?e._highlightResult.hierarchy_camel[t].value:e._highlightResult&&e._highlightResult&&e._highlightResult[t]&&e._highlightResult[t].value?e._highlightResult[t].value:e[t]},getSnippetedValue:function(e,t){if(!e._snippetResult||!e._snippetResult[t]||!e._snippetResult[t].value)return e[t];var n=e._snippetResult[t].value;return n[0]!==n[0].toUpperCase()&&(n="…"+n),-1===[".","!","?"].indexOf(n[n.length-1])&&(n+="…"),n},deepClone:function(e){return JSON.parse(JSON.stringify(e))}};t.default=o},235(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=d(n(2133)),o=d(n(7354)),a=d(n(9227)),c=d(n(2674)),u=d(n(200)),l=d(n(6421)),h=d(n(951));function d(e){return e&&e.__esModule?e:{default:e}}var p=function(){function e(t){var n=t.apiKey,i=t.indexName,s=t.inputSelector,u=t.appId,d=void 0===u?"BH4D9OD16A":u,p=t.debug,f=void 0!==p&&p,m=t.algoliaOptions,g=void 0===m?{}:m,v=t.queryDataCallback,y=void 0===v?null:v,b=t.autocompleteOptions,w=void 0===b?{debug:!1,hint:!1,autoselect:!0}:b,x=t.transformData,E=void 0!==x&&x,T=t.queryHook,A=void 0!==T&&T,C=t.handleSelected,O=void 0!==C&&C,S=t.enhancedSearchInput,k=void 0!==S&&S,_=t.layout,N=void 0===_?"collumns":_;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),e.checkArguments({apiKey:n,indexName:i,inputSelector:s,debug:f,algoliaOptions:g,queryDataCallback:y,autocompleteOptions:w,transformData:E,queryHook:A,handleSelected:O,enhancedSearchInput:k,layout:N}),this.apiKey=n,this.appId=d,this.indexName=i,this.input=e.getInputFromSelector(s),this.algoliaOptions=r({hitsPerPage:5},g),this.queryDataCallback=y||null;var D=!(!w||!w.debug)&&w.debug;w.debug=f||D,this.autocompleteOptions=w,this.autocompleteOptions.cssClasses=this.autocompleteOptions.cssClasses||{},this.autocompleteOptions.cssClasses.prefix=this.autocompleteOptions.cssClasses.prefix||"ds";var j=this.input&&"function"==typeof this.input.attr&&this.input.attr("aria-label");this.autocompleteOptions.ariaLabel=this.autocompleteOptions.ariaLabel||j||"search input",this.isSimpleLayout="simple"===N,this.client=(0,o.default)(this.appId,this.apiKey),this.client.addAlgoliaAgent("docsearch.js "+l.default),k&&(this.input=e.injectSearchBox(this.input)),this.autocomplete=(0,a.default)(this.input,w,[{source:this.getAutocompleteSource(E,A),templates:{suggestion:e.getSuggestionTemplate(this.isSimpleLayout),footer:c.default.footer,empty:e.getEmptyTemplate()}}]);var L=O;this.handleSelected=L||this.handleSelected,L&&(0,h.default)(".algolia-autocomplete").on("click",".ds-suggestions a",function(e){e.preventDefault()}),this.autocomplete.on("autocomplete:selected",this.handleSelected.bind(null,this.autocomplete.autocomplete)),this.autocomplete.on("autocomplete:shown",this.handleShown.bind(null,this.input)),k&&e.bindSearchBoxEvent()}return i(e,[{key:"getAutocompleteSource",value:function(t,n){var r=this;return function(i,s){n&&(i=n(i)||i),r.client.search([{indexName:r.indexName,query:i,params:r.algoliaOptions}]).then(function(n){r.queryDataCallback&&"function"==typeof r.queryDataCallback&&r.queryDataCallback(n);var i=n.results[0].hits;t&&(i=t(i)||i),s(e.formatHits(i))})}}},{key:"handleSelected",value:function(e,t,n,r){"click"!==(arguments.length>4&&void 0!==arguments[4]?arguments[4]:{}).selectionMethod&&(e.setVal(""),window.location.assign(n.url))}},{key:"handleShown",value:function(e){var t=e.offset().left+e.width()/2,n=(0,h.default)(document).width()/2;isNaN(n)&&(n=900);var r=t-n>=0?"algolia-autocomplete-right":"algolia-autocomplete-left",i=t-n<0?"algolia-autocomplete-right":"algolia-autocomplete-left",s=(0,h.default)(".algolia-autocomplete");s.hasClass(r)||s.addClass(r),s.hasClass(i)&&s.removeClass(i)}}],[{key:"checkArguments",value:function(t){if(!t.apiKey||!t.indexName)throw new Error("Usage:\n  documentationSearch({\n  apiKey,\n  indexName,\n  inputSelector,\n  [ appId ],\n  [ algoliaOptions.{hitsPerPage} ]\n  [ autocompleteOptions.{hint,debug} ]\n})");if("string"!=typeof t.inputSelector)throw new Error("Error: inputSelector:"+t.inputSelector+"  must be a string. Each selector must match only one element and separated by ','");if(!e.getInputFromSelector(t.inputSelector))throw new Error("Error: No input element in the page matches "+t.inputSelector)}},{key:"injectSearchBox",value:function(e){e.before(c.default.searchBox);var t=e.prev().prev().find("input");return e.remove(),t}},{key:"bindSearchBoxEvent",value:function(){(0,h.default)('.searchbox [type="reset"]').on("click",function(){(0,h.default)("input#docsearch").focus(),(0,h.default)(this).addClass("hide"),a.default.autocomplete.setVal("")}),(0,h.default)("input#docsearch").on("keyup",function(){var e=document.querySelector("input#docsearch"),t=document.querySelector('.searchbox [type="reset"]');t.className="searchbox__reset",0===e.value.length&&(t.className+=" hide")})}},{key:"getInputFromSelector",value:function(e){var t=(0,h.default)(e).filter("input");return t.length?(0,h.default)(t[0]):null}},{key:"formatHits",value:function(t){var n=u.default.deepClone(t).map(function(e){return e._highlightResult&&(e._highlightResult=u.default.mergeKeyWithParent(e._highlightResult,"hierarchy")),u.default.mergeKeyWithParent(e,"hierarchy")}),r=u.default.groupBy(n,"lvl0");return h.default.each(r,function(e,t){var n=u.default.groupBy(t,"lvl1"),i=u.default.flattenAndFlagFirst(n,"isSubCategoryHeader");r[e]=i}),(r=u.default.flattenAndFlagFirst(r,"isCategoryHeader")).map(function(t){var n=e.formatURL(t),r=u.default.getHighlightedValue(t,"lvl0"),i=u.default.getHighlightedValue(t,"lvl1")||r,s=u.default.compact([u.default.getHighlightedValue(t,"lvl2")||i,u.default.getHighlightedValue(t,"lvl3"),u.default.getHighlightedValue(t,"lvl4"),u.default.getHighlightedValue(t,"lvl5"),u.default.getHighlightedValue(t,"lvl6")]).join('<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'),o=u.default.getSnippetedValue(t,"content"),a=i&&""!==i||s&&""!==s,c=s&&""!==s&&s!==i,l=!c&&i&&""!==i&&i!==r;return{isLvl0:!l&&!c,isLvl1:l,isLvl2:c,isLvl1EmptyOrDuplicate:!i||""===i||i===r,isCategoryHeader:t.isCategoryHeader,isSubCategoryHeader:t.isSubCategoryHeader,isTextOrSubcategoryNonEmpty:a,category:r,subcategory:i,title:s,text:o,url:n}})}},{key:"formatURL",value:function(e){var t=e.url,n=e.anchor;return t?-1!==t.indexOf("#")?t:n?e.url+"#"+e.anchor:t:n?"#"+e.anchor:(console.warn("no anchor nor url for : ",JSON.stringify(e)),null)}},{key:"getEmptyTemplate",value:function(){return function(e){return s.default.compile(c.default.empty).render(e)}}},{key:"getSuggestionTemplate",value:function(e){var t=e?c.default.suggestionSimple:c.default.suggestion,n=s.default.compile(t);return function(e){return n.render(e)}}}]),e}();t.default=p},393(e){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},567(e,t,n){"use strict";t.decode=t.parse=n(3609),t.encode=t.stringify=n(6081)},951(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,i=(r=n(3777))&&r.__esModule?r:{default:r};t.default=i.default},968(e){"use strict";var t=Object.prototype.toString;e.exports=function(e){var n=t.call(e),r="[object Arguments]"===n;return r||(r="[object Array]"!==n&&null!==e&&"object"==typeof e&&"number"==typeof e.length&&e.length>=0&&"[object Function]"===t.call(e.callee)),r}},990(e){"use strict";e.exports={element:null}},1009(e,t,n){function r(){var e;try{e=t.storage.debug}catch(e){}return!e&&"undefined"!=typeof process&&"env"in process&&(e=process.env.DEBUG),e}(t=e.exports=n(8302)).log=function(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)},t.formatArgs=function(e){var n=this.useColors;if(e[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+e[0]+(n?"%c ":" ")+"+"+t.humanize(this.diff),n){var r="color: "+this.color;e.splice(1,0,r,"color: inherit");var i=0,s=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(i++,"%c"===e&&(s=i))}),e.splice(s,0,r)}},t.save=function(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(e){}},t.load=r,t.useColors=function(){return!("undefined"==typeof window||!window.process||"renderer"!==window.process.type)||("undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))},t.storage="undefined"!=typeof chrome&&void 0!==chrome.storage?chrome.storage.local:function(){try{return window.localStorage}catch(e){}}(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},t.enable(r())},1149(e){"use strict";e.exports=function(e){var t=e.match(/Algolia for vanilla JavaScript (\d+\.)(\d+\.)(\d+)/);if(t)return[t[1],t[2],t[3]]}},1294(e,t,n){"use strict";var r=n(9659),i=/\s+/;function s(e,t,n,r){var s;if(!n)return this;for(t=t.split(i),n=r?function(e,t){return e.bind?e.bind(t):function(){e.apply(t,[].slice.call(arguments,0))}}(n,r):n,this._callbacks=this._callbacks||{};s=t.shift();)this._callbacks[s]=this._callbacks[s]||{sync:[],async:[]},this._callbacks[s][e].push(n);return this}function o(e,t,n){return function(){for(var r,i=0,s=e.length;!r&&i<s;i+=1)r=!1===e[i].apply(t,n);return!r}}e.exports={onSync:function(e,t,n){return s.call(this,"sync",e,t,n)},onAsync:function(e,t,n){return s.call(this,"async",e,t,n)},off:function(e){var t;if(!this._callbacks)return this;for(e=e.split(i);t=e.shift();)delete this._callbacks[t];return this},trigger:function(e){var t,n,s,a,c;if(!this._callbacks)return this;for(e=e.split(i),s=[].slice.call(arguments,1);(t=e.shift())&&(n=this._callbacks[t]);)a=o(n.sync,this,[t].concat(s)),c=o(n.async,this,[t].concat(s)),a()&&r(c);return this}}},1515(){var e=document.querySelectorAll(".js-feedback-form"),t=document.querySelector(".js-feedback-toast");for(var n of e)n.addEventListener("submit",r);function r(n){n.preventDefault();var r=new FormData(n.target);fetch("/",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams(r).toString()}).then(()=>function(){for(var n of(t.setAttribute("aria-hidden","false"),e))n.classList.add("pe-none","o50");setTimeout(function(){for(var n of(t.setAttribute("aria-hidden","true"),e))n.classList.remove("pe-none","o50")},5e3)}()).catch(e=>alert(e))}},1580(){},1620(e,t,n){"use strict";var r,i=(r=n(6476))&&r.__esModule?r:{default:r};e.exports=i.default},1669(e,t,n){"use strict";var r=n(3615),i=n(2211),s=n(1149);e.exports=function(e,t){var n=s(e.as._ua);return n&&n[0]>=3&&n[1]>20&&((t=t||{}).additionalUA="autocomplete.js "+i),function(n,i){e.search(n,t,function(e,t){e?r.error(e.message):i(t.hits,t)})}}},1815(e,t){!function(e){var t=/\S/,n=/\"/g,r=/\n/g,i=/\r/g,s=/\\/g,o=/\u2028/,a=/\u2029/;function c(e){"}"===e.n.substr(e.n.length-1)&&(e.n=e.n.substring(0,e.n.length-1))}function u(e){return e.trim?e.trim():e.replace(/^\s*|\s*$/g,"")}function l(e,t,n){if(t.charAt(n)!=e.charAt(0))return!1;for(var r=1,i=e.length;r<i;r++)if(t.charAt(n+r)!=e.charAt(r))return!1;return!0}e.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},e.scan=function(n,r){var i=n.length,s=0,o=null,a=null,h="",d=[],p=!1,f=0,m=0,g="{{",v="}}";function y(){h.length>0&&(d.push({tag:"_t",text:new String(h)}),h="")}function b(n,r){if(y(),n&&function(){for(var n=!0,r=m;r<d.length;r++)if(!(n=e.tags[d[r].tag]<e.tags._v||"_t"==d[r].tag&&null===d[r].text.match(t)))return!1;return n}())for(var i,s=m;s<d.length;s++)d[s].text&&((i=d[s+1])&&">"==i.tag&&(i.indent=d[s].text.toString()),d.splice(s,1));else r||d.push({tag:"\n"});p=!1,m=d.length}function w(e,t){var n="="+v,r=e.indexOf(n,t),i=u(e.substring(e.indexOf("=",t)+1,r)).split(" ");return g=i[0],v=i[i.length-1],r+n.length-1}for(r&&(r=r.split(" "),g=r[0],v=r[1]),f=0;f<i;f++)0==s?l(g,n,f)?(--f,y(),s=1):"\n"==n.charAt(f)?b(p):h+=n.charAt(f):1==s?(f+=g.length-1,"="==(o=(a=e.tags[n.charAt(f+1)])?n.charAt(f+1):"_v")?(f=w(n,f),s=0):(a&&f++,s=2),p=f):l(v,n,f)?(d.push({tag:o,n:u(h),otag:g,ctag:v,i:"/"==o?p-g.length:f+v.length}),h="",f+=v.length-1,s=0,"{"==o&&("}}"==v?f++:c(d[d.length-1]))):h+=n.charAt(f);return b(p,!0),d};var h={_t:!0,"\n":!0,$:!0,"/":!0};function d(t,n,r,i){var s,o=[],a=null,c=null;for(s=r[r.length-1];t.length>0;){if(c=t.shift(),s&&"<"==s.tag&&!(c.tag in h))throw new Error("Illegal content in < super tag.");if(e.tags[c.tag]<=e.tags.$||p(c,i))r.push(c),c.nodes=d(t,c.tag,r,i);else{if("/"==c.tag){if(0===r.length)throw new Error("Closing tag without opener: /"+c.n);if(a=r.pop(),c.n!=a.n&&!f(c.n,a.n,i))throw new Error("Nesting error: "+a.n+" vs. "+c.n);return a.end=c.i,o}"\n"==c.tag&&(c.last=0==t.length||"\n"==t[0].tag)}o.push(c)}if(r.length>0)throw new Error("missing closing tag: "+r.pop().n);return o}function p(e,t){for(var n=0,r=t.length;n<r;n++)if(t[n].o==e.n)return e.tag="#",!0}function f(e,t,n){for(var r=0,i=n.length;r<i;r++)if(n[r].c==e&&n[r].o==t)return!0}function m(e){var t=[];for(var n in e.partials)t.push('"'+v(n)+'":{name:"'+v(e.partials[n].name)+'", '+m(e.partials[n])+"}");return"partials: {"+t.join(",")+"}, subs: "+function(e){var t=[];for(var n in e)t.push('"'+v(n)+'": function(c,p,t,i) {'+e[n]+"}");return"{ "+t.join(",")+" }"}(e.subs)}e.stringify=function(t,n,r){return"{code: function (c,p,i) { "+e.wrapMain(t.code)+" },"+m(t)+"}"};var g=0;function v(e){return e.replace(s,"\\\\").replace(n,'\\"').replace(r,"\\n").replace(i,"\\r").replace(o,"\\u2028").replace(a,"\\u2029")}function y(e){return~e.indexOf(".")?"d":"f"}function b(e,t){var n="<"+(t.prefix||"")+e.n+g++;return t.partials[n]={name:e.n,partials:{}},t.code+='t.b(t.rp("'+v(n)+'",c,p,"'+(e.indent||"")+'"));',n}function w(e,t){t.code+="t.b(t.t(t."+y(e.n)+'("'+v(e.n)+'",c,p,0)));'}function x(e){return"t.b("+e+");"}e.generate=function(t,n,r){g=0;var i={code:"",subs:{},partials:{}};return e.walk(t,i),r.asString?this.stringify(i,n,r):this.makeTemplate(i,n,r)},e.wrapMain=function(e){return'var t=this;t.b(i=i||"");'+e+"return t.fl();"},e.template=e.Template,e.makeTemplate=function(e,t,n){var r=this.makePartials(e);return r.code=new Function("c","p","i",this.wrapMain(e.code)),new this.template(r,t,this,n)},e.makePartials=function(e){var t,n={subs:{},partials:e.partials,name:e.name};for(t in n.partials)n.partials[t]=this.makePartials(n.partials[t]);for(t in e.subs)n.subs[t]=new Function("c","p","t","i",e.subs[t]);return n},e.codegen={"#":function(t,n){n.code+="if(t.s(t."+y(t.n)+'("'+v(t.n)+'",c,p,1),c,p,0,'+t.i+","+t.end+',"'+t.otag+" "+t.ctag+'")){t.rs(c,p,function(c,p,t){',e.walk(t.nodes,n),n.code+="});c.pop();}"},"^":function(t,n){n.code+="if(!t.s(t."+y(t.n)+'("'+v(t.n)+'",c,p,1),c,p,1,0,0,"")){',e.walk(t.nodes,n),n.code+="};"},">":b,"<":function(t,n){var r={partials:{},code:"",subs:{},inPartial:!0};e.walk(t.nodes,r);var i=n.partials[b(t,n)];i.subs=r.subs,i.partials=r.partials},$:function(t,n){var r={subs:{},code:"",partials:n.partials,prefix:t.n};e.walk(t.nodes,r),n.subs[t.n]=r.code,n.inPartial||(n.code+='t.sub("'+v(t.n)+'",c,p,i);')},"\n":function(e,t){t.code+=x('"\\n"'+(e.last?"":" + i"))},_v:function(e,t){t.code+="t.b(t.v(t."+y(e.n)+'("'+v(e.n)+'",c,p,0)));'},_t:function(e,t){t.code+=x('"'+v(e.text)+'"')},"{":w,"&":w},e.walk=function(t,n){for(var r,i=0,s=t.length;i<s;i++)(r=e.codegen[t[i].tag])&&r(t[i],n);return n},e.parse=function(e,t,n){return d(e,0,[],(n=n||{}).sectionTags||[])},e.cache={},e.cacheKey=function(e,t){return[e,!!t.asString,!!t.disableLambda,t.delimiters,!!t.modelGet].join("||")},e.compile=function(t,n){n=n||{};var r=e.cacheKey(t,n),i=this.cache[r];if(i){var s=i.partials;for(var o in s)delete s[o].instance;return i}return i=this.generate(this.parse(this.scan(t,n.delimiters),t,n),t,n),this.cache[r]=i}}(t)},2133(e,t,n){var r=n(1815);r.Template=n(2252).Template,r.template=r.Template,e.exports=r},2206(e){"use strict";e.exports={wrapper:'<span class="%ROOT%"></span>',dropdown:'<span class="%PREFIX%%DROPDOWN_MENU%"></span>',dataset:'<div class="%PREFIX%%DATASET%-%CLASS%"></div>',suggestions:'<span class="%PREFIX%%SUGGESTIONS%"></span>',suggestion:'<div class="%PREFIX%%SUGGESTION%"></div>'}},2211(e){e.exports="0.36.0"},2252(e,t){!function(e){function t(e,t,n){var r;return t&&"object"==typeof t&&(void 0!==t[e]?r=t[e]:n&&t.get&&"function"==typeof t.get&&(r=t.get(e))),r}e.Template=function(e,t,n,r){e=e||{},this.r=e.code||this.r,this.c=n,this.options=r||{},this.text=t||"",this.partials=e.partials||{},this.subs=e.subs||{},this.buf=""},e.Template.prototype={r:function(e,t,n){return""},v:function(e){return e=c(e),a.test(e)?e.replace(n,"&amp;").replace(r,"&lt;").replace(i,"&gt;").replace(s,"&#39;").replace(o,"&quot;"):e},t:c,render:function(e,t,n){return this.ri([e],t||{},n)},ri:function(e,t,n){return this.r(e,t,n)},ep:function(e,t){var n=this.partials[e],r=t[n.name];if(n.instance&&n.base==r)return n.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[e].base=r,n.subs){for(key in t.stackText||(t.stackText={}),n.subs)t.stackText[key]||(t.stackText[key]=void 0!==this.activeSub&&t.stackText[this.activeSub]?t.stackText[this.activeSub]:this.text);r=function(e,t,n,r,i,s){function o(){}function a(){}var c;o.prototype=e,a.prototype=e.subs;var u=new o;for(c in u.subs=new a,u.subsText={},u.buf="",r=r||{},u.stackSubs=r,u.subsText=s,t)r[c]||(r[c]=t[c]);for(c in r)u.subs[c]=r[c];for(c in i=i||{},u.stackPartials=i,n)i[c]||(i[c]=n[c]);for(c in i)u.partials[c]=i[c];return u}(r,n.subs,n.partials,this.stackSubs,this.stackPartials,t.stackText)}return this.partials[e].instance=r,r},rp:function(e,t,n,r){var i=this.ep(e,n);return i?i.ri(t,n,r):""},rs:function(e,t,n){var r=e[e.length-1];if(u(r))for(var i=0;i<r.length;i++)e.push(r[i]),n(e,t,this),e.pop();else n(e,t,this)},s:function(e,t,n,r,i,s,o){var a;return(!u(e)||0!==e.length)&&("function"==typeof e&&(e=this.ms(e,t,n,r,i,s,o)),a=!!e,!r&&a&&t&&t.push("object"==typeof e?e:t[t.length-1]),a)},d:function(e,n,r,i){var s,o=e.split("."),a=this.f(o[0],n,r,i),c=this.options.modelGet,l=null;if("."===e&&u(n[n.length-2]))a=n[n.length-1];else for(var h=1;h<o.length;h++)void 0!==(s=t(o[h],a,c))?(l=a,a=s):a="";return!(i&&!a)&&(i||"function"!=typeof a||(n.push(l),a=this.mv(a,n,r),n.pop()),a)},f:function(e,n,r,i){for(var s=!1,o=!1,a=this.options.modelGet,c=n.length-1;c>=0;c--)if(void 0!==(s=t(e,n[c],a))){o=!0;break}return o?(i||"function"!=typeof s||(s=this.mv(s,n,r)),s):!i&&""},ls:function(e,t,n,r,i){var s=this.options.delimiters;return this.options.delimiters=i,this.b(this.ct(c(e.call(t,r)),t,n)),this.options.delimiters=s,!1},ct:function(e,t,n){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(e,this.options).render(t,n)},b:function(e){this.buf+=e},fl:function(){var e=this.buf;return this.buf="",e},ms:function(e,t,n,r,i,s,o){var a,c=t[t.length-1],u=e.call(c);return"function"==typeof u?!!r||(a=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,c,n,a.substring(i,s),o)):u},mv:function(e,t,n){var r=t[t.length-1],i=e.call(r);return"function"==typeof i?this.ct(c(i.call(r)),r,n):i},sub:function(e,t,n,r){var i=this.subs[e];i&&(this.activeSub=e,i(t,n,this,r),this.activeSub=!1)}};var n=/&/g,r=/</g,i=/>/g,s=/\'/g,o=/\"/g,a=/[&<>\"\']/;function c(e){return String(null==e?"":e)}var u=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}}(t)},2535(e,t,n){e.exports=function(e,t){var r=n(9228),i=n(5144),s={};return i(r(e),function(n){!0!==t(n)&&(s[n]=e[n])}),s}},2553(e){var t;t="undefined"!=typeof window?window:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},e.exports=t},2674(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n="algolia-docsearch",r=n+"-suggestion",i=n+"-footer",s={suggestion:'\n  <a class="'+r+"\n    {{#isCategoryHeader}}"+r+"__main{{/isCategoryHeader}}\n    {{#isSubCategoryHeader}}"+r+'__secondary{{/isSubCategoryHeader}}\n    "\n    aria-label="Link to the result"\n    href="{{{url}}}"\n    >\n    <div class="'+r+'--category-header">\n        <span class="'+r+'--category-header-lvl0">{{{category}}}</span>\n    </div>\n    <div class="'+r+'--wrapper">\n      <div class="'+r+'--subcategory-column">\n        <span class="'+r+'--subcategory-column-text">{{{subcategory}}}</span>\n      </div>\n      {{#isTextOrSubcategoryNonEmpty}}\n      <div class="'+r+'--content">\n        <div class="'+r+'--subcategory-inline">{{{subcategory}}}</div>\n        <div class="'+r+'--title">{{{title}}}</div>\n        {{#text}}<div class="'+r+'--text">{{{text}}}</div>{{/text}}\n      </div>\n      {{/isTextOrSubcategoryNonEmpty}}\n    </div>\n  </a>\n  ',suggestionSimple:'\n  <div class="'+r+"\n    {{#isCategoryHeader}}"+r+"__main{{/isCategoryHeader}}\n    {{#isSubCategoryHeader}}"+r+'__secondary{{/isSubCategoryHeader}}\n    suggestion-layout-simple\n  ">\n    <div class="'+r+'--category-header">\n        {{^isLvl0}}\n        <span class="'+r+"--category-header-lvl0 "+r+'--category-header-item">{{{category}}}</span>\n          {{^isLvl1}}\n          {{^isLvl1EmptyOrDuplicate}}\n          <span class="'+r+"--category-header-lvl1 "+r+'--category-header-item">\n              {{{subcategory}}}\n          </span>\n          {{/isLvl1EmptyOrDuplicate}}\n          {{/isLvl1}}\n        {{/isLvl0}}\n        <div class="'+r+"--title "+r+'--category-header-item">\n            {{#isLvl2}}\n                {{{title}}}\n            {{/isLvl2}}\n            {{#isLvl1}}\n                {{{subcategory}}}\n            {{/isLvl1}}\n            {{#isLvl0}}\n                {{{category}}}\n            {{/isLvl0}}\n        </div>\n    </div>\n    <div class="'+r+'--wrapper">\n      {{#text}}\n      <div class="'+r+'--content">\n        <div class="'+r+'--text">{{{text}}}</div>\n      </div>\n      {{/text}}\n    </div>\n  </div>\n  ',footer:'\n    <div class="'+i+'">\n      Search by <a class="'+i+'--logo" href="https://www.algolia.com/docsearch">Algolia</a>\n    </div>\n  ',empty:'\n  <div class="'+r+'">\n    <div class="'+r+'--wrapper">\n        <div class="'+r+"--content "+r+'--no-results">\n            <div class="'+r+'--title">\n                <div class="'+r+'--text">\n                    No results found for query <b>"{{query}}"</b>\n                </div>\n            </div>\n        </div>\n    </div>\n  </div>\n  ',searchBox:'\n  <form novalidate="novalidate" onsubmit="return false;" class="searchbox">\n    <div role="search" class="searchbox__wrapper">\n      <input id="docsearch" type="search" name="search" placeholder="Search the docs" autocomplete="off" required="required" class="searchbox__input"/>\n      <button type="submit" title="Submit your search query." class="searchbox__submit" >\n        <svg width=12 height=12 role="img" aria-label="Search">\n          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>\n        </svg>\n      </button>\n      <button type="reset" title="Clear the search query." class="searchbox__reset hide">\n        <svg width=12 height=12 role="img" aria-label="Reset">\n          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>\n        </svg>\n      </button>\n    </div>\n</form>\n\n<div class="svg-icons" style="height: 0; width: 0; position: absolute; visibility: hidden">\n  <svg xmlns="http://www.w3.org/2000/svg">\n    <symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"></symbol>\n    <symbol id="sbx-icon-search-13" viewBox="0 0 40 40"><path d="M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.332 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.807 29.012zm-10.427.627c7.322 0 13.26-5.938 13.26-13.26 0-7.324-5.938-13.26-13.26-13.26-7.324 0-13.26 5.936-13.26 13.26 0 7.322 5.936 13.26 13.26 13.26z" fill-rule="evenodd"></symbol>\n  </svg>\n</div>\n  '};t.default=s},2802(e,t,n){"use strict";var r=n(3615),i=n(990);function s(e){e&&e.el||r.error("EventBus initialized without el"),this.$el=i.element(e.el)}r.mixin(s.prototype,{trigger:function(e,t,n,i){var s=r.Event("autocomplete:"+e);return this.$el.trigger(s,[t,n,i]),s}}),e.exports=s},2937(e,t,n){"use strict";e.exports=function(e,t){return/\?/.test(e)?e+="&":e+="?",e+r(t)};var r=n(6081)},3275(e,t,n){"use strict";e.exports={hits:n(1669),popularIn:n(7345)}},3586(e,t,n){e.exports=function(e){return function(t,s,o){var a=n(393);(o=o&&a(o)||{}).hosts=o.hosts||["places-dsn.algolia.net","places-1.algolianet.com","places-2.algolianet.com","places-3.algolianet.com"],0!==arguments.length&&"object"!=typeof t&&void 0!==t||(t="",s="",o._allowEmptyCredentials=!0);var c=e(t,s,o).initIndex("places");return c.search=i("query","/1/places/query"),c.reverse=function(e,t){var n=r.encode(e);return this.as._jsonRequest({method:"GET",url:"/1/places/reverse?"+n,hostType:"read",callback:t})},c.getObject=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/places/"+encodeURIComponent(e),hostType:"read",callback:t})},c}};var r=n(567),i=n(5553)},3609(e){"use strict";function t(e,t){return Object.prototype.hasOwnProperty.call(e,t)}e.exports=function(e,r,i,s){r=r||"&",i=i||"=";var o={};if("string"!=typeof e||0===e.length)return o;var a=/\+/g;e=e.split(r);var c=1e3;s&&"number"==typeof s.maxKeys&&(c=s.maxKeys);var u=e.length;c>0&&u>c&&(u=c);for(var l=0;l<u;++l){var h,d,p,f,m=e[l].replace(a,"%20"),g=m.indexOf(i);g>=0?(h=m.substr(0,g),d=m.substr(g+1)):(h=m,d=""),p=decodeURIComponent(h),f=decodeURIComponent(d),t(o,p)?n(o[p])?o[p].push(f):o[p]=[o[p],f]:o[p]=f}return o};var n=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},3615(e,t,n){"use strict";var r,i=n(990);function s(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}e.exports={isArray:null,isFunction:null,isObject:null,bind:null,each:null,map:null,mixin:null,isMsie:function(e){if(void 0===e&&(e=navigator.userAgent),/(msie|trident)/i.test(e)){var t=e.match(/(msie |rv:)(\d+(.\d+)?)/i);if(t)return t[2]}return!1},escapeRegExChars:function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isNumber:function(e){return"number"==typeof e},toStr:function(e){return null==e?"":e+""},cloneDeep:function(e){var t=this.mixin({},e),n=this;return this.each(t,function(e,r){e&&(n.isArray(e)?t[r]=[].concat(e):n.isObject(e)&&(t[r]=n.cloneDeep(e)))}),t},error:function(e){throw new Error(e)},every:function(e,t){var n=!0;return e?(this.each(e,function(r,i){n&&(n=t.call(null,r,i,e)&&n)}),!!n):n},any:function(e,t){var n=!1;return e?(this.each(e,function(r,i){if(t.call(null,r,i,e))return n=!0,!1}),n):n},getUniqueId:(r=0,function(){return r++}),templatify:function(e){if(this.isFunction(e))return e;var t=i.element(e);return"SCRIPT"===t.prop("tagName")?function(){return t.text()}:function(){return String(e)}},defer:function(e){setTimeout(e,0)},noop:function(){},formatPrefix:function(e,t){return t?"":e+"-"},className:function(e,t,n){return(n?"":".")+e+t},escapeHighlightedString:function(e,t,n){t=t||"<em>";var r=document.createElement("div");r.appendChild(document.createTextNode(t)),n=n||"</em>";var i=document.createElement("div");i.appendChild(document.createTextNode(n));var o=document.createElement("div");return o.appendChild(document.createTextNode(e)),o.innerHTML.replace(RegExp(s(r.innerHTML),"g"),t).replace(RegExp(s(i.innerHTML),"g"),n)}}},3656(e){"use strict";e.exports="3.35.1"},3777(e){var t;t=window,e.exports=function(e){var t=function(){var t,n,r,i,s,o,a=[],c=a.concat,u=a.filter,l=a.slice,h=e.document,d={},p={},f={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},m=/^\s*<(\w+|!)[^>]*>/,g=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,v=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,y=/^(?:body|html)$/i,b=/([A-Z])/g,w=["val","css","html","text","data","width","height","offset"],x=h.createElement("table"),E=h.createElement("tr"),T={tr:h.createElement("tbody"),tbody:x,thead:x,tfoot:x,td:E,th:E,"*":h.createElement("div")},A=/complete|loaded|interactive/,C=/^[\w-]*$/,O={},S=O.toString,k={},_=h.createElement("div"),N={tabindex:"tabIndex",readonly:"readOnly",for:"htmlFor",class:"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},D=Array.isArray||function(e){return e instanceof Array};function j(e){return null==e?String(e):O[S.call(e)]||"object"}function L(e){return"function"==j(e)}function M(e){return null!=e&&e==e.window}function $(e){return null!=e&&e.nodeType==e.DOCUMENT_NODE}function F(e){return"object"==j(e)}function I(e){return F(e)&&!M(e)&&Object.getPrototypeOf(e)==Object.prototype}function P(e){var t=!!e&&"length"in e&&e.length,n=r.type(e);return"function"!=n&&!M(e)&&("array"==n||0===t||"number"==typeof t&&t>0&&t-1 in e)}function R(e){return e.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function H(e){return e in p?p[e]:p[e]=new RegExp("(^|\\s)"+e+"(\\s|$)")}function q(e,t){return"number"!=typeof t||f[R(e)]?t:t+"px"}function B(e){return"children"in e?l.call(e.children):r.map(e.childNodes,function(e){if(1==e.nodeType)return e})}function V(e,t){var n,r=e?e.length:0;for(n=0;n<r;n++)this[n]=e[n];this.length=r,this.selector=t||""}function U(e,r,i){for(n in r)i&&(I(r[n])||D(r[n]))?(I(r[n])&&!I(e[n])&&(e[n]={}),D(r[n])&&!D(e[n])&&(e[n]=[]),U(e[n],r[n],i)):r[n]!==t&&(e[n]=r[n])}function K(e,t){return null==t?r(e):r(e).filter(t)}function W(e,t,n,r){return L(t)?t.call(e,n,r):t}function z(e,t,n){null==n?e.removeAttribute(t):e.setAttribute(t,n)}function J(e,n){var r=e.className||"",i=r&&r.baseVal!==t;if(n===t)return i?r.baseVal:r;i?r.baseVal=n:e.className=n}function X(e){try{return e?"true"==e||"false"!=e&&("null"==e?null:+e+""==e?+e:/^[\[\{]/.test(e)?r.parseJSON(e):e):e}catch(t){return e}}function Q(e,t){t(e);for(var n=0,r=e.childNodes.length;n<r;n++)Q(e.childNodes[n],t)}return k.matches=function(e,t){if(!t||!e||1!==e.nodeType)return!1;var n=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.matchesSelector;if(n)return n.call(e,t);var r,i=e.parentNode,s=!i;return s&&(i=_).appendChild(e),r=~k.qsa(i,t).indexOf(e),s&&_.removeChild(e),r},s=function(e){return e.replace(/-+(.)?/g,function(e,t){return t?t.toUpperCase():""})},o=function(e){return u.call(e,function(t,n){return e.indexOf(t)==n})},k.fragment=function(e,n,i){var s,o,a;return g.test(e)&&(s=r(h.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(v,"<$1></$2>")),n===t&&(n=m.test(e)&&RegExp.$1),n in T||(n="*"),(a=T[n]).innerHTML=""+e,s=r.each(l.call(a.childNodes),function(){a.removeChild(this)})),I(i)&&(o=r(s),r.each(i,function(e,t){w.indexOf(e)>-1?o[e](t):o.attr(e,t)})),s},k.Z=function(e,t){return new V(e,t)},k.isZ=function(e){return e instanceof k.Z},k.init=function(e,n){var i,s;if(!e)return k.Z();if("string"==typeof e)if("<"==(e=e.trim())[0]&&m.test(e))i=k.fragment(e,RegExp.$1,n),e=null;else{if(n!==t)return r(n).find(e);i=k.qsa(h,e)}else{if(L(e))return r(h).ready(e);if(k.isZ(e))return e;if(D(e))s=e,i=u.call(s,function(e){return null!=e});else if(F(e))i=[e],e=null;else if(m.test(e))i=k.fragment(e.trim(),RegExp.$1,n),e=null;else{if(n!==t)return r(n).find(e);i=k.qsa(h,e)}}return k.Z(i,e)},(r=function(e,t){return k.init(e,t)}).extend=function(e){var t,n=l.call(arguments,1);return"boolean"==typeof e&&(t=e,e=n.shift()),n.forEach(function(n){U(e,n,t)}),e},k.qsa=function(e,t){var n,r="#"==t[0],i=!r&&"."==t[0],s=r||i?t.slice(1):t,o=C.test(s);return e.getElementById&&o&&r?(n=e.getElementById(s))?[n]:[]:1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType?[]:l.call(o&&!r&&e.getElementsByClassName?i?e.getElementsByClassName(s):e.getElementsByTagName(t):e.querySelectorAll(t))},r.contains=h.documentElement.contains?function(e,t){return e!==t&&e.contains(t)}:function(e,t){for(;t&&(t=t.parentNode);)if(t===e)return!0;return!1},r.type=j,r.isFunction=L,r.isWindow=M,r.isArray=D,r.isPlainObject=I,r.isEmptyObject=function(e){var t;for(t in e)return!1;return!0},r.isNumeric=function(e){var t=Number(e),n=typeof e;return null!=e&&"boolean"!=n&&("string"!=n||e.length)&&!isNaN(t)&&isFinite(t)||!1},r.inArray=function(e,t,n){return a.indexOf.call(t,e,n)},r.camelCase=s,r.trim=function(e){return null==e?"":String.prototype.trim.call(e)},r.uuid=0,r.support={},r.expr={},r.noop=function(){},r.map=function(e,t){var n,i,s,o,a=[];if(P(e))for(i=0;i<e.length;i++)null!=(n=t(e[i],i))&&a.push(n);else for(s in e)null!=(n=t(e[s],s))&&a.push(n);return(o=a).length>0?r.fn.concat.apply([],o):o},r.each=function(e,t){var n,r;if(P(e)){for(n=0;n<e.length;n++)if(!1===t.call(e[n],n,e[n]))return e}else for(r in e)if(!1===t.call(e[r],r,e[r]))return e;return e},r.grep=function(e,t){return u.call(e,t)},e.JSON&&(r.parseJSON=JSON.parse),r.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){O["[object "+t+"]"]=t.toLowerCase()}),r.fn={constructor:k.Z,length:0,forEach:a.forEach,reduce:a.reduce,push:a.push,sort:a.sort,splice:a.splice,indexOf:a.indexOf,concat:function(){var e,t,n=[];for(e=0;e<arguments.length;e++)t=arguments[e],n[e]=k.isZ(t)?t.toArray():t;return c.apply(k.isZ(this)?this.toArray():this,n)},map:function(e){return r(r.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return r(l.apply(this,arguments))},ready:function(e){return A.test(h.readyState)&&h.body?e(r):h.addEventListener("DOMContentLoaded",function(){e(r)},!1),this},get:function(e){return e===t?l.call(this):this[e>=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(e){return a.every.call(this,function(t,n){return!1!==e.call(t,n,t)}),this},filter:function(e){return L(e)?this.not(this.not(e)):r(u.call(this,function(t){return k.matches(t,e)}))},add:function(e,t){return r(o(this.concat(r(e,t))))},is:function(e){return this.length>0&&k.matches(this[0],e)},not:function(e){var n=[];if(L(e)&&e.call!==t)this.each(function(t){e.call(this,t)||n.push(this)});else{var i="string"==typeof e?this.filter(e):P(e)&&L(e.item)?l.call(e):r(e);this.forEach(function(e){i.indexOf(e)<0&&n.push(e)})}return r(n)},has:function(e){return this.filter(function(){return F(e)?r.contains(this,e):r(this).find(e).size()})},eq:function(e){return-1===e?this.slice(e):this.slice(e,+e+1)},first:function(){var e=this[0];return e&&!F(e)?e:r(e)},last:function(){var e=this[this.length-1];return e&&!F(e)?e:r(e)},find:function(e){var t=this;return e?"object"==typeof e?r(e).filter(function(){var e=this;return a.some.call(t,function(t){return r.contains(t,e)})}):1==this.length?r(k.qsa(this[0],e)):this.map(function(){return k.qsa(this,e)}):r()},closest:function(e,t){var n=[],i="object"==typeof e&&r(e);return this.each(function(r,s){for(;s&&!(i?i.indexOf(s)>=0:k.matches(s,e));)s=s!==t&&!$(s)&&s.parentNode;s&&n.indexOf(s)<0&&n.push(s)}),r(n)},parents:function(e){for(var t=[],n=this;n.length>0;)n=r.map(n,function(e){if((e=e.parentNode)&&!$(e)&&t.indexOf(e)<0)return t.push(e),e});return K(t,e)},parent:function(e){return K(o(this.pluck("parentNode")),e)},children:function(e){return K(this.map(function(){return B(this)}),e)},contents:function(){return this.map(function(){return this.contentDocument||l.call(this.childNodes)})},siblings:function(e){return K(this.map(function(e,t){return u.call(B(t.parentNode),function(e){return e!==t})}),e)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(e){return r.map(this,function(t){return t[e]})},show:function(){return this.each(function(){var e,t,n;"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=(e=this.nodeName,d[e]||(t=h.createElement(e),h.body.appendChild(t),n=getComputedStyle(t,"").getPropertyValue("display"),t.parentNode.removeChild(t),"none"==n&&(n="block"),d[e]=n),d[e]))})},replaceWith:function(e){return this.before(e).remove()},wrap:function(e){var t=L(e);if(this[0]&&!t)var n=r(e).get(0),i=n.parentNode||this.length>1;return this.each(function(s){r(this).wrapAll(t?e.call(this,s):i?n.cloneNode(!0):n)})},wrapAll:function(e){if(this[0]){var t;for(r(this[0]).before(e=r(e));(t=e.children()).length;)e=t.first();r(e).append(this)}return this},wrapInner:function(e){var t=L(e);return this.each(function(n){var i=r(this),s=i.contents(),o=t?e.call(this,n):e;s.length?s.wrapAll(o):i.append(o)})},unwrap:function(){return this.parent().each(function(){r(this).replaceWith(r(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var n=r(this);(e===t?"none"==n.css("display"):e)?n.show():n.hide()})},prev:function(e){return r(this.pluck("previousElementSibling")).filter(e||"*")},next:function(e){return r(this.pluck("nextElementSibling")).filter(e||"*")},html:function(e){return 0 in arguments?this.each(function(t){var n=this.innerHTML;r(this).empty().append(W(this,e,t,n))}):0 in this?this[0].innerHTML:null},text:function(e){return 0 in arguments?this.each(function(t){var n=W(this,e,t,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this.pluck("textContent").join(""):null},attr:function(e,r){var i;return"string"!=typeof e||1 in arguments?this.each(function(t){if(1===this.nodeType)if(F(e))for(n in e)z(this,n,e[n]);else z(this,e,W(this,r,t,this.getAttribute(e)))}):0 in this&&1==this[0].nodeType&&null!=(i=this[0].getAttribute(e))?i:t},removeAttr:function(e){return this.each(function(){1===this.nodeType&&e.split(" ").forEach(function(e){z(this,e)},this)})},prop:function(e,t){return e=N[e]||e,1 in arguments?this.each(function(n){this[e]=W(this,t,n,this[e])}):this[0]&&this[0][e]},removeProp:function(e){return e=N[e]||e,this.each(function(){delete this[e]})},data:function(e,n){var r="data-"+e.replace(b,"-$1").toLowerCase(),i=1 in arguments?this.attr(r,n):this.attr(r);return null!==i?X(i):t},val:function(e){return 0 in arguments?(null==e&&(e=""),this.each(function(t){this.value=W(this,e,t,this.value)})):this[0]&&(this[0].multiple?r(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var n=r(this),i=W(this,t,e,n.offset()),s=n.offsetParent().offset(),o={top:i.top-s.top,left:i.left-s.left};"static"==n.css("position")&&(o.position="relative"),n.css(o)});if(!this.length)return null;if(h.documentElement!==this[0]&&!r.contains(h.documentElement,this[0]))return{top:0,left:0};var n=this[0].getBoundingClientRect();return{left:n.left+e.pageXOffset,top:n.top+e.pageYOffset,width:Math.round(n.width),height:Math.round(n.height)}},css:function(e,t){if(arguments.length<2){var i=this[0];if("string"==typeof e){if(!i)return;return i.style[s(e)]||getComputedStyle(i,"").getPropertyValue(e)}if(D(e)){if(!i)return;var o={},a=getComputedStyle(i,"");return r.each(e,function(e,t){o[t]=i.style[s(t)]||a.getPropertyValue(t)}),o}}var c="";if("string"==j(e))t||0===t?c=R(e)+":"+q(e,t):this.each(function(){this.style.removeProperty(R(e))});else for(n in e)e[n]||0===e[n]?c+=R(n)+":"+q(n,e[n])+";":this.each(function(){this.style.removeProperty(R(n))});return this.each(function(){this.style.cssText+=";"+c})},index:function(e){return e?this.indexOf(r(e)[0]):this.parent().children().indexOf(this[0])},hasClass:function(e){return!!e&&a.some.call(this,function(e){return this.test(J(e))},H(e))},addClass:function(e){return e?this.each(function(t){if("className"in this){i=[];var n=J(this);W(this,e,t,n).split(/\s+/g).forEach(function(e){r(this).hasClass(e)||i.push(e)},this),i.length&&J(this,n+(n?" ":"")+i.join(" "))}}):this},removeClass:function(e){return this.each(function(n){if("className"in this){if(e===t)return J(this,"");i=J(this),W(this,e,n,i).split(/\s+/g).forEach(function(e){i=i.replace(H(e)," ")}),J(this,i.trim())}})},toggleClass:function(e,n){return e?this.each(function(i){var s=r(this);W(this,e,i,J(this)).split(/\s+/g).forEach(function(e){(n===t?!s.hasClass(e):n)?s.addClass(e):s.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var e=this[0],t=this.offsetParent(),n=this.offset(),i=y.test(t[0].nodeName)?{top:0,left:0}:t.offset();return n.top-=parseFloat(r(e).css("margin-top"))||0,n.left-=parseFloat(r(e).css("margin-left"))||0,i.top+=parseFloat(r(t[0]).css("border-top-width"))||0,i.left+=parseFloat(r(t[0]).css("border-left-width"))||0,{top:n.top-i.top,left:n.left-i.left}}},offsetParent:function(){return this.map(function(){for(var e=this.offsetParent||h.body;e&&!y.test(e.nodeName)&&"static"==r(e).css("position");)e=e.offsetParent;return e})}},r.fn.detach=r.fn.remove,["width","height"].forEach(function(e){var n=e.replace(/./,function(e){return e[0].toUpperCase()});r.fn[e]=function(i){var s,o=this[0];return i===t?M(o)?o["inner"+n]:$(o)?o.documentElement["scroll"+n]:(s=this.offset())&&s[e]:this.each(function(t){(o=r(this)).css(e,W(this,i,t,o[e]()))})}}),["after","prepend","before","append"].forEach(function(n,i){var s=i%2;r.fn[n]=function(){var n,o,a=r.map(arguments,function(e){var i=[];return"array"==(n=j(e))?(e.forEach(function(e){return e.nodeType!==t?i.push(e):r.zepto.isZ(e)?i=i.concat(e.get()):void(i=i.concat(k.fragment(e)))}),i):"object"==n||null==e?e:k.fragment(e)}),c=this.length>1;return a.length<1?this:this.each(function(t,n){o=s?n:n.parentNode,n=0==i?n.nextSibling:1==i?n.firstChild:2==i?n:null;var u=r.contains(h.documentElement,o);a.forEach(function(t){if(c)t=t.cloneNode(!0);else if(!o)return r(t).remove();o.insertBefore(t,n),u&&Q(t,function(t){if(!(null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src)){var n=t.ownerDocument?t.ownerDocument.defaultView:e;n.eval.call(n,t.innerHTML)}})})})},r.fn[s?n+"To":"insert"+(i?"Before":"After")]=function(e){return r(e)[n](this),this}}),k.Z.prototype=V.prototype=r.fn,k.uniq=o,k.deserializeValue=X,r.zepto=k,r}();return function(t){var n,r=1,i=Array.prototype.slice,s=t.isFunction,o=function(e){return"string"==typeof e},a={},c={},u="onfocusin"in e,l={focus:"focusin",blur:"focusout"},h={mouseenter:"mouseover",mouseleave:"mouseout"};function d(e){return e._zid||(e._zid=r++)}function p(e,t,n,r){if((t=f(t)).ns)var i=(s=t.ns,new RegExp("(?:^| )"+s.replace(" "," .* ?")+"(?: |$)"));var s;return(a[d(e)]||[]).filter(function(e){return e&&(!t.e||e.e==t.e)&&(!t.ns||i.test(e.ns))&&(!n||d(e.fn)===d(n))&&(!r||e.sel==r)})}function f(e){var t=(""+e).split(".");return{e:t[0],ns:t.slice(1).sort().join(" ")}}function m(e,t){return e.del&&!u&&e.e in l||!!t}function g(e){return h[e]||u&&l[e]||e}function v(e,r,i,s,o,c,u){var l=d(e),p=a[l]||(a[l]=[]);r.split(/\s/).forEach(function(r){if("ready"==r)return t(document).ready(i);var a=f(r);a.fn=i,a.sel=o,a.e in h&&(i=function(e){var n=e.relatedTarget;if(!n||n!==this&&!t.contains(this,n))return a.fn.apply(this,arguments)}),a.del=c;var l=c||i;a.proxy=function(t){if(!(t=T(t)).isImmediatePropagationStopped()){try{var r=Object.getOwnPropertyDescriptor(t,"data");r&&!r.writable||(t.data=s)}catch(t){}var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return!1===i&&(t.preventDefault(),t.stopPropagation()),i}},a.i=p.length,p.push(a),"addEventListener"in e&&e.addEventListener(g(a.e),a.proxy,m(a,u))})}function y(e,t,n,r,i){var s=d(e);(t||"").split(/\s/).forEach(function(t){p(e,t,n,r).forEach(function(t){delete a[s][t.i],"removeEventListener"in e&&e.removeEventListener(g(t.e),t.proxy,m(t,i))})})}c.click=c.mousedown=c.mouseup=c.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var r=2 in arguments&&i.call(arguments,2);if(s(e)){var a=function(){return e.apply(n,r?r.concat(i.call(arguments)):arguments)};return a._zid=d(e),a}if(o(n))return r?(r.unshift(e[n],e),t.proxy.apply(null,r)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(e,t,n){return this.on(e,t,n)},t.fn.unbind=function(e,t){return this.off(e,t)},t.fn.one=function(e,t,n,r){return this.on(e,t,n,r,1)};var b=function(){return!0},w=function(){return!1},x=/^([A-Z]|returnValue$|layer[XY]$|webkitMovement[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};function T(e,r){return!r&&e.isDefaultPrevented||(r||(r=e),t.each(E,function(t,n){var i=r[t];e[t]=function(){return this[n]=b,i&&i.apply(r,arguments)},e[n]=w}),e.timeStamp||(e.timeStamp=Date.now()),(r.defaultPrevented!==n?r.defaultPrevented:"returnValue"in r?!1===r.returnValue:r.getPreventDefault&&r.getPreventDefault())&&(e.isDefaultPrevented=b)),e}function A(e){var t,r={originalEvent:e};for(t in e)x.test(t)||e[t]===n||(r[t]=e[t]);return T(r,e)}t.fn.delegate=function(e,t,n){return this.on(t,e,n)},t.fn.undelegate=function(e,t,n){return this.off(t,e,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,r,a,c,u){var l,h,d=this;return e&&!o(e)?(t.each(e,function(e,t){d.on(e,r,a,t,u)}),d):(o(r)||s(c)||!1===c||(c=a,a=r,r=n),c!==n&&!1!==a||(c=a,a=n),!1===c&&(c=w),d.each(function(n,s){u&&(l=function(e){return y(s,e.type,c),c.apply(this,arguments)}),r&&(h=function(e){var n,o=t(e.target).closest(r,s).get(0);if(o&&o!==s)return n=t.extend(A(e),{currentTarget:o,liveFired:s}),(l||c).apply(o,[n].concat(i.call(arguments,1)))}),v(s,e,c,a,r,h||l)}))},t.fn.off=function(e,r,i){var a=this;return e&&!o(e)?(t.each(e,function(e,t){a.off(e,r,t)}),a):(o(r)||s(i)||!1===i||(i=r,r=n),!1===i&&(i=w),a.each(function(){y(this,e,i,r)}))},t.fn.trigger=function(e,n){return(e=o(e)||t.isPlainObject(e)?t.Event(e):T(e))._args=n,this.each(function(){e.type in l&&"function"==typeof this[e.type]?this[e.type]():"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var r,i;return this.each(function(s,a){(r=A(o(e)?t.Event(e):e))._args=n,r.target=a,t.each(p(a,e.type||e),function(e,t){if(i=t.proxy(r),r.isImmediatePropagationStopped())return!1})}),i},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return 0 in arguments?this.bind(e,t):this.trigger(e)}}),t.Event=function(e,t){o(e)||(e=(t=e).type);var n=document.createEvent(c[e]||"Events"),r=!0;if(t)for(var i in t)"bubbles"==i?r=!!t[i]:n[i]=t[i];return n.initEvent(e,r,!0),T(n)}}(t),function(e){var t,n=[];e.fn.remove=function(){return this.each(function(){this.parentNode&&("IMG"===this.tagName&&(n.push(this),this.src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",t&&clearTimeout(t),t=setTimeout(function(){n=[]},6e4)),this.parentNode.removeChild(this))})}}(t),function(e){var t={},n=e.fn.data,r=e.camelCase,i=e.expando="Zepto"+ +new Date,s=[];function o(n,o,a){var c=n[i]||(n[i]=++e.uuid),u=t[c]||(t[c]=function(t){var n={};return e.each(t.attributes||s,function(t,i){0==i.name.indexOf("data-")&&(n[r(i.name.replace("data-",""))]=e.zepto.deserializeValue(i.value))}),n}(n));return void 0!==o&&(u[r(o)]=a),u}e.fn.data=function(s,a){return void 0===a?e.isPlainObject(s)?this.each(function(t,n){e.each(s,function(e,t){o(n,e,t)})}):0 in this?function(s,a){var c=s[i],u=c&&t[c];if(void 0===a)return u||o(s);if(u){if(a in u)return u[a];var l=r(a);if(l in u)return u[l]}return n.call(e(s),a)}(this[0],s):void 0:this.each(function(){o(this,s,a)})},e.data=function(t,n,r){return e(t).data(n,r)},e.hasData=function(n){var r=n[i],s=r&&t[r];return!!s&&!e.isEmptyObject(s)},e.fn.removeData=function(n){return"string"==typeof n&&(n=n.split(/\s+/)),this.each(function(){var s=this[i],o=s&&t[s];o&&e.each(n||o,function(e){delete o[n?r(this):e]})})},["remove","empty"].forEach(function(t){var n=e.fn[t];e.fn[t]=function(){var e=this.find("*");return"remove"===t&&(e=e.add(this)),e.removeData(),n.call(this)}})}(t),t}(t)},3945(e){e.exports=function(e,t){t(e,0)}},4111(e,t,n){"use strict";var r="aaDataset",i="aaValue",s="aaDatum",o=n(3615),a=n(990),c=n(2206),u=n(9596),l=n(1294);function h(e){var t,n,r,i;(e=e||{}).templates=e.templates||{},e.source||o.error("missing source"),e.name&&(t=e.name,!/^[_a-zA-Z0-9-]+$/.test(t))&&o.error("invalid dataset name: "+e.name),this.query=null,this._isEmpty=!0,this.highlight=!!e.highlight,this.name=void 0===e.name||null===e.name?o.getUniqueId():e.name,this.source=e.source,this.displayFn=(i=(i=e.display||e.displayKey)||"value",o.isFunction(i)?i:function(e){return e[i]}),this.debounce=e.debounce,this.cache=!1!==e.cache,this.templates=(n=e.templates,r=this.displayFn,{empty:n.empty&&o.templatify(n.empty),header:n.header&&o.templatify(n.header),footer:n.footer&&o.templatify(n.footer),suggestion:n.suggestion||function(e){return"<p>"+r(e)+"</p>"}}),this.css=o.mixin({},u,e.appendTo?u.appendTo:{}),this.cssClasses=e.cssClasses=o.mixin({},u.defaultClasses,e.cssClasses||{}),this.cssClasses.prefix=e.cssClasses.formattedPrefix||o.formatPrefix(this.cssClasses.prefix,this.cssClasses.noPrefix);var s=o.className(this.cssClasses.prefix,this.cssClasses.dataset);this.$el=e.$menu&&e.$menu.find(s+"-"+this.name).length>0?a.element(e.$menu.find(s+"-"+this.name)[0]):a.element(c.dataset.replace("%CLASS%",this.name).replace("%PREFIX%",this.cssClasses.prefix).replace("%DATASET%",this.cssClasses.dataset)),this.$menu=e.$menu,this.clearCachedSuggestions()}h.extractDatasetName=function(e){return a.element(e).data(r)},h.extractValue=function(e){return a.element(e).data(i)},h.extractDatum=function(e){var t=a.element(e).data(s);return"string"==typeof t&&(t=JSON.parse(t)),t},o.mixin(h.prototype,l,{_render:function(e,t){if(this.$el){var n,u=this,l=[].slice.call(arguments,2);if(this.$el.empty(),n=t&&t.length,this._isEmpty=!n,!n&&this.templates.empty)this.$el.html(function(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!0}].concat(t),u.templates.empty.apply(this,t)}.apply(this,l)).prepend(u.templates.header?h.apply(this,l):null).append(u.templates.footer?d.apply(this,l):null);else if(n)this.$el.html(function(){var e,n,l=[].slice.call(arguments,0),h=this,d=c.suggestions.replace("%PREFIX%",this.cssClasses.prefix).replace("%SUGGESTIONS%",this.cssClasses.suggestions);return e=a.element(d).css(this.css.suggestions),n=o.map(t,function(e){var t,n=c.suggestion.replace("%PREFIX%",h.cssClasses.prefix).replace("%SUGGESTION%",h.cssClasses.suggestion);return(t=a.element(n).attr({role:"option",id:["option",Math.floor(1e8*Math.random())].join("-")}).append(u.templates.suggestion.apply(this,[e].concat(l)))).data(r,u.name),t.data(i,u.displayFn(e)||void 0),t.data(s,JSON.stringify(e)),t.children().each(function(){a.element(this).css(h.css.suggestionChild)}),t}),e.append.apply(e,n),e}.apply(this,l)).prepend(u.templates.header?h.apply(this,l):null).append(u.templates.footer?d.apply(this,l):null);else if(t&&!Array.isArray(t))throw new TypeError("suggestions must be an array");this.$menu&&this.$menu.addClass(this.cssClasses.prefix+(n?"with":"without")+"-"+this.name).removeClass(this.cssClasses.prefix+(n?"without":"with")+"-"+this.name),this.trigger("rendered",e)}function h(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!n}].concat(t),u.templates.header.apply(this,t)}function d(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!n}].concat(t),u.templates.footer.apply(this,t)}},getRoot:function(){return this.$el},update:function(e){function t(t){if(!this.canceled&&e===this.query){var n=[].slice.call(arguments,1);this.cacheSuggestions(e,t,n),this._render.apply(this,[e,t].concat(n))}}if(this.query=e,this.canceled=!1,this.shouldFetchFromCache(e))t.apply(this,[this.cachedSuggestions].concat(this.cachedRenderExtraArgs));else{var n=this,r=function(){n.canceled||n.source(e,t.bind(n))};this.debounce?(clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(function(){n.debounceTimeout=null,r()},this.debounce)):r()}},cacheSuggestions:function(e,t,n){this.cachedQuery=e,this.cachedSuggestions=t,this.cachedRenderExtraArgs=n},shouldFetchFromCache:function(e){return this.cache&&this.cachedQuery===e&&this.cachedSuggestions&&this.cachedSuggestions.length},clearCachedSuggestions:function(){delete this.cachedQuery,delete this.cachedSuggestions,delete this.cachedRenderExtraArgs},cancel:function(){this.canceled=!0},clear:function(){this.cancel(),this.$el.empty(),this.trigger("rendered","")},isEmpty:function(){return this._isEmpty},destroy:function(){this.clearCachedSuggestions(),this.$el=null}}),e.exports=h},4193(e){var t=1e3,n=60*t,r=60*n,i=24*r;function s(e,t,n){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+n:Math.ceil(e/t)+" "+n+"s"}e.exports=function(e,o){o=o||{};var a,c=typeof e;if("string"===c&&e.length>0)return function(e){if(!((e=String(e)).length>100)){var s=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(s){var o=parseFloat(s[1]);switch((s[2]||"ms").toLowerCase()){case"years":case"year":case"yrs":case"yr":case"y":return 315576e5*o;case"days":case"day":case"d":return o*i;case"hours":case"hour":case"hrs":case"hr":case"h":return o*r;case"minutes":case"minute":case"mins":case"min":case"m":return o*n;case"seconds":case"second":case"secs":case"sec":case"s":return o*t;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return o;default:return}}}}(e);if("number"===c&&!1===isNaN(e))return o.long?s(a=e,i,"day")||s(a,r,"hour")||s(a,n,"minute")||s(a,t,"second")||a+" ms":function(e){return e>=i?Math.round(e/i)+"d":e>=r?Math.round(e/r)+"h":e>=n?Math.round(e/n)+"m":e>=t?Math.round(e/t)+"s":e+"ms"}(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},4505(e,t){"use strict";t.test=function(){return!globalThis.setImmediate&&void 0!==globalThis.MessageChannel},t.install=function(e){var t=new globalThis.MessageChannel;return t.port1.onmessage=e,function(){t.port2.postMessage(0)}}},4619(e,t,n){"use strict";var r;r={9:"tab",27:"esc",37:"left",39:"right",13:"enter",38:"up",40:"down"};var i=n(3615),s=n(990),o=n(1294);function a(e){var t,n,o,a,c,u=this;(e=e||{}).input||i.error("input is missing"),t=i.bind(this._onBlur,this),n=i.bind(this._onFocus,this),o=i.bind(this._onKeydown,this),a=i.bind(this._onInput,this),this.$hint=s.element(e.hint),this.$input=s.element(e.input).on("blur.aa",t).on("focus.aa",n).on("keydown.aa",o),0===this.$hint.length&&(this.setHint=this.getHint=this.clearHint=this.clearHintIfInvalid=i.noop),i.isMsie()?this.$input.on("keydown.aa keypress.aa cut.aa paste.aa",function(e){r[e.which||e.keyCode]||i.defer(i.bind(u._onInput,u,e))}):this.$input.on("input.aa",a),this.query=this.$input.val(),this.$overflowHelper=(c=this.$input,s.element('<pre aria-hidden="true"></pre>').css({position:"absolute",visibility:"hidden",whiteSpace:"pre",fontFamily:c.css("font-family"),fontSize:c.css("font-size"),fontStyle:c.css("font-style"),fontVariant:c.css("font-variant"),fontWeight:c.css("font-weight"),wordSpacing:c.css("word-spacing"),letterSpacing:c.css("letter-spacing"),textIndent:c.css("text-indent"),textRendering:c.css("text-rendering"),textTransform:c.css("text-transform")}).insertAfter(c))}function c(e){return e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}a.normalizeQuery=function(e){return(e||"").replace(/^\s*/g,"").replace(/\s{2,}/g," ")},i.mixin(a.prototype,o,{_onBlur:function(){this.resetInputValue(),this.$input.removeAttr("aria-activedescendant"),this.trigger("blurred")},_onFocus:function(){this.trigger("focused")},_onKeydown:function(e){var t=r[e.which||e.keyCode];this._managePreventDefault(t,e),t&&this._shouldTrigger(t,e)&&this.trigger(t+"Keyed",e)},_onInput:function(){this._checkInputValue()},_managePreventDefault:function(e,t){var n,r,i;switch(e){case"tab":r=this.getHint(),i=this.getInputValue(),n=r&&r!==i&&!c(t);break;case"up":case"down":n=!c(t);break;default:n=!1}n&&t.preventDefault()},_shouldTrigger:function(e,t){return"tab"!==e||!c(t)},_checkInputValue:function(){var e,t,n,r,i;r=e=this.getInputValue(),i=this.query,n=!(!(t=a.normalizeQuery(r)===a.normalizeQuery(i))||!this.query)&&this.query.length!==e.length,this.query=e,t?n&&this.trigger("whitespaceChanged",this.query):this.trigger("queryChanged",this.query)},focus:function(){this.$input.focus()},blur:function(){this.$input.blur()},getQuery:function(){return this.query},setQuery:function(e){this.query=e},getInputValue:function(){return this.$input.val()},setInputValue:function(e,t){void 0===e&&(e=this.query),this.$input.val(e),t?this.clearHint():this._checkInputValue()},expand:function(){this.$input.attr("aria-expanded","true")},collapse:function(){this.$input.attr("aria-expanded","false")},setActiveDescendant:function(e){this.$input.attr("aria-activedescendant",e)},removeActiveDescendant:function(){this.$input.removeAttr("aria-activedescendant")},resetInputValue:function(){this.setInputValue(this.query,!0)},getHint:function(){return this.$hint.val()},setHint:function(e){this.$hint.val(e)},clearHint:function(){this.setHint("")},clearHintIfInvalid:function(){var e,t,n;n=(e=this.getInputValue())!==(t=this.getHint())&&0===t.indexOf(e),""!==e&&n&&!this.hasOverflow()||this.clearHint()},getLanguageDirection:function(){return(this.$input.css("direction")||"ltr").toLowerCase()},hasOverflow:function(){var e=this.$input.width()-2;return this.$overflowHelper.text(this.getInputValue()),this.$overflowHelper.width()>=e},isCursorAtEnd:function(){var e,t,n;return e=this.$input.val().length,t=this.$input[0].selectionStart,i.isNumber(t)?t===e:!document.selection||((n=document.selection.createRange()).moveStart("character",-e),e===n.text.length)},destroy:function(){this.$hint.off(".aa"),this.$input.off(".aa"),this.$hint=this.$input=this.$overflowHelper=null}}),e.exports=a},4651(e,t){var n;!function(t,n){"use strict";"object"==typeof e.exports?e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}:n(t)}("undefined"!=typeof window?window:this,function(r,i){"use strict";var s=[],o=Object.getPrototypeOf,a=s.slice,c=s.flat?function(e){return s.flat.call(e)}:function(e){return s.concat.apply([],e)},u=s.push,l=s.indexOf,h={},d=h.toString,p=h.hasOwnProperty,f=p.toString,m=f.call(Object),g={},v=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},y=function(e){return null!=e&&e===e.window},b=r.document,w={type:!0,src:!0,nonce:!0,noModule:!0};function x(e,t,n){var r,i,s=(n=n||b).createElement("script");if(s.text=e,t)for(r in w)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&s.setAttribute(r,i);n.head.appendChild(s).parentNode.removeChild(s)}function E(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?h[d.call(e)]||"object":typeof e}var T="3.7.1",A=/HTML$/i,C=function(e,t){return new C.fn.init(e,t)};function O(e){var t=!!e&&"length"in e&&e.length,n=E(e);return!v(e)&&!y(e)&&("array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e)}function S(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}C.fn=C.prototype={jquery:T,constructor:C,length:0,toArray:function(){return a.call(this)},get:function(e){return null==e?a.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=C.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return C.each(this,e)},map:function(e){return this.pushStack(C.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(a.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(C.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(C.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:s.sort,splice:s.splice},C.extend=C.fn.extend=function(){var e,t,n,r,i,s,o=arguments[0]||{},a=1,c=arguments.length,u=!1;for("boolean"==typeof o&&(u=o,o=arguments[a]||{},a++),"object"==typeof o||v(o)||(o={}),a===c&&(o=this,a--);a<c;a++)if(null!=(e=arguments[a]))for(t in e)r=e[t],"__proto__"!==t&&o!==r&&(u&&r&&(C.isPlainObject(r)||(i=Array.isArray(r)))?(n=o[t],s=i&&!Array.isArray(n)?[]:i||C.isPlainObject(n)?n:{},i=!1,o[t]=C.extend(u,s,r)):void 0!==r&&(o[t]=r));return o},C.extend({expando:"jQuery"+(T+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==d.call(e)||(t=o(e))&&("function"!=typeof(n=p.call(t,"constructor")&&t.constructor)||f.call(n)!==m))},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){x(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(O(e))for(n=e.length;r<n&&!1!==t.call(e[r],r,e[r]);r++);else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},text:function(e){var t,n="",r=0,i=e.nodeType;if(!i)for(;t=e[r++];)n+=C.text(t);return 1===i||11===i?e.textContent:9===i?e.documentElement.textContent:3===i||4===i?e.nodeValue:n},makeArray:function(e,t){var n=t||[];return null!=e&&(O(Object(e))?C.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:l.call(t,e,n)},isXMLDoc:function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!A.test(t||n&&n.nodeName||"HTML")},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,s=e.length,o=!n;i<s;i++)!t(e[i],i)!==o&&r.push(e[i]);return r},map:function(e,t,n){var r,i,s=0,o=[];if(O(e))for(r=e.length;s<r;s++)null!=(i=t(e[s],s,n))&&o.push(i);else for(s in e)null!=(i=t(e[s],s,n))&&o.push(i);return c(o)},guid:1,support:g}),"function"==typeof Symbol&&(C.fn[Symbol.iterator]=s[Symbol.iterator]),C.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){h["[object "+t+"]"]=t.toLowerCase()});var k=s.pop,_=s.sort,N=s.splice,D="[\\x20\\t\\r\\n\\f]",j=new RegExp("^"+D+"+|((?:^|[^\\\\])(?:\\\\.)*)"+D+"+$","g");C.contains=function(e,t){var n=t&&t.parentNode;return e===n||!(!n||1!==n.nodeType||!(e.contains?e.contains(n):e.compareDocumentPosition&&16&e.compareDocumentPosition(n)))};var L=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;function M(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e}C.escapeSelector=function(e){return(e+"").replace(L,M)};var $=b,F=u;!function(){var e,t,n,i,o,c,u,h,d,f,m=F,v=C.expando,y=0,b=0,w=ee(),x=ee(),E=ee(),T=ee(),A=function(e,t){return e===t&&(o=!0),0},O="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="(?:\\\\[\\da-fA-F]{1,6}"+D+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",M="\\["+D+"*("+L+")(?:"+D+"*([*^$|!~]?=)"+D+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+D+"*\\]",I=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",P=new RegExp(D+"+","g"),R=new RegExp("^"+D+"*,"+D+"*"),H=new RegExp("^"+D+"*([>+~]|"+D+")"+D+"*"),q=new RegExp(D+"|>"),B=new RegExp(I),V=new RegExp("^"+L+"$"),U={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+I),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+D+"*(even|odd|(([+-]|)(\\d*)n|)"+D+"*(?:([+-]|)"+D+"*(\\d+)|))"+D+"*\\)|)","i"),bool:new RegExp("^(?:"+O+")$","i"),needsContext:new RegExp("^"+D+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+D+"*((?:-\\d)?\\d*)"+D+"*\\)|)(?=[^-]|$)","i")},K=/^(?:input|select|textarea|button)$/i,W=/^h\d$/i,z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,J=/[+~]/,X=new RegExp("\\\\[\\da-fA-F]{1,6}"+D+"?|\\\\([^\\r\\n\\f])","g"),Q=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},G=function(){ce()},Y=de(function(e){return!0===e.disabled&&S(e,"fieldset")},{dir:"parentNode",next:"legend"});try{m.apply(s=a.call($.childNodes),$.childNodes),s[$.childNodes.length].nodeType}catch(e){m={apply:function(e,t){F.apply(e,a.call(t))},call:function(e){F.apply(e,a.call(arguments,1))}}}function Z(e,t,n,r){var i,s,o,a,u,l,p,f=t&&t.ownerDocument,y=t?t.nodeType:9;if(n=n||[],"string"!=typeof e||!e||1!==y&&9!==y&&11!==y)return n;if(!r&&(ce(t),t=t||c,h)){if(11!==y&&(u=z.exec(e)))if(i=u[1]){if(9===y){if(!(o=t.getElementById(i)))return n;if(o.id===i)return m.call(n,o),n}else if(f&&(o=f.getElementById(i))&&Z.contains(t,o)&&o.id===i)return m.call(n,o),n}else{if(u[2])return m.apply(n,t.getElementsByTagName(e)),n;if((i=u[3])&&t.getElementsByClassName)return m.apply(n,t.getElementsByClassName(i)),n}if(!(T[e+" "]||d&&d.test(e))){if(p=e,f=t,1===y&&(q.test(e)||H.test(e))){for((f=J.test(e)&&ae(t.parentNode)||t)==t&&g.scope||((a=t.getAttribute("id"))?a=C.escapeSelector(a):t.setAttribute("id",a=v)),s=(l=le(e)).length;s--;)l[s]=(a?"#"+a:":scope")+" "+he(l[s]);p=l.join(",")}try{return m.apply(n,f.querySelectorAll(p)),n}catch(t){T(e,!0)}finally{a===v&&t.removeAttribute("id")}}}return ye(e.replace(j,"$1"),t,n,r)}function ee(){var e=[];return function n(r,i){return e.push(r+" ")>t.cacheLength&&delete n[e.shift()],n[r+" "]=i}}function te(e){return e[v]=!0,e}function ne(e){var t=c.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function re(e){return function(t){return S(t,"input")&&t.type===e}}function ie(e){return function(t){return(S(t,"input")||S(t,"button"))&&t.type===e}}function se(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&Y(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function oe(e){return te(function(t){return t=+t,te(function(n,r){for(var i,s=e([],n.length,t),o=s.length;o--;)n[i=s[o]]&&(n[i]=!(r[i]=n[i]))})})}function ae(e){return e&&void 0!==e.getElementsByTagName&&e}function ce(e){var n,r=e?e.ownerDocument||e:$;return r!=c&&9===r.nodeType&&r.documentElement?(u=(c=r).documentElement,h=!C.isXMLDoc(c),f=u.matches||u.webkitMatchesSelector||u.msMatchesSelector,u.msMatchesSelector&&$!=c&&(n=c.defaultView)&&n.top!==n&&n.addEventListener("unload",G),g.getById=ne(function(e){return u.appendChild(e).id=C.expando,!c.getElementsByName||!c.getElementsByName(C.expando).length}),g.disconnectedMatch=ne(function(e){return f.call(e,"*")}),g.scope=ne(function(){return c.querySelectorAll(":scope")}),g.cssHas=ne(function(){try{return c.querySelector(":has(*,:jqfake)"),!1}catch(e){return!0}}),g.getById?(t.filter.ID=function(e){var t=e.replace(X,Q);return function(e){return e.getAttribute("id")===t}},t.find.ID=function(e,t){if(void 0!==t.getElementById&&h){var n=t.getElementById(e);return n?[n]:[]}}):(t.filter.ID=function(e){var t=e.replace(X,Q);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},t.find.ID=function(e,t){if(void 0!==t.getElementById&&h){var n,r,i,s=t.getElementById(e);if(s){if((n=s.getAttributeNode("id"))&&n.value===e)return[s];for(i=t.getElementsByName(e),r=0;s=i[r++];)if((n=s.getAttributeNode("id"))&&n.value===e)return[s]}return[]}}),t.find.TAG=function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):t.querySelectorAll(e)},t.find.CLASS=function(e,t){if(void 0!==t.getElementsByClassName&&h)return t.getElementsByClassName(e)},d=[],ne(function(e){var t;u.appendChild(e).innerHTML="<a id='"+v+"' href='' disabled='disabled'></a><select id='"+v+"-\r\\' disabled='disabled'><option selected=''></option></select>",e.querySelectorAll("[selected]").length||d.push("\\["+D+"*(?:value|"+O+")"),e.querySelectorAll("[id~="+v+"-]").length||d.push("~="),e.querySelectorAll("a#"+v+"+*").length||d.push(".#.+[+~]"),e.querySelectorAll(":checked").length||d.push(":checked"),(t=c.createElement("input")).setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),u.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&d.push(":enabled",":disabled"),(t=c.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||d.push("\\["+D+"*name"+D+"*="+D+"*(?:''|\"\")")}),g.cssHas||d.push(":has"),d=d.length&&new RegExp(d.join("|")),A=function(e,t){if(e===t)return o=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!g.sortDetached&&t.compareDocumentPosition(e)===n?e===c||e.ownerDocument==$&&Z.contains($,e)?-1:t===c||t.ownerDocument==$&&Z.contains($,t)?1:i?l.call(i,e)-l.call(i,t):0:4&n?-1:1)},c):c}for(e in Z.matches=function(e,t){return Z(e,null,null,t)},Z.matchesSelector=function(e,t){if(ce(e),h&&!T[t+" "]&&(!d||!d.test(t)))try{var n=f.call(e,t);if(n||g.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){T(t,!0)}return Z(t,c,null,[e]).length>0},Z.contains=function(e,t){return(e.ownerDocument||e)!=c&&ce(e),C.contains(e,t)},Z.attr=function(e,n){(e.ownerDocument||e)!=c&&ce(e);var r=t.attrHandle[n.toLowerCase()],i=r&&p.call(t.attrHandle,n.toLowerCase())?r(e,n,!h):void 0;return void 0!==i?i:e.getAttribute(n)},Z.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},C.uniqueSort=function(e){var t,n=[],r=0,s=0;if(o=!g.sortStable,i=!g.sortStable&&a.call(e,0),_.call(e,A),o){for(;t=e[s++];)t===e[s]&&(r=n.push(s));for(;r--;)N.call(e,n[r],1)}return i=null,e},C.fn.uniqueSort=function(){return this.pushStack(C.uniqueSort(a.apply(this)))},t=C.expr={cacheLength:50,createPseudo:te,match:U,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(X,Q),e[3]=(e[3]||e[4]||e[5]||"").replace(X,Q),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||Z.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&Z.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return U.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&B.test(n)&&(t=le(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(X,Q).toLowerCase();return"*"===e?function(){return!0}:function(e){return S(e,t)}},CLASS:function(e){var t=w[e+" "];return t||(t=new RegExp("(^|"+D+")"+e+"("+D+"|$)"))&&w(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=Z.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace(P," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var s="nth"!==e.slice(0,3),o="last"!==e.slice(-4),a="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,c){var u,l,h,d,p,f=s!==o?"nextSibling":"previousSibling",m=t.parentNode,g=a&&t.nodeName.toLowerCase(),b=!c&&!a,w=!1;if(m){if(s){for(;f;){for(h=t;h=h[f];)if(a?S(h,g):1===h.nodeType)return!1;p=f="only"===e&&!p&&"nextSibling"}return!0}if(p=[o?m.firstChild:m.lastChild],o&&b){for(w=(d=(u=(l=m[v]||(m[v]={}))[e]||[])[0]===y&&u[1])&&u[2],h=d&&m.childNodes[d];h=++d&&h&&h[f]||(w=d=0)||p.pop();)if(1===h.nodeType&&++w&&h===t){l[e]=[y,d,w];break}}else if(b&&(w=d=(u=(l=t[v]||(t[v]={}))[e]||[])[0]===y&&u[1]),!1===w)for(;(h=++d&&h&&h[f]||(w=d=0)||p.pop())&&(!(a?S(h,g):1===h.nodeType)||!++w||(b&&((l=h[v]||(h[v]={}))[e]=[y,w]),h!==t)););return(w-=i)===r||w%r===0&&w/r>=0}}},PSEUDO:function(e,n){var r,i=t.pseudos[e]||t.setFilters[e.toLowerCase()]||Z.error("unsupported pseudo: "+e);return i[v]?i(n):i.length>1?(r=[e,e,"",n],t.setFilters.hasOwnProperty(e.toLowerCase())?te(function(e,t){for(var r,s=i(e,n),o=s.length;o--;)e[r=l.call(e,s[o])]=!(t[r]=s[o])}):function(e){return i(e,0,r)}):i}},pseudos:{not:te(function(e){var t=[],n=[],r=ve(e.replace(j,"$1"));return r[v]?te(function(e,t,n,i){for(var s,o=r(e,null,i,[]),a=e.length;a--;)(s=o[a])&&(e[a]=!(t[a]=s))}):function(e,i,s){return t[0]=e,r(t,null,s,n),t[0]=null,!n.pop()}}),has:te(function(e){return function(t){return Z(e,t).length>0}}),contains:te(function(e){return e=e.replace(X,Q),function(t){return(t.textContent||C.text(t)).indexOf(e)>-1}}),lang:te(function(e){return V.test(e||"")||Z.error("unsupported lang: "+e),e=e.replace(X,Q).toLowerCase(),function(t){var n;do{if(n=h?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(e){var t=r.location&&r.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===u},focus:function(e){return e===function(){try{return c.activeElement}catch(e){}}()&&c.hasFocus()&&!!(e.type||e.href||~e.tabIndex)},enabled:se(!1),disabled:se(!0),checked:function(e){return S(e,"input")&&!!e.checked||S(e,"option")&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!t.pseudos.empty(e)},header:function(e){return W.test(e.nodeName)},input:function(e){return K.test(e.nodeName)},button:function(e){return S(e,"input")&&"button"===e.type||S(e,"button")},text:function(e){var t;return S(e,"input")&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:oe(function(){return[0]}),last:oe(function(e,t){return[t-1]}),eq:oe(function(e,t,n){return[n<0?n+t:n]}),even:oe(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:oe(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:oe(function(e,t,n){var r;for(r=n<0?n+t:n>t?t:n;--r>=0;)e.push(r);return e}),gt:oe(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}},t.pseudos.nth=t.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})t.pseudos[e]=re(e);for(e in{submit:!0,reset:!0})t.pseudos[e]=ie(e);function ue(){}function le(e,n){var r,i,s,o,a,c,u,l=x[e+" "];if(l)return n?0:l.slice(0);for(a=e,c=[],u=t.preFilter;a;){for(o in r&&!(i=R.exec(a))||(i&&(a=a.slice(i[0].length)||a),c.push(s=[])),r=!1,(i=H.exec(a))&&(r=i.shift(),s.push({value:r,type:i[0].replace(j," ")}),a=a.slice(r.length)),t.filter)!(i=U[o].exec(a))||u[o]&&!(i=u[o](i))||(r=i.shift(),s.push({value:r,type:o,matches:i}),a=a.slice(r.length));if(!r)break}return n?a.length:a?Z.error(e):x(e,c).slice(0)}function he(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function de(e,t,n){var r=t.dir,i=t.next,s=i||r,o=n&&"parentNode"===s,a=b++;return t.first?function(t,n,i){for(;t=t[r];)if(1===t.nodeType||o)return e(t,n,i);return!1}:function(t,n,c){var u,l,h=[y,a];if(c){for(;t=t[r];)if((1===t.nodeType||o)&&e(t,n,c))return!0}else for(;t=t[r];)if(1===t.nodeType||o)if(l=t[v]||(t[v]={}),i&&S(t,i))t=t[r]||t;else{if((u=l[s])&&u[0]===y&&u[1]===a)return h[2]=u[2];if(l[s]=h,h[2]=e(t,n,c))return!0}return!1}}function pe(e){return e.length>1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function fe(e,t,n,r,i){for(var s,o=[],a=0,c=e.length,u=null!=t;a<c;a++)(s=e[a])&&(n&&!n(s,r,i)||(o.push(s),u&&t.push(a)));return o}function me(e,t,n,r,i,s){return r&&!r[v]&&(r=me(r)),i&&!i[v]&&(i=me(i,s)),te(function(s,o,a,c){var u,h,d,p,f=[],g=[],v=o.length,y=s||function(e,t,n){for(var r=0,i=t.length;r<i;r++)Z(e,t[r],n);return n}(t||"*",a.nodeType?[a]:a,[]),b=!e||!s&&t?y:fe(y,f,e,a,c);if(n?n(b,p=i||(s?e:v||r)?[]:o,a,c):p=b,r)for(u=fe(p,g),r(u,[],a,c),h=u.length;h--;)(d=u[h])&&(p[g[h]]=!(b[g[h]]=d));if(s){if(i||e){if(i){for(u=[],h=p.length;h--;)(d=p[h])&&u.push(b[h]=d);i(null,p=[],u,c)}for(h=p.length;h--;)(d=p[h])&&(u=i?l.call(s,d):f[h])>-1&&(s[u]=!(o[u]=d))}}else p=fe(p===o?p.splice(v,p.length):p),i?i(null,o,p,c):m.apply(o,p)})}function ge(e){for(var r,i,s,o=e.length,a=t.relative[e[0].type],c=a||t.relative[" "],u=a?1:0,h=de(function(e){return e===r},c,!0),d=de(function(e){return l.call(r,e)>-1},c,!0),p=[function(e,t,i){var s=!a&&(i||t!=n)||((r=t).nodeType?h(e,t,i):d(e,t,i));return r=null,s}];u<o;u++)if(i=t.relative[e[u].type])p=[de(pe(p),i)];else{if((i=t.filter[e[u].type].apply(null,e[u].matches))[v]){for(s=++u;s<o&&!t.relative[e[s].type];s++);return me(u>1&&pe(p),u>1&&he(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace(j,"$1"),i,u<s&&ge(e.slice(u,s)),s<o&&ge(e=e.slice(s)),s<o&&he(e))}p.push(i)}return pe(p)}function ve(e,r){var i,s=[],o=[],a=E[e+" "];if(!a){for(r||(r=le(e)),i=r.length;i--;)(a=ge(r[i]))[v]?s.push(a):o.push(a);a=E(e,function(e,r){var i=r.length>0,s=e.length>0,o=function(o,a,u,l,d){var p,f,g,v=0,b="0",w=o&&[],x=[],E=n,T=o||s&&t.find.TAG("*",d),A=y+=null==E?1:Math.random()||.1,O=T.length;for(d&&(n=a==c||a||d);b!==O&&null!=(p=T[b]);b++){if(s&&p){for(f=0,a||p.ownerDocument==c||(ce(p),u=!h);g=e[f++];)if(g(p,a||c,u)){m.call(l,p);break}d&&(y=A)}i&&((p=!g&&p)&&v--,o&&w.push(p))}if(v+=b,i&&b!==v){for(f=0;g=r[f++];)g(w,x,a,u);if(o){if(v>0)for(;b--;)w[b]||x[b]||(x[b]=k.call(l));x=fe(x)}m.apply(l,x),d&&!o&&x.length>0&&v+r.length>1&&C.uniqueSort(l)}return d&&(y=A,n=E),w};return i?te(o):o}(o,s)),a.selector=e}return a}function ye(e,n,r,i){var s,o,a,c,u,l="function"==typeof e&&e,d=!i&&le(e=l.selector||e);if(r=r||[],1===d.length){if((o=d[0]=d[0].slice(0)).length>2&&"ID"===(a=o[0]).type&&9===n.nodeType&&h&&t.relative[o[1].type]){if(!(n=(t.find.ID(a.matches[0].replace(X,Q),n)||[])[0]))return r;l&&(n=n.parentNode),e=e.slice(o.shift().value.length)}for(s=U.needsContext.test(e)?0:o.length;s--&&(a=o[s],!t.relative[c=a.type]);)if((u=t.find[c])&&(i=u(a.matches[0].replace(X,Q),J.test(o[0].type)&&ae(n.parentNode)||n))){if(o.splice(s,1),!(e=i.length&&he(o)))return m.apply(r,i),r;break}}return(l||ve(e,d))(i,n,!h,r,!n||J.test(e)&&ae(n.parentNode)||n),r}ue.prototype=t.filters=t.pseudos,t.setFilters=new ue,g.sortStable=v.split("").sort(A).join("")===v,ce(),g.sortDetached=ne(function(e){return 1&e.compareDocumentPosition(c.createElement("fieldset"))}),C.find=Z,C.expr[":"]=C.expr.pseudos,C.unique=C.uniqueSort,Z.compile=ve,Z.select=ye,Z.setDocument=ce,Z.tokenize=le,Z.escape=C.escapeSelector,Z.getText=C.text,Z.isXML=C.isXMLDoc,Z.selectors=C.expr,Z.support=C.support,Z.uniqueSort=C.uniqueSort}();var I=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&C(e).is(n))break;r.push(e)}return r},P=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},R=C.expr.match.needsContext,H=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function q(e,t,n){return v(t)?C.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?C.grep(e,function(e){return e===t!==n}):"string"!=typeof t?C.grep(e,function(e){return l.call(t,e)>-1!==n}):C.filter(t,e,n)}C.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?C.find.matchesSelector(r,e)?[r]:[]:C.find.matches(e,C.grep(t,function(e){return 1===e.nodeType}))},C.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(C(e).filter(function(){for(t=0;t<r;t++)if(C.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)C.find(e,i[t],n);return r>1?C.uniqueSort(n):n},filter:function(e){return this.pushStack(q(this,e||[],!1))},not:function(e){return this.pushStack(q(this,e||[],!0))},is:function(e){return!!q(this,"string"==typeof e&&R.test(e)?C(e):e||[],!1).length}});var B,V=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(C.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||B,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:V.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof C?t[0]:t,C.merge(this,C.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:b,!0)),H.test(r[1])&&C.isPlainObject(t))for(r in t)v(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=b.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):v(e)?void 0!==n.ready?n.ready(e):e(C):C.makeArray(e,this)}).prototype=C.fn,B=C(b);var U=/^(?:parents|prev(?:Until|All))/,K={children:!0,contents:!0,next:!0,prev:!0};function W(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}C.fn.extend({has:function(e){var t=C(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(C.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,s=[],o="string"!=typeof e&&C(e);if(!R.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(o?o.index(n)>-1:1===n.nodeType&&C.find.matchesSelector(n,e))){s.push(n);break}return this.pushStack(s.length>1?C.uniqueSort(s):s)},index:function(e){return e?"string"==typeof e?l.call(C(e),this[0]):l.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(C.uniqueSort(C.merge(this.get(),C(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),C.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return I(e,"parentNode")},parentsUntil:function(e,t,n){return I(e,"parentNode",n)},next:function(e){return W(e,"nextSibling")},prev:function(e){return W(e,"previousSibling")},nextAll:function(e){return I(e,"nextSibling")},prevAll:function(e){return I(e,"previousSibling")},nextUntil:function(e,t,n){return I(e,"nextSibling",n)},prevUntil:function(e,t,n){return I(e,"previousSibling",n)},siblings:function(e){return P((e.parentNode||{}).firstChild,e)},children:function(e){return P(e.firstChild)},contents:function(e){return null!=e.contentDocument&&o(e.contentDocument)?e.contentDocument:(S(e,"template")&&(e=e.content||e),C.merge([],e.childNodes))}},function(e,t){C.fn[e]=function(n,r){var i=C.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=C.filter(r,i)),this.length>1&&(K[e]||C.uniqueSort(i),U.test(e)&&i.reverse()),this.pushStack(i)}});var z=/[^\x20\t\r\n\f]+/g;function J(e){return e}function X(e){throw e}function Q(e,t,n,r){var i;try{e&&v(i=e.promise)?i.call(e).done(t).fail(n):e&&v(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}C.Callbacks=function(e){e="string"==typeof e?function(e){var t={};return C.each(e.match(z)||[],function(e,n){t[n]=!0}),t}(e):C.extend({},e);var t,n,r,i,s=[],o=[],a=-1,c=function(){for(i=i||e.once,r=t=!0;o.length;a=-1)for(n=o.shift();++a<s.length;)!1===s[a].apply(n[0],n[1])&&e.stopOnFalse&&(a=s.length,n=!1);e.memory||(n=!1),t=!1,i&&(s=n?[]:"")},u={add:function(){return s&&(n&&!t&&(a=s.length-1,o.push(n)),function t(n){C.each(n,function(n,r){v(r)?e.unique&&u.has(r)||s.push(r):r&&r.length&&"string"!==E(r)&&t(r)})}(arguments),n&&!t&&c()),this},remove:function(){return C.each(arguments,function(e,t){for(var n;(n=C.inArray(t,s,n))>-1;)s.splice(n,1),n<=a&&a--}),this},has:function(e){return e?C.inArray(e,s)>-1:s.length>0},empty:function(){return s&&(s=[]),this},disable:function(){return i=o=[],s=n="",this},disabled:function(){return!s},lock:function(){return i=o=[],n||t||(s=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],o.push(n),t||c()),this},fire:function(){return u.fireWith(this,arguments),this},fired:function(){return!!r}};return u},C.extend({Deferred:function(e){var t=[["notify","progress",C.Callbacks("memory"),C.Callbacks("memory"),2],["resolve","done",C.Callbacks("once memory"),C.Callbacks("once memory"),0,"resolved"],["reject","fail",C.Callbacks("once memory"),C.Callbacks("once memory"),1,"rejected"]],n="pending",i={state:function(){return n},always:function(){return s.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return C.Deferred(function(n){C.each(t,function(t,r){var i=v(e[r[4]])&&e[r[4]];s[r[1]](function(){var e=i&&i.apply(this,arguments);e&&v(e.promise)?e.promise().progress(n.notify).done(n.resolve).fail(n.reject):n[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(e,n,i){var s=0;function o(e,t,n,i){return function(){var a=this,c=arguments,u=function(){var r,u;if(!(e<s)){if((r=n.apply(a,c))===t.promise())throw new TypeError("Thenable self-resolution");u=r&&("object"==typeof r||"function"==typeof r)&&r.then,v(u)?i?u.call(r,o(s,t,J,i),o(s,t,X,i)):(s++,u.call(r,o(s,t,J,i),o(s,t,X,i),o(s,t,J,t.notifyWith))):(n!==J&&(a=void 0,c=[r]),(i||t.resolveWith)(a,c))}},l=i?u:function(){try{u()}catch(r){C.Deferred.exceptionHook&&C.Deferred.exceptionHook(r,l.error),e+1>=s&&(n!==X&&(a=void 0,c=[r]),t.rejectWith(a,c))}};e?l():(C.Deferred.getErrorHook?l.error=C.Deferred.getErrorHook():C.Deferred.getStackHook&&(l.error=C.Deferred.getStackHook()),r.setTimeout(l))}}return C.Deferred(function(r){t[0][3].add(o(0,r,v(i)?i:J,r.notifyWith)),t[1][3].add(o(0,r,v(e)?e:J)),t[2][3].add(o(0,r,v(n)?n:X))}).promise()},promise:function(e){return null!=e?C.extend(e,i):i}},s={};return C.each(t,function(e,r){var o=r[2],a=r[5];i[r[1]]=o.add,a&&o.add(function(){n=a},t[3-e][2].disable,t[3-e][3].disable,t[0][2].lock,t[0][3].lock),o.add(r[3].fire),s[r[0]]=function(){return s[r[0]+"With"](this===s?void 0:this,arguments),this},s[r[0]+"With"]=o.fireWith}),i.promise(s),e&&e.call(s,s),s},when:function(e){var t=arguments.length,n=t,r=Array(n),i=a.call(arguments),s=C.Deferred(),o=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?a.call(arguments):n,--t||s.resolveWith(r,i)}};if(t<=1&&(Q(e,s.done(o(n)).resolve,s.reject,!t),"pending"===s.state()||v(i[n]&&i[n].then)))return s.then();for(;n--;)Q(i[n],o(n),s.reject);return s.promise()}});var G=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;C.Deferred.exceptionHook=function(e,t){r.console&&r.console.warn&&e&&G.test(e.name)&&r.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},C.readyException=function(e){r.setTimeout(function(){throw e})};var Y=C.Deferred();function Z(){b.removeEventListener("DOMContentLoaded",Z),r.removeEventListener("load",Z),C.ready()}C.fn.ready=function(e){return Y.then(e).catch(function(e){C.readyException(e)}),this},C.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--C.readyWait:C.isReady)||(C.isReady=!0,!0!==e&&--C.readyWait>0||Y.resolveWith(b,[C]))}}),C.ready.then=Y.then,"complete"===b.readyState||"loading"!==b.readyState&&!b.documentElement.doScroll?r.setTimeout(C.ready):(b.addEventListener("DOMContentLoaded",Z),r.addEventListener("load",Z));var ee=function(e,t,n,r,i,s,o){var a=0,c=e.length,u=null==n;if("object"===E(n))for(a in i=!0,n)ee(e,t,a,n[a],!0,s,o);else if(void 0!==r&&(i=!0,v(r)||(o=!0),u&&(o?(t.call(e,r),t=null):(u=t,t=function(e,t,n){return u.call(C(e),n)})),t))for(;a<c;a++)t(e[a],n,o?r:r.call(e[a],a,t(e[a],n)));return i?e:u?t.call(e):c?t(e[0],n):s},te=/^-ms-/,ne=/-([a-z])/g;function re(e,t){return t.toUpperCase()}function ie(e){return e.replace(te,"ms-").replace(ne,re)}var se=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function oe(){this.expando=C.expando+oe.uid++}oe.uid=1,oe.prototype={cache:function(e){var t=e[this.expando];return t||(t={},se(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[ie(t)]=n;else for(r in t)i[ie(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][ie(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(ie):(t=ie(t))in r?[t]:t.match(z)||[]).length;for(;n--;)delete r[t[n]]}(void 0===t||C.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!C.isEmptyObject(t)}};var ae=new oe,ce=new oe,ue=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,le=/[A-Z]/g;function he(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(le,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n=function(e){return"true"===e||"false"!==e&&("null"===e?null:e===+e+""?+e:ue.test(e)?JSON.parse(e):e)}(n)}catch(e){}ce.set(e,t,n)}else n=void 0;return n}C.extend({hasData:function(e){return ce.hasData(e)||ae.hasData(e)},data:function(e,t,n){return ce.access(e,t,n)},removeData:function(e,t){ce.remove(e,t)},_data:function(e,t,n){return ae.access(e,t,n)},_removeData:function(e,t){ae.remove(e,t)}}),C.fn.extend({data:function(e,t){var n,r,i,s=this[0],o=s&&s.attributes;if(void 0===e){if(this.length&&(i=ce.get(s),1===s.nodeType&&!ae.get(s,"hasDataAttrs"))){for(n=o.length;n--;)o[n]&&0===(r=o[n].name).indexOf("data-")&&(r=ie(r.slice(5)),he(s,r,i[r]));ae.set(s,"hasDataAttrs",!0)}return i}return"object"==typeof e?this.each(function(){ce.set(this,e)}):ee(this,function(t){var n;if(s&&void 0===t)return void 0!==(n=ce.get(s,e))||void 0!==(n=he(s,e))?n:void 0;this.each(function(){ce.set(this,e,t)})},null,t,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){ce.remove(this,e)})}}),C.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=ae.get(e,t),n&&(!r||Array.isArray(n)?r=ae.access(e,t,C.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=C.queue(e,t),r=n.length,i=n.shift(),s=C._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete s.stop,i.call(e,function(){C.dequeue(e,t)},s)),!r&&s&&s.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return ae.get(e,n)||ae.access(e,n,{empty:C.Callbacks("once memory").add(function(){ae.remove(e,[t+"queue",n])})})}}),C.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length<n?C.queue(this[0],e):void 0===t?this:this.each(function(){var n=C.queue(this,e,t);C._queueHooks(this,e),"fx"===e&&"inprogress"!==n[0]&&C.dequeue(this,e)})},dequeue:function(e){return this.each(function(){C.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=C.Deferred(),s=this,o=this.length,a=function(){--r||i.resolveWith(s,[s])};for("string"!=typeof e&&(t=e,e=void 0),e=e||"fx";o--;)(n=ae.get(s[o],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(a));return a(),i.promise(t)}});var de=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,pe=new RegExp("^(?:([+-])=|)("+de+")([a-z%]*)$","i"),fe=["Top","Right","Bottom","Left"],me=b.documentElement,ge=function(e){return C.contains(e.ownerDocument,e)},ve={composed:!0};me.getRootNode&&(ge=function(e){return C.contains(e.ownerDocument,e)||e.getRootNode(ve)===e.ownerDocument});var ye=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ge(e)&&"none"===C.css(e,"display")};function be(e,t,n,r){var i,s,o=20,a=r?function(){return r.cur()}:function(){return C.css(e,t,"")},c=a(),u=n&&n[3]||(C.cssNumber[t]?"":"px"),l=e.nodeType&&(C.cssNumber[t]||"px"!==u&&+c)&&pe.exec(C.css(e,t));if(l&&l[3]!==u){for(c/=2,u=u||l[3],l=+c||1;o--;)C.style(e,t,l+u),(1-s)*(1-(s=a()/c||.5))<=0&&(o=0),l/=s;l*=2,C.style(e,t,l+u),n=n||[]}return n&&(l=+l||+c||0,i=n[1]?l+(n[1]+1)*n[2]:+n[2],r&&(r.unit=u,r.start=l,r.end=i)),i}var we={};function xe(e){var t,n=e.ownerDocument,r=e.nodeName,i=we[r];return i||(t=n.body.appendChild(n.createElement(r)),i=C.css(t,"display"),t.parentNode.removeChild(t),"none"===i&&(i="block"),we[r]=i,i)}function Ee(e,t){for(var n,r,i=[],s=0,o=e.length;s<o;s++)(r=e[s]).style&&(n=r.style.display,t?("none"===n&&(i[s]=ae.get(r,"display")||null,i[s]||(r.style.display="")),""===r.style.display&&ye(r)&&(i[s]=xe(r))):"none"!==n&&(i[s]="none",ae.set(r,"display",n)));for(s=0;s<o;s++)null!=i[s]&&(e[s].style.display=i[s]);return e}C.fn.extend({show:function(){return Ee(this,!0)},hide:function(){return Ee(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ye(this)?C(this).show():C(this).hide()})}});var Te,Ae,Ce=/^(?:checkbox|radio)$/i,Oe=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,Se=/^$|^module$|\/(?:java|ecma)script/i;Te=b.createDocumentFragment().appendChild(b.createElement("div")),(Ae=b.createElement("input")).setAttribute("type","radio"),Ae.setAttribute("checked","checked"),Ae.setAttribute("name","t"),Te.appendChild(Ae),g.checkClone=Te.cloneNode(!0).cloneNode(!0).lastChild.checked,Te.innerHTML="<textarea>x</textarea>",g.noCloneChecked=!!Te.cloneNode(!0).lastChild.defaultValue,Te.innerHTML="<option></option>",g.option=!!Te.lastChild;var ke={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function _e(e,t){var n;return n=void 0!==e.getElementsByTagName?e.getElementsByTagName(t||"*"):void 0!==e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?C.merge([e],n):n}function Ne(e,t){for(var n=0,r=e.length;n<r;n++)ae.set(e[n],"globalEval",!t||ae.get(t[n],"globalEval"))}ke.tbody=ke.tfoot=ke.colgroup=ke.caption=ke.thead,ke.th=ke.td,g.option||(ke.optgroup=ke.option=[1,"<select multiple='multiple'>","</select>"]);var De=/<|&#?\w+;/;function je(e,t,n,r,i){for(var s,o,a,c,u,l,h=t.createDocumentFragment(),d=[],p=0,f=e.length;p<f;p++)if((s=e[p])||0===s)if("object"===E(s))C.merge(d,s.nodeType?[s]:s);else if(De.test(s)){for(o=o||h.appendChild(t.createElement("div")),a=(Oe.exec(s)||["",""])[1].toLowerCase(),c=ke[a]||ke._default,o.innerHTML=c[1]+C.htmlPrefilter(s)+c[2],l=c[0];l--;)o=o.lastChild;C.merge(d,o.childNodes),(o=h.firstChild).textContent=""}else d.push(t.createTextNode(s));for(h.textContent="",p=0;s=d[p++];)if(r&&C.inArray(s,r)>-1)i&&i.push(s);else if(u=ge(s),o=_e(h.appendChild(s),"script"),u&&Ne(o),n)for(l=0;s=o[l++];)Se.test(s.type||"")&&n.push(s);return h}var Le=/^([^.]*)(?:\.(.+)|)/;function Me(){return!0}function $e(){return!1}function Fe(e,t,n,r,i,s){var o,a;if("object"==typeof t){for(a in"string"!=typeof n&&(r=r||n,n=void 0),t)Fe(e,a,n,r,t[a],s);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=$e;else if(!i)return e;return 1===s&&(o=i,i=function(e){return C().off(e),o.apply(this,arguments)},i.guid=o.guid||(o.guid=C.guid++)),e.each(function(){C.event.add(this,t,i,r,n)})}function Ie(e,t,n){n?(ae.set(e,t,!1),C.event.add(e,t,{namespace:!1,handler:function(e){var n,r=ae.get(this,t);if(1&e.isTrigger&&this[t]){if(r)(C.event.special[t]||{}).delegateType&&e.stopPropagation();else if(r=a.call(arguments),ae.set(this,t,r),this[t](),n=ae.get(this,t),ae.set(this,t,!1),r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n}else r&&(ae.set(this,t,C.event.trigger(r[0],r.slice(1),this)),e.stopPropagation(),e.isImmediatePropagationStopped=Me)}})):void 0===ae.get(e,t)&&C.event.add(e,t,Me)}C.event={global:{},add:function(e,t,n,r,i){var s,o,a,c,u,l,h,d,p,f,m,g=ae.get(e);if(se(e))for(n.handler&&(n=(s=n).handler,i=s.selector),i&&C.find.matchesSelector(me,i),n.guid||(n.guid=C.guid++),(c=g.events)||(c=g.events=Object.create(null)),(o=g.handle)||(o=g.handle=function(t){return void 0!==C&&C.event.triggered!==t.type?C.event.dispatch.apply(e,arguments):void 0}),u=(t=(t||"").match(z)||[""]).length;u--;)p=m=(a=Le.exec(t[u])||[])[1],f=(a[2]||"").split(".").sort(),p&&(h=C.event.special[p]||{},p=(i?h.delegateType:h.bindType)||p,h=C.event.special[p]||{},l=C.extend({type:p,origType:m,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&C.expr.match.needsContext.test(i),namespace:f.join(".")},s),(d=c[p])||((d=c[p]=[]).delegateCount=0,h.setup&&!1!==h.setup.call(e,r,f,o)||e.addEventListener&&e.addEventListener(p,o)),h.add&&(h.add.call(e,l),l.handler.guid||(l.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,l):d.push(l),C.event.global[p]=!0)},remove:function(e,t,n,r,i){var s,o,a,c,u,l,h,d,p,f,m,g=ae.hasData(e)&&ae.get(e);if(g&&(c=g.events)){for(u=(t=(t||"").match(z)||[""]).length;u--;)if(p=m=(a=Le.exec(t[u])||[])[1],f=(a[2]||"").split(".").sort(),p){for(h=C.event.special[p]||{},d=c[p=(r?h.delegateType:h.bindType)||p]||[],a=a[2]&&new RegExp("(^|\\.)"+f.join("\\.(?:.*\\.|)")+"(\\.|$)"),o=s=d.length;s--;)l=d[s],!i&&m!==l.origType||n&&n.guid!==l.guid||a&&!a.test(l.namespace)||r&&r!==l.selector&&("**"!==r||!l.selector)||(d.splice(s,1),l.selector&&d.delegateCount--,h.remove&&h.remove.call(e,l));o&&!d.length&&(h.teardown&&!1!==h.teardown.call(e,f,g.handle)||C.removeEvent(e,p,g.handle),delete c[p])}else for(p in c)C.event.remove(e,p+t[u],n,r,!0);C.isEmptyObject(c)&&ae.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,s,o,a=new Array(arguments.length),c=C.event.fix(e),u=(ae.get(this,"events")||Object.create(null))[c.type]||[],l=C.event.special[c.type]||{};for(a[0]=c,t=1;t<arguments.length;t++)a[t]=arguments[t];if(c.delegateTarget=this,!l.preDispatch||!1!==l.preDispatch.call(this,c)){for(o=C.event.handlers.call(this,c,u),t=0;(i=o[t++])&&!c.isPropagationStopped();)for(c.currentTarget=i.elem,n=0;(s=i.handlers[n++])&&!c.isImmediatePropagationStopped();)c.rnamespace&&!1!==s.namespace&&!c.rnamespace.test(s.namespace)||(c.handleObj=s,c.data=s.data,void 0!==(r=((C.event.special[s.origType]||{}).handle||s.handler).apply(i.elem,a))&&!1===(c.result=r)&&(c.preventDefault(),c.stopPropagation()));return l.postDispatch&&l.postDispatch.call(this,c),c.result}},handlers:function(e,t){var n,r,i,s,o,a=[],c=t.delegateCount,u=e.target;if(c&&u.nodeType&&!("click"===e.type&&e.button>=1))for(;u!==this;u=u.parentNode||this)if(1===u.nodeType&&("click"!==e.type||!0!==u.disabled)){for(s=[],o={},n=0;n<c;n++)void 0===o[i=(r=t[n]).selector+" "]&&(o[i]=r.needsContext?C(i,this).index(u)>-1:C.find(i,this,null,[u]).length),o[i]&&s.push(r);s.length&&a.push({elem:u,handlers:s})}return u=this,c<t.length&&a.push({elem:u,handlers:t.slice(c)}),a},addProp:function(e,t){Object.defineProperty(C.Event.prototype,e,{enumerable:!0,configurable:!0,get:v(t)?function(){if(this.originalEvent)return t(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[e]},set:function(t){Object.defineProperty(this,e,{enumerable:!0,configurable:!0,writable:!0,value:t})}})},fix:function(e){return e[C.expando]?e:new C.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return Ce.test(t.type)&&t.click&&S(t,"input")&&Ie(t,"click",!0),!1},trigger:function(e){var t=this||e;return Ce.test(t.type)&&t.click&&S(t,"input")&&Ie(t,"click"),!0},_default:function(e){var t=e.target;return Ce.test(t.type)&&t.click&&S(t,"input")&&ae.get(t,"click")||S(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},C.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},C.Event=function(e,t){if(!(this instanceof C.Event))return new C.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?Me:$e,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&C.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[C.expando]=!0},C.Event.prototype={constructor:C.Event,isDefaultPrevented:$e,isPropagationStopped:$e,isImmediatePropagationStopped:$e,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=Me,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=Me,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=Me,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},C.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,char:!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:!0},C.event.addProp),C.each({focus:"focusin",blur:"focusout"},function(e,t){function n(e){if(b.documentMode){var n=ae.get(this,"handle"),r=C.event.fix(e);r.type="focusin"===e.type?"focus":"blur",r.isSimulated=!0,n(e),r.target===r.currentTarget&&n(r)}else C.event.simulate(t,e.target,C.event.fix(e))}C.event.special[e]={setup:function(){var r;if(Ie(this,e,!0),!b.documentMode)return!1;(r=ae.get(this,t))||this.addEventListener(t,n),ae.set(this,t,(r||0)+1)},trigger:function(){return Ie(this,e),!0},teardown:function(){var e;if(!b.documentMode)return!1;(e=ae.get(this,t)-1)?ae.set(this,t,e):(this.removeEventListener(t,n),ae.remove(this,t))},_default:function(t){return ae.get(t.target,e)},delegateType:t},C.event.special[t]={setup:function(){var r=this.ownerDocument||this.document||this,i=b.documentMode?this:r,s=ae.get(i,t);s||(b.documentMode?this.addEventListener(t,n):r.addEventListener(e,n,!0)),ae.set(i,t,(s||0)+1)},teardown:function(){var r=this.ownerDocument||this.document||this,i=b.documentMode?this:r,s=ae.get(i,t)-1;s?ae.set(i,t,s):(b.documentMode?this.removeEventListener(t,n):r.removeEventListener(e,n,!0),ae.remove(i,t))}}}),C.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,t){C.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=e.relatedTarget,i=e.handleObj;return r&&(r===this||C.contains(this,r))||(e.type=i.origType,n=i.handler.apply(this,arguments),e.type=t),n}}}),C.fn.extend({on:function(e,t,n,r){return Fe(this,e,t,n,r)},one:function(e,t,n,r){return Fe(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,C(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=$e),this.each(function(){C.event.remove(this,e,n,t)})}});var Pe=/<script|<style|<link/i,Re=/checked\s*(?:[^=]|=\s*.checked.)/i,He=/^\s*<!\[CDATA\[|\]\]>\s*$/g;function qe(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&C(e).children("tbody")[0]||e}function Be(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Ve(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Ue(e,t){var n,r,i,s,o,a;if(1===t.nodeType){if(ae.hasData(e)&&(a=ae.get(e).events))for(i in ae.remove(t,"handle events"),a)for(n=0,r=a[i].length;n<r;n++)C.event.add(t,i,a[i][n]);ce.hasData(e)&&(s=ce.access(e),o=C.extend({},s),ce.set(t,o))}}function Ke(e,t){var n=t.nodeName.toLowerCase();"input"===n&&Ce.test(e.type)?t.checked=e.checked:"input"!==n&&"textarea"!==n||(t.defaultValue=e.defaultValue)}function We(e,t,n,r){t=c(t);var i,s,o,a,u,l,h=0,d=e.length,p=d-1,f=t[0],m=v(f);if(m||d>1&&"string"==typeof f&&!g.checkClone&&Re.test(f))return e.each(function(i){var s=e.eq(i);m&&(t[0]=f.call(this,i,s.html())),We(s,t,n,r)});if(d&&(s=(i=je(t,e[0].ownerDocument,!1,e,r)).firstChild,1===i.childNodes.length&&(i=s),s||r)){for(a=(o=C.map(_e(i,"script"),Be)).length;h<d;h++)u=i,h!==p&&(u=C.clone(u,!0,!0),a&&C.merge(o,_e(u,"script"))),n.call(e[h],u,h);if(a)for(l=o[o.length-1].ownerDocument,C.map(o,Ve),h=0;h<a;h++)u=o[h],Se.test(u.type||"")&&!ae.access(u,"globalEval")&&C.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?C._evalUrl&&!u.noModule&&C._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):x(u.textContent.replace(He,""),u,l))}return e}function ze(e,t,n){for(var r,i=t?C.filter(t,e):e,s=0;null!=(r=i[s]);s++)n||1!==r.nodeType||C.cleanData(_e(r)),r.parentNode&&(n&&ge(r)&&Ne(_e(r,"script")),r.parentNode.removeChild(r));return e}C.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,s,o,a=e.cloneNode(!0),c=ge(e);if(!(g.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||C.isXMLDoc(e)))for(o=_e(a),r=0,i=(s=_e(e)).length;r<i;r++)Ke(s[r],o[r]);if(t)if(n)for(s=s||_e(e),o=o||_e(a),r=0,i=s.length;r<i;r++)Ue(s[r],o[r]);else Ue(e,a);return(o=_e(a,"script")).length>0&&Ne(o,!c&&_e(e,"script")),a},cleanData:function(e){for(var t,n,r,i=C.event.special,s=0;void 0!==(n=e[s]);s++)if(se(n)){if(t=n[ae.expando]){if(t.events)for(r in t.events)i[r]?C.event.remove(n,r):C.removeEvent(n,r,t.handle);n[ae.expando]=void 0}n[ce.expando]&&(n[ce.expando]=void 0)}}}),C.fn.extend({detach:function(e){return ze(this,e,!0)},remove:function(e){return ze(this,e)},text:function(e){return ee(this,function(e){return void 0===e?C.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return We(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||qe(this,e).appendChild(e)})},prepend:function(){return We(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=qe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return We(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return We(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(C.cleanData(_e(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return C.clone(this,e,t)})},html:function(e){return ee(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Pe.test(e)&&!ke[(Oe.exec(e)||["",""])[1].toLowerCase()]){e=C.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(C.cleanData(_e(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var e=[];return We(this,arguments,function(t){var n=this.parentNode;C.inArray(this,e)<0&&(C.cleanData(_e(this)),n&&n.replaceChild(t,this))},e)}}),C.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){C.fn[e]=function(e){for(var n,r=[],i=C(e),s=i.length-1,o=0;o<=s;o++)n=o===s?this:this.clone(!0),C(i[o])[t](n),u.apply(r,n.get());return this.pushStack(r)}});var Je=new RegExp("^("+de+")(?!px)[a-z%]+$","i"),Xe=/^--/,Qe=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=r),t.getComputedStyle(e)},Ge=function(e,t,n){var r,i,s={};for(i in t)s[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=s[i];return r},Ye=new RegExp(fe.join("|"),"i");function Ze(e,t,n){var r,i,s,o,a=Xe.test(t),c=e.style;return(n=n||Qe(e))&&(o=n.getPropertyValue(t)||n[t],a&&o&&(o=o.replace(j,"$1")||void 0),""!==o||ge(e)||(o=C.style(e,t)),!g.pixelBoxStyles()&&Je.test(o)&&Ye.test(t)&&(r=c.width,i=c.minWidth,s=c.maxWidth,c.minWidth=c.maxWidth=c.width=o,o=n.width,c.width=r,c.minWidth=i,c.maxWidth=s)),void 0!==o?o+"":o}function et(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",me.appendChild(u).appendChild(l);var e=r.getComputedStyle(l);n="1%"!==e.top,c=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),i=36===t(e.width),l.style.position="absolute",s=12===t(l.offsetWidth/3),me.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,i,s,o,a,c,u=b.createElement("div"),l=b.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",g.clearCloneStyle="content-box"===l.style.backgroundClip,C.extend(g,{boxSizingReliable:function(){return e(),i},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),c},scrollboxSize:function(){return e(),s},reliableTrDimensions:function(){var e,t,n,i;return null==a&&(e=b.createElement("table"),t=b.createElement("tr"),n=b.createElement("div"),e.style.cssText="position:absolute;left:-11111px;border-collapse:separate",t.style.cssText="box-sizing:content-box;border:1px solid",t.style.height="1px",n.style.height="9px",n.style.display="block",me.appendChild(e).appendChild(t).appendChild(n),i=r.getComputedStyle(t),a=parseInt(i.height,10)+parseInt(i.borderTopWidth,10)+parseInt(i.borderBottomWidth,10)===t.offsetHeight,me.removeChild(e)),a}}))}();var tt=["Webkit","Moz","ms"],nt=b.createElement("div").style,rt={};function it(e){return C.cssProps[e]||rt[e]||(e in nt?e:rt[e]=function(e){for(var t=e[0].toUpperCase()+e.slice(1),n=tt.length;n--;)if((e=tt[n]+t)in nt)return e}(e)||e)}var st=/^(none|table(?!-c[ea]).+)/,ot={position:"absolute",visibility:"hidden",display:"block"},at={letterSpacing:"0",fontWeight:"400"};function ct(e,t,n){var r=pe.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function ut(e,t,n,r,i,s){var o="width"===t?1:0,a=0,c=0,u=0;if(n===(r?"border":"content"))return 0;for(;o<4;o+=2)"margin"===n&&(u+=C.css(e,n+fe[o],!0,i)),r?("content"===n&&(c-=C.css(e,"padding"+fe[o],!0,i)),"margin"!==n&&(c-=C.css(e,"border"+fe[o]+"Width",!0,i))):(c+=C.css(e,"padding"+fe[o],!0,i),"padding"!==n?c+=C.css(e,"border"+fe[o]+"Width",!0,i):a+=C.css(e,"border"+fe[o]+"Width",!0,i));return!r&&s>=0&&(c+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-s-c-a-.5))||0),c+u}function lt(e,t,n){var r=Qe(e),i=(!g.boxSizingReliable()||n)&&"border-box"===C.css(e,"boxSizing",!1,r),s=i,o=Ze(e,t,r),a="offset"+t[0].toUpperCase()+t.slice(1);if(Je.test(o)){if(!n)return o;o="auto"}return(!g.boxSizingReliable()&&i||!g.reliableTrDimensions()&&S(e,"tr")||"auto"===o||!parseFloat(o)&&"inline"===C.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===C.css(e,"boxSizing",!1,r),(s=a in e)&&(o=e[a])),(o=parseFloat(o)||0)+ut(e,t,n||(i?"border":"content"),s,r,o)+"px"}function ht(e,t,n,r,i){return new ht.prototype.init(e,t,n,r,i)}C.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Ze(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,aspectRatio:!0,borderImageSlice:!0,columnCount:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,scale:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeMiterlimit:!0,strokeOpacity:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,s,o,a=ie(t),c=Xe.test(t),u=e.style;if(c||(t=it(a)),o=C.cssHooks[t]||C.cssHooks[a],void 0===n)return o&&"get"in o&&void 0!==(i=o.get(e,!1,r))?i:u[t];"string"==(s=typeof n)&&(i=pe.exec(n))&&i[1]&&(n=be(e,t,i),s="number"),null!=n&&n==n&&("number"!==s||c||(n+=i&&i[3]||(C.cssNumber[a]?"":"px")),g.clearCloneStyle||""!==n||0!==t.indexOf("background")||(u[t]="inherit"),o&&"set"in o&&void 0===(n=o.set(e,n,r))||(c?u.setProperty(t,n):u[t]=n))}},css:function(e,t,n,r){var i,s,o,a=ie(t);return Xe.test(t)||(t=it(a)),(o=C.cssHooks[t]||C.cssHooks[a])&&"get"in o&&(i=o.get(e,!0,n)),void 0===i&&(i=Ze(e,t,r)),"normal"===i&&t in at&&(i=at[t]),""===n||n?(s=parseFloat(i),!0===n||isFinite(s)?s||0:i):i}}),C.each(["height","width"],function(e,t){C.cssHooks[t]={get:function(e,n,r){if(n)return!st.test(C.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?lt(e,t,r):Ge(e,ot,function(){return lt(e,t,r)})},set:function(e,n,r){var i,s=Qe(e),o=!g.scrollboxSize()&&"absolute"===s.position,a=(o||r)&&"border-box"===C.css(e,"boxSizing",!1,s),c=r?ut(e,t,r,a,s):0;return a&&o&&(c-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(s[t])-ut(e,t,"border",!1,s)-.5)),c&&(i=pe.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=C.css(e,t)),ct(0,n,c)}}}),C.cssHooks.marginLeft=et(g.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Ze(e,"marginLeft"))||e.getBoundingClientRect().left-Ge(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),C.each({margin:"",padding:"",border:"Width"},function(e,t){C.cssHooks[e+t]={expand:function(n){for(var r=0,i={},s="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+fe[r]+t]=s[r]||s[r-2]||s[0];return i}},"margin"!==e&&(C.cssHooks[e+t].set=ct)}),C.fn.extend({css:function(e,t){return ee(this,function(e,t,n){var r,i,s={},o=0;if(Array.isArray(t)){for(r=Qe(e),i=t.length;o<i;o++)s[t[o]]=C.css(e,t[o],!1,r);return s}return void 0!==n?C.style(e,t,n):C.css(e,t)},e,t,arguments.length>1)}}),C.Tween=ht,ht.prototype={constructor:ht,init:function(e,t,n,r,i,s){this.elem=e,this.prop=n,this.easing=i||C.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=s||(C.cssNumber[n]?"":"px")},cur:function(){var e=ht.propHooks[this.prop];return e&&e.get?e.get(this):ht.propHooks._default.get(this)},run:function(e){var t,n=ht.propHooks[this.prop];return this.options.duration?this.pos=t=C.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):ht.propHooks._default.set(this),this}},ht.prototype.init.prototype=ht.prototype,ht.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=C.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){C.fx.step[e.prop]?C.fx.step[e.prop](e):1!==e.elem.nodeType||!C.cssHooks[e.prop]&&null==e.elem.style[it(e.prop)]?e.elem[e.prop]=e.now:C.style(e.elem,e.prop,e.now+e.unit)}}},ht.propHooks.scrollTop=ht.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},C.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},C.fx=ht.prototype.init,C.fx.step={};var dt,pt,ft=/^(?:toggle|show|hide)$/,mt=/queueHooks$/;function gt(){pt&&(!1===b.hidden&&r.requestAnimationFrame?r.requestAnimationFrame(gt):r.setTimeout(gt,C.fx.interval),C.fx.tick())}function vt(){return r.setTimeout(function(){dt=void 0}),dt=Date.now()}function yt(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=fe[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function bt(e,t,n){for(var r,i=(wt.tweeners[t]||[]).concat(wt.tweeners["*"]),s=0,o=i.length;s<o;s++)if(r=i[s].call(n,t,e))return r}function wt(e,t,n){var r,i,s=0,o=wt.prefilters.length,a=C.Deferred().always(function(){delete c.elem}),c=function(){if(i)return!1;for(var t=dt||vt(),n=Math.max(0,u.startTime+u.duration-t),r=1-(n/u.duration||0),s=0,o=u.tweens.length;s<o;s++)u.tweens[s].run(r);return a.notifyWith(e,[u,r,n]),r<1&&o?n:(o||a.notifyWith(e,[u,1,0]),a.resolveWith(e,[u]),!1)},u=a.promise({elem:e,props:C.extend({},t),opts:C.extend(!0,{specialEasing:{},easing:C.easing._default},n),originalProperties:t,originalOptions:n,startTime:dt||vt(),duration:n.duration,tweens:[],createTween:function(t,n){var r=C.Tween(e,u.opts,t,n,u.opts.specialEasing[t]||u.opts.easing);return u.tweens.push(r),r},stop:function(t){var n=0,r=t?u.tweens.length:0;if(i)return this;for(i=!0;n<r;n++)u.tweens[n].run(1);return t?(a.notifyWith(e,[u,1,0]),a.resolveWith(e,[u,t])):a.rejectWith(e,[u,t]),this}}),l=u.props;for(function(e,t){var n,r,i,s,o;for(n in e)if(i=t[r=ie(n)],s=e[n],Array.isArray(s)&&(i=s[1],s=e[n]=s[0]),n!==r&&(e[r]=s,delete e[n]),(o=C.cssHooks[r])&&"expand"in o)for(n in s=o.expand(s),delete e[r],s)n in e||(e[n]=s[n],t[n]=i);else t[r]=i}(l,u.opts.specialEasing);s<o;s++)if(r=wt.prefilters[s].call(u,e,l,u.opts))return v(r.stop)&&(C._queueHooks(u.elem,u.opts.queue).stop=r.stop.bind(r)),r;return C.map(l,bt,u),v(u.opts.start)&&u.opts.start.call(e,u),u.progress(u.opts.progress).done(u.opts.done,u.opts.complete).fail(u.opts.fail).always(u.opts.always),C.fx.timer(C.extend(c,{elem:e,anim:u,queue:u.opts.queue})),u}C.Animation=C.extend(wt,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return be(n.elem,e,pe.exec(t),n),n}]},tweener:function(e,t){v(e)?(t=e,e=["*"]):e=e.match(z);for(var n,r=0,i=e.length;r<i;r++)n=e[r],wt.tweeners[n]=wt.tweeners[n]||[],wt.tweeners[n].unshift(t)},prefilters:[function(e,t,n){var r,i,s,o,a,c,u,l,h="width"in t||"height"in t,d=this,p={},f=e.style,m=e.nodeType&&ye(e),g=ae.get(e,"fxshow");for(r in n.queue||(null==(o=C._queueHooks(e,"fx")).unqueued&&(o.unqueued=0,a=o.empty.fire,o.empty.fire=function(){o.unqueued||a()}),o.unqueued++,d.always(function(){d.always(function(){o.unqueued--,C.queue(e,"fx").length||o.empty.fire()})})),t)if(i=t[r],ft.test(i)){if(delete t[r],s=s||"toggle"===i,i===(m?"hide":"show")){if("show"!==i||!g||void 0===g[r])continue;m=!0}p[r]=g&&g[r]||C.style(e,r)}if((c=!C.isEmptyObject(t))||!C.isEmptyObject(p))for(r in h&&1===e.nodeType&&(n.overflow=[f.overflow,f.overflowX,f.overflowY],null==(u=g&&g.display)&&(u=ae.get(e,"display")),"none"===(l=C.css(e,"display"))&&(u?l=u:(Ee([e],!0),u=e.style.display||u,l=C.css(e,"display"),Ee([e]))),("inline"===l||"inline-block"===l&&null!=u)&&"none"===C.css(e,"float")&&(c||(d.done(function(){f.display=u}),null==u&&(l=f.display,u="none"===l?"":l)),f.display="inline-block")),n.overflow&&(f.overflow="hidden",d.always(function(){f.overflow=n.overflow[0],f.overflowX=n.overflow[1],f.overflowY=n.overflow[2]})),c=!1,p)c||(g?"hidden"in g&&(m=g.hidden):g=ae.access(e,"fxshow",{display:u}),s&&(g.hidden=!m),m&&Ee([e],!0),d.done(function(){for(r in m||Ee([e]),ae.remove(e,"fxshow"),p)C.style(e,r,p[r])})),c=bt(m?g[r]:0,r,d),r in g||(g[r]=c.start,m&&(c.end=c.start,c.start=0))}],prefilter:function(e,t){t?wt.prefilters.unshift(e):wt.prefilters.push(e)}}),C.speed=function(e,t,n){var r=e&&"object"==typeof e?C.extend({},e):{complete:n||!n&&t||v(e)&&e,duration:e,easing:n&&t||t&&!v(t)&&t};return C.fx.off?r.duration=0:"number"!=typeof r.duration&&(r.duration in C.fx.speeds?r.duration=C.fx.speeds[r.duration]:r.duration=C.fx.speeds._default),null!=r.queue&&!0!==r.queue||(r.queue="fx"),r.old=r.complete,r.complete=function(){v(r.old)&&r.old.call(this),r.queue&&C.dequeue(this,r.queue)},r},C.fn.extend({fadeTo:function(e,t,n,r){return this.filter(ye).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=C.isEmptyObject(e),s=C.speed(t,n,r),o=function(){var t=wt(this,C.extend({},e),s);(i||ae.get(this,"finish"))&&t.stop(!0)};return o.finish=o,i||!1===s.queue?this.each(o):this.queue(s.queue,o)},stop:function(e,t,n){var r=function(e){var t=e.stop;delete e.stop,t(n)};return"string"!=typeof e&&(n=t,t=e,e=void 0),t&&this.queue(e||"fx",[]),this.each(function(){var t=!0,i=null!=e&&e+"queueHooks",s=C.timers,o=ae.get(this);if(i)o[i]&&o[i].stop&&r(o[i]);else for(i in o)o[i]&&o[i].stop&&mt.test(i)&&r(o[i]);for(i=s.length;i--;)s[i].elem!==this||null!=e&&s[i].queue!==e||(s[i].anim.stop(n),t=!1,s.splice(i,1));!t&&n||C.dequeue(this,e)})},finish:function(e){return!1!==e&&(e=e||"fx"),this.each(function(){var t,n=ae.get(this),r=n[e+"queue"],i=n[e+"queueHooks"],s=C.timers,o=r?r.length:0;for(n.finish=!0,C.queue(this,e,[]),i&&i.stop&&i.stop.call(this,!0),t=s.length;t--;)s[t].elem===this&&s[t].queue===e&&(s[t].anim.stop(!0),s.splice(t,1));for(t=0;t<o;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}}),C.each(["toggle","show","hide"],function(e,t){var n=C.fn[t];C.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(yt(t,!0),e,r,i)}}),C.each({slideDown:yt("show"),slideUp:yt("hide"),slideToggle:yt("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){C.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),C.timers=[],C.fx.tick=function(){var e,t=0,n=C.timers;for(dt=Date.now();t<n.length;t++)(e=n[t])()||n[t]!==e||n.splice(t--,1);n.length||C.fx.stop(),dt=void 0},C.fx.timer=function(e){C.timers.push(e),C.fx.start()},C.fx.interval=13,C.fx.start=function(){pt||(pt=!0,gt())},C.fx.stop=function(){pt=null},C.fx.speeds={slow:600,fast:200,_default:400},C.fn.delay=function(e,t){return e=C.fx&&C.fx.speeds[e]||e,t=t||"fx",this.queue(t,function(t,n){var i=r.setTimeout(t,e);n.stop=function(){r.clearTimeout(i)}})},function(){var e=b.createElement("input"),t=b.createElement("select").appendChild(b.createElement("option"));e.type="checkbox",g.checkOn=""!==e.value,g.optSelected=t.selected,(e=b.createElement("input")).value="t",e.type="radio",g.radioValue="t"===e.value}();var xt,Et=C.expr.attrHandle;C.fn.extend({attr:function(e,t){return ee(this,C.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){C.removeAttr(this,e)})}}),C.extend({attr:function(e,t,n){var r,i,s=e.nodeType;if(3!==s&&8!==s&&2!==s)return void 0===e.getAttribute?C.prop(e,t,n):(1===s&&C.isXMLDoc(e)||(i=C.attrHooks[t.toLowerCase()]||(C.expr.match.bool.test(t)?xt:void 0)),void 0!==n?null===n?void C.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=C.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!g.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(z);if(i&&1===e.nodeType)for(;n=i[r++];)e.removeAttribute(n)}}),xt={set:function(e,t,n){return!1===t?C.removeAttr(e,n):e.setAttribute(n,n),n}},C.each(C.expr.match.bool.source.match(/\w+/g),function(e,t){var n=Et[t]||C.find.attr;Et[t]=function(e,t,r){var i,s,o=t.toLowerCase();return r||(s=Et[o],Et[o]=i,i=null!=n(e,t,r)?o:null,Et[o]=s),i}});var Tt=/^(?:input|select|textarea|button)$/i,At=/^(?:a|area)$/i;function Ct(e){return(e.match(z)||[]).join(" ")}function Ot(e){return e.getAttribute&&e.getAttribute("class")||""}function St(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(z)||[]}C.fn.extend({prop:function(e,t){return ee(this,C.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[C.propFix[e]||e]})}}),C.extend({prop:function(e,t,n){var r,i,s=e.nodeType;if(3!==s&&8!==s&&2!==s)return 1===s&&C.isXMLDoc(e)||(t=C.propFix[t]||t,i=C.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=C.find.attr(e,"tabindex");return t?parseInt(t,10):Tt.test(e.nodeName)||At.test(e.nodeName)&&e.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),g.optSelected||(C.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),C.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){C.propFix[this.toLowerCase()]=this}),C.fn.extend({addClass:function(e){var t,n,r,i,s,o;return v(e)?this.each(function(t){C(this).addClass(e.call(this,t,Ot(this)))}):(t=St(e)).length?this.each(function(){if(r=Ot(this),n=1===this.nodeType&&" "+Ct(r)+" "){for(s=0;s<t.length;s++)i=t[s],n.indexOf(" "+i+" ")<0&&(n+=i+" ");o=Ct(n),r!==o&&this.setAttribute("class",o)}}):this},removeClass:function(e){var t,n,r,i,s,o;return v(e)?this.each(function(t){C(this).removeClass(e.call(this,t,Ot(this)))}):arguments.length?(t=St(e)).length?this.each(function(){if(r=Ot(this),n=1===this.nodeType&&" "+Ct(r)+" "){for(s=0;s<t.length;s++)for(i=t[s];n.indexOf(" "+i+" ")>-1;)n=n.replace(" "+i+" "," ");o=Ct(n),r!==o&&this.setAttribute("class",o)}}):this:this.attr("class","")},toggleClass:function(e,t){var n,r,i,s,o=typeof e,a="string"===o||Array.isArray(e);return v(e)?this.each(function(n){C(this).toggleClass(e.call(this,n,Ot(this),t),t)}):"boolean"==typeof t&&a?t?this.addClass(e):this.removeClass(e):(n=St(e),this.each(function(){if(a)for(s=C(this),i=0;i<n.length;i++)r=n[i],s.hasClass(r)?s.removeClass(r):s.addClass(r);else void 0!==e&&"boolean"!==o||((r=Ot(this))&&ae.set(this,"__className__",r),this.setAttribute&&this.setAttribute("class",r||!1===e?"":ae.get(this,"__className__")||""))}))},hasClass:function(e){var t,n,r=0;for(t=" "+e+" ";n=this[r++];)if(1===n.nodeType&&(" "+Ct(Ot(n))+" ").indexOf(t)>-1)return!0;return!1}});var kt=/\r/g;C.fn.extend({val:function(e){var t,n,r,i=this[0];return arguments.length?(r=v(e),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,C(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=C.map(i,function(e){return null==e?"":e+""})),(t=C.valHooks[this.type]||C.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))})):i?(t=C.valHooks[i.type]||C.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(kt,""):null==n?"":n:void 0}}),C.extend({valHooks:{option:{get:function(e){var t=C.find.attr(e,"value");return null!=t?t:Ct(C.text(e))}},select:{get:function(e){var t,n,r,i=e.options,s=e.selectedIndex,o="select-one"===e.type,a=o?null:[],c=o?s+1:i.length;for(r=s<0?c:o?s:0;r<c;r++)if(((n=i[r]).selected||r===s)&&!n.disabled&&(!n.parentNode.disabled||!S(n.parentNode,"optgroup"))){if(t=C(n).val(),o)return t;a.push(t)}return a},set:function(e,t){for(var n,r,i=e.options,s=C.makeArray(t),o=i.length;o--;)((r=i[o]).selected=C.inArray(C.valHooks.option.get(r),s)>-1)&&(n=!0);return n||(e.selectedIndex=-1),s}}}}),C.each(["radio","checkbox"],function(){C.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=C.inArray(C(e).val(),t)>-1}},g.checkOn||(C.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var _t=r.location,Nt={guid:Date.now()},Dt=/\?/;C.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new r.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||C.error("Invalid XML: "+(n?C.map(n.childNodes,function(e){return e.textContent}).join("\n"):e)),t};var jt=/^(?:focusinfocus|focusoutblur)$/,Lt=function(e){e.stopPropagation()};C.extend(C.event,{trigger:function(e,t,n,i){var s,o,a,c,u,l,h,d,f=[n||b],m=p.call(e,"type")?e.type:e,g=p.call(e,"namespace")?e.namespace.split("."):[];if(o=d=a=n=n||b,3!==n.nodeType&&8!==n.nodeType&&!jt.test(m+C.event.triggered)&&(m.indexOf(".")>-1&&(g=m.split("."),m=g.shift(),g.sort()),u=m.indexOf(":")<0&&"on"+m,(e=e[C.expando]?e:new C.Event(m,"object"==typeof e&&e)).isTrigger=i?2:3,e.namespace=g.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+g.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:C.makeArray(t,[e]),h=C.event.special[m]||{},i||!h.trigger||!1!==h.trigger.apply(n,t))){if(!i&&!h.noBubble&&!y(n)){for(c=h.delegateType||m,jt.test(c+m)||(o=o.parentNode);o;o=o.parentNode)f.push(o),a=o;a===(n.ownerDocument||b)&&f.push(a.defaultView||a.parentWindow||r)}for(s=0;(o=f[s++])&&!e.isPropagationStopped();)d=o,e.type=s>1?c:h.bindType||m,(l=(ae.get(o,"events")||Object.create(null))[e.type]&&ae.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&se(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=m,i||e.isDefaultPrevented()||h._default&&!1!==h._default.apply(f.pop(),t)||!se(n)||u&&v(n[m])&&!y(n)&&((a=n[u])&&(n[u]=null),C.event.triggered=m,e.isPropagationStopped()&&d.addEventListener(m,Lt),n[m](),e.isPropagationStopped()&&d.removeEventListener(m,Lt),C.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=C.extend(new C.Event,n,{type:e,isSimulated:!0});C.event.trigger(r,null,t)}}),C.fn.extend({trigger:function(e,t){return this.each(function(){C.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return C.event.trigger(e,t,n,!0)}});var Mt=/\[\]$/,$t=/\r?\n/g,Ft=/^(?:submit|button|image|reset|file)$/i,It=/^(?:input|select|textarea|keygen)/i;function Pt(e,t,n,r){var i;if(Array.isArray(t))C.each(t,function(t,i){n||Mt.test(e)?r(e,i):Pt(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)});else if(n||"object"!==E(t))r(e,t);else for(i in t)Pt(e+"["+i+"]",t[i],n,r)}C.param=function(e,t){var n,r=[],i=function(e,t){var n=v(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!C.isPlainObject(e))C.each(e,function(){i(this.name,this.value)});else for(n in e)Pt(n,e[n],t,i);return r.join("&")},C.fn.extend({serialize:function(){return C.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=C.prop(this,"elements");return e?C.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!C(this).is(":disabled")&&It.test(this.nodeName)&&!Ft.test(e)&&(this.checked||!Ce.test(e))}).map(function(e,t){var n=C(this).val();return null==n?null:Array.isArray(n)?C.map(n,function(e){return{name:t.name,value:e.replace($t,"\r\n")}}):{name:t.name,value:n.replace($t,"\r\n")}}).get()}});var Rt=/%20/g,Ht=/#.*$/,qt=/([?&])_=[^&]*/,Bt=/^(.*?):[ \t]*([^\r\n]*)$/gm,Vt=/^(?:GET|HEAD)$/,Ut=/^\/\//,Kt={},Wt={},zt="*/".concat("*"),Jt=b.createElement("a");function Xt(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,s=t.toLowerCase().match(z)||[];if(v(n))for(;r=s[i++];)"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function Qt(e,t,n,r){var i={},s=e===Wt;function o(a){var c;return i[a]=!0,C.each(e[a]||[],function(e,a){var u=a(t,n,r);return"string"!=typeof u||s||i[u]?s?!(c=u):void 0:(t.dataTypes.unshift(u),o(u),!1)}),c}return o(t.dataTypes[0])||!i["*"]&&o("*")}function Gt(e,t){var n,r,i=C.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&C.extend(!0,e,r),e}Jt.href=_t.href,C.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:_t.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(_t.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":zt,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":C.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Gt(Gt(e,C.ajaxSettings),t):Gt(C.ajaxSettings,e)},ajaxPrefilter:Xt(Kt),ajaxTransport:Xt(Wt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var n,i,s,o,a,c,u,l,h,d,p=C.ajaxSetup({},t),f=p.context||p,m=p.context&&(f.nodeType||f.jquery)?C(f):C.event,g=C.Deferred(),v=C.Callbacks("once memory"),y=p.statusCode||{},w={},x={},E="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(u){if(!o)for(o={};t=Bt.exec(s);)o[t[1].toLowerCase()+" "]=(o[t[1].toLowerCase()+" "]||[]).concat(t[2]);t=o[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return u?s:null},setRequestHeader:function(e,t){return null==u&&(e=x[e.toLowerCase()]=x[e.toLowerCase()]||e,w[e]=t),this},overrideMimeType:function(e){return null==u&&(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(u)T.always(e[T.status]);else for(t in e)y[t]=[y[t],e[t]];return this},abort:function(e){var t=e||E;return n&&n.abort(t),A(0,t),this}};if(g.promise(T),p.url=((e||p.url||_t.href)+"").replace(Ut,_t.protocol+"//"),p.type=t.method||t.type||p.method||p.type,p.dataTypes=(p.dataType||"*").toLowerCase().match(z)||[""],null==p.crossDomain){c=b.createElement("a");try{c.href=p.url,c.href=c.href,p.crossDomain=Jt.protocol+"//"+Jt.host!=c.protocol+"//"+c.host}catch(e){p.crossDomain=!0}}if(p.data&&p.processData&&"string"!=typeof p.data&&(p.data=C.param(p.data,p.traditional)),Qt(Kt,p,t,T),u)return T;for(h in(l=C.event&&p.global)&&0===C.active++&&C.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Vt.test(p.type),i=p.url.replace(Ht,""),p.hasContent?p.data&&p.processData&&0===(p.contentType||"").indexOf("application/x-www-form-urlencoded")&&(p.data=p.data.replace(Rt,"+")):(d=p.url.slice(i.length),p.data&&(p.processData||"string"==typeof p.data)&&(i+=(Dt.test(i)?"&":"?")+p.data,delete p.data),!1===p.cache&&(i=i.replace(qt,"$1"),d=(Dt.test(i)?"&":"?")+"_="+Nt.guid+++d),p.url=i+d),p.ifModified&&(C.lastModified[i]&&T.setRequestHeader("If-Modified-Since",C.lastModified[i]),C.etag[i]&&T.setRequestHeader("If-None-Match",C.etag[i])),(p.data&&p.hasContent&&!1!==p.contentType||t.contentType)&&T.setRequestHeader("Content-Type",p.contentType),T.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+zt+"; q=0.01":""):p.accepts["*"]),p.headers)T.setRequestHeader(h,p.headers[h]);if(p.beforeSend&&(!1===p.beforeSend.call(f,T,p)||u))return T.abort();if(E="abort",v.add(p.complete),T.done(p.success),T.fail(p.error),n=Qt(Wt,p,t,T)){if(T.readyState=1,l&&m.trigger("ajaxSend",[T,p]),u)return T;p.async&&p.timeout>0&&(a=r.setTimeout(function(){T.abort("timeout")},p.timeout));try{u=!1,n.send(w,A)}catch(e){if(u)throw e;A(-1,e)}}else A(-1,"No Transport");function A(e,t,o,c){var h,d,b,w,x,E=t;u||(u=!0,a&&r.clearTimeout(a),n=void 0,s=c||"",T.readyState=e>0?4:0,h=e>=200&&e<300||304===e,o&&(w=function(e,t,n){for(var r,i,s,o,a=e.contents,c=e.dataTypes;"*"===c[0];)c.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in a)if(a[i]&&a[i].test(r)){c.unshift(i);break}if(c[0]in n)s=c[0];else{for(i in n){if(!c[0]||e.converters[i+" "+c[0]]){s=i;break}o||(o=i)}s=s||o}if(s)return s!==c[0]&&c.unshift(s),n[s]}(p,T,o)),!h&&C.inArray("script",p.dataTypes)>-1&&C.inArray("json",p.dataTypes)<0&&(p.converters["text script"]=function(){}),w=function(e,t,n,r){var i,s,o,a,c,u={},l=e.dataTypes.slice();if(l[1])for(o in e.converters)u[o.toLowerCase()]=e.converters[o];for(s=l.shift();s;)if(e.responseFields[s]&&(n[e.responseFields[s]]=t),!c&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),c=s,s=l.shift())if("*"===s)s=c;else if("*"!==c&&c!==s){if(!(o=u[c+" "+s]||u["* "+s]))for(i in u)if((a=i.split(" "))[1]===s&&(o=u[c+" "+a[0]]||u["* "+a[0]])){!0===o?o=u[i]:!0!==u[i]&&(s=a[0],l.unshift(a[1]));break}if(!0!==o)if(o&&e.throws)t=o(t);else try{t=o(t)}catch(e){return{state:"parsererror",error:o?e:"No conversion from "+c+" to "+s}}}return{state:"success",data:t}}(p,w,T,h),h?(p.ifModified&&((x=T.getResponseHeader("Last-Modified"))&&(C.lastModified[i]=x),(x=T.getResponseHeader("etag"))&&(C.etag[i]=x)),204===e||"HEAD"===p.type?E="nocontent":304===e?E="notmodified":(E=w.state,d=w.data,h=!(b=w.error))):(b=E,!e&&E||(E="error",e<0&&(e=0))),T.status=e,T.statusText=(t||E)+"",h?g.resolveWith(f,[d,E,T]):g.rejectWith(f,[T,E,b]),T.statusCode(y),y=void 0,l&&m.trigger(h?"ajaxSuccess":"ajaxError",[T,p,h?d:b]),v.fireWith(f,[T,E]),l&&(m.trigger("ajaxComplete",[T,p]),--C.active||C.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return C.get(e,t,n,"json")},getScript:function(e,t){return C.get(e,void 0,t,"script")}}),C.each(["get","post"],function(e,t){C[t]=function(e,n,r,i){return v(n)&&(i=i||r,r=n,n=void 0),C.ajax(C.extend({url:e,type:t,dataType:i,data:n,success:r},C.isPlainObject(e)&&e))}}),C.ajaxPrefilter(function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")}),C._evalUrl=function(e,t,n){return C.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){C.globalEval(e,t,n)}})},C.fn.extend({wrapAll:function(e){var t;return this[0]&&(v(e)&&(e=e.call(this[0])),t=C(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){for(var e=this;e.firstElementChild;)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return v(e)?this.each(function(t){C(this).wrapInner(e.call(this,t))}):this.each(function(){var t=C(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=v(e);return this.each(function(n){C(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){C(this).replaceWith(this.childNodes)}),this}}),C.expr.pseudos.hidden=function(e){return!C.expr.pseudos.visible(e)},C.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},C.ajaxSettings.xhr=function(){try{return new r.XMLHttpRequest}catch(e){}};var Yt={0:200,1223:204},Zt=C.ajaxSettings.xhr();g.cors=!!Zt&&"withCredentials"in Zt,g.ajax=Zt=!!Zt,C.ajaxTransport(function(e){var t,n;if(g.cors||Zt&&!e.crossDomain)return{send:function(i,s){var o,a=e.xhr();if(a.open(e.type,e.url,e.async,e.username,e.password),e.xhrFields)for(o in e.xhrFields)a[o]=e.xhrFields[o];for(o in e.mimeType&&a.overrideMimeType&&a.overrideMimeType(e.mimeType),e.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest"),i)a.setRequestHeader(o,i[o]);t=function(e){return function(){t&&(t=n=a.onload=a.onerror=a.onabort=a.ontimeout=a.onreadystatechange=null,"abort"===e?a.abort():"error"===e?"number"!=typeof a.status?s(0,"error"):s(a.status,a.statusText):s(Yt[a.status]||a.status,a.statusText,"text"!==(a.responseType||"text")||"string"!=typeof a.responseText?{binary:a.response}:{text:a.responseText},a.getAllResponseHeaders()))}},a.onload=t(),n=a.onerror=a.ontimeout=t("error"),void 0!==a.onabort?a.onabort=n:a.onreadystatechange=function(){4===a.readyState&&r.setTimeout(function(){t&&n()})},t=t("abort");try{a.send(e.hasContent&&e.data||null)}catch(e){if(t)throw e}},abort:function(){t&&t()}}}),C.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),C.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return C.globalEval(e),e}}}),C.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),C.ajaxTransport("script",function(e){var t,n;if(e.crossDomain||e.scriptAttrs)return{send:function(r,i){t=C("<script>").attr(e.scriptAttrs||{}).prop({charset:e.scriptCharset,src:e.url}).on("load error",n=function(e){t.remove(),n=null,e&&i("error"===e.type?404:200,e.type)}),b.head.appendChild(t[0])},abort:function(){n&&n()}}});var en,tn=[],nn=/(=)\?(?=&|$)|\?\?/;C.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=tn.pop()||C.expando+"_"+Nt.guid++;return this[e]=!0,e}}),C.ajaxPrefilter("json jsonp",function(e,t,n){var i,s,o,a=!1!==e.jsonp&&(nn.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&nn.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return i=e.jsonpCallback=v(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(nn,"$1"+i):!1!==e.jsonp&&(e.url+=(Dt.test(e.url)?"&":"?")+e.jsonp+"="+i),e.converters["script json"]=function(){return o||C.error(i+" was not called"),o[0]},e.dataTypes[0]="json",s=r[i],r[i]=function(){o=arguments},n.always(function(){void 0===s?C(r).removeProp(i):r[i]=s,e[i]&&(e.jsonpCallback=t.jsonpCallback,tn.push(i)),o&&v(s)&&s(o[0]),o=s=void 0}),"script"}),g.createHTMLDocument=((en=b.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===en.childNodes.length),C.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(g.createHTMLDocument?((r=(t=b.implementation.createHTMLDocument("")).createElement("base")).href=b.location.href,t.head.appendChild(r)):t=b),s=!n&&[],(i=H.exec(e))?[t.createElement(i[1])]:(i=je([e],t,s),s&&s.length&&C(s).remove(),C.merge([],i.childNodes)));var r,i,s},C.fn.load=function(e,t,n){var r,i,s,o=this,a=e.indexOf(" ");return a>-1&&(r=Ct(e.slice(a)),e=e.slice(0,a)),v(t)?(n=t,t=void 0):t&&"object"==typeof t&&(i="POST"),o.length>0&&C.ajax({url:e,type:i||"GET",dataType:"html",data:t}).done(function(e){s=arguments,o.html(r?C("<div>").append(C.parseHTML(e)).find(r):e)}).always(n&&function(e,t){o.each(function(){n.apply(this,s||[e.responseText,t,e])})}),this},C.expr.pseudos.animated=function(e){return C.grep(C.timers,function(t){return e===t.elem}).length},C.offset={setOffset:function(e,t,n){var r,i,s,o,a,c,u=C.css(e,"position"),l=C(e),h={};"static"===u&&(e.style.position="relative"),a=l.offset(),s=C.css(e,"top"),c=C.css(e,"left"),("absolute"===u||"fixed"===u)&&(s+c).indexOf("auto")>-1?(o=(r=l.position()).top,i=r.left):(o=parseFloat(s)||0,i=parseFloat(c)||0),v(t)&&(t=t.call(e,n,C.extend({},a))),null!=t.top&&(h.top=t.top-a.top+o),null!=t.left&&(h.left=t.left-a.left+i),"using"in t?t.using.call(e,h):l.css(h)}},C.fn.extend({offset:function(e){if(arguments.length)return void 0===e?this:this.each(function(t){C.offset.setOffset(this,e,t)});var t,n,r=this[0];return r?r.getClientRects().length?(t=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:t.top+n.pageYOffset,left:t.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===C.css(r,"position"))t=r.getBoundingClientRect();else{for(t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;e&&(e===n.body||e===n.documentElement)&&"static"===C.css(e,"position");)e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=C(e).offset()).top+=C.css(e,"borderTopWidth",!0),i.left+=C.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-C.css(r,"marginTop",!0),left:t.left-i.left-C.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){for(var e=this.offsetParent;e&&"static"===C.css(e,"position");)e=e.offsetParent;return e||me})}}),C.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,t){var n="pageYOffset"===t;C.fn[e]=function(r){return ee(this,function(e,r,i){var s;if(y(e)?s=e:9===e.nodeType&&(s=e.defaultView),void 0===i)return s?s[t]:e[r];s?s.scrollTo(n?s.pageXOffset:i,n?i:s.pageYOffset):e[r]=i},e,r,arguments.length)}}),C.each(["top","left"],function(e,t){C.cssHooks[t]=et(g.pixelPosition,function(e,n){if(n)return n=Ze(e,t),Je.test(n)?C(e).position()[t]+"px":n})}),C.each({Height:"height",Width:"width"},function(e,t){C.each({padding:"inner"+e,content:t,"":"outer"+e},function(n,r){C.fn[r]=function(i,s){var o=arguments.length&&(n||"boolean"!=typeof i),a=n||(!0===i||!0===s?"margin":"border");return ee(this,function(t,n,i){var s;return y(t)?0===r.indexOf("outer")?t["inner"+e]:t.document.documentElement["client"+e]:9===t.nodeType?(s=t.documentElement,Math.max(t.body["scroll"+e],s["scroll"+e],t.body["offset"+e],s["offset"+e],s["client"+e])):void 0===i?C.css(t,n,a):C.style(t,n,i,a)},t,o?i:void 0,o)}})}),C.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){C.fn[t]=function(e){return this.on(t,e)}}),C.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.on("mouseenter",e).on("mouseleave",t||e)}}),C.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,t){C.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}});var rn=/^[\s\uFEFF\xA0]+|([^\s\uFEFF\xA0])[\s\uFEFF\xA0]+$/g;C.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),v(e))return r=a.call(arguments,2),i=function(){return e.apply(t||this,r.concat(a.call(arguments)))},i.guid=e.guid=e.guid||C.guid++,i},C.holdReady=function(e){e?C.readyWait++:C.ready(!0)},C.isArray=Array.isArray,C.parseJSON=JSON.parse,C.nodeName=S,C.isFunction=v,C.isWindow=y,C.camelCase=ie,C.type=E,C.now=Date.now,C.isNumeric=function(e){var t=C.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},C.trim=function(e){return null==e?"":(e+"").replace(rn,"$1")},void 0===(n=function(){return C}.apply(t,[]))||(e.exports=n);var sn=r.jQuery,on=r.$;return C.noConflict=function(e){return r.$===C&&(r.$=on),e&&r.jQuery===C&&(r.jQuery=sn),C},void 0===i&&(r.jQuery=r.$=C),C})},4744(e,t,n){var r=n(5144);e.exports=function e(t){var n=Array.prototype.slice.call(arguments);return r(n,function(n){for(var r in n)n.hasOwnProperty(r)&&("object"==typeof t[r]&&"object"==typeof n[r]?t[r]=e({},t[r],n[r]):void 0!==n[r]&&(t[r]=n[r]))}),t}},4860(e){e.exports=function(e,t){var n=e.toLowerCase().replace(/[\.\(\)]/g,"");return"algoliasearch: `"+e+"` was replaced by `"+t+"`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#"+n}},5144(e){var t=Object.prototype.hasOwnProperty,n=Object.prototype.toString;e.exports=function(e,r,i){if("[object Function]"!==n.call(r))throw new TypeError("iterator must be a function");var s=e.length;if(s===+s)for(var o=0;o<s;o++)r.call(i,e[o],o,e);else for(var a in e)t.call(e,a)&&r.call(i,e[a],a,e)}},5553(e,t,n){e.exports=function(e,t){return function(n,i,s){if("function"==typeof n&&"object"==typeof i||"object"==typeof s)throw new r.AlgoliaSearchError("index.search usage is index.search(query, params, cb)");0===arguments.length||"function"==typeof n?(s=n,n=""):1!==arguments.length&&"function"!=typeof i||(s=i,i=void 0),"object"==typeof n&&null!==n?(i=n,n=void 0):null==n&&(n="");var o,a="";return void 0!==n&&(a+=e+"="+encodeURIComponent(n)),void 0!==i&&(i.additionalUA&&(o=i.additionalUA,delete i.additionalUA),a=this.as._getSearchParams(i,a)),this._search(a,t,s,o)}};var r=n(8565)},5611(e){e.exports=function(e,t){var n=!1;return function(){return n||(console.warn(t),n=!0),e.apply(this,arguments)}}},5615(e){"function"==typeof Object.create?e.exports=function(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}))}:e.exports=function(e,t){if(t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}}},5840(){$(document).ready(function(){var e=$("#toggle-theme-dark"),t=$("#toggle-theme-custom"),n=$("#toggle-theme-highcontrast"),r=$("body"),i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,s=r.hasClass("theme-custom"),o=r.hasClass("theme-dark")||i&&r.hasClass("theme-system"),a=r.hasClass("theme-highcontrast");t.prop("checked",s),e.prop("checked",o),n.prop("checked",a),e.change(function(e){e.preventDefault(),e.stopPropagation();var t=r.hasClass("theme-dark"),n=i&&r.hasClass("theme-system");return i?(r.toggleClass("theme-system",!n),r.toggleClass("theme-dark",!1)):(r.toggleClass("theme-system",!0),r.toggleClass("theme-dark",!t)),$(this).prop("checked",!(n||t)),localStorage.setItem("forceDarkModeOn",!(n||t)),!1}),t.change(function(e){e.preventDefault(),e.stopPropagation();var t=r.hasClass("theme-custom");return $(this).prop("checked",!t),r.toggleClass("theme-custom",!t),r.toggleClass("themed",!t),localStorage.setItem("customTheme",!t),!1}),n.change(function(e){e.preventDefault(),e.stopPropagation();var t=r.hasClass("theme-highcontrast");return $(this).prop("checked",!t),r.toggleClass("theme-highcontrast",!t),localStorage.setItem("forceHighContrastModeOn",!t),!1})})},5900(e,t,n){"use strict";var r=n(3777);n(990).element=r;var i=n(3615);i.isArray=r.isArray,i.isFunction=r.isFunction,i.isObject=r.isPlainObject,i.bind=r.proxy,i.each=function(e,t){r.each(e,function(e,n){return t(n,e)})},i.map=r.map,i.mixin=r.extend,i.Event=r.Event;var s="aaAutocomplete",o=n(194),a=n(2802);function c(e,t,n,c){n=i.isArray(n)?n:[].slice.call(arguments,2);var u=r(e).each(function(e,i){var u=r(i),l=new a({el:u}),h=c||new o({input:u,eventBus:l,dropdownMenuContainer:t.dropdownMenuContainer,hint:void 0===t.hint||!!t.hint,minLength:t.minLength,autoselect:t.autoselect,autoselectOnBlur:t.autoselectOnBlur,tabAutocomplete:t.tabAutocomplete,openOnFocus:t.openOnFocus,templates:t.templates,debug:t.debug,clearOnSelected:t.clearOnSelected,cssClasses:t.cssClasses,datasets:n,keyboardShortcuts:t.keyboardShortcuts,appendTo:t.appendTo,autoWidth:t.autoWidth,ariaLabel:t.ariaLabel||i.getAttribute("aria-label")});u.data(s,h)});return u.autocomplete={},i.each(["open","close","getVal","setVal","destroy","getWrapper"],function(e){u.autocomplete[e]=function(){var t,n=arguments;return u.each(function(i,o){var a=r(o).data(s);t=a[e].apply(a,n)}),t}}),u}c.sources=o.sources,c.escapeHighlightedString=i.escapeHighlightedString;var u="autocomplete"in window,l=window.autocomplete;c.noConflict=function(){return u?window.autocomplete=l:delete window.autocomplete,c},e.exports=c},5908(e,t,n){globalThis.process={env:{}};const r=n(1620);$(document).ready(function(){r({appId:"J0LOVOL3W6",apiKey:"7c82233c09f195c775eca63b6407d0fd",indexName:"stackoverflow_design",inputSelector:"#searchbox"});var e=$(".js-search"),t=$(".js-search-close-icon"),n=$(".js-search-icon");$(".js-search-btn").click(function(r){r.preventDefault(),r.stopPropagation(),n.toggleClass("d-none"),t.toggleClass("d-none"),e.toggleClass("docs-topbar--searchbar__open"),e.hasClass("docs-topbar--searchbar__open")&&e.find("input").focus()})})},5929(){$(document).ready(function(){var e=$(".js-navigation"),t=$(".js-hamburger-btn");t.on("click",function(n){n.preventDefault(),n.stopPropagation(),t.toggleClass("is-selected"),e.toggleClass("md:d-none")})})},6081(e){"use strict";var t=function(e){switch(typeof e){case"string":return e;case"boolean":return e?"true":"false";case"number":return isFinite(e)?e:"";default:return""}};e.exports=function(e,s,o,a){return s=s||"&",o=o||"=",null===e&&(e=void 0),"object"==typeof e?r(i(e),function(i){var a=encodeURIComponent(t(i))+o;return n(e[i])?r(e[i],function(e){return a+encodeURIComponent(t(e))}).join(s):a+encodeURIComponent(t(e[i]))}).join(s):a?encodeURIComponent(t(a))+o+encodeURIComponent(t(e)):""};var n=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};function r(e,t){if(e.map)return e.map(t);for(var n=[],r=0;r<e.length;r++)n.push(t(e[r],r));return n}var i=Object.keys||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.push(n);return t}},6168(e,t){"use strict";t.test=function(){return!0},t.install=function(e){return function(){setTimeout(e,0)}}},6275(e,t,n){var r=n(5553),i=n(5611),s=n(4860);function o(e,t){this.indexName=t,this.as=e,this.typeAheadArgs=null,this.typeAheadValueOption=null,this.cache={}}e.exports=o,o.prototype.clearCache=function(){this.cache={}},o.prototype.search=r("query"),o.prototype.similarSearch=i(r("similarQuery"),s("index.similarSearch(query[, callback])","index.search({ similarQuery: query }[, callback])")),o.prototype.browse=function(e,t,r){var i,s,o=n(4744);0===arguments.length||1===arguments.length&&"function"==typeof arguments[0]?(i=0,r=arguments[0],e=void 0):"number"==typeof arguments[0]?(i=arguments[0],"number"==typeof arguments[1]?s=arguments[1]:"function"==typeof arguments[1]&&(r=arguments[1],s=void 0),e=void 0,t=void 0):"object"==typeof arguments[0]?("function"==typeof arguments[1]&&(r=arguments[1]),t=arguments[0],e=void 0):"string"==typeof arguments[0]&&"function"==typeof arguments[1]&&(r=arguments[1],t=void 0),t=o({},t||{},{page:i,hitsPerPage:s,query:e});var a=this.as._getSearchParams(t,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{params:a},hostType:"read",callback:r})},o.prototype.browseFrom=function(e,t){return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/browse",body:{cursor:e},hostType:"read",callback:t})},o.prototype.searchForFacetValues=function(e,t){var r=n(393),i=n(2535);if(void 0===e.facetName||void 0===e.facetQuery)throw new Error("Usage: index.searchForFacetValues({facetName, facetQuery, ...params}[, callback])");var s=e.facetName,o=i(r(e),function(e){return"facetName"===e}),a=this.as._getSearchParams(o,"");return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/facets/"+encodeURIComponent(s)+"/query",hostType:"read",body:{params:a},callback:t})},o.prototype.searchFacet=i(function(e,t){return this.searchForFacetValues(e,t)},s("index.searchFacet(params[, callback])","index.searchForFacetValues(params[, callback])")),o.prototype._search=function(e,t,n,r){return this.as._jsonRequest({cache:this.cache,method:"POST",url:t||"/1/indexes/"+encodeURIComponent(this.indexName)+"/query",body:{params:e},hostType:"read",fallback:{method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName),body:{params:e}},callback:n,additionalUA:r})},o.prototype.getObject=function(e,t,n){1!==arguments.length&&"function"!=typeof t||(n=t,t=void 0);var r="";if(void 0!==t){r="?attributes=";for(var i=0;i<t.length;++i)0!==i&&(r+=","),r+=t[i]}return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/"+encodeURIComponent(e)+r,hostType:"read",callback:n})},o.prototype.getObjects=function(e,t,r){var i=n(6815),s=n(8350);if(!i(e))throw new Error("Usage: index.getObjects(arrayOfObjectIDs[, callback])");var o=this;1!==arguments.length&&"function"!=typeof t||(r=t,t=void 0);var a={requests:s(e,function(e){var n={indexName:o.indexName,objectID:e};return t&&(n.attributesToRetrieve=t.join(",")),n})};return this.as._jsonRequest({method:"POST",url:"/1/indexes/*/objects",hostType:"read",body:a,callback:r})},o.prototype.as=null,o.prototype.indexName=null,o.prototype.typeAheadArgs=null,o.prototype.typeAheadValueOption=null},6421(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default="2.6.3"},6476(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=o(n(8696)),i=o(n(235)),s=o(n(6421));function o(e){return e&&e.__esModule?e:{default:e}}var a=(0,r.default)(i.default);a.version=s.default,t.default=a},6558(e,t,n){"use strict";var r=n(3615),i=n(990),s=n(1294),o=n(4111),a=n(9596);function c(e){var t,n,s,o=this;(e=e||{}).menu||r.error("menu is required"),r.isArray(e.datasets)||r.isObject(e.datasets)||r.error("1 or more datasets required"),e.datasets||r.error("datasets is required"),this.isOpen=!1,this.isEmpty=!0,this.minLength=e.minLength||0,this.templates={},this.appendTo=e.appendTo||!1,this.css=r.mixin({},a,e.appendTo?a.appendTo:{}),this.cssClasses=e.cssClasses=r.mixin({},a.defaultClasses,e.cssClasses||{}),this.cssClasses.prefix=e.cssClasses.formattedPrefix||r.formatPrefix(this.cssClasses.prefix,this.cssClasses.noPrefix),t=r.bind(this._onSuggestionClick,this),n=r.bind(this._onSuggestionMouseEnter,this),s=r.bind(this._onSuggestionMouseLeave,this);var u=r.className(this.cssClasses.prefix,this.cssClasses.suggestion);this.$menu=i.element(e.menu).on("mouseenter.aa",u,n).on("mouseleave.aa",u,s).on("click.aa",u,t),this.$container=e.appendTo?e.wrapper:this.$menu,e.templates&&e.templates.header&&(this.templates.header=r.templatify(e.templates.header),this.$menu.prepend(this.templates.header())),e.templates&&e.templates.empty&&(this.templates.empty=r.templatify(e.templates.empty),this.$empty=i.element('<div class="'+r.className(this.cssClasses.prefix,this.cssClasses.empty,!0)+'"></div>'),this.$menu.append(this.$empty),this.$empty.hide()),this.datasets=r.map(e.datasets,function(t){return function(e,t,n){return new c.Dataset(r.mixin({$menu:e,cssClasses:n},t))}(o.$menu,t,e.cssClasses)}),r.each(this.datasets,function(e){var t=e.getRoot();t&&0===t.parent().length&&o.$menu.append(t),e.onSync("rendered",o._onRendered,o)}),e.templates&&e.templates.footer&&(this.templates.footer=r.templatify(e.templates.footer),this.$menu.append(this.templates.footer()));var l=this;i.element(window).resize(function(){l._redraw()})}r.mixin(c.prototype,s,{_onSuggestionClick:function(e){this.trigger("suggestionClicked",i.element(e.currentTarget))},_onSuggestionMouseEnter:function(e){var t=i.element(e.currentTarget);if(!t.hasClass(r.className(this.cssClasses.prefix,this.cssClasses.cursor,!0))){this._removeCursor();var n=this;setTimeout(function(){n._setCursor(t,!1)},0)}},_onSuggestionMouseLeave:function(e){e.relatedTarget&&i.element(e.relatedTarget).closest("."+r.className(this.cssClasses.prefix,this.cssClasses.cursor,!0)).length>0||(this._removeCursor(),this.trigger("cursorRemoved"))},_onRendered:function(e,t){if(this.isEmpty=r.every(this.datasets,function(e){return e.isEmpty()}),this.isEmpty)if(t.length>=this.minLength&&this.trigger("empty"),this.$empty)if(t.length<this.minLength)this._hide();else{var n=this.templates.empty({query:this.datasets[0]&&this.datasets[0].query});this.$empty.html(n),this.$empty.show(),this._show()}else r.any(this.datasets,function(e){return e.templates&&e.templates.empty})?t.length<this.minLength?this._hide():this._show():this._hide();else this.isOpen&&(this.$empty&&(this.$empty.empty(),this.$empty.hide()),t.length>=this.minLength?this._show():this._hide());this.trigger("datasetRendered")},_hide:function(){this.$container.hide()},_show:function(){this.$container.css("display","block"),this._redraw(),this.trigger("shown")},_redraw:function(){this.isOpen&&this.appendTo&&this.trigger("redrawn")},_getSuggestions:function(){return this.$menu.find(r.className(this.cssClasses.prefix,this.cssClasses.suggestion))},_getCursor:function(){return this.$menu.find(r.className(this.cssClasses.prefix,this.cssClasses.cursor)).first()},_setCursor:function(e,t){e.first().addClass(r.className(this.cssClasses.prefix,this.cssClasses.cursor,!0)).attr("aria-selected","true"),this.trigger("cursorMoved",t)},_removeCursor:function(){this._getCursor().removeClass(r.className(this.cssClasses.prefix,this.cssClasses.cursor,!0)).removeAttr("aria-selected")},_moveCursor:function(e){var t,n,r,i;this.isOpen&&(n=this._getCursor(),t=this._getSuggestions(),this._removeCursor(),-1!=(r=((r=t.index(n)+e)+1)%(t.length+1)-1)?(r<-1&&(r=t.length-1),this._setCursor(i=t.eq(r),!0),this._ensureVisible(i)):this.trigger("cursorRemoved"))},_ensureVisible:function(e){var t,n,r,i;n=(t=e.position().top)+e.height()+parseInt(e.css("margin-top"),10)+parseInt(e.css("margin-bottom"),10),r=this.$menu.scrollTop(),i=this.$menu.height()+parseInt(this.$menu.css("padding-top"),10)+parseInt(this.$menu.css("padding-bottom"),10),t<0?this.$menu.scrollTop(r+t):i<n&&this.$menu.scrollTop(r+(n-i))},close:function(){this.isOpen&&(this.isOpen=!1,this._removeCursor(),this._hide(),this.trigger("closed"))},open:function(){this.isOpen||(this.isOpen=!0,this.isEmpty||this._show(),this.trigger("opened"))},setLanguageDirection:function(e){this.$menu.css("ltr"===e?this.css.ltr:this.css.rtl)},moveCursorUp:function(){this._moveCursor(-1)},moveCursorDown:function(){this._moveCursor(1)},getDatumForSuggestion:function(e){var t=null;return e.length&&(t={raw:o.extractDatum(e),value:o.extractValue(e),datasetName:o.extractDatasetName(e)}),t},getCurrentCursor:function(){return this._getCursor().first()},getDatumForCursor:function(){return this.getDatumForSuggestion(this._getCursor().first())},getDatumForTopSuggestion:function(){return this.getDatumForSuggestion(this._getSuggestions().first())},cursorTopSuggestion:function(){this._setCursor(this._getSuggestions().first(),!1)},update:function(e){r.each(this.datasets,function(t){t.update(e)})},empty:function(){r.each(this.datasets,function(e){e.clear()}),this.isEmpty=!0},isVisible:function(){return this.isOpen&&!this.isEmpty},destroy:function(){this.$menu.off(".aa"),this.$menu=null,r.each(this.datasets,function(e){e.destroy()})}}),c.Dataset=o,e.exports=c},6644(e,t,n){"use strict";var r=n(2553),i=r.Promise||n(7875).Promise;e.exports=function(e,t){var s=n(5615),o=n(8565),a=n(2937),c=n(7637),u=n(3586);function l(e,t,r){return(r=n(393)(r||{}))._ua=r._ua||l.ua,new d(e,t,r)}t=t||"",l.version=n(3656),l.ua="Algolia for JavaScript ("+l.version+"); "+t,l.initPlaces=u(l),r.__algolia={debug:n(1009),algoliasearch:l};var h={hasXMLHttpRequest:"XMLHttpRequest"in r,hasXDomainRequest:"XDomainRequest"in r};function d(){e.apply(this,arguments)}return h.hasXMLHttpRequest&&(h.cors="withCredentials"in new XMLHttpRequest),s(d,e),d.prototype._request=function(e,t){return new i(function(n,r){if(h.cors||h.hasXDomainRequest){e=a(e,t.headers);var i,s,c=t.body,u=h.cors?new XMLHttpRequest:new XDomainRequest,l=!1;i=setTimeout(d,t.timeouts.connect),u.onprogress=function(){l||p()},"onreadystatechange"in u&&(u.onreadystatechange=function(){!l&&u.readyState>1&&p()}),u.onload=function(){if(!s){var e;clearTimeout(i);try{e={body:JSON.parse(u.responseText),responseText:u.responseText,statusCode:u.status,headers:u.getAllResponseHeaders&&u.getAllResponseHeaders()||{}}}catch(t){e=new o.UnparsableJSON({more:u.responseText})}e instanceof o.UnparsableJSON?r(e):n(e)}},u.onerror=function(e){s||(clearTimeout(i),r(new o.Network({more:e})))},u instanceof XMLHttpRequest?(u.open(t.method,e,!0),t.forceAuthHeaders&&(u.setRequestHeader("x-algolia-application-id",t.headers["x-algolia-application-id"]),u.setRequestHeader("x-algolia-api-key",t.headers["x-algolia-api-key"]))):u.open(t.method,e),h.cors&&(c&&("POST"===t.method?u.setRequestHeader("content-type","application/x-www-form-urlencoded"):u.setRequestHeader("content-type","application/json")),u.setRequestHeader("accept","application/json")),c?u.send(c):u.send()}else r(new o.Network("CORS not supported"));function d(){s=!0,u.abort(),r(new o.RequestTimeout)}function p(){l=!0,clearTimeout(i),i=setTimeout(d,t.timeouts.complete)}})},d.prototype._request.fallback=function(e,t){return e=a(e,t.headers),new i(function(n,r){c(e,t,function(e,t){e?r(e):n(t)})})},d.prototype._promise={reject:function(e){return i.reject(e)},resolve:function(e){return i.resolve(e)},delay:function(e){return new i(function(t){setTimeout(t,e)})},all:function(e){return i.all(e)}},l}},6815(e){var t={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==t.call(e)}},6984(e,t,n){e.exports=c;var r=n(8565),i=n(3945),s=n(6275),o=n(8925),a=process.env.RESET_APP_DATA_TIMER&&parseInt(process.env.RESET_APP_DATA_TIMER,10)||12e4;function c(e,t,i){var s=n(1009)("algoliasearch"),o=n(393),a=n(6815),c=n(8350),l="Usage: algoliasearch(applicationID, apiKey, opts)";if(!0!==i._allowEmptyCredentials&&!e)throw new r.AlgoliaSearchError("Please provide an application ID. "+l);if(!0!==i._allowEmptyCredentials&&!t)throw new r.AlgoliaSearchError("Please provide an API key. "+l);this.applicationID=e,this.apiKey=t,this.hosts={read:[],write:[]},i=i||{},this._timeouts=i.timeouts||{connect:1e3,read:2e3,write:3e4},i.timeout&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=i.timeout);var h=i.protocol||"https:";if(/:$/.test(h)||(h+=":"),"http:"!==h&&"https:"!==h)throw new r.AlgoliaSearchError("protocol must be `http:` or `https:` (was `"+i.protocol+"`)");if(this._checkAppIdData(),i.hosts)a(i.hosts)?(this.hosts.read=o(i.hosts),this.hosts.write=o(i.hosts)):(this.hosts.read=o(i.hosts.read),this.hosts.write=o(i.hosts.write));else{var d=c(this._shuffleResult,function(t){return e+"-"+t+".algolianet.com"}),p=(!1===i.dsn?"":"-dsn")+".algolia.net";this.hosts.read=[this.applicationID+p].concat(d),this.hosts.write=[this.applicationID+".algolia.net"].concat(d)}this.hosts.read=c(this.hosts.read,u(h)),this.hosts.write=c(this.hosts.write,u(h)),this.extraHeaders={},this.cache=i._cache||{},this._ua=i._ua,this._useCache=!(void 0!==i._useCache&&!i._cache)||i._useCache,this._useRequestCache=this._useCache&&i._useRequestCache,this._useFallback=void 0===i.useFallback||i.useFallback,this._setTimeout=i._setTimeout,s("init done, %j",this)}function u(e){return function(t){return e+"//"+t.toLowerCase()}}function l(e){if(void 0===Array.prototype.toJSON)return JSON.stringify(e);var t=Array.prototype.toJSON;delete Array.prototype.toJSON;var n=JSON.stringify(e);return Array.prototype.toJSON=t,n}function h(e){var t={};for(var n in e){var r;Object.prototype.hasOwnProperty.call(e,n)&&(r="x-algolia-api-key"===n||"x-algolia-application-id"===n?"**hidden for security purposes**":e[n],t[n]=r)}return t}c.prototype.initIndex=function(e){return new s(this,e)},c.prototype.setExtraHeader=function(e,t){this.extraHeaders[e.toLowerCase()]=t},c.prototype.getExtraHeader=function(e){return this.extraHeaders[e.toLowerCase()]},c.prototype.unsetExtraHeader=function(e){delete this.extraHeaders[e.toLowerCase()]},c.prototype.addAlgoliaAgent=function(e){var t="; "+e;-1===this._ua.indexOf(t)&&(this._ua+=t)},c.prototype._jsonRequest=function(e){this._checkAppIdData();var t,s,o,a=n(1009)("algoliasearch:"+e.url),c=e.additionalUA||"",u=e.cache,d=this,p=0,f=!1,m=d._useFallback&&d._request.fallback&&e.fallback;this.apiKey.length>500&&void 0!==e.body&&(void 0!==e.body.params||void 0!==e.body.requests)?(e.body.apiKey=this.apiKey,o=this._computeRequestHeaders({additionalUA:c,withApiKey:!1,headers:e.headers})):o=this._computeRequestHeaders({additionalUA:c,headers:e.headers}),void 0!==e.body&&(t=l(e.body)),a("request start");var g=[];function v(e,t,n){return d._useCache&&e&&t&&void 0!==t[n]}function y(t,n){if(v(d._useRequestCache,u,s)&&t.catch(function(){delete u[s]}),"function"!=typeof e.callback)return t.then(n);t.then(function(t){i(function(){e.callback(null,n(t))},d._setTimeout||setTimeout)},function(t){i(function(){e.callback(t)},d._setTimeout||setTimeout)})}if(d._useCache&&d._useRequestCache&&(s=e.url),d._useCache&&d._useRequestCache&&t&&(s+="_body_"+t),v(d._useRequestCache,u,s)){a("serving request from cache");var b=u[s];return y("function"!=typeof b.then?d._promise.resolve({responseText:b}):b,function(e){return JSON.parse(e.responseText)})}var w=function n(i,y){d._checkAppIdData();var b=new Date;if(d._useCache&&!d._useRequestCache&&(s=e.url),d._useCache&&!d._useRequestCache&&t&&(s+="_body_"+y.body),v(!d._useRequestCache,u,s)){a("serving response from cache");var w=u[s];return d._promise.resolve({body:JSON.parse(w),responseText:w})}if(p>=d.hosts[e.hostType].length)return!m||f?(a("could not get any response"),d._promise.reject(new r.AlgoliaSearchError("Cannot connect to the AlgoliaSearch API. Send an email to support@algolia.com to report and resolve the issue. Application id was: "+d.applicationID,{debugData:g}))):(a("switching to fallback"),p=0,y.method=e.fallback.method,y.url=e.fallback.url,y.jsonBody=e.fallback.body,y.jsonBody&&(y.body=l(y.jsonBody)),o=d._computeRequestHeaders({additionalUA:c,headers:e.headers}),y.timeouts=d._getTimeoutsForRequest(e.hostType),d._setHostIndexByType(0,e.hostType),f=!0,n(d._request.fallback,y));var x=d._getHostByType(e.hostType),E=x+y.url,T={body:y.body,jsonBody:y.jsonBody,method:y.method,headers:o,timeouts:y.timeouts,debug:a,forceAuthHeaders:y.forceAuthHeaders};return a("method: %s, url: %s, headers: %j, timeouts: %d",T.method,E,T.headers,T.timeouts),i===d._request.fallback&&a("using fallback"),i.call(d,E,T).then(function(e){var n=e&&e.body&&e.body.message&&e.body.status||e.statusCode||e&&e.body&&200;a("received response: statusCode: %s, computed statusCode: %d, headers: %j",e.statusCode,n,e.headers);var i=2===Math.floor(n/100),c=new Date;if(g.push({currentHost:x,headers:h(o),content:t||null,contentLength:void 0!==t?t.length:null,method:y.method,timeouts:y.timeouts,url:y.url,startTime:b,endTime:c,duration:c-b,statusCode:n}),i)return d._useCache&&!d._useRequestCache&&u&&(u[s]=e.responseText),{responseText:e.responseText,body:e.body};if(4!==Math.floor(n/100))return p+=1,A();a("unrecoverable error");var l=new r.AlgoliaSearchError(e.body&&e.body.message,{debugData:g,statusCode:n});return d._promise.reject(l)},function(s){a("error: %s, stack: %s",s.message,s.stack);var c=new Date;return g.push({currentHost:x,headers:h(o),content:t||null,contentLength:void 0!==t?t.length:null,method:y.method,timeouts:y.timeouts,url:y.url,startTime:b,endTime:c,duration:c-b}),s instanceof r.AlgoliaSearchError||(s=new r.Unknown(s&&s.message,s)),p+=1,s instanceof r.Unknown||s instanceof r.UnparsableJSON||p>=d.hosts[e.hostType].length&&(f||!m)?(s.debugData=g,d._promise.reject(s)):s instanceof r.RequestTimeout?(a("retrying request with higher timeout"),d._incrementHostIndex(e.hostType),d._incrementTimeoutMultipler(),y.timeouts=d._getTimeoutsForRequest(e.hostType),n(i,y)):A()});function A(){return a("retrying request"),d._incrementHostIndex(e.hostType),n(i,y)}}(d._request,{url:e.url,method:e.method,body:t,jsonBody:e.body,timeouts:d._getTimeoutsForRequest(e.hostType),forceAuthHeaders:e.forceAuthHeaders});return d._useCache&&d._useRequestCache&&u&&(u[s]=w),y(w,function(e){return e.body})},c.prototype._getSearchParams=function(e,t){if(null==e)return t;for(var n in e)null!==n&&void 0!==e[n]&&e.hasOwnProperty(n)&&(t+=""===t?"":"&",t+=n+"="+encodeURIComponent("[object Array]"===Object.prototype.toString.call(e[n])?l(e[n]):e[n]));return t},c.prototype._computeRequestHeaders=function(e){var t=n(5144),r={"x-algolia-agent":e.additionalUA?this._ua+"; "+e.additionalUA:this._ua,"x-algolia-application-id":this.applicationID};return!1!==e.withApiKey&&(r["x-algolia-api-key"]=this.apiKey),this.userToken&&(r["x-algolia-usertoken"]=this.userToken),this.securityTags&&(r["x-algolia-tagfilters"]=this.securityTags),t(this.extraHeaders,function(e,t){r[t]=e}),e.headers&&t(e.headers,function(e,t){r[t]=e}),r},c.prototype.search=function(e,t,r){var i=n(6815),s=n(8350);if(!i(e))throw new Error("Usage: client.search(arrayOfQueries[, callback])");"function"==typeof t?(r=t,t={}):void 0===t&&(t={});var o=this,a={requests:s(e,function(e){var t="";return void 0!==e.query&&(t+="query="+encodeURIComponent(e.query)),{indexName:e.indexName,params:o._getSearchParams(e.params,t)}})},c=s(a.requests,function(e,t){return t+"="+encodeURIComponent("/1/indexes/"+encodeURIComponent(e.indexName)+"?"+e.params)}).join("&");return void 0!==t.strategy&&(a.strategy=t.strategy),this._jsonRequest({cache:this.cache,method:"POST",url:"/1/indexes/*/queries",body:a,hostType:"read",fallback:{method:"GET",url:"/1/indexes/*",body:{params:c}},callback:r})},c.prototype.searchForFacetValues=function(e){var t=n(6815),r=n(8350),i="Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])";if(!t(e))throw new Error(i);var s=this;return s._promise.all(r(e,function(e){if(!e||void 0===e.indexName||void 0===e.params.facetName||void 0===e.params.facetQuery)throw new Error(i);var t=n(393),r=n(2535),o=e.indexName,a=e.params,c=a.facetName,u=r(t(a),function(e){return"facetName"===e}),l=s._getSearchParams(u,"");return s._jsonRequest({cache:s.cache,method:"POST",url:"/1/indexes/"+encodeURIComponent(o)+"/facets/"+encodeURIComponent(c)+"/query",hostType:"read",body:{params:l}})}))},c.prototype.setSecurityTags=function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var t=[],n=0;n<e.length;++n)if("[object Array]"===Object.prototype.toString.call(e[n])){for(var r=[],i=0;i<e[n].length;++i)r.push(e[n][i]);t.push("("+r.join(",")+")")}else t.push(e[n]);e=t.join(",")}this.securityTags=e},c.prototype.setUserToken=function(e){this.userToken=e},c.prototype.clearCache=function(){this.cache={}},c.prototype.setRequestTimeout=function(e){e&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=e)},c.prototype.setTimeouts=function(e){this._timeouts=e},c.prototype.getTimeouts=function(){return this._timeouts},c.prototype._getAppIdData=function(){var e=o.get(this.applicationID);return null!==e&&this._cacheAppIdData(e),e},c.prototype._setAppIdData=function(e){return e.lastChange=(new Date).getTime(),this._cacheAppIdData(e),o.set(this.applicationID,e)},c.prototype._checkAppIdData=function(){var e=this._getAppIdData(),t=(new Date).getTime();return null===e||t-e.lastChange>a?this._resetInitialAppIdData(e):e},c.prototype._resetInitialAppIdData=function(e){var t=e||{};return t.hostIndexes={read:0,write:0},t.timeoutMultiplier=1,t.shuffleResult=t.shuffleResult||function(e){for(var t,n,r=e.length;0!==r;)n=Math.floor(Math.random()*r),t=e[r-=1],e[r]=e[n],e[n]=t;return e}([1,2,3]),this._setAppIdData(t)},c.prototype._cacheAppIdData=function(e){this._hostIndexes=e.hostIndexes,this._timeoutMultiplier=e.timeoutMultiplier,this._shuffleResult=e.shuffleResult},c.prototype._partialAppIdDataUpdate=function(e){var t=n(5144),r=this._getAppIdData();return t(e,function(e,t){r[t]=e}),this._setAppIdData(r)},c.prototype._getHostByType=function(e){return this.hosts[e][this._getHostIndexByType(e)]},c.prototype._getTimeoutMultiplier=function(){return this._timeoutMultiplier},c.prototype._getHostIndexByType=function(e){return this._hostIndexes[e]},c.prototype._setHostIndexByType=function(e,t){var r=n(393)(this._hostIndexes);return r[t]=e,this._partialAppIdDataUpdate({hostIndexes:r}),e},c.prototype._incrementHostIndex=function(e){return this._setHostIndexByType((this._getHostIndexByType(e)+1)%this.hosts[e].length,e)},c.prototype._incrementTimeoutMultipler=function(){var e=Math.max(this._timeoutMultiplier+1,4);return this._partialAppIdDataUpdate({timeoutMultiplier:e})},c.prototype._getTimeoutsForRequest=function(e){return{connect:this._timeouts.connect*this._timeoutMultiplier,complete:this._timeouts[e]*this._timeoutMultiplier}}},7345(e,t,n){"use strict";var r=n(3615),i=n(2211),s=n(1149);e.exports=function(e,t,n,o){var a=s(e.as._ua);if(a&&a[0]>=3&&a[1]>20&&((t=t||{}).additionalUA="autocomplete.js "+i),!n.source)return r.error("Missing 'source' key");var c=r.isFunction(n.source)?n.source:function(e){return e[n.source]};if(!n.index)return r.error("Missing 'index' key");var u=n.index;return o=o||{},function(a,l){e.search(a,t,function(e,a){if(e)r.error(e.message);else{if(a.hits.length>0){var h=a.hits[0],d=r.mixin({hitsPerPage:0},n);delete d.source,delete d.index;var p=s(u.as._ua);return p&&p[0]>=3&&p[1]>20&&(t.additionalUA="autocomplete.js "+i),void u.search(c(h),d,function(e,t){if(e)r.error(e.message);else{var n=[];if(o.includeAll){var i=o.allTitle||"All departments";n.push(r.mixin({facet:{value:i,count:t.nbHits}},r.cloneDeep(h)))}r.each(t.facets,function(e,t){r.each(e,function(e,i){n.push(r.mixin({facet:{facet:t,value:i,count:e}},r.cloneDeep(h)))})});for(var s=1;s<a.hits.length;++s)n.push(a.hits[s]);l(n,a)}})}l([])}})}}},7354(e,t,n){"use strict";var r=n(6984),i=n(6644);e.exports=i(r,"Browser (lite)")},7507(e,t){"use strict";t.test=function(){return"function"==typeof globalThis.queueMicrotask},t.install=function(e){return function(){globalThis.queueMicrotask(e)}}},7637(e,t,n){"use strict";e.exports=function(e,t,n){if("GET"===t.method){t.debug("JSONP: start");var s=!1,o=!1;i+=1;var a=document.getElementsByTagName("head")[0],c=document.createElement("script"),u="algoliaJSONP_"+i,l=!1;window[u]=function(e){!function(){try{delete window[u],delete window[u+"_loaded"]}catch(e){window[u]=window[u+"_loaded"]=void 0}}(),o?t.debug("JSONP: Late answer, ignoring"):(s=!0,p(),n(null,{body:e,responseText:JSON.stringify(e)}))},e+="&callback="+u,t.jsonBody&&t.jsonBody.params&&(e+="&"+t.jsonBody.params);var h=setTimeout(function(){t.debug("JSONP: Script timeout"),o=!0,p(),n(new r.RequestTimeout)},t.timeouts.complete);c.onreadystatechange=function(){"loaded"!==this.readyState&&"complete"!==this.readyState||d()},c.onload=d,c.onerror=function(){t.debug("JSONP: Script error"),l||o||(p(),n(new r.JSONPScriptError))},c.async=!0,c.defer=!0,c.src=e,a.appendChild(c)}else n(new Error("Method "+t.method+" "+e+" is not supported by JSONP."));function d(){t.debug("JSONP: success"),l||o||(l=!0,s||(t.debug("JSONP: Fail. Script loaded but did not call the callback"),p(),n(new r.JSONPScriptFail)))}function p(){clearTimeout(h),c.onload=null,c.onreadystatechange=null,c.onerror=null,a.removeChild(c)}};var r=n(8565),i=0},7875(e){e.exports=function(){"use strict";function e(e){return"function"==typeof e}var t=Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},n=0,r=void 0,i=void 0,s=function(e,t){d[n]=e,d[n+1]=t,2===(n+=2)&&(i?i(p):y())};var o="undefined"!=typeof window?window:void 0,a=o||{},c=a.MutationObserver||a.WebKitMutationObserver,u="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),l="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel;function h(){var e=setTimeout;return function(){return e(p,1)}}var d=new Array(1e3);function p(){for(var e=0;e<n;e+=2)(0,d[e])(d[e+1]),d[e]=void 0,d[e+1]=void 0;n=0}var f,m,g,v,y=void 0;function b(e,t){var n=this,r=new this.constructor(E);void 0===r[x]&&$(r);var i=n._state;if(i){var o=arguments[i-1];s(function(){return L(i,r,o,n._result)})}else D(n,r,e,t);return r}function w(e){if(e&&"object"==typeof e&&e.constructor===this)return e;var t=new this(E);return S(t,e),t}y=u?function(){return process.nextTick(p)}:c?(m=0,g=new c(p),v=document.createTextNode(""),g.observe(v,{characterData:!0}),function(){v.data=m=++m%2}):l?((f=new MessageChannel).port1.onmessage=p,function(){return f.port2.postMessage(0)}):void 0===o?function(){try{var e=Function("return this")().require("vertx");return void 0!==(r=e.runOnLoop||e.runOnContext)?function(){r(p)}:h()}catch(e){return h()}}():h();var x=Math.random().toString(36).substring(2);function E(){}var T=void 0,A=1,C=2;function O(t,n,r){n.constructor===t.constructor&&r===b&&n.constructor.resolve===w?function(e,t){t._state===A?_(e,t._result):t._state===C?N(e,t._result):D(t,void 0,function(t){return S(e,t)},function(t){return N(e,t)})}(t,n):void 0===r?_(t,n):e(r)?function(e,t,n){s(function(e){var r=!1,i=function(e,t,n,r){try{e.call(t,n,r)}catch(e){return e}}(n,t,function(n){r||(r=!0,t!==n?S(e,n):_(e,n))},function(t){r||(r=!0,N(e,t))},e._label);!r&&i&&(r=!0,N(e,i))},e)}(t,n,r):_(t,n)}function S(e,t){if(e===t)N(e,new TypeError("You cannot resolve a promise with itself"));else if(i=typeof(r=t),null===r||"object"!==i&&"function"!==i)_(e,t);else{var n=void 0;try{n=t.then}catch(t){return void N(e,t)}O(e,t,n)}var r,i}function k(e){e._onerror&&e._onerror(e._result),j(e)}function _(e,t){e._state===T&&(e._result=t,e._state=A,0!==e._subscribers.length&&s(j,e))}function N(e,t){e._state===T&&(e._state=C,e._result=t,s(k,e))}function D(e,t,n,r){var i=e._subscribers,o=i.length;e._onerror=null,i[o]=t,i[o+A]=n,i[o+C]=r,0===o&&e._state&&s(j,e)}function j(e){var t=e._subscribers,n=e._state;if(0!==t.length){for(var r=void 0,i=void 0,s=e._result,o=0;o<t.length;o+=3)r=t[o],i=t[o+n],r?L(n,r,i,s):i(s);e._subscribers.length=0}}function L(t,n,r,i){var s=e(r),o=void 0,a=void 0,c=!0;if(s){try{o=r(i)}catch(e){c=!1,a=e}if(n===o)return void N(n,new TypeError("A promises callback cannot return that same promise."))}else o=i;n._state!==T||(s&&c?S(n,o):!1===c?N(n,a):t===A?_(n,o):t===C&&N(n,o))}var M=0;function $(e){e[x]=M++,e._state=void 0,e._result=void 0,e._subscribers=[]}var F=function(){function e(e,n){this._instanceConstructor=e,this.promise=new e(E),this.promise[x]||$(this.promise),t(n)?(this.length=n.length,this._remaining=n.length,this._result=new Array(this.length),0===this.length?_(this.promise,this._result):(this.length=this.length||0,this._enumerate(n),0===this._remaining&&_(this.promise,this._result))):N(this.promise,new Error("Array Methods must be provided an Array"))}return e.prototype._enumerate=function(e){for(var t=0;this._state===T&&t<e.length;t++)this._eachEntry(e[t],t)},e.prototype._eachEntry=function(e,t){var n=this._instanceConstructor,r=n.resolve;if(r===w){var i=void 0,s=void 0,o=!1;try{i=e.then}catch(e){o=!0,s=e}if(i===b&&e._state!==T)this._settledAt(e._state,t,e._result);else if("function"!=typeof i)this._remaining--,this._result[t]=e;else if(n===I){var a=new n(E);o?N(a,s):O(a,e,i),this._willSettleAt(a,t)}else this._willSettleAt(new n(function(t){return t(e)}),t)}else this._willSettleAt(r(e),t)},e.prototype._settledAt=function(e,t,n){var r=this.promise;r._state===T&&(this._remaining--,e===C?N(r,n):this._result[t]=n),0===this._remaining&&_(r,this._result)},e.prototype._willSettleAt=function(e,t){var n=this;D(e,void 0,function(e){return n._settledAt(A,t,e)},function(e){return n._settledAt(C,t,e)})},e}();var I=function(){function t(e){this[x]=M++,this._result=this._state=void 0,this._subscribers=[],E!==e&&("function"!=typeof e&&function(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}(),this instanceof t?function(e,t){try{t(function(t){S(e,t)},function(t){N(e,t)})}catch(t){N(e,t)}}(this,e):function(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}())}return t.prototype.catch=function(e){return this.then(null,e)},t.prototype.finally=function(t){var n=this,r=n.constructor;return e(t)?n.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})}):n.then(t,t)},t}();return I.prototype.then=b,I.all=function(e){return new F(this,e).promise},I.race=function(e){var n=this;return t(e)?new n(function(t,r){for(var i=e.length,s=0;s<i;s++)n.resolve(e[s]).then(t,r)}):new n(function(e,t){return t(new TypeError("You must pass an array to race."))})},I.resolve=w,I.reject=function(e){var t=new this(E);return N(t,e),t},I._setScheduler=function(e){i=e},I._setAsap=function(e){s=e},I._asap=s,I.polyfill=function(){var e=void 0;if("undefined"!=typeof globalThis)e=globalThis;else if("undefined"!=typeof self)e=self;else try{e=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var t=e.Promise;if(t){var n=null;try{n=Object.prototype.toString.call(t.resolve())}catch(e){}if("[object Promise]"===n&&!t.cast)return}e.Promise=I},I.Promise=I,I}()},8076(e,t,n){"use strict";globalThis.$=n(4651)},8160(e,t,n){"use strict";var r;if(!Object.keys){var i=Object.prototype.hasOwnProperty,s=Object.prototype.toString,o=n(968),a=Object.prototype.propertyIsEnumerable,c=!a.call({toString:null},"toString"),u=a.call(function(){},"prototype"),l=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],h=function(e){var t=e.constructor;return t&&t.prototype===e},d={$applicationCache:!0,$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$onmozfullscreenchange:!0,$onmozfullscreenerror:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},p=function(){if("undefined"==typeof window)return!1;for(var e in window)try{if(!d["$"+e]&&i.call(window,e)&&null!==window[e]&&"object"==typeof window[e])try{h(window[e])}catch(e){return!0}}catch(e){return!0}return!1}();r=function(e){var t=null!==e&&"object"==typeof e,n="[object Function]"===s.call(e),r=o(e),a=t&&"[object String]"===s.call(e),d=[];if(!t&&!n&&!r)throw new TypeError("Object.keys called on a non-object");var f=u&&n;if(a&&e.length>0&&!i.call(e,0))for(var m=0;m<e.length;++m)d.push(String(m));if(r&&e.length>0)for(var g=0;g<e.length;++g)d.push(String(g));else for(var v in e)f&&"prototype"===v||!i.call(e,v)||d.push(String(v));if(c)for(var y=function(e){if("undefined"==typeof window||!p)return h(e);try{return h(e)}catch(e){return!1}}(e),b=0;b<l.length;++b)y&&"constructor"===l[b]||!i.call(e,l[b])||d.push(l[b]);return d}}e.exports=r},8302(e,t,n){var r;function i(e){function n(){if(n.enabled){var e=n,i=+new Date,s=i-(r||i);e.diff=s,e.prev=r,e.curr=i,r=i;for(var o=new Array(arguments.length),a=0;a<o.length;a++)o[a]=arguments[a];o[0]=t.coerce(o[0]),"string"!=typeof o[0]&&o.unshift("%O");var c=0;o[0]=o[0].replace(/%([a-zA-Z%])/g,function(n,r){if("%%"===n)return n;c++;var i=t.formatters[r];if("function"==typeof i){var s=o[c];n=i.call(e,s),o.splice(c,1),c--}return n}),t.formatArgs.call(e,o),(n.log||t.log||console.log.bind(console)).apply(e,o)}}return n.namespace=e,n.enabled=t.enabled(e),n.useColors=t.useColors(),n.color=function(e){var n,r=0;for(n in e)r=(r<<5)-r+e.charCodeAt(n),r|=0;return t.colors[Math.abs(r)%t.colors.length]}(e),"function"==typeof t.init&&t.init(n),n}(t=e.exports=i.debug=i.default=i).coerce=function(e){return e instanceof Error?e.stack||e.message:e},t.disable=function(){t.enable("")},t.enable=function(e){t.save(e),t.names=[],t.skips=[];for(var n=("string"==typeof e?e:"").split(/[\s,]+/),r=n.length,i=0;i<r;i++)n[i]&&("-"===(e=n[i].replace(/\*/g,".*?"))[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))},t.enabled=function(e){var n,r;for(n=0,r=t.skips.length;n<r;n++)if(t.skips[n].test(e))return!1;for(n=0,r=t.names.length;n<r;n++)if(t.names[n].test(e))return!0;return!1},t.humanize=n(4193),t.names=[],t.skips=[],t.formatters={}},8350(e,t,n){var r=n(5144);e.exports=function(e,t){var n=[];return r(e,function(r,i){n.push(t(r,i,e))}),n}},8565(e,t,n){"use strict";var r=n(5615);function i(e,t){var r=n(5144),i=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):i.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=e||"Unknown error",t&&r(t,function(e,t){i[t]=e})}function s(e,t){function n(){var n=Array.prototype.slice.call(arguments,0);"string"!=typeof n[0]&&n.unshift(t),i.apply(this,n),this.name="AlgoliaSearch"+e+"Error"}return r(n,i),n}r(i,Error),e.exports={AlgoliaSearchError:i,UnparsableJSON:s("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:s("RequestTimeout","Request timed out before getting a response"),Network:s("Network","Network issue, see err.more for details"),JSONPScriptFail:s("JSONPScriptFail","<script> was loaded but did not call our provided callback"),ValidUntilNotFound:s("ValidUntilNotFound","The SecuredAPIKey does not have a validUntil parameter."),JSONPScriptError:s("JSONPScriptError","<script> unable to load due to an `error` event on it"),ObjectNotFound:s("ObjectNotFound","Object not found"),Unknown:s("Unknown","Unknown error occured")}},8696(e){"use strict";var t=Function.prototype.bind;e.exports=function(e){var n=function(){for(var n=arguments.length,r=Array(n),i=0;i<n;i++)r[i]=arguments[i];return new(t.apply(e,[null].concat(r)))};return n.__proto__=e,n.prototype=e.prototype,n}},8925(e,t,n){var r,i=n(1009)("algoliasearch:src/hostIndexState.js"),s="algoliasearch-client-js",o={state:{},set:function(e,t){return this.state[e]=t,this.state[e]},get:function(e){return this.state[e]||null}},a={set:function(e,t){o.set(e,t);try{var n=JSON.parse(globalThis.localStorage[s]);return n[e]=t,globalThis.localStorage[s]=JSON.stringify(n),n[e]}catch(t){return c(e,t)}},get:function(e){try{return JSON.parse(globalThis.localStorage[s])[e]||null}catch(t){return c(e,t)}}};function c(e,t){return i("localStorage failed with",t),function(){try{globalThis.localStorage.removeItem(s)}catch(e){}}(),(r=o).get(e)}function u(e,t){return 1===arguments.length?r.get(e):r.set(e,t)}function l(){try{return"localStorage"in globalThis&&null!==globalThis.localStorage&&(globalThis.localStorage[s]||globalThis.localStorage.setItem(s,JSON.stringify({})),!0)}catch(e){return!1}}r=l()?a:o,e.exports={get:u,set:u,supportsLocalStorage:l}},9227(e,t,n){"use strict";e.exports=n(5900)},9228(e,t,n){"use strict";var r=Array.prototype.slice,i=n(968),s=Object.keys,o=s?function(e){return s(e)}:n(8160),a=Object.keys;o.shim=function(){if(Object.keys){var e=function(){var e=Object.keys(arguments);return e&&e.length===arguments.length}(1,2);e||(Object.keys=function(e){return i(e)?a(r.call(e)):a(e)})}else Object.keys=o;return Object.keys||o},e.exports=o},9258(){$(document).ready(function(){var e=$(".js-navigation"),t=$(".js-hamburger-btn");function n(){t.removeClass("is-selected"),e.addClass("md:d-none")}function r(){$("a[href='#']").on("click",function(e){e.preventDefault(),e.stopPropagation()})}$("a[href='#']").click(function(e){e.preventDefault()}),$(document).on("click",".js-docs-table-expand",function(){var e=$(this),t=e.attr("aria-controls"),n=t?document.getElementById(t):null;n&&(e.addClass("d-none"),e.attr("aria-expanded","true"),n.classList.remove("v-truncate","v-truncate-fade","overflow-auto"),n.classList.add("overflow-x-auto"))}),$.when($.ready).then(function(){n(),r(),window.history.replaceState({href:window.location.href,title:$("head").filter("title").text(),nav:$(document).find("#nav").html(),content:$(document).find("#content").html()},"",window.location.href),$("#nav").on("click","a",function(e){if(!e.metaKey&&!e.ctrlKey){e.preventDefault();var t=$(this).attr("href");$.ajax({method:"GET",url:t,cache:!1,dataType:"html"}).done(function(e){var i=$(e).filter("title").text(),s=$(e).find("#nav").html(),o=$(e).find("#content").html();$("head title").text(i),$("#nav").html(s),$("#content").html(o);var a=$(e).find(".js-toc"),c=a.html();a.length>0&&""!==c.trim()?$(".js-toc").html(c).show():$(".js-toc").html("").hide(),$(document).scrollTop(0),n(),r(),window.history.pushState({href:t,title:i,nav:$(e).find("#nav").html(),content:$(e).find("#content").html()},"",t)})}}),window.onpopstate=history.onpushstate=function(e){e.state&&($("title").text(e.state.title),$("#nav").html(e.state.nav),$("#content").html(e.state.content))}})})},9470(e,t){"use strict";t.test=function(){return"document"in globalThis&&"onreadystatechange"in globalThis.document.createElement("script")},t.install=function(e){return function(){var t=globalThis.document.createElement("script");return t.onreadystatechange=function(){e(),t.onreadystatechange=null,t.parentNode.removeChild(t),t=null},globalThis.document.documentElement.appendChild(t),e}}},9596(e,t,n){"use strict";var r=n(3615),i={wrapper:{position:"relative",display:"inline-block"},hint:{position:"absolute",top:"0",left:"0",borderColor:"transparent",boxShadow:"none",opacity:"1"},input:{position:"relative",verticalAlign:"top",backgroundColor:"transparent"},inputWithNoHint:{position:"relative",verticalAlign:"top"},dropdown:{position:"absolute",top:"100%",left:"0",zIndex:"100",display:"none"},suggestions:{display:"block"},suggestion:{whiteSpace:"nowrap",cursor:"pointer"},suggestionChild:{whiteSpace:"normal"},ltr:{left:"0",right:"auto"},rtl:{left:"auto",right:"0"},defaultClasses:{root:"algolia-autocomplete",prefix:"aa",noPrefix:!1,dropdownMenu:"dropdown-menu",input:"input",hint:"hint",suggestions:"suggestions",suggestion:"suggestion",cursor:"cursor",dataset:"dataset",empty:"empty"},appendTo:{wrapper:{position:"absolute",zIndex:"100",display:"none"},input:{},inputWithNoHint:{},dropdown:{display:"block"}}};r.isMsie()&&r.mixin(i.input,{backgroundImage:"url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"}),r.isMsie()&&r.isMsie()<=7&&r.mixin(i.input,{marginTop:"-1px"}),e.exports=i},9659(e,t,n){"use strict";var r,i,s,o=[n(1580),n(7507),n(9788),n(4505),n(9470),n(6168)],a=-1,c=[],u=!1;function l(){r&&i&&(r=!1,i.length?c=i.concat(c):a=-1,c.length&&h())}function h(){if(!r){u=!1,r=!0;for(var e=c.length,t=setTimeout(l);e;){for(i=c,c=[];i&&++a<e;)i[a].run();a=-1,e=c.length}i=null,a=-1,r=!1,clearTimeout(t)}}for(var d=-1,p=o.length;++d<p;)if(o[d]&&o[d].test&&o[d].test()){s=o[d].install(h);break}function f(e,t){this.fun=e,this.array=t}f.prototype.run=function(){var e=this.fun,t=this.array;switch(t.length){case 0:return e();case 1:return e(t[0]);case 2:return e(t[0],t[1]);case 3:return e(t[0],t[1],t[2]);default:return e.apply(null,t)}},e.exports=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];c.push(new f(e,t)),u||r||(u=!0,s())}},9788(e,t){"use strict";var n=globalThis.MutationObserver||globalThis.WebKitMutationObserver;t.test=function(){return n},t.install=function(e){var t=0,r=new n(e),i=globalThis.document.createTextNode("");return r.observe(i,{characterData:!0}),function(){i.data=t=++t%2}}}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var s=t[r]={exports:{}};return e[r].call(s.exports,s,s.exports,n),s.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";var e={};n.r(e),n.d(e,{BannerController:()=>ue,BasePopoverController:()=>kt,ModalController:()=>pe,PopoverController:()=>_t,StacksApplication:()=>ie,StacksController:()=>oe,TabListController:()=>ve,TableController:()=>Ft,ToastController:()=>Pt,TooltipController:()=>Bt,addController:()=>ce,application:()=>se,attachPopover:()=>jt,createController:()=>ae,detachPopover:()=>Lt,hideBanner:()=>he,hideModal:()=>me,hidePopover:()=>Dt,hideToast:()=>Ht,setTooltipHtml:()=>Vt,setTooltipText:()=>Ut,showBanner:()=>le,showModal:()=>fe,showPopover:()=>Nt,showToast:()=>Rt});class t{constructor(e,t,n){this.eventTarget=e,this.eventName=t,this.eventOptions=n,this.unorderedBindings=new Set}connect(){this.eventTarget.addEventListener(this.eventName,this,this.eventOptions)}disconnect(){this.eventTarget.removeEventListener(this.eventName,this,this.eventOptions)}bindingConnected(e){this.unorderedBindings.add(e)}bindingDisconnected(e){this.unorderedBindings.delete(e)}handleEvent(e){const t=function(e){if("immediatePropagationStopped"in e)return e;{const{stopImmediatePropagation:t}=e;return Object.assign(e,{immediatePropagationStopped:!1,stopImmediatePropagation(){this.immediatePropagationStopped=!0,t.call(this)}})}}(e);for(const e of this.bindings){if(t.immediatePropagationStopped)break;e.handleEvent(t)}}hasBindings(){return this.unorderedBindings.size>0}get bindings(){return Array.from(this.unorderedBindings).sort((e,t)=>{const n=e.index,r=t.index;return n<r?-1:n>r?1:0})}}class r{constructor(e){this.application=e,this.eventListenerMaps=new Map,this.started=!1}start(){this.started||(this.started=!0,this.eventListeners.forEach(e=>e.connect()))}stop(){this.started&&(this.started=!1,this.eventListeners.forEach(e=>e.disconnect()))}get eventListeners(){return Array.from(this.eventListenerMaps.values()).reduce((e,t)=>e.concat(Array.from(t.values())),[])}bindingConnected(e){this.fetchEventListenerForBinding(e).bindingConnected(e)}bindingDisconnected(e,t=!1){this.fetchEventListenerForBinding(e).bindingDisconnected(e),t&&this.clearEventListenersForBinding(e)}handleError(e,t,n={}){this.application.handleError(e,`Error ${t}`,n)}clearEventListenersForBinding(e){const t=this.fetchEventListenerForBinding(e);t.hasBindings()||(t.disconnect(),this.removeMappedEventListenerFor(e))}removeMappedEventListenerFor(e){const{eventTarget:t,eventName:n,eventOptions:r}=e,i=this.fetchEventListenerMapForEventTarget(t),s=this.cacheKey(n,r);i.delete(s),0==i.size&&this.eventListenerMaps.delete(t)}fetchEventListenerForBinding(e){const{eventTarget:t,eventName:n,eventOptions:r}=e;return this.fetchEventListener(t,n,r)}fetchEventListener(e,t,n){const r=this.fetchEventListenerMapForEventTarget(e),i=this.cacheKey(t,n);let s=r.get(i);return s||(s=this.createEventListener(e,t,n),r.set(i,s)),s}createEventListener(e,n,r){const i=new t(e,n,r);return this.started&&i.connect(),i}fetchEventListenerMapForEventTarget(e){let t=this.eventListenerMaps.get(e);return t||(t=new Map,this.eventListenerMaps.set(e,t)),t}cacheKey(e,t){const n=[e];return Object.keys(t).sort().forEach(e=>{n.push(`${t[e]?"":"!"}${e}`)}),n.join(":")}}const i={stop:({event:e,value:t})=>(t&&e.stopPropagation(),!0),prevent:({event:e,value:t})=>(t&&e.preventDefault(),!0),self:({event:e,value:t,element:n})=>!t||n===e.target},s=/^(?:(?:([^.]+?)\+)?(.+?)(?:\.(.+?))?(?:@(window|document))?->)?(.+?)(?:#([^:]+?))(?::(.+))?$/;function o(e){return e.replace(/(?:[_-])([a-z0-9])/g,(e,t)=>t.toUpperCase())}function a(e){return o(e.replace(/--/g,"-").replace(/__/g,"_"))}function c(e){return e.charAt(0).toUpperCase()+e.slice(1)}function u(e){return e.replace(/([A-Z])/g,(e,t)=>`-${t.toLowerCase()}`)}function l(e){return null!=e}function h(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const d=["meta","ctrl","alt","shift"];class p{constructor(e,t,n,r){this.element=e,this.index=t,this.eventTarget=n.eventTarget||e,this.eventName=n.eventName||function(e){const t=e.tagName.toLowerCase();if(t in f)return f[t](e)}(e)||m("missing event name"),this.eventOptions=n.eventOptions||{},this.identifier=n.identifier||m("missing identifier"),this.methodName=n.methodName||m("missing method name"),this.keyFilter=n.keyFilter||"",this.schema=r}static forToken(e,t){return new this(e.element,e.index,function(e){const t=e.trim().match(s)||[];let n=t[2],r=t[3];return r&&!["keydown","keyup","keypress"].includes(n)&&(n+=`.${r}`,r=""),{eventTarget:(i=t[4],"window"==i?window:"document"==i?document:void 0),eventName:n,eventOptions:t[7]?(o=t[7],o.split(":").reduce((e,t)=>Object.assign(e,{[t.replace(/^!/,"")]:!/^!/.test(t)}),{})):{},identifier:t[5],methodName:t[6],keyFilter:t[1]||r};var i,o}(e.content),t)}toString(){const e=this.keyFilter?`.${this.keyFilter}`:"",t=this.eventTargetName?`@${this.eventTargetName}`:"";return`${this.eventName}${e}${t}->${this.identifier}#${this.methodName}`}shouldIgnoreKeyboardEvent(e){if(!this.keyFilter)return!1;const t=this.keyFilter.split("+");if(this.keyFilterDissatisfied(e,t))return!0;const n=t.filter(e=>!d.includes(e))[0];return!!n&&(h(this.keyMappings,n)||m(`contains unknown key filter: ${this.keyFilter}`),this.keyMappings[n].toLowerCase()!==e.key.toLowerCase())}shouldIgnoreMouseEvent(e){if(!this.keyFilter)return!1;const t=[this.keyFilter];return!!this.keyFilterDissatisfied(e,t)}get params(){const e={},t=new RegExp(`^data-${this.identifier}-(.+)-param$`,"i");for(const{name:n,value:r}of Array.from(this.element.attributes)){const i=n.match(t),s=i&&i[1];s&&(e[o(s)]=g(r))}return e}get eventTargetName(){return(e=this.eventTarget)==window?"window":e==document?"document":void 0;var e}get keyMappings(){return this.schema.keyMappings}keyFilterDissatisfied(e,t){const[n,r,i,s]=d.map(e=>t.includes(e));return e.metaKey!==n||e.ctrlKey!==r||e.altKey!==i||e.shiftKey!==s}}const f={a:()=>"click",button:()=>"click",form:()=>"submit",details:()=>"toggle",input:e=>"submit"==e.getAttribute("type")?"click":"input",select:()=>"change",textarea:()=>"input"};function m(e){throw new Error(e)}function g(e){try{return JSON.parse(e)}catch(t){return e}}class v{constructor(e,t){this.context=e,this.action=t}get index(){return this.action.index}get eventTarget(){return this.action.eventTarget}get eventOptions(){return this.action.eventOptions}get identifier(){return this.context.identifier}handleEvent(e){const t=this.prepareActionEvent(e);this.willBeInvokedByEvent(e)&&this.applyEventModifiers(t)&&this.invokeWithEvent(t)}get eventName(){return this.action.eventName}get method(){const e=this.controller[this.methodName];if("function"==typeof e)return e;throw new Error(`Action "${this.action}" references undefined method "${this.methodName}"`)}applyEventModifiers(e){const{element:t}=this.action,{actionDescriptorFilters:n}=this.context.application,{controller:r}=this.context;let i=!0;for(const[s,o]of Object.entries(this.eventOptions))if(s in n){const a=n[s];i=i&&a({name:s,value:o,event:e,element:t,controller:r})}return i}prepareActionEvent(e){return Object.assign(e,{params:this.action.params})}invokeWithEvent(e){const{target:t,currentTarget:n}=e;try{this.method.call(this.controller,e),this.context.logDebugActivity(this.methodName,{event:e,target:t,currentTarget:n,action:this.methodName})}catch(t){const{identifier:n,controller:r,element:i,index:s}=this,o={identifier:n,controller:r,element:i,index:s,event:e};this.context.handleError(t,`invoking action "${this.action}"`,o)}}willBeInvokedByEvent(e){const t=e.target;return!(e instanceof KeyboardEvent&&this.action.shouldIgnoreKeyboardEvent(e))&&!(e instanceof MouseEvent&&this.action.shouldIgnoreMouseEvent(e))&&(this.element===t||(t instanceof Element&&this.element.contains(t)?this.scope.containsElement(t):this.scope.containsElement(this.action.element)))}get controller(){return this.context.controller}get methodName(){return this.action.methodName}get element(){return this.scope.element}get scope(){return this.context.scope}}class y{constructor(e,t){this.mutationObserverInit={attributes:!0,childList:!0,subtree:!0},this.element=e,this.started=!1,this.delegate=t,this.elements=new Set,this.mutationObserver=new MutationObserver(e=>this.processMutations(e))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,this.mutationObserverInit),this.refresh())}pause(e){this.started&&(this.mutationObserver.disconnect(),this.started=!1),e(),this.started||(this.mutationObserver.observe(this.element,this.mutationObserverInit),this.started=!0)}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started){const e=new Set(this.matchElementsInTree());for(const t of Array.from(this.elements))e.has(t)||this.removeElement(t);for(const t of Array.from(e))this.addElement(t)}}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){"attributes"==e.type?this.processAttributeChange(e.target,e.attributeName):"childList"==e.type&&(this.processRemovedNodes(e.removedNodes),this.processAddedNodes(e.addedNodes))}processAttributeChange(e,t){this.elements.has(e)?this.delegate.elementAttributeChanged&&this.matchElement(e)?this.delegate.elementAttributeChanged(e,t):this.removeElement(e):this.matchElement(e)&&this.addElement(e)}processRemovedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.processTree(e,this.removeElement)}}processAddedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.elementIsActive(e)&&this.processTree(e,this.addElement)}}matchElement(e){return this.delegate.matchElement(e)}matchElementsInTree(e=this.element){return this.delegate.matchElementsInTree(e)}processTree(e,t){for(const n of this.matchElementsInTree(e))t.call(this,n)}elementFromNode(e){if(e.nodeType==Node.ELEMENT_NODE)return e}elementIsActive(e){return e.isConnected==this.element.isConnected&&this.element.contains(e)}addElement(e){this.elements.has(e)||this.elementIsActive(e)&&(this.elements.add(e),this.delegate.elementMatched&&this.delegate.elementMatched(e))}removeElement(e){this.elements.has(e)&&(this.elements.delete(e),this.delegate.elementUnmatched&&this.delegate.elementUnmatched(e))}}class b{constructor(e,t,n){this.attributeName=t,this.delegate=n,this.elementObserver=new y(e,this)}get element(){return this.elementObserver.element}get selector(){return`[${this.attributeName}]`}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get started(){return this.elementObserver.started}matchElement(e){return e.hasAttribute(this.attributeName)}matchElementsInTree(e){const t=this.matchElement(e)?[e]:[],n=Array.from(e.querySelectorAll(this.selector));return t.concat(n)}elementMatched(e){this.delegate.elementMatchedAttribute&&this.delegate.elementMatchedAttribute(e,this.attributeName)}elementUnmatched(e){this.delegate.elementUnmatchedAttribute&&this.delegate.elementUnmatchedAttribute(e,this.attributeName)}elementAttributeChanged(e,t){this.delegate.elementAttributeValueChanged&&this.attributeName==t&&this.delegate.elementAttributeValueChanged(e,t)}}function w(e,t){let n=e.get(t);return n||(n=new Set,e.set(t,n)),n}class x{constructor(){this.valuesByKey=new Map}get keys(){return Array.from(this.valuesByKey.keys())}get values(){return Array.from(this.valuesByKey.values()).reduce((e,t)=>e.concat(Array.from(t)),[])}get size(){return Array.from(this.valuesByKey.values()).reduce((e,t)=>e+t.size,0)}add(e,t){!function(e,t,n){w(e,t).add(n)}(this.valuesByKey,e,t)}delete(e,t){!function(e,t,n){w(e,t).delete(n),function(e,t){const n=e.get(t);null!=n&&0==n.size&&e.delete(t)}(e,t)}(this.valuesByKey,e,t)}has(e,t){const n=this.valuesByKey.get(e);return null!=n&&n.has(t)}hasKey(e){return this.valuesByKey.has(e)}hasValue(e){return Array.from(this.valuesByKey.values()).some(t=>t.has(e))}getValuesForKey(e){const t=this.valuesByKey.get(e);return t?Array.from(t):[]}getKeysForValue(e){return Array.from(this.valuesByKey).filter(([t,n])=>n.has(e)).map(([e,t])=>e)}}class E{constructor(e,t,n,r){this._selector=t,this.details=r,this.elementObserver=new y(e,this),this.delegate=n,this.matchesByElement=new x}get started(){return this.elementObserver.started}get selector(){return this._selector}set selector(e){this._selector=e,this.refresh()}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get element(){return this.elementObserver.element}matchElement(e){const{selector:t}=this;if(t){const n=e.matches(t);return this.delegate.selectorMatchElement?n&&this.delegate.selectorMatchElement(e,this.details):n}return!1}matchElementsInTree(e){const{selector:t}=this;if(t){const n=this.matchElement(e)?[e]:[],r=Array.from(e.querySelectorAll(t)).filter(e=>this.matchElement(e));return n.concat(r)}return[]}elementMatched(e){const{selector:t}=this;t&&this.selectorMatched(e,t)}elementUnmatched(e){const t=this.matchesByElement.getKeysForValue(e);for(const n of t)this.selectorUnmatched(e,n)}elementAttributeChanged(e,t){const{selector:n}=this;if(n){const t=this.matchElement(e),r=this.matchesByElement.has(n,e);t&&!r?this.selectorMatched(e,n):!t&&r&&this.selectorUnmatched(e,n)}}selectorMatched(e,t){this.delegate.selectorMatched(e,t,this.details),this.matchesByElement.add(t,e)}selectorUnmatched(e,t){this.delegate.selectorUnmatched(e,t,this.details),this.matchesByElement.delete(t,e)}}class T{constructor(e,t){this.element=e,this.delegate=t,this.started=!1,this.stringMap=new Map,this.mutationObserver=new MutationObserver(e=>this.processMutations(e))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,{attributes:!0,attributeOldValue:!0}),this.refresh())}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started)for(const e of this.knownAttributeNames)this.refreshAttribute(e,null)}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){const t=e.attributeName;t&&this.refreshAttribute(t,e.oldValue)}refreshAttribute(e,t){const n=this.delegate.getStringMapKeyForAttribute(e);if(null!=n){this.stringMap.has(e)||this.stringMapKeyAdded(n,e);const r=this.element.getAttribute(e);if(this.stringMap.get(e)!=r&&this.stringMapValueChanged(r,n,t),null==r){const t=this.stringMap.get(e);this.stringMap.delete(e),t&&this.stringMapKeyRemoved(n,e,t)}else this.stringMap.set(e,r)}}stringMapKeyAdded(e,t){this.delegate.stringMapKeyAdded&&this.delegate.stringMapKeyAdded(e,t)}stringMapValueChanged(e,t,n){this.delegate.stringMapValueChanged&&this.delegate.stringMapValueChanged(e,t,n)}stringMapKeyRemoved(e,t,n){this.delegate.stringMapKeyRemoved&&this.delegate.stringMapKeyRemoved(e,t,n)}get knownAttributeNames(){return Array.from(new Set(this.currentAttributeNames.concat(this.recordedAttributeNames)))}get currentAttributeNames(){return Array.from(this.element.attributes).map(e=>e.name)}get recordedAttributeNames(){return Array.from(this.stringMap.keys())}}class A{constructor(e,t,n){this.attributeObserver=new b(e,t,this),this.delegate=n,this.tokensByElement=new x}get started(){return this.attributeObserver.started}start(){this.attributeObserver.start()}pause(e){this.attributeObserver.pause(e)}stop(){this.attributeObserver.stop()}refresh(){this.attributeObserver.refresh()}get element(){return this.attributeObserver.element}get attributeName(){return this.attributeObserver.attributeName}elementMatchedAttribute(e){this.tokensMatched(this.readTokensForElement(e))}elementAttributeValueChanged(e){const[t,n]=this.refreshTokensForElement(e);this.tokensUnmatched(t),this.tokensMatched(n)}elementUnmatchedAttribute(e){this.tokensUnmatched(this.tokensByElement.getValuesForKey(e))}tokensMatched(e){e.forEach(e=>this.tokenMatched(e))}tokensUnmatched(e){e.forEach(e=>this.tokenUnmatched(e))}tokenMatched(e){this.delegate.tokenMatched(e),this.tokensByElement.add(e.element,e)}tokenUnmatched(e){this.delegate.tokenUnmatched(e),this.tokensByElement.delete(e.element,e)}refreshTokensForElement(e){const t=this.tokensByElement.getValuesForKey(e),n=this.readTokensForElement(e),r=function(e,t){const n=Math.max(e.length,t.length);return Array.from({length:n},(n,r)=>[e[r],t[r]])}(t,n).findIndex(([e,t])=>!function(e,t){return e&&t&&e.index==t.index&&e.content==t.content}(e,t));return-1==r?[[],[]]:[t.slice(r),n.slice(r)]}readTokensForElement(e){const t=this.attributeName;return function(e,t,n){return e.trim().split(/\s+/).filter(e=>e.length).map((e,r)=>({element:t,attributeName:n,content:e,index:r}))}(e.getAttribute(t)||"",e,t)}}class C{constructor(e,t,n){this.tokenListObserver=new A(e,t,this),this.delegate=n,this.parseResultsByToken=new WeakMap,this.valuesByTokenByElement=new WeakMap}get started(){return this.tokenListObserver.started}start(){this.tokenListObserver.start()}stop(){this.tokenListObserver.stop()}refresh(){this.tokenListObserver.refresh()}get element(){return this.tokenListObserver.element}get attributeName(){return this.tokenListObserver.attributeName}tokenMatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).set(e,n),this.delegate.elementMatchedValue(t,n))}tokenUnmatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).delete(e),this.delegate.elementUnmatchedValue(t,n))}fetchParseResultForToken(e){let t=this.parseResultsByToken.get(e);return t||(t=this.parseToken(e),this.parseResultsByToken.set(e,t)),t}fetchValuesByTokenForElement(e){let t=this.valuesByTokenByElement.get(e);return t||(t=new Map,this.valuesByTokenByElement.set(e,t)),t}parseToken(e){try{return{value:this.delegate.parseValueForToken(e)}}catch(e){return{error:e}}}}class O{constructor(e,t){this.context=e,this.delegate=t,this.bindingsByAction=new Map}start(){this.valueListObserver||(this.valueListObserver=new C(this.element,this.actionAttribute,this),this.valueListObserver.start())}stop(){this.valueListObserver&&(this.valueListObserver.stop(),delete this.valueListObserver,this.disconnectAllActions())}get element(){return this.context.element}get identifier(){return this.context.identifier}get actionAttribute(){return this.schema.actionAttribute}get schema(){return this.context.schema}get bindings(){return Array.from(this.bindingsByAction.values())}connectAction(e){const t=new v(this.context,e);this.bindingsByAction.set(e,t),this.delegate.bindingConnected(t)}disconnectAction(e){const t=this.bindingsByAction.get(e);t&&(this.bindingsByAction.delete(e),this.delegate.bindingDisconnected(t))}disconnectAllActions(){this.bindings.forEach(e=>this.delegate.bindingDisconnected(e,!0)),this.bindingsByAction.clear()}parseValueForToken(e){const t=p.forToken(e,this.schema);if(t.identifier==this.identifier)return t}elementMatchedValue(e,t){this.connectAction(t)}elementUnmatchedValue(e,t){this.disconnectAction(t)}}class S{constructor(e,t){this.context=e,this.receiver=t,this.stringMapObserver=new T(this.element,this),this.valueDescriptorMap=this.controller.valueDescriptorMap}start(){this.stringMapObserver.start(),this.invokeChangedCallbacksForDefaultValues()}stop(){this.stringMapObserver.stop()}get element(){return this.context.element}get controller(){return this.context.controller}getStringMapKeyForAttribute(e){if(e in this.valueDescriptorMap)return this.valueDescriptorMap[e].name}stringMapKeyAdded(e,t){const n=this.valueDescriptorMap[t];this.hasValue(e)||this.invokeChangedCallback(e,n.writer(this.receiver[e]),n.writer(n.defaultValue))}stringMapValueChanged(e,t,n){const r=this.valueDescriptorNameMap[t];null!==e&&(null===n&&(n=r.writer(r.defaultValue)),this.invokeChangedCallback(t,e,n))}stringMapKeyRemoved(e,t,n){const r=this.valueDescriptorNameMap[e];this.hasValue(e)?this.invokeChangedCallback(e,r.writer(this.receiver[e]),n):this.invokeChangedCallback(e,r.writer(r.defaultValue),n)}invokeChangedCallbacksForDefaultValues(){for(const{key:e,name:t,defaultValue:n,writer:r}of this.valueDescriptors)null==n||this.controller.data.has(e)||this.invokeChangedCallback(t,r(n),void 0)}invokeChangedCallback(e,t,n){const r=`${e}Changed`,i=this.receiver[r];if("function"==typeof i){const r=this.valueDescriptorNameMap[e];try{const e=r.reader(t);let s=n;n&&(s=r.reader(n)),i.call(this.receiver,e,s)}catch(e){throw e instanceof TypeError&&(e.message=`Stimulus Value "${this.context.identifier}.${r.name}" - ${e.message}`),e}}}get valueDescriptors(){const{valueDescriptorMap:e}=this;return Object.keys(e).map(t=>e[t])}get valueDescriptorNameMap(){const e={};return Object.keys(this.valueDescriptorMap).forEach(t=>{const n=this.valueDescriptorMap[t];e[n.name]=n}),e}hasValue(e){const t=`has${c(this.valueDescriptorNameMap[e].name)}`;return this.receiver[t]}}class k{constructor(e,t){this.context=e,this.delegate=t,this.targetsByName=new x}start(){this.tokenListObserver||(this.tokenListObserver=new A(this.element,this.attributeName,this),this.tokenListObserver.start())}stop(){this.tokenListObserver&&(this.disconnectAllTargets(),this.tokenListObserver.stop(),delete this.tokenListObserver)}tokenMatched({element:e,content:t}){this.scope.containsElement(e)&&this.connectTarget(e,t)}tokenUnmatched({element:e,content:t}){this.disconnectTarget(e,t)}connectTarget(e,t){var n;this.targetsByName.has(t,e)||(this.targetsByName.add(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause(()=>this.delegate.targetConnected(e,t)))}disconnectTarget(e,t){var n;this.targetsByName.has(t,e)&&(this.targetsByName.delete(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause(()=>this.delegate.targetDisconnected(e,t)))}disconnectAllTargets(){for(const e of this.targetsByName.keys)for(const t of this.targetsByName.getValuesForKey(e))this.disconnectTarget(t,e)}get attributeName(){return`data-${this.context.identifier}-target`}get element(){return this.context.element}get scope(){return this.context.scope}}function _(e,t){const n=N(e);return Array.from(n.reduce((e,n)=>(function(e,t){const n=e[t];return Array.isArray(n)?n:[]}(n,t).forEach(t=>e.add(t)),e),new Set))}function N(e){const t=[];for(;e;)t.push(e),e=Object.getPrototypeOf(e);return t.reverse()}class D{constructor(e,t){this.started=!1,this.context=e,this.delegate=t,this.outletsByName=new x,this.outletElementsByName=new x,this.selectorObserverMap=new Map,this.attributeObserverMap=new Map}start(){this.started||(this.outletDefinitions.forEach(e=>{this.setupSelectorObserverForOutlet(e),this.setupAttributeObserverForOutlet(e)}),this.started=!0,this.dependentContexts.forEach(e=>e.refresh()))}refresh(){this.selectorObserverMap.forEach(e=>e.refresh()),this.attributeObserverMap.forEach(e=>e.refresh())}stop(){this.started&&(this.started=!1,this.disconnectAllOutlets(),this.stopSelectorObservers(),this.stopAttributeObservers())}stopSelectorObservers(){this.selectorObserverMap.size>0&&(this.selectorObserverMap.forEach(e=>e.stop()),this.selectorObserverMap.clear())}stopAttributeObservers(){this.attributeObserverMap.size>0&&(this.attributeObserverMap.forEach(e=>e.stop()),this.attributeObserverMap.clear())}selectorMatched(e,t,{outletName:n}){const r=this.getOutlet(e,n);r&&this.connectOutlet(r,e,n)}selectorUnmatched(e,t,{outletName:n}){const r=this.getOutletFromMap(e,n);r&&this.disconnectOutlet(r,e,n)}selectorMatchElement(e,{outletName:t}){const n=this.selector(t),r=this.hasOutlet(e,t),i=e.matches(`[${this.schema.controllerAttribute}~=${t}]`);return!!n&&r&&i&&e.matches(n)}elementMatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementAttributeValueChanged(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementUnmatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}connectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)||(this.outletsByName.add(n,e),this.outletElementsByName.add(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause(()=>this.delegate.outletConnected(e,t,n)))}disconnectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)&&(this.outletsByName.delete(n,e),this.outletElementsByName.delete(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause(()=>this.delegate.outletDisconnected(e,t,n)))}disconnectAllOutlets(){for(const e of this.outletElementsByName.keys)for(const t of this.outletElementsByName.getValuesForKey(e))for(const n of this.outletsByName.getValuesForKey(e))this.disconnectOutlet(n,t,e)}updateSelectorObserverForOutlet(e){const t=this.selectorObserverMap.get(e);t&&(t.selector=this.selector(e))}setupSelectorObserverForOutlet(e){const t=this.selector(e),n=new E(document.body,t,this,{outletName:e});this.selectorObserverMap.set(e,n),n.start()}setupAttributeObserverForOutlet(e){const t=this.attributeNameForOutletName(e),n=new b(this.scope.element,t,this);this.attributeObserverMap.set(e,n),n.start()}selector(e){return this.scope.outlets.getSelectorForOutletName(e)}attributeNameForOutletName(e){return this.scope.schema.outletAttributeForScope(this.identifier,e)}getOutletNameFromOutletAttributeName(e){return this.outletDefinitions.find(t=>this.attributeNameForOutletName(t)===e)}get outletDependencies(){const e=new x;return this.router.modules.forEach(t=>{_(t.definition.controllerConstructor,"outlets").forEach(n=>e.add(n,t.identifier))}),e}get outletDefinitions(){return this.outletDependencies.getKeysForValue(this.identifier)}get dependentControllerIdentifiers(){return this.outletDependencies.getValuesForKey(this.identifier)}get dependentContexts(){const e=this.dependentControllerIdentifiers;return this.router.contexts.filter(t=>e.includes(t.identifier))}hasOutlet(e,t){return!!this.getOutlet(e,t)||!!this.getOutletFromMap(e,t)}getOutlet(e,t){return this.application.getControllerForElementAndIdentifier(e,t)}getOutletFromMap(e,t){return this.outletsByName.getValuesForKey(t).find(t=>t.element===e)}get scope(){return this.context.scope}get schema(){return this.context.schema}get identifier(){return this.context.identifier}get application(){return this.context.application}get router(){return this.application.router}}class j{constructor(e,t){this.logDebugActivity=(e,t={})=>{const{identifier:n,controller:r,element:i}=this;t=Object.assign({identifier:n,controller:r,element:i},t),this.application.logDebugActivity(this.identifier,e,t)},this.module=e,this.scope=t,this.controller=new e.controllerConstructor(this),this.bindingObserver=new O(this,this.dispatcher),this.valueObserver=new S(this,this.controller),this.targetObserver=new k(this,this),this.outletObserver=new D(this,this);try{this.controller.initialize(),this.logDebugActivity("initialize")}catch(e){this.handleError(e,"initializing controller")}}connect(){this.bindingObserver.start(),this.valueObserver.start(),this.targetObserver.start(),this.outletObserver.start();try{this.controller.connect(),this.logDebugActivity("connect")}catch(e){this.handleError(e,"connecting controller")}}refresh(){this.outletObserver.refresh()}disconnect(){try{this.controller.disconnect(),this.logDebugActivity("disconnect")}catch(e){this.handleError(e,"disconnecting controller")}this.outletObserver.stop(),this.targetObserver.stop(),this.valueObserver.stop(),this.bindingObserver.stop()}get application(){return this.module.application}get identifier(){return this.module.identifier}get schema(){return this.application.schema}get dispatcher(){return this.application.dispatcher}get element(){return this.scope.element}get parentElement(){return this.element.parentElement}handleError(e,t,n={}){const{identifier:r,controller:i,element:s}=this;n=Object.assign({identifier:r,controller:i,element:s},n),this.application.handleError(e,`Error ${t}`,n)}targetConnected(e,t){this.invokeControllerMethod(`${t}TargetConnected`,e)}targetDisconnected(e,t){this.invokeControllerMethod(`${t}TargetDisconnected`,e)}outletConnected(e,t,n){this.invokeControllerMethod(`${a(n)}OutletConnected`,e,t)}outletDisconnected(e,t,n){this.invokeControllerMethod(`${a(n)}OutletDisconnected`,e,t)}invokeControllerMethod(e,...t){const n=this.controller;"function"==typeof n[e]&&n[e](...t)}}const L="function"==typeof Object.getOwnPropertySymbols?e=>[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)]:Object.getOwnPropertyNames,M=(()=>{function e(e){function t(){return Reflect.construct(e,arguments,new.target)}return t.prototype=Object.create(e.prototype,{constructor:{value:t}}),Reflect.setPrototypeOf(t,e),t}try{return function(){const t=e(function(){this.a.call(this)});t.prototype.a=function(){},new t}(),e}catch(e){return e=>class extends e{}}})();class ${constructor(e,t){this.application=e,this.definition=function(e){return{identifier:e.identifier,controllerConstructor:(t=e.controllerConstructor,function(e,t){const n=M(e),r=function(e,t){return L(t).reduce((n,r)=>{const i=function(e,t,n){const r=Object.getOwnPropertyDescriptor(e,n);if(!r||!("value"in r)){const e=Object.getOwnPropertyDescriptor(t,n).value;return r&&(e.get=r.get||e.get,e.set=r.set||e.set),e}}(e,t,r);return i&&Object.assign(n,{[r]:i}),n},{})}(e.prototype,t);return Object.defineProperties(n.prototype,r),n}(t,function(e){return _(e,"blessings").reduce((t,n)=>{const r=n(e);for(const e in r){const n=t[e]||{};t[e]=Object.assign(n,r[e])}return t},{})}(t)))};var t}(t),this.contextsByScope=new WeakMap,this.connectedContexts=new Set}get identifier(){return this.definition.identifier}get controllerConstructor(){return this.definition.controllerConstructor}get contexts(){return Array.from(this.connectedContexts)}connectContextForScope(e){const t=this.fetchContextForScope(e);this.connectedContexts.add(t),t.connect()}disconnectContextForScope(e){const t=this.contextsByScope.get(e);t&&(this.connectedContexts.delete(t),t.disconnect())}fetchContextForScope(e){let t=this.contextsByScope.get(e);return t||(t=new j(this,e),this.contextsByScope.set(e,t)),t}}class F{constructor(e){this.scope=e}has(e){return this.data.has(this.getDataKey(e))}get(e){return this.getAll(e)[0]}getAll(e){return(this.data.get(this.getDataKey(e))||"").match(/[^\s]+/g)||[]}getAttributeName(e){return this.data.getAttributeNameForKey(this.getDataKey(e))}getDataKey(e){return`${e}-class`}get data(){return this.scope.data}}class I{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get(e){const t=this.getAttributeNameForKey(e);return this.element.getAttribute(t)}set(e,t){const n=this.getAttributeNameForKey(e);return this.element.setAttribute(n,t),this.get(e)}has(e){const t=this.getAttributeNameForKey(e);return this.element.hasAttribute(t)}delete(e){if(this.has(e)){const t=this.getAttributeNameForKey(e);return this.element.removeAttribute(t),!0}return!1}getAttributeNameForKey(e){return`data-${this.identifier}-${u(e)}`}}class P{constructor(e){this.warnedKeysByObject=new WeakMap,this.logger=e}warn(e,t,n){let r=this.warnedKeysByObject.get(e);r||(r=new Set,this.warnedKeysByObject.set(e,r)),r.has(t)||(r.add(t),this.logger.warn(n,e))}}function R(e,t){return`[${e}~="${t}"]`}class H{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce((e,t)=>e||this.findTarget(t)||this.findLegacyTarget(t),void 0)}findAll(...e){return e.reduce((e,t)=>[...e,...this.findAllTargets(t),...this.findAllLegacyTargets(t)],[])}findTarget(e){const t=this.getSelectorForTargetName(e);return this.scope.findElement(t)}findAllTargets(e){const t=this.getSelectorForTargetName(e);return this.scope.findAllElements(t)}getSelectorForTargetName(e){return R(this.schema.targetAttributeForScope(this.identifier),e)}findLegacyTarget(e){const t=this.getLegacySelectorForTargetName(e);return this.deprecate(this.scope.findElement(t),e)}findAllLegacyTargets(e){const t=this.getLegacySelectorForTargetName(e);return this.scope.findAllElements(t).map(t=>this.deprecate(t,e))}getLegacySelectorForTargetName(e){const t=`${this.identifier}.${e}`;return R(this.schema.targetAttribute,t)}deprecate(e,t){if(e){const{identifier:n}=this,r=this.schema.targetAttribute,i=this.schema.targetAttributeForScope(n);this.guide.warn(e,`target:${t}`,`Please replace ${r}="${n}.${t}" with ${i}="${t}". The ${r} attribute is deprecated and will be removed in a future version of Stimulus.`)}return e}get guide(){return this.scope.guide}}class q{constructor(e,t){this.scope=e,this.controllerElement=t}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce((e,t)=>e||this.findOutlet(t),void 0)}findAll(...e){return e.reduce((e,t)=>[...e,...this.findAllOutlets(t)],[])}getSelectorForOutletName(e){const t=this.schema.outletAttributeForScope(this.identifier,e);return this.controllerElement.getAttribute(t)}findOutlet(e){const t=this.getSelectorForOutletName(e);if(t)return this.findElement(t,e)}findAllOutlets(e){const t=this.getSelectorForOutletName(e);return t?this.findAllElements(t,e):[]}findElement(e,t){return this.scope.queryElements(e).filter(n=>this.matchesElement(n,e,t))[0]}findAllElements(e,t){return this.scope.queryElements(e).filter(n=>this.matchesElement(n,e,t))}matchesElement(e,t,n){const r=e.getAttribute(this.scope.schema.controllerAttribute)||"";return e.matches(t)&&r.split(" ").includes(n)}}class B{constructor(e,t,n,r){this.targets=new H(this),this.classes=new F(this),this.data=new I(this),this.containsElement=e=>e.closest(this.controllerSelector)===this.element,this.schema=e,this.element=t,this.identifier=n,this.guide=new P(r),this.outlets=new q(this.documentScope,t)}findElement(e){return this.element.matches(e)?this.element:this.queryElements(e).find(this.containsElement)}findAllElements(e){return[...this.element.matches(e)?[this.element]:[],...this.queryElements(e).filter(this.containsElement)]}queryElements(e){return Array.from(this.element.querySelectorAll(e))}get controllerSelector(){return R(this.schema.controllerAttribute,this.identifier)}get isDocumentScope(){return this.element===document.documentElement}get documentScope(){return this.isDocumentScope?this:new B(this.schema,document.documentElement,this.identifier,this.guide.logger)}}class V{constructor(e,t,n){this.element=e,this.schema=t,this.delegate=n,this.valueListObserver=new C(this.element,this.controllerAttribute,this),this.scopesByIdentifierByElement=new WeakMap,this.scopeReferenceCounts=new WeakMap}start(){this.valueListObserver.start()}stop(){this.valueListObserver.stop()}get controllerAttribute(){return this.schema.controllerAttribute}parseValueForToken(e){const{element:t,content:n}=e;return this.parseValueForElementAndIdentifier(t,n)}parseValueForElementAndIdentifier(e,t){const n=this.fetchScopesByIdentifierForElement(e);let r=n.get(t);return r||(r=this.delegate.createScopeForElementAndIdentifier(e,t),n.set(t,r)),r}elementMatchedValue(e,t){const n=(this.scopeReferenceCounts.get(t)||0)+1;this.scopeReferenceCounts.set(t,n),1==n&&this.delegate.scopeConnected(t)}elementUnmatchedValue(e,t){const n=this.scopeReferenceCounts.get(t);n&&(this.scopeReferenceCounts.set(t,n-1),1==n&&this.delegate.scopeDisconnected(t))}fetchScopesByIdentifierForElement(e){let t=this.scopesByIdentifierByElement.get(e);return t||(t=new Map,this.scopesByIdentifierByElement.set(e,t)),t}}class U{constructor(e){this.application=e,this.scopeObserver=new V(this.element,this.schema,this),this.scopesByIdentifier=new x,this.modulesByIdentifier=new Map}get element(){return this.application.element}get schema(){return this.application.schema}get logger(){return this.application.logger}get controllerAttribute(){return this.schema.controllerAttribute}get modules(){return Array.from(this.modulesByIdentifier.values())}get contexts(){return this.modules.reduce((e,t)=>e.concat(t.contexts),[])}start(){this.scopeObserver.start()}stop(){this.scopeObserver.stop()}loadDefinition(e){this.unloadIdentifier(e.identifier);const t=new $(this.application,e);this.connectModule(t);const n=e.controllerConstructor.afterLoad;n&&n.call(e.controllerConstructor,e.identifier,this.application)}unloadIdentifier(e){const t=this.modulesByIdentifier.get(e);t&&this.disconnectModule(t)}getContextForElementAndIdentifier(e,t){const n=this.modulesByIdentifier.get(t);if(n)return n.contexts.find(t=>t.element==e)}proposeToConnectScopeForElementAndIdentifier(e,t){const n=this.scopeObserver.parseValueForElementAndIdentifier(e,t);n?this.scopeObserver.elementMatchedValue(n.element,n):console.error(`Couldn't find or create scope for identifier: "${t}" and element:`,e)}handleError(e,t,n){this.application.handleError(e,t,n)}createScopeForElementAndIdentifier(e,t){return new B(this.schema,e,t,this.logger)}scopeConnected(e){this.scopesByIdentifier.add(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.connectContextForScope(e)}scopeDisconnected(e){this.scopesByIdentifier.delete(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.disconnectContextForScope(e)}connectModule(e){this.modulesByIdentifier.set(e.identifier,e),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach(t=>e.connectContextForScope(t))}disconnectModule(e){this.modulesByIdentifier.delete(e.identifier),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach(t=>e.disconnectContextForScope(t))}}const K={controllerAttribute:"data-controller",actionAttribute:"data-action",targetAttribute:"data-target",targetAttributeForScope:e=>`data-${e}-target`,outletAttributeForScope:(e,t)=>`data-${e}-${t}-outlet`,keyMappings:Object.assign(Object.assign({enter:"Enter",tab:"Tab",esc:"Escape",space:" ",up:"ArrowUp",down:"ArrowDown",left:"ArrowLeft",right:"ArrowRight",home:"Home",end:"End",page_up:"PageUp",page_down:"PageDown"},W("abcdefghijklmnopqrstuvwxyz".split("").map(e=>[e,e]))),W("0123456789".split("").map(e=>[e,e])))};function W(e){return e.reduce((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n}),{})}class z{constructor(e=document.documentElement,t=K){this.logger=console,this.debug=!1,this.logDebugActivity=(e,t,n={})=>{this.debug&&this.logFormattedMessage(e,t,n)},this.element=e,this.schema=t,this.dispatcher=new r(this),this.router=new U(this),this.actionDescriptorFilters=Object.assign({},i)}static start(e,t){const n=new this(e,t);return n.start(),n}async start(){await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()}),this.logDebugActivity("application","starting"),this.dispatcher.start(),this.router.start(),this.logDebugActivity("application","start")}stop(){this.logDebugActivity("application","stopping"),this.dispatcher.stop(),this.router.stop(),this.logDebugActivity("application","stop")}register(e,t){this.load({identifier:e,controllerConstructor:t})}registerActionOption(e,t){this.actionDescriptorFilters[e]=t}load(e,...t){(Array.isArray(e)?e:[e,...t]).forEach(e=>{e.controllerConstructor.shouldLoad&&this.router.loadDefinition(e)})}unload(e,...t){(Array.isArray(e)?e:[e,...t]).forEach(e=>this.router.unloadIdentifier(e))}get controllers(){return this.router.contexts.map(e=>e.controller)}getControllerForElementAndIdentifier(e,t){const n=this.router.getContextForElementAndIdentifier(e,t);return n?n.controller:null}handleError(e,t,n){var r;this.logger.error("%s\n\n%o\n\n%o",t,e,n),null===(r=window.onerror)||void 0===r||r.call(window,t,"",0,0,e)}logFormattedMessage(e,t,n={}){n=Object.assign({application:this},n),this.logger.groupCollapsed(`${e} #${t}`),this.logger.log("details:",Object.assign({},n)),this.logger.groupEnd()}}function J(e,t,n){return e.application.getControllerForElementAndIdentifier(t,n)}function X(e,t,n){let r=J(e,t,n);return r||(e.application.router.proposeToConnectScopeForElementAndIdentifier(t,n),r=J(e,t,n),r||void 0)}function Q([e,t],n){return function(e){const{token:t,typeDefinition:n}=e,r=`${u(t)}-value`,i=function(e){const{controller:t,token:n,typeDefinition:r}=e,i=function(e){const{controller:t,token:n,typeObject:r}=e,i=l(r.type),s=l(r.default),o=i&&s,a=i&&!s,c=!i&&s,u=G(r.type),h=Y(e.typeObject.default);if(a)return u;if(c)return h;if(u!==h)throw new Error(`The specified default value for the Stimulus Value "${t?`${t}.${n}`:n}" must match the defined type "${u}". The provided default value of "${r.default}" is of type "${h}".`);return o?u:void 0}({controller:t,token:n,typeObject:r}),s=Y(r),o=G(r),a=i||s||o;if(a)return a;throw new Error(`Unknown value type "${t?`${t}.${r}`:n}" for "${n}" value`)}(e);return{type:i,key:r,name:o(r),get defaultValue(){return function(e){const t=G(e);if(t)return Z[t];const n=h(e,"default"),r=h(e,"type"),i=e;if(n)return i.default;if(r){const{type:e}=i,t=G(e);if(t)return Z[t]}return e}(n)},get hasCustomDefaultValue(){return void 0!==Y(n)},reader:ee[i],writer:te[i]||te.default}}({controller:n,token:e,typeDefinition:t})}function G(e){switch(e){case Array:return"array";case Boolean:return"boolean";case Number:return"number";case Object:return"object";case String:return"string"}}function Y(e){switch(typeof e){case"boolean":return"boolean";case"number":return"number";case"string":return"string"}return Array.isArray(e)?"array":"[object Object]"===Object.prototype.toString.call(e)?"object":void 0}const Z={get array(){return[]},boolean:!1,number:0,get object(){return{}},string:""},ee={array(e){const t=JSON.parse(e);if(!Array.isArray(t))throw new TypeError(`expected value of type "array" but instead got value "${e}" of type "${Y(t)}"`);return t},boolean:e=>!("0"==e||"false"==String(e).toLowerCase()),number:e=>Number(e.replace(/_/g,"")),object(e){const t=JSON.parse(e);if(null===t||"object"!=typeof t||Array.isArray(t))throw new TypeError(`expected value of type "object" but instead got value "${e}" of type "${Y(t)}"`);return t},string:e=>e},te={default:function(e){return`${e}`},array:ne,object:ne};function ne(e){return JSON.stringify(e)}class re{constructor(e){this.context=e}static get shouldLoad(){return!0}static afterLoad(e,t){}get application(){return this.context.application}get scope(){return this.context.scope}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get targets(){return this.scope.targets}get outlets(){return this.scope.outlets}get classes(){return this.scope.classes}get data(){return this.scope.data}initialize(){}connect(){}disconnect(){}dispatch(e,{target:t=this.element,detail:n={},prefix:r=this.identifier,bubbles:i=!0,cancelable:s=!0}={}){const o=new CustomEvent(r?`${r}:${e}`:e,{detail:n,bubbles:i,cancelable:s});return t.dispatchEvent(o),o}}re.blessings=[function(e){return _(e,"classes").reduce((e,t)=>Object.assign(e,function(e){return{[`${e}Class`]:{get(){const{classes:t}=this;if(t.has(e))return t.get(e);{const n=t.getAttributeName(e);throw new Error(`Missing attribute "${n}"`)}}},[`${e}Classes`]:{get(){return this.classes.getAll(e)}},[`has${c(e)}Class`]:{get(){return this.classes.has(e)}}}}(t)),{})},function(e){return _(e,"targets").reduce((e,t)=>{return Object.assign(e,(n=t,{[`${n}Target`]:{get(){const e=this.targets.find(n);if(e)return e;throw new Error(`Missing target element "${n}" for "${this.identifier}" controller`)}},[`${n}Targets`]:{get(){return this.targets.findAll(n)}},[`has${c(n)}Target`]:{get(){return this.targets.has(n)}}}));var n},{})},function(e){const t=function(e,t){return N(e).reduce((e,n)=>(e.push(...function(e,t){const n=e[t];return n?Object.keys(n).map(e=>[e,n[e]]):[]}(n,t)),e),[])}(e,"values"),n={valueDescriptorMap:{get(){return t.reduce((e,t)=>{const n=Q(t,this.identifier),r=this.data.getAttributeNameForKey(n.key);return Object.assign(e,{[r]:n})},{})}}};return t.reduce((e,t)=>Object.assign(e,function(e){const t=Q(e,void 0),{key:n,name:r,reader:i,writer:s}=t;return{[r]:{get(){const e=this.data.get(n);return null!==e?i(e):t.defaultValue},set(e){void 0===e?this.data.delete(n):this.data.set(n,s(e))}},[`has${c(r)}`]:{get(){return this.data.has(n)||t.hasCustomDefaultValue}}}}(t)),n)},function(e){return _(e,"outlets").reduce((e,t)=>Object.assign(e,function(e){const t=a(e);return{[`${t}Outlet`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t){const n=X(this,t,e);if(n)return n;throw new Error(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`)}throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}Outlets`]:{get(){const t=this.outlets.findAll(e);return t.length>0?t.map(t=>{const n=X(this,t,e);if(n)return n;console.warn(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`,t)}).filter(e=>e):[]}},[`${t}OutletElement`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t)return t;throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}OutletElements`]:{get(){return this.outlets.findAll(e)}},[`has${c(t)}Outlet`]:{get(){return this.outlets.has(e)}}}}(t)),{})}],re.targets=[],re.outlets=[],re.values={};class ie extends z{load(e,...t){const n=Array.isArray(e)?e:[e,...t];for(const e of n){const t=/^s-/.test(e.identifier);if(ie._initializing&&!t)throw'Stacks-created Stimulus controller names must start with "s-".';if(!ie._initializing&&t)throw'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.'}super.load(n)}static start(e,t){const n=new ie(e,t);return n.start(),n}static finalize(){ie._initializing=!1}}ie._initializing=!0;const se=ie.start();class oe extends re{getElementData(e,t){return e.getAttribute("data-"+this.identifier+"-"+t)}setElementData(e,t,n){e.setAttribute("data-"+this.identifier+"-"+t,n)}removeElementData(e,t){e.removeAttribute("data-"+this.identifier+"-"+t)}triggerEvent(e,t,n){const r=this.identifier+":"+e;let i;try{i=new CustomEvent(r,{bubbles:!0,cancelable:!0,detail:t})}catch(e){i=document.createEvent("CustomEvent"),i.initCustomEvent(r,!0,!0,t)}return(n||this.element).dispatchEvent(i),i}}function ae(e){var t,n;const r=e.hasOwnProperty("targets")?((n=class extends oe{}).targets=null!==(t=e.targets)&&void 0!==t?t:[],n):class extends oe{};for(const t in e){const n=e.hasOwnProperty(t)&&Object.getOwnPropertyDescriptor(e,t);"targets"!==t&&n&&Object.defineProperty(r.prototype,t,n)}return r}function ce(e,t){se.register(e,ae(t))}class ue extends oe{toggle(e=null){this._toggle(void 0,e)}show(e=null){this._toggle(!0,e)}hide(e=null){this._toggle(!1,e)}_toggle(e,t=null){let n=e;const r="false"===this.bannerTarget.getAttribute("aria-hidden");if(void 0===n&&(n=!r),n&&r||!n&&!r)return;const i=this.getDispatcher(t);this.triggerEvent(n?"show":"hide",{dispatcher:this.getDispatcher(i)},this.bannerTarget).defaultPrevented||(this.bannerTarget.setAttribute("aria-hidden",n?"false":"true"),n||this.removeBannerOnHide(),this.triggerEvent(n?"shown":"hidden",{dispatcher:i},this.bannerTarget))}removeBannerOnHide(){"true"===this.data.get("remove-when-hidden")&&this.bannerTarget.addEventListener("s-banner:hidden",()=>{this.element.remove()},{once:!0})}getDispatcher(e=null){return e instanceof Event?e.target:e instanceof Element?e:this.element}}function le(e){de(e,!0)}function he(e){de(e,!1)}function de(e,t){const n=se.getControllerForElementAndIdentifier(e,"s-banner");if(!n)throw"Unable to get s-banner controller from element";t?n.show():n.hide()}ue.targets=["banner"];class pe extends oe{connect(){this.validate()}disconnect(){this.unbindDocumentEvents()}toggle(e=null){this._toggle(void 0,e)}show(e=null){this._toggle(!0,e)}hide(e=null){this._toggle(!1,e)}validate(){const e=this.data.get("return-element");if(e&&(this.returnElement=document.querySelector(e),!this.returnElement))throw"Unable to find element by return-element selector: "+e}_toggle(e,t=null){let n=e;const r="false"===this.modalTarget.getAttribute("aria-hidden");if(void 0===n&&(n=!r),n&&r||!n&&!r)return;const i=this.getDispatcher(t),s=this.triggerEvent(n?"show":"hide",{returnElement:this.returnElement,dispatcher:this.getDispatcher(i)},this.modalTarget);s.defaultPrevented||(this.returnElement=s.detail.returnElement,this.modalTarget.setAttribute("aria-hidden",n?"false":"true"),n?(this.bindDocumentEvents(),this.focusInsideModal()):(this.unbindDocumentEvents(),this.focusReturnElement(),this.removeModalOnHide()),void 0!==this.modalTarget.ontransitionend?this.modalTarget.addEventListener("transitionend",()=>{this.triggerEvent(n?"shown":"hidden",{dispatcher:i},this.modalTarget)},{once:!0}):this.triggerEvent(n?"shown":"hidden",{dispatcher:i},this.modalTarget))}focusReturnElement(){this.returnElement&&this.modalTarget.addEventListener("s-modal:hidden",()=>{this.returnElement&&document.body.contains(this.returnElement)&&this.returnElement.focus()},{once:!0})}removeModalOnHide(){"true"===this.data.get("remove-when-hidden")&&this.modalTarget.addEventListener("s-modal:hidden",()=>{this.element.remove()},{once:!0})}getAllTabbables(){return Array.from(this.modalTarget.querySelectorAll("[href], input, select, textarea, button, [tabindex]")).filter(e=>e.matches(":not([disabled]):not([tabindex='-1'])"))}firstVisible(e){return e.find(e=>null!==e.offsetParent)}lastVisible(e){return this.firstVisible([...e].reverse())}focusInsideModal(){this.modalTarget.addEventListener("s-modal:shown",()=>{var e,t;this.modalTarget.contains(document.activeElement)||(null!==(t=null!==(e=this.firstVisible(this.initialFocusTargets))&&void 0!==e?e:this.firstVisible(this.getAllTabbables()))&&void 0!==t?t:this.modalTarget).focus()},{once:!0})}keepFocusWithinModal(e){if("Tab"!==e.key)return;const t=this.getAllTabbables();if(0===t.length)return void e.preventDefault();if(!this.modalTarget.contains(e.target)){const n=this.firstVisible(t);return void(n&&(e.preventDefault(),n.focus()))}const n=this.firstVisible(t),r=this.lastVisible(t);n&&r&&(n===r?(e.preventDefault(),n.focus()):e.shiftKey&&e.target===n?(e.preventDefault(),r.focus()):e.shiftKey||e.target!==r||(e.preventDefault(),n.focus()))}bindDocumentEvents(){this._boundClickFn=this._boundClickFn||this.hideOnOutsideClick.bind(this),this._boundKeypressFn=this._boundKeypressFn||this.hideOnEscapePress.bind(this),this._boundTabTrap=this._boundTabTrap||this.keepFocusWithinModal.bind(this),document.addEventListener("mousedown",this._boundClickFn),document.addEventListener("keyup",this._boundKeypressFn),document.addEventListener("keydown",this._boundTabTrap)}unbindDocumentEvents(){document.removeEventListener("mousedown",this._boundClickFn),document.removeEventListener("keyup",this._boundKeypressFn),document.removeEventListener("keydown",this._boundTabTrap)}hideOnOutsideClick(e){var t;const n=e.target;!(null===(t=this.modalTarget.querySelector(".s-modal--dialog"))||void 0===t?void 0:t.contains(n))&&document.body.contains(n)&&this._toggle(!1,e)}hideOnEscapePress(e){27===e.which&&"true"!==this.modalTarget.getAttribute("aria-hidden")&&this._toggle(!1,e)}getDispatcher(e=null){return e instanceof Event?e.target:e instanceof Element?e:this.element}}function fe(e){ge(e,!0)}function me(e){ge(e,!1)}function ge(e,t){const n=se.getControllerForElementAndIdentifier(e,"s-modal");if(!n)throw"Unable to get s-modal controller from element";t?n.show():n.hide()}pe.targets=["modal","initialFocus"];class ve extends oe{connect(){super.connect(),this.boundSelectTab=this.selectTab.bind(this),this.boundHandleKeydown=this.handleKeydown.bind(this);for(const e of this.tabTargets)e.addEventListener("click",this.boundSelectTab),e.addEventListener("keydown",this.boundHandleKeydown)}disconnect(){super.disconnect();for(const e of this.tabTargets)e.removeEventListener("click",this.boundSelectTab),e.removeEventListener("keydown",this.boundHandleKeydown)}get tabTargets(){return Array.from(this.element.querySelectorAll("[role=tab]"))}selectTab(e){this.switchToTab(e.currentTarget)}handleKeydown(e){var t;let n=e.currentTarget;const r=this.tabTargets;let i=r.indexOf(n);if("ArrowRight"===e.key)i++;else{if("ArrowLeft"!==e.key)return;i--}i<0&&(i=r.length-1),i>=r.length&&(i=0),n=r[i],this.switchToTab(n),null===(t=this.selectedTab)||void 0===t||t.focus()}switchToTab(e){const t=this.selectedTab;t!==e&&(this.triggerEvent("select",{oldTab:t,newTab:e}).defaultPrevented||(this.selectedTab=e,this.triggerEvent("selected",{oldTab:t,newTab:e})))}get selectedTab(){return this.tabTargets.find(e=>"true"===e.getAttribute("aria-selected"))||null}set selectedTab(e){for(const t of this.tabTargets){const n=t.getAttribute("aria-controls"),r=n?document.getElementById(n):null;t===e?(t.classList.add("is-selected"),t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),null==r||r.classList.remove("d-none")):(t.classList.remove("is-selected"),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1"),null==r||r.classList.add("d-none"))}}}function ye(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function be(e){return e instanceof ye(e).Element||e instanceof Element}function we(e){return e instanceof ye(e).HTMLElement||e instanceof HTMLElement}function xe(e){return"undefined"!=typeof ShadowRoot&&(e instanceof ye(e).ShadowRoot||e instanceof ShadowRoot)}var Ee=Math.max,Te=Math.min,Ae=Math.round;function Ce(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(e){return e.brand+"/"+e.version}).join(" "):navigator.userAgent}function Oe(){return!/^((?!chrome|android).)*safari/i.test(Ce())}function Se(e,t,n){void 0===t&&(t=!1),void 0===n&&(n=!1);var r=e.getBoundingClientRect(),i=1,s=1;t&&we(e)&&(i=e.offsetWidth>0&&Ae(r.width)/e.offsetWidth||1,s=e.offsetHeight>0&&Ae(r.height)/e.offsetHeight||1);var o=(be(e)?ye(e):window).visualViewport,a=!Oe()&&n,c=(r.left+(a&&o?o.offsetLeft:0))/i,u=(r.top+(a&&o?o.offsetTop:0))/s,l=r.width/i,h=r.height/s;return{width:l,height:h,top:u,right:c+l,bottom:u+h,left:c,x:c,y:u}}function ke(e){var t=ye(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function _e(e){return e?(e.nodeName||"").toLowerCase():null}function Ne(e){return((be(e)?e.ownerDocument:e.document)||window.document).documentElement}function De(e){return Se(Ne(e)).left+ke(e).scrollLeft}function je(e){return ye(e).getComputedStyle(e)}function Le(e){var t=je(e),n=t.overflow,r=t.overflowX,i=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+i+r)}function Me(e,t,n){void 0===n&&(n=!1);var r,i,s=we(t),o=we(t)&&function(e){var t=e.getBoundingClientRect(),n=Ae(t.width)/e.offsetWidth||1,r=Ae(t.height)/e.offsetHeight||1;return 1!==n||1!==r}(t),a=Ne(t),c=Se(e,o,n),u={scrollLeft:0,scrollTop:0},l={x:0,y:0};return(s||!s&&!n)&&(("body"!==_e(t)||Le(a))&&(u=(r=t)!==ye(r)&&we(r)?{scrollLeft:(i=r).scrollLeft,scrollTop:i.scrollTop}:ke(r)),we(t)?((l=Se(t,!0)).x+=t.clientLeft,l.y+=t.clientTop):a&&(l.x=De(a))),{x:c.left+u.scrollLeft-l.x,y:c.top+u.scrollTop-l.y,width:c.width,height:c.height}}function $e(e){var t=Se(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function Fe(e){return"html"===_e(e)?e:e.assignedSlot||e.parentNode||(xe(e)?e.host:null)||Ne(e)}function Ie(e){return["html","body","#document"].indexOf(_e(e))>=0?e.ownerDocument.body:we(e)&&Le(e)?e:Ie(Fe(e))}function Pe(e,t){var n;void 0===t&&(t=[]);var r=Ie(e),i=r===(null==(n=e.ownerDocument)?void 0:n.body),s=ye(r),o=i?[s].concat(s.visualViewport||[],Le(r)?r:[]):r,a=t.concat(o);return i?a:a.concat(Pe(Fe(o)))}function Re(e){return["table","td","th"].indexOf(_e(e))>=0}function He(e){return we(e)&&"fixed"!==je(e).position?e.offsetParent:null}function qe(e){for(var t=ye(e),n=He(e);n&&Re(n)&&"static"===je(n).position;)n=He(n);return n&&("html"===_e(n)||"body"===_e(n)&&"static"===je(n).position)?t:n||function(e){var t=/firefox/i.test(Ce());if(/Trident/i.test(Ce())&&we(e)&&"fixed"===je(e).position)return null;var n=Fe(e);for(xe(n)&&(n=n.host);we(n)&&["html","body"].indexOf(_e(n))<0;){var r=je(n);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||t&&"filter"===r.willChange||t&&r.filter&&"none"!==r.filter)return n;n=n.parentNode}return null}(e)||t}var Be="top",Ve="bottom",Ue="right",Ke="left",We="auto",ze=[Be,Ve,Ue,Ke],Je="start",Xe="end",Qe="viewport",Ge="popper",Ye=ze.reduce(function(e,t){return e.concat([t+"-"+Je,t+"-"+Xe])},[]),Ze=[].concat(ze,[We]).reduce(function(e,t){return e.concat([t,t+"-"+Je,t+"-"+Xe])},[]),et=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function tt(e){var t=new Map,n=new Set,r=[];function i(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach(function(e){if(!n.has(e)){var r=t.get(e);r&&i(r)}}),r.push(e)}return e.forEach(function(e){t.set(e.name,e)}),e.forEach(function(e){n.has(e.name)||i(e)}),r}var nt={placement:"bottom",modifiers:[],strategy:"absolute"};function rt(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return!t.some(function(e){return!(e&&"function"==typeof e.getBoundingClientRect)})}function it(e){void 0===e&&(e={});var t=e,n=t.defaultModifiers,r=void 0===n?[]:n,i=t.defaultOptions,s=void 0===i?nt:i;return function(e,t,n){void 0===n&&(n=s);var i,o,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},nt,s),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},c=[],u=!1,l={state:a,setOptions:function(n){var i="function"==typeof n?n(a.options):n;h(),a.options=Object.assign({},s,a.options,i),a.scrollParents={reference:be(e)?Pe(e):e.contextElement?Pe(e.contextElement):[],popper:Pe(t)};var o,u,d=function(e){var t=tt(e);return et.reduce(function(e,n){return e.concat(t.filter(function(e){return e.phase===n}))},[])}((o=[].concat(r,a.options.modifiers),u=o.reduce(function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e},{}),Object.keys(u).map(function(e){return u[e]})));return a.orderedModifiers=d.filter(function(e){return e.enabled}),a.orderedModifiers.forEach(function(e){var t=e.name,n=e.options,r=void 0===n?{}:n,i=e.effect;if("function"==typeof i){var s=i({state:a,name:t,instance:l,options:r});c.push(s||function(){})}}),l.update()},forceUpdate:function(){if(!u){var e=a.elements,t=e.reference,n=e.popper;if(rt(t,n)){a.rects={reference:Me(t,qe(n),"fixed"===a.options.strategy),popper:$e(n)},a.reset=!1,a.placement=a.options.placement,a.orderedModifiers.forEach(function(e){return a.modifiersData[e.name]=Object.assign({},e.data)});for(var r=0;r<a.orderedModifiers.length;r++)if(!0!==a.reset){var i=a.orderedModifiers[r],s=i.fn,o=i.options,c=void 0===o?{}:o,h=i.name;"function"==typeof s&&(a=s({state:a,options:c,name:h,instance:l})||a)}else a.reset=!1,r=-1}}},update:(i=function(){return new Promise(function(e){l.forceUpdate(),e(a)})},function(){return o||(o=new Promise(function(e){Promise.resolve().then(function(){o=void 0,e(i())})})),o}),destroy:function(){h(),u=!0}};if(!rt(e,t))return l;function h(){c.forEach(function(e){return e()}),c=[]}return l.setOptions(n).then(function(e){!u&&n.onFirstUpdate&&n.onFirstUpdate(e)}),l}}var st={passive:!0};function ot(e){return e.split("-")[0]}function at(e){return e.split("-")[1]}function ct(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function ut(e){var t,n=e.reference,r=e.element,i=e.placement,s=i?ot(i):null,o=i?at(i):null,a=n.x+n.width/2-r.width/2,c=n.y+n.height/2-r.height/2;switch(s){case Be:t={x:a,y:n.y-r.height};break;case Ve:t={x:a,y:n.y+n.height};break;case Ue:t={x:n.x+n.width,y:c};break;case Ke:t={x:n.x-r.width,y:c};break;default:t={x:n.x,y:n.y}}var u=s?ct(s):null;if(null!=u){var l="y"===u?"height":"width";switch(o){case Je:t[u]=t[u]-(n[l]/2-r[l]/2);break;case Xe:t[u]=t[u]+(n[l]/2-r[l]/2)}}return t}var lt={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ht(e){var t,n=e.popper,r=e.popperRect,i=e.placement,s=e.variation,o=e.offsets,a=e.position,c=e.gpuAcceleration,u=e.adaptive,l=e.roundOffsets,h=e.isFixed,d=o.x,p=void 0===d?0:d,f=o.y,m=void 0===f?0:f,g="function"==typeof l?l({x:p,y:m}):{x:p,y:m};p=g.x,m=g.y;var v=o.hasOwnProperty("x"),y=o.hasOwnProperty("y"),b=Ke,w=Be,x=window;if(u){var E=qe(n),T="clientHeight",A="clientWidth";E===ye(n)&&"static"!==je(E=Ne(n)).position&&"absolute"===a&&(T="scrollHeight",A="scrollWidth"),(i===Be||(i===Ke||i===Ue)&&s===Xe)&&(w=Ve,m-=(h&&E===x&&x.visualViewport?x.visualViewport.height:E[T])-r.height,m*=c?1:-1),i!==Ke&&(i!==Be&&i!==Ve||s!==Xe)||(b=Ue,p-=(h&&E===x&&x.visualViewport?x.visualViewport.width:E[A])-r.width,p*=c?1:-1)}var C,O=Object.assign({position:a},u&&lt),S=!0===l?function(e,t){var n=e.x,r=e.y,i=t.devicePixelRatio||1;return{x:Ae(n*i)/i||0,y:Ae(r*i)/i||0}}({x:p,y:m},ye(n)):{x:p,y:m};return p=S.x,m=S.y,c?Object.assign({},O,((C={})[w]=y?"0":"",C[b]=v?"0":"",C.transform=(x.devicePixelRatio||1)<=1?"translate("+p+"px, "+m+"px)":"translate3d("+p+"px, "+m+"px, 0)",C)):Object.assign({},O,((t={})[w]=y?m+"px":"",t[b]=v?p+"px":"",t.transform="",t))}var dt={left:"right",right:"left",bottom:"top",top:"bottom"};function pt(e){return e.replace(/left|right|bottom|top/g,function(e){return dt[e]})}var ft={start:"end",end:"start"};function mt(e){return e.replace(/start|end/g,function(e){return ft[e]})}function gt(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&xe(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function vt(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function yt(e,t,n){return t===Qe?vt(function(e,t){var n=ye(e),r=Ne(e),i=n.visualViewport,s=r.clientWidth,o=r.clientHeight,a=0,c=0;if(i){s=i.width,o=i.height;var u=Oe();(u||!u&&"fixed"===t)&&(a=i.offsetLeft,c=i.offsetTop)}return{width:s,height:o,x:a+De(e),y:c}}(e,n)):be(t)?function(e,t){var n=Se(e,!1,"fixed"===t);return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}(t,n):vt(function(e){var t,n=Ne(e),r=ke(e),i=null==(t=e.ownerDocument)?void 0:t.body,s=Ee(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),o=Ee(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),a=-r.scrollLeft+De(e),c=-r.scrollTop;return"rtl"===je(i||n).direction&&(a+=Ee(n.clientWidth,i?i.clientWidth:0)-s),{width:s,height:o,x:a,y:c}}(Ne(e)))}function bt(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function wt(e,t){return t.reduce(function(t,n){return t[n]=e,t},{})}function xt(e,t){void 0===t&&(t={});var n=t,r=n.placement,i=void 0===r?e.placement:r,s=n.strategy,o=void 0===s?e.strategy:s,a=n.boundary,c=void 0===a?"clippingParents":a,u=n.rootBoundary,l=void 0===u?Qe:u,h=n.elementContext,d=void 0===h?Ge:h,p=n.altBoundary,f=void 0!==p&&p,m=n.padding,g=void 0===m?0:m,v=bt("number"!=typeof g?g:wt(g,ze)),y=d===Ge?"reference":Ge,b=e.rects.popper,w=e.elements[f?y:d],x=function(e,t,n,r){var i="clippingParents"===t?function(e){var t=Pe(Fe(e)),n=["absolute","fixed"].indexOf(je(e).position)>=0&&we(e)?qe(e):e;return be(n)?t.filter(function(e){return be(e)&&gt(e,n)&&"body"!==_e(e)}):[]}(e):[].concat(t),s=[].concat(i,[n]),o=s[0],a=s.reduce(function(t,n){var i=yt(e,n,r);return t.top=Ee(i.top,t.top),t.right=Te(i.right,t.right),t.bottom=Te(i.bottom,t.bottom),t.left=Ee(i.left,t.left),t},yt(e,o,r));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}(be(w)?w:w.contextElement||Ne(e.elements.popper),c,l,o),E=Se(e.elements.reference),T=ut({reference:E,element:b,strategy:"absolute",placement:i}),A=vt(Object.assign({},b,T)),C=d===Ge?A:E,O={top:x.top-C.top+v.top,bottom:C.bottom-x.bottom+v.bottom,left:x.left-C.left+v.left,right:C.right-x.right+v.right},S=e.modifiersData.offset;if(d===Ge&&S){var k=S[i];Object.keys(O).forEach(function(e){var t=[Ue,Ve].indexOf(e)>=0?1:-1,n=[Be,Ve].indexOf(e)>=0?"y":"x";O[e]+=k[n]*t})}return O}function Et(e,t,n){return Ee(e,Te(t,n))}function Tt(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function At(e){return[Be,Ue,Ve,Ke].some(function(t){return e[t]>=0})}var Ct,Ot,St=it({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,n=e.instance,r=e.options,i=r.scroll,s=void 0===i||i,o=r.resize,a=void 0===o||o,c=ye(t.elements.popper),u=[].concat(t.scrollParents.reference,t.scrollParents.popper);return s&&u.forEach(function(e){e.addEventListener("scroll",n.update,st)}),a&&c.addEventListener("resize",n.update,st),function(){s&&u.forEach(function(e){e.removeEventListener("scroll",n.update,st)}),a&&c.removeEventListener("resize",n.update,st)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,n=e.name;t.modifiersData[n]=ut({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options,r=n.gpuAcceleration,i=void 0===r||r,s=n.adaptive,o=void 0===s||s,a=n.roundOffsets,c=void 0===a||a,u={placement:ot(t.placement),variation:at(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:i,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,ht(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:c})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,ht(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach(function(e){var n=t.styles[e]||{},r=t.attributes[e]||{},i=t.elements[e];we(i)&&_e(i)&&(Object.assign(i.style,n),Object.keys(r).forEach(function(e){var t=r[e];!1===t?i.removeAttribute(e):i.setAttribute(e,!0===t?"":t)}))})},effect:function(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach(function(e){var r=t.elements[e],i=t.attributes[e]||{},s=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce(function(e,t){return e[t]="",e},{});we(r)&&_e(r)&&(Object.assign(r.style,s),Object.keys(i).forEach(function(e){r.removeAttribute(e)}))})}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,n=e.options,r=e.name,i=n.offset,s=void 0===i?[0,0]:i,o=Ze.reduce(function(e,n){return e[n]=function(e,t,n){var r=ot(e),i=[Ke,Be].indexOf(r)>=0?-1:1,s="function"==typeof n?n(Object.assign({},t,{placement:e})):n,o=s[0],a=s[1];return o=o||0,a=(a||0)*i,[Ke,Ue].indexOf(r)>=0?{x:a,y:o}:{x:o,y:a}}(n,t.rects,s),e},{}),a=o[t.placement],c=a.x,u=a.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=c,t.modifiersData.popperOffsets.y+=u),t.modifiersData[r]=o}},{name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var i=n.mainAxis,s=void 0===i||i,o=n.altAxis,a=void 0===o||o,c=n.fallbackPlacements,u=n.padding,l=n.boundary,h=n.rootBoundary,d=n.altBoundary,p=n.flipVariations,f=void 0===p||p,m=n.allowedAutoPlacements,g=t.options.placement,v=ot(g),y=c||(v!==g&&f?function(e){if(ot(e)===We)return[];var t=pt(e);return[mt(e),t,mt(t)]}(g):[pt(g)]),b=[g].concat(y).reduce(function(e,n){return e.concat(ot(n)===We?function(e,t){void 0===t&&(t={});var n=t,r=n.placement,i=n.boundary,s=n.rootBoundary,o=n.padding,a=n.flipVariations,c=n.allowedAutoPlacements,u=void 0===c?Ze:c,l=at(r),h=l?a?Ye:Ye.filter(function(e){return at(e)===l}):ze,d=h.filter(function(e){return u.indexOf(e)>=0});0===d.length&&(d=h);var p=d.reduce(function(t,n){return t[n]=xt(e,{placement:n,boundary:i,rootBoundary:s,padding:o})[ot(n)],t},{});return Object.keys(p).sort(function(e,t){return p[e]-p[t]})}(t,{placement:n,boundary:l,rootBoundary:h,padding:u,flipVariations:f,allowedAutoPlacements:m}):n)},[]),w=t.rects.reference,x=t.rects.popper,E=new Map,T=!0,A=b[0],C=0;C<b.length;C++){var O=b[C],S=ot(O),k=at(O)===Je,_=[Be,Ve].indexOf(S)>=0,N=_?"width":"height",D=xt(t,{placement:O,boundary:l,rootBoundary:h,altBoundary:d,padding:u}),j=_?k?Ue:Ke:k?Ve:Be;w[N]>x[N]&&(j=pt(j));var L=pt(j),M=[];if(s&&M.push(D[S]<=0),a&&M.push(D[j]<=0,D[L]<=0),M.every(function(e){return e})){A=O,T=!1;break}E.set(O,M)}if(T)for(var $=function(e){var t=b.find(function(t){var n=E.get(t);if(n)return n.slice(0,e).every(function(e){return e})});if(t)return A=t,"break"},F=f?3:1;F>0&&"break"!==$(F);F--);t.placement!==A&&(t.modifiersData[r]._skip=!0,t.placement=A,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name,i=n.mainAxis,s=void 0===i||i,o=n.altAxis,a=void 0!==o&&o,c=n.boundary,u=n.rootBoundary,l=n.altBoundary,h=n.padding,d=n.tether,p=void 0===d||d,f=n.tetherOffset,m=void 0===f?0:f,g=xt(t,{boundary:c,rootBoundary:u,padding:h,altBoundary:l}),v=ot(t.placement),y=at(t.placement),b=!y,w=ct(v),x="x"===w?"y":"x",E=t.modifiersData.popperOffsets,T=t.rects.reference,A=t.rects.popper,C="function"==typeof m?m(Object.assign({},t.rects,{placement:t.placement})):m,O="number"==typeof C?{mainAxis:C,altAxis:C}:Object.assign({mainAxis:0,altAxis:0},C),S=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,k={x:0,y:0};if(E){if(s){var _,N="y"===w?Be:Ke,D="y"===w?Ve:Ue,j="y"===w?"height":"width",L=E[w],M=L+g[N],$=L-g[D],F=p?-A[j]/2:0,I=y===Je?T[j]:A[j],P=y===Je?-A[j]:-T[j],R=t.elements.arrow,H=p&&R?$e(R):{width:0,height:0},q=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},B=q[N],V=q[D],U=Et(0,T[j],H[j]),K=b?T[j]/2-F-U-B-O.mainAxis:I-U-B-O.mainAxis,W=b?-T[j]/2+F+U+V+O.mainAxis:P+U+V+O.mainAxis,z=t.elements.arrow&&qe(t.elements.arrow),J=z?"y"===w?z.clientTop||0:z.clientLeft||0:0,X=null!=(_=null==S?void 0:S[w])?_:0,Q=L+W-X,G=Et(p?Te(M,L+K-X-J):M,L,p?Ee($,Q):$);E[w]=G,k[w]=G-L}if(a){var Y,Z="x"===w?Be:Ke,ee="x"===w?Ve:Ue,te=E[x],ne="y"===x?"height":"width",re=te+g[Z],ie=te-g[ee],se=-1!==[Be,Ke].indexOf(v),oe=null!=(Y=null==S?void 0:S[x])?Y:0,ae=se?re:te-T[ne]-A[ne]-oe+O.altAxis,ce=se?te+T[ne]+A[ne]-oe-O.altAxis:ie,ue=p&&se?function(e,t,n){var r=Et(e,t,n);return r>n?n:r}(ae,te,ce):Et(p?ae:re,te,p?ce:ie);E[x]=ue,k[x]=ue-te}t.modifiersData[r]=k}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,n=e.state,r=e.name,i=e.options,s=n.elements.arrow,o=n.modifiersData.popperOffsets,a=ot(n.placement),c=ct(a),u=[Ke,Ue].indexOf(a)>=0?"height":"width";if(s&&o){var l=function(e,t){return bt("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:wt(e,ze))}(i.padding,n),h=$e(s),d="y"===c?Be:Ke,p="y"===c?Ve:Ue,f=n.rects.reference[u]+n.rects.reference[c]-o[c]-n.rects.popper[u],m=o[c]-n.rects.reference[c],g=qe(s),v=g?"y"===c?g.clientHeight||0:g.clientWidth||0:0,y=f/2-m/2,b=l[d],w=v-h[u]-l[p],x=v/2-h[u]/2+y,E=Et(b,x,w),T=c;n.modifiersData[r]=((t={})[T]=E,t.centerOffset=E-x,t)}},effect:function(e){var t=e.state,n=e.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!=typeof r||(r=t.elements.popper.querySelector(r)))&&gt(t.elements.popper,r)&&(t.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,n=e.name,r=t.rects.reference,i=t.rects.popper,s=t.modifiersData.preventOverflow,o=xt(t,{elementContext:"reference"}),a=xt(t,{altBoundary:!0}),c=Tt(o,r),u=Tt(a,i,s),l=At(c),h=At(u);t.modifiersData[n]={referenceClippingOffsets:c,popperEscapeOffsets:u,isReferenceHidden:l,hasPopperEscaped:h},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":l,"data-popper-escaped":h})}}]});class kt extends oe{get isVisible(){const e=this.popoverElement;return!!e&&e.classList.contains("is-visible")}get isInViewport(){const e=this.popoverElement;if(!this.isVisible||!e)return!1;const t=e.getBoundingClientRect(),n=Math.max(document.documentElement.clientHeight,window.innerHeight),r=Math.max(document.documentElement.clientWidth,window.innerWidth);return t.bottom>0&&t.top<n&&t.right>0&&t.left<r}get shouldHideOnOutsideClick(){switch(this.data.get("hide-on-outside-click")){case"after-dismissal":case"never":return!1;case"if-in-viewport":return this.isInViewport;default:return!0}}connect(){super.connect(),this.validate(),this.isVisible?this.initializePopper():"true"===this.data.get("auto-show")&&this.show(null),this.data.delete("auto-show")}disconnect(){this.hide(),this.popper&&(this.popper.destroy(),delete this.popper),super.disconnect()}toggle(e=null){this.isVisible?this.hide(e):this.show(e)}show(e=null){if(this.isVisible)return;const t=this.getDispatcher(e);this.triggerEvent("show",{dispatcher:t}).defaultPrevented||(this.popper||this.initializePopper(),this.popoverElement.classList.add("is-visible"),this.scheduleUpdate(),this.shown(t))}hide(e=null){if(!this.isVisible)return;const t=this.getDispatcher(e);this.triggerEvent("hide",{dispatcher:t}).defaultPrevented||(this.popoverElement.classList.remove("is-visible"),this.popper&&(this.popper.destroy(),delete this.popper),"after-dismissal"===this.data.get("hide-on-outside-click")&&this.data.delete("hide-on-outside-click"),this.hidden(t))}shown(e=null){this.bindDocumentEvents(),this.triggerEvent("shown",{dispatcher:e})}hidden(e=null){this.unbindDocumentEvents(),this.triggerEvent("hidden",{dispatcher:e})}generatePopover(){return null}initializePopper(){this.popper=St(this.referenceElement,this.popoverElement,{placement:this.data.get("placement")||"bottom",modifiers:[{name:"offset",options:{offset:[0,10]}}]})}validate(){const e=this.data.get("reference-selector");if(this.referenceElement=this.element,e&&(this.referenceElement=this.element.querySelector(e),!this.referenceElement))throw"Unable to find element by reference selector: "+e;const t=this.referenceElement.getAttribute(this.popoverSelectorAttribute);let n=null;if(t){if(n=document.getElementById(t),!n)throw`[${this.popoverSelectorAttribute}="{POPOVER_ID}"] required`}else n=this.generatePopover();if(!n)throw"unable to find or generate popover element";this.popoverElement=n}getDispatcher(e=null){return e instanceof Event?e.target:e instanceof Element?e:this.element}scheduleUpdate(){this.popper&&this.isVisible&&this.popper.update()}}class _t extends kt{constructor(){super(...arguments),this.popoverSelectorAttribute="aria-controls"}shown(e=null){this.toggleOptionalClasses(!0),this.toggleAccessibilityAttributes(!0),super.shown(e)}hidden(e=null){this.toggleOptionalClasses(!1),this.toggleAccessibilityAttributes(!1),super.hidden(e)}connect(){super.connect(),this.toggleAccessibilityAttributes()}bindDocumentEvents(){this.boundHideOnOutsideClick=this.boundHideOnOutsideClick||this.hideOnOutsideClick.bind(this),this.boundHideOnEscapePress=this.boundHideOnEscapePress||this.hideOnEscapePress.bind(this),document.addEventListener("mousedown",this.boundHideOnOutsideClick),document.addEventListener("keyup",this.boundHideOnEscapePress)}unbindDocumentEvents(){document.removeEventListener("mousedown",this.boundHideOnOutsideClick),document.removeEventListener("keyup",this.boundHideOnEscapePress)}hideOnOutsideClick(e){const t=e.target;this.shouldHideOnOutsideClick&&!this.referenceElement.contains(t)&&!this.popoverElement.contains(t)&&document.body.contains(t)&&this.hide(e)}hideOnEscapePress(e){27===e.which&&this.isVisible&&(this.popoverElement.contains(e.target)&&this.referenceElement.focus(),this.hide(e))}toggleOptionalClasses(e){if(!this.data.has("toggle-class"))return;const t=this.data.get("toggle-class")||"",n=this.referenceElement.classList;t.split(/\s+/).forEach(function(t){n.toggle(t,e)})}toggleAccessibilityAttributes(e){const t=(null==e?void 0:e.toString())||this.referenceElement.ariaExpanded||"false";this.referenceElement.ariaExpanded=t,this.referenceElement.setAttribute("aria-expanded",t)}}function Nt(e){const{isPopover:t,controller:n}=Mt(e);if(n)n.show();else{if(!t)throw'element does not have data-controller="s-popover"';e.setAttribute("data-s-popover-auto-show","true")}}function Dt(e){const{isPopover:t,controller:n,popover:r}=Mt(e);if(n)n.hide();else{if(!t)throw'element does not have data-controller="s-popover"';e.removeAttribute("data-s-popover-auto-show"),r&&r.classList.remove("is-visible")}}function jt(e,t,n){const{referenceElement:r,popover:i}=Mt(e);if(i)throw`element already has popover with id="${i.id}"`;if(!r)throw"element has invalid data-s-popover-reference-selector attribute";if("string"==typeof t){const e=document.createRange().createContextualFragment(t).children;if(1!==e.length)throw"popover should contain a single element";t=e[0]}const s=r.getAttribute("aria-controls");let o=t.id;if(!t.classList.contains("s-popover"))throw`popover should have the "s-popover" class but had class="${t.className}"`;if(s&&s!==o)throw`element has aria-controls="${s}" but popover has id="${o}"`;o||(o="--stacks-s-popover-"+Math.random().toString(36).substring(2,10),t.id=o),s||r.setAttribute("aria-controls",o),!t.parentElement&&e.parentElement&&r.insertAdjacentElement("afterend",t),$t(e,"s-popover",!0),n&&(n.toggleOnClick&&r.setAttribute("data-action","click->s-popover#toggle"),n.placement&&e.setAttribute("data-s-popover-placement",n.placement),n.autoShow&&e.setAttribute("data-s-popover-auto-show","true"))}function Lt(e){const{isPopover:t,controller:n,referenceElement:r,popover:i}=Mt(e);return null==n||n.hide(),null==i||i.remove(),t&&($t(e,"s-popover",!1),r&&r.removeAttribute("aria-controls")),i}function Mt(e){var t;const n=(null===(t=e.getAttribute("data-controller"))||void 0===t?void 0:t.includes("s-popover"))||!1,r=se.getControllerForElementAndIdentifier(e,"s-popover"),i=e.getAttribute("data-s-popover-reference-selector"),s=i?e.querySelector(i):e,o=s?s.getAttribute("aria-controls"):null;return{isPopover:n,controller:r,referenceElement:s,popover:o?document.getElementById(o):null}}function $t(e,t,n){var r;const i=new Set(null===(r=e.getAttribute("data-controller"))||void 0===r?void 0:r.split(/\s+/));n?i.add(t):i.delete(t),e.setAttribute("data-controller",Array.from(i).join(" "))}_t.targets=[],function(e){e.Ascending="ascending",e.Descending="descending",e.None="none"}(Ct||(Ct={}));class Ft extends oe{constructor(){super(...arguments),this.updateSortedColumnStyles=(e,t)=>{this.columnTargets.forEach(n=>{const r=n===e,i=r?t===Ct.Ascending?"asc":"desc":Ct.None;n.classList.toggle("is-sorted",r&&t!==Ct.None),n.querySelectorAll(".js-sorting-indicator").forEach(e=>{e.classList.toggle("d-none",!e.classList.contains("js-sorting-indicator-"+i))}),r?n.setAttribute("aria-sort",t):n.removeAttribute("aria-sort")})}}sort(e){const t=this,n=e.currentTarget,r=n instanceof HTMLButtonElement?n.parentElement:n,i=this.element,s=i.tBodies[0],o=function(e){var t;const n=null===(t=e.parentElement)||void 0===t?void 0:t.parentElement;if(!(n instanceof HTMLTableSectionElement))throw"invalid table";const r=It(n,e);if("number"!=typeof r)throw"shouldn't happen";return r}(r);if(o<0)return;const a=function(e){const t=It(e);if(!Array.isArray(t))throw"shouldn't happen";return t}(s),c=r.getAttribute("aria-sort")===Ct.Ascending?-1:1,u=Array.from(i.tBodies[0].rows);let l=!1;const h=[];let d;u.forEach(function(e,n){var r,i;const s=t.getElementData(e,"sort-to");if("top"===s)return;if("bottom"===s)return void(d||(d=e));const c=a[n][o];if(!c)return void h.push(["",n]);const u=t.getElementData(c,"sort-val"),p=null!==(i=null!=u?u:null===(r=c.textContent)||void 0===r?void 0:r.trim())&&void 0!==i?i:"";""!==p&&`${parseInt(p,10)}`!==p&&(l=!0),h.push([p,n])}),l||h.forEach(function(e){e[0]=""===e[0]?Number.MIN_VALUE:parseInt(e[0],10)}),h.sort(function(e,t){return e[0]>t[0]?1*c:e[0]<t[0]?-1*c:e[1]>t[1]?1:-1}),h.forEach(([e,t])=>{var n;const r=u[t];null===(n=r.parentElement)||void 0===n||n.removeChild(r),d?s.insertBefore(r,d):s.appendChild(r)}),this.updateSortedColumnStyles(r,1===c?Ct.Ascending:Ct.Descending)}}function It(e,t){const n=[];let r=e.children[0];const i=[],s=[];for(;r||s.some(e=>0!==e);){const e=[];n.push(e);let o=0;if(r)for(let n=0;n<r.children.length;n++){for(;s[o];)s[o]--,e[o]=i[o],o++;const a=r.children[n];if(!(a instanceof HTMLTableCellElement))throw"invalid table";if("none"===getComputedStyle(a).display)continue;if(a===t)return o;const c=o+a.colSpan;for(;o<c;o++)s[o]=a.rowSpan-1,i[o]=a,e[o]=a}for(;o<i.length;)s[o]&&(s[o]--,e[o]=i[o]),o++;r&&(r=r.nextElementSibling)}return t?-1:n}Ft.targets=["column"];class Pt extends oe{connect(){this.validate()}disconnect(){this.unbindDocumentEvents()}toggle(e=null){this._toggle(void 0,e)}show(e=null){this._toggle(!0,e)}hide(e=null){this._toggle(!1,e)}validate(){const e=this.data.get("return-element");if(e&&(this.returnElement=document.querySelector(e),!this.returnElement))throw"Unable to find element by return-element selector: "+e}_toggle(e,t=null){let n=e;const r="false"===this.toastTarget.getAttribute("aria-hidden");if(void 0===n&&(n=!r),n&&r||!n&&!r)return;const i=this.getDispatcher(t),s=this.triggerEvent(n?"show":"hide",{returnElement:this.returnElement,dispatcher:this.getDispatcher(i)},this.toastTarget);s.defaultPrevented||(this.returnElement=s.detail.returnElement,this.toastTarget.setAttribute("aria-hidden",n?"false":"true"),n?(this.bindDocumentEvents(),this.hideAfterTimeout(),"true"!==this.data.get("prevent-focus-capture")&&this.focusInsideToast()):(this.unbindDocumentEvents(),this.focusReturnElement(),this.removeToastOnHide(),this.clearActiveTimeout()),void 0!==this.toastTarget.ontransitionend?this.toastTarget.addEventListener("transitionend",()=>{this.triggerEvent(n?"shown":"hidden",{dispatcher:i},this.toastTarget)},{once:!0}):this.triggerEvent(n?"shown":"hidden",{dispatcher:i},this.toastTarget))}focusReturnElement(){this.returnElement&&this.toastTarget.addEventListener("s-toast:hidden",()=>{this.returnElement&&document.body.contains(this.returnElement)&&this.returnElement.focus()},{once:!0})}removeToastOnHide(){"true"===this.data.get("remove-when-hidden")&&this.toastTarget.addEventListener("s-toast:hidden",()=>{this.element.remove()},{once:!0})}hideAfterTimeout(){if("true"===this.data.get("prevent-auto-hide")||"0"===this.data.get("hide-after-timeout"))return;const e=parseInt(this.data.get("hide-after-timeout"),10)||3e3;this.activeTimeout=window.setTimeout(()=>this.hide(),e)}clearActiveTimeout(){clearTimeout(this.activeTimeout)}getAllTabbables(){return Array.from(this.toastTarget.querySelectorAll("[href], input, select, textarea, button, [tabindex]")).filter(e=>e.matches(":not([disabled]):not([tabindex='-1'])"))}firstVisible(e){return null==e?void 0:e.find(e=>null!==e.offsetParent)}focusInsideToast(){this.toastTarget.addEventListener("s-toast:shown",()=>{var e;const t=null!==(e=this.firstVisible(this.initialFocusTargets))&&void 0!==e?e:this.firstVisible(this.getAllTabbables());null==t||t.focus()},{once:!0})}bindDocumentEvents(){this._boundClickFn=this._boundClickFn||this.hideOnOutsideClick.bind(this),this._boundKeypressFn=this._boundKeypressFn||this.hideOnEscapePress.bind(this),document.addEventListener("mousedown",this._boundClickFn),document.addEventListener("keyup",this._boundKeypressFn)}unbindDocumentEvents(){document.removeEventListener("mousedown",this._boundClickFn),document.removeEventListener("keyup",this._boundKeypressFn)}hideOnOutsideClick(e){var t;const n=e.target;!(null===(t=this.toastTarget)||void 0===t?void 0:t.contains(n))&&document.body.contains(n)&&"false"!==this.data.get("hide-on-outside-click")&&this._toggle(!1,e)}hideOnEscapePress(e){27===e.which&&"true"!==this.toastTarget.getAttribute("aria-hidden")&&this._toggle(!1,e)}getDispatcher(e=null){return e instanceof Event?e.target:e instanceof Element?e:this.element}}function Rt(e){qt(e,!0)}function Ht(e){qt(e,!1)}function qt(e,t){const n=se.getControllerForElementAndIdentifier(e,"s-toast");if(!n)throw"Unable to get s-toast controller from element";t?n.show():n.hide()}Pt.targets=["toast","initialFocus"];class Bt extends kt{constructor(){super(...arguments),this.popoverSelectorAttribute="aria-describedby"}connect(){super.connect(),window.matchMedia("(hover: hover)").matches&&this.bindMouseEvents(),this.bindKeyboardEvents()}disconnect(){this.unbindKeyboardEvents(),this.unbindMouseEvents(),super.disconnect()}show(e=null){const t=se.getControllerForElementAndIdentifier(this.element,"s-popover");t&&t.isVisible||super.show(e)}scheduleShow(e=null){window.clearTimeout(this.activeTimeout),this.activeTimeout=window.setTimeout(()=>this.show(e),300)}scheduleHide(e=null){window.clearTimeout(this.activeTimeout),this.activeTimeout=window.setTimeout(()=>super.hide(e),100)}clearActiveTimeout(){clearTimeout(this.activeTimeout)}applyTitleAttributes(){let e;const t=this.data.get("html-title");if(t)e=document.createRange().createContextualFragment(t);else{const t=this.element.getAttribute("title");if(!t)return null;e=document.createTextNode(t)}this.data.delete("html-title"),this.element.removeAttribute("title");let n=this.element.getAttribute("aria-describedby");n||(n=Bt.generateId(),this.element.setAttribute("aria-describedby",n));let r=document.getElementById(n);if(!r){r=document.createElement("div"),r.id=n,r.className="s-popover s-popover__tooltip",r.setAttribute("role","tooltip");const e=this.element.parentNode;e?e.insertBefore(r,this.element.nextSibling):document.body.appendChild(r)}return r.innerHTML="",r.appendChild(e),this.scheduleUpdate(),r}bindDocumentEvents(){this.boundHideIfWithin=this.boundHideIfWithin||this.hideIfWithin.bind(this),document.addEventListener("s-popover:shown",this.boundHideIfWithin)}unbindDocumentEvents(){document.removeEventListener("s-popover:shown",this.boundHideIfWithin)}generatePopover(){return this.applyTitleAttributes()}hideIfWithin(e){e.target.contains(this.referenceElement)&&this.scheduleHide()}hideIfNotFocused(e){this.referenceElement.contains(e.relatedTarget)||this.popoverElement.contains(e.relatedTarget)||this.scheduleHide()}hideOnEscapeKeyEvent(e){"Escape"===e.key&&this.scheduleHide()}bindKeyboardEvents(){this.boundScheduleShow=this.boundScheduleShow||this.scheduleShow.bind(this),this.boundHideOnEscapeKeyEvent=this.boundHideOnEscapeKeyEvent||this.hideOnEscapeKeyEvent.bind(this),this.boundHideIfNotFocused=this.boundHideIfNotFocused||this.hideIfNotFocused.bind(this),this.referenceElement.addEventListener("focus",this.boundScheduleShow),this.referenceElement.addEventListener("focusout",this.boundHideIfNotFocused.bind(this)),this.popoverElement.addEventListener("focusout",this.boundHideIfNotFocused.bind(this)),document.addEventListener("keyup",this.boundHideOnEscapeKeyEvent)}unbindKeyboardEvents(){this.referenceElement.removeEventListener("focus",this.boundScheduleShow),this.referenceElement.removeEventListener("focusout",this.boundHideIfNotFocused),this.referenceElement.removeEventListener("focusout",this.boundHideIfNotFocused),document.removeEventListener("keyup",this.boundHideOnEscapeKeyEvent)}bindMouseEvents(){this.boundScheduleShow=this.boundScheduleShow||this.scheduleShow.bind(this),this.boundHide=this.boundHide||this.scheduleHide.bind(this),this.boundClearActiveTimeout=this.boundClearActiveTimeout||this.clearActiveTimeout.bind(this),this.referenceElement.addEventListener("mouseover",this.boundScheduleShow),this.referenceElement.addEventListener("mouseout",this.boundHide),this.popoverElement.addEventListener("mouseover",this.boundClearActiveTimeout),this.popoverElement.addEventListener("mouseout",this.boundHide)}unbindMouseEvents(){this.referenceElement.removeEventListener("mouseover",this.boundScheduleShow),this.referenceElement.removeEventListener("mouseout",this.boundHide),this.popoverElement.removeEventListener("mouseover",this.boundClearActiveTimeout),this.popoverElement.removeEventListener("mouseout",this.boundHide)}static generateId(){return"--stacks-s-tooltip-"+Math.random().toString(36).substring(2,10)}}function Vt(e,t,n){e.setAttribute("data-s-tooltip-html-title",t),e.removeAttribute("title"),Kt(e,n)}function Ut(e,t,n){e.setAttribute("title",t),e.removeAttribute("data-s-tooltip-html-title"),Kt(e,n)}function Kt(e,t){t&&t.placement&&e.setAttribute("data-s-tooltip-placement",t.placement);const n=se.getControllerForElementAndIdentifier(e,"s-tooltip");if(n)n.applyTitleAttributes();else{const t=e.getAttribute("data-controller");e.setAttribute("data-controller",`${t||""} s-tooltip`)}}Bt.targets=[],se.register("s-banner",ue),se.register("s-modal",pe),se.register("s-toast",Pt),se.register("s-navigation-tablist",ve),se.register("s-popover",_t),se.register("s-table",Ft),se.register("s-tooltip",Bt),ie.finalize(),z.start().register("docs-resizer",((Ot=class extends re{connect(){if(this._selected=null,this._sizeClass=null,this.hasDefaultTarget){var e=document.createEvent("mouseevent");e.initEvent("click",!0,!0);var t=this;setTimeout(function(){t.defaultTarget.dispatchEvent(e)},0)}}small(e){this._handleSizeEvent(e,"w40")}large(e){this._handleSizeEvent(e,"w100")}_handleSizeEvent(e,t){if(!(e.currentTarget instanceof Element))throw"unexpected event";this._sizeClass&&this.resizableTarget.classList.remove(this._sizeClass),this._selected&&(this._selected.classList.remove("bg-black-225"),this._selected.classList.remove("fc-black-500")),this._sizeClass=t,this.resizableTarget.classList.add(t),this._selected=e.currentTarget,e.currentTarget.classList.add("bg-black-225"),e.currentTarget.classList.add("fc-black-500"),e.preventDefault()}}).targets=["resizable","default"],Ot)),n(8076),n(5908),n(9258),n(5929),n(5840),n(1515),globalThis.Stacks=e})()})();
\ No newline at end of file
diff --git a/packages/stacks-docs-next/svelte.config.js b/packages/stacks-docs-next/svelte.config.js
index 786a9a83e7..f0a51c50a1 100644
--- a/packages/stacks-docs-next/svelte.config.js
+++ b/packages/stacks-docs-next/svelte.config.js
@@ -9,6 +9,7 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import extractToc from "@stefanprobst/rehype-extract-toc";
 import hljs from "highlight.js";
 import { visit } from "unist-util-visit";
+import { IconLink } from "@stackoverflow/stacks-icons/icons";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -37,8 +38,13 @@ const config = {
                 extractToc,
                 exposeToc,
                 rehypeSectionize,
-                [rehypeAutolinkHeadings, { behavior: "wrap" }],
+                [rehypeAutolinkHeadings, {
+                    behavior: "append",
+                    properties: { className: ["docs-heading-anchor"], ariaHidden: "true", tabIndex: -1 },
+                    content: { type: 'raw', value: IconLink }
+                }],
                 addTableClasses,
+                addDocClasses,
             ],
         }),
     ],
@@ -48,7 +54,6 @@ const config = {
             $src: "src",
             $components: "src/components",
             $docs: "src/docs",
-            $data: "../stacks-docs/_data",
         },
     },
     extensions: [".svelte", ".md"],
@@ -67,13 +72,60 @@ function exposeToc() {
     };
 }
 
-// Custom plugin to add Stacks classes to tables
+// Custom plugin to add individual docs-* classes to generated elements.
+// These replace the old .doc X descendant-selector pattern so each element
+// carries its own class and does not depend on a parent .doc wrapper.
+function addDocClasses() {
+    return function (tree) {
+        visit(tree, "element", (node) => {
+            node.properties = node.properties || {};
+            const existing = Array.isArray(node.properties.className)
+                ? node.properties.className
+                : node.properties.className
+                    ? [node.properties.className]
+                    : [];
+
+            const add = (...names) => {
+                node.properties.className = [...existing, ...names];
+            };
+
+            switch (node.tagName) {
+                case "h2": add("docs-heading", "docs-h2"); break;
+                case "h3": add("docs-heading", "docs-h3"); break;
+                case "h4": add("docs-heading", "docs-h4"); break;
+                case "p":       add("docs-copy"); break;
+                case "ol":      add("docs-copy", "lh-xl"); break;
+                case "section": add("docs-section"); break;
+                case "ul":      add("docs-ul", "lh-xl");  break;
+                case "li":  add("docs-li");  break;
+                case "nav": add("docs-nav"); break;
+                case "img": add("docs-img"); break;
+                case "iframe": add("docs-iframe"); break;
+                case "a":
+                    if (!existing.includes("docs-heading-anchor")) {
+                        add("docs-link");
+                    }
+                    break;
+            }
+        });
+    };
+}
+
+// Custom plugin to add Stacks classes to tables.
+// Ensures s-table is present while preserving any existing classes (e.g. s-table__bx-simple).
 function addTableClasses() {
     return function (tree) {
         visit(tree, "element", (node) => {
             if (node.tagName === "table") {
                 node.properties = node.properties || {};
-                node.properties.className = ["s-table"];
+                const existing = Array.isArray(node.properties.className)
+                    ? node.properties.className
+                    : node.properties.className
+                        ? [node.properties.className]
+                        : [];
+                if (!existing.includes("s-table")) {
+                    node.properties.className = ["s-table", ...existing];
+                }
             }
         });
     };
diff --git a/packages/stacks-docs-next/vite.config.ts b/packages/stacks-docs-next/vite.config.ts
index e366c21c63..f091e80a2f 100644
--- a/packages/stacks-docs-next/vite.config.ts
+++ b/packages/stacks-docs-next/vite.config.ts
@@ -1,10 +1,14 @@
 import fs from "fs";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
 import pkgMain from "../stacks-classic/package.json";
 import pkgSvelte from "../stacks-svelte/package.json";
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 export default defineConfig({
     plugins: [
         sveltekit(),
@@ -18,6 +22,15 @@ export default defineConfig({
             },
         },
     ],
+    resolve: {
+        alias: [
+            {
+                // Exact match only — subpath imports like /dist/css/stacks.css are unaffected
+                find: /^@stackoverflow\/stacks$/,
+                replacement: resolve(__dirname, "../stacks-classic/lib/esm-no-css.ts"),
+            },
+        ],
+    },
     define: {
         __APP_VERSION__: JSON.stringify(pkgMain.version),
         __SVELTE_VERSION__: JSON.stringify(pkgSvelte.version),