@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/web-types.json

@@ -1,7 +1,8 @@
 {
+  "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -9,8 +10,35 @@
       "tags": [
         {
           "name": "SkAccordion",
-          "description": "",
+          "description": "A collapsible content container that organizes information into expandable sections. Built on\nRekaUI's Accordion primitive with smooth height animations and full keyboard accessibility. Supports two\nmodes: single (only one item open at a time) or multiple (any number of items can be open simultaneously).\n\n**Example:**\n\n```vue\n<SkAccordion v-model=\"openItem\" kind=\"primary\">\n  <SkAccordionItem value=\"faq-1\" title=\"What is SleekSpace?\">\n    A Vue 3 component library with cyberpunk aesthetic.\n  </SkAccordionItem>\n  <SkAccordionItem value=\"faq-2\" title=\"How do I get started?\">\n    Install via npm and import the components you need.\n  </SkAccordionItem>\n</SkAccordion>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "type",
               "required": false,
@@ -69,7 +97,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Container for SkAccordionItem components. Each item becomes a collapsible section."
             }
           ],
           "source": {
@@ -79,7 +108,7 @@
         },
         {
           "name": "SkAccordionItem",
-          "description": "",
+          "description": "An individual collapsible section within an SkAccordion container. Each item consists of a\nclickable header that toggles the visibility of its content panel. Features smooth height animations,\nan animated chevron indicator, and full keyboard navigation support (Enter/Space to toggle, arrow keys\nto navigate between items).\n\n**Example:**\n\n```vue\n<SkAccordionItem value=\"shipping\" title=\"Shipping Information\">\n  <p>We ship worldwide with tracking included.</p>\n</SkAccordionItem>\n```",
           "attributes": [
             {
               "name": "value",
@@ -123,10 +152,12 @@
           ],
           "slots": [
             {
-              "name": "title"
+              "name": "title",
+              "description": "Custom header content. Receives `{ open: boolean }` indicating the current expanded state.\n              Use this for complex headers with icons, badges, or conditional styling."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The collapsible content displayed when the item is expanded. Can contain any content."
             }
           ],
           "source": {
@@ -136,8 +167,35 @@
         },
         {
           "name": "SkAlert",
-          "description": "",
+          "description": "A contextual feedback component for displaying informational, success, warning, or error messages.\nFeatures automatic icon selection based on alert kind and supports prominent (default) and subtle visual styles.\nUse alerts to communicate important status updates, validation results, or system messages to users.\n\n**Example:**\n\n```vue\n<SkAlert kind=\"success\">Your changes have been saved!</SkAlert>\n```\n\n**Example:**\n\nSubtle info alert\n```vue\n<SkAlert kind=\"info\" subtle>\n    A helpful tip for the user.\n</SkAlert>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -171,10 +229,12 @@
           ],
           "slots": [
             {
-              "name": "icon"
+              "name": "icon",
+              "description": "Custom icon to override the default kind-based icon. Receives no slot props."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The alert message content. Can include text, links, or any HTML content."
             }
           ],
           "source": {
@@ -184,7 +244,7 @@
         },
         {
           "name": "SkAvatar",
-          "description": "",
+          "description": "A user profile avatar component displaying an image, initials, or placeholder icon. Features a\ndistinctive square shape with beveled top-left and bottom-right corners matching the SleekSpace design system.\nImplements graceful degradation: shows image if provided and loads successfully, falls back to initials if\nspecified, otherwise displays a generic user icon. Supports all semantic color kinds and custom colors.\n\n**Example:**\n\n```vue\n<!-- With image -->\n<SkAvatar src=\"/avatars/user.jpg\" alt=\"Jane Doe\" size=\"lg\" />\n\n<!-- With initials fallback -->\n<SkAvatar src=\"/avatars/user.jpg\" initials=\"JD\" kind=\"primary\" />\n\n<!-- Initials only -->\n<SkAvatar initials=\"AB\" kind=\"accent\" size=\"xl\" />\n\n<!-- Custom icon fallback -->\n<SkAvatar kind=\"info\">\n  <template #icon><RobotIcon /></template>\n</SkAvatar>\n```",
           "attributes": [
             {
               "name": "src",
@@ -259,7 +319,8 @@
           ],
           "slots": [
             {
-              "name": "icon"
+              "name": "icon",
+              "description": "Custom fallback icon displayed when no image or initials are provided. Defaults to a generic\n  user silhouette icon. Use for bots, system users, or other non-person entities."
             }
           ],
           "source": {
@@ -269,7 +330,7 @@
         },
         {
           "name": "SkBreadcrumbItem",
-          "description": "",
+          "description": "A single item within a breadcrumb navigation trail representing one level in the hierarchy.\nAutomatically renders as the appropriate element type based on props: `RouterLink` for Vue Router\nnavigation, `<a>` for external links, `<span>` for current/disabled items, or `<button>` for click handlers.\n\n**Example:**\n\n```vue\n<!-- Vue Router link -->\n<SkBreadcrumbItem to=\"/dashboard\">Dashboard</SkBreadcrumbItem>\n\n<!-- External link -->\n<SkBreadcrumbItem href=\"https://docs.example.com\">Docs</SkBreadcrumbItem>\n\n<!-- Current page (non-interactive) -->\n<SkBreadcrumbItem current>Settings</SkBreadcrumbItem>\n\n<!-- With icon -->\n<SkBreadcrumbItem to=\"/\">\n    <template #icon><HomeIcon /></template>\n    Home\n</SkBreadcrumbItem>\n```",
           "attributes": [
             {
               "name": "to",
@@ -314,10 +375,12 @@
           ],
           "slots": [
             {
-              "name": "icon"
+              "name": "icon",
+              "description": "Optional icon displayed before the label. Useful for home icons or category indicators."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The breadcrumb label text or custom content."
             }
           ],
           "source": {
@@ -327,7 +390,7 @@
         },
         {
           "name": "SkBreadcrumbSeparator",
-          "description": "",
+          "description": "A visual separator displayed between breadcrumb items. Typically used internally by\n`SkBreadcrumbs`, but can be used directly when you need custom separator patterns or want to\nplace separators manually. The separator is hidden from screen readers via `aria-hidden`.\n\n**Example:**\n\n```vue\n<!-- Manual separator usage -->\n<SkBreadcrumbItem to=\"/\">Home</SkBreadcrumbItem>\n<SkBreadcrumbSeparator separator=\">\" />\n<SkBreadcrumbItem current>Settings</SkBreadcrumbItem>\n```",
           "attributes": [
             {
               "name": "separator",
@@ -347,8 +410,17 @@
         },
         {
           "name": "SkBreadcrumbs",
-          "description": "",
+          "description": "A navigation component that displays a hierarchical trail of links showing the user's current\nlocation within an application. Automatically inserts separators between breadcrumb items and provides\nARIA-compliant navigation landmarks for screen readers.\n\n**Example:**\n\n```vue\n<SkBreadcrumbs kind=\"primary\">\n    <SkBreadcrumbItem to=\"/\">Home</SkBreadcrumbItem>\n    <SkBreadcrumbItem to=\"/products\">Products</SkBreadcrumbItem>\n    <SkBreadcrumbItem current>Widget Pro</SkBreadcrumbItem>\n</SkBreadcrumbs>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "textColor",
               "required": false,
@@ -388,6 +460,12 @@
               "default": "'/'"
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Contains `SkBreadcrumbItem` components representing each level in the navigation hierarchy."
+            }
+          ],
           "source": {
             "module": "./src/components/Breadcrumbs/SkBreadcrumbs.vue",
             "symbol": "default"
@@ -395,8 +473,35 @@
         },
         {
           "name": "SkButton",
-          "description": "",
+          "description": "A versatile button component supporting multiple visual variants, sizes, and interactive states.\nAutomatically renders as a `<button>`, `<a>`, or `<router-link>` based on the props provided. Use for\nprimary actions, navigation, form submissions, and toggleable controls with full keyboard accessibility.\n\n**Example:**\n\n```vue\n<SkButton kind=\"primary\" @click=\"save\">Save Changes</SkButton>\n<SkButton variant=\"outline\" href=\"/docs\">Documentation</SkButton>\n<SkButton :loading=\"isSaving\" kind=\"accent\">Submit</SkButton>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "type",
               "required": false,
@@ -500,16 +605,20 @@
           ],
           "slots": [
             {
-              "name": "leading"
+              "name": "leading",
+              "description": "Icon or element displayed before the button text. Ideal for action icons."
             },
             {
-              "name": "icon"
+              "name": "icon",
+              "description": "Icon for icon-only buttons. When used without the default slot, creates a square icon button."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Button label text or content. Supports text, icons, or any inline elements."
             },
             {
-              "name": "trailing"
+              "name": "trailing",
+              "description": "Icon or element displayed after the button text. Useful for arrows or indicators."
             }
           ],
           "source": {
@@ -519,8 +628,35 @@
         },
         {
           "name": "SkCard",
-          "description": "",
+          "description": "A structured card component with distinct header, media, content, and footer sections. Built on top\nof SkPanel, cards are ideal for displaying grouped information like product listings, user profiles, or article\npreviews. Supports scrollable content areas for fixed-height layouts.\n\n**Example:**\n\n```vue\n<SkCard title=\"Product Details\" kind=\"primary\">\n    <template #media>\n        <img src=\"/product.jpg\" alt=\"Product\" />\n    </template>\n    <p>Product description goes here.</p>\n    <template #footer>\n        <SkButton>Add to Cart</SkButton>\n    </template>\n</SkCard>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -624,16 +760,20 @@
           ],
           "slots": [
             {
-              "name": "header"
+              "name": "header",
+              "description": "Custom header content. Renders alongside or instead of the `title` prop. Use for action buttons,\n               badges, or complex header layouts."
             },
             {
-              "name": "media"
+              "name": "media",
+              "description": "Media content area (images, videos, etc.) that spans the full width without padding. Displays\n              between the header and content sections."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The main content area of the card. Displays below the header and media sections."
             },
             {
-              "name": "footer"
+              "name": "footer",
+              "description": "Footer content area for actions, links, or metadata. Displays at the bottom of the card with\n               appropriate spacing."
             }
           ],
           "source": {
@@ -643,8 +783,35 @@
         },
         {
           "name": "SkCheckbox",
-          "description": "",
+          "description": "A checkbox input component supporting boolean and indeterminate states. Built on RekaUI's\nCheckbox primitive with beveled corner styling and full keyboard accessibility. Use with `v-model` for\ntwo-way binding of the checked state.\n\n**Example:**\n\n```vue\n<SkCheckbox v-model=\"accepted\" label=\"Accept terms\" kind=\"primary\" />\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -708,7 +875,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Custom label content. Overrides the `label` prop when provided."
             }
           ],
           "source": {
@@ -718,8 +886,35 @@
         },
         {
           "name": "SkCollapsible",
-          "description": "",
+          "description": "An expandable/collapsible container that reveals or hides content with smooth height animations.\nBuilt on RekaUI's Collapsible primitive for robust accessibility and keyboard support. Use for FAQ sections,\nexpandable details, or any content that should be hidden by default to reduce visual clutter.\n\n**Example:**\n\n```vue\n<SkCollapsible v-model:open=\"showDetails\" trigger-text=\"Show Details\" kind=\"primary\">\n    <p>This content is hidden until the user clicks the trigger.</p>\n</SkCollapsible>\n```\n\n**Example:**\n\nCustom trigger with slot\n```vue\n<SkCollapsible v-model:open=\"isExpanded\">\n    <template #trigger=\"{ open }\">\n        <SkButton variant=\"outline\">\n            {{ open ? 'Hide' : 'Show' }} Advanced Options\n        </SkButton>\n    </template>\n    <div class=\"options-panel\">\n        <!-- Advanced options content -->\n    </div>\n</SkCollapsible>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "open",
               "required": false,
@@ -778,10 +973,12 @@
           ],
           "slots": [
             {
-              "name": "trigger"
+              "name": "trigger",
+              "description": "Custom trigger element. Receives `{ open: boolean }` slot props to allow the trigger to\n                reflect the current state. When not provided, a default SkButton with chevron icon is rendered."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The collapsible content that is shown/hidden. This content animates smoothly when the\n                collapsed state changes."
             }
           ],
           "source": {
@@ -793,6 +990,33 @@
           "name": "SkColorPicker",
           "description": "",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -866,6 +1090,33 @@
           "name": "SkContextMenu",
           "description": "",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1072,7 +1323,7 @@
         },
         {
           "name": "SkDivider",
-          "description": "",
+          "description": "A visual separator component used to divide content into distinct sections. Renders as a semantic\n`<hr>` element with proper ARIA attributes for accessibility. Use horizontal dividers to separate stacked\ncontent, or vertical dividers to separate inline elements like toolbar buttons.\n\n**Example:**\n\n```vue\n<div>\n    <p>First section content</p>\n    <SkDivider kind=\"primary\" />\n    <p>Second section content</p>\n</div>\n```\n\n**Example:**\n\nVertical divider in a toolbar\n```vue\n<SkGroup orientation=\"horizontal\">\n    <SkButton>Edit</SkButton>\n    <SkDivider orientation=\"vertical\" variant=\"subtle\" />\n    <SkButton>Delete</SkButton>\n</SkGroup>\n```",
           "attributes": [
             {
               "name": "orientation",
@@ -1122,8 +1373,35 @@
         },
         {
           "name": "SkDropdown",
-          "description": "",
+          "description": "A dropdown menu component that displays a list of actions or options when triggered. Built on\nRekaUI's dropdown primitives with full keyboard navigation, focus management, and accessibility. The menu\ncontent is portaled to the document body to prevent overflow issues. Supports nested submenus via\nSkDropdownSubmenu.\n\n**Example:**\n\n```vue\n<SkDropdown trigger-text=\"Actions\" kind=\"primary\">\n    <SkDropdownMenuItem @click=\"handleEdit\">Edit</SkDropdownMenuItem>\n    <SkDropdownMenuItem @click=\"handleDuplicate\">Duplicate</SkDropdownMenuItem>\n    <SkDropdownMenuSeparator />\n    <SkDropdownMenuItem @click=\"handleDelete\">Delete</SkDropdownMenuItem>\n</SkDropdown>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1173,14 +1451,26 @@
                 "type": "number"
               },
               "default": "4"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "description": "Size of the default trigger button. When omitted and the dropdown is rendered inside\nan SkNavBar, falls back to the navbar's `size` prop so the trigger naturally matches\nsurrounding nav controls. Ignored when the `trigger` slot is used.",
+              "value": {
+                "kind": "expression",
+                "type": "SkDropdownSize"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
             {
-              "name": "trigger"
+              "name": "trigger",
+              "description": "Custom trigger element. When provided, replaces the default SkButton trigger.\n                The slot content should be an interactive element (button, link, etc.)."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Menu content containing SkDropdownMenuItem, SkDropdownMenuSeparator, and/or\n                SkDropdownSubmenu components."
             }
           ],
           "source": {
@@ -1228,7 +1518,7 @@
         },
         {
           "name": "SkDropdownMenuItem",
-          "description": "",
+          "description": "An individual menu item for use inside SkDropdown or SkDropdownSubmenu. Provides keyboard\nnavigation support (arrow keys, Enter/Space to select) and proper focus management. Menu items automatically\nclose the dropdown when clicked unless the event is prevented.\n\n**Example:**\n\n```vue\n<SkDropdown trigger-text=\"File\">\n    <SkDropdownMenuItem @click=\"handleNew\">New Document</SkDropdownMenuItem>\n    <SkDropdownMenuItem @click=\"handleOpen\">Open...</SkDropdownMenuItem>\n    <SkDropdownMenuItem disabled>Save (disabled)</SkDropdownMenuItem>\n</SkDropdown>\n```",
           "attributes": [
             {
               "name": "disabled",
@@ -1248,7 +1538,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The menu item label content. Can include text, icons, keyboard shortcuts, or any inline elements."
             }
           ],
           "source": {
@@ -1271,7 +1562,7 @@
         },
         {
           "name": "SkDropdownMenuSeparator",
-          "description": "",
+          "description": "A visual divider line for grouping related menu items within SkDropdown or SkDropdownSubmenu.\nUse separators to create logical sections in longer menus, improving scannability and organization.\nThis is a purely visual component with no interactive behavior.\n\n**Example:**\n\n```vue\n<SkDropdown trigger-text=\"Edit\">\n    <SkDropdownMenuItem>Undo</SkDropdownMenuItem>\n    <SkDropdownMenuItem>Redo</SkDropdownMenuItem>\n    <SkDropdownMenuSeparator />\n    <SkDropdownMenuItem>Cut</SkDropdownMenuItem>\n    <SkDropdownMenuItem>Copy</SkDropdownMenuItem>\n    <SkDropdownMenuItem>Paste</SkDropdownMenuItem>\n</SkDropdown>\n```",
           "source": {
             "module": "./src/components/Dropdown/SkDropdownMenuSeparator.vue",
             "symbol": "default"
@@ -1340,7 +1631,7 @@
         },
         {
           "name": "SkDropdownSubmenu",
-          "description": "",
+          "description": "A nested submenu component that expands from a parent SkDropdown or another SkDropdownSubmenu.\nThe submenu opens to the side when the trigger item is hovered or focused, with full keyboard navigation\nsupport (arrow keys to navigate, Enter/Space or Right arrow to open, Left arrow or Escape to close).\nContent is portaled to prevent overflow clipping.\n\n**Example:**\n\n```vue\n<SkDropdown trigger-text=\"Options\">\n    <SkDropdownMenuItem>Simple Action</SkDropdownMenuItem>\n    <SkDropdownSubmenu trigger-text=\"More Actions\">\n        <SkDropdownMenuItem>Nested Item 1</SkDropdownMenuItem>\n        <SkDropdownMenuItem>Nested Item 2</SkDropdownMenuItem>\n    </SkDropdownSubmenu>\n</SkDropdown>\n```",
           "attributes": [
             {
               "name": "triggerText",
@@ -1364,7 +1655,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Menu content containing SkDropdownMenuItem, SkDropdownMenuSeparator, or further\n                nested SkDropdownSubmenu components."
             }
           ],
           "source": {
@@ -1374,7 +1666,7 @@
         },
         {
           "name": "SkField",
-          "description": "",
+          "description": "A form field wrapper that provides consistent label, description, and error message layout.\nAutomatically generates unique IDs and wires up ARIA attributes (aria-describedby, aria-invalid) for\naccessibility. Child input components (SkInput, SkTextarea, etc.) automatically inherit the validation\nkind based on the `state` prop.\n\n**Example:**\n\n```vue\n<SkField label=\"Email\" description=\"We'll never share your email\" :error=\"errors.email\">\n  <SkInput v-model=\"email\" type=\"email\" />\n</SkField>\n\n<SkField label=\"Username\" required :state=\"isValid\" label-position=\"left\">\n  <SkInput v-model=\"username\" />\n</SkField>\n```",
           "attributes": [
             {
               "name": "label",
@@ -1469,7 +1761,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The form input component (SkInput, SkTextarea, SkNumberInput, etc.). Receives slot props:\n  `id` (string) - unique ID for the input, `aria-describedby` (string) - ID of description/error element,\n  `aria-invalid` (string) - \"true\" when error present, `kind` (string) - semantic kind based on state."
             }
           ],
           "source": {
@@ -1479,7 +1772,7 @@
         },
         {
           "name": "SkGroup",
-          "description": "",
+          "description": "A flexbox-based layout container that groups child elements with consistent spacing and alignment.\nUse SkGroup to arrange buttons, form controls, or any elements that should be visually grouped together.\nThe component uses CSS gap for reliable spacing that works correctly regardless of conditional rendering.\n\n**Example:**\n\n```vue\n<SkGroup orientation=\"horizontal\">\n    <SkButton>Save</SkButton>\n    <SkButton variant=\"outline\">Cancel</SkButton>\n</SkGroup>\n```",
           "attributes": [
             {
               "name": "orientation",
@@ -1494,7 +1787,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The child elements to be grouped. All direct children will be arranged according to the\n                orientation prop with consistent spacing between them."
             }
           ],
           "source": {
@@ -1504,8 +1798,35 @@
         },
         {
           "name": "SkInput",
-          "description": "",
+          "description": "A single-line text input component with semantic color theming and validation state support.\nSupports various HTML input types (text, email, password, etc.) and integrates with SkField for labels\nand error messages. Use with `v-model` for two-way data binding of the input value.\n\n**Example:**\n\n```vue\n<SkInput v-model=\"email\" type=\"email\" placeholder=\"Enter your email\" />\n<SkInput v-model=\"search\" kind=\"primary\" size=\"lg\" />\n<SkField label=\"Username\" :error=\"errors.username\">\n  <SkInput v-model=\"username\" name=\"username\" required />\n</SkField>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "type",
               "required": false,
@@ -1604,8 +1925,35 @@
         },
         {
           "name": "SkListbox",
-          "description": "",
+          "description": "A searchable dropdown listbox for selecting from predefined options. Features a text input\nfor filtering options and a dropdown panel displaying matching items. Built on RekaUI's Combobox\nprimitive with full keyboard navigation, type-ahead search, and portal rendering for proper z-index.\n\n**Example:**\n\n```vue\n<SkListbox v-model=\"selectedCountry\" kind=\"primary\" placeholder=\"Select a country...\">\n    <SkListboxItem value=\"us\">United States</SkListboxItem>\n    <SkListboxItem value=\"uk\">United Kingdom</SkListboxItem>\n    <SkListboxItem value=\"ca\">Canada</SkListboxItem>\n</SkListbox>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1649,7 +1997,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "SkListboxItem components representing the available options. Use SkListboxSeparator\n                to create visual dividers between groups of options."
             }
           ],
           "source": {
@@ -1659,7 +2008,7 @@
         },
         {
           "name": "SkListboxItem",
-          "description": "",
+          "description": "A selectable option within an SkListbox dropdown. When selected, the item displays a\ncheckmark indicator and its value is set as the listbox's v-model. Built on RekaUI's ComboboxItem\nwith keyboard navigation and type-ahead search support.\n\n**Example:**\n\n```vue\n<SkListbox v-model=\"selected\">\n    <SkListboxItem value=\"option1\">First Option</SkListboxItem>\n    <SkListboxItem value=\"option2\">Second Option</SkListboxItem>\n    <SkListboxItem value=\"option3\" disabled>Unavailable Option</SkListboxItem>\n</SkListbox>\n```",
           "attributes": [
             {
               "name": "value",
@@ -1683,7 +2032,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The display content for this option. Can be plain text or rich content including\n                icons, formatted text, or custom layouts. This is what users see in the dropdown."
             }
           ],
           "source": {
@@ -1693,7 +2043,7 @@
         },
         {
           "name": "SkListboxSeparator",
-          "description": "",
+          "description": "A visual divider for organizing options within an SkListbox dropdown. Use to create\nlogical groups of related options without affecting selection behavior. Renders as a horizontal\nline between items with appropriate spacing.\n\n**Example:**\n\n```vue\n<SkListbox v-model=\"selected\">\n    <SkListboxItem value=\"recent1\">Recent Document 1</SkListboxItem>\n    <SkListboxItem value=\"recent2\">Recent Document 2</SkListboxItem>\n    <SkListboxSeparator />\n    <SkListboxItem value=\"all\">Browse All Documents...</SkListboxItem>\n</SkListbox>\n```",
           "source": {
             "module": "./src/components/Listbox/SkListboxSeparator.vue",
             "symbol": "default"
@@ -1701,8 +2051,35 @@
         },
         {
           "name": "SkModal",
-          "description": "",
+          "description": "A modal dialog component for displaying focused content in an overlay. Built on RekaUI's Dialog\nprimitive with full accessibility support including focus trapping and ARIA attributes. Modals interrupt the\nuser workflow to capture attention for important information, confirmations, or forms.\n\n**Example:**\n\n```vue\n<SkModal v-model:open=\"showModal\" title=\"Confirm Action\">\n    <p>Are you sure you want to proceed?</p>\n    <template #footer=\"{ close }\">\n        <SkButton @click=\"close\">Cancel</SkButton>\n        <SkButton kind=\"primary\" @click=\"confirm(); close()\">Confirm</SkButton>\n    </template>\n</SkModal>\n```\n\n**Example:**\n\nWith trigger button\n```vue\n<SkModal title=\"Settings\" trigger-text=\"Open Settings\" kind=\"primary\">\n    <SettingsForm />\n</SkModal>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1801,16 +2178,20 @@
           ],
           "slots": [
             {
-              "name": "trigger"
+              "name": "trigger",
+              "description": "Custom trigger element to open the modal. Receives no slot props. If not provided, uses\n                a default SkButton with `triggerText`."
             },
             {
-              "name": "title"
+              "name": "title",
+              "description": "Custom title content. Receives `{ close }` slot prop for programmatic closing."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The main modal body content. Receives `{ close }` slot prop for programmatic closing."
             },
             {
-              "name": "footer"
+              "name": "footer",
+              "description": "Footer content, typically containing action buttons. Receives `{ close }` slot prop."
             }
           ],
           "source": {
@@ -1820,8 +2201,35 @@
         },
         {
           "name": "SkNavBar",
-          "description": "",
+          "description": "A horizontal navigation bar component for site-wide header navigation. Provides a structured\nlayout with three distinct zones: brand/logo area (left), main navigation links (center), and action\nbuttons (right). Supports sticky positioning to remain visible while scrolling and adapts to your\ntheme's semantic colors.\n\n**Example:**\n\n```vue\n<SkNavBar kind=\"primary\">\n  <template #brand>\n    <img src=\"/logo.svg\" alt=\"Logo\" />\n  </template>\n  <SkButton as=\"a\" href=\"/features\">Features</SkButton>\n  <SkButton as=\"a\" href=\"/pricing\">Pricing</SkButton>\n  <template #actions>\n    <SkButton kind=\"accent\">Sign Up</SkButton>\n  </template>\n</SkNavBar>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1841,20 +2249,34 @@
                 "type": "boolean"
               },
               "default": "true"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "description": "Default size for descendant components (buttons, dropdowns, sidebar toggles, etc.) that\nread the navbar context. Picks a size that fits the navbar's 4rem height without\noverflowing. Descendants can still override with their own `size` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "SkNavBarSize"
+              },
+              "default": "'md'"
             }
           ],
           "slots": [
             {
-              "name": "leading"
+              "name": "leading",
+              "description": "Far-left area, rendered before the brand. Canonical placement for a\n                 sidebar-drawer toggle (SkPageSidebarToggle). Empty by default."
             },
             {
-              "name": "brand"
+              "name": "brand",
+              "description": "Left-aligned area for your logo, site name, or brand identity. Typically contains an\n              image or text link to the homepage."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Center area for main navigation items. Place navigation buttons, links, or menu\n                triggers here. Items are displayed in a horizontal row."
             },
             {
-              "name": "actions"
+              "name": "actions",
+              "description": "Right-aligned area for call-to-action buttons, user menus, or utility controls.\n                Ideal for login buttons, shopping carts, or profile dropdowns."
             }
           ],
           "source": {
@@ -1864,8 +2286,35 @@
         },
         {
           "name": "SkNumberInput",
-          "description": "",
+          "description": "A numeric input component with built-in increment/decrement stepper buttons. Built on RekaUI's\nNumberField primitive with full keyboard accessibility (arrow keys, page up/down, home/end). Supports\nmin/max constraints and configurable step values. Use with `v-model` for two-way binding of the numeric value.\n\n**Example:**\n\n```vue\n<SkNumberInput v-model=\"quantity\" :min=\"1\" :max=\"100\" />\n<SkNumberInput v-model=\"price\" :step=\"0.01\" :min=\"0\" placeholder=\"0.00\" />\n<SkField label=\"Age\" :error=\"errors.age\">\n  <SkNumberInput v-model=\"age\" name=\"age\" :min=\"0\" :max=\"150\" />\n</SkField>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -1974,7 +2423,7 @@
         },
         {
           "name": "SkPage",
-          "description": "",
+          "description": "Full-page layout shell with symmetric panels: a left sidebar and a right aside, each with\nits own header/body/footer slot trio, and each independently persistent, drawer-based, or responsive.\nWraps header / subheader / main content (with optional `main-header` and `main-footer` strips) / footer.\nSidebar slides in from the left; aside slides in from the right, with backdrop, focus trap, and\nESC-to-close. Drop `<SkPageSidebarToggle />` into the navbar's `#leading` for the sidebar and\n`<SkPageSidebarToggle side=\"aside\" />` into `#actions` for the aside.\n\n**Example:**\n\nApp shell with both panels\n```vue\n<SkPage fixed-header>\n    <template #header>\n        <SkNavBar>\n            <template #leading><SkPageSidebarToggle /></template>\n            <template #brand>AppName</template>\n            <template #actions><SkPageSidebarToggle side=\"aside\" /></template>\n        </SkNavBar>\n    </template>\n    <template #sidebar><SkSidebar>...</SkSidebar></template>\n    <template #aside>...</template>\n    <MainContent />\n</SkPage>\n```",
           "attributes": [
             {
               "name": "fixedHeader",
@@ -2095,6 +2544,16 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "noBounce",
+              "required": false,
+              "description": "When true, disables the bouncy overscroll / rubber-band effect on the page's scroll\ncontainers (main content, sidebar body, aside body). Applies `overscroll-behavior: none`\nto every scrollable region owned by SkPage. Note: the document-level bounce from scrolling\nthe page itself (outside SkPage's containers) can only be killed on `html`/`body`.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
@@ -2107,40 +2566,52 @@
           ],
           "slots": [
             {
-              "name": "header"
+              "name": "header",
+              "description": "Top-of-page header. Typically a SkNavBar."
             },
             {
-              "name": "subheader"
+              "name": "subheader",
+              "description": "Full-width strip between the header and the main row. Good for breadcrumbs or sub-tabs."
             },
             {
-              "name": "sidebar-header"
+              "name": "sidebar-header",
+              "description": "Pinned top of the sidebar (e.g. logo, search). Renders in the drawer too.\n                       Slot props: `{ isDrawer: boolean }`."
             },
             {
-              "name": "sidebar"
+              "name": "sidebar",
+              "description": "Left sidebar body. Renders inline when persistent, inside a drawer when in drawer mode.\n                Slot props: `{ isDrawer: boolean }` — true when this invocation is the off-canvas drawer."
             },
             {
-              "name": "sidebar-footer"
+              "name": "sidebar-footer",
+              "description": "Pinned bottom of the sidebar (e.g. user menu). Renders in the drawer too.\n                       Slot props: `{ isDrawer: boolean }`."
             },
             {
-              "name": "main-header"
+              "name": "main-header",
+              "description": "Pinned top of the center column (e.g. breadcrumbs, sub-tabs). Does not scroll."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Main content. Scrolls inside the content area and receives the default content padding."
             },
             {
-              "name": "main-footer"
+              "name": "main-footer",
+              "description": "Pinned bottom of the center column (e.g. status bar). Does not scroll."
             },
             {
-              "name": "aside-header"
+              "name": "aside-header",
+              "description": "Pinned top of the aside (e.g. panel title). Renders in the drawer too.\n                     Slot props: `{ isDrawer: boolean }`."
             },
             {
-              "name": "aside"
+              "name": "aside",
+              "description": "Right aside body. Persistent or drawer, mirror of the sidebar on the opposite side.\n              Slot props: `{ isDrawer: boolean }` — use to add chrome only when rendering in the drawer."
             },
             {
-              "name": "aside-footer"
+              "name": "aside-footer",
+              "description": "Pinned bottom of the aside (e.g. action buttons). Renders in the drawer too.\n                     Slot props: `{ isDrawer: boolean }`."
             },
             {
-              "name": "footer"
+              "name": "footer",
+              "description": "Bottom-of-page footer."
             }
           ],
           "source": {
@@ -2150,7 +2621,7 @@
         },
         {
           "name": "SkPageSidebarToggle",
-          "description": "",
+          "description": "Button that toggles one of SkPage's drawers. Thin wrapper around SkButton -- inherits the\ndesign system's chrome and ghost-variant hover/pressed behavior. Auto-connects to the nearest SkPage\nvia provide/inject, so no wiring is required; hides itself when the targeted panel is persistent.\nUse `side=\"sidebar\"` (default) for the left drawer and `side=\"aside\"` for the right. Default glyph is\na hamburger for the sidebar and a vertical kebab for the aside so both toggles can live in the same\nnavbar without visual collision; override via the default slot if you want something else.\n\n**Example:**\n\nTwin toggles in a navbar\n```vue\n<SkNavBar>\n    <template #leading><SkPageSidebarToggle /></template>\n    <template #brand>MyApp</template>\n    <template #actions><SkPageSidebarToggle side=\"aside\" /></template>\n</SkNavBar>\n```",
           "attributes": [
             {
               "name": "side",
@@ -2185,7 +2656,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Custom glyph. Replaces the built-in SVG. Should be inline-sized and inherit\n                `currentColor`."
             }
           ],
           "source": {
@@ -2195,8 +2667,17 @@
         },
         {
           "name": "SkPagination",
-          "description": "",
+          "description": "A pagination navigation component for splitting content across multiple pages. Automatically\ncalculates page ranges with ellipsis for large page counts and provides first/last and previous/next navigation\nbuttons. Use with `v-model` for two-way binding of the current page number.\n\n**Example:**\n\n```vue\n<SkPagination v-model=\"currentPage\" :total=\"50\" kind=\"primary\" />\n```\n\n**Example:**\n\nMinimal pagination (no first/last buttons)\n```vue\n<SkPagination\n    v-model=\"page\"\n    :total=\"10\"\n    :show-first-last=\"false\"\n    variant=\"outline\"\n/>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "textColor",
               "required": false,
@@ -2317,7 +2798,7 @@
         },
         {
           "name": "SkPaginationItem",
-          "description": "",
+          "description": "An individual pagination button used internally by SkPagination. Renders different content based\non its type: page numbers, navigation arrows, or ellipsis indicators. Inherits styling from the parent\nSkPagination component via Vue's provide/inject. Not typically used directly—use SkPagination instead.\n\n**Example:**\n\n```vue\n<!-- Used internally by SkPagination -->\n<SkPaginationItem type=\"page\" :page=\"5\" :active=\"true\" />\n<SkPaginationItem type=\"prev\" :page=\"4\" />\n<SkPaginationItem type=\"ellipsis\" />\n```",
           "attributes": [
             {
               "name": "page",
@@ -2372,8 +2853,35 @@
         },
         {
           "name": "SkPanel",
-          "description": "",
+          "description": "A foundational container component with beveled corners, borders, background colors, and an optional\ndecorative accent stripe. Panels serve as the base building block for higher-level components like SkCard and\nSkSidebar, providing consistent styling and theming across the design system.\n\n**Example:**\n\n```vue\n<SkPanel kind=\"primary\" size=\"lg\">\n    <p>Panel content goes here</p>\n</SkPanel>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -2437,7 +2945,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The main content of the panel. Accepts any valid Vue content including text, components, or HTML."
             }
           ],
           "source": {
@@ -2447,8 +2956,35 @@
         },
         {
           "name": "SkPopover",
-          "description": "",
+          "description": "A floating panel component for displaying rich interactive content anchored to a trigger element.\nCombines tooltip-like positioning with a card-like structure including optional header, body, and footer\nsections. Built on RekaUI's Popover primitive with full accessibility support, smart collision detection,\nand keyboard navigation. Use for contextual menus, confirmations, mini-forms, or any content that benefits\nfrom staying connected to its trigger.\n\n**Example:**\n\n```vue\n<SkPopover title=\"Quick Settings\" kind=\"primary\">\n  <template #trigger>\n    <SkButton icon><GearIcon /></SkButton>\n  </template>\n  <SkSwitch v-model=\"darkMode\" label=\"Dark mode\" />\n  <SkSwitch v-model=\"notifications\" label=\"Notifications\" />\n  <template #footer>\n    <SkButton variant=\"ghost\" size=\"sm\">Reset</SkButton>\n    <SkButton kind=\"primary\" size=\"sm\">Apply</SkButton>\n  </template>\n</SkPopover>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -2537,16 +3073,20 @@
           ],
           "slots": [
             {
-              "name": "trigger"
+              "name": "trigger",
+              "description": "The element that opens the popover when clicked. Uses `as-child` behavior so your\n  trigger element becomes the actual clickable trigger. Required slot."
             },
             {
-              "name": "header"
+              "name": "header",
+              "description": "Optional header content displayed after the title. Use for additional header elements\n  like badges, status indicators, or secondary actions."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Main body content of the popover. Can include any components, forms, or interactive content.\n  Scrolls if content exceeds available space."
             },
             {
-              "name": "footer"
+              "name": "footer",
+              "description": "Optional footer content, typically for action buttons. Commonly contains Cancel/Confirm\n  button pairs or other closing actions."
             }
           ],
           "source": {
@@ -2556,7 +3096,7 @@
         },
         {
           "name": "SkProgress",
-          "description": "",
+          "description": "A progress bar component for displaying completion status or loading states. Supports both\ndeterminate mode (showing specific progress percentage) and indeterminate mode (animated loading indicator\nwhen progress is unknown). Built on RekaUI's Progress primitive with beveled corner styling.\n\n**Example:**\n\n```vue\n<SkProgress :value=\"75\" kind=\"primary\" show-value />\n```\n\n**Example:**\n\nIndeterminate loading state\n```vue\n<SkProgress :value=\"null\" kind=\"accent\" />\n```\n\n**Example:**\n\nCustom colors with file upload\n```vue\n<SkProgress\n    :value=\"uploadProgress\"\n    base-color=\"oklch(0.7 0.2 145)\"\n    track-color=\"oklch(0.3 0.05 145)\"\n    show-value\n    value-position=\"right\"\n/>\n```",
           "attributes": [
             {
               "name": "value",
@@ -2646,8 +3186,35 @@
         },
         {
           "name": "SkRadio",
-          "description": "",
+          "description": "An individual radio button for mutually exclusive selection within a group. Must be used as\na child of SkRadioGroup, which manages the selection state and keyboard navigation. Built on RekaUI's\nRadioGroup primitive with beveled corner styling and full accessibility support.\n\n**Example:**\n\n```vue\n<SkRadioGroup v-model=\"selectedSize\" kind=\"primary\">\n    <SkRadio value=\"sm\" label=\"Small\" />\n    <SkRadio value=\"md\" label=\"Medium\" />\n    <SkRadio value=\"lg\" label=\"Large\" />\n</SkRadioGroup>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "value",
               "required": true,
@@ -2700,7 +3267,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Custom label content. Overrides the `label` prop when provided, allowing for rich\n                formatting, icons, or complex layouts alongside the radio button."
             }
           ],
           "source": {
@@ -2710,7 +3278,7 @@
         },
         {
           "name": "SkRadioGroup",
-          "description": "",
+          "description": "A container for SkRadio components that manages exclusive selection state and keyboard\nnavigation. Only one radio option can be selected at a time within a group. Built on RekaUI's\nRadioGroup primitive with full accessibility support including arrow key navigation and focus management.\n\n**Example:**\n\n```vue\n<SkRadioGroup v-model=\"paymentMethod\" kind=\"primary\" orientation=\"vertical\">\n    <SkRadio value=\"credit\" label=\"Credit Card\" />\n    <SkRadio value=\"debit\" label=\"Debit Card\" />\n    <SkRadio value=\"paypal\" label=\"PayPal\" />\n</SkRadioGroup>\n```",
           "attributes": [
             {
               "name": "orientation",
@@ -2785,7 +3353,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The SkRadio components that make up the group. Each radio should have a unique\n                `value` prop. Other content like labels or descriptions can also be included."
             }
           ],
           "source": {
@@ -2845,7 +3414,7 @@
             {
               "name": "fade",
               "required": false,
-              "description": "When true, fade the scrollable edges with a CSS mask so content visibly tapers\ninto/out of the viewport. Applies to whichever axis (or both) is scrollable.\nOverride the fade distance via the `--sk-scroll-area-fade` custom property\n(default 1.5rem).",
+              "description": "When true, fade the scrollable edges with a CSS mask so content visibly tapers\ninto/out of the viewport. Only edges with more content to scroll toward get the\nfade -- the top fade disappears at scrollTop=0, bottom fade at scroll end, etc.\nOverride the fade distance via the `--sk-scroll-area-fade` custom property\n(default 1rem).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2865,8 +3434,35 @@
         },
         {
           "name": "SkSelect",
-          "description": "",
+          "description": "A simple dropdown select for picking from predefined options. Unlike SkListbox which includes\na search input for filtering, SkSelect provides a clean trigger button that opens a dropdown panel.\nBuilt on RekaUI's Select primitive with full keyboard navigation and portal rendering.\n\n**Example:**\n\n```vue\n<SkSelect v-model=\"selectedCountry\" kind=\"primary\" placeholder=\"Select a country...\">\n    <SkSelectItem value=\"us\">United States</SkSelectItem>\n    <SkSelectItem value=\"uk\">United Kingdom</SkSelectItem>\n    <SkSelectItem value=\"ca\">Canada</SkSelectItem>\n</SkSelect>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -2910,7 +3506,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "SkSelectItem components representing the available options. Use SkSelectSeparator\n                to create visual dividers between groups of options."
             }
           ],
           "source": {
@@ -2920,7 +3517,7 @@
         },
         {
           "name": "SkSelectItem",
-          "description": "",
+          "description": "A selectable option within an SkSelect dropdown. When selected, the item displays a\ncheckmark indicator and its value is set as the select's v-model. Built on RekaUI's SelectItem\nwith keyboard navigation support.\n\n**Example:**\n\n```vue\n<SkSelect v-model=\"selected\">\n    <SkSelectItem value=\"option1\">First Option</SkSelectItem>\n    <SkSelectItem value=\"option2\">Second Option</SkSelectItem>\n    <SkSelectItem value=\"option3\" disabled>Unavailable Option</SkSelectItem>\n</SkSelect>\n```",
           "attributes": [
             {
               "name": "value",
@@ -2944,7 +3541,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The display content for this option. Can be plain text or rich content including\n                icons, formatted text, or custom layouts. This is what users see in the dropdown."
             }
           ],
           "source": {
@@ -2954,7 +3552,7 @@
         },
         {
           "name": "SkSelectSeparator",
-          "description": "",
+          "description": "A visual divider for organizing options within an SkSelect dropdown. Use to create\nlogical groups of related options without affecting selection behavior. Renders as a horizontal\nline between items with appropriate spacing.\n\n**Example:**\n\n```vue\n<SkSelect v-model=\"selected\">\n    <SkSelectItem value=\"recent1\">Recent Document 1</SkSelectItem>\n    <SkSelectItem value=\"recent2\">Recent Document 2</SkSelectItem>\n    <SkSelectSeparator />\n    <SkSelectItem value=\"all\">Browse All Documents...</SkSelectItem>\n</SkSelect>\n```",
           "source": {
             "module": "./src/components/Select/SkSelectSeparator.vue",
             "symbol": "default"
@@ -2962,8 +3560,35 @@
         },
         {
           "name": "SkSidebar",
-          "description": "",
+          "description": "A vertical navigation container designed for persistent page-level navigation. Built on\nSkPanel, it provides a scrollable area with a sticky position that remains visible as users scroll\nthe main content. Organize navigation links using SkSidebarSection for grouped items and SkSidebarItem\nfor individual navigation links.\n\n**Example:**\n\n```vue\n<SkSidebar kind=\"primary\" width=\"200px\">\n  <SkSidebarSection title=\"Getting Started\">\n    <SkSidebarItem as=\"RouterLink\" to=\"/docs/install\">Installation</SkSidebarItem>\n    <SkSidebarItem as=\"RouterLink\" to=\"/docs/usage\">Basic Usage</SkSidebarItem>\n  </SkSidebarSection>\n  <SkSidebarSection title=\"Components\">\n    <SkSidebarItem as=\"RouterLink\" to=\"/docs/button\">Button</SkSidebarItem>\n    <SkSidebarItem as=\"RouterLink\" to=\"/docs/input\">Input</SkSidebarItem>\n  </SkSidebarSection>\n</SkSidebar>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -3007,7 +3632,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Container for SkSidebarSection and/or SkSidebarItem components. Content is wrapped\n                in a scrollable nav element, allowing long navigation lists to scroll independently\n                of the main page content."
             }
           ],
           "source": {
@@ -3017,7 +3643,7 @@
         },
         {
           "name": "SkSidebarItem",
-          "description": "",
+          "description": "A navigation link item for use within SkSidebar. Renders as a polymorphic component that\ncan be an anchor tag, Vue Router's RouterLink, a button, or any other element/component. Provides\nconsistent styling with hover and active states that match the parent sidebar's theme.\n\n**Example:**\n\n```vue\n<!-- As a regular anchor -->\n<SkSidebarItem as=\"a\" href=\"/about\">About Us</SkSidebarItem>\n\n<!-- As Vue Router link -->\n<SkSidebarItem as=\"RouterLink\" to=\"/dashboard\" :active=\"route.path === '/dashboard'\">\n  Dashboard\n</SkSidebarItem>\n\n<!-- As a button for actions -->\n<SkSidebarItem as=\"button\" @click=\"openSettings\">Settings</SkSidebarItem>\n```",
           "attributes": [
             {
               "name": "as",
@@ -3042,7 +3668,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The navigation item's label content. Can be plain text or include icons and badges."
             }
           ],
           "source": {
@@ -3052,7 +3679,7 @@
         },
         {
           "name": "SkSidebarSection",
-          "description": "",
+          "description": "A grouping container for organizing related sidebar items under a common heading. Use\nsections to create logical categories in your navigation, such as \"Getting Started\", \"Components\",\nor \"Settings\". The section title appears as a small, muted heading above its items.\n\n**Example:**\n\n```vue\n<SkSidebarSection title=\"Documentation\">\n  <SkSidebarItem as=\"RouterLink\" to=\"/docs/intro\">Introduction</SkSidebarItem>\n  <SkSidebarItem as=\"RouterLink\" to=\"/docs/install\">Installation</SkSidebarItem>\n  <SkSidebarItem as=\"RouterLink\" to=\"/docs/config\">Configuration</SkSidebarItem>\n</SkSidebarSection>\n```",
           "attributes": [
             {
               "name": "title",
@@ -3066,7 +3693,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Container for SkSidebarItem components. Items are rendered as a vertical list\n                below the section title (if provided)."
             }
           ],
           "source": {
@@ -3076,7 +3704,7 @@
         },
         {
           "name": "SkSkeleton",
-          "description": "",
+          "description": "A loading placeholder component that displays animated shapes to indicate content is being fetched.\nSkeletons improve perceived performance by showing users the expected layout before data arrives. Supports\nmultiple shape variants (text, rectangular, circular, square) with customizable dimensions and beveled corners\nto match the design system aesthetic.\n\n**Example:**\n\n```vue\n<!-- Text placeholder -->\n<SkSkeleton variant=\"text\" width=\"200px\" />\n\n<!-- Avatar placeholder -->\n<SkSkeleton variant=\"circular\" width=\"48px\" />\n\n<!-- Card image placeholder with beveled corners -->\n<SkSkeleton\n    variant=\"rectangular\"\n    width=\"100%\"\n    height=\"200px\"\n    :corners=\"['top-left', 'top-right']\"\n/>\n```\n\n**Example:**\n\nLoading card skeleton\n```vue\n<SkCard>\n    <template #media>\n        <SkSkeleton variant=\"rectangular\" height=\"180px\" />\n    </template>\n    <SkSkeleton variant=\"text\" width=\"70%\" />\n    <SkSkeleton variant=\"text\" width=\"100%\" />\n    <SkSkeleton variant=\"text\" width=\"40%\" />\n</SkCard>\n```",
           "attributes": [
             {
               "name": "variant",
@@ -3146,7 +3774,7 @@
         },
         {
           "name": "SkSlider",
-          "description": "",
+          "description": "A range slider component for selecting numeric values within a defined range. Supports both\nsingle-value selection and multi-thumb range selection modes. Built on RekaUI's Slider primitive with\nfull keyboard accessibility, beveled styling, and horizontal or vertical orientation.\n\n**Example:**\n\n```vue\n<!-- Single value slider -->\n<SkSlider v-model=\"volume\" :min=\"0\" :max=\"100\" kind=\"primary\" />\n\n<!-- Range slider with two thumbs -->\n<SkSlider v-model=\"priceRange\" :min=\"0\" :max=\"1000\" :step=\"10\" />\n```",
           "attributes": [
             {
               "name": "modelValue",
@@ -3280,7 +3908,7 @@
         },
         {
           "name": "SkSpinner",
-          "description": "",
+          "description": "An animated loading indicator component with multiple visual variants. Use spinners to indicate\nthat content is loading or an action is in progress. The component includes appropriate ARIA attributes\n(role=\"status\", aria-live=\"polite\") for screen reader accessibility.\n\n**Example:**\n\n```vue\n<SkSpinner kind=\"primary\" />\n```\n\n**Example:**\n\nDifferent variants\n```vue\n<SkSpinner variant=\"circular\" />\n<SkSpinner variant=\"dots\" />\n<SkSpinner variant=\"crosshair\" />\n```\n\n**Example:**\n\nLoading button state\n```vue\n<SkButton :disabled=\"loading\">\n    <SkSpinner v-if=\"loading\" size=\"sm\" color=\"currentColor\" />\n    <span v-else>Submit</span>\n</SkButton>\n```",
           "attributes": [
             {
               "name": "kind",
@@ -3460,8 +4088,35 @@
         },
         {
           "name": "SkSwitch",
-          "description": "",
+          "description": "A toggle switch component for binary on/off choices. Built on RekaUI's Switch primitive with\nfull keyboard accessibility (Space/Enter to toggle). Supports dynamic labels that animate when the state\nchanges and separate theming for the track and thumb. Use with `v-model` for two-way binding.\n\n**Example:**\n\n```vue\n<SkSwitch v-model=\"enabled\" label=\"Enable notifications\" />\n<SkSwitch v-model=\"darkMode\" label-on=\"Dark\" label-off=\"Light\" kind=\"primary\" />\n<SkSwitch v-model=\"premium\" base-color=\"oklch(0.7 0.25 45)\" label=\"Premium\" />\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "modelValue",
               "required": true,
@@ -3589,13 +4244,16 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Custom label content that overrides all label props. Use for complex labels with icons."
             },
             {
-              "name": "label-on"
+              "name": "label-on",
+              "description": "Custom content for the \"on\" state label. Overrides `labelOn` prop when provided."
             },
             {
-              "name": "label-off"
+              "name": "label-off",
+              "description": "Custom content for the \"off\" state label. Overrides `labelOff` prop when provided."
             }
           ],
           "source": {
@@ -3605,7 +4263,7 @@
         },
         {
           "name": "SkTab",
-          "description": "",
+          "description": "An individual tab trigger button used within `SkTabList` to switch between tab panels.\nClicking a tab activates the corresponding `SkTabPanel` with a matching `name`. Supports keyboard\nnavigation (arrow keys), focus management, and disabled states.\n\n**Example:**\n\n```vue\n<SkTabList>\n    <SkTab name=\"files\" label=\"Files\" />\n    <SkTab name=\"settings\" kind=\"accent\">\n        <template #icon><GearIcon /></template>\n        Settings\n    </SkTab>\n    <SkTab name=\"help\" disabled>Help</SkTab>\n</SkTabList>\n```",
           "attributes": [
             {
               "name": "name",
@@ -3649,10 +4307,12 @@
           ],
           "slots": [
             {
-              "name": "icon"
+              "name": "icon",
+              "description": "Optional icon displayed before the tab label. Useful for visual indicators."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Custom tab label content. Overrides the `label` prop when provided."
             }
           ],
           "source": {
@@ -3662,7 +4322,7 @@
         },
         {
           "name": "SkTabList",
-          "description": "",
+          "description": "A container component that holds and arranges `SkTab` trigger buttons. Provides the visual\ntab bar with appropriate ARIA `tablist` role. The orientation determines whether tabs are arranged\nhorizontally (row) or vertically (column) and affects keyboard navigation direction.\n\n**Example:**\n\n```vue\n<SkTabs v-model=\"activeTab\">\n    <SkTabList>\n        <SkTab name=\"tab1\">First Tab</SkTab>\n        <SkTab name=\"tab2\">Second Tab</SkTab>\n    </SkTabList>\n    <SkTabPanels>\n        <!-- Panels here -->\n    </SkTabPanels>\n</SkTabs>\n```",
           "attributes": [
             {
               "name": "orientation",
@@ -3677,7 +4337,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Contains `SkTab` components that make up the tab triggers."
             }
           ],
           "source": {
@@ -3687,7 +4348,7 @@
         },
         {
           "name": "SkTabPanel",
-          "description": "",
+          "description": "A content container that displays when its corresponding `SkTab` is active. The panel is\nautomatically shown or hidden based on the active tab state in the parent `SkTabs`. By default, inactive\npanels are unmounted from the DOM to improve performance; use `keepAlive` to preserve state.\n\n**Example:**\n\n```vue\n<SkTabPanels>\n    <SkTabPanel name=\"overview\">\n        <h2>Overview</h2>\n        <p>Welcome to the overview section.</p>\n    </SkTabPanel>\n    <SkTabPanel name=\"form\" keep-alive>\n        <!-- Form state preserved when switching tabs -->\n        <FormComponent />\n    </SkTabPanel>\n</SkTabPanels>\n```",
           "attributes": [
             {
               "name": "name",
@@ -3711,7 +4372,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The content to display when this panel's tab is active."
             }
           ],
           "source": {
@@ -3721,10 +4383,11 @@
         },
         {
           "name": "SkTabPanels",
-          "description": "",
+          "description": "A container component that groups `SkTabPanel` components together. Provides semantic structure\nand consistent styling for the content area of a tabbed interface. While technically optional, using this\nwrapper ensures proper layout and spacing between the tab list and content panels.\n\n**Example:**\n\n```vue\n<SkTabs v-model=\"activeTab\">\n    <SkTabList>\n        <SkTab name=\"a\">Tab A</SkTab>\n        <SkTab name=\"b\">Tab B</SkTab>\n    </SkTabList>\n    <SkTabPanels>\n        <SkTabPanel name=\"a\">Content for Tab A</SkTabPanel>\n        <SkTabPanel name=\"b\">Content for Tab B</SkTabPanel>\n    </SkTabPanels>\n</SkTabs>\n```",
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Contains `SkTabPanel` components, one for each tab in the interface."
             }
           ],
           "source": {
@@ -3734,8 +4397,35 @@
         },
         {
           "name": "SkTable",
-          "description": "",
+          "description": "A flexible data table component with beveled corner styling and extensive visual customization.\nUse SkTable as a wrapper around standard HTML table elements (`<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`).\nSupports row striping, hover highlighting, configurable borders, and adapts to both light and dark backgrounds.\n\n**Example:**\n\n```vue\n<SkTable striped hoverable>\n    <thead>\n        <tr><th>Name</th><th>Status</th></tr>\n    </thead>\n    <tbody>\n        <tr><td>Item 1</td><td>Active</td></tr>\n        <tr><td>Item 2</td><td>Pending</td></tr>\n    </tbody>\n</SkTable>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -3819,7 +4509,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Standard HTML table content including `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`,\n                and `<td>` elements."
             }
           ],
           "source": {
@@ -3829,8 +4520,35 @@
         },
         {
           "name": "SkTabs",
-          "description": "",
+          "description": "A tabbed interface component for organizing content into switchable panels. Built on RekaUI's\nTabs primitive with full keyboard navigation (arrow keys, Home, End) and ARIA tab pattern compliance.\nUse with `v-model` to control the active tab programmatically.\n\n**Example:**\n\n```vue\n<SkTabs v-model=\"activeTab\" kind=\"primary\">\n    <SkTabList>\n        <SkTab name=\"overview\">Overview</SkTab>\n        <SkTab name=\"details\">Details</SkTab>\n    </SkTabList>\n    <SkTabPanels>\n        <SkTabPanel name=\"overview\">Overview content here</SkTabPanel>\n        <SkTabPanel name=\"details\">Details content here</SkTabPanel>\n    </SkTabPanels>\n</SkTabs>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "modelValue",
               "required": true,
@@ -3888,7 +4606,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Contains `SkTabList` and `SkTabPanels` components that make up the tabbed interface."
             }
           ],
           "source": {
@@ -3898,8 +4617,35 @@
         },
         {
           "name": "SkTag",
-          "description": "",
+          "description": "A compact label component for displaying metadata, categories, or status information. Tags are\nideal for showing keywords, filter chips, selected items in multi-selects, or status indicators. Supports\nfour visual variants (solid, outline, subtle, ghost) and optional removable functionality with a dismiss button.\n\n**Example:**\n\n```vue\n<SkTag kind=\"primary\">Featured</SkTag>\n<SkTag kind=\"success\" removable @remove=\"handleRemove\">Active</SkTag>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -3948,7 +4694,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "The tag label content. Can include text, icons, or any inline elements."
             }
           ],
           "source": {
@@ -3958,8 +4705,35 @@
         },
         {
           "name": "SkTagsInput",
-          "description": "",
+          "description": "A multi-value tag input for collecting lists of string values. Users add tags by typing\nand pressing Enter (or pasting multiple values), and remove them by clicking the delete button or\npressing Backspace. Built on RekaUI's TagsInput primitive with full keyboard accessibility.\n\n**Example:**\n\n```vue\n<SkTagsInput\n    v-model=\"skills\"\n    kind=\"primary\"\n    placeholder=\"Add a skill...\"\n    :max=\"10\"\n/>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -4048,8 +4822,35 @@
         },
         {
           "name": "SkTextarea",
-          "description": "",
+          "description": "A multiline text input component for longer form content like descriptions, comments, or messages.\nFeatures semantic color theming, validation state support, and configurable height via the rows prop.\nIntegrates with SkField for labels and error messages. Use with `v-model` for two-way data binding.\n\n**Example:**\n\n```vue\n<SkTextarea v-model=\"description\" placeholder=\"Enter a description...\" :rows=\"6\" />\n<SkTextarea v-model=\"notes\" kind=\"primary\" size=\"lg\" />\n<SkField label=\"Bio\" :error=\"errors.bio\">\n  <SkTextarea v-model=\"bio\" name=\"bio\" :rows=\"4\" />\n</SkField>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -4148,7 +4949,7 @@
         },
         {
           "name": "SkTheme",
-          "description": "",
+          "description": "A theme provider component that establishes the color scheme context for all child components.\nPlace SkTheme at the root of your application or wrap specific sections to apply different themes.\nThe component sets the `data-scheme` attribute and provides theme context to portal components\n(SkDropdown, SkModal, SkTooltip, etc.) so they render with correct colors even when portaled to the body.\n\n**Example:**\n\n```vue\n<SkTheme theme=\"colorful\">\n    <SkButton kind=\"primary\">Themed Button</SkButton>\n    <SkDropdown trigger-text=\"Menu\">\n        <SkDropdownMenuItem>Item 1</SkDropdownMenuItem>\n    </SkDropdown>\n</SkTheme>\n```",
           "attributes": [
             {
               "name": "theme",
@@ -4163,7 +4964,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "All application content that should inherit this theme context. Nested SkTheme components\n                can override the theme for subsections of the UI."
             }
           ],
           "source": {
@@ -4173,7 +4975,7 @@
         },
         {
           "name": "SkToast",
-          "description": "",
+          "description": "Internal toast notification component used by SkToastProvider. This component renders individual\ntoast messages with an icon, title, message, and optional close button. Built on RekaUI's Toast primitive\nwith semantic color variants and auto-dismiss functionality. Not exported directly - use the `useToast()`\ncomposable to create toasts programmatically.\n\n**Example:**\n\n```vue\n<!-- Used internally by SkToastProvider - do not use directly -->\n<SkToast\n  id=\"toast-1\"\n  kind=\"success\"\n  title=\"Success!\"\n  message=\"Your changes have been saved.\"\n  :duration=\"5000\"\n  :closable=\"true\"\n  @dismiss=\"handleDismiss\"\n/>\n```",
           "attributes": [
             {
               "name": "id",
@@ -4242,7 +5044,7 @@
         },
         {
           "name": "SkToastProvider",
-          "description": "",
+          "description": "Toast notification system provider that manages and displays toast messages. Wrap your application\n(or a section of it) with this component to enable toast notifications. Use the `useToast()` composable from\nanywhere within the provider tree to show notifications programmatically. Supports swipe-to-dismiss, keyboard\nnavigation, and configurable positioning.\n\n**Example:**\n\n```vue\n<!-- In your App.vue or layout component -->\n<SkTheme>\n  <SkToastProvider position=\"bottom-right\" :duration=\"5000\">\n    <RouterView />\n  </SkToastProvider>\n</SkTheme>\n```\n\n**Example:**\n\nUsing the toast API in any child component\n```ts\nimport { useToast } from 'sleekspace-ui';\n\nconst toast = useToast();\ntoast.add({ kind: 'success', message: 'Settings saved!' });\n```",
           "attributes": [
             {
               "name": "position",
@@ -4297,7 +5099,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Your application content. All child components can access the toast API via useToast()."
             }
           ],
           "source": {
@@ -4478,8 +5281,35 @@
         },
         {
           "name": "SkTooltip",
-          "description": "",
+          "description": "A tooltip component for displaying contextual hints on hover or focus. Built on RekaUI's Tooltip\nprimitive with beveled corner styling and full accessibility support. Works standalone with its own timing,\nor wrap multiple tooltips in SkTooltipProvider for coordinated \"skip delay\" behavior where moving quickly\nbetween tooltips shows them instantly.\n\n**Example:**\n\n```vue\n<SkTooltip side=\"right\" kind=\"primary\">\n  <template #trigger>\n    <SkButton icon>?</SkButton>\n  </template>\n  Click here to learn more about this feature.\n</SkTooltip>\n```",
           "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "kind",
               "required": false,
@@ -4553,10 +5383,12 @@
           ],
           "slots": [
             {
-              "name": "trigger"
+              "name": "trigger",
+              "description": "The element that triggers the tooltip on hover/focus. Use `as-child` behavior - the trigger\n  slot content becomes the actual trigger element. Required slot."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "The tooltip content to display. Can include text, formatted content, or simple components.\n  Keep content brief for tooltips; use SkPopover for richer interactions."
             }
           ],
           "source": {
@@ -4566,7 +5398,7 @@
         },
         {
           "name": "SkTooltipProvider",
-          "description": "",
+          "description": "Provider component that enables coordinated tooltip behavior across all child SkTooltip instances.\nWhen tooltips share a provider, they gain \"skip delay\" functionality - users can quickly move between tooltips\nwithout waiting for the delay each time. Also centralizes configuration like delay duration and accessibility\noptions. Optional but recommended for apps with multiple tooltips.\n\n**Example:**\n\n```vue\n<template>\n  <SkTheme theme=\"colorful\">\n    <SkTooltipProvider :delay-duration=\"300\" :skip-delay-duration=\"100\">\n      <RouterView />\n    </SkTooltipProvider>\n  </SkTheme>\n</template>\n```",
           "attributes": [
             {
               "name": "delayDuration",
@@ -4631,7 +5463,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Your application content containing SkTooltip components. All descendant tooltips\n  will share the provider's timing and behavior configuration."
             }
           ],
           "source": {
@@ -4788,4 +5621,4 @@
       ]
     }
   }
-}
+}