@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -242,6 +242,230 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "SkAutocomplete",
+          "description": "A text input with advisory suggestions. Unlike SkListbox (which restricts the user to a\npredefined list), SkAutocomplete accepts free-form text and surfaces matching suggestions as the user\ntypes. Built on RekaUI's Autocomplete primitive with full keyboard navigation, client-side filtering,\nand portal rendering.\n\nUse SkAutocomplete for search bars, free-form fields with helpful suggestions, and any case where the\nuser may type a value that isn't in the suggestion list. Use SkListbox when the user must pick from\nthe list. Use SkSelect for short, fixed lists.\n\n**Example:**\n\n```vue\n<SkAutocomplete v-model=\"query\" kind=\"primary\" placeholder=\"Search...\">\n    <SkAutocompleteItem value=\"apple\">Apple</SkAutocompleteItem>\n    <SkAutocompleteItem value=\"banana\">Banana</SkAutocompleteItem>\n    <SkAutocompleteEmpty>No matches</SkAutocompleteEmpty>\n</SkAutocomplete>\n```\n\n**Example:**\n\nAsync suggestions\n```vue\n<SkAutocomplete v-model=\"query\" :ignore-filter=\"true\" @update:search=\"loadSuggestions\">\n    <SkAutocompleteItem v-for=\"item in results\" :key=\"item.id\" :value=\"item.label\">\n        {{ item.label }}\n    </SkAutocompleteItem>\n</SkAutocomplete>\n```",
+          "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "kind",
+              "required": false,
+              "description": "Semantic color kind that controls the input border, focus ring, and highlighted\nsuggestion appearance. When used inside SkField, inherits the field's kind if not\nexplicitly set.",
+              "value": {
+                "kind": "expression",
+                "type": "SkAutocompleteKind"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "description": "Size of the input field and dropdown content. Controls input height, text size,\nand option dimensions. Available sizes: 'sm', 'md', 'lg'.",
+              "value": {
+                "kind": "expression",
+                "type": "SkAutocompleteSize"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "placeholder",
+              "required": false,
+              "description": "Placeholder text displayed in the input field when empty.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'Search...'"
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "When true, the autocomplete is disabled and cannot be interacted with.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "openOnFocus",
+              "required": false,
+              "description": "When true, opens the suggestion menu as soon as the input gains focus.\nSet to false to require typing before suggestions appear.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "openOnClick",
+              "required": false,
+              "description": "When true, opens the suggestion menu on click. RekaUI's default is false; opt in\nif you want a click-to-open UX in addition to focus-based opening.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "clearable",
+              "required": false,
+              "description": "When true, displays a clear button inside the input that resets the typed value.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "ignoreFilter",
+              "required": false,
+              "description": "When true, disables the built-in client-side filtering. Use this for async or\nserver-driven suggestions, where you'll listen to `@update:search` and provide\npre-filtered items.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:search",
+              "description": "Fires whenever the input text changes. Useful for async suggestion loading\n(combine with `:ignore-filter=\"true\"`)."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "SkAutocompleteItem, SkAutocompleteSeparator, SkAutocompleteGroup, and\n                SkAutocompleteEmpty components representing the available suggestions."
+            }
+          ],
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocomplete.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkAutocompleteEmpty",
+          "description": "Content displayed inside an SkAutocomplete dropdown when no suggestions match the\ncurrent input. RekaUI handles the show/hide logic automatically based on the filter result.\n\n**Example:**\n\n```vue\n<SkAutocomplete v-model=\"query\">\n    <SkAutocompleteItem value=\"apple\">Apple</SkAutocompleteItem>\n    <SkAutocompleteEmpty>No matches found</SkAutocompleteEmpty>\n</SkAutocomplete>\n```",
+          "slots": [
+            {
+              "name": "default",
+              "description": "The empty-state message. Can be plain text or rich content."
+            }
+          ],
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocompleteEmpty.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkAutocompleteGroup",
+          "description": "Semantic grouping wrapper for related suggestions within an SkAutocomplete dropdown.\nPair with SkAutocompleteGroupLabel to give the group a heading.\n\n**Example:**\n\n```vue\n<SkAutocomplete v-model=\"query\">\n    <SkAutocompleteGroup>\n        <SkAutocompleteGroupLabel>Fruits</SkAutocompleteGroupLabel>\n        <SkAutocompleteItem value=\"apple\">Apple</SkAutocompleteItem>\n        <SkAutocompleteItem value=\"banana\">Banana</SkAutocompleteItem>\n    </SkAutocompleteGroup>\n    <SkAutocompleteGroup>\n        <SkAutocompleteGroupLabel>Vegetables</SkAutocompleteGroupLabel>\n        <SkAutocompleteItem value=\"carrot\">Carrot</SkAutocompleteItem>\n    </SkAutocompleteGroup>\n</SkAutocomplete>\n```",
+          "slots": [
+            {
+              "name": "default",
+              "description": "SkAutocompleteGroupLabel and SkAutocompleteItem children."
+            }
+          ],
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocompleteGroup.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkAutocompleteGroupLabel",
+          "description": "A non-selectable heading for a group of related suggestions inside an\nSkAutocompleteGroup. Use to label groups like \"Fruits\" or \"Recent searches\".\n\n**Example:**\n\n```vue\n<SkAutocompleteGroup>\n    <SkAutocompleteGroupLabel>Recent</SkAutocompleteGroupLabel>\n    <SkAutocompleteItem value=\"recent1\">Recent search 1</SkAutocompleteItem>\n</SkAutocompleteGroup>\n```",
+          "slots": [
+            {
+              "name": "default",
+              "description": "The heading text."
+            }
+          ],
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocompleteGroupLabel.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkAutocompleteItem",
+          "description": "A selectable suggestion within an SkAutocomplete dropdown. When chosen, the item's\n`value` is written into the input. Built on RekaUI's AutocompleteItem with keyboard navigation\nand type-ahead support.\n\n**Example:**\n\n```vue\n<SkAutocomplete v-model=\"query\">\n    <SkAutocompleteItem value=\"apple\">Apple</SkAutocompleteItem>\n    <SkAutocompleteItem value=\"banana\">Banana</SkAutocompleteItem>\n    <SkAutocompleteItem value=\"cherry\" disabled>Cherry (out of stock)</SkAutocompleteItem>\n</SkAutocomplete>\n```",
+          "attributes": [
+            {
+              "name": "value",
+              "required": true,
+              "description": "The string written into the input when this item is selected. Must be unique\nwithin the autocomplete to ensure proper highlight/match behavior.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "When true, this suggestion is disabled and cannot be selected. Skipped during\nkeyboard navigation.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "textValue",
+              "required": false,
+              "description": "Optional override for filter/typeahead matching. Use when the slot content is\nnon-textual (icons, custom layouts) and you need to specify what text the\nclient-side filter should match against.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The display content for this suggestion. Can be plain text or rich content."
+            }
+          ],
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocompleteItem.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkAutocompleteSeparator",
+          "description": "A visual divider for organizing suggestions within an SkAutocomplete dropdown. Renders\nas a horizontal line between items with appropriate spacing.\n\n**Example:**\n\n```vue\n<SkAutocomplete v-model=\"query\">\n    <SkAutocompleteItem value=\"recent1\">Recent search 1</SkAutocompleteItem>\n    <SkAutocompleteItem value=\"recent2\">Recent search 2</SkAutocompleteItem>\n    <SkAutocompleteSeparator />\n    <SkAutocompleteItem value=\"popular\">Popular searches...</SkAutocompleteItem>\n</SkAutocomplete>\n```",
+          "source": {
+            "module": "./src/components/Autocomplete/SkAutocompleteSeparator.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "SkAvatar",
           "description": "A user profile avatar component displaying an image, initials, or placeholder icon. Features a\ndistinctive square shape with beveled top-left and bottom-right corners matching the SleekSpace design system.\nImplements graceful degradation: shows image if provided and loads successfully, falls back to initials if\nspecified, otherwise displays a generic user icon. Supports all semantic color kinds and custom colors.\n\n**Example:**\n\n```vue\n<!-- With image -->\n<SkAvatar src=\"/avatars/user.jpg\" alt=\"Jane Doe\" size=\"lg\" />\n\n<!-- With initials fallback -->\n<SkAvatar src=\"/avatars/user.jpg\" initials=\"JD\" kind=\"primary\" />\n\n<!-- Initials only -->\n<SkAvatar initials=\"AB\" kind=\"accent\" size=\"xl\" />\n\n<!-- Custom icon fallback -->\n<SkAvatar kind=\"info\">\n  <template #icon><RobotIcon /></template>\n</SkAvatar>\n```",
@@ -520,7 +744,7 @@
                 "kind": "expression",
                 "type": "SkButtonKind"
               },
