@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/docs/guides/pure-css/class-api.md

@@ -0,0 +1,1070 @@
+---
+title: Class API Reference
+description: Complete reference for Sleekspace's sk-* CSS class modifiers — kinds, sizes, variants, and structural wrappers for every component.
+---
+
+# Class API Reference
+
+The class API is Sleekspace's lowest-level styling surface. Grab the compiled CSS,
+add the right `sk-*` classes to your HTML, and you're done. No Vue, no JS, no build tool required.
+
+## Concepts
+
+Every component has one **base class** (`sk-panel`, `sk-button`, etc.) plus **modifier classes**
+that toggle kinds, sizes, states, and other boolean options. Modifiers stack on the same element.
+
+```html
+<!-- base only -->
+<div class="sk-panel">…</div>
+
+<!-- base + kind + size -->
+<div class="sk-panel sk-primary sk-lg">…</div>
+```
+
+**You do not need to specify modifiers to get defaults.** If you omit `kind`, components render
+in their default kind (usually `sk-neutral`). If you omit `size`, they render at `sk-md`.
+Explicit classes override defaults; omitting them triggers the built-in default via
+zero-specificity `:where()` selectors.
+
+**Kind classes** are shared across most components: `sk-neutral`, `sk-primary`, `sk-accent`,
+`sk-info`, `sk-success`, `sk-warning`, `sk-danger`, plus the extended palette
+`sk-boulder`, `sk-neon-blue`, `sk-neon-green`, `sk-neon-red`, `sk-neon-yellow`.
+
+**Size classes** are also shared: `sk-xs`, `sk-sm`, `sk-md` (default), `sk-lg`, `sk-xl`.
+
+**Custom colors** can override the kind via inline CSS variables — see the per-component
+note for the relevant variable name.
+
+For container components you can also use the
+[custom-element form](./custom-elements.md) as an alternative to class-based markup.
+
+---
+
+## Component Reference
+
+### Panel
+
+**Base class:** `sk-panel`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Corner decoration size | `sk-md` |
+| `sk-cut-top-left`, `sk-cut-top-right`, `sk-cut-bottom-right`, `sk-cut-bottom-left` | Which corners are beveled | `sk-cut-bottom-right` |
+| `sk-decoration-top-left` / … | Which corner shows the accent stripe | `sk-decoration-bottom-right` |
+| `sk-no-border` | Remove border | off |
+| `sk-no-decoration` | Hide accent stripe | off |
+
+**Custom color var:** `--sk-panel-color-base`
+
+**Rendered HTML:**
+
+```html
+<div class="sk-panel sk-primary sk-lg sk-cut-top-left sk-cut-bottom-right sk-decoration-top-left">
+    <p>Primary panel with diagonal cuts.</p>
+</div>
+```
+
+[See Vue docs →](/components/panel)
+
+---
+
+### Card
+
+**Base class:** `sk-card`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+
+The card shell is the outer container. Inner structure (header, media, footer) is composed
+with child elements — the static helper leaves slotting to you.
+
+**Custom color var:** `--sk-panel-color-base`
+
+**Rendered HTML:**
+
+```html
+<div class="sk-card sk-accent">
+    <div class="sk-card-header"><h3>Card Title</h3></div>
+    <div class="sk-card-body"><p>Content here.</p></div>
+</div>
+```
+
+[See Vue docs →](/components/card)
+
+---
+
+### Alert
+
+**Base class:** `sk-alert`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-info` |
+| `sk-subtle` | Lower-contrast background variant | off |
+
+The element should carry `role="alert"` for accessibility.
+
+The static helper emits a two-wrapper structure: an optional icon div followed by a content
+wrapper. When building the class API form by hand, mirror this structure so CSS spacing rules
+apply correctly:
+
+**Rendered HTML (info kind, default — with icon):**
+
+```html
+<div class="sk-alert sk-info" role="alert">
+    <div class="sk-alert-icon">
+        <!-- info SVG icon -->
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <circle cx="12" cy="8" r="0.5" fill="currentColor"></circle>
+        </svg>
+    </div>
+    <div class="sk-alert-content">
+        <p>Something to note.</p>
+    </div>
+</div>
+```
+
+**Rendered HTML (neutral kind — no icon):**
+
+```html
+<div class="sk-alert sk-neutral" role="alert">
+    <div class="sk-alert-content">
+        <p>Deployment paused — review the diff before continuing.</p>
+    </div>
+</div>
+```
+
+Icons are auto-selected for the four feedback kinds (info, success, warning, danger).
+Non-feedback kinds (neutral, primary, accent) render without an icon container.
+
+**Custom color var:** `--sk-alert-color-base`
+
+[See Vue docs →](/components/alert)
+
+---
+
+### Divider
+
+**Base class:** `sk-divider`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-horizontal` / `sk-vertical` | Layout axis | `sk-horizontal` |
+| `sk-md` / `sk-xs` … `sk-xl` | Line thickness | `sk-md` |
+| `sk-subtle` | Lower-contrast line | off |
+
+Note: the divider emits an `<hr>` element (not a `<div>`), and uses `sk-horizontal` / `sk-vertical`
+directly (not `sk-orientation-*`). The element carries `role="separator"` automatically.
+
+**Rendered HTML:**
+
+```html
+<hr class="sk-divider sk-horizontal sk-neutral sk-md" role="separator">
+```
+
+[See Vue docs →](/components/divider)
+
+---
+
+### Page
+
+**Base class:** `sk-page`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-fixed-header` | Stick header to viewport top | off |
+| `sk-fixed-footer` | Stick footer to viewport bottom | off |
+| `sk-flush` | Remove outer padding | off |
+
+`sk-page` is a layout shell. Inner regions use `sk-page-header`, `sk-page-main`,
+`sk-page-sidebar`, `sk-page-aside`, and `sk-page-footer` as child elements.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-page sk-fixed-header">
+    <header class="sk-page-header">…</header>
+    <main class="sk-page-main">…</main>
+</div>
+```
+
+[See Vue docs →](/components/page)
+
+---
+
+### Group
+
+**Base class:** `sk-group`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-horizontal` / `sk-vertical` | Flex direction | `sk-horizontal` |
+
+Groups child elements with joined borders, removing intermediate gaps and rounding only
+outer corners.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-group sk-horizontal">
+    <button class="sk-button sk-neutral" type="button">
+        <span class="sk-button-chrome">A</span>
+    </button>
+    <button class="sk-button sk-neutral" type="button">
+        <span class="sk-button-chrome">B</span>
+    </button>
+</div>
+```
+
+[See Vue docs →](/components/group)
+
+---
+
+### Skeleton
+
+**Base class:** `sk-skeleton`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-text` / `sk-circular` / `sk-rectangular` / `sk-square` | Shape variant | `sk-text` |
+| `sk-shimmer` | Shimmer animation | `sk-shimmer` (default on) |
+| `sk-pulse` | Pulse animation | off |
+
+Note: the variant class names are `sk-text`, `sk-circular`, `sk-rectangular`, `sk-square`
+(not `sk-shape-*`). The static helper defaults animation to `sk-shimmer`; omit both
+`sk-shimmer` and `sk-pulse` for a static (no-animation) skeleton.
+
+Width and height are set via inline style — they have no CSS class equivalent.
+
+**Rendered HTML:**
+
+```html
+<!-- text skeleton with shimmer (defaults) -->
+<div class="sk-skeleton sk-text sk-shimmer"></div>
+
+<!-- rect skeleton with explicit dimensions -->
+<div class="sk-skeleton sk-rectangular sk-shimmer" style="width: 200px; height: 40px;"></div>
+
+<!-- circular avatar placeholder -->
+<div class="sk-skeleton sk-circular sk-pulse" style="width: 48px; height: 48px;"></div>
+```
+
+[See Vue docs →](/components/skeleton)
+
+---
+
+### Progress
+
+**Base class:** `sk-progress`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Bar height | `sk-md` |
+| `sk-indeterminate` | Animated indeterminate state | off |
+
+Uses the `<progress>` element natively. Pass `value` and `max` attributes.
+
+**Rendered HTML:**
+
+```html
+<progress class="sk-progress sk-primary sk-sm" value="40" max="100"></progress>
+```
+
+[See Vue docs →](/components/progress)
+
+---
+
+### Spinner
+
+**Base class:** `sk-spinner`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-primary` |
+| `sk-xs` … `sk-xl` | Spinner diameter | `sk-md` |
+| `sk-variant-circular` / `sk-variant-dots` / `sk-variant-crosshair` | Visual style | `sk-variant-circular` |
+
+The spinner emits ARIA attributes (`role="status"`, `aria-live="polite"`, `aria-label="Loading"`)
+and a variant-specific inner DOM. Mirror this structure when using the class API directly:
+
+**Rendered HTML (circular — default):**
+
+```html
+<div class="sk-spinner sk-primary sk-md sk-variant-circular"
+     role="status" aria-live="polite" aria-label="Loading">
+    <div class="sk-spinner-circular">
+        <div class="sk-arc sk-arc-large"></div>
+        <div class="sk-arc sk-arc-small"></div>
+    </div>
+</div>
+```
+
+**Rendered HTML (dots):**
+
+```html
+<div class="sk-spinner sk-accent sk-lg sk-variant-dots"
+     role="status" aria-live="polite" aria-label="Loading">
+    <div class="sk-spinner-dots">
+        <div class="sk-dot"></div>
+        <div class="sk-dot"></div>
+        <div class="sk-dot"></div>
+    </div>
+</div>
+```
+
+**Rendered HTML (crosshair):**
+
+```html
+<div class="sk-spinner sk-neutral sk-md sk-variant-crosshair"
+     role="status" aria-live="polite" aria-label="Loading">
+    <div class="sk-crosshair-loader"></div>
+</div>
+```
+
+[See Vue docs →](/components/spinner)
+
+---
+
+### NavBar
+
+**Base class:** `sk-navbar`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-sticky` | Position sticky at viewport top | on (default) |
+
+The navbar emits a content wrapper with optional slot regions inside. Each slot region is
+only emitted when it has content:
+
+**Rendered HTML (with leading, brand, nav, and actions):**
+
+```html
+<nav class="sk-navbar sk-neutral sk-sticky">
+    <div class="sk-navbar-content">
+        <div class="sk-navbar-leading"><!-- sidebar toggle --></div>
+        <div class="sk-navbar-brand">MySite</div>
+        <div class="sk-navbar-nav">
+            <a href="/docs">Docs</a>
+        </div>
+        <div class="sk-navbar-actions"><!-- user menu --></div>
+    </div>
+</nav>
+```
+
+**Rendered HTML (brand + nav only):**
+
+```html
+<nav class="sk-navbar sk-neutral sk-sticky">
+    <div class="sk-navbar-content">
+        <div class="sk-navbar-brand">MySite</div>
+        <div class="sk-navbar-nav">…</div>
+    </div>
+</nav>
+```
+
+**Custom color vars:** `--sk-navbar-color-base`, `--sk-navbar-fg`
+
+[See Vue docs →](/components/navbar)
+
+---
+
+### Toolbar
+
+**Base class:** `sk-toolbar`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-horizontal` / `sk-vertical` | Layout axis | `sk-horizontal` |
+| `sk-cut-top-left`, `sk-cut-top-right`, `sk-cut-bottom-right`, `sk-cut-bottom-left` | Beveled corners | all four (default) |
+
+The element should carry `role="toolbar"`. Orientation uses `sk-horizontal` / `sk-vertical`
+directly (not `sk-orientation-*`). By default all four corners are cut.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-toolbar sk-neutral sk-horizontal sk-cut-top-left sk-cut-top-right sk-cut-bottom-right sk-cut-bottom-left"
+     role="toolbar">
+    <button class="sk-button sk-neutral" type="button">
+        <span class="sk-button-chrome">Cut</span>
+    </button>
+    <button class="sk-button sk-neutral" type="button">
+        <span class="sk-button-chrome">Copy</span>
+    </button>
+</div>
+```
+
+**Custom color vars:** `--sk-toolbar-color-base`, `--sk-toolbar-fg`
+
+[See Vue docs →](/components/toolbar)
+
+---
+
+### Sidebar
+
+**Base class:** `sk-sidebar`
+
+**Modifiers (on `<aside>`):**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-sidebar-right` | Mount on the right side | off (left) |
+| `sk-dense` | Compact item padding | off |
+
+The sidebar emits a rich inner structure. Drawer open/close behavior is Vue-only; the class
+API form is always visible. Inner panel corner is `sk-cut-bottom-right` (left side) or
+`sk-cut-bottom-left` (right side).
+
+**Rendered HTML (left sidebar, neutral):**
+
+```html
+<aside class="sk-sidebar sk-neutral">
+    <div class="sk-panel sk-neutral sk-md sk-cut-bottom-right sk-decoration-bottom-right sk-sidebar-panel">
+        <div class="sk-panel-scroll-content">
+            <nav class="sk-sidebar-nav">
+                <!-- navigation links -->
+            </nav>
+        </div>
+    </div>
+</aside>
+```
+
+[See Vue docs →](/components/sidebar)
+
+---
+
+### Breadcrumbs
+
+**Base class:** `sk-breadcrumbs`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+
+Uses a `<nav>` element. Add `aria-label="Breadcrumbs"` for accessibility.
+
+**Rendered HTML:**
+
+```html
+<nav class="sk-breadcrumbs sk-neutral" aria-label="Breadcrumbs">
+    <ol>
+        <li><a href="/">Home</a></li>
+        <li><a href="/docs">Docs</a></li>
+        <li aria-current="page">Installation</li>
+    </ol>
+</nav>
+```
+
+[See Vue docs →](/components/breadcrumbs)
+
+---
+
+### Pagination
+
+**Base class:** `sk-pagination`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+
+Uses a `<nav>` element. Add `aria-label="Pagination"`.
+
+**Rendered HTML:**
+
+```html
+<nav class="sk-pagination sk-neutral" aria-label="Pagination">
+    <button class="sk-button sk-neutral" type="button" aria-label="Previous">
+        <span class="sk-button-chrome">‹</span>
+    </button>
+    <button class="sk-button sk-primary" type="button" aria-current="page">
+        <span class="sk-button-chrome">1</span>
+    </button>
+    <button class="sk-button sk-neutral" type="button">
+        <span class="sk-button-chrome">2</span>
+    </button>
+    <button class="sk-button sk-neutral" type="button" aria-label="Next">
+        <span class="sk-button-chrome">›</span>
+    </button>
+</nav>
+```
+
+[See Vue docs →](/components/pagination)
+
+---
+
+### Tag
+
+**Base class:** `sk-tag`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Tag size | `sk-md` |
+| `sk-solid` / `sk-outline` / `sk-ghost` | Visual variant | `sk-solid` |
+| `sk-removable` | Show remove affordance | off |
+
+Uses a `<span>` element. Content must be wrapped in `<span class="sk-tag-content">`. When
+`sk-removable` is present, include the remove button after the content span.
+
+**Rendered HTML (simple):**
+
+```html
+<span class="sk-tag sk-accent sk-solid sk-sm">
+    <span class="sk-tag-content">Beta</span>
+</span>
+```
+
+**Rendered HTML (removable):**
+
+```html
+<span class="sk-tag sk-neutral sk-solid sk-md sk-removable">
+    <span class="sk-tag-content">design-system</span>
+    <button type="button" class="sk-tag-remove" aria-label="Remove">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+             viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+    </button>
+</span>
+```
+
+**Custom color vars:** `--sk-tag-color-base`, `--sk-tag-fg`
+
+[See Vue docs →](/components/tag)
+
+---
+
+### Avatar
+
+**Base class:** `sk-avatar`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Avatar size | `sk-md` |
+
+Note: there is no `shape` modifier — the Vue component does not expose a shape prop; avatars
+are always circular.
+
+The inner content follows a priority chain: image (`src`) → initials text → default person icon SVG.
+
+**Rendered HTML (with image):**
+
+```html
+<div class="sk-avatar sk-neutral sk-md">
+    <img src="/avatar.jpg" alt="User name" class="sk-avatar-image">
+</div>
+```
+
+**Rendered HTML (with initials):**
+
+```html
+<div class="sk-avatar sk-primary sk-lg">
+    <span class="sk-avatar-initials">AB</span>
+</div>
+```
+
+**Rendered HTML (fallback icon, no src or initials):**
+
+```html
+<div class="sk-avatar sk-neutral sk-md">
+    <svg class="sk-avatar-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
+    </svg>
+</div>
+```
+
+**Custom color vars:** `--sk-avatar-color-base`, `--sk-avatar-fg`
+
+[See Vue docs →](/components/avatar)
+
+---
+
+### Field
+
+**Base class:** `sk-field`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-label-top` / `sk-label-left` / `sk-label-right` | Label placement | `sk-label-top` |
+| `sk-has-error` | Error state styling | off |
+
+Wrap a label + input in a field for consistent layout and error messaging. The input wrapper
+div is always emitted. Label, description, and error paragraphs are optional.
+
+**Rendered HTML (with label):**
+
+```html
+<div class="sk-field sk-label-top">
+    <label for="email" class="sk-field-label">Email</label>
+    <div class="sk-field-input-wrapper">
+        <input class="sk-input sk-neutral" id="email" type="email" />
+    </div>
+</div>
+```
+
+**Rendered HTML (with error):**
+
+```html
+<div class="sk-field sk-label-top sk-has-error">
+    <label for="email" class="sk-field-label">Email</label>
+    <div class="sk-field-input-wrapper">
+        <input class="sk-input sk-neutral" id="email" type="email" />
+    </div>
+    <p id="email-error" class="sk-field-error">Please enter a valid email address.</p>
+</div>
+```
+
+**Rendered HTML (required field):**
+
+```html
+<div class="sk-field sk-label-top">
+    <label for="name" class="sk-field-label">
+        Name<span class="sk-field-required">*</span>
+    </label>
+    <div class="sk-field-input-wrapper">
+        <input class="sk-input sk-neutral" id="name" type="text" required />
+    </div>
+</div>
+```
+
+[See Vue docs →](/components/field)
+
+---
+
+### Table
+
+**Base class:** `sk-table`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-default` / other variants | Visual variant | `sk-default` |
+| `sk-striped` | Alternating row backgrounds | off |
+| `sk-hoverable` | Row hover highlight | on (default) |
+| `sk-bordered` | Outer border | on (default) |
+| `sk-no-inner-borders` | Suppress inner cell borders | on (default — inner borders off) |
+| `sk-subtle` | Reduced contrast | off |
+
+The table is wrapped in a `sk-table-wrapper` div. Both elements receive modifier classes.
+
+**Rendered HTML (defaults):**
+
+```html
+<div class="sk-table-wrapper sk-table-wrapper-neutral">
+    <table class="sk-table sk-neutral sk-default sk-hoverable sk-bordered sk-no-inner-borders">
+        <thead>
+            <tr><th>Name</th><th>Role</th></tr>
+        </thead>
+        <tbody>
+            <tr><td>Alice</td><td>Engineer</td></tr>
+        </tbody>
+    </table>
+</div>
+```
+
+**Rendered HTML (striped, dark background, subtle):**
+
+```html
+<div class="sk-table-wrapper sk-table-wrapper-neutral sk-dark-background sk-subtle">
+    <table class="sk-table sk-neutral sk-default sk-striped sk-hoverable sk-bordered sk-no-inner-borders sk-subtle">
+        <thead><tr><th>Name</th></tr></thead>
+        <tbody><tr><td>Alice</td></tr></tbody>
+    </table>
+</div>
+```
+
+**Custom color vars:** `--sk-table-color-base`, `--sk-table-fg`
+
+[See Vue docs →](/components/table)
+
+---
+
+### Tooltip
+
+**Base class:** `sk-tooltip`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-solid` / `sk-outline` | Visual variant | `sk-solid` |
+| `sk-placement-top` / `sk-placement-right` / `sk-placement-bottom` / `sk-placement-left` | Tooltip position | `sk-placement-top` |
+
+The element should carry `role="tooltip"`. The Vue version includes a JS-managed trigger
+and positioning engine — the class API is for static rendering of pre-positioned tooltips.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-tooltip sk-neutral sk-solid sk-placement-top" role="tooltip">
+    Click to expand
+</div>
+```
+
+[See Vue docs →](/components/tooltip)
+
+---
+
+### Button
+
+**Base class:** `sk-button`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Button size | `sk-md` |
+| `sk-solid` / `sk-outline` / `sk-ghost` | Visual variant | `sk-solid` |
+| `sk-loading` | Spinner + aria-busy | off |
+| `sk-pressed` | aria-pressed state | off |
+| `sk-dense` | Compact padding | off |
+
+Button children must be wrapped in `<span class="sk-button-chrome">`.
+
+**Rendered HTML (button element):**
+
+```html
+<button class="sk-button sk-primary sk-lg sk-solid" type="button">
+    <span class="sk-button-chrome">Launch</span>
+</button>
+```
+
+**Rendered HTML (anchor variant):**
+
+```html
+<a class="sk-button sk-accent sk-outline" href="/docs">
+    <span class="sk-button-chrome">Read the docs</span>
+</a>
+```
+
+[See Vue docs →](/components/button)
+
+---
+
+### Input
+
+**Base class:** `sk-input`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Input size | `sk-md` |
+
+Apply directly to the `<input>` element.
+
+**Rendered HTML:**
+
+```html
+<input class="sk-input sk-neutral" type="text" placeholder="Search…" />
+```
+
+[See Vue docs →](/components/input)
+
+---
+
+### Textarea
+
+**Base class:** `sk-textarea`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Textarea size | `sk-md` |
+
+**Rendered HTML:**
+
+```html
+<textarea class="sk-textarea sk-neutral" rows="4" placeholder="Enter description…"></textarea>
+```
+
+[See Vue docs →](/components/textarea)
+
+---
+
+### Select
+
+**Base class:** `sk-select`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Select size | `sk-md` |
+
+Apply to the native `<select>` element. The popup uses native browser styling; appearance
+can be overridden with `appearance: base-select` in Chromium.
+
+**Rendered HTML:**
+
+```html
+<select class="sk-select sk-neutral">
+    <option value="">Choose…</option>
+    <option value="a">Option A</option>
+</select>
+```
+
+[See Vue docs →](/components/select)
+
+---
+
+### Slider
+
+**Base class:** `sk-slider`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Slider size | `sk-md` |
+
+Apply to `<input type="range">`. Single-thumb only — Vue's dual-thumb variant requires JS.
+
+**Rendered HTML:**
+
+```html
+<input class="sk-slider sk-primary" type="range" min="0" max="100" value="40" />
+```
+
+[See Vue docs →](/components/slider)
+
+---
+
+### ColorPicker
+
+**Base class:** `sk-color-picker`
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-xs` … `sk-xl` | Swatch size | `sk-md` |
+
+Apply to `<input type="color">`. The palette UI is Vue-only.
+
+**Rendered HTML:**
+
+```html
+<input class="sk-color-picker sk-md" type="color" value="#c4842d" />
+```
+
+[See Vue docs →](/components/color-picker)
+
+---
+
+### Checkbox
+
+**Base class:** `sk-checkbox` (on the `<label>` wrapper)
+
+The checkbox is a compound element. Use this exact structure:
+
+**Rendered HTML:**
+
+```html
+<label class="sk-checkbox sk-neutral sk-md">
+    <input type="checkbox" name="agree" />
+    <span class="sk-checkbox-box"></span>
+    <span class="sk-checkbox-label">I agree to the terms</span>
+</label>
+```
+
+**Modifiers on `sk-checkbox`:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Checkbox size | `sk-md` |
+
+[See Vue docs →](/components/checkbox)
+
+---
+
+### Radio
+
+**Base class:** `sk-radio` (on the `<label>` wrapper)
+
+Compound structure:
+
+**Rendered HTML:**
+
+```html
+<label class="sk-radio sk-neutral sk-md">
+    <input type="radio" name="color" value="red" />
+    <span class="sk-radio-dot"></span>
+    <span class="sk-radio-label">Red</span>
+</label>
+```
+
+**Modifiers on `sk-radio`:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Radio size | `sk-md` |
+
+[See Vue docs →](/components/radio)
+
+---
+
+### Switch
+
+**Base class:** `sk-switch` (on the `<label>` wrapper)
+
+Compound structure:
+
+**Rendered HTML:**
+
+```html
+<label class="sk-switch sk-primary sk-md">
+    <input type="checkbox" name="notifications" />
+    <span class="sk-switch-track">
+        <span class="sk-switch-thumb"></span>
+    </span>
+    <span class="sk-switch-label">Enable notifications</span>
+</label>
+```
+
+**Modifiers on `sk-switch`:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Switch size | `sk-md` |
+
+[See Vue docs →](/components/switch)
+
+---
+
+### NumberInput
+
+**Base class:** `sk-number-input-wrapper` (on the outer `<div>`)
+
+Compound structure. Stepper buttons are intentionally omitted — they need JS.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-number-input-wrapper sk-neutral sk-md">
+    <input class="sk-number-input-field" type="number" min="0" max="100" value="42" />
+</div>
+```
+
+**Modifiers on `sk-number-input-wrapper`:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Input size | `sk-md` |
+
+[See Vue docs →](/components/number-input)
+
+---
+
+### TagsInput
+
+**Base class:** `sk-tags-input`
+
+A styled container for tag chip elements. The add/remove behavior requires Vue.
+
+**Rendered HTML:**
+
+```html
+<div class="sk-tags-input sk-neutral sk-md">
+    <span class="sk-tag sk-neutral sk-solid sk-sm">
+        <span class="sk-tag-content">design-system</span>
+    </span>
+    <span class="sk-tag sk-neutral sk-solid sk-sm">
+        <span class="sk-tag-content">css</span>
+    </span>
+</div>
+```
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Container size | `sk-md` |
+
+[See Vue docs →](/components/tags-input)
+
+---
+
+### Dropdown
+
+**Base class:** `sk-dropdown`
+
+Rendered as a `<details>` disclosure element — no JS required. This is a reduced form;
+the Vue version uses a managed menu with focus trap and keyboard navigation.
+
+**Modifiers:**
+
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
+| `sk-xs` … `sk-xl` | Size | `sk-md` |
+
+**Rendered HTML:**
+
+```html
+<details class="sk-dropdown sk-neutral sk-md">
+    <summary>Options ▾</summary>
+    <a class="sk-dropdown-item" href="/settings">Settings</a>
+    <a class="sk-dropdown-item" href="/logout">Log out</a>
+</details>
+```
+
+[See Vue docs →](/components/dropdown)