@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/llms-full.txt

@@ -55,13 +55,19 @@ This registers all SleekSpace CSS custom properties with Tailwind's `@theme` sys
 
 ## TypeScript Support
 
-For VS Code with Volar, add the global types to your `tsconfig.json`:
+For VS Code with Volar, wire up the global component type augmentation. The recommended approach is a one-line triple-slash reference in one of your own `.d.ts` files (for example `src/shims.d.ts` or `env.d.ts`):
+
+```typescript
+/// <reference types="@skewedaspect/sleekspace-ui/global" />
+```
+
+Alternatively, include the declaration file directly in your `tsconfig.json`:
 
 ```json
 {
   "include": [
     "src/**/*",
-    "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts"
+    "node_modules/@skewedaspect/sleekspace-ui/dist/global.d.ts"
   ]
 }
 ```
@@ -1062,326 +1068,3410 @@ Some components use specialized color props instead (SkProgress uses `trackColor
 
 ---
 
-# AI & LLMs
+# Sleekspace Without Vue
 
-SleekSpace UI ships with LLM-friendly documentation files that make it easy for AI assistants like Claude, ChatGPT, GitHub Copilot, and Cursor to understand and help with the library.
+Sleekspace is a Vue 3 component library, but the design system itself is framework-agnostic.
+If you're building a static site — VitePress output, Astro, 11ty, a build-time script — you
+can use Sleekspace's visual language without shipping Vue or paying for hydration.
 
-## Available Files
+## Quick lookup
 
-Two documentation files are available, optimized for different use cases:
+Common tasks and where to find them:
 
-| File | Size | Best For |
-|------|------|----------|
-| `llms.txt` | ~7 KB | Quick context, token-efficient prompts |
-| `llms-full.txt` | ~196 KB | Complete reference, in-depth help |
+| I want to… | Go here |
+|-----------|---------|
+| Build an alert box | [`alert()`](./static-helpers.md#alert) or [class form](./class-api.md#alert) |
+| Add a spinner | [`spinner()`](./static-helpers.md#spinner) or [class form](./class-api.md#spinner) |
+| Render a nav bar | [`navBar()`](./static-helpers.md#navbar) or [class form](./class-api.md#navbar) |
+| Lay out a page shell | [`page()`](./static-helpers.md#page) or [class form](./class-api.md#page) |
+| Show an avatar | [`avatar()`](./static-helpers.md#avatar) or [class form](./class-api.md#avatar) |
+| Wrap a form field | [`field()`](./static-helpers.md#field) or [class form](./class-api.md#field) |
+| Display a data table | [`table()`](./static-helpers.md#table) or [class form](./class-api.md#table) |
+| Add a tag / badge | [`tag()`](./static-helpers.md#tag) or [class form](./class-api.md#tag) |
 
-**llms.txt** is a concise index with component summaries. It gives AI assistants enough context to understand what the library offers and how components work together.
+## Three ways to use Sleekspace without Vue
 
-**llms-full.txt** is the complete reference. It includes all guide documentation, every component's usage examples, and full API reference tables with all props, slots, and events.
+### 1. Class API — Bootstrap-style HTML classes
 
-## How to Use
+Ship the compiled CSS and write HTML directly.
 
-### AI-Powered IDEs (Claude Code, Cursor, Windsurf)
+```html
+<link rel="stylesheet" href="/path/to/sleekspace-ui.css" />
 
-Point your AI assistant to fetch the documentation from our docs site:
+<div class="sk-panel sk-primary sk-lg">
+    <p>Primary panel, large cut size.</p>
+</div>
+```
 
-- https://sleekspace.skewedaspect.com/llms.txt
-- https://sleekspace.skewedaspect.com/llms-full.txt
+Works in any SSG, any language, any framework. Zero JS.
 
-Example: "Fetch https://sleekspace.skewedaspect.com/llms.txt and help me create a form with validation."
+[See the full class reference →](./class-api.md)
 
-### Web-Based AI (ChatGPT, Claude.ai)
+### 2. Custom-element API — attribute-driven
 
-Direct the AI to read the documentation URLs:
+Author containers as light-DOM custom elements with attributes.
 
-Example prompt:
+```html
+<sk-panel kind="primary" size="lg">
+    <p>Same panel, attribute-driven.</p>
+</sk-panel>
+```
 
-> "Read https://sleekspace.skewedaspect.com/llms.txt and then help me create a themed dashboard layout."
+Zero JS required — Sleekspace targets custom elements via attribute selectors, no registration
+needed. Form controls remain on native elements via the class API.
 
-### Paste Into Context
+[See the custom-element reference →](./custom-elements.md)
 
-For quick questions, copy the content of `llms.txt` and paste it into your conversation. For in-depth help with complex implementations, use `llms-full.txt`.
+### 3. Static helpers — Node SSG ergonomics
 
-## What's Included
+Import typed helper functions from the `/static` subpath.
 
-The documentation files contain:
+```typescript
+import { panel, button } from '@skewedaspect/sleekspace-ui/static';
 
-- **All guides** -- Installation, theming, design tokens, custom colors
-- **Every component** -- Usage examples and documentation for all 46 components
-- **Complete API reference** -- Props, slots, and events in structured tables
-- **Best practices** -- Common patterns and recommended approaches
+const html = panel({ kind: 'primary', size: 'lg' }, `<p>Content</p>`);
+```
 
-The files are auto-generated from the source documentation, so they stay in sync with the library.
+Strongly typed, zero runtime dependencies, works in any Node-based SSG.
 
-## Why This Matters
+[See the static helpers reference →](./static-helpers.md)
 
-AI assistants work best when they have accurate, up-to-date context about the tools you are using. With these files:
+## What you don't get
 
-- **Accurate help** -- AI responses are based on real documentation, not training data that may be outdated
-- **No hallucinations** -- Props, events, and usage patterns match what the library actually provides
-- **Better suggestions** -- AI can recommend appropriate components, theming approaches, and composition patterns
-- **Faster development** -- Get library-specific help without searching through documentation manually
+The pure-CSS layer covers presentational components only. Interactive components that need JS
+state management (Modal, Toast, Accordion, Dropdown menu, TreeView, Tabs, etc.) remain Vue-only.
 
+[See the full limitations page →](./limitations.md)
 
----
+## Path chooser
 
+- **I just want to write HTML that looks like Sleekspace.** → [Class API](./class-api.md)
+- **I want attribute-driven ergonomics for containers.** → [Custom elements](./custom-elements.md)
+- **I'm building SSG output from Node.** → [Static helpers](./static-helpers.md)
+- **I want to know what's missing vs. the Vue version.** → [Limitations](./limitations.md)
 
-# Components
+# Class API Reference
 
-# SkAccordion
+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.
 
-A collapsible sections container for organizing content into expandable panels. Supports single or multiple open items with smooth animations. Built on RekaUI's Accordion primitive with full WAI-ARIA support.
+## 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.
 
-Use `v-model` to control which item is open. In single mode (default), only one item can be open at a time. Each `SkAccordionItem` requires a unique `value` prop.
+```html
+<!-- base only -->
+<div class="sk-panel">…</div>
 
-```vue
-<script setup>
-import { ref } from 'vue';
+<!-- base + kind + size -->
+<div class="sk-panel sk-primary sk-lg">…</div>
+```
 
-const openItem = ref('item-1');
-</script>
+**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.
 
-<template>
-    <SkAccordion v-model="openItem" kind="primary">
-        <SkAccordionItem value="item-1" title="What is SleekSpace UI?">
-            SleekSpace UI is a Vue 3 component library...
-        </SkAccordionItem>
-        <SkAccordionItem value="item-2" title="How do I install it?">
-            Install via npm...
-        </SkAccordionItem>
-        <SkAccordionItem value="item-3" title="Is it customizable?">
-            Yes! Every component supports custom colors...
-        </SkAccordionItem>
-    </SkAccordion>
-</template>
-```
+**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`.
 
-Set `type="multiple"` to allow multiple items open simultaneously. The `v-model` becomes an array of open item values.
+**Custom colors** can override the kind via inline CSS variables — see the per-component
+note for the relevant variable name.
 
-```vue
-<script setup>
-import { ref } from 'vue';
+For container components you can also use the
+[custom-element form](./custom-elements.md) as an alternative to class-based markup.
 
-const openItems = ref(['feature-1', 'feature-2']);
-</script>
+---
 
-<template>
-    <SkAccordion v-model="openItems" type="multiple" kind="accent">
-        <SkAccordionItem value="feature-1" title="Theming">
-            Full theme support...
-        </SkAccordionItem>
-        <SkAccordionItem value="feature-2" title="Accessibility">
-            ARIA compliant...
-        </SkAccordionItem>
-        <SkAccordionItem value="feature-3" title="Performance">
-            Optimized animations...
-        </SkAccordionItem>
-    </SkAccordion>
-</template>
-```
+## Component Reference
 
+### Panel
 
-All seven semantic kinds adapt to your theme colors. The `kind` prop on SkAccordion is inherited by all child items, but individual items can override with their own `kind` prop.
+**Base class:** `sk-panel`
 
-```vue
-<SkAccordion kind="neutral">
-    <SkAccordionItem value="n1" title="Neutral">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="primary">
-    <SkAccordionItem value="p1" title="Primary">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="accent">
-    <SkAccordionItem value="a1" title="Accent">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="success">
-    <SkAccordionItem value="s1" title="Success">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="warning">
-    <SkAccordionItem value="w1" title="Warning">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="danger">
-    <SkAccordionItem value="d1" title="Danger">Content</SkAccordionItem>
-</SkAccordion>
-<SkAccordion kind="info">
-    <SkAccordionItem value="i1" title="Info">Content</SkAccordionItem>
-</SkAccordion>
-```
+**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 |
 
-Override the kind with custom `baseColor` and `textColor` props. Supports hex, OKLCH, or any valid CSS color value.
+**Custom color var:** `--sk-panel-color-base`
 
-```vue
-<SkAccordion base-color="#8B5CF6" collapsible>
-    <SkAccordionItem value="c1" title="Custom Purple">
-        Using hex color #8B5CF6
-    </SkAccordionItem>
-</SkAccordion>
+**Rendered HTML:**
 
-<SkAccordion base-color="oklch(0.75 0.2 180)" collapsible>
-    <SkAccordionItem value="c2" title="Custom Teal">
-        Using OKLCH color
-    </SkAccordionItem>
-</SkAccordion>
+```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)
 
-Classic use case for accordions - frequently asked questions. Set `collapsible` in single mode to allow closing all items.
+---
 
-```vue
-<script setup>
-import { ref } from 'vue';
+### Card
 
-const faqOpen = ref('faq-1');
-</script>
+**Base class:** `sk-card`
 
-<template>
-    <SkAccordion v-model="faqOpen" kind="info" collapsible>
-        <SkAccordionItem value="faq-1" title="Do you offer a free trial?">
-            Yes! We offer a 14-day free trial...
-        </SkAccordionItem>
-        <SkAccordionItem value="faq-2" title="Can I cancel anytime?">
-            Absolutely. You can cancel your subscription...
-        </SkAccordionItem>
-        <SkAccordionItem value="faq-3" title="What payment methods do you accept?">
-            We accept all major credit cards...
-        </SkAccordionItem>
-        <SkAccordionItem value="faq-4" title="Is my data secure?">
-            Yes. We use bank-level encryption...
-        </SkAccordionItem>
-    </SkAccordion>
-</template>
-```
+**Modifiers:**
 
+| Class | Effect | Default |
+|-------|--------|---------|
+| `sk-neutral` / `sk-primary` / … | Kind color | `sk-neutral` |
 
