@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.3

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.2.0",
+  "version": "0.2.0-beta.2",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -14,7 +14,7 @@
             {
               "name": "type",
               "required": false,
-              "description": "Single or multiple open items",
+              "description": "Controls whether one or multiple accordion items can be open simultaneously.\nIn 'single' mode, opening a new item automatically closes the previously open item.\nIn 'multiple' mode, users can expand any number of items independently.",
               "value": {
                 "kind": "expression",
                 "type": "SkAccordionType"
@@ -24,7 +24,7 @@
             {
               "name": "modelValue",
               "required": false,
-              "description": "Controlled state (v-model)",
+              "description": "The value(s) of currently open accordion item(s). Use with `v-model` for two-way binding.\nIn 'single' mode, this is a string matching one item's `value` prop.\nIn 'multiple' mode, this is an array of strings matching multiple items' `value` props.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -34,7 +34,7 @@
             {
               "name": "collapsible",
               "required": false,
-              "description": "Allow closing all items (single mode only)",
+              "description": "When true and in 'single' mode, allows all items to be collapsed by clicking the open item again.\nWhen false, one item must always remain open (the first click selects, subsequent clicks don't collapse).\nThis prop has no effect in 'multiple' mode where items are always independently collapsible.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -44,7 +44,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the accordion's header and border colors. The kind is automatically\ninherited by all child SkAccordionItem components unless they specify their own kind.\nSemantic kinds (neutral, primary, accent, etc.) adapt to your theme.",
               "value": {
                 "kind": "expression",
                 "type": "SkAccordionKind"
@@ -54,7 +54,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disable all items",
+              "description": "When true, disables all accordion items. Items cannot be expanded or collapsed, and\nthe accordion appears with reduced opacity. Individual items can also be disabled\nindependently via their own `disabled` prop.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -84,7 +84,7 @@
             {
               "name": "value",
               "required": true,
-              "description": "Required unique identifier",
+              "description": "A unique identifier for this accordion item. This value is used by the parent SkAccordion\nto track which item(s) are currently open. Must be unique among siblings within the same\naccordion. The value is exposed in v-model bindings on the parent accordion.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -93,7 +93,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Title text (overridden by title slot)",
+              "description": "Text displayed in the accordion item's header/trigger button. This is the clickable\narea that expands or collapses the content. Can be overridden with the `title` slot\nfor custom header content including icons, badges, or formatted text.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -103,7 +103,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disable this item",
+              "description": "When true, this specific accordion item cannot be expanded or collapsed. The item\nappears with reduced opacity and the cursor changes to not-allowed. If the item\nwas already open when disabled, it remains in its current state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -113,7 +113,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Override parent kind",
+              "description": "Overrides the semantic color kind inherited from the parent SkAccordion. Use this\nto highlight specific items differently, such as marking one section as 'warning'\nor 'danger'. When not specified, the item uses the parent accordion's kind.",
               "value": {
                 "kind": "expression",
                 "type": "SkAccordionKind"
@@ -141,7 +141,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic kind determining the alert color and icon (info, success, warning, danger)",
+              "description": "Semantic kind that determines the alert's color scheme and default icon. Each kind\nconveys a different meaning: 'info' for general information, 'success' for positive\nconfirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.",
               "value": {
                 "kind": "expression",
                 "type": "SkAlertKind"
@@ -151,7 +151,7 @@
             {
               "name": "prominent",
               "required": false,
-              "description": "Whether to use prominent styling with darker background and bolder appearance",
+              "description": "When true, applies prominent styling with a more vivid background color and stronger\nvisual presence. Use prominent alerts for critical messages that require immediate\nuser attention, such as errors or important warnings.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -179,7 +179,7 @@
             {
               "name": "src",
               "required": false,
-              "description": "Image source URL",
+              "description": "URL of the avatar image to display. When provided, the component attempts to load and display\nthis image. If the image fails to load (404, network error, etc.), the component automatically\nfalls back to initials or the default icon. Supports any valid image URL including data URIs.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -189,7 +189,7 @@
             {
               "name": "alt",
               "required": false,
-              "description": "Alt text for image",
+              "description": "Alternative text for the avatar image, used for accessibility. Screen readers announce this\ntext, so provide meaningful descriptions like \"Jane Doe's profile photo\" rather than generic\ntext like \"avatar\". Only applies when displaying an image.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -199,7 +199,7 @@
             {
               "name": "initials",
               "required": false,
-              "description": "Fallback initials (1-2 characters)",
+              "description": "Fallback text to display when no image is provided or the image fails to load. Typically\na user's initials (first and last name letters). Automatically truncated to 2 characters\nand uppercased. If neither src nor initials are provided, displays the default user icon.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -209,7 +209,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the avatar's background and text colors when displaying\ninitials or the fallback icon. Has no visible effect when displaying an image. Semantic kinds\n(neutral, primary, accent, info, success, warning, danger) adapt to your theme.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -219,7 +219,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Avatar size",
+              "description": "Avatar size controlling both dimensions and text/icon scaling. Available sizes: 'xs' (extra\nsmall, 24px), 'sm' (small, 32px), 'md' (medium, 40px), 'lg' (large, 48px), 'xl' (extra large,\n64px), '2xl' (double extra large, 80px). Choose based on context: 'sm' for lists, 'lg' for\nprofile headers, 'xl' for profile pages.",
               "value": {
                 "kind": "expression",
                 "type": "SkAvatarSize"
@@ -229,7 +229,7 @@
             {
               "name": "baseColor",
               "required": false,
-              "description": "Custom background color (overrides kind)",
+              "description": "Custom background color that overrides the kind's default. Use for brand colors, user-selected\ncolors, or dynamically generated colors based on user ID. Accepts any valid CSS color value.\nOnly visible when displaying initials or the fallback icon.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -239,7 +239,7 @@
             {
               "name": "textColor",
               "required": false,
-              "description": "Custom text color",
+              "description": "Custom text/icon color that overrides the kind's default. Should provide sufficient contrast\nagainst baseColor for accessibility. Accepts any valid CSS color value. Only visible when\ndisplaying initials or the fallback icon.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -264,15 +264,17 @@
             {
               "name": "to",
               "required": false,
+              "description": "Vue Router destination for client-side navigation. When provided, the item renders as a\n`RouterLink` component. Accepts any valid `RouteLocationRaw` value including path strings,\nnamed routes, and route objects with params.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "TSIndexedAccessType"
               },
               "default": "undefined"
             },
             {
               "name": "href",
               "required": false,
+              "description": "URL for standard anchor link navigation. When provided (and `to` is not set), the item\nrenders as an `<a>` element. Use this for external links or non-Vue-Router navigation.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -282,6 +284,7 @@
             {
               "name": "current",
               "required": false,
+              "description": "When true, marks this item as the current page in the breadcrumb trail. The item renders\nas a non-interactive `<span>` and receives `aria-current=\"page\"` for accessibility.\nTypically used on the last item in the breadcrumb list.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -291,6 +294,7 @@
             {
               "name": "disabled",
               "required": false,
+              "description": "When true, the item is disabled and cannot be interacted with. The item renders as a\nnon-interactive `<span>` with reduced opacity. Use for items that represent inaccessible\nor locked sections of the application.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -318,6 +322,7 @@
             {
               "name": "separator",
               "required": false,
+              "description": "Custom separator character or string to display. When not provided, inherits the separator\nfrom the parent `SkBreadcrumbs` component. Use this to override specific separators while\nkeeping others consistent with the parent setting.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -353,22 +358,24 @@
               "default": "undefined"
             },
             {
-              "name": "separator",
+              "name": "kind",
               "required": false,
+              "description": "Semantic color kind that controls the appearance of breadcrumb links. The kind affects link colors\nfor normal, hover, and active states. All child `SkBreadcrumbItem` components inherit this kind.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "TSIndexedAccessType"
               },
-              "default": "'/'"
+              "default": "'neutral'"
             },
             {
-              "name": "kind",
+              "name": "separator",
               "required": false,
+              "description": "Character or string displayed between breadcrumb items. Common separators include '/', '>', and\nunicode characters like '\\u203A' (single right-pointing angle quotation mark). Can be overridden\non individual `SkBreadcrumbSeparator` components for custom patterns.",
               "value": {
                 "kind": "expression",
-                "type": "SkBreadcrumbsKind"
+                "type": "string"
               },
-              "default": "'neutral'"
+              "default": "'/'"
             }
           ],
           "source": {
@@ -383,7 +390,7 @@
             {
               "name": "type",
               "required": false,
-              "description": "HTML button type attribute",
+              "description": "The HTML `type` attribute for the button element. Only applies when rendering as a `<button>`\n(i.e., when neither `href` nor `to` props are provided). Use 'submit' for form submission\nbuttons and 'reset' for form reset buttons.",
               "value": {
                 "kind": "expression",
                 "type": "SkButtonType"
@@ -393,7 +400,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the button's color scheme. Semantic kinds (neutral, primary,\naccent, etc.) adapt to your theme colors, while color kinds (neon-blue, neon-purple, etc.)\nprovide fixed branding colors that remain consistent across themes.",
               "value": {
                 "kind": "expression",
                 "type": "SkButtonKind"
@@ -403,7 +410,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Visual variant style",
+              "description": "Visual variant that determines the button's styling approach. 'solid' provides a filled\nbackground, 'outline' shows a bordered button with transparent background, and 'ghost'\nrenders a minimal button with no background or border until hovered.",
               "value": {
                 "kind": "expression",
                 "type": "SkButtonVariant"
@@ -413,7 +420,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Button size",
+              "description": "Button size controlling padding, font size, and overall dimensions. Available sizes:\n'sm' (small, compact), 'md' (medium, default), 'lg' (large), 'xl' (extra large).\nIcon-only buttons automatically adjust to square proportions at each size.",
               "value": {
                 "kind": "expression",
                 "type": "SkButtonSize"
@@ -423,7 +430,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, disables the button preventing all user interaction. The button appears with\nreduced opacity and the cursor changes to not-allowed. Also disables any navigation\nfor link-style buttons.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -433,7 +440,7 @@
             {
               "name": "loading",
               "required": false,
-              "description": "Loading state with spinner",
+              "description": "When true, displays a loading spinner and disables the button. The button content remains\nvisible but dimmed while the spinner overlays it. Use this to indicate async operations\nlike form submissions or data fetching.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -443,7 +450,7 @@
             {
               "name": "pressed",
               "required": false,
-              "description": "Toggle pressed state",
+              "description": "Toggle state for buttons used as toggle controls. When true, applies the pressed visual\nstate and sets `aria-pressed=\"true\"` for accessibility. Use with `@click` to toggle\nthe value for toolbar buttons or toggle switches.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -453,7 +460,7 @@
             {
               "name": "href",
               "required": false,
-              "description": "Href for anchor tag rendering",
+              "description": "URL for the button to navigate to. When provided, the button renders as an `<a>` element\ninstead of a `<button>`. Use for external links or simple navigation that doesn't require\nVue Router.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -463,7 +470,7 @@
             {
               "name": "to",
               "required": false,
-              "description": "Route for router-link rendering",
+              "description": "Vue Router route for the button to navigate to. When provided, the button renders as a\n`<router-link>` component. Accepts either a string path or a route location object with\nname, params, and query properties.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -497,7 +504,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the card",
+              "description": "Semantic color kind that controls the card's border color and decorative accent stripe.\nSemantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,\nwhile color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors.",
               "value": {
                 "kind": "expression",
                 "type": "SkCardKind"
@@ -507,7 +514,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size of the card affecting padding and spacing",
+              "description": "Controls the internal padding of the card's content areas. Larger sizes provide more\nbreathing room, while smaller sizes create compact layouts. The header, content, and\nfooter sections all respect this sizing. Available: 'sm', 'md', 'lg', 'xl'.",
               "value": {
                 "kind": "expression",
                 "type": "SkPanelSize"
@@ -517,7 +524,7 @@
             {
               "name": "showDecoration",
               "required": false,
-              "description": "Whether to show the decorative accent border (when not explicitly disabled by noDecoration)",
+              "description": "When true, displays a colored accent stripe along the top edge of the card.\nCan be explicitly set to override the default behavior. Takes precedence over\n`noDecoration` when explicitly set to true.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -527,7 +534,7 @@
             {
               "name": "noDecoration",
               "required": false,
-              "description": "Explicitly disable the decorative accent border",
+              "description": "When true, explicitly disables the decorative accent stripe. Use this for cleaner\ncard appearances where the color accent is not needed. This is overridden if\n`showDecoration` is explicitly set to true.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -537,7 +544,7 @@
             {
               "name": "noBorder",
               "required": false,
-              "description": "Whether to hide the card border entirely",
+              "description": "When true, removes the border entirely from the card. Useful for flat card designs\nor when cards are displayed on contrasting backgrounds. Note: This automatically\ndisables the decoration stripe since it's part of the border styling.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -547,7 +554,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Optional title text displayed in the header section",
+              "description": "Title text displayed prominently in the card header section. The title is rendered\nas an h3 element for proper document semantics. For more complex headers, use the\n`header` slot instead of or alongside this prop.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -557,7 +564,7 @@
             {
               "name": "headerColor",
               "required": false,
-              "description": "Custom background color for the card header",
+              "description": "Custom CSS background color for the header section only. Accepts any valid CSS color\nvalue (hex, rgb, oklch, etc.). Use this to create visual distinction between the\nheader and content areas, or to match brand colors.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -567,7 +574,7 @@
             {
               "name": "scrollable",
               "required": false,
-              "description": "Makes the content area scrollable (card needs a constrained height)",
+              "description": "When true, makes the content area scrollable with a fixed maximum height. The card\nitself must have a constrained height (via CSS or parent container) for scrolling\nto take effect. Header and footer remain fixed while content scrolls.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -601,7 +608,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the checkbox appearance when checked. Semantic kinds\n(neutral, primary, accent, etc.) adapt to your theme, while color kinds (neon-blue,\nneon-purple, etc.) provide fixed branding colors.",
               "value": {
                 "kind": "expression",
                 "type": "SkCheckboxKind"
@@ -611,7 +618,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Checkbox size",
+              "description": "Checkbox size. Controls both the checkbox box dimensions and the label text size.\nAvailable sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkCheckboxSize"
@@ -621,7 +628,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, the checkbox is disabled and cannot be interacted with. The checkbox\nappears with reduced opacity and the cursor changes to not-allowed.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -631,7 +638,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required for form validation",
+              "description": "When true, marks the checkbox as required for form validation. This does not\nadd visual indication—use a SkField wrapper for required field styling.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -641,7 +648,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Form field name",
+              "description": "The form field name used when submitting the checkbox value in a form.\nRequired for native form submission.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -651,7 +658,7 @@
             {
               "name": "label",
               "required": false,
-              "description": "Label text (can be overridden by default slot)",
+              "description": "Label text displayed next to the checkbox. Can be overridden by the default slot\nfor custom label content (icons, formatted text, etc.).",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -676,7 +683,7 @@
             {
               "name": "open",
               "required": false,
-              "description": "Controlled state (v-model:open)",
+              "description": "Controls the expanded/collapsed state of the component. Use with `v-model:open` for\ntwo-way binding. When true, the content is visible; when false, it's hidden. If not\nprovided, the component manages its own state internally starting with `defaultOpen`.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -686,7 +693,7 @@
             {
               "name": "defaultOpen",
               "required": false,
-              "description": "Initial uncontrolled state",
+              "description": "The initial expanded state when the component is first rendered in uncontrolled mode.\nOnly applies when the `open` prop is not provided. After initial render, the component\nmanages its own state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -696,7 +703,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disable interaction",
+              "description": "When true, disables the trigger and prevents state changes. The current expanded/collapsed\nstate is preserved but cannot be changed by user interaction. The trigger element appears\nwith reduced opacity and cursor changes to not-allowed.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -706,7 +713,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the default trigger button appearance. Semantic kinds\n(neutral, primary, accent, etc.) adapt to your theme, while color kinds provide fixed\nbranding colors. Only applies when using the default trigger; ignored when using the\ntrigger slot.",
               "value": {
                 "kind": "expression",
                 "type": "SkCollapsibleKind"
@@ -716,7 +723,7 @@
             {
               "name": "triggerText",
               "required": false,
-              "description": "Text for default trigger",
+              "description": "Label text for the default trigger button. Displayed alongside the animated chevron\nicon. Only applies when the trigger slot is not provided. For more control over the\ntrigger appearance, use the trigger slot instead.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -749,7 +756,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Orientation of the divider line (horizontal or vertical)",
+              "description": "Controls the direction of the divider line. Use 'horizontal' for separating\nvertically stacked content (the divider spans width), or 'vertical' for\nseparating horizontally arranged elements (the divider spans height).",
               "value": {
                 "kind": "expression",
                 "type": "SkDividerOrientation"
@@ -759,7 +766,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the divider",
+              "description": "Semantic color kind that controls the divider's line color. Semantic kinds\n(neutral, primary, accent, etc.) adapt to your theme. Use colored dividers\nsparingly to draw attention to important content boundaries.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -769,7 +776,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Visual variant (subtle for lighter appearance)",
+              "description": "Visual intensity variant for the divider. The default variant provides a\nclearly visible line, while 'subtle' reduces opacity for a softer, less\nprominent separation that doesn't compete with content for attention.",
               "value": {
                 "kind": "expression",
                 "type": "SkDividerVariant"
@@ -779,7 +786,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size of the divider (controls thickness and spacing)",
+              "description": "Controls the thickness of the divider line and the spacing (margin) around it.\nLarger sizes create bolder visual breaks between content sections, while smaller\nsizes provide minimal separation. Available: 'sm', 'md', 'lg', 'xl'.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentSize"
@@ -799,7 +806,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the menu's accent colors for hover states and\nfocus indicators. The kind is inherited by nested SkDropdownSubmenu components\nunless they specify their own kind.",
               "value": {
                 "kind": "expression",
                 "type": "SkDropdownKind"
@@ -809,7 +816,7 @@
             {
               "name": "triggerText",
               "required": false,
-              "description": "Text for default trigger button (use trigger slot for custom trigger)",
+              "description": "Text displayed on the default trigger button. Only used when the trigger slot\nis not provided. For custom trigger elements (icons, avatar buttons, etc.),\nuse the trigger slot instead.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -819,7 +826,7 @@
             {
               "name": "side",
               "required": false,
-              "description": "Side of the trigger to position menu",
+              "description": "Which side of the trigger element to position the dropdown menu. The menu\nwill automatically flip to the opposite side if there isn't enough space.\nThe caret icon on the default trigger rotates to match this direction.",
               "value": {
                 "kind": "expression",
                 "type": "SkDropdownSide"
@@ -829,7 +836,7 @@
             {
               "name": "align",
               "required": false,
-              "description": "Alignment relative to trigger",
+              "description": "Horizontal alignment of the dropdown menu relative to the trigger. 'start'\naligns the menu's left edge with the trigger's left edge, 'center' centers\nthe menu, and 'end' aligns right edges.",
               "value": {
                 "kind": "expression",
                 "type": "SkDropdownAlign"
@@ -839,7 +846,7 @@
             {
               "name": "sideOffset",
               "required": false,
-              "description": "Offset from the trigger in pixels",
+              "description": "Distance in pixels between the trigger element and the dropdown menu.\nIncrease for more visual separation or decrease for a tighter connection\nto the trigger element.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -867,7 +874,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, the menu item is visually dimmed and cannot be interacted with.\nDisabled items are skipped during keyboard navigation. Use for actions that\nare temporarily unavailable based on application state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -905,7 +912,7 @@
             {
               "name": "triggerText",
               "required": true,
-              "description": "Text for submenu trigger",
+              "description": "The label text displayed on the submenu trigger item. This appears as a menu\nitem in the parent menu with a right-pointing caret indicating it opens a submenu.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -914,7 +921,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (inherits from parent dropdown if not set)",
+              "description": "Semantic color kind for the submenu content. When not specified, the submenu\nautomatically inherits the kind from its parent SkDropdown, ensuring visual\nconsistency throughout nested menu structures.",
               "value": {
                 "kind": "expression",
                 "type": "SkDropdownKind"
@@ -939,7 +946,7 @@
             {
               "name": "label",
               "required": false,
-              "description": "Label text for the field",
+              "description": "Label text displayed above or beside the input. The label is automatically associated\nwith the input via the `for` attribute using the generated or provided ID. Leave empty\nfor inputs that don't need a visible label (use aria-label on the input instead).",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -949,7 +956,7 @@
             {
               "name": "description",
               "required": false,
-              "description": "Description/help text",
+              "description": "Help text displayed below the input providing additional context or instructions.\nWhen an error message is present, the description is hidden and replaced by the error.\nConnected to the input via aria-describedby for screen reader accessibility.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -959,7 +966,7 @@
             {
               "name": "error",
               "required": false,
-              "description": "Error message (overrides description when present)",
+              "description": "Error message displayed below the input in a danger/red color. When present, replaces\nthe description text and sets aria-invalid=\"true\" on the input. Typically populated\nfrom form validation results.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -969,7 +976,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required field indicator",
+              "description": "When true, displays a red asterisk (*) after the label to indicate the field is required.\nThis is a visual indicator only—you must also set the `required` attribute on the input\nitself for form validation.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -979,7 +986,7 @@
             {
               "name": "labelPosition",
               "required": false,
-              "description": "Label position",
+              "description": "Position of the label relative to the input. 'top' places the label above the input\n(default, best for most forms). 'left' places the label to the left of the input\n(useful for horizontal form layouts or settings panels).",
               "value": {
                 "kind": "expression",
                 "type": "SkFieldLabelPosition"
@@ -989,7 +996,7 @@
             {
               "name": "id",
               "required": false,
-              "description": "Custom field ID (auto-generated if not provided)",
+              "description": "Custom ID for the field. When provided, this ID is passed to the slotted input and\nused for label association. When not provided, a unique ID is auto-generated. Use\ncustom IDs when you need to reference the input from elsewhere in your code.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -999,7 +1006,7 @@
             {
               "name": "state",
               "required": false,
-              "description": "Validation state (true = valid, false = invalid, null/undefined = neutral)",
+              "description": "Validation state that controls the visual kind of the child input. `true` applies the\n`validKind` (default: 'success'), `false` applies the `invalidKind` (default: 'danger'),\nand `null`/`undefined` lets the input use its own kind prop. Child inputs automatically\ninherit this via provide/inject.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -1009,7 +1016,7 @@
             {
               "name": "validKind",
               "required": false,
-              "description": "Kind to use when state is true (valid)",
+              "description": "Semantic kind to apply to the child input when `state` is `true` (valid). Typically\n'success' for green styling indicating valid input. The kind is provided to child\ninputs via Vue's provide/inject system.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1019,7 +1026,7 @@
             {
               "name": "invalidKind",
               "required": false,
-              "description": "Kind to use when state is false (invalid)",
+              "description": "Semantic kind to apply to the child input when `state` is `false` (invalid). Typically\n'danger' for red styling indicating validation errors. The kind is provided to child\ninputs via Vue's provide/inject system.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1044,7 +1051,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Orientation for arranging child elements (horizontal or vertical)",
+              "description": "Controls how child elements are arranged within the group. Use 'horizontal' for\nside-by-side layouts (like button groups or inline form controls), or 'vertical'\nfor stacked layouts (like form field groups or menu items).",
               "value": {
                 "kind": "expression",
                 "type": "SkGroupOrientation"
@@ -1069,7 +1076,7 @@
             {
               "name": "type",
               "required": false,
-              "description": "Input type",
+              "description": "The HTML input type attribute controlling the input behavior and keyboard on mobile devices.\nCommon types include 'text', 'email', 'password', 'tel', 'url', 'search', and 'number'.\nNote: For numeric inputs with stepper buttons, consider using SkNumberInput instead.",
               "value": {
                 "kind": "expression",
                 "type": "SkInputType"
@@ -1079,7 +1086,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (useful for validation states)",
+              "description": "Semantic color kind for the input border and focus ring. Use semantic kinds like 'success'\nor 'danger' to indicate validation states. When used inside an SkField with a `state` prop,\nthe field's kind automatically overrides this value.",
               "value": {
                 "kind": "expression",
                 "type": "SkInputKind"
@@ -1089,7 +1096,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Input size",
+              "description": "Input size controlling height, padding, and font size. Available sizes: 'sm' (small,\ncompact forms), 'md' (medium, default), 'lg' (large), 'xl' (extra large, prominent inputs).",
               "value": {
                 "kind": "expression",
                 "type": "SkInputSize"
@@ -1099,7 +1106,7 @@
             {
               "name": "placeholder",
               "required": false,
-              "description": "Placeholder text",
+              "description": "Placeholder text displayed when the input is empty. Use to provide hints about expected\ninput format or example values. The placeholder disappears when the user begins typing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1109,7 +1116,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, disables the input preventing all user interaction. The input appears with\nreduced opacity and the cursor changes to not-allowed. Disabled inputs are excluded\nfrom form submission.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1119,7 +1126,7 @@
             {
               "name": "readonly",
               "required": false,
-              "description": "Read-only state",
+              "description": "When true, makes the input read-only. The user can select and copy text but cannot\nmodify it. Unlike disabled, read-only inputs are still included in form submission\nand maintain normal visual appearance.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1129,7 +1136,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required for form validation",
+              "description": "When true, marks the input as required for form validation. The browser will prevent\nform submission if the input is empty. For visual required indicators, wrap the input\nin an SkField component with `required` prop.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1139,7 +1146,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Form field name",
+              "description": "The form field name used when submitting the input value. Required for native form\nsubmission and useful for form libraries that track fields by name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1149,7 +1156,7 @@
             {
               "name": "autocomplete",
               "required": false,
-              "description": "Autocomplete hint",
+              "description": "Autocomplete hint for the browser's autofill feature. Common values include 'off',\n'email', 'username', 'current-password', 'new-password', 'given-name', 'family-name',\n'street-address', etc. See MDN for the complete list of valid values.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1169,7 +1176,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the input border, focus ring, and selected\nitem highlight appearance. When used inside SkField, inherits the field's\nkind if not explicitly set.",
               "value": {
                 "kind": "expression",
                 "type": "SkListboxKind"
@@ -1179,7 +1186,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Input size",
+              "description": "Size of the input field and dropdown content. Controls the input height,\ntext size, and option item dimensions. Available sizes: 'sm' (small),\n'md' (medium), 'lg' (large).",
               "value": {
                 "kind": "expression",
                 "type": "SkListboxSize"
@@ -1189,7 +1196,7 @@
             {
               "name": "placeholder",
               "required": false,
-              "description": "Placeholder text",
+              "description": "Placeholder text displayed in the input field when no option is selected\nand no search text is entered. Use to guide users on what type of selection\nto make or to indicate the field purpose.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1199,7 +1206,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, the listbox is disabled and cannot be interacted with. The input\nfield is non-editable and the dropdown cannot be opened. The component\nappears with reduced opacity and the cursor changes to not-allowed.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1224,7 +1231,7 @@
             {
               "name": "value",
               "required": true,
-              "description": "Value for this item",
+              "description": "The value this option represents. When selected, the parent SkListbox's v-model\nwill be set to this value. Can be a string, number, or object for complex data.\nMust be unique within the listbox to ensure proper selection behavior.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -1233,7 +1240,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, this option is disabled and cannot be selected. The item appears\nwith reduced opacity and is skipped during keyboard navigation. Use for\ntemporarily unavailable options that should still be visible.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1266,7 +1273,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the modal",
+              "description": "Semantic color kind that controls the modal's accent colors, including the header,\nclose button, and any kind-styled elements within the modal. Semantic kinds\n(neutral, primary, accent, etc.) adapt to your theme.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -1276,7 +1283,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size of the modal (width)",
+              "description": "Size of the modal dialog, controlling its maximum width. Use 'sm' for simple\nconfirmations, 'md' for standard forms, 'lg' for complex content, and 'xl' for\ndashboards or data-heavy dialogs.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentSize"
@@ -1286,7 +1293,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Title text displayed in the header",
+              "description": "Title text displayed in the modal header. When provided, a header section with\nthe title and close button is automatically rendered. Can be overridden with\nthe title slot for custom header content.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1296,7 +1303,7 @@
             {
               "name": "triggerText",
               "required": false,
-              "description": "Text for the default trigger button",
+              "description": "Text label for the default trigger button. When provided (and no trigger slot is\nused), renders an SkButton that opens the modal when clicked. Omit both this and\nthe trigger slot to control the modal programmatically via v-model:open.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1306,7 +1313,7 @@
             {
               "name": "open",
               "required": false,
-              "description": "Whether the modal is open (v-model:open)",
+              "description": "Controls whether the modal is open. Use with `v-model:open` for two-way binding.\nSet to true to open the modal programmatically, false to close it. The modal\ncan also be closed via the close button, Escape key, or overlay click.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1316,7 +1323,7 @@
             {
               "name": "closeOnEscape",
               "required": false,
-              "description": "Whether pressing Escape closes the modal (default: true)",
+              "description": "Whether pressing the Escape key closes the modal. Set to false for important\ndialogs where accidental dismissal should be prevented, such as unsaved form\ndata or critical confirmations.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1326,7 +1333,7 @@
             {
               "name": "closeOnOverlay",
               "required": false,
-              "description": "Whether clicking the overlay closes the modal (default: true)",
+              "description": "Whether clicking the overlay (dark backdrop) closes the modal. Set to false to\nrequire users to interact with modal buttons rather than dismissing accidentally.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1336,7 +1343,7 @@
             {
               "name": "noCloseOnEscape",
               "required": false,
-              "description": "Prevent closing on Escape key (alternative to :close-on-escape=\"false\")",
+              "description": "Boolean shorthand to prevent closing on Escape key. Equivalent to\n`:close-on-escape=\"false\"`. Use when you prefer attribute syntax over bound values.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1346,7 +1353,7 @@
             {
               "name": "noCloseOnOverlay",
               "required": false,
-              "description": "Prevent closing on overlay click (alternative to :close-on-overlay=\"false\")",
+              "description": "Boolean shorthand to prevent closing on overlay click. Equivalent to\n`:close-on-overlay=\"false\"`. Use when you prefer attribute syntax over bound values.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1385,7 +1392,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the navbar",
+              "description": "Semantic color kind that controls the navbar's background and text colors. Use semantic kinds\nlike 'primary' or 'accent' to match your theme, or color kinds like 'neon-blue' for fixed\nbranding colors. The kind affects the entire navbar including all three slot areas.",
               "value": {
                 "kind": "expression",
                 "type": "SkNavBarKind"
@@ -1395,7 +1402,7 @@
             {
               "name": "sticky",
               "required": false,
-              "description": "Whether the navbar sticks to the top of the viewport when scrolling",
+              "description": "When true, the navbar uses CSS `position: sticky` to remain fixed at the top of the viewport\nas the user scrolls down the page. The navbar will overlay page content below it. Set to false\nfor a navbar that scrolls with the page content.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1426,7 +1433,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (useful for validation states)",
+              "description": "Semantic color kind for the input border and focus ring. Use semantic kinds like\n'success' or 'danger' to indicate validation states. When used inside an SkField\nwith a `state` prop, the field's kind automatically overrides this value.",
               "value": {
                 "kind": "expression",
                 "type": "SkNumberInputKind"
@@ -1436,7 +1443,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Input size",
+              "description": "Input size controlling height, padding, font size, and stepper button dimensions.\nAvailable sizes: 'sm' (small, compact forms), 'md' (medium, default), 'lg' (large),\n'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkNumberInputSize"
@@ -1446,7 +1453,7 @@
             {
               "name": "placeholder",
               "required": false,
-              "description": "Placeholder text",
+              "description": "Placeholder text displayed when the input is empty or has no value. Use to indicate\nexpected format (e.g., \"0.00\" for currency) or provide a hint about the field's purpose.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1456,7 +1463,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, disables the input and stepper buttons preventing all user interaction.\nThe component appears with reduced opacity and the cursor changes to not-allowed.\nDisabled inputs are excluded from form submission.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1466,7 +1473,7 @@
             {
               "name": "readonly",
               "required": false,
-              "description": "Read-only state",
+              "description": "When true, makes the input read-only. The user can select and copy the value but\ncannot modify it via typing or stepper buttons. Unlike disabled, read-only inputs\nare still included in form submission.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1476,7 +1483,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required for form validation",
+              "description": "When true, marks the input as required for form validation. The browser will prevent\nform submission if the input is empty. For visual required indicators, wrap the input\nin an SkField component with `required` prop.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1486,7 +1493,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Form field name",
+              "description": "The form field name used when submitting the input value. Required for native form\nsubmission and useful for form libraries that track fields by name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1496,7 +1503,7 @@
             {
               "name": "min",
               "required": false,
-              "description": "Minimum value",
+              "description": "Minimum allowed value. The stepper buttons will not decrement below this value, and\nmanual input will be constrained on blur. Use to enforce business rules like positive\nquantities or minimum prices.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1506,7 +1513,7 @@
             {
               "name": "max",
               "required": false,
-              "description": "Maximum value",
+              "description": "Maximum allowed value. The stepper buttons will not increment above this value, and\nmanual input will be constrained on blur. Use to enforce limits like maximum quantity\nor inventory caps.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1516,7 +1523,7 @@
             {
               "name": "step",
               "required": false,
-              "description": "Step increment/decrement amount",
+              "description": "The increment/decrement step amount when using stepper buttons or arrow keys. Use\nfractional values like 0.01 for currency or 0.1 for percentages. Pressing Shift while\nstepping may multiply the step for faster navigation.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1536,7 +1543,7 @@
             {
               "name": "sidebarPosition",
               "required": false,
-              "description": "Sidebar position",
+              "description": "Controls which side of the page the sidebar appears on. The sidebar slot content\nwill be positioned on the specified side, with the main content area filling the\nremaining space. Has no effect if the sidebar slot is not provided.",
               "value": {
                 "kind": "expression",
                 "type": "SkPageSidebarPosition"
@@ -1546,7 +1553,7 @@
             {
               "name": "fixedHeader",
               "required": false,
-              "description": "Fixed header (stays at top when scrolling)",
+              "description": "When true, the header remains fixed at the top of the viewport while the main\ncontent scrolls beneath it. Useful for keeping navigation always accessible.\nThe content area adjusts its top padding to prevent overlap with the fixed header.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1556,7 +1563,7 @@
             {
               "name": "fixedFooter",
               "required": false,
-              "description": "Fixed footer (stays at bottom when scrolling)",
+              "description": "When true, the footer remains fixed at the bottom of the viewport while the main\ncontent scrolls above it. Useful for persistent action bars or important links.\nThe content area adjusts its bottom padding to prevent overlap with the fixed footer.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1566,7 +1573,7 @@
             {
               "name": "sidebarWidth",
               "required": false,
-              "description": "Custom sidebar width",
+              "description": "Custom width for the sidebar region. Accepts any valid CSS width value (px, rem, %, etc.).\nWhen not specified, the sidebar uses the default width defined in the design tokens.\nOnly applies when the sidebar slot is provided.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1616,44 +1623,48 @@
               "default": "undefined"
             },
             {
-              "name": "disabled",
-              "required": false,
+              "name": "total",
+              "required": true,
+              "description": "The total number of pages available. This is a required prop that determines\nhow many page numbers to display and when to show ellipsis indicators.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "number"
+              }
             },
             {
-              "name": "variant",
+              "name": "modelValue",
               "required": false,
+              "description": "The current active page number. Use with `v-model` for two-way binding. Page\nnumbers are 1-indexed, so the first page is 1, not 0.",
               "value": {
                 "kind": "expression",
-                "type": "SkPaginationVariant"
+                "type": "number"
               },
-              "default": "'solid'"
+              "default": "1"
             },
             {
-              "name": "size",
+              "name": "siblingCount",
               "required": false,
+              "description": "The number of sibling pages to show on each side of the current page. For example,\nif the current page is 5 and siblingCount is 1, pages 4 and 6 will be shown.\nHigher values show more page numbers but take up more space.",
               "value": {
                 "kind": "expression",
-                "type": "SkPaginationSize"
+                "type": "number"
               },
-              "default": "'md'"
+              "default": "1"
             },
             {
-              "name": "kind",
+              "name": "showFirstLast",
               "required": false,
+              "description": "Whether to show the \"first page\" and \"last page\" navigation buttons. These\nbuttons allow users to jump directly to page 1 or the final page. Set to false\nfor a more compact pagination layout.",
               "value": {
                 "kind": "expression",
-                "type": "SkPaginationKind"
+                "type": "boolean"
               },
-              "default": "'neutral'"
+              "default": "true"
             },
             {
               "name": "showPrevNext",
               "required": false,
+              "description": "Whether to show the \"previous\" and \"next\" navigation buttons. These buttons\nallow single-page navigation forward or backward. Typically left enabled for\nstandard pagination behavior.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1661,39 +1672,44 @@
               "default": "true"
             },
             {
-              "name": "showFirstLast",
+              "name": "kind",
               "required": false,
+              "description": "Semantic color kind that controls the pagination appearance. Affects the active\npage indicator and navigation button colors. Semantic kinds (neutral, primary,\naccent, etc.) adapt to your theme.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "TSIndexedAccessType"
               },
-              "default": "true"
+              "default": "'neutral'"
             },
             {
-              "name": "siblingCount",
+              "name": "size",
               "required": false,
+              "description": "Size of the pagination buttons. Controls both the button dimensions and text size.\nAvailable sizes: 'xs' (extra small), 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "TSIndexedAccessType"
               },
-              "default": "1"
+              "default": "'md'"
             },
             {
-              "name": "total",
-              "required": true,
+              "name": "variant",
+              "required": false,
+              "description": "Visual style variant for the pagination buttons. Choose 'solid' for filled buttons,\n'outline' for bordered buttons, 'subtle' for lightly tinted backgrounds, or 'ghost'\nfor transparent buttons that only show color on hover.",
               "value": {
                 "kind": "expression",
-                "type": "number"
-              }
+                "type": "TSIndexedAccessType"
+              },
+              "default": "'solid'"
             },
             {
-              "name": "modelValue",
+              "name": "disabled",
               "required": false,
+              "description": "When true, the entire pagination component is disabled. All buttons become\nnon-interactive and appear with reduced opacity. The cursor changes to not-allowed.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "boolean"
               },
-              "default": "1"
+              "default": "false"
             }
           ],
           "events": [
@@ -1713,6 +1729,7 @@
             {
               "name": "page",
               "required": false,
+              "description": "The page number this item represents. Required for 'page', 'prev', 'next', 'first',\nand 'last' types. When clicked, this value is emitted to navigate to that page.\nNot needed for 'ellipsis' type items.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1722,6 +1739,7 @@
             {
               "name": "active",
               "required": false,
+              "description": "Whether this item is the currently active page. Only applicable to 'page' type items.\nActive items receive distinct styling and include aria-current=\"page\" for accessibility.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1731,6 +1749,7 @@
             {
               "name": "disabled",
               "required": false,
+              "description": "When true, the item is disabled and cannot be clicked. The item appears with\nreduced opacity and the cursor changes to not-allowed. Commonly used on\nprev/first buttons when on page 1, or next/last buttons when on the final page.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1739,10 +1758,11 @@
             },
             {
               "name": "type",
-              "required": true,
+              "required": false,
+              "description": "The type of pagination item to render. Determines both the visual content and behavior:\n- 'page': Shows a page number button\n- 'prev': Shows a previous arrow (‹)\n- 'next': Shows a next arrow (›)\n- 'first': Shows a first-page arrow (‹‹)\n- 'last': Shows a last-page arrow (››)\n- 'ellipsis': Shows non-interactive dots (...)",
               "value": {
                 "kind": "expression",
-                "type": "SkPaginationItemType"
+                "type": "TSIndexedAccessType"
               },
               "default": "'page'"
             }
@@ -1764,7 +1784,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the panel",
+              "description": "Semantic color kind that controls the panel's border color and decorative accent stripe.\nSemantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,\nwhile color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors that remain\nconsistent across themes.",
               "value": {
                 "kind": "expression",
                 "type": "SkPanelKind"
@@ -1774,7 +1794,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size affecting padding and spacing inside the panel",
+              "description": "Controls the internal padding of the panel. Larger sizes provide more breathing room\nfor content, while smaller sizes create compact, dense layouts. Available sizes:\n'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkPanelSize"
@@ -1784,7 +1804,7 @@
             {
               "name": "showDecoration",
               "required": false,
-              "description": "Whether to display the decorative accent border",
+              "description": "When true, displays a colored accent stripe along the top edge of the panel.\nThe stripe color matches the selected `kind`. This decoration is automatically\ndisabled when `noBorder` is true since the decoration is part of the border styling.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1794,7 +1814,7 @@
             {
               "name": "noBorder",
               "required": false,
-              "description": "Whether to remove the border entirely",
+              "description": "When true, removes the border entirely from the panel, creating a borderless container.\nUseful for nested panels or when you want the panel background without visual boundaries.\nNote: Setting this to true automatically disables the decoration stripe.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1819,7 +1839,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the popover's header accent and overall color scheme.\nSemantic kinds (neutral, primary, accent, info, success, warning, danger) adapt to your\ntheme. Use 'neutral' for general popovers, or match the kind to contextual meaning\n(e.g., 'danger' for delete confirmations, 'success' for completion messages).",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -1829,7 +1849,7 @@
             {
               "name": "side",
               "required": false,
-              "description": "Which side of the trigger to show the popover",
+              "description": "Which side of the trigger element to display the popover. The popover automatically\nrepositions if there isn't enough space on the preferred side. 'bottom' works well\nfor toolbars, 'right' for sidebar items, 'top' for footer elements.",
               "value": {
                 "kind": "expression",
                 "type": "SkPopoverSide"
@@ -1839,7 +1859,7 @@
             {
               "name": "align",
               "required": false,
-              "description": "Alignment along the side",
+              "description": "Alignment of the popover along its side. 'center' centers the popover on the trigger,\n'start' aligns to the left/top edge, 'end' aligns to the right/bottom edge. Useful\nwhen triggers are near screen edges or when you want the arrow to point at a specific\npart of the trigger.",
               "value": {
                 "kind": "expression",
                 "type": "SkPopoverAlign"
@@ -1849,7 +1869,7 @@
             {
               "name": "sideOffset",
               "required": false,
-              "description": "Offset from the trigger in pixels",
+              "description": "Distance in pixels between the popover and its trigger element. Increase for more\nvisual separation, decrease for tighter coupling. The arrow (if shown) bridges\nthis gap to maintain visual connection.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1859,7 +1879,7 @@
             {
               "name": "showArrow",
               "required": false,
-              "description": "Whether to show the arrow pointing to the trigger",
+              "description": "Whether to display a small arrow pointing from the popover toward its trigger element.\nArrows help visually anchor the popover to its trigger, especially important when\nmultiple triggers are close together. Disable for a cleaner, card-like appearance.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1869,7 +1889,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Optional title displayed in the header",
+              "description": "Optional title text displayed in the popover header. Creates a header section with\nthe title and close button (if closable). When omitted and no header slot is provided,\nno header is rendered, creating a content-only popover.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1879,7 +1899,7 @@
             {
               "name": "closable",
               "required": false,
-              "description": "Whether to show a close button in the header",
+              "description": "Whether to show an X close button in the header. Provides an obvious way for users\nto dismiss the popover beyond clicking outside. Automatically creates a header section\nif title is also set. Users can always close by clicking outside or pressing Escape.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1889,7 +1909,7 @@
             {
               "name": "open",
               "required": false,
-              "description": "Control the open state (v-model)",
+              "description": "Controls the popover's open state for two-way binding with `v-model:open`. When provided,\nyou control when the popover opens and closes. When omitted, the popover manages its own\nstate internally (opens on trigger click, closes on outside click or Escape).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1928,7 +1948,7 @@
             {
               "name": "value",
               "required": false,
-              "description": "Progress value (0 to max). Use null or undefined for indeterminate state",
+              "description": "The current progress value between 0 and `max`. Pass `null` or `undefined` to enable\nindeterminate mode, which displays an animated loading indicator instead of a specific\npercentage. Use indeterminate mode when the operation duration is unknown.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -1938,7 +1958,7 @@
             {
               "name": "max",
               "required": false,
-              "description": "Maximum value",
+              "description": "The maximum value representing 100% completion. Adjust this when your progress is\nmeasured in units other than percentages (e.g., bytes downloaded, steps completed).\nThe percentage is calculated as `(value / max) * 100`.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -1948,7 +1968,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the progress bar fill color. Semantic kinds\n(neutral, primary, accent, etc.) adapt to your theme, making it easy to indicate\nsuccess (primary/success), warning states, or danger levels.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -1958,7 +1978,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Bar height size",
+              "description": "Height size of the progress bar. Use 'sm' for inline or compact layouts, 'md' for\nstandard forms, and 'lg' or 'xl' for prominent progress displays.",
               "value": {
                 "kind": "expression",
                 "type": "SkProgressSize"
@@ -1968,7 +1988,7 @@
             {
               "name": "showValue",
               "required": false,
-              "description": "Show percentage label",
+              "description": "When true, displays the current percentage value as a text label on the progress bar.\nThe label is automatically hidden in indeterminate mode since no percentage is available.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1978,7 +1998,7 @@
             {
               "name": "valuePosition",
               "required": false,
-              "description": "Position of the value label",
+              "description": "Position of the percentage label when `showValue` is true. Choose 'left' for\nleft-aligned, 'center' for centered over the bar, or 'right' for right-aligned.",
               "value": {
                 "kind": "expression",
                 "type": "SkProgressValuePosition"
@@ -1988,7 +2008,7 @@
             {
               "name": "baseColor",
               "required": false,
-              "description": "Custom bar color (overrides kind)",
+              "description": "Custom color for the progress bar fill, overriding the `kind` color. Accepts any\nvalid CSS color value. Use OKLCH colors for consistency with the design system\n(e.g., \"oklch(0.7 0.2 145)\").",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1998,7 +2018,7 @@
             {
               "name": "trackColor",
               "required": false,
-              "description": "Custom track/background color",
+              "description": "Custom color for the progress bar track (background), overriding the default track\ncolor. Accepts any valid CSS color value. Useful for creating custom color schemes\nor matching specific brand colors.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2018,7 +2038,7 @@
             {
               "name": "value",
               "required": true,
-              "description": "Value for this radio option",
+              "description": "The value this radio option represents. When selected, the parent SkRadioGroup's\nv-model will be set to this value. Must be unique within the radio group to ensure\nproper selection behavior.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -2027,7 +2047,7 @@
             {
               "name": "label",
               "required": false,
-              "description": "Label text (can be overridden by default slot)",
+              "description": "Label text displayed next to the radio button. Can be overridden by the default\nslot for custom label content (icons, formatted text, etc.). If neither label\nnor slot content is provided, only the radio circle is rendered.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2037,7 +2057,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, this radio option is disabled and cannot be selected. The radio\nbutton appears with reduced opacity and the cursor changes to not-allowed.\nDoes not affect other radio options in the same group.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2047,7 +2067,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (inherits from parent if not set)",
+              "description": "Semantic color kind that controls the radio button appearance when selected.\nIf not set, inherits from the parent SkRadioGroup's kind prop. Use to style\nindividual radio options differently from the group default.",
               "value": {
                 "kind": "expression",
                 "type": "SkRadioKind"
@@ -2057,7 +2077,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size (inherits from parent if not set)",
+              "description": "Radio button size. Controls both the radio circle dimensions and the label text\nsize. If not set, inherits from the parent SkRadioGroup's size prop.\nAvailable sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkRadioSize"
@@ -2082,7 +2102,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Orientation for layout",
+              "description": "Layout orientation of the radio options. Controls how child SkRadio components\nare arranged. 'vertical' stacks options top to bottom, 'horizontal' arranges\nthem left to right. Keyboard arrow navigation adapts to match the orientation.",
               "value": {
                 "kind": "expression",
                 "type": "SkRadioGroupOrientation"
@@ -2092,7 +2112,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for all radios",
+              "description": "Semantic color kind applied to all child SkRadio components. Sets the default\nappearance for the entire group. Individual radios can override this by setting\ntheir own `kind` prop.",
               "value": {
                 "kind": "expression",
                 "type": "SkRadioKind"
@@ -2102,7 +2122,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size for all radios",
+              "description": "Size applied to all child SkRadio components. Controls the radio circle\ndimensions and label text size for the entire group. Individual radios can\noverride this by setting their own `size` prop.\nAvailable sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkRadioSize"
@@ -2112,7 +2132,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state for entire group",
+              "description": "When true, the entire radio group is disabled and no options can be selected.\nAll child radios appear with reduced opacity. Use for temporarily unavailable\nform fields or read-only states.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2122,7 +2142,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required for form validation",
+              "description": "When true, marks the radio group as required for form validation. At least one\noption must be selected before the form can be submitted. This does not add\nvisual indication—use a SkField wrapper for required field styling.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2132,7 +2152,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Form field name",
+              "description": "The form field name used when submitting the selected value in a form.\nRequired for native form submission. The selected radio's value is submitted\nunder this name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2142,7 +2162,7 @@
             {
               "name": "loop",
               "required": false,
-              "description": "Enable circular keyboard navigation",
+              "description": "Enables circular keyboard navigation within the group. When true, pressing\narrow down/right on the last option moves focus to the first option, and\nvice versa. When false, navigation stops at the boundaries.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2167,7 +2187,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the sidebar",
+              "description": "Semantic color kind that controls the sidebar panel's background, border, and text colors.\nThe kind is passed to the underlying SkPanel component. Use semantic kinds like 'neutral'\nor 'primary' to match your theme, or use `baseColor`/`textColor` props for custom colors.",
               "value": {
                 "kind": "expression",
                 "type": "SkSidebarKind"
@@ -2177,7 +2197,7 @@
             {
               "name": "width",
               "required": false,
-              "description": "CSS width value for the sidebar",
+              "description": "CSS width value for the sidebar. Accepts any valid CSS width including pixels, rems,\npercentages, or viewport units. The sidebar maintains this fixed width while the main\ncontent area fills the remaining space in a typical sidebar layout.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2202,7 +2222,7 @@
             {
               "name": "as",
               "required": false,
-              "description": "HTML tag or component name to render as",
+              "description": "The HTML element or Vue component to render as. Use 'a' for standard links, 'RouterLink'\nfor Vue Router navigation, 'button' for click actions, or any custom component. All\nadditional attributes (href, to, @click, etc.) are passed through via v-bind=\"$attrs\".",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2212,7 +2232,7 @@
             {
               "name": "active",
               "required": false,
-              "description": "Whether this item is currently active",
+              "description": "When true, applies active/selected styling to indicate this is the current page or\nselected item. The active state uses a distinct background color and may include\nadditional visual indicators. You must manage this prop yourself based on your\nrouting logic (e.g., comparing against the current route path).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2237,7 +2257,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Optional section heading",
+              "description": "The heading text displayed above the section's navigation items. When provided, renders\nas an h3 element with muted styling to visually separate it from the navigation links.\nWhen omitted, the section renders without a heading, useful for ungrouped items or\nwhen you want spacing between groups without labels.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2261,7 +2281,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Shape variant",
+              "description": "The shape variant that determines the skeleton's default proportions and styling.\n'text' creates a short-height line suitable for text placeholders. 'rectangular'\ncreates a flexible rectangle for images or content blocks. 'circular' creates a\nround shape for avatars. 'square' creates equal width/height with beveled corners.",
               "value": {
                 "kind": "expression",
                 "type": "SkSkeletonVariant"
@@ -2271,7 +2291,7 @@
             {
               "name": "width",
               "required": false,
-              "description": "Width (CSS value)",
+              "description": "The width of the skeleton. Accepts any valid CSS width value (px, rem, %, etc.).\nFor responsive layouts, use percentage values. For fixed-size elements like avatars,\nuse pixel or rem values.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2281,7 +2301,7 @@
             {
               "name": "height",
               "required": false,
-              "description": "Height (CSS value)",
+              "description": "The height of the skeleton. Accepts any valid CSS height value. When not specified,\nthe height is determined by the variant (text has a small fixed height, circular and\nsquare match their width). Required for rectangular variant to have visible height.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2291,7 +2311,7 @@
             {
               "name": "animation",
               "required": false,
-              "description": "Animation style",
+              "description": "The loading animation style. 'shimmer' creates a moving gradient highlight effect\nthat sweeps across the skeleton. 'pulse' creates a fading opacity animation.\n'none' disables animation for static placeholders.",
               "value": {
                 "kind": "expression",
                 "type": "SkSkeletonAnimation"
@@ -2301,7 +2321,7 @@
             {
               "name": "corners",
               "required": false,
-              "description": "Custom corners to bevel (overrides variant default)",
+              "description": "Array of corner positions to bevel, overriding the variant's default corner styling.\nUse this for skeletons that need to match specific card or panel layouts where only\ncertain corners are beveled. Options: 'top-left', 'top-right', 'bottom-right', 'bottom-left'.",
               "value": {
                 "kind": "expression",
                 "type": "Array"
@@ -2311,7 +2331,7 @@
             {
               "name": "bevel",
               "required": false,
-              "description": "Custom bevel size (CSS value, e.g. '0.5rem', '8px')",
+              "description": "Custom bevel size for beveled corners. Accepts any valid CSS length value.\nOnly applies when `corners` prop is provided. Use this to match the bevel size\nof the component the skeleton is replacing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2331,7 +2351,7 @@
             {
               "name": "modelValue",
               "required": true,
-              "description": "Current value(s) of the slider",
+              "description": "The current value(s) of the slider. Pass a single number for a standard slider,\nor an array of numbers to create a range slider with multiple thumbs. The number\nof thumbs automatically matches the length of the array.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -2340,7 +2360,7 @@
             {
               "name": "min",
               "required": false,
-              "description": "Minimum value",
+              "description": "The minimum allowed value for the slider. The leftmost (or bottommost for vertical)\nposition of the thumb corresponds to this value. Values outside the min/max range\nare clamped automatically.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -2350,7 +2370,7 @@
             {
               "name": "max",
               "required": false,
-              "description": "Maximum value",
+              "description": "The maximum allowed value for the slider. The rightmost (or topmost for vertical)\nposition of the thumb corresponds to this value. Values outside the min/max range\nare clamped automatically.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -2360,7 +2380,7 @@
             {
               "name": "step",
               "required": false,
-              "description": "Step increment",
+              "description": "The granularity of the slider. The value will snap to multiples of this step.\nFor example, a step of 5 on a 0-100 slider allows values 0, 5, 10, ..., 100.\nUse smaller steps for fine-grained control or larger steps for discrete selections.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -2370,7 +2390,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the filled track and thumb appearance. Semantic\nkinds (neutral, primary, accent, etc.) adapt to your theme. Use custom colors via\n`baseColor` and `thumbColor` props for branding-specific styling.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -2380,7 +2400,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Slider size",
+              "description": "Size of the slider track and thumb. Controls the visual thickness of the track\nand diameter of the thumb. Available sizes: 'sm' (small), 'md' (medium), 'lg' (large).",
               "value": {
                 "kind": "expression",
                 "type": "SkSliderSize"
@@ -2390,7 +2410,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Slider orientation",
+              "description": "Orientation of the slider layout. Use 'horizontal' for left-to-right value increase,\nor 'vertical' for bottom-to-top value increase. Keyboard navigation arrows adapt\nautomatically based on orientation.",
               "value": {
                 "kind": "expression",
                 "type": "SkSliderOrientation"
@@ -2400,7 +2420,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Whether the slider is disabled",
+              "description": "When true, the slider is disabled and cannot be interacted with. The slider\nappears with reduced opacity and the cursor changes to not-allowed. Thumb\npositions remain visible but cannot be moved.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2410,7 +2430,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Name attribute for form submission",
+              "description": "The form field name used when submitting the slider value in a form.\nRequired for native form submission. Each thumb value is submitted separately.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2420,7 +2440,7 @@
             {
               "name": "minStepsBetweenThumbs",
               "required": false,
-              "description": "Minimum steps between thumbs for range slider",
+              "description": "For range sliders (multiple thumbs), the minimum number of steps that must\nseparate adjacent thumbs. Prevents thumbs from overlapping or crossing each\nother. A value of 0 allows thumbs to touch but not cross.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -2430,7 +2450,7 @@
             {
               "name": "baseColor",
               "required": false,
-              "description": "Custom track color (overrides kind)",
+              "description": "Custom color for the filled portion of the track. Overrides the `kind` prop\ncolor when set. Use any valid CSS color value (hex, rgb, oklch, etc.).\nFor complete customization, combine with `thumbColor`.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2440,7 +2460,7 @@
             {
               "name": "thumbColor",
               "required": false,
-              "description": "Custom thumb color",
+              "description": "Custom color for the slider thumb(s). Independent of the track color, allowing\ntwo-tone designs. Use any valid CSS color value. If not set, the thumb inherits\nstyling from the current theme.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2465,7 +2485,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the spinner color. Semantic kinds (neutral, primary,\naccent, etc.) adapt to your theme. Use 'primary' for general loading states, or match\nthe kind to the context (e.g., 'danger' when loading after an error action).",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -2475,7 +2495,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Spinner size",
+              "description": "Size of the spinner. Controls both the spinner dimensions and animation scale.\nUse 'sm' for inline loading indicators (e.g., inside buttons), 'md' for standard\nloading states, and 'lg' or 'xl' for full-page or section loading overlays.",
               "value": {
                 "kind": "expression",
                 "type": "SkSpinnerSize"
@@ -2485,7 +2505,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Animation variant",
+              "description": "Animation variant that determines the spinner's visual style:\n- 'circular': Two concentric spinning arcs (default, most common)\n- 'dots': Three bouncing dots in sequence\n- 'crosshair': Rotating crosshair pattern (fits cyberpunk aesthetic)",
               "value": {
                 "kind": "expression",
                 "type": "SkSpinnerVariant"
@@ -2495,7 +2515,7 @@
             {
               "name": "color",
               "required": false,
-              "description": "Custom spinner color (overrides kind)",
+              "description": "Custom color for the spinner, overriding the `kind` color. Accepts any valid CSS\ncolor value. Use \"currentColor\" to inherit the text color from the parent element,\nwhich is useful for spinners inside buttons or other colored containers.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2515,7 +2535,7 @@
             {
               "name": "modelValue",
               "required": true,
-              "description": "Current state of the switch (true for on, false for off)",
+              "description": "The current state of the switch. `true` means on (checked), `false` means off (unchecked).\nUse with `v-model` for two-way binding. Required prop that must be explicitly provided.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2524,7 +2544,7 @@
             {
               "name": "label",
               "required": false,
-              "description": "Static label text (used as fallback for labelOn/labelOff if not provided)",
+              "description": "Static label text displayed next to the switch. When `labelOn` or `labelOff` are not\nprovided, this label remains constant regardless of switch state. Can be overridden\nby the default slot for custom label content.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2534,7 +2554,7 @@
             {
               "name": "labelOn",
               "required": false,
-              "description": "Label text displayed when switch is on (with animation if enabled)",
+              "description": "Label text displayed when the switch is in the \"on\" (true) state. When provided along\nwith `labelOff`, the label animates between the two values as the switch toggles.\nFalls back to `label` prop if not provided.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2544,7 +2564,7 @@
             {
               "name": "labelOff",
               "required": false,
-              "description": "Label text displayed when switch is off (with animation if enabled)",
+              "description": "Label text displayed when the switch is in the \"off\" (false) state. When provided along\nwith `labelOn`, the label animates between the two values as the switch toggles.\nFalls back to `label` prop if not provided.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2554,7 +2574,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the switch background",
+              "description": "Semantic color kind for the switch track (background). Controls the color when the\nswitch is in the \"on\" state. The \"off\" state uses a neutral muted color by default.",
               "value": {
                 "kind": "expression",
                 "type": "SkSwitchKind"
@@ -2564,7 +2584,7 @@
             {
               "name": "thumbKind",
               "required": false,
-              "description": "Semantic color kind for the switch thumb (overrides main kind)",
+              "description": "Semantic color kind for the switch thumb (the sliding circle). When provided, overrides\nthe default thumb color derived from the main `kind`. Use for two-tone switch designs\nwhere the thumb should be a different color than the track.",
               "value": {
                 "kind": "expression",
                 "type": "SkSwitchKind"
@@ -2574,7 +2594,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size of the switch control",
+              "description": "Switch size controlling the track dimensions, thumb size, and label text size.\nAvailable sizes: 'sm' (small), 'md' (medium, default), 'lg' (large), 'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkSwitchSize"
@@ -2584,7 +2604,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Whether the switch is disabled",
+              "description": "When true, disables the switch preventing all user interaction. The switch appears\nwith reduced opacity and the cursor changes to not-allowed. Disabled switches are\nexcluded from form submission.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2594,7 +2614,7 @@
             {
               "name": "disableLabelAnimation",
               "required": false,
-              "description": "Whether to disable the fade animation when labels change",
+              "description": "When true, disables the fade animation when switching between `labelOn` and `labelOff`\nlabels. The label will change instantly instead of cross-fading. Has no effect if\nonly a static `label` is provided.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2604,7 +2624,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Name attribute for form submission",
+              "description": "The form field name used when submitting the switch value. When the switch is on,\nthe `value` prop is submitted under this name. When off, nothing is submitted\n(standard checkbox behavior).",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2614,7 +2634,7 @@
             {
               "name": "value",
               "required": false,
-              "description": "Value attribute for form submission",
+              "description": "The value submitted with the form when the switch is on. Combined with the `name`\nprop for form submission. When the switch is off, this value is not submitted.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2624,7 +2644,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Whether the switch is required in a form",
+              "description": "When true, marks the switch as required for form validation. The browser will prevent\nform submission if the switch is not in the \"on\" state. Use for mandatory agreements\nor confirmations.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2660,7 +2680,7 @@
             {
               "name": "name",
               "required": true,
-              "description": "Unique identifier matching the corresponding SkTabPanel",
+              "description": "Unique identifier that links this tab trigger to its corresponding `SkTabPanel`. The `name`\nmust exactly match the `name` prop on the panel you want to display when this tab is active.\nCan be a string or number for flexibility with dynamic tab generation.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -2669,7 +2689,7 @@
             {
               "name": "label",
               "required": false,
-              "description": "Text label displayed in the tab (can be overridden by default slot)",
+              "description": "Text label displayed in the tab button. Can be overridden by the default slot for custom\ncontent like icons with text or formatted labels.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2679,7 +2699,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Whether the tab is disabled and unclickable",
+              "description": "When true, the tab cannot be clicked or focused via keyboard. Disabled tabs are skipped\nduring arrow key navigation and appear with reduced opacity.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2689,7 +2709,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (overrides parent tabs kind if provided)",
+              "description": "Semantic color kind for this specific tab. When provided, overrides the `kind` set on the\nparent `SkTabs` component. Use this for highlighting important tabs or creating visual\nhierarchy within a tab bar.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -2717,7 +2737,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Orientation for arranging tabs (overrides parent SkTabs orientation if provided)",
+              "description": "Layout orientation for arranging tab triggers. When 'horizontal', tabs appear in a row\nwith left/right arrow key navigation. When 'vertical', tabs stack in a column with\nup/down arrow key navigation. If not provided, inherits from the parent `SkTabs` component.",
               "value": {
                 "kind": "expression",
                 "type": "SkTabsOrientation"
@@ -2742,7 +2762,7 @@
             {
               "name": "name",
               "required": true,
-              "description": "Unique identifier matching the corresponding SkTab",
+              "description": "Unique identifier that links this panel to its corresponding `SkTab` trigger. The `name`\nmust exactly match the `name` prop on the tab that should activate this panel.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -2751,7 +2771,7 @@
             {
               "name": "keepAlive",
               "required": false,
-              "description": "Whether to keep panel mounted in DOM even when inactive",
+              "description": "When true, the panel content remains mounted in the DOM even when the tab is inactive.\nThis is useful for preserving form state, scroll position, or expensive component state\nthat would otherwise be lost when switching tabs. Use sparingly as it increases memory usage.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2789,7 +2809,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the table",
+              "description": "Semantic color kind that controls header backgrounds and accent colors. The kind\naffects the table header row styling and can subtly influence row hover colors.\nUse semantic kinds to match your application's color language.",
               "value": {
                 "kind": "expression",
                 "type": "SkTableKind"
@@ -2799,7 +2819,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Visual variant style (default or compact)",
+              "description": "Controls the table's density and spacing. 'default' provides comfortable spacing\nfor most use cases, 'compact' reduces padding for dense data displays, and\n'comfortable' increases spacing for enhanced readability.",
               "value": {
                 "kind": "expression",
                 "type": "SkTableVariant"
@@ -2809,7 +2829,7 @@
             {
               "name": "striped",
               "required": false,
-              "description": "Whether to alternate row background colors",
+              "description": "When true, alternates row background colors (zebra striping) to improve\nreadability of wide tables. The striping color adapts to the table's kind\nand background context.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2819,7 +2839,7 @@
             {
               "name": "hoverable",
               "required": false,
-              "description": "Whether rows highlight on hover",
+              "description": "When true, rows highlight on mouse hover to help users track which row\nthey're viewing. Particularly useful for tables with many columns where\nthe eye can lose track across the row.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2829,7 +2849,7 @@
             {
               "name": "bordered",
               "required": false,
-              "description": "Whether to show outer borders around the table",
+              "description": "When true, displays a beveled border around the entire table. Disable for\na more minimal appearance or when embedding the table in a card that already\nprovides visual containment.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2839,7 +2859,7 @@
             {
               "name": "innerBorders",
               "required": false,
-              "description": "Whether to show borders between cells and rows",
+              "description": "When true, shows borders between individual cells and rows. Enable for\ngrid-like data where cell boundaries need clear visual separation. Disable\nfor a cleaner, more modern appearance.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2849,7 +2869,7 @@
             {
               "name": "darkBackground",
               "required": false,
-              "description": "Whether the table has a dark background context",
+              "description": "When true, adjusts the table colors for display on dark backgrounds. This\nensures proper contrast and visibility when the table is placed on dark\nsurfaces outside of the normal theme context.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2859,7 +2879,7 @@
             {
               "name": "subtle",
               "required": false,
-              "description": "Whether to use subtle, lighter styling",
+              "description": "When true, uses lighter, more subdued colors for the table styling. Useful\nwhen the table should not dominate the visual hierarchy or when displaying\nsecondary data alongside more prominent content.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2884,7 +2904,7 @@
             {
               "name": "modelValue",
               "required": true,
-              "description": "Currently active tab identifier (matching a SkTab name)",
+              "description": "The currently active tab identifier, matching the `name` prop of the corresponding `SkTab`\nand `SkTabPanel`. Use with `v-model` for two-way binding to control which tab is displayed.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -2893,7 +2913,7 @@
             {
               "name": "orientation",
               "required": false,
-              "description": "Orientation for tab layout (horizontal or vertical)",
+              "description": "Layout orientation for the tab list. In 'horizontal' mode, tabs are arranged in a row and\narrow keys navigate left/right. In 'vertical' mode, tabs stack vertically and arrow keys\nnavigate up/down.",
               "value": {
                 "kind": "expression",
                 "type": "SkTabsOrientation"
@@ -2903,7 +2923,7 @@
             {
               "name": "placement",
               "required": false,
-              "description": "Placement of tabs relative to content (start, center, end)",
+              "description": "Alignment of the tab list within its container. 'start' aligns tabs to the left (horizontal)\nor top (vertical), 'end' aligns to the opposite side. Useful for positioning tabs in\ndifferent layout contexts.",
               "value": {
                 "kind": "expression",
                 "type": "SkTabsPlacement"
@@ -2913,7 +2933,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for all tabs (can be overridden per tab)",
+              "description": "Semantic color kind applied to all tabs in this group. Individual `SkTab` components can\noverride this with their own `kind` prop for mixed-color tab bars.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -2923,7 +2943,7 @@
             {
               "name": "flush",
               "required": false,
-              "description": "Whether to use negative margins to align with parent container edges",
+              "description": "When true, applies negative margins to align the tab list flush with the parent container's\nedges. Useful when the parent has padding but you want tabs to extend edge-to-edge.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2953,7 +2973,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for the tag",
+              "description": "Semantic color kind that controls the tag's color scheme. The kind determines both\nbackground and text colors across all variants. Use semantic kinds (primary, success,\ndanger, etc.) to convey meaning, or use accent for decorative highlighting.",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -2963,7 +2983,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Visual variant style (solid, outline, subtle, or ghost)",
+              "description": "Visual variant that controls how the tag is rendered. Choose based on visual hierarchy:\n'solid' for maximum emphasis with filled background, 'outline' for medium emphasis with\na border, 'subtle' for low emphasis with a tinted background, 'ghost' for minimal\npresence with just text color.",
               "value": {
                 "kind": "expression",
                 "type": "SkTagVariant"
@@ -2973,7 +2993,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Size of the tag affecting padding and font size",
+              "description": "Controls the tag dimensions including padding, font size, and remove button size.\nAvailable sizes: 'sm' (compact), 'md' (default), 'lg' (prominent), 'xl' (maximum).",
               "value": {
                 "kind": "expression",
                 "type": "SkTagSize"
@@ -2983,7 +3003,7 @@
             {
               "name": "removable",
               "required": false,
-              "description": "Whether to show a remove button that emits a 'remove' event when clicked",
+              "description": "When true, displays a small X button on the right side of the tag that emits a\n'remove' event when clicked. Useful for filter chips, multi-select displays, or\nany tags that can be dismissed by the user.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3013,7 +3033,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind for input",
+              "description": "Semantic color kind that controls the input border and focus ring appearance.\nAlso sets the default color for tags unless overridden by `tagKind`. When used\ninside SkField, inherits the field's kind if not explicitly set.",
               "value": {
                 "kind": "expression",
                 "type": "SkTagsInputKind"
@@ -3023,7 +3043,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Input size",
+              "description": "Size of the input field and tags. Controls the input height, tag size, and\ntext sizing throughout the component. Available sizes: 'sm' (small),\n'md' (medium), 'lg' (large).",
               "value": {
                 "kind": "expression",
                 "type": "SkTagsInputSize"
@@ -3033,7 +3053,7 @@
             {
               "name": "placeholder",
               "required": false,
-              "description": "Placeholder text",
+              "description": "Placeholder text displayed in the input field when no text is being typed.\nVisible even when tags are present. Use to guide users on what type of\nvalues to enter.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3043,7 +3063,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, the input is disabled and no tags can be added or removed.\nExisting tags remain visible but the delete buttons are non-functional.\nThe entire component appears with reduced opacity.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3053,7 +3073,7 @@
             {
               "name": "max",
               "required": false,
-              "description": "Maximum number of tags",
+              "description": "Maximum number of tags allowed. When the limit is reached, the input field\nis disabled (preventing new tags) but existing tags can still be removed.\nUseful for limiting selections in constrained contexts like form fields.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3063,7 +3083,7 @@
             {
               "name": "addOnPaste",
               "required": false,
-              "description": "Add tags on paste",
+              "description": "When true, pasting text containing separators (commas, semicolons, newlines)\nautomatically creates multiple tags. When false, pasted text is inserted as\na single value in the input field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3073,7 +3093,7 @@
             {
               "name": "tagKind",
               "required": false,
-              "description": "Kind for tag badges (inherits from input kind if not set)",
+              "description": "Semantic color kind specifically for the tag badges. When not set, inherits\nfrom the `kind` prop. Use to differentiate tag appearance from the input\nstyling, such as colorful tags in a neutral-bordered input.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3083,7 +3103,7 @@
             {
               "name": "tagVariant",
               "required": false,
-              "description": "Variant for tag badges",
+              "description": "Visual variant for the tag badges. 'solid' renders filled tags with colored\nbackground, 'outline' shows bordered tags with transparent background, and\n'ghost' provides subtle tags with minimal styling.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -3103,7 +3123,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind (useful for validation states)",
+              "description": "Semantic color kind for the textarea border and focus ring. Use semantic kinds like\n'success' or 'danger' to indicate validation states. When used inside an SkField with\na `state` prop, the field's kind automatically overrides this value.",
               "value": {
                 "kind": "expression",
                 "type": "SkTextareaKind"
@@ -3113,7 +3133,7 @@
             {
               "name": "size",
               "required": false,
-              "description": "Textarea size",
+              "description": "Textarea size controlling padding and font size. The height is primarily controlled\nby the `rows` prop. Available sizes: 'sm' (small), 'md' (medium, default), 'lg' (large),\n'xl' (extra large).",
               "value": {
                 "kind": "expression",
                 "type": "SkTextareaSize"
@@ -3123,7 +3143,7 @@
             {
               "name": "placeholder",
               "required": false,
-              "description": "Placeholder text",
+              "description": "Placeholder text displayed when the textarea is empty. Use to provide hints about\nexpected content or formatting. The placeholder disappears when the user begins typing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3133,7 +3153,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "Disabled state",
+              "description": "When true, disables the textarea preventing all user interaction. The textarea appears\nwith reduced opacity and the cursor changes to not-allowed. Disabled textareas are\nexcluded from form submission.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3143,7 +3163,7 @@
             {
               "name": "readonly",
               "required": false,
-              "description": "Read-only state",
+              "description": "When true, makes the textarea read-only. The user can select and copy text but cannot\nmodify it. Unlike disabled, read-only textareas are still included in form submission\nand maintain normal visual appearance.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3153,7 +3173,7 @@
             {
               "name": "required",
               "required": false,
-              "description": "Required for form validation",
+              "description": "When true, marks the textarea as required for form validation. The browser will prevent\nform submission if the textarea is empty. For visual required indicators, wrap the\ntextarea in an SkField component with `required` prop.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3163,7 +3183,7 @@
             {
               "name": "name",
               "required": false,
-              "description": "Form field name",
+              "description": "The form field name used when submitting the textarea value. Required for native form\nsubmission and useful for form libraries that track fields by name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3173,7 +3193,7 @@
             {
               "name": "rows",
               "required": false,
-              "description": "Number of visible text rows",
+              "description": "The number of visible text lines (rows) for the textarea. This sets the initial height\nof the textarea. Users can still resize it vertically if the CSS allows. Use more rows\nfor content that typically requires more space (e.g., descriptions, messages).",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3183,7 +3203,7 @@
             {
               "name": "autocomplete",
               "required": false,
-              "description": "Autocomplete hint",
+              "description": "Autocomplete hint for the browser's autofill feature. For textareas, common values\ninclude 'off' to disable autofill, or 'street-address' for address fields. Most\nother autocomplete values are more relevant for single-line inputs.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3203,7 +3223,7 @@
             {
               "name": "theme",
               "required": false,
-              "description": "Theme name controlling the overall color scheme (greyscale or colorful)",
+              "description": "The active theme name that controls the color scheme for all child components.\nChanging this prop reactively updates the theme across the entire subtree.\nPortal components (dropdowns, modals, tooltips) automatically inherit this\ntheme even though they render outside the DOM hierarchy.",
               "value": {
                 "kind": "expression",
                 "type": "SkThemeName"
@@ -3228,7 +3248,7 @@
             {
               "name": "id",
               "required": true,
-              "description": "Toast ID for tracking",
+              "description": "Unique identifier for this toast instance. Used internally for tracking and dismissing\nspecific toasts. Generated automatically by SkToastProvider when using useToast().",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3237,7 +3257,7 @@
             {
               "name": "kind",
               "required": true,
-              "description": "Semantic kind",
+              "description": "Semantic color kind that determines the toast's visual appearance and icon. Each kind\ndisplays a contextually appropriate icon: info (circle-i), success (checkmark),\nwarning (triangle), danger (x-circle). The kind also sets the background and text colors.",
               "value": {
                 "kind": "expression",
                 "type": "SkToastKind"
@@ -3246,7 +3266,7 @@
             {
               "name": "title",
               "required": false,
-              "description": "Optional title",
+              "description": "Optional bold title text displayed above the message. Use for brief headings like\n\"Success!\", \"Error\", or \"Warning\". When omitted, only the message is displayed.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3255,7 +3275,7 @@
             {
               "name": "message",
               "required": true,
-              "description": "Toast message",
+              "description": "The main toast message content. This is the primary text users will read, describing\nwhat happened or what action was taken. Keep messages concise and actionable.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3264,7 +3284,7 @@
             {
               "name": "duration",
               "required": false,
-              "description": "Duration in ms (0 = no auto-dismiss)",
+              "description": "Time in milliseconds before the toast automatically dismisses. Set to 0 or undefined\nto disable auto-dismiss and require manual closure. When set, a progress indicator\nmay show remaining time. Overrides the provider's default duration.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3273,7 +3293,7 @@
             {
               "name": "closable",
               "required": true,
-              "description": "Whether to show close button",
+              "description": "When true, displays an X button allowing users to manually dismiss the toast before\nthe duration expires. Essential for toasts with important information users may need\nmore time to read, or when auto-dismiss is disabled.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3297,7 +3317,7 @@
             {
               "name": "position",
               "required": false,
-              "description": "Preset position for the viewport. If omitted, position via CSS/classes.",
+              "description": "Preset position for the toast viewport on the screen. Controls where toasts appear\nand stack. Choose a position that doesn't obstruct important UI elements. Common\nchoices are 'bottom-right' for desktop apps and 'top-center' for mobile-first designs.\nWhen omitted, you can position the viewport via custom CSS instead.",
               "value": {
                 "kind": "expression",
                 "type": "SkToastPosition"
@@ -3307,7 +3327,7 @@
             {
               "name": "duration",
               "required": false,
-              "description": "Default duration (ms) before auto-dismiss.",
+              "description": "Default duration in milliseconds before toasts automatically dismiss. Individual\ntoasts can override this value. Set to 0 to disable auto-dismiss by default,\nrequiring users to manually close each toast. Recommended range: 3000-7000ms.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3317,7 +3337,7 @@
             {
               "name": "swipeDirection",
               "required": false,
-              "description": "Direction to swipe to dismiss.",
+              "description": "Direction users can swipe to dismiss toasts on touch devices. The natural direction\noften matches the toast position - 'right' for right-positioned toasts, 'up' for\ntop-positioned, etc. Set to the direction that feels like \"dismissing\" the toast.",
               "value": {
                 "kind": "expression",
                 "type": "SkToastSwipeDirection"
@@ -3327,7 +3347,7 @@
             {
               "name": "swipeThreshold",
               "required": false,
-              "description": "Distance (px) to swipe before dismissing.",
+              "description": "Minimum distance in pixels a user must swipe before the toast dismisses. Lower values\nmake dismissal easier but may cause accidental dismissals. Higher values require more\nintentional swipes. Balance based on your target devices and user needs.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3337,7 +3357,7 @@
             {
               "name": "hotkey",
               "required": false,
-              "description": "Keyboard shortcut to focus toasts.",
+              "description": "Keyboard shortcut(s) to focus the toast region for screen reader users and keyboard\nnavigation. When pressed, focus moves to the toast viewport. Use an array to define\nmultiple shortcuts. Keys use standard keyboard event key names.",
               "value": {
                 "kind": "expression",
                 "type": "Array"
@@ -3362,7 +3382,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic color kind",
+              "description": "Semantic color kind that controls the tooltip's background and text colors. Semantic kinds\n(neutral, primary, accent, info, success, warning, danger) adapt to your theme. Use 'neutral'\nfor general hints, or match the kind to contextual meaning (e.g., 'warning' for caution tips).",
               "value": {
                 "kind": "expression",
                 "type": "ComponentKind"
@@ -3372,7 +3392,7 @@
             {
               "name": "variant",
               "required": false,
-              "description": "Visual variant",
+              "description": "Visual variant that controls the tooltip's appearance. 'solid' shows a filled background\nwith the kind color, ideal for high-contrast visibility. 'outline' shows a bordered style\nwith transparent background, useful for subtle hints that don't distract from content.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -3382,7 +3402,7 @@
             {
               "name": "side",
               "required": false,
-              "description": "Which side of the trigger to show the tooltip",
+              "description": "Which side of the trigger element to display the tooltip. The tooltip automatically\nflips to the opposite side if there isn't enough space. Common choices: 'top' for\nbuttons, 'right' for inline help icons, 'bottom' for navigation items.",
               "value": {
                 "kind": "expression",
                 "type": "SkTooltipSide"
@@ -3392,7 +3412,7 @@
             {
               "name": "align",
               "required": false,
-              "description": "Alignment along the side",
+              "description": "Alignment of the tooltip along its side. 'center' centers the tooltip on the trigger,\n'start' aligns to the left/top edge, 'end' aligns to the right/bottom edge. Use 'start'\nor 'end' when the trigger is near a screen edge to prevent clipping.",
               "value": {
                 "kind": "expression",
                 "type": "union"
@@ -3402,7 +3422,7 @@
             {
               "name": "sideOffset",
               "required": false,
-              "description": "Offset from the trigger in pixels",
+              "description": "Distance in pixels between the tooltip and its trigger element. Increase for more\nbreathing room, decrease for tighter coupling. The arrow (if shown) extends from\nthis offset toward the trigger.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3412,7 +3432,7 @@
             {
               "name": "delayDuration",
               "required": false,
-              "description": "Delay before showing tooltip (ms). Only used in standalone mode.\nWhen inside SkTooltipProvider, the provider's delayDuration is used instead.",
+              "description": "Delay in milliseconds before the tooltip appears after hovering the trigger. Only used\nin standalone mode - when inside SkTooltipProvider, the provider's delayDuration takes\nprecedence. Set to 0 for instant tooltips, or higher values to avoid accidental triggers.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3422,7 +3442,7 @@
             {
               "name": "showArrow",
               "required": false,
-              "description": "Whether to show the arrow pointing to the trigger",
+              "description": "Whether to display a small arrow pointing from the tooltip toward its trigger element.\nArrows help visually connect the tooltip to its trigger, especially useful when multiple\ninteractive elements are close together. Disable for a cleaner, more minimal appearance.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3450,7 +3470,7 @@
             {
               "name": "delayDuration",
               "required": false,
-              "description": "The duration (ms) from when the pointer enters the trigger until the tooltip opens.",
+              "description": "Delay in milliseconds from when the pointer enters a tooltip trigger until the tooltip\nopens. Applies to all SkTooltip components within this provider. A short delay (200-400ms)\nprevents tooltips from flashing when users move the mouse across the UI. Set to 0 for\ninstant tooltips, though this may feel jarring.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3460,7 +3480,7 @@
             {
               "name": "skipDelayDuration",
               "required": false,
-              "description": "How much time (ms) a user has to enter another trigger without incurring a delay again.\nThis creates the \"skip delay\" behavior where moving between tooltips feels instant.",
+              "description": "Time window in milliseconds during which moving to another tooltip skips the delay entirely.\nAfter showing one tooltip, if the user hovers another trigger within this window, it appears\ninstantly. This creates smooth \"scanning\" behavior when exploring a toolbar or menu. Set to\n0 to disable skip delay behavior.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -3470,7 +3490,7 @@
             {
               "name": "disableHoverableContent",
               "required": false,
-              "description": "When true, hovering over the tooltip content will close it (pointer must stay on trigger).",
+              "description": "When true, moving the pointer from the trigger onto the tooltip content closes the tooltip.\nBy default, users can hover over tooltip content (useful for links or selectable text).\nEnable this for simpler tooltips where you want strict trigger-only behavior.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3480,7 +3500,7 @@
             {
               "name": "disableClosingTrigger",
               "required": false,
-              "description": "When true, clicking on the trigger will not close the tooltip.",
+              "description": "When true, clicking the trigger element does not close an open tooltip. By default,\nclicking the trigger dismisses the tooltip. Enable this if your trigger performs an\naction where the tooltip should remain visible for confirmation feedback.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3490,7 +3510,7 @@
             {
               "name": "ignoreNonKeyboardFocus",
               "required": false,
-              "description": "When true, tooltips only open on keyboard focus (not mouse focus).\nMatches against :focus-visible selector.",
+              "description": "When true, tooltips only appear on keyboard focus (Tab navigation), not on mouse focus.\nUses the `:focus-visible` heuristic to distinguish intentional keyboard focus from\nprogrammatic or mouse-triggered focus. Enable for reduced visual noise on mouse-heavy UIs.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3500,7 +3520,7 @@
             {
               "name": "disabled",
               "required": false,
-              "description": "When true, disables all tooltips within this provider.",
+              "description": "When true, completely disables all tooltips within this provider. Useful for temporarily\nsuppressing tooltips during certain UI states (like drag operations or touch interactions)\nor for user preference settings. Tooltips remain in the DOM but won't open.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"