-              "default": "'neutral'"
+              "default": "undefined"
             },
             {
               "name": "variant",
@@ -540,7 +764,7 @@
                 "kind": "expression",
                 "type": "SkButtonSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "disabled",
@@ -582,6 +806,16 @@
               },
               "default": "false"
             },
+            {
+              "name": "corners",
+              "required": false,
+              "description": "Which corners receive the beveled cut. Pass an empty array for square corners.\nWhen omitted, defaults to the button's standalone visual (`top-left` + `bottom-right`).",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "undefined"
+            },
             {
               "name": "href",
               "required": false,
@@ -1033,7 +1267,7 @@
                 "kind": "expression",
                 "type": "SkColorPickerSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "format",
@@ -1744,7 +1978,7 @@
               "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"
+                "type": "ComponentKind"
               },
               "default": "'success'"
             },
@@ -1754,7 +1988,7 @@
               "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"
+                "type": "ComponentKind"
               },
               "default": "'danger'"
             }
@@ -1855,7 +2089,17 @@
                 "kind": "expression",
                 "type": "SkInputSize"
               },
-              "default": "'md'"
+              "default": "undefined"
+            },
+            {
+              "name": "corners",
+              "required": false,
+              "description": "Which corners receive the beveled cut. Pass an empty array for square corners.\nWhen omitted, defaults to the input's standalone visual (`top-right` only).",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "undefined"
             },
             {
               "name": "placeholder",
@@ -1923,6 +2167,112 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "SkInputGroup",
+          "description": "Wraps form inputs, buttons, selects, and SkInputGroupAddon children into a\nsingle visually unified control. Bevels appear only on the group's outer corners; interior\njoins are clean. Cascades kind and size to Vue children via provide/inject — size on the\n`input-group-size` channel, kind on the `inherited-kind` ambient-default channel. A\nparent SkField's validation override (the `validation-kind` channel) takes precedence over\nboth the group's own kind and the descendants' kinds.\n\n**Example:**\n\n```vue\n<SkInputGroup :corners=\"['top-left', 'bottom-right']\" size=\"md\" kind=\"primary\">\n    <SkInputGroupAddon>$</SkInputGroupAddon>\n    <SkInput v-model=\"amount\" />\n    <SkButton>Submit</SkButton>\n</SkInputGroup>\n```",
+          "attributes": [
+            {
+              "name": "borderColor",
+              "required": false,
+              "description": "Border color for the component. Accepts the same kind names and CSS color values as\n`baseColor`. Only honoured by components that render a visible border (panels, cards,\ninputs, etc.); ignored elsewhere.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "textColor",
+              "required": false,
+              "description": "Text/foreground color for the component. Accepts the same kind names and CSS color values\nas `baseColor`. If not provided, falls back to the theme's neutral text color for legibility\non arbitrary custom backgrounds.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "baseColor",
+              "required": false,
+              "description": "Base color for the component. Accepts either:\n- A SleekSpace kind name: `\"neutral\"`, `\"primary\"`, `\"accent\"`, `\"info\"`, `\"success\"`,\n  `\"warning\"`, `\"danger\"`, `\"neon-blue\"`, `\"light-blue\"`, `\"neon-orange\"`,\n  `\"neon-purple\"`, `\"neon-green\"`, `\"neon-mint\"`, `\"neon-pink\"`, `\"yellow\"`, `\"red\"`,\n  `\"boulder\"` — resolves to the matching `--sk-<kind>-base` token.\n- Any CSS color value: hex (`\"#8B5CF6\"`), oklch (`\"oklch(0.7 0.25 300)\"`),\n  rgb/hsl (`\"rgb(139, 92, 246)\"`), a CSS variable (`\"var(--my-color)\"`), or a\n  named color (`\"rebeccapurple\"`).\n\nWhen provided, this overrides the color from the `kind` prop.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "kind",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "SkInputGroupKind"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "SkInputGroupSize"
+              },
+              "default": "'md'"
+            },
+            {
+              "name": "corners",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "() => [ 'top-left', 'bottom-right' ]"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Form components, SkButton, and SkInputGroupAddon children in left-to-right order."
+            }
+          ],
+          "source": {
+            "module": "./src/components/InputGroup/SkInputGroup.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SkInputGroupAddon",
+          "description": "Styled wrapper for non-component content (text, icons, plain HTML) inside an\nSkInputGroup. Renders as a span with the addon background, border, and font sizing matching\nthe surrounding group. Inherits size and kind from the parent SkInputGroup via inject.\n\n**Example:**\n\n```vue\n<SkInputGroup>\n    <SkInputGroupAddon>$</SkInputGroupAddon>\n    <SkInput v-model=\"amount\" />\n</SkInputGroup>\n```",
+          "attributes": [
+            {
+              "name": "kind",
+              "required": false,
+              "description": "Semantic color kind. Inherits from a parent SkInputGroup or SkField when not set.",
+              "value": {
+                "kind": "expression",
+                "type": "SkInputGroupAddonKind"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "size",
+              "required": false,
+              "description": "Size of the addon. Inherits from a parent SkInputGroup when not set.",
+              "value": {
+                "kind": "expression",
+                "type": "SkInputGroupAddonSize"
+              },
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Addon content. Text, icons, or any inline element."
+            }
+          ],
+          "source": {
+            "module": "./src/components/InputGroup/SkInputGroupAddon.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "SkListbox",
           "description": "A searchable dropdown listbox for selecting from predefined options. Features a text input\nfor filtering options and a dropdown panel displaying matching items. Built on RekaUI's Combobox\nprimitive with full keyboard navigation, type-ahead search, and portal rendering for proper z-index.\n\n**Example:**\n\n```vue\n<SkListbox v-model=\"selectedCountry\" kind=\"primary\" placeholder=\"Select a country...\">\n    <SkListboxItem value=\"us\">United States</SkListboxItem>\n    <SkListboxItem value=\"uk\">United Kingdom</SkListboxItem>\n    <SkListboxItem value=\"ca\">Canada</SkListboxItem>\n</SkListbox>\n```",
@@ -1972,7 +2322,7 @@
                 "kind": "expression",
                 "type": "SkListboxSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "placeholder",
@@ -2333,7 +2683,7 @@
                 "kind": "expression",
                 "type": "SkNumberInputSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "placeholder",
@@ -2424,6 +2774,16 @@
                 "type": "boolean"
               },
               "default": "true"
+            },
+            {
+              "name": "corners",
+              "required": false,
+              "description": "Which corners receive the beveled cut. Pass an empty array for square corners.",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "undefined"
             }
           ],
           "source": {
@@ -3491,7 +3851,7 @@
                 "kind": "expression",
                 "type": "SkSelectSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "placeholder",
@@ -3512,6 +3872,16 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "corners",
+              "required": false,
+              "description": "Which corners receive the beveled cut. Pass an empty array for square corners.",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -4762,7 +5132,7 @@
                 "kind": "expression",
                 "type": "SkTagsInputSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "placeholder",
@@ -4879,7 +5249,7 @@
                 "kind": "expression",
                 "type": "SkTextareaSize"
               },
-              "default": "'md'"
+              "default": "undefined"
             },
             {
               "name": "placeholder",