-### Props
+The card shell is the outer container. Inner structure (header, media, footer) is composed
+with child elements — the static helper leaves slotting to you.
 
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| type | "single" \| "multiple" | 'single' | false | Controls whether one or multiple accordion items can be open simultaneously.
-In 'single' mode, opening a new item automatically closes the previously open item.
-In 'multiple' mode, users can expand any number of items independently. |
-| modelValue | string \| string[] | undefined | false | The value(s) of currently open accordion item(s). Use with `v-model` for two-way binding.
-In 'single' mode, this is a string matching one item's `value` prop.
-In 'multiple' mode, this is an array of strings matching multiple items' `value` props. |
-| collapsible | boolean | false | false | When true and in 'single' mode, allows all items to be collapsed by clicking the open item again.
-When false, one item must always remain open (the first click selects, subsequent clicks don't collapse).
-This prop has no effect in 'multiple' mode where items are always independently collapsible. |
-| kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the accordion's header and border colors. The kind is automatically
-inherited by all child SkAccordionItem components unless they specify their own kind.
-Semantic kinds (neutral, primary, accent, etc.) adapt to your theme. |
-| disabled | boolean | false | false | When true, disables all accordion items. Items cannot be expanded or collapsed, and
-the accordion appears with reduced opacity. Individual items can also be disabled
-independently via their own `disabled` prop. |
+**Custom color var:** `--sk-panel-color-base`
 
-### Slots
+**Rendered HTML:**
 
-| Slot | Description |
-|------|-------------|
-| default | Container for SkAccordionItem components. Each item becomes a collapsible section. |
+```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>
+```
 
-### Events
+[See Vue docs →](/components/card)
 
-| Event | Description |
-|-------|-------------|
-| update:modelValue |  |
+---
 
+### Alert
 
----
+**Base class:** `sk-alert`
 
-# SkAlert
+**Modifiers:**
 
-A feedback component for displaying informational messages. Each kind renders a corresponding icon (info circle, checkmark, warning triangle, or error cross) alongside the message content. Renders with `role="alert"` for screen reader announcements.
+| 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.
 
-Use alerts to provide feedback, display status, or draw attention to important information. Each kind includes an appropriate default icon.
+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:
 
-```vue
-<SkAlert kind="info">
-    This is an informational alert message. Use it to provide helpful information to users.
-</SkAlert>
+**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):**
 
-Four semantic kinds with built-in icons: `info` for information, `success` for positive feedback, `warning` for caution, and `danger` for errors or critical messages.
+```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>
+```
 
-```vue
-<SkAlert kind="info">
-    <strong>Info:</strong> Your changes will be saved automatically.
-</SkAlert>
+Icons are auto-selected for the four feedback kinds (info, success, warning, danger).
+Non-feedback kinds (neutral, primary, accent) render without an icon container.
 
-<SkAlert kind="success">
-    <strong>Success:</strong> Your profile has been updated successfully.
-</SkAlert>
+**Custom color var:** `--sk-alert-color-base`
 
-<SkAlert kind="warning">
-    <strong>Warning:</strong> This action cannot be undone.
-</SkAlert>
+[See Vue docs →](/components/alert)
 
-<SkAlert kind="danger">
-    <strong>Error:</strong> Failed to save changes. Please try again.
-</SkAlert>
-```
+---
 
+### Divider
 
-Use `prominent` for critical messages that require immediate attention. Prominent alerts have stronger colors and increased visual weight.
+**Base class:** `sk-divider`
 
-```vue
-<SkAlert kind="info" :prominent="true">
-    <strong>System Maintenance:</strong> The system will undergo scheduled maintenance on Sunday at 2 AM UTC.
-</SkAlert>
+**Modifiers:**
 
-<SkAlert kind="warning" :prominent="true">
-    <strong>Storage Limit:</strong> You're using 95% of your storage space.
-</SkAlert>
-```
+| 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.
 
-Alerts can contain any content including headings, paragraphs, lists, buttons, and links for comprehensive messaging.
+**Rendered HTML:**
 
-```vue
-<SkAlert kind="info">
-    <h4 class="font-semibold mb-2">New Features Available</h4>
-    <p class="mb-2">We've added several new features to improve your experience:</p>
-    <ul class="list-disc list-inside mb-3 space-y-1">
-        <li>Dark mode support</li>
-        <li>Keyboard shortcuts</li>
-        <li>Export to PDF</li>
-    </ul>
-    <SkButton size="sm" kind="info">Learn More</SkButton>
-</SkAlert>
+```html
+<hr class="sk-divider sk-horizontal sk-neutral sk-md" role="separator">
 ```
 
+[See Vue docs →](/components/divider)
 
-Override the default icon using the `icon` slot for custom branding or specific message types.
+---
 
-```vue
-<SkAlert kind="info">
-    <template #icon>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-        </svg>
-    </template>
-    <strong>Pro Tip:</strong> Use keyboard shortcut Ctrl+S to save your work quickly.
-</SkAlert>
-```
+### Page
 
+**Base class:** `sk-page`
 
-Use `base-color` for any CSS color value. Provide `text-color` for optimal contrast, or it will default to the theme's neutral text color.
+**Modifiers:**
 
-```vue
-<SkAlert
-    base-color="oklch(0.65 0.25 280)"
-    text-color="white"
->
-    <strong>Custom Purple:</strong> This alert uses a custom purple base color with white text.
-</SkAlert>
+| 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 |
 
-<SkAlert
-    base-color="oklch(0.75 0.2 150)"
-    text-color="oklch(0.2 0.05 150)"
->
+`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)
+
+# Custom-Element API Reference
+
+Sleekspace's CSS includes attribute selectors for all 19 in-scope container components, so
+you can author them as custom elements (`<sk-panel kind="primary">`) and get the exact same
+styling as the class API (`<div class="sk-panel sk-primary">`) — no JavaScript required, no
+custom-element registration, no `customElements.define()`.
+
+Browsers parse unknown tags as `HTMLUnknownElement` with `display: inline` by default.
+Sleekspace's CSS resets those to `display: block` (or `inline-flex` for badge-like components)
+so the layout behaves the same as the class-API `<div>` counterparts.
+
+## How it works
+
+The SCSS uses a dual-selector mixin that emits class and attribute selectors in the same rule:
+
+```scss
+/* Generated output — kind="primary" triggers the same rule as .sk-primary */
+.sk-panel.sk-primary,
+sk-panel[kind="primary"] { … }
+```
+
+Boolean attributes work the same way:
+
+```scss
+.sk-panel.sk-no-border,
+sk-panel[no-border] { … }
+```
+
+No JS. No polyfill. Just CSS.
+
+## Which components have a custom-element form?
+
+The 19 container components listed below all support the `<sk-*>` tag form.
+
+The following 12 components **do not** have a custom-element form and are class-API only:
+Button, Input, Textarea, Select, Slider, ColorPicker, Checkbox, Radio, Switch, NumberInput,
+TagsInput, Dropdown.
+
+**Why?** Form controls are native semantic elements with mandatory tag names (`<input>`,
+`<select>`, etc.). Replacing them with `<sk-input>` would lose native form behavior,
+accessibility, and browser autofill. Compound controls (Checkbox, Radio, Switch, NumberInput)
+require a hidden native `<input>` child that can't be expressed in a single custom tag without
+JS registration. For these 12, use the [class API](./class-api.md).
+
+---
+
+## Component Reference
+
+### sk-panel
+
+**Tag:** `<sk-panel>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger, boulder, neon-blue, neon-green, neon-red, neon-yellow | neutral |
+| `size` | xs, sm, md, lg, xl | md |
+| `corners` | Space-separated: top-left, top-right, bottom-right, bottom-left | bottom-right |
+| `decoration-corner` | top-left, top-right, bottom-right, bottom-left | bottom-right |
+| `no-border` | Boolean presence | off |
+| `no-decoration` | Boolean presence | off |
+
+**Example:**
+
+```html
+<sk-panel kind="primary" size="lg" corners="top-left bottom-right" decoration-corner="top-left">
+    <p>Content here.</p>
+</sk-panel>
+```
+
+[See Vue docs →](/components/panel)
+
+---
+
+### sk-card
+
+**Tag:** `<sk-card>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+
+**Example:**
+
+```html
+<sk-card kind="accent">
+    <div class="sk-card-header"><h3>Card Title</h3></div>
+    <div class="sk-card-body"><p>Content.</p></div>
+</sk-card>
+```
+
+[See Vue docs →](/components/card)
+
+---
+
+### sk-alert
+
+**Tag:** `<sk-alert>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | info |
+| `subtle` | Boolean presence | off |
+
+Add `role="alert"` for accessibility. Note: the custom-element form does not auto-inject
+icon or content wrapper divs — the static helper and Vue component do that. For the full
+icon + content structure, use the static helper `alert()` or the class API form with manual
+wrapper divs (see [class API → Alert](./class-api.md#alert)).
+
+**Example:**
+
+```html
+<sk-alert kind="warning" role="alert">
+    <div class="sk-alert-content">
+        <p>Unsaved changes will be lost.</p>
+    </div>
+</sk-alert>
+```
+
+[See Vue docs →](/components/alert)
+
+---
+
+### sk-divider
+
+**Tag:** `<sk-divider>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `orientation` | horizontal, vertical | horizontal |
+| `variant` | (omit for default), subtle | — |
+
+Note: in the class API the divider is an `<hr>` — in the custom-element form you can use
+`<sk-divider>` and the CSS handles display. Add `role="separator"`.
+
+**Example:**
+
+```html
+<sk-divider kind="neutral" role="separator"></sk-divider>
+```
+
+[See Vue docs →](/components/divider)
+
+---
+
+### sk-page
+
+**Tag:** `<sk-page>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `fixed-header` | Boolean presence | off |
+| `fixed-footer` | Boolean presence | off |
+| `flush` | Boolean presence | off |
+
+**Example:**
+
+```html
+<sk-page fixed-header>
+    <header class="sk-page-header">…</header>
+    <main class="sk-page-main">…</main>
+</sk-page>
+```
+
+[See Vue docs →](/components/page)
+
+---
+
+### sk-group
+
+**Tag:** `<sk-group>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `orientation` | horizontal, vertical | horizontal |
+
+**Example:**
+
+```html
+<sk-group>
+    <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>
+</sk-group>
+```
+
+[See Vue docs →](/components/group)
+
+---
+
+### sk-skeleton
+
+**Tag:** `<sk-skeleton>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `variant` | text, circular, rectangular, square | text |
+| `animation` | shimmer, pulse, none | shimmer |
+
+Note: width and height are set via inline `style` — there are no attribute equivalents.
+
+**Example:**
+
+```html
+<sk-skeleton variant="rectangular" animation="shimmer"
+             style="width: 200px; height: 40px;"></sk-skeleton>
+```
+
+[See Vue docs →](/components/skeleton)
+
+---
+
+### sk-progress
+
+**Tag:** `<sk-progress>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `size` | xs, sm, md, lg, xl | md |
+| `indeterminate` | Boolean presence | off |
+
+Also set the native `value` and `max` attributes.
+
+**Example:**
+
+```html
+<sk-progress kind="primary" size="sm" value="40" max="100"></sk-progress>
+```
+
+[See Vue docs →](/components/progress)
+
+---
+
+### sk-spinner
+
+**Tag:** `<sk-spinner>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | primary |
+| `size` | xs, sm, md, lg, xl | md |
+| `variant` | circular, dots, crosshair | circular |
+
+Note: the custom-element form does not inject the inner arc/dot DOM that the static helper
+and Vue component emit. Add `role="status"` and `aria-label="Loading"` manually.
+
+**Example:**
+
+```html
+<sk-spinner kind="accent" size="lg" variant="circular"
+            role="status" aria-label="Loading"></sk-spinner>
+```
+
+[See Vue docs →](/components/spinner)
+
+---
+
+### sk-navbar
+
+**Tag:** `<sk-navbar>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `sticky` | Boolean presence | on (sticky by default in class API) |
+
+Note: the `sk-sticky` class is applied by default via the static helper when `sticky !== false`.
+In the custom-element form, `sticky` is a boolean attribute — include it to enable, omit to disable.
+
+**Example:**
+
+```html
+<sk-navbar kind="neutral" sticky>
+    <div class="sk-navbar-content">
+        <div class="sk-navbar-brand">MySite</div>
+        <div class="sk-navbar-nav">…</div>
+    </div>
+</sk-navbar>
+```
+
+[See Vue docs →](/components/navbar)
+
+---
+
+### sk-toolbar
+
+**Tag:** `<sk-toolbar>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `orientation` | horizontal, vertical | horizontal |
+
+Add `role="toolbar"`.
+
+**Example:**
+
+```html
+<sk-toolbar kind="neutral" 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>
+</sk-toolbar>
+```
+
+[See Vue docs →](/components/toolbar)
+
+---
+
+### sk-sidebar
+
+**Tag:** `<sk-sidebar>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `side` | left, right | left |
+| `dense` | Boolean presence | off |
+
+Drawer open/close is Vue-only. The custom-element form is always visible.
+
+**Example:**
+
+```html
+<sk-sidebar kind="neutral">
+    <nav>…</nav>
+</sk-sidebar>
+```
+
+[See Vue docs →](/components/sidebar)
+
+---
+
+### sk-breadcrumbs
+
+**Tag:** `<sk-breadcrumbs>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+
+Add `aria-label="Breadcrumbs"`.
+
+**Example:**
+
+```html
+<sk-breadcrumbs kind="neutral" aria-label="Breadcrumbs">
+    <ol>
+        <li><a href="/">Home</a></li>
+        <li aria-current="page">Docs</li>
+    </ol>
+</sk-breadcrumbs>
+```
+
+[See Vue docs →](/components/breadcrumbs)
+
+---
+
+### sk-pagination
+
+**Tag:** `<sk-pagination>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+
+Add `aria-label="Pagination"`.
+
+**Example:**
+
+```html
+<sk-pagination kind="neutral" aria-label="Pagination">
+    <button class="sk-button sk-neutral" type="button">
+        <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">›</span>
+    </button>
+</sk-pagination>
+```
+
+[See Vue docs →](/components/pagination)
+
+---
+
+### sk-tag
+
+**Tag:** `<sk-tag>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `size` | xs, sm, md, lg, xl | md |
+| `variant` | solid, outline, ghost | solid |
+| `removable` | Boolean presence | off |
+
+Note: content should be wrapped in `<span class="sk-tag-content">` for correct inner spacing.
+
+**Example:**
+
+```html
+<sk-tag kind="accent" size="sm" variant="outline">
+    <span class="sk-tag-content">Beta</span>
+</sk-tag>
+```
+
+[See Vue docs →](/components/tag)
+
+---
+
+### sk-avatar
+
+**Tag:** `<sk-avatar>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `size` | xs, sm, md, lg, xl | md |
+
+Note: there is no `shape` attribute — the Vue component does not expose a shape prop.
+Place the inner content (img, initials span, or fallback icon) as children.
+
+**Example:**
+
+```html
+<sk-avatar kind="primary" size="lg">
+    <img src="/avatar.jpg" alt="User" class="sk-avatar-image" />
+</sk-avatar>
+```
+
+[See Vue docs →](/components/avatar)
+
+---
+
+### sk-field
+
+**Tag:** `<sk-field>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `label-position` | top, left, right | top |
+| `has-error` | Boolean presence | off |
+
+**Example:**
+
+```html
+<sk-field label-position="top">
+    <label class="sk-field-label" for="email">Email</label>
+    <div class="sk-field-input-wrapper">
+        <input class="sk-input sk-neutral" id="email" type="email" />
+    </div>
+</sk-field>
+```
+
+[See Vue docs →](/components/field)
+
+---
+
+### sk-table
+
+**Tag:** `<sk-table>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `variant` | default, (others) | default |
+| `striped` | Boolean presence | off |
+| `hoverable` | Boolean presence | on by default (omit to disable via class: don't add `sk-hoverable`) |
+| `bordered` | Boolean presence | on by default |
+| `inner-borders` | Boolean presence | off (inner borders suppressed by default) |
+| `dark-background` | Boolean presence | off |
+| `subtle` | Boolean presence | off |
+
+Note: the custom-element form targets the `<table>` directly. The `sk-table-wrapper` div
+is a class-API / static-helper construct — it's not injected automatically for custom elements.
+
+**Example:**
+
+```html
+<sk-table kind="neutral" striped>
+    <thead><tr><th>Name</th><th>Role</th></tr></thead>
+    <tbody><tr><td>Alice</td><td>Engineer</td></tr></tbody>
+</sk-table>
+```
+
+[See Vue docs →](/components/table)
+
+---
+
+### sk-tooltip
+
+**Tag:** `<sk-tooltip>`
+
+**Attributes:**
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `kind` | neutral, primary, accent, info, success, warning, danger | neutral |
+| `variant` | solid, outline | solid |
+| `placement` | top, right, bottom, left | top |
+
+Add `role="tooltip"`. The Vue version includes trigger management and floating-UI positioning —
+the custom-element form is for static pre-positioned tooltip markup only.
+
+**Example:**
+
+```html
+<sk-tooltip kind="neutral" placement="top" role="tooltip">
+    Click to expand
+</sk-tooltip>
+```
+
+[See Vue docs →](/components/tooltip)
+
+---
+
+## Form controls: class-only {#form-controls}
+
+The following 12 components **do not** have a custom-element form and require the class API:
+Button, Input, Textarea, Select, Slider, ColorPicker, Checkbox, Radio, Switch, NumberInput,
+TagsInput, Dropdown.
+
+Use the [class API](./class-api.md) for all 12 of these components.
+
+# Static Helpers Reference
+
+The `/static` subpath exports typed helper functions that generate Sleekspace HTML strings.
+They're intended for Node-based SSGs and build scripts where you want type-safe component
+output without importing Vue or shipping a runtime dependency.
+
+Each helper returns a `string` of plain HTML — zero side effects, zero global state.
+
+## Installation
+
+```bash
+npm install @skewedaspect/sleekspace-ui
+```
+
+The CSS is a separate import:
+
+```typescript
+// In your bundler entry or HTML:
+import '@skewedaspect/sleekspace-ui/style';
+// or link the compiled CSS directly in your HTML
+```
+
+## Import
+
+```typescript
+import { panel, button, alert, text, escapeAttr } from '@skewedaspect/sleekspace-ui/static';
+```
+
+All 31 component helpers plus utilities are exported from this single entry point.
+
+## Helper signature
+
+Every component helper has the same shape:
+
+```typescript
+function helperName(props?: Props, children?: string): string
+```
+
+- `props` — typed props object. All properties are optional with sensible defaults.
+- `children` — inner HTML string. Pass pre-escaped content or use the `text()` utility.
+- Returns — a complete HTML string for the component's root element.
+
+Container helpers (panel, card, etc.) include children in the output. Void helpers
+(input, slider, color-picker) ignore children.
+
+---
+
+## Utilities
+
+### `text(value)`
+
+Escapes a plain string for safe HTML text content. Use whenever interpolating user-controlled
+or data-driven strings into HTML.
+
+```typescript
+import { text, panel } from '@skewedaspect/sleekspace-ui/static';
+
+const html = panel({}, `<p>${ text(userInput) }</p>`);
+```
+
+### `escapeAttr(value)`
+
+Escapes a string for use inside an HTML attribute value (double-quoted).
+
+```typescript
+import { escapeAttr } from '@skewedaspect/sleekspace-ui/static';
+
+const safe = `data-id="${ escapeAttr(rawId) }"`;
+```
+
+### `composeClasses(spec, props)`
+
+Low-level class composition utility. Takes a `ClassSpec` describing how props map to modifier
+classes, returns the space-separated class string. Useful when you need class output without
+a full helper.
+
+```typescript
+import { composeClasses } from '@skewedaspect/sleekspace-ui/static';
+
+const classes = composeClasses({ base: 'sk-panel', kind: true }, { kind: 'primary' });
+// → "sk-panel sk-primary"
+```
+
+### `render(spec, props, children)`
+
+Generic renderer used internally by the thin-wrapper helpers (panel, card, progress, etc.).
+Takes a `RenderSpec` and emits the class-API HTML string. Useful for building custom helpers
+that follow the same class composition rules.
+
+```typescript
+import { render } from '@skewedaspect/sleekspace-ui/static';
+
+const html = render(
+    { tag: 'div', classSpec: { base: 'sk-panel', kind: true }, extraAttrs: { role: 'region' } },
+    { kind: 'accent' },
+    '<p>Custom region</p>'
+);
+// → '<div class="sk-panel sk-accent" role="region"><p>Custom region</p></div>'
+```
+
+---
+
+## Framework Examples
+
+### VitePress
+
+Use inside a `transformHtml` hook or a custom markdown-it plugin to render Sleekspace
+components inside `.md` files.
+
+```typescript
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress';
+import { panel } from '@skewedaspect/sleekspace-ui/static';
+
+export default defineConfig({
+    transformHtml(code) {
+        return code.replace(/<sk-callout kind="([^"]+)">([\s\S]*?)<\/sk-callout>/g, (_, kind, content) =>
+            panel({ kind }, content)
+        );
+    },
+});
+```
+
+Or add a custom markdown-it fence renderer:
+
+```typescript
+// .vitepress/config.ts
+import markdownItSleekspace from './plugins/markdownItSleekspace';
+
+export default defineConfig({
+    markdown: {
+        config(md) {
+            md.use(markdownItSleekspace);
+        },
+    },
+});
+```
+
+---
+
+### Astro
+
+Import directly in `.astro` component files. Astro renders these at build time — no Vue runtime needed.
+
+```astro
+---
+import { panel, button } from '@skewedaspect/sleekspace-ui/static';
+import '@skewedaspect/sleekspace-ui/style';
+
+const callout = panel(
+    { kind: 'accent', size: 'lg' },
+    `<p>Build-time rendered with no runtime cost.</p>`
+);
+---
+
+<Fragment set:html={callout} />
+```
+
+For reuse across pages, wrap in a `.astro` component:
+
+```astro
+---
+// src/components/Callout.astro
+import { panel } from '@skewedaspect/sleekspace-ui/static';
+const { kind = 'neutral', size = 'md' } = Astro.props;
+const html = panel({ kind, size }, await Astro.slots.render('default'));
+---
+<Fragment set:html={html} />
+```
+
+---
+
+### 11ty
+
+Register as a paired shortcode in `.eleventy.js`:
+
+```javascript
+// .eleventy.js
+const { panel, button, alert } = require('@skewedaspect/sleekspace-ui/static');
+
+module.exports = function(eleventyConfig) {
+    eleventyConfig.addPairedShortcode('panel', (content, kind = 'neutral', size = 'md') =>
+        panel({ kind, size }, content)
+    );
+
+    eleventyConfig.addPairedShortcode('alert', (content, kind = 'info') =>
+        alert({ kind }, content)
+    );
+
+    eleventyConfig.addShortcode('button', (label, kind = 'primary', href) =>
+        button({ kind, href }, label)
+    );
+};
+```
+
+Then in your Nunjucks / Liquid templates:
+
+```njk
+{% panel "primary", "lg" %}
+    <p>This panel is rendered at build time.</p>
+{% endpanel %}
+```
+
+---
+
+### Vanilla Node build script
+
+```typescript
+import { writeFileSync } from 'fs';
+import { panel, navBar, button, text } from '@skewedaspect/sleekspace-ui/static';
+
+const nav = navBar(
+    { kind: 'neutral', sticky: true, brand: `<span>${ text('MySite') }</span>` },
+    `<a href="/docs">Docs</a>`
+);
+
+const hero = panel({ kind: 'primary', size: 'xl' },
+    `<h1>Hello world</h1>`
+    + button({ kind: 'accent', size: 'lg' }, text('Get started'))
+);
+
+const page = `<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="/sleekspace-ui.css" />
+</head>
+<body>
+    ${ nav }
+    <main>${ hero }</main>
+</body>
+</html>`;
+
+writeFileSync('dist/index.html', page);
+```
+
+---
+
+## Component Helper Reference
+
+All 31 helpers are documented below with their props and actual emitted HTML output.
+
+---
+
+### panel
+
+```typescript
+panel(props?: PanelStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkPanelKind` | `'neutral'` | Kind color |
+| `size` | `SkPanelSize` | `'md'` | Corner decoration size |
+| `corners` | `SkPanelCorner[]` | `['bottom-right']` | Which corners are beveled |
+| `decorationCorner` | `SkPanelCorner` | `'bottom-right'` | Which corner shows accent stripe |
+| `noBorder` | `boolean` | `false` | Remove border |
+| `noDecoration` | `boolean` | `false` | Hide accent stripe |
+| `baseColor` | `string` | — | Override via `--sk-panel-color-base` |
+
+**Output:**
+
+```html
+<div class="sk-panel sk-neutral sk-md sk-cut-bottom-right sk-decoration-bottom-right">
+    <!-- children -->
+</div>
+```
+
+---
+
+### card
+
+```typescript
+card(props?: CardStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkCardKind` | `'neutral'` | Kind color |
+| `baseColor` | `string` | — | Override via `--sk-panel-color-base` |
+
+**Output:**
+
+```html
+<div class="sk-card sk-neutral"><!-- children --></div>
+```
+
+---
+
+### alert {#alert}
+
+```typescript
+alert(props?: AlertStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkAlertKind` | `'info'` | Kind color |
+| `subtle` | `boolean` | `false` | Lower-contrast variant |
+| `icon` | `string \| false` | `undefined` | Custom icon HTML, `false` to suppress, or omit for auto |
+| `baseColor` | `string` | — | Override via `--sk-alert-color-base` |
+| `textColor` | `string` | — | Override via `--sk-alert-fg` |
+
+When `icon` is omitted, icons are auto-selected for feedback kinds (info, success, warning, danger).
+Non-feedback kinds (neutral, primary, accent) emit no icon container. Pass `icon: false` to
+suppress the icon on a feedback kind. Pass `icon: '<svg>…</svg>'` for a custom icon.
+
+**Output (info kind — default):**
+
+```html
+<div class="sk-alert sk-info" role="alert">
+    <div class="sk-alert-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"><!-- children --></div>
+</div>
+```
+
+**Output (neutral kind — no icon):**
+
+```html
+<div class="sk-alert sk-neutral" role="alert">
+    <div class="sk-alert-content"><!-- children --></div>
+</div>
+```
+
+**Output (icon: false):**
+
+```html
+<div class="sk-alert sk-success" role="alert">
+    <div class="sk-alert-content"><!-- children --></div>
+</div>
+```
+
+---
+
+### divider
+
+```typescript
+divider(props?: DividerStaticProps): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'neutral'` | Kind color |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout axis |
+| `size` | `ComponentSize` | `'md'` | Line thickness |
+| `variant` | `'subtle'` | — | Reduced-contrast variant |
+
+Note: divider renders as an `<hr>` element, not a `<div>`.
+
+**Output:**
+
+```html
+<hr class="sk-divider sk-horizontal sk-neutral sk-md" role="separator">
+```
+
+---
+
+### page
+
+```typescript
+page(props?: PageStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fixedHeader` | `boolean` | `false` | Stick header to viewport top |
+| `fixedFooter` | `boolean` | `false` | Stick footer to viewport bottom |
+| `flush` | `boolean` | `false` | Remove outer padding |
+| `sidebarMode` | `SkPagePanelMode` | — | Sidebar panel mode |
+| `asideMode` | `SkPagePanelMode` | — | Aside panel mode |
+
+**Output:**
+
+```html
+<div class="sk-page"><!-- children --></div>
+```
+
+---
+
+### group
+
+```typescript
+group(props?: GroupStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex direction |
+
+**Output:**
+
+```html
+<div class="sk-group sk-horizontal"><!-- children --></div>
+```
+
+---
+
+### skeleton {#skeleton}
+
+```typescript
+skeleton(props?: SkeletonStaticProps): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'text' \| 'circular' \| 'rectangular' \| 'square'` | `'text'` | Shape preset |
+| `animation` | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation style |
+| `width` | `string` | — | CSS width (e.g. `'200px'`, `'100%'`) — emitted as inline style |
+| `height` | `string` | — | CSS height — emitted as inline style |
+
+For `circular` and `square` variants, if only `width` is set, `height` is automatically
+set to the same value.
+
+**Output (text, defaults):**
+
+```html
+<div class="sk-skeleton sk-text sk-shimmer"></div>
+```
+
+**Output (rect with dimensions):**
+
+```html
+<div class="sk-skeleton sk-rectangular sk-shimmer" style="width: 200px; height: 40px;"></div>
+```
+
+**Output (animation: 'none'):**
+
+```html
+<div class="sk-skeleton sk-text"></div>
+```
+
+---
+
+### progress
+
+```typescript
+progress(props?: ProgressStaticProps): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'neutral'` | Kind color |
+| `size` | `SkProgressSize` | `'md'` | Bar height |
+| `indeterminate` | `boolean` | `false` | Animated indeterminate state |
+| `value` | `number \| null` | — | Progress value (native attribute) |
+| `max` | `number` | — | Max value (native attribute) |
+
+**Output:**
+
+```html
+<progress class="sk-progress sk-neutral sk-md" value="40" max="100"></progress>
+```
+
+---
+
+### spinner {#spinner}
+
+```typescript
+spinner(props?: SpinnerStaticProps): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'primary'` | Kind color |
+| `size` | `SkSpinnerSize` | `'md'` | Spinner diameter |
+| `variant` | `'circular' \| 'dots' \| 'crosshair'` | `'circular'` | Visual style |
+| `color` | `string` | — | Override via `--sk-spinner-color` inline style |
+
+Always emits `role="status"`, `aria-live="polite"`, `aria-label="Loading"`. Inner DOM
+varies by variant.
+
+**Output (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>
+```
+
+**Output (dots):**
+
+```html
+<div class="sk-spinner sk-primary sk-md 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>
+```
+
+**Output (crosshair):**
+
+```html
+<div class="sk-spinner sk-primary sk-md sk-variant-crosshair"
+     role="status" aria-live="polite" aria-label="Loading">
+    <div class="sk-crosshair-loader"></div>
+</div>
+```
+
+---
+
+### navBar {#navbar}
+
+```typescript
+navBar(props?: NavBarStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkNavBarKind` | `'neutral'` | Kind color |
+| `sticky` | `boolean` | `true` | Apply `sk-sticky` class |
+| `leading` | `string` | — | HTML for leading slot (sidebar toggle, etc.) |
+| `brand` | `string` | — | HTML for brand slot (logo / site name) |
+| `actions` | `string` | — | HTML for actions slot (right-aligned CTAs / user menu) |
+| `baseColor` | `string` | — | Override via `--sk-navbar-color-base` |
+| `textColor` | `string` | — | Override via `--sk-navbar-fg` |
+
+`children` maps to the nav links slot (`sk-navbar-nav`). Each slot region (`leading`, `brand`,
+nav links, `actions`) is only emitted when it has content.
+
+**Output (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">
+            <a href="/docs">Docs</a>
+        </div>
+    </div>
+</nav>
+```
+
+**Output (all slots):**
+
+```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"><!-- nav links --></div>
+        <div class="sk-navbar-actions"><!-- user menu --></div>
+    </div>
+</nav>
+```
+
+---
+
+### toolbar {#toolbar}
+
+```typescript
+toolbar(props?: ToolbarStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkToolbarKind` | — | Kind color |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout axis |
+| `corners` | `SkToolbarCorner[]` | `['top-left', 'top-right', 'bottom-right', 'bottom-left']` | Beveled corners |
+| `baseColor` | `string` | — | Override via `--sk-toolbar-color-base` |
+| `textColor` | `string` | — | Override via `--sk-toolbar-fg` |
+
+Always emits `role="toolbar"`. Orientation uses `sk-horizontal` / `sk-vertical` directly.
+By default all four corners are cut.
+
+**Output (defaults):**
+
+```html
+<div class="sk-toolbar sk-horizontal sk-cut-top-left sk-cut-top-right sk-cut-bottom-right sk-cut-bottom-left"
+     role="toolbar">
+    <!-- children -->
+</div>
+```
+
+**Output (with kind, no corners):**
+
+```html
+<div class="sk-toolbar sk-neutral sk-horizontal" role="toolbar">
+    <!-- children -->
+</div>
+```
+
+---
+
+### sidebar
+
+```typescript
+sidebar(props?: SidebarStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkSidebarKind` | `'neutral'` | Kind color |
+| `side` | `'left' \| 'right'` | `'left'` | Mount side |
+| `dense` | `boolean` | `false` | Compact item padding |
+| `width` | `string` | — | CSS width (not reflected in classes) |
+| `baseColor` | `string` | — | Override via `--sk-sidebar-color-base` |
+
+Children are wrapped in `sk-sidebar-nav`. The helper emits the full inner panel structure.
+
+**Output (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"><!-- children --></nav>
+        </div>
+    </div>
+</aside>
+```
+
+**Output (right sidebar):**
+
+```html
+<aside class="sk-sidebar sk-neutral sk-sidebar-right">
+    <div class="sk-panel sk-neutral sk-md sk-cut-bottom-left sk-decoration-bottom-left sk-sidebar-panel">
+        <div class="sk-panel-scroll-content">
+            <nav class="sk-sidebar-nav"><!-- children --></nav>
+        </div>
+    </div>
+</aside>
+```
+
+---
+
+### breadcrumbs
+
+```typescript
+breadcrumbs(props?: BreadcrumbsStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkBreadcrumbsKind` | `'neutral'` | Kind color |
+| `separator` | `string` | — | Separator character/HTML |
+| `baseColor` | `string` | — | Custom color override |
+
+**Output:**
+
+```html
+<nav class="sk-breadcrumbs sk-neutral" aria-label="Breadcrumbs"><!-- children --></nav>
+```
+
+---
+
+### pagination
+
+```typescript
+pagination(props?: PaginationStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkPaginationKind` | `'neutral'` | Kind color |
+| `baseColor` | `string` | — | Custom color override |
+
+**Output:**
+
+```html
+<nav class="sk-pagination sk-neutral" aria-label="Pagination"><!-- children --></nav>
+```
+
+---
+
+### tag {#tag}
+
+```typescript
+tag(props?: TagStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'neutral'` | Kind color |
+| `variant` | `SkTagVariant` | `'solid'` | Visual style |
+| `size` | `SkTagSize` | `'md'` | Tag size |
+| `removable` | `boolean` | `false` | Show remove button |
+| `baseColor` | `string` | — | Override via `--sk-tag-color-base` |
+| `textColor` | `string` | — | Override via `--sk-tag-fg` |
+
+Content is always wrapped in `sk-tag-content`. The remove button is only emitted when
+`removable: true`.
+
+**Output (simple):**
+
+```html
+<span class="sk-tag sk-neutral sk-solid sk-md">
+    <span class="sk-tag-content">Label</span>
+</span>
+```
+
+**Output (removable):**
+
+```html
+<span class="sk-tag sk-neutral sk-solid sk-md sk-removable">
+    <span class="sk-tag-content">Label</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>
+```
+
+---
+
+### avatar {#avatar}
+
+```typescript
+avatar(props?: AvatarStaticProps): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `ComponentKind` | `'neutral'` | Kind color |
+| `size` | `SkAvatarSize` | `'md'` | Avatar size |
+| `src` | `string` | — | Image URL — highest priority |
+| `alt` | `string` | `''` | Image alt text (used with `src`) |
+| `initials` | `string` | — | Up to 2 chars shown when no `src` — second priority |
+| `baseColor` | `string` | — | Override via `--sk-avatar-color-base` |
+| `textColor` | `string` | — | Override via `--sk-avatar-fg` |
+
+Note: no `shape` prop — the Vue component doesn't expose one.
+
+Fallback priority: `src` → `initials` → default person icon SVG.
+
+**Output (with src):**
+
+```html
+<div class="sk-avatar sk-neutral sk-md">
+    <img src="/avatar.jpg" alt="User name" class="sk-avatar-image">
+</div>
+```
+
+**Output (with initials "John Doe" → "JO"):**
+
+```html
+<div class="sk-avatar sk-primary sk-md">
+    <span class="sk-avatar-initials">JO</span>
+</div>
+```
+
+**Output (default fallback):**
+
+```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>
+```
+
+---
+
+### field {#field}
+
+```typescript
+field(props?: FieldStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Label text |
+| `description` | `string` | — | Help text below the input (suppressed when `error` is set) |
+| `error` | `string` | — | Error message — also triggers `sk-has-error` class |
+| `required` | `boolean` | `false` | Adds `*` span to label |
+| `labelPosition` | `SkFieldLabelPosition` | `'top'` | Label placement |
+| `id` | `string` | — | Field ID — forwarded to `label[for]` and error/description `id` attrs |
+
+The `sk-field-input-wrapper` div is always emitted. Label, description, and error paragraphs
+are only emitted when their props are set. Description is suppressed when an error is present.
+
+**Output (label + input):**
+
+```html
+<div class="sk-field sk-label-top">
+    <label for="email" class="sk-field-label">Email</label>
+    <div class="sk-field-input-wrapper"><!-- children --></div>
+</div>
+```
+
+**Output (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"><!-- children --></div>
+    <p id="email-error" class="sk-field-error">Please enter a valid email.</p>
+</div>
+```
+
+**Output (required + description):**
+
+```html
+<div class="sk-field sk-label-top">
+    <label for="bio" class="sk-field-label">Bio<span class="sk-field-required">*</span></label>
+    <div class="sk-field-input-wrapper"><!-- children --></div>
+    <p id="bio-description" class="sk-field-description">Max 160 characters.</p>
+</div>
+```
+
+---
+
+### table {#table}
+
+```typescript
+table(props?: TableStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkTableKind` | `'neutral'` | Kind color |
+| `variant` | `SkTableVariant` | `'default'` | Visual variant |
+| `striped` | `boolean` | `false` | Alternating row backgrounds |
+| `hoverable` | `boolean` | `true` | Row hover highlight |
+| `bordered` | `boolean` | `true` | Outer border |
+| `innerBorders` | `boolean` | `false` | Inner cell borders (suppressed by default) |
+| `darkBackground` | `boolean` | `false` | Dark background on wrapper |
+| `subtle` | `boolean` | `false` | Reduced contrast on wrapper + table |
+| `baseColor` | `string` | — | Override via `--sk-table-color-base` |
+| `textColor` | `string` | — | Override via `--sk-table-fg` |
+
+Emits a `sk-table-wrapper` div wrapping a `<table>`. Both elements receive modifier classes.
+
+**Output (defaults — hoverable + bordered + no-inner-borders):**
+
+```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 + tbody -->
+    </table>
+</div>
+```
+
+**Output (striped, inner borders enabled, dark background):**
+
+```html
+<div class="sk-table-wrapper sk-table-wrapper-neutral sk-dark-background">
+    <table class="sk-table sk-neutral sk-default sk-striped sk-hoverable sk-bordered">
+        <!-- thead + tbody -->
+    </table>
+</div>
+```
+
+---
+
+### tooltip
+
+```typescript
+tooltip(props?: TooltipStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkTooltipKind` | `'neutral'` | Kind color |
+| `variant` | `SkTooltipVariant` | `'solid'` | Visual style |
+| `placement` | `SkTooltipSide` | `'top'` | Tooltip position |
+| `baseColor` | `string` | — | Custom color override |
+
+**Output:**
+
+```html
+<div class="sk-tooltip sk-neutral sk-solid sk-placement-top" role="tooltip">
+    <!-- children -->
+</div>
+```
+
+---
+
+### button
+
+```typescript
+button(props?: ButtonStaticProps, children?: string): string
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `kind` | `SkButtonKind` | `'neutral'` | Kind color |
+| `size` | `SkButtonSize` | `'md'` | Button size |
+| `variant` | `SkButtonVariant` | `'solid'` | Visual style |
+| `type` | `SkButtonType` | `'button'` | HTML button type |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `loading` | `boolean` | `false` | Loading state (adds `aria-busy="true"`) |
+| `pressed` | `boolean` | `false` | Pressed state (adds `aria-pressed="true"`) |
+| `dense` | `boolean` | `false` | Compact padding |
+| `href` | `string` | — | Render as `<a>` instead of `<button>` |
+
+Children are always wrapped in `sk-button-chrome`.
+
+**Output (button):**
+
+```html
+<button class="sk-button sk-neutral sk-md sk-solid" type="button">
+    <span class="sk-button-chrome">Label</span>
+</button>
+```
+
+**Output (anchor):**
+
+```html
+<a class="sk-button sk-accent sk-md sk-outline" href="/docs">
+    <span class="sk-button-chrome">Read the docs</span>
+</a>
+```
+
+---
+
+### input
+
+```typescript
+input(props?: InputStaticProps): string
+```
+
+**Props:** `kind`, `size`, `type`, `value`, `placeholder`, `name`, `id`, `disabled`, `readonly`, `required`
+
+**Output:**
+
+```html
+<input class="sk-input sk-neutral sk-md" type="text" />
+```
+
+---
+
+### textarea
+
+```typescript
+textarea(props?: TextareaStaticProps, children?: string): string
+```
+
+**Props:** `kind`, `size`, `placeholder`, `name`, `id`, `disabled`, `readonly`, `required`
+
+**Output:**
+
+```html
+<textarea class="sk-textarea sk-neutral sk-md"></textarea>
+```
+
+---
+
+### select
+
+```typescript
+select(props?: SelectStaticProps, children?: string): string
+```
+
+**Props:** `kind`, `size`, `name`, `id`, `disabled`, `required`
+
+Children are `<option>` elements composed by the caller.
+
+**Output:**
+
+```html
+<select class="sk-select sk-neutral sk-md">
+    <option value="">Choose…</option>
+    <option value="a">Option A</option>
+</select>
+```
+
+---
+
+### slider
+
+```typescript
+slider(props?: SliderStaticProps): string
+```
+
+**Props:** `kind`, `size`, `min`, `max`, `step`, `value`, `name`, `disabled`
+
+Single thumb only. All numeric props are accepted as strings.
+
+**Output:**
+
+```html
+<input class="sk-slider sk-neutral sk-md" type="range" min="0" max="100" value="40" />
+```
+
+---
+
+### colorPicker
+
+```typescript
+colorPicker(props?: ColorPickerStaticProps): string
+```
+
+**Props:** `size`, `value`, `name`, `disabled`
+
+Note: no `kind` prop — ColorPicker has no kind modifier.
+
+**Output:**
+
+```html
+<input class="sk-color-picker sk-md" type="color" value="#c4842d" />
+```
+
+---
+
+### checkbox
+
+```typescript
+checkbox(props?: CheckboxStaticProps, children?: string): string
+```
+
+**Props:** `kind`, `size`, `checked`, `disabled`, `required`, `name`
+
+Children become the label text inside `sk-checkbox-label`.
+
+**Output:**
+
+```html
+<label class="sk-checkbox sk-neutral sk-md">
+    <input type="checkbox" />
+    <span class="sk-checkbox-box"></span>
+    <span class="sk-checkbox-label">I agree to the terms</span>
+</label>
+```
+
+---
+
+### radio
+
+```typescript
+radio(props?: RadioStaticProps, children?: string): string
+```
+
+**Props:** `kind`, `size`, `name`, `value`, `checked`, `disabled`, `required`
+
+**Output:**
+
+```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>
+```
+
+---
+
+### switchInput
+
+```typescript
+switchInput(props?: SwitchStaticProps, children?: string): string
+```
+
+Named `switchInput` because `switch` is a reserved word in TypeScript/JavaScript.
+
+**Props:** `kind`, `size`, `name`, `checked`, `disabled`, `required`
+
+**Output:**
+
+```html
+<label class="sk-switch sk-neutral sk-md">
+    <input type="checkbox" />
+    <span class="sk-switch-track">
+        <span class="sk-switch-thumb"></span>
+    </span>
+    <span class="sk-switch-label">Enable notifications</span>
+</label>
+```
+
+---
+
+### numberInput
+
+```typescript
+numberInput(props?: NumberInputStaticProps): string
+```
+
+Stepper buttons are intentionally omitted — they require JS.
+
+**Props:** `kind`, `size`, `value`, `min`, `max`, `step`, `name`, `placeholder`, `disabled`, `readonly`, `required`
+
+**Output:**
+
+```html
+<div class="sk-number-input-wrapper sk-neutral sk-md">
+    <input class="sk-number-input-field" type="number" />
+</div>
+```
+
+---
+
+### tagsInput
+
+```typescript
+tagsInput(props?: TagsInputStaticProps, children?: string): string
+```
+
+**Props:** `kind`, `size`, `disabled`
+
+Children are pre-composed `tag()` elements. The add/remove chip behavior requires Vue.
+
+**Output:**
+
+```html
+<div class="sk-tags-input sk-neutral sk-md">
+    <!-- tag chip elements -->
+</div>
+```
+
+---
+
+### dropdown
+
+```typescript
+dropdown(props: DropdownStaticProps, children?: string): string
+```
+
+Note: `summary` is a **required** prop.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `string` | — | **Required.** Text/HTML for the `<summary>` trigger |
+| `kind` | `SemanticKind` | `'neutral'` | Kind color |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size |
+| `open` | `boolean` | `false` | Initial open state |
+
+This is a disclosure widget (`<details>`), not a menu. No focus trap, no keyboard navigation.
+
+**Output:**
+
+```html
+<details class="sk-dropdown sk-neutral sk-md">
+    <summary>Options ▾</summary>
+    <!-- children -->
+</details>
+```
+
+---
+
+## Type safety notes
+
+All helpers export their props interface. Import them if you want to type your own wrapper:
+
+```typescript
+import type { PanelStaticProps } from '@skewedaspect/sleekspace-ui/static';
+
+function myPanel(props: PanelStaticProps, content: string): string {
+    return panel(props, content);
+}
+```
+
+# Pure-CSS Limitations
+
+Let's be direct: pure-CSS Sleekspace is not Sleekspace. It's the presentational subset — the
+parts that are just CSS talking to HTML structure. If you need interactivity, you need Vue.
+
+This page tells you exactly what that means so you can make the right call before you start.
+
+---
+
+## What's completely out of scope
+
+These components are Vue-only. There is no class-API, custom-element, or static-helper form
+for them, and there won't be — they fundamentally require JS state management.
+
+### Modal, Popover, ContextMenu, Toast
+
+All four require:
+- Portal/teleport rendering to a document-level container
+- Focus trapping and restoration
+- Escape-key and click-outside dismiss
+- ARIA attributes that change dynamically (`aria-expanded`, `aria-modal`)
+
+You cannot replicate a production-quality modal with CSS alone. Use the Vue components.
+
+### Tabs, Accordion, Collapsible, TreeView
+
+These are state machines:
+- Tabs track which panel is active, activate on click/keyboard, and update `aria-selected`
+- Accordion and Collapsible manage open/closed state and animate height
+- TreeView manages selection, expansion, keyboard navigation (arrow keys, Home/End)
+
+The `<details>` / CSS `:checked` tricks can approximate some of this for simple cases, but
+they break on complex trees, keyboard navigation, and multi-open scenarios. The Vue versions
+are correct; the CSS approximations are not.
+
+### Listbox, ScrollArea, Splitter
+
+- **Listbox** — needs selection state, keyboard navigation, and `aria-activedescendant`
+- **ScrollArea** — provides custom scrollbars via overflow regions; the pure-CSS scroll
+  styling applies to native scrollbars, not the JS-managed virtualized variant
+- **Splitter** — requires pointer capture and drag tracking to resize panes
+
+---
+
+## What's in scope but reduced
+
+These components exist in the pure-CSS layer but are missing capabilities present in the
+Vue versions.
+
+### Slider — single thumb only
+
+The static helper and class API render `<input type="range">`, which is inherently single-thumb.
+The Vue `SkSlider` supports dual-thumb range selection via two overlapping range inputs managed
+in JS. There is no CSS-only dual-thumb solution.
+
+**What you get:** A fully styled single-thumb slider with kind + size modifiers.
+**What's missing:** `min`/`max` value range selection (dual thumb).
+
+### Dropdown — `<details>` disclosure, not a menu
+
+The static helper renders `<details class="sk-dropdown"><summary>…</summary>…</details>`.
+This gives you a zero-JS disclosure widget that opens and closes. It is **not** a menu:
+- No focus trap
+- No arrow-key navigation between items
+- No `role="menu"` / `role="menuitem"` semantics
+- Items don't get `aria-checked` or keyboard activation
+
+Use this for simple show/hide disclosure patterns. For actual menus (accessible, keyboard-navigable
+dropdowns), use the Vue `SkDropdown`.
+
+### Select — popup styling is Chromium-only
+
+The class API applies `sk-select` to a native `<select>`. The closed button state (the
+select trigger) is fully cross-browser styled. However, the open popup panel (the dropdown
+list of options) only supports `appearance: base-select` styling in Chromium-based browsers
+(Chrome, Edge) as of 2026. Firefox and Safari show the native OS popup.
+
+If cross-browser custom select styling matters, use the Vue `SkSelect` which uses a custom
+floating-UI panel in all browsers.
+
+### ColorPicker — native swatch only
+
+The static helper renders `<input type="color">`. This gives you a styled color swatch button
+that opens the browser's native color picker on click. It respects the `size` modifier.
+
+**What's missing:**
+- The OKLCH palette panel
+- Hex / RGB / HSL / OKLCH format switching
+- The alpha channel slider
+- Any kind of themed appearance inside the popup (that's browser chrome)
+
+Use Vue `SkColorPicker` for the full-featured picker.
+
+### Alert, Spinner, NavBar, Sidebar, Tag, Avatar, Field, Table — inner DOM not auto-injected by custom elements
+
+The static helpers and Vue components for these 8 components emit an inner DOM structure beyond
+the root element (icon wrappers, content wrappers, inner panels, etc.). The custom-element
+form applies CSS via attribute selectors but does **not** inject this inner DOM — you must
+write it yourself when using `<sk-alert>`, `<sk-spinner>`, etc. as custom elements.
+
+Use the [static helpers](./static-helpers.md) or [class API examples](./class-api.md) to see
+the expected inner structure for each component.
+
+---
+
+## Browser caveats
+
+### `corner-shape: bevel`
+
+Sleekspace's beveled corners use `corner-shape: bevel` (CSS Shapes Level 2). This is supported
+in modern Chrome and emerging in other engines. Older browsers fall back to `clip-path: polygon(…)`
+which preserves the visual shape but loses the border rendering on cut edges. The fallback is
+provided automatically — no author action needed.
+
+### `color-mix(in oklch, …)`
+
+Theme colors are computed with `color-mix()` in the OKLCH color space for perceptually uniform
+mixing. This requires a modern browser (Chrome 111+, Firefox 113+, Safari 16.2+). Older browsers
+see the fallback static color values baked into the CSS custom properties.
+
+### `:where(:not(…))` chains
+
+Default modifier behavior (e.g., applying `sk-neutral` styles when no `kind` attribute is
+set) uses zero-specificity `:where()` with negation chains. This requires browsers that
+support `:where()` — all evergreen browsers since 2021. IE11 is not supported and never will be.
+
+---
+
+## When to reach for Vue instead
+
+Use the pure-CSS layer when:
+- You're building a static site (VitePress, Astro, 11ty) and want Sleekspace visuals without JS
+- You need the CSS for a non-JS environment (email templates, print stylesheets)
+- You're prototyping layout and just need the styling primitives
+- You want the look of Sleekspace in a non-Vue app (React, Svelte, plain HTML)
+
+Reach for the Vue components when:
+- You need any interactive component (Modal, Tabs, Accordion, etc.)
+- You need a production-quality Dropdown with keyboard navigation
+- You need dual-thumb Slider
+- You need cross-browser custom Select styling
+- You need the full ColorPicker palette UI
+- You need form validation integration (Vue components emit update events and expose validation state)
+- You need theme switching at runtime (Vue components react to the reactive theme store)
+
+The answer isn't always "use Vue." For purely presentational output — especially build-time
+HTML generation — the pure-CSS layer is lighter and perfectly correct.
+
+
+---
+
+# AI & LLMs
+
+SleekSpace UI ships with LLM-friendly documentation files that make it easy for AI assistants like Claude, ChatGPT, GitHub Copilot, and Cursor to understand and help with the library.
+
+## Available Files
+
+Two documentation files are available, optimized for different use cases:
+
+| File | Size | Best For |
+|------|------|----------|
+| `llms.txt` | ~7 KB | Quick context, token-efficient prompts |
+| `llms-full.txt` | ~196 KB | Complete reference, in-depth help |
+
+**llms.txt** is a concise index with component summaries. It gives AI assistants enough context to understand what the library offers and how components work together.
+
+**llms-full.txt** is the complete reference. It includes all guide documentation, every component's usage examples, and full API reference tables with all props, slots, and events.
+
+## How to Use
+
+### AI-Powered IDEs (Claude Code, Cursor, Windsurf)
+
+Point your AI assistant to fetch the documentation from our docs site:
+
+- https://sleekspace.skewedaspect.com/llms.txt
+- https://sleekspace.skewedaspect.com/llms-full.txt
+
+Example: "Fetch https://sleekspace.skewedaspect.com/llms.txt and help me create a form with validation."
+
+### Web-Based AI (ChatGPT, Claude.ai)
+
+Direct the AI to read the documentation URLs:
+
+Example prompt:
+
+> "Read https://sleekspace.skewedaspect.com/llms.txt and then help me create a themed dashboard layout."
+
+### Paste Into Context
+
+For quick questions, copy the content of `llms.txt` and paste it into your conversation. For in-depth help with complex implementations, use `llms-full.txt`.
+
+## What's Included
+
+The documentation files contain:
+
+- **All guides** -- Installation, theming, design tokens, custom colors
+- **Every component** -- Usage examples and documentation for all 46 components
+- **Complete API reference** -- Props, slots, and events in structured tables
+- **Best practices** -- Common patterns and recommended approaches
+
+The files are auto-generated from the source documentation, so they stay in sync with the library.
+
+## Why This Matters
+
+AI assistants work best when they have accurate, up-to-date context about the tools you are using. With these files:
+
+- **Accurate help** -- AI responses are based on real documentation, not training data that may be outdated
+- **No hallucinations** -- Props, events, and usage patterns match what the library actually provides
+- **Better suggestions** -- AI can recommend appropriate components, theming approaches, and composition patterns
+- **Faster development** -- Get library-specific help without searching through documentation manually
+
+
+---
+
+
+# Components
+
+# SkAccordion
+
+A collapsible sections container for organizing content into expandable panels. Supports single or multiple open items with smooth animations. Built on RekaUI's Accordion primitive with full WAI-ARIA support.
+
+
+Use `v-model` to control which item is open. In single mode (default), only one item can be open at a time. Each `SkAccordionItem` requires a unique `value` prop.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const openItem = ref('item-1');
+</script>
+
+<template>
+    <SkAccordion v-model="openItem" kind="primary">
+        <SkAccordionItem value="item-1" title="What is SleekSpace UI?">
+            SleekSpace UI is a Vue 3 component library...
+        </SkAccordionItem>
+        <SkAccordionItem value="item-2" title="How do I install it?">
+            Install via npm...
+        </SkAccordionItem>
+        <SkAccordionItem value="item-3" title="Is it customizable?">
+            Yes! Every component supports custom colors...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```
+
+
+Set `type="multiple"` to allow multiple items open simultaneously. The `v-model` becomes an array of open item values.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const openItems = ref(['feature-1', 'feature-2']);
+</script>
+
+<template>
+    <SkAccordion v-model="openItems" type="multiple" kind="accent">
+        <SkAccordionItem value="feature-1" title="Theming">
+            Full theme support...
+        </SkAccordionItem>
+        <SkAccordionItem value="feature-2" title="Accessibility">
+            ARIA compliant...
+        </SkAccordionItem>
+        <SkAccordionItem value="feature-3" title="Performance">
+            Optimized animations...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```
+
+
+All seven semantic kinds adapt to your theme colors. The `kind` prop on SkAccordion is inherited by all child items, but individual items can override with their own `kind` prop.
+
+```vue
+<SkAccordion kind="neutral">
+    <SkAccordionItem value="n1" title="Neutral">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="primary">
+    <SkAccordionItem value="p1" title="Primary">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="accent">
+    <SkAccordionItem value="a1" title="Accent">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="success">
+    <SkAccordionItem value="s1" title="Success">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="warning">
+    <SkAccordionItem value="w1" title="Warning">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="danger">
+    <SkAccordionItem value="d1" title="Danger">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="info">
+    <SkAccordionItem value="i1" title="Info">Content</SkAccordionItem>
+</SkAccordion>
+```
+
+
+Override the kind with custom `baseColor` and `textColor` props. Supports hex, OKLCH, or any valid CSS color value.
+
+```vue
+<SkAccordion base-color="#8B5CF6" collapsible>
+    <SkAccordionItem value="c1" title="Custom Purple">
+        Using hex color #8B5CF6
+    </SkAccordionItem>
+</SkAccordion>
+
+<SkAccordion base-color="oklch(0.75 0.2 180)" collapsible>
+    <SkAccordionItem value="c2" title="Custom Teal">
+        Using OKLCH color
+    </SkAccordionItem>
+</SkAccordion>
+```
+
+
+Classic use case for accordions - frequently asked questions. Set `collapsible` in single mode to allow closing all items.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const faqOpen = ref('faq-1');
+</script>
+
+<template>
+    <SkAccordion v-model="faqOpen" kind="info" collapsible>
+        <SkAccordionItem value="faq-1" title="Do you offer a free trial?">
+            Yes! We offer a 14-day free trial...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-2" title="Can I cancel anytime?">
+            Absolutely. You can cancel your subscription...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-3" title="What payment methods do you accept?">
+            We accept all major credit cards...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-4" title="Is my data secure?">
+            Yes. We use bank-level encryption...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```
+
+
+### Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
+| type | "single" \| "multiple" | 'single' | false | Controls whether one or multiple accordion items can be open simultaneously.
+In 'single' mode, opening a new item automatically closes the previously open item.
+In 'multiple' mode, users can expand any number of items independently. |
+| modelValue | string \| string[] | undefined | false | The value(s) of currently open accordion item(s). Use with `v-model` for two-way binding.
+In 'single' mode, this is a string matching one item's `value` prop.
+In 'multiple' mode, this is an array of strings matching multiple items' `value` props. |
+| collapsible | boolean | false | false | When true and in 'single' mode, allows all items to be collapsed by clicking the open item again.
+When false, one item must always remain open (the first click selects, subsequent clicks don't collapse).
+This prop has no effect in 'multiple' mode where items are always independently collapsible. |
+| kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the accordion's header and border colors. The kind is automatically
+inherited by all child SkAccordionItem components unless they specify their own kind.
+Semantic kinds (neutral, primary, accent, etc.) adapt to your theme. |
+| disabled | boolean | false | false | When true, disables all accordion items. Items cannot be expanded or collapsed, and
+the accordion appears with reduced opacity. Individual items can also be disabled
+independently via their own `disabled` prop. |
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Container for SkAccordionItem components. Each item becomes a collapsible section. |
+
+### Events
+
+| Event | Description |
+|-------|-------------|
+| update:modelValue |  |
+
+
+---
+
+# SkAlert
+
+A feedback component for displaying informational messages. Each kind renders a corresponding icon (info circle, checkmark, warning triangle, or error cross) alongside the message content. Renders with `role="alert"` for screen reader announcements.
+
+
+Use alerts to provide feedback, display status, or draw attention to important information. Each kind includes an appropriate default icon.
+
+```vue
+<SkAlert kind="info">
+    This is an informational alert message. Use it to provide helpful information to users.
+</SkAlert>
+```
+
+
+Four semantic kinds with built-in icons: `info` for information, `success` for positive feedback, `warning` for caution, and `danger` for errors or critical messages.
+
+```vue
+<SkAlert kind="info">
+    <strong>Info:</strong> Your changes will be saved automatically.
+</SkAlert>
+
+<SkAlert kind="success">
+    <strong>Success:</strong> Your profile has been updated successfully.
+</SkAlert>
+
+<SkAlert kind="warning">
+    <strong>Warning:</strong> This action cannot be undone.
+</SkAlert>
+
+<SkAlert kind="danger">
+    <strong>Error:</strong> Failed to save changes. Please try again.
+</SkAlert>
+```
+
+
+Use `prominent` for critical messages that require immediate attention. Prominent alerts have stronger colors and increased visual weight.
+
+```vue
+<SkAlert kind="info" :prominent="true">
+    <strong>System Maintenance:</strong> The system will undergo scheduled maintenance on Sunday at 2 AM UTC.
+</SkAlert>
+
+<SkAlert kind="warning" :prominent="true">
+    <strong>Storage Limit:</strong> You're using 95% of your storage space.
+</SkAlert>
+```
+
+
+Alerts can contain any content including headings, paragraphs, lists, buttons, and links for comprehensive messaging.
+
+```vue
+<SkAlert kind="info">
+    <h4 class="font-semibold mb-2">New Features Available</h4>
+    <p class="mb-2">We've added several new features to improve your experience:</p>
+    <ul class="list-disc list-inside mb-3 space-y-1">
+        <li>Dark mode support</li>
+        <li>Keyboard shortcuts</li>
+        <li>Export to PDF</li>
+    </ul>
+    <SkButton size="sm" kind="info">Learn More</SkButton>
+</SkAlert>
+```
+
+
+Override the default icon using the `icon` slot for custom branding or specific message types.
+
+```vue
+<SkAlert kind="info">
+    <template #icon>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+        </svg>
+    </template>
+    <strong>Pro Tip:</strong> Use keyboard shortcut Ctrl+S to save your work quickly.
+</SkAlert>
+```
+
+
+Use `base-color` for any CSS color value. Provide `text-color` for optimal contrast, or it will default to the theme's neutral text color.
+
+```vue
+<SkAlert
+    base-color="oklch(0.65 0.25 280)"
+    text-color="white"
+>
+    <strong>Custom Purple:</strong> This alert uses a custom purple base color with white text.
+</SkAlert>
+
+<SkAlert
+    base-color="oklch(0.75 0.2 150)"
+    text-color="oklch(0.2 0.05 150)"
+>
     <strong>Custom Green:</strong> A custom green alert with manually specified text color.
 </SkAlert>
 
@@ -1399,6 +4489,22 @@ Use `base-color` for any CSS color value. Provide `text-color` for optimal contr
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'info' | false | Semantic kind that determines the alert's color scheme and default icon. Supports all
 semantic kinds (neutral, primary, accent, info, success, warning, danger) as well as
 direct color kinds (neon-blue, neon-purple, etc.). Default icons are provided for the
@@ -1535,7 +4641,8 @@ displaying initials or the fallback icon. |
 
 | Slot | Description |
 |------|-------------|
-| icon | Custom fallback icon displayed when no image or initials are provided. Defaults to a generic user silhouette icon. Use for bots, system users, or other non-person entities. |
+| icon | Custom fallback icon displayed when no image or initials are provided. Defaults to a generic
+  user silhouette icon. Use for bots, system users, or other non-person entities. |
 
 
 ---
@@ -1625,6 +4732,9 @@ Common usage patterns including e-commerce navigation, application settings, and
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
 | textColor | string | undefined | false |  |
 | baseColor | string | undefined | false |  |
 | kind | TSIndexedAccessType | 'neutral' | false | Semantic color kind that controls the appearance of breadcrumb links. The kind affects link colors
@@ -1633,6 +4743,12 @@ for normal, hover, and active states. All child `SkBreadcrumbItem` components in
 unicode characters like '\u203A' (single right-pointing angle quotation mark). Can be overridden
 on individual `SkBreadcrumbSeparator` components for custom patterns. |
 
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Contains `SkBreadcrumbItem` components representing each level in the navigation hierarchy. |
+
 
 ---
 
@@ -1774,6 +4890,22 @@ When using icon-only buttons, provide an `aria-label` for screen readers:
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | type | "button" \| "submit" \| "reset" | 'button' | false | The HTML `type` attribute for the button element. Only applies when rendering as a `<button>`
 (i.e., when neither `href` nor `to` props are provided). Use 'submit' for form submission
 buttons and 'reset' for form reset buttons. |
@@ -1931,6 +5063,22 @@ Remove the corner decoration for a cleaner, more minimalist appearance using the
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the card's border color and decorative accent stripe.
 Semantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,
 while color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors. |
@@ -1962,10 +5110,13 @@ to take effect. Header and footer remain fixed while content scrolls. |
 
 | Slot | Description |
 |------|-------------|
-| header | Custom header content. Renders alongside or instead of the `title` prop. Use for action buttons, badges, or complex header layouts. |
-| media | Media content area (images, videos, etc.) that spans the full width without padding. Displays between the header and content sections. |
+| header | Custom header content. Renders alongside or instead of the `title` prop. Use for action buttons,
+               badges, or complex header layouts. |
+| media | Media content area (images, videos, etc.) that spans the full width without padding. Displays
+              between the header and content sections. |
 | default | The main content area of the card. Displays below the header and media sections. |
-| footer | Footer content area for actions, links, or metadata. Displays at the bottom of the card with appropriate spacing. |
+| footer | Footer content area for actions, links, or metadata. Displays at the bottom of the card with
+               appropriate spacing. |
 
 
 ---
@@ -2080,6 +5231,22 @@ const newsletter = ref(false)
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the checkbox appearance when checked. Semantic kinds
 (neutral, primary, accent, etc.) adapt to your theme, while color kinds (neon-blue,
 neon-purple, etc.) provide fixed branding colors. |
@@ -2192,6 +5359,22 @@ Built on RekaUI Collapsible which provides `aria-expanded` on the trigger and `a
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | open | boolean | undefined | false | Controls the expanded/collapsed state of the component. Use with `v-model:open` for
 two-way binding. When true, the content is visible; when false, it's hidden. If not
 provided, the component manages its own state internally starting with `defaultOpen`. |
@@ -2213,8 +5396,10 @@ trigger appearance, use the trigger slot instead. |
 
 | Slot | Description |
 |------|-------------|
-| trigger | Custom trigger element. Receives `{ open: boolean }` slot props to allow the trigger to reflect the current state. When not provided, a default SkButton with chevron icon is rendered. |
-| default | The collapsible content that is shown/hidden. This content animates smoothly when the collapsed state changes. |
+| trigger | Custom trigger element. Receives `{ open: boolean }` slot props to allow the trigger to
+                reflect the current state. When not provided, a default SkButton with chevron icon is rendered. |
+| default | The collapsible content that is shown/hidden. This content animates smoothly when the
+                collapsed state changes. |
 
 ### Events
 
@@ -2451,6 +5636,22 @@ Built on RekaUI DropdownMenu which provides full WAI-ARIA menu pattern. Arrow ke
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the menu's accent colors for hover states and
 focus indicators. The kind is inherited by nested SkDropdownSubmenu components
 unless they specify their own kind. |
@@ -2466,13 +5667,18 @@ the menu, and 'end' aligns right edges. |
 | sideOffset | number | 4 | false | Distance in pixels between the trigger element and the dropdown menu.
 Increase for more visual separation or decrease for a tighter connection
 to the trigger element. |
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Size of the default trigger button. When omitted and the dropdown is rendered inside
+an SkNavBar, falls back to the navbar's `size` prop so the trigger naturally matches
+surrounding nav controls. Ignored when the `trigger` slot is used. |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
-| trigger | Custom trigger element. When provided, replaces the default SkButton trigger. The slot content should be an interactive element (button, link, etc.). |
-| default | Menu content containing SkDropdownMenuItem, SkDropdownMenuSeparator, and/or SkDropdownSubmenu components. |
+| trigger | Custom trigger element. When provided, replaces the default SkButton trigger.
+                The slot content should be an interactive element (button, link, etc.). |
+| default | Menu content containing SkDropdownMenuItem, SkDropdownMenuSeparator, and/or
+                SkDropdownSubmenu components. |
 
 
 ---
@@ -2601,7 +5807,9 @@ inputs via Vue's provide/inject system. |
 
 | Slot | Description |
 |------|-------------|
-| default | The form input component (SkInput, SkTextarea, SkNumberInput, etc.). Receives slot props: `id` (string) - unique ID for the input, `aria-describedby` (string) - ID of description/error element, `aria-invalid` (string) - "true" when error present, `kind` (string) - semantic kind based on state. |
+| default | The form input component (SkInput, SkTextarea, SkNumberInput, etc.). Receives slot props:
+  `id` (string) - unique ID for the input, `aria-describedby` (string) - ID of description/error element,
+  `aria-invalid` (string) - "true" when error present, `kind` (string) - semantic kind based on state. |
 
 
 ---
@@ -2656,7 +5864,8 @@ for stacked layouts (like form field groups or menu items). |
 
 | Slot | Description |
 |------|-------------|
-| default | The child elements to be grouped. All direct children will be arranged according to the orientation prop with consistent spacing between them. |
+| default | The child elements to be grouped. All direct children will be arranged according to the
+                orientation prop with consistent spacing between them. |
 
 
 ---
@@ -2749,6 +5958,22 @@ Renders as a native `<input>` element. All standard HTML attributes are forwarde
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | type | "number" \| "text" \| "email" \| "password" \| "url" \| "tel" \| "search" | 'text' | false | The HTML input type attribute controlling the input behavior and keyboard on mobile devices.
 Common types include 'text', 'email', 'password', 'tel', 'url', 'search', and 'number'.
 Note: For numeric inputs with stepper buttons, consider using SkNumberInput instead. |
@@ -2958,6 +6183,22 @@ const validate = () => {
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind that controls the input border, focus ring, and selected
 item highlight appearance. When used inside SkField, inherits the field's
 kind if not explicitly set. |
@@ -2975,7 +6216,8 @@ appears with reduced opacity and the cursor changes to not-allowed. |
 
 | Slot | Description |
 |------|-------------|
-| default | SkListboxItem components representing the available options. Use SkListboxSeparator to create visual dividers between groups of options. |
+| default | SkListboxItem components representing the available options. Use SkListboxSeparator
+                to create visual dividers between groups of options. |
 
 
 ---
@@ -3201,6 +6443,22 @@ Control how the modal can be dismissed using `no-close-on-escape` and `no-close-
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the modal's accent colors, including the header,
 close button, and any kind-styled elements within the modal. Semantic kinds
 (neutral, primary, accent, etc.) adapt to your theme. |
@@ -3230,7 +6488,8 @@ require users to interact with modal buttons rather than dismissing accidentally
 
 | Slot | Description |
 |------|-------------|
-| trigger | Custom trigger element to open the modal. Receives no slot props. If not provided, uses a default SkButton with `triggerText`. |
+| trigger | Custom trigger element to open the modal. Receives no slot props. If not provided, uses
+                a default SkButton with `triggerText`. |
 | title | Custom title content. Receives `{ close }` slot prop for programmatic closing. |
 | default | The main modal body content. Receives `{ close }` slot prop for programmatic closing. |
 | footer | Footer content, typically containing action buttons. Receives `{ close }` slot prop. |
@@ -3564,6 +6823,22 @@ const validateQuantity = () => {
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind for the input border and focus ring. Use semantic kinds like
 'success' or 'danger' to indicate validation states. When used inside an SkField
 with a `state` prop, the field's kind automatically overrides this value. |
@@ -3592,6 +6867,9 @@ or inventory caps. |
 | step | number | 1 | false | The increment/decrement step amount when using stepper buttons or arrow keys. Use
 fractional values like 0.01 for currency or 0.1 for percentages. Pressing Shift while
 stepping may multiply the step for faster navigation. |
+| showSteppers | boolean | true | false | When true, renders the increment/decrement stepper buttons on the right side of the
+input. Set to false for a plain numeric text field (users can still use arrow keys
+and type values directly). |
 
 
 ---
@@ -3734,6 +7012,10 @@ on the root element and providing theme context for descendant components (inclu
 components like dropdowns and modals). |
 | flush | boolean | false | false | When true, zeroes out `--sk-page-gap` and `--sk-page-content-padding` so panels and content
 sit flush against the header, footer, edges, and each other. |
+| noBounce | boolean | false | false | When true, disables the bouncy overscroll / rubber-band effect on the page's scroll
+containers (main content, sidebar body, aside body). Applies `overscroll-behavior: none`
+to every scrollable region owned by SkPage. Note: the document-level bounce from scrolling
+the page itself (outside SkPage's containers) can only be killed on `html`/`body`. |
 
 ### Slots
 
@@ -3741,15 +7023,21 @@ sit flush against the header, footer, edges, and each other. |
 |------|-------------|
 | header | Top-of-page header. Typically a SkNavBar. |
 | subheader | Full-width strip between the header and the main row. Good for breadcrumbs or sub-tabs. |
-| sidebar-header | Pinned top of the sidebar (e.g. logo, search). Renders in the drawer too. Slot props: `{ isDrawer: boolean }`. |
-| sidebar | Left sidebar body. Renders inline when persistent, inside a drawer when in drawer mode. Slot props: `{ isDrawer: boolean }` — true when this invocation is the off-canvas drawer. |
-| sidebar-footer | Pinned bottom of the sidebar (e.g. user menu). Renders in the drawer too. Slot props: `{ isDrawer: boolean }`. |
+| sidebar-header | Pinned top of the sidebar (e.g. logo, search). Renders in the drawer too.
+                       Slot props: `{ isDrawer: boolean }`. |
+| sidebar | Left sidebar body. Renders inline when persistent, inside a drawer when in drawer mode.
+                Slot props: `{ isDrawer: boolean }` — true when this invocation is the off-canvas drawer. |
+| sidebar-footer | Pinned bottom of the sidebar (e.g. user menu). Renders in the drawer too.
+                       Slot props: `{ isDrawer: boolean }`. |
 | main-header | Pinned top of the center column (e.g. breadcrumbs, sub-tabs). Does not scroll. |
 | default | Main content. Scrolls inside the content area and receives the default content padding. |
 | main-footer | Pinned bottom of the center column (e.g. status bar). Does not scroll. |
-| aside-header | Pinned top of the aside (e.g. panel title). Renders in the drawer too. Slot props: `{ isDrawer: boolean }`. |
-| aside | Right aside body. Persistent or drawer, mirror of the sidebar on the opposite side. Slot props: `{ isDrawer: boolean }` — use to add chrome only when rendering in the drawer. |
-| aside-footer | Pinned bottom of the aside (e.g. action buttons). Renders in the drawer too. Slot props: `{ isDrawer: boolean }`. |
+| aside-header | Pinned top of the aside (e.g. panel title). Renders in the drawer too.
+                     Slot props: `{ isDrawer: boolean }`. |
+| aside | Right aside body. Persistent or drawer, mirror of the sidebar on the opposite side.
+              Slot props: `{ isDrawer: boolean }` — use to add chrome only when rendering in the drawer. |
+| aside-footer | Pinned bottom of the aside (e.g. action buttons). Renders in the drawer too.
+                     Slot props: `{ isDrawer: boolean }`. |
 | footer | Bottom-of-page footer. |
 
 ### Events
@@ -3867,6 +7155,9 @@ Pagination integrated with a data table showing items per page. A common pattern
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
 | textColor | string | undefined | false |  |
 | baseColor | string | undefined | false |  |
 | total | number | — | true | The total number of pages available. This is a required prop that determines
@@ -4005,6 +7296,22 @@ Use `base-color` for custom CSS colors. Text color is automatically calculated f
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the panel's border color and decorative accent stripe.
 Semantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,
 while color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors that remain
@@ -4135,6 +7442,22 @@ Use `baseColor` and `textColor` for custom styling.
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the popover's header accent and overall color scheme.
 Semantic kinds (neutral, primary, accent, info, success, warning, danger) adapt to your
 theme. Use 'neutral' for general popovers, or match the kind to contextual meaning
@@ -4166,10 +7489,14 @@ state internally (opens on trigger click, closes on outside click or Escape). |
 
 | Slot | Description |
 |------|-------------|
-| trigger | The element that opens the popover when clicked. Uses `as-child` behavior so your trigger element becomes the actual clickable trigger. Required slot. |
-| header | Optional header content displayed after the title. Use for additional header elements like badges, status indicators, or secondary actions. |
-| default | Main body content of the popover. Can include any components, forms, or interactive content. Scrolls if content exceeds available space. |
-| footer | Optional footer content, typically for action buttons. Commonly contains Cancel/Confirm button pairs or other closing actions. |
+| trigger | The element that opens the popover when clicked. Uses `as-child` behavior so your
+  trigger element becomes the actual clickable trigger. Required slot. |
+| header | Optional header content displayed after the title. Use for additional header elements
+  like badges, status indicators, or secondary actions. |
+| default | Main body content of the popover. Can include any components, forms, or interactive content.
+  Scrolls if content exceeds available space. |
+| footer | Optional footer content, typically for action buttons. Commonly contains Cancel/Confirm
+  button pairs or other closing actions. |
 
 ### Events
 
@@ -4401,6 +7728,22 @@ Override radio colors with custom OKLCH, hex, or CSS variable values.
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | value | string \| string[] | — | true | The value this radio option represents. When selected, the parent SkRadioGroup's
 v-model will be set to this value. Must be unique within the radio group to ensure
 proper selection behavior. |
@@ -4421,7 +7764,8 @@ Available sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
 
 | Slot | Description |
 |------|-------------|
-| default | Custom label content. Overrides the `label` prop when provided, allowing for rich formatting, icons, or complex layouts alongside the radio button. |
+| default | Custom label content. Overrides the `label` prop when provided, allowing for rich
+                formatting, icons, or complex layouts alongside the radio button. |
 
 
 ---
@@ -4567,6 +7911,22 @@ Use `base-color` to customize the sidebar background with any CSS color value. P
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the sidebar panel's background, border, and text colors.
 The kind is passed to the underlying SkPanel component. Use semantic kinds like 'neutral'
 or 'primary' to match your theme, or use `baseColor`/`textColor` props for custom colors. |
@@ -4583,7 +7943,9 @@ tap comfort. No effect on fine-pointer (mouse) devices. |
 
 | Slot | Description |
 |------|-------------|
-| default | Container for SkSidebarSection and/or SkSidebarItem components. Content is wrapped in a scrollable nav element, allowing long navigation lists to scroll independently of the main page content. |
+| default | Container for SkSidebarSection and/or SkSidebarItem components. Content is wrapped
+                in a scrollable nav element, allowing long navigation lists to scroll independently
+                of the main page content. |
 
 
 ---
@@ -5000,6 +8362,22 @@ Built on RekaUI Switch which provides `role="switch"` and `aria-checked`. The la
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | modelValue | boolean | — | true | The current state of the switch. `true` means on (checked), `false` means off (unchecked).
 Use with `v-model` for two-way binding. Required prop that must be explicitly provided. |
 | label | string | undefined | false | Static label text displayed next to the switch. When `labelOn` or `labelOff` are not
@@ -5209,6 +8587,22 @@ SkTable renders as a standard `<table>` element. Use semantic `<thead>`, `<tbody
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls header backgrounds and accent colors. The kind
 affects the table header row styling and can subtly influence row hover colors.
 Use semantic kinds to match your application's color language. |
@@ -5238,7 +8632,8 @@ secondary data alongside more prominent content. |
 
 | Slot | Description |
 |------|-------------|
-| default | Standard HTML table content including `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, and `<td>` elements. |
+| default | Standard HTML table content including `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`,
+                and `<td>` elements. |
 
 
 ---
@@ -5377,6 +8772,22 @@ Built on RekaUI Tabs which provides `role="tablist"`, `role="tab"`, and `role="t
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | modelValue | string \| string[] | — | true | The currently active tab identifier, matching the `name` prop of the corresponding `SkTab`
 and `SkTabPanel`. Use with `v-model` for two-way binding to control which tab is displayed. |
 | orientation | "horizontal" \| "vertical" | 'horizontal' | false | Layout orientation for the tab list. In 'horizontal' mode, tabs are arranged in a row and
@@ -5519,6 +8930,22 @@ The remove button is keyboard-accessible. Developers should provide context (suc
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the tag's color scheme. The kind determines both
 background and text colors across all variants. Use semantic kinds (primary, success,
 danger, etc.) to convey meaning, or use accent for decorative highlighting. |
@@ -5680,6 +9107,22 @@ const validate = () => {
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind that controls the input border and focus ring appearance.
 Also sets the default color for tags unless overridden by `tagKind`. When used
 inside SkField, inherits the field's kind if not explicitly set. |
@@ -5838,6 +9281,22 @@ const comments = ref('Looking good so far!')
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind for the textarea border and focus ring. Use semantic kinds like
 'success' or 'danger' to indicate validation states. When used inside an SkField with
 a `state` prop, the field's kind automatically overrides this value. |
@@ -5956,7 +9415,8 @@ theme even though they render outside the DOM hierarchy. |
 
 | Slot | Description |
 |------|-------------|
-| default | All application content that should inherit this theme context. Nested SkTheme components can override the theme for subsections of the UI. |
+| default | All application content that should inherit this theme context. Nested SkTheme components
+                can override the theme for subsections of the UI. |
 
 
 ---
@@ -6316,6 +9776,22 @@ Common tooltip use cases in applications: icon buttons, help text, and disabled
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
+| borderColor | string | — | false | Border color for the component. Accepts the same kind names and CSS color values as
+`baseColor`. Only honoured by components that render a visible border (panels, cards,
+inputs, etc.); ignored elsewhere. |
+| textColor | string | — | false | Text/foreground color for the component. Accepts the same kind names and CSS color values
+as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+on arbitrary custom backgrounds. |
+| baseColor | string | — | false | Base color for the component. Accepts either:
+- A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+  `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+  `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+  `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+- Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+  rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+  named color (`"rebeccapurple"`).
+
+When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the tooltip's background and text colors. Semantic kinds
 (neutral, primary, accent, info, success, warning, danger) adapt to your theme. Use 'neutral'
 for general hints, or match the kind to contextual meaning (e.g., 'warning' for caution tips). |
@@ -6342,8 +9818,10 @@ interactive elements are close together. Disable for a cleaner, more minimal app
 
 | Slot | Description |
 |------|-------------|
-| trigger | The element that triggers the tooltip on hover/focus. Use `as-child` behavior - the trigger slot content becomes the actual trigger element. Required slot. |
-| default | The tooltip content to display. Can include text, formatted content, or simple components. Keep content brief for tooltips; use SkPopover for richer interactions. |
+| trigger | The element that triggers the tooltip on hover/focus. Use `as-child` behavior - the trigger
+  slot content becomes the actual trigger element. Required slot. |
+| default | The tooltip content to display. Can include text, formatted content, or simple components.
+  Keep content brief for tooltips; use SkPopover for richer interactions. |
 
 
 ---