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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (536) hide show
  1. package/dist/components/Accordion/SkAccordion.vue.d.ts +65 -0
  2. package/dist/components/Accordion/SkAccordionItem.vue.d.ts +52 -0
  3. package/dist/components/Accordion/index.d.ts +3 -0
  4. package/dist/components/Accordion/types.d.ts +3 -0
  5. package/dist/components/Alert/SkAlert.vue.d.ts +39 -0
  6. package/dist/components/Alert/types.d.ts +4 -0
  7. package/dist/components/Avatar/SkAvatar.vue.d.ts +75 -0
  8. package/dist/components/Avatar/index.d.ts +2 -0
  9. package/dist/components/Avatar/types.d.ts +20 -0
  10. package/dist/components/Breadcrumbs/SkBreadcrumbItem.vue.d.ts +51 -0
  11. package/dist/components/Breadcrumbs/SkBreadcrumbSeparator.vue.d.ts +13 -0
  12. package/dist/components/Breadcrumbs/SkBreadcrumbs.vue.d.ts +24 -0
  13. package/dist/components/Breadcrumbs/index.d.ts +4 -0
  14. package/dist/components/Breadcrumbs/types.d.ts +18 -0
  15. package/dist/components/Button/SkButton.vue.d.ts +97 -0
  16. package/dist/components/Button/types.d.ts +5 -0
  17. package/dist/components/Card/SkCard.vue.d.ts +88 -0
  18. package/dist/components/Card/types.d.ts +2 -0
  19. package/dist/components/Checkbox/SkCheckbox.vue.d.ts +71 -0
  20. package/dist/components/Checkbox/index.d.ts +2 -0
  21. package/dist/components/Checkbox/types.d.ts +3 -0
  22. package/dist/components/Collapsible/SkCollapsible.vue.d.ts +70 -0
  23. package/dist/components/Collapsible/index.d.ts +2 -0
  24. package/dist/components/Collapsible/types.d.ts +2 -0
  25. package/dist/components/Divider/SkDivider.vue.d.ts +39 -0
  26. package/dist/components/Divider/types.d.ts +8 -0
  27. package/dist/components/Dropdown/SkDropdown.vue.d.ts +63 -0
  28. package/dist/components/Dropdown/SkDropdownMenuItem.vue.d.ts +32 -0
  29. package/dist/components/Dropdown/SkDropdownMenuSeparator.vue.d.ts +2 -0
  30. package/dist/components/Dropdown/SkDropdownSubmenu.vue.d.ts +34 -0
  31. package/dist/components/Dropdown/index.d.ts +5 -0
  32. package/dist/components/Dropdown/types.d.ts +4 -0
  33. package/dist/components/Field/SkField.vue.d.ts +99 -0
  34. package/dist/components/Field/index.d.ts +2 -0
  35. package/dist/components/Field/types.d.ts +1 -0
  36. package/dist/components/Group/SkGroup.vue.d.ts +29 -0
  37. package/dist/components/Group/types.d.ts +4 -0
  38. package/dist/components/Input/SkInput.vue.d.ts +84 -0
  39. package/dist/components/Input/index.d.ts +2 -0
  40. package/dist/components/Input/types.d.ts +4 -0
  41. package/dist/components/Listbox/SkListbox.vue.d.ts +62 -0
  42. package/dist/components/Listbox/SkListboxItem.vue.d.ts +34 -0
  43. package/dist/components/Listbox/SkListboxSeparator.vue.d.ts +2 -0
  44. package/dist/components/Listbox/index.d.ts +4 -0
  45. package/dist/components/Listbox/types.d.ts +3 -0
  46. package/dist/components/Modal/SkModal.vue.d.ts +108 -0
  47. package/dist/components/Modal/index.d.ts +2 -0
  48. package/dist/components/Modal/types.d.ts +3 -0
  49. package/dist/components/NavBar/SkNavBar.vue.d.ts +40 -0
  50. package/dist/components/NavBar/index.d.ts +2 -0
  51. package/dist/components/NavBar/types.d.ts +6 -0
  52. package/dist/components/NumberInput/SkNumberInput.vue.d.ts +93 -0
  53. package/dist/components/NumberInput/index.d.ts +2 -0
  54. package/dist/components/NumberInput/types.d.ts +3 -0
  55. package/dist/components/Page/SkPage.vue.d.ts +55 -0
  56. package/dist/components/Page/index.d.ts +2 -0
  57. package/dist/components/Page/types.d.ts +13 -0
  58. package/dist/components/Pagination/SkPagination.vue.d.ts +79 -0
  59. package/dist/components/Pagination/SkPaginationItem.vue.d.ts +44 -0
  60. package/dist/components/Pagination/index.d.ts +3 -0
  61. package/dist/components/Pagination/types.d.ts +24 -0
  62. package/dist/components/Panel/SkPanel.vue.d.ts +55 -0
  63. package/dist/components/Panel/types.d.ts +3 -0
  64. package/dist/components/Popover/SkPopover.vue.d.ts +94 -0
  65. package/dist/components/Popover/index.d.ts +2 -0
  66. package/dist/components/Popover/types.d.ts +4 -0
  67. package/dist/components/Progress/SkProgress.vue.d.ts +66 -0
  68. package/dist/components/Progress/index.d.ts +2 -0
  69. package/dist/components/Progress/types.d.ts +22 -0
  70. package/dist/components/Radio/SkRadio.vue.d.ts +59 -0
  71. package/dist/components/Radio/SkRadioGroup.vue.d.ts +85 -0
  72. package/dist/components/Radio/index.d.ts +3 -0
  73. package/dist/components/Radio/types.d.ts +4 -0
  74. package/dist/components/Sidebar/SkSidebar.vue.d.ts +38 -0
  75. package/dist/components/Sidebar/SkSidebarItem.vue.d.ts +37 -0
  76. package/dist/components/Sidebar/SkSidebarSection.vue.d.ts +44 -0
  77. package/dist/components/Sidebar/types.d.ts +2 -0
  78. package/dist/components/Skeleton/SkSkeleton.vue.d.ts +55 -0
  79. package/dist/components/Skeleton/index.d.ts +2 -0
  80. package/dist/components/Skeleton/types.d.ts +21 -0
  81. package/dist/components/Slider/SkSlider.vue.d.ts +100 -0
  82. package/dist/components/Slider/index.d.ts +2 -0
  83. package/dist/components/Slider/types.d.ts +32 -0
  84. package/dist/components/Spinner/SkSpinner.vue.d.ts +39 -0
  85. package/dist/components/Spinner/index.d.ts +2 -0
  86. package/dist/components/Spinner/types.d.ts +16 -0
  87. package/dist/components/Switch/SkSwitch.vue.d.ts +120 -0
  88. package/dist/components/Switch/index.d.ts +2 -0
  89. package/dist/components/Switch/types.d.ts +3 -0
  90. package/dist/components/Table/SkTable.vue.d.ts +86 -0
  91. package/dist/components/Table/index.d.ts +2 -0
  92. package/dist/components/Table/types.d.ts +3 -0
  93. package/dist/components/Tabs/SkTab.vue.d.ts +49 -0
  94. package/dist/components/Tabs/SkTabList.vue.d.ts +28 -0
  95. package/dist/components/Tabs/SkTabPanel.vue.d.ts +33 -0
  96. package/dist/components/Tabs/SkTabPanels.vue.d.ts +17 -0
  97. package/dist/components/Tabs/SkTabs.vue.d.ts +60 -0
  98. package/dist/components/Tabs/types.d.ts +5 -0
  99. package/dist/components/Tag/SkTag.vue.d.ts +58 -0
  100. package/dist/components/Tag/types.d.ts +8 -0
  101. package/dist/components/TagsInput/SkTagsInput.vue.d.ts +77 -0
  102. package/dist/components/TagsInput/index.d.ts +2 -0
  103. package/dist/components/TagsInput/types.d.ts +3 -0
  104. package/dist/components/Textarea/SkTextarea.vue.d.ts +85 -0
  105. package/dist/components/Textarea/index.d.ts +2 -0
  106. package/dist/components/Textarea/types.d.ts +3 -0
  107. package/dist/components/Theme/SkTheme.vue.d.ts +20 -0
  108. package/dist/components/Theme/types.d.ts +16 -0
  109. package/dist/components/Theme/useTheme.d.ts +84 -0
  110. package/dist/components/Toast/SkToast.vue.d.ts +42 -0
  111. package/dist/components/Toast/SkToastProvider.vue.d.ts +62 -0
  112. package/dist/components/Toast/index.d.ts +3 -0
  113. package/dist/components/Toast/types.d.ts +35 -0
  114. package/dist/components/Toast/useToast.d.ts +33 -0
  115. package/dist/components/Tooltip/SkTooltip.vue.d.ts +81 -0
  116. package/dist/components/Tooltip/SkTooltipProvider.vue.d.ts +70 -0
  117. package/dist/components/Tooltip/index.d.ts +3 -0
  118. package/dist/components/Tooltip/types.d.ts +4 -0
  119. package/dist/composables/useCustomColors.d.ts +74 -0
  120. package/dist/composables/useCustomColors.test.d.ts +1 -0
  121. package/dist/composables/usePortalContext.d.ts +75 -0
  122. package/dist/composables/usePortalContext.test.d.ts +1 -0
  123. package/dist/index.d.ts +149 -0
  124. package/dist/sleekspace-ui.css +2 -16
  125. package/dist/sleekspace-ui.es.js +43 -42
  126. package/dist/sleekspace-ui.umd.js +43 -42
  127. package/dist/tokens.css +968 -0
  128. package/dist/types.d.ts +29 -0
  129. package/docs/components/accordion/_meta.yaml +9 -0
  130. package/docs/components/accordion/custom-colors.md +20 -0
  131. package/docs/components/accordion/intro.md +8 -0
  132. package/docs/components/accordion/kinds.md +30 -0
  133. package/docs/components/accordion/multiple.md +28 -0
  134. package/docs/components/accordion/real-world.md +31 -0
  135. package/docs/components/accordion/usage.md +28 -0
  136. package/docs/components/alert/_meta.yaml +10 -0
  137. package/docs/components/alert/custom-colors.md +30 -0
  138. package/docs/components/alert/custom-icons.md +17 -0
  139. package/docs/components/alert/intro.md +8 -0
  140. package/docs/components/alert/kinds.md +24 -0
  141. package/docs/components/alert/prominent.md +16 -0
  142. package/docs/components/alert/rich-content.md +19 -0
  143. package/docs/components/alert/usage.md +12 -0
  144. package/docs/components/avatar/_meta.yaml +10 -0
  145. package/docs/components/avatar/custom-colors.md +14 -0
  146. package/docs/components/avatar/images.md +12 -0
  147. package/docs/components/avatar/intro.md +8 -0
  148. package/docs/components/avatar/kinds.md +16 -0
  149. package/docs/components/avatar/real-world.md +25 -0
  150. package/docs/components/avatar/sizes.md +14 -0
  151. package/docs/components/avatar/usage.md +15 -0
  152. package/docs/components/breadcrumbs/_meta.yaml +9 -0
  153. package/docs/components/breadcrumbs/custom-colors.md +14 -0
  154. package/docs/components/breadcrumbs/intro.md +8 -0
  155. package/docs/components/breadcrumbs/kinds.md +16 -0
  156. package/docs/components/breadcrumbs/real-world.md +33 -0
  157. package/docs/components/breadcrumbs/separators.md +13 -0
  158. package/docs/components/breadcrumbs/usage.md +15 -0
  159. package/docs/components/card/_meta.yaml +10 -0
  160. package/docs/components/card/intro.md +8 -0
  161. package/docs/components/card/kinds.md +24 -0
  162. package/docs/components/card/media.md +25 -0
  163. package/docs/components/card/neon-kinds.md +24 -0
  164. package/docs/components/card/no-decoration.md +15 -0
  165. package/docs/components/card/scrollable.md +23 -0
  166. package/docs/components/card/usage.md +12 -0
  167. package/docs/components/checkbox/_meta.yaml +11 -0
  168. package/docs/components/checkbox/color-kinds.md +17 -0
  169. package/docs/components/checkbox/custom-colors.md +21 -0
  170. package/docs/components/checkbox/form-example.md +24 -0
  171. package/docs/components/checkbox/intro.md +8 -0
  172. package/docs/components/checkbox/kinds.md +16 -0
  173. package/docs/components/checkbox/sizes.md +13 -0
  174. package/docs/components/checkbox/states.md +14 -0
  175. package/docs/components/checkbox/usage.md +17 -0
  176. package/docs/components/collapsible/_meta.yaml +9 -0
  177. package/docs/components/collapsible/accessibility.md +6 -0
  178. package/docs/components/collapsible/custom-colors.md +16 -0
  179. package/docs/components/collapsible/custom-trigger.md +35 -0
  180. package/docs/components/collapsible/intro.md +8 -0
  181. package/docs/components/collapsible/kinds.md +16 -0
  182. package/docs/components/collapsible/usage.md +22 -0
  183. package/docs/components/divider/_meta.yaml +10 -0
  184. package/docs/components/divider/accessibility.md +6 -0
  185. package/docs/components/divider/intro.md +8 -0
  186. package/docs/components/divider/kinds.md +16 -0
  187. package/docs/components/divider/orientation.md +18 -0
  188. package/docs/components/divider/sizes.md +24 -0
  189. package/docs/components/divider/usage.md +14 -0
  190. package/docs/components/divider/variants.md +14 -0
  191. package/docs/components/dropdown/_meta.yaml +11 -0
  192. package/docs/components/dropdown/accessibility.md +6 -0
  193. package/docs/components/dropdown/custom-colors.md +17 -0
  194. package/docs/components/dropdown/custom-trigger.md +18 -0
  195. package/docs/components/dropdown/intro.md +8 -0
  196. package/docs/components/dropdown/kinds.md +23 -0
  197. package/docs/components/dropdown/positioning.md +23 -0
  198. package/docs/components/dropdown/submenus.md +28 -0
  199. package/docs/components/dropdown/usage.md +24 -0
  200. package/docs/components/field/_meta.yaml +10 -0
  201. package/docs/components/field/accessibility.md +6 -0
  202. package/docs/components/field/description.md +15 -0
  203. package/docs/components/field/intro.md +8 -0
  204. package/docs/components/field/label-position.md +16 -0
  205. package/docs/components/field/required.md +12 -0
  206. package/docs/components/field/usage.md +19 -0
  207. package/docs/components/field/validation.md +32 -0
  208. package/docs/components/group/_meta.yaml +7 -0
  209. package/docs/components/group/accessibility.md +6 -0
  210. package/docs/components/group/intro.md +8 -0
  211. package/docs/components/group/orientation.md +22 -0
  212. package/docs/components/group/usage.md +14 -0
  213. package/docs/components/input/_meta.yaml +11 -0
  214. package/docs/components/input/accessibility.md +6 -0
  215. package/docs/components/input/custom-colors.md +21 -0
  216. package/docs/components/input/intro.md +8 -0
  217. package/docs/components/input/kinds.md +16 -0
  218. package/docs/components/input/sizes.md +13 -0
  219. package/docs/components/input/states.md +12 -0
  220. package/docs/components/input/types.md +15 -0
  221. package/docs/components/input/usage.md +17 -0
  222. package/docs/components/listbox/_meta.yaml +12 -0
  223. package/docs/components/listbox/color-kinds.md +27 -0
  224. package/docs/components/listbox/custom-colors.md +18 -0
  225. package/docs/components/listbox/form-example.md +36 -0
  226. package/docs/components/listbox/intro.md +8 -0
  227. package/docs/components/listbox/kinds.md +30 -0
  228. package/docs/components/listbox/separators.md +19 -0
  229. package/docs/components/listbox/sizes.md +24 -0
  230. package/docs/components/listbox/states.md +19 -0
  231. package/docs/components/listbox/usage.md +23 -0
  232. package/docs/components/modal/_meta.yaml +13 -0
  233. package/docs/components/modal/close-behaviors.md +49 -0
  234. package/docs/components/modal/confirmation.md +19 -0
  235. package/docs/components/modal/controlled-state.md +29 -0
  236. package/docs/components/modal/custom-colors.md +25 -0
  237. package/docs/components/modal/custom-trigger.md +28 -0
  238. package/docs/components/modal/form-modal.md +23 -0
  239. package/docs/components/modal/intro.md +8 -0
  240. package/docs/components/modal/kinds.md +30 -0
  241. package/docs/components/modal/sizes.md +21 -0
  242. package/docs/components/modal/usage.md +15 -0
  243. package/docs/components/navbar/_meta.yaml +11 -0
  244. package/docs/components/navbar/complex-layouts.md +34 -0
  245. package/docs/components/navbar/custom-colors.md +24 -0
  246. package/docs/components/navbar/icons.md +33 -0
  247. package/docs/components/navbar/intro.md +8 -0
  248. package/docs/components/navbar/kinds.md +24 -0
  249. package/docs/components/navbar/neon-colors.md +24 -0
  250. package/docs/components/navbar/sticky.md +22 -0
  251. package/docs/components/navbar/usage.md +25 -0
  252. package/docs/components/number-input/_meta.yaml +12 -0
  253. package/docs/components/number-input/color-kinds.md +17 -0
  254. package/docs/components/number-input/custom-colors.md +21 -0
  255. package/docs/components/number-input/form-example.md +55 -0
  256. package/docs/components/number-input/intro.md +8 -0
  257. package/docs/components/number-input/kinds.md +16 -0
  258. package/docs/components/number-input/min-max-step.md +11 -0
  259. package/docs/components/number-input/sizes.md +13 -0
  260. package/docs/components/number-input/states.md +12 -0
  261. package/docs/components/number-input/usage.md +18 -0
  262. package/docs/components/page/_meta.yaml +9 -0
  263. package/docs/components/page/custom-width.md +17 -0
  264. package/docs/components/page/fixed-header.md +17 -0
  265. package/docs/components/page/intro.md +8 -0
  266. package/docs/components/page/real-world.md +37 -0
  267. package/docs/components/page/sidebar-position.md +18 -0
  268. package/docs/components/page/usage.md +33 -0
  269. package/docs/components/pagination/_meta.yaml +12 -0
  270. package/docs/components/pagination/config-options.md +17 -0
  271. package/docs/components/pagination/custom-colors.md +15 -0
  272. package/docs/components/pagination/intro.md +8 -0
  273. package/docs/components/pagination/kinds.md +13 -0
  274. package/docs/components/pagination/sizes.md +14 -0
  275. package/docs/components/pagination/states.md +10 -0
  276. package/docs/components/pagination/table-example.md +28 -0
  277. package/docs/components/pagination/usage.md +10 -0
  278. package/docs/components/pagination/variants.md +13 -0
  279. package/docs/components/panel/_meta.yaml +10 -0
  280. package/docs/components/panel/custom-colors.md +18 -0
  281. package/docs/components/panel/decoration.md +20 -0
  282. package/docs/components/panel/intro.md +8 -0
  283. package/docs/components/panel/kinds.md +23 -0
  284. package/docs/components/panel/scrollable.md +18 -0
  285. package/docs/components/panel/sizes.md +20 -0
  286. package/docs/components/panel/usage.md +13 -0
  287. package/docs/components/popover/_meta.yaml +9 -0
  288. package/docs/components/popover/arrow.md +15 -0
  289. package/docs/components/popover/custom-colors.md +19 -0
  290. package/docs/components/popover/intro.md +8 -0
  291. package/docs/components/popover/kinds.md +24 -0
  292. package/docs/components/popover/positioning.md +36 -0
  293. package/docs/components/popover/usage.md +15 -0
  294. package/docs/components/progress/_meta.yaml +10 -0
  295. package/docs/components/progress/custom-colors.md +14 -0
  296. package/docs/components/progress/indeterminate.md +11 -0
  297. package/docs/components/progress/intro.md +8 -0
  298. package/docs/components/progress/kinds.md +16 -0
  299. package/docs/components/progress/sizes.md +14 -0
  300. package/docs/components/progress/usage.md +13 -0
  301. package/docs/components/progress/value-label.md +12 -0
  302. package/docs/components/radio/_meta.yaml +10 -0
  303. package/docs/components/radio/custom-colors.md +24 -0
  304. package/docs/components/radio/intro.md +8 -0
  305. package/docs/components/radio/kinds.md +23 -0
  306. package/docs/components/radio/orientation.md +22 -0
  307. package/docs/components/radio/sizes.md +23 -0
  308. package/docs/components/radio/states.md +21 -0
  309. package/docs/components/radio/usage.md +21 -0
  310. package/docs/components/sidebar/_meta.yaml +10 -0
  311. package/docs/components/sidebar/active-state.md +35 -0
  312. package/docs/components/sidebar/custom-colors.md +20 -0
  313. package/docs/components/sidebar/intro.md +8 -0
  314. package/docs/components/sidebar/kinds.md +22 -0
  315. package/docs/components/sidebar/router.md +24 -0
  316. package/docs/components/sidebar/sections.md +24 -0
  317. package/docs/components/sidebar/usage.md +25 -0
  318. package/docs/components/skeleton/_meta.yaml +8 -0
  319. package/docs/components/skeleton/animations.md +17 -0
  320. package/docs/components/skeleton/composition.md +22 -0
  321. package/docs/components/skeleton/intro.md +8 -0
  322. package/docs/components/skeleton/usage.md +12 -0
  323. package/docs/components/skeleton/variants.md +17 -0
  324. package/docs/components/slider/_meta.yaml +12 -0
  325. package/docs/components/slider/accessibility.md +6 -0
  326. package/docs/components/slider/custom-colors.md +14 -0
  327. package/docs/components/slider/intro.md +8 -0
  328. package/docs/components/slider/kinds.md +16 -0
  329. package/docs/components/slider/range.md +16 -0
  330. package/docs/components/slider/sizes.md +14 -0
  331. package/docs/components/slider/step.md +13 -0
  332. package/docs/components/slider/usage.md +16 -0
  333. package/docs/components/slider/vertical.md +14 -0
  334. package/docs/components/spinner/_meta.yaml +10 -0
  335. package/docs/components/spinner/accessibility.md +6 -0
  336. package/docs/components/spinner/custom-colors.md +13 -0
  337. package/docs/components/spinner/intro.md +8 -0
  338. package/docs/components/spinner/kinds.md +16 -0
  339. package/docs/components/spinner/sizes.md +14 -0
  340. package/docs/components/spinner/usage.md +10 -0
  341. package/docs/components/spinner/variants.md +12 -0
  342. package/docs/components/switch/_meta.yaml +12 -0
  343. package/docs/components/switch/accessibility.md +6 -0
  344. package/docs/components/switch/custom-colors.md +29 -0
  345. package/docs/components/switch/disabled.md +11 -0
  346. package/docs/components/switch/dynamic-labels.md +12 -0
  347. package/docs/components/switch/intro.md +8 -0
  348. package/docs/components/switch/kinds.md +16 -0
  349. package/docs/components/switch/sizes.md +14 -0
  350. package/docs/components/switch/thumb-color.md +16 -0
  351. package/docs/components/switch/usage.md +18 -0
  352. package/docs/components/table/_meta.yaml +12 -0
  353. package/docs/components/table/accessibility.md +6 -0
  354. package/docs/components/table/borders.md +17 -0
  355. package/docs/components/table/hoverable.md +26 -0
  356. package/docs/components/table/intro.md +8 -0
  357. package/docs/components/table/kinds.md +18 -0
  358. package/docs/components/table/striped.md +28 -0
  359. package/docs/components/table/subtle.md +26 -0
  360. package/docs/components/table/usage.md +30 -0
  361. package/docs/components/table/variants.md +23 -0
  362. package/docs/components/tabs/_meta.yaml +10 -0
  363. package/docs/components/tabs/accessibility.md +6 -0
  364. package/docs/components/tabs/custom-colors.md +23 -0
  365. package/docs/components/tabs/icons.md +23 -0
  366. package/docs/components/tabs/intro.md +8 -0
  367. package/docs/components/tabs/kinds.md +30 -0
  368. package/docs/components/tabs/usage.md +38 -0
  369. package/docs/components/tabs/vertical.md +23 -0
  370. package/docs/components/tag/_meta.yaml +11 -0
  371. package/docs/components/tag/accessibility.md +6 -0
  372. package/docs/components/tag/custom-colors.md +32 -0
  373. package/docs/components/tag/intro.md +8 -0
  374. package/docs/components/tag/kinds.md +16 -0
  375. package/docs/components/tag/removable.md +33 -0
  376. package/docs/components/tag/sizes.md +13 -0
  377. package/docs/components/tag/usage.md +13 -0
  378. package/docs/components/tag/variants.md +13 -0
  379. package/docs/components/tags-input/_meta.yaml +13 -0
  380. package/docs/components/tags-input/color-kinds.md +17 -0
  381. package/docs/components/tags-input/custom-colors.md +21 -0
  382. package/docs/components/tags-input/form-example.md +30 -0
  383. package/docs/components/tags-input/intro.md +8 -0
  384. package/docs/components/tags-input/kinds.md +16 -0
  385. package/docs/components/tags-input/max-tags.md +10 -0
  386. package/docs/components/tags-input/sizes.md +13 -0
  387. package/docs/components/tags-input/states.md +10 -0
  388. package/docs/components/tags-input/tag-customization.md +17 -0
  389. package/docs/components/tags-input/usage.md +17 -0
  390. package/docs/components/textarea/_meta.yaml +12 -0
  391. package/docs/components/textarea/color-kinds.md +17 -0
  392. package/docs/components/textarea/custom-colors.md +21 -0
  393. package/docs/components/textarea/form-example.md +37 -0
  394. package/docs/components/textarea/intro.md +8 -0
  395. package/docs/components/textarea/kinds.md +16 -0
  396. package/docs/components/textarea/rows.md +12 -0
  397. package/docs/components/textarea/sizes.md +13 -0
  398. package/docs/components/textarea/states.md +12 -0
  399. package/docs/components/textarea/usage.md +17 -0
  400. package/docs/components/theme/_meta.yaml +9 -0
  401. package/docs/components/theme/available-themes.md +16 -0
  402. package/docs/components/theme/intro.md +8 -0
  403. package/docs/components/theme/nested-themes.md +16 -0
  404. package/docs/components/theme/portal-components.md +19 -0
  405. package/docs/components/theme/programmatic-switching.md +19 -0
  406. package/docs/components/theme/usage.md +16 -0
  407. package/docs/components/toast/_meta.yaml +11 -0
  408. package/docs/components/toast/dismiss.md +15 -0
  409. package/docs/components/toast/duration.md +23 -0
  410. package/docs/components/toast/intro.md +8 -0
  411. package/docs/components/toast/kinds.md +13 -0
  412. package/docs/components/toast/real-world.md +23 -0
  413. package/docs/components/toast/setup.md +16 -0
  414. package/docs/components/toast/usage.md +18 -0
  415. package/docs/components/toast/with-title.md +14 -0
  416. package/docs/components/tooltip/_meta.yaml +14 -0
  417. package/docs/components/tooltip/alignment.md +24 -0
  418. package/docs/components/tooltip/app-level-provider.md +21 -0
  419. package/docs/components/tooltip/arrow.md +21 -0
  420. package/docs/components/tooltip/custom-colors.md +24 -0
  421. package/docs/components/tooltip/delay.md +27 -0
  422. package/docs/components/tooltip/intro.md +8 -0
  423. package/docs/components/tooltip/kinds.md +27 -0
  424. package/docs/components/tooltip/positioning.md +24 -0
  425. package/docs/components/tooltip/provider.md +26 -0
  426. package/docs/components/tooltip/real-world.md +32 -0
  427. package/docs/components/tooltip/usage.md +15 -0
  428. package/docs/guides/ai-llms.md +63 -0
  429. package/docs/guides/design-tokens/_meta.yaml +14 -0
  430. package/docs/guides/design-tokens/advanced.md +60 -0
  431. package/docs/guides/design-tokens/architecture.md +11 -0
  432. package/docs/guides/design-tokens/best-practices.md +21 -0
  433. package/docs/guides/design-tokens/component-tokens.md +37 -0
  434. package/docs/guides/design-tokens/foundation-colors.md +13 -0
  435. package/docs/guides/design-tokens/foundation-other.md +41 -0
  436. package/docs/guides/design-tokens/intro.md +19 -0
  437. package/docs/guides/design-tokens/semantic-kinds.md +33 -0
  438. package/docs/guides/design-tokens/semantic-states.md +55 -0
  439. package/docs/guides/design-tokens/themes.md +38 -0
  440. package/docs/guides/design-tokens/usage.md +55 -0
  441. package/package.json +3 -5
  442. package/src/components/Accordion/SkAccordion.vue +51 -37
  443. package/src/components/Accordion/SkAccordionItem.vue +40 -20
  444. package/src/components/Alert/SkAlert.vue +37 -27
  445. package/src/components/Avatar/SkAvatar.vue +69 -10
  446. package/src/components/Breadcrumbs/SkBreadcrumbItem.vue +63 -1
  447. package/src/components/Breadcrumbs/SkBreadcrumbSeparator.vue +32 -3
  448. package/src/components/Breadcrumbs/SkBreadcrumbs.vue +36 -0
  449. package/src/components/Button/SkButton.vue +83 -17
  450. package/src/components/Card/SkCard.vue +84 -17
  451. package/src/components/Checkbox/SkCheckbox.vue +52 -12
  452. package/src/components/Collapsible/SkCollapsible.vue +65 -27
  453. package/src/components/Divider/SkDivider.vue +51 -11
  454. package/src/components/Dropdown/SkDropdown.vue +54 -11
  455. package/src/components/Dropdown/SkDropdownMenuItem.vue +25 -6
  456. package/src/components/Dropdown/SkDropdownMenuSeparator.vue +16 -2
  457. package/src/components/Dropdown/SkDropdownSubmenu.vue +30 -8
  458. package/src/components/Field/SkField.vue +83 -15
  459. package/src/components/Group/SkGroup.vue +24 -9
  460. package/src/components/Input/SkInput.vue +77 -15
  461. package/src/components/Listbox/SkListbox.vue +48 -10
  462. package/src/components/Listbox/SkListboxItem.vue +28 -7
  463. package/src/components/Listbox/SkListboxSeparator.vue +16 -2
  464. package/src/components/Modal/SkModal.vue +85 -36
  465. package/src/components/NavBar/SkNavBar.vue +39 -9
  466. package/src/components/NumberInput/SkNumberInput.vue +85 -16
  467. package/src/components/Page/SkPage.vue +55 -6
  468. package/src/components/Pagination/SkPagination.vue +88 -0
  469. package/src/components/Pagination/SkPaginationItem.vue +51 -1
  470. package/src/components/Panel/SkPanel.vue +46 -12
  471. package/src/components/Popover/SkPopover.vue +91 -36
  472. package/src/components/Progress/SkProgress.vue +74 -10
  473. package/src/components/Radio/SkRadio.vue +48 -12
  474. package/src/components/Radio/SkRadioGroup.vue +69 -13
  475. package/src/components/Sidebar/SkSidebar.vue +36 -29
  476. package/src/components/Sidebar/SkSidebarItem.vue +34 -9
  477. package/src/components/Sidebar/SkSidebarSection.vue +22 -8
  478. package/src/components/Skeleton/SkSkeleton.vue +75 -8
  479. package/src/components/Slider/SkSlider.vue +91 -15
  480. package/src/components/Spinner/SkSpinner.vue +50 -6
  481. package/src/components/Switch/SkSwitch.vue +98 -35
  482. package/src/components/Table/SkTable.vue +79 -15
  483. package/src/components/Tabs/SkTab.vue +41 -11
  484. package/src/components/Tabs/SkTabList.vue +24 -8
  485. package/src/components/Tabs/SkTabPanel.vue +31 -9
  486. package/src/components/Tabs/SkTabPanels.vue +21 -4
  487. package/src/components/Tabs/SkTabs.vue +49 -37
  488. package/src/components/Tag/SkTag.vue +57 -32
  489. package/src/components/TagsInput/SkTagsInput.vue +75 -14
  490. package/src/components/Textarea/SkTextarea.vue +78 -15
  491. package/src/components/Theme/SkTheme.vue +27 -3
  492. package/src/components/Theme/types.ts +14 -5
  493. package/src/components/Toast/SkToast.vue +56 -9
  494. package/src/components/Toast/SkToastProvider.vue +43 -17
  495. package/src/components/Tooltip/SkTooltip.vue +66 -35
  496. package/src/components/Tooltip/SkTooltipProvider.vue +36 -36
  497. package/src/composables/usePortalContext.test.ts +2 -0
  498. package/src/styles/components/_alert.scss +0 -22
  499. package/web-types.json +302 -282
  500. package/docs/components/accordion.md +0 -92
  501. package/docs/components/alert.md +0 -72
  502. package/docs/components/avatar.md +0 -69
  503. package/docs/components/breadcrumbs.md +0 -65
  504. package/docs/components/button.md +0 -110
  505. package/docs/components/card.md +0 -87
  506. package/docs/components/checkbox.md +0 -77
  507. package/docs/components/collapsible.md +0 -71
  508. package/docs/components/divider.md +0 -62
  509. package/docs/components/dropdown.md +0 -88
  510. package/docs/components/field.md +0 -80
  511. package/docs/components/group.md +0 -41
  512. package/docs/components/input.md +0 -84
  513. package/docs/components/listbox.md +0 -82
  514. package/docs/components/modal.md +0 -101
  515. package/docs/components/navbar.md +0 -64
  516. package/docs/components/number-input.md +0 -78
  517. package/docs/components/page.md +0 -77
  518. package/docs/components/pagination.md +0 -88
  519. package/docs/components/panel.md +0 -74
  520. package/docs/components/popover.md +0 -93
  521. package/docs/components/progress.md +0 -76
  522. package/docs/components/radio.md +0 -86
  523. package/docs/components/sidebar.md +0 -74
  524. package/docs/components/skeleton.md +0 -76
  525. package/docs/components/slider.md +0 -94
  526. package/docs/components/spinner.md +0 -59
  527. package/docs/components/switch.md +0 -97
  528. package/docs/components/table.md +0 -91
  529. package/docs/components/tabs.md +0 -108
  530. package/docs/components/tag.md +0 -75
  531. package/docs/components/tags-input.md +0 -88
  532. package/docs/components/textarea.md +0 -80
  533. package/docs/components/theme.md +0 -65
  534. package/docs/components/toast.md +0 -95
  535. package/docs/components/tooltip.md +0 -90
  536. package/docs/guides/design-tokens.md +0 -105
@@ -0,0 +1,65 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkAccordionKind, SkAccordionType } from './types';
3
+ export interface SkAccordionComponentProps extends ComponentCustomColors {
4
+ /**
5
+ * Controls whether one or multiple accordion items can be open simultaneously.
6
+ * In 'single' mode, opening a new item automatically closes the previously open item.
7
+ * In 'multiple' mode, users can expand any number of items independently.
8
+ * @default 'single'
9
+ */
10
+ type?: SkAccordionType;
11
+ /**
12
+ * The value(s) of currently open accordion item(s). Use with `v-model` for two-way binding.
13
+ * In 'single' mode, this is a string matching one item's `value` prop.
14
+ * In 'multiple' mode, this is an array of strings matching multiple items' `value` props.
15
+ */
16
+ modelValue?: string | string[];
17
+ /**
18
+ * When true and in 'single' mode, allows all items to be collapsed by clicking the open item again.
19
+ * When false, one item must always remain open (the first click selects, subsequent clicks don't collapse).
20
+ * This prop has no effect in 'multiple' mode where items are always independently collapsible.
21
+ * @default false
22
+ */
23
+ collapsible?: boolean;
24
+ /**
25
+ * Semantic color kind that controls the accordion's header and border colors. The kind is automatically
26
+ * inherited by all child SkAccordionItem components unless they specify their own kind.
27
+ * Semantic kinds (neutral, primary, accent, etc.) adapt to your theme.
28
+ * @default 'neutral'
29
+ */
30
+ kind?: SkAccordionKind;
31
+ /**
32
+ * When true, disables all accordion items. Items cannot be expanded or collapsed, and
33
+ * the accordion appears with reduced opacity. Individual items can also be disabled
34
+ * independently via their own `disabled` prop.
35
+ * @default false
36
+ */
37
+ disabled?: boolean;
38
+ }
39
+ declare function __VLS_template(): {
40
+ attrs: Partial<{}>;
41
+ slots: {
42
+ default?(_: {}): any;
43
+ };
44
+ refs: {};
45
+ rootEl: any;
46
+ };
47
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
48
+ declare const __VLS_component: import('vue').DefineComponent<SkAccordionComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
49
+ "update:modelValue": (value: string | string[] | undefined) => any;
50
+ }, string, import('vue').PublicProps, Readonly<SkAccordionComponentProps> & Readonly<{
51
+ "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
52
+ }>, {
53
+ type: SkAccordionType;
54
+ modelValue: string | string[];
55
+ collapsible: boolean;
56
+ kind: SkAccordionKind;
57
+ disabled: boolean;
58
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
59
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
60
+ export default _default;
61
+ type __VLS_WithTemplateSlots<T, S> = T & {
62
+ new (): {
63
+ $slots: S;
64
+ };
65
+ };
@@ -0,0 +1,52 @@
1
+ import { SkAccordionKind } from './types';
2
+ export interface SkAccordionItemComponentProps {
3
+ /**
4
+ * A unique identifier for this accordion item. This value is used by the parent SkAccordion
5
+ * to track which item(s) are currently open. Must be unique among siblings within the same
6
+ * accordion. The value is exposed in v-model bindings on the parent accordion.
7
+ */
8
+ value: string;
9
+ /**
10
+ * Text displayed in the accordion item's header/trigger button. This is the clickable
11
+ * area that expands or collapses the content. Can be overridden with the `title` slot
12
+ * for custom header content including icons, badges, or formatted text.
13
+ */
14
+ title?: string;
15
+ /**
16
+ * When true, this specific accordion item cannot be expanded or collapsed. The item
17
+ * appears with reduced opacity and the cursor changes to not-allowed. If the item
18
+ * was already open when disabled, it remains in its current state.
19
+ * @default false
20
+ */
21
+ disabled?: boolean;
22
+ /**
23
+ * Overrides the semantic color kind inherited from the parent SkAccordion. Use this
24
+ * to highlight specific items differently, such as marking one section as 'warning'
25
+ * or 'danger'. When not specified, the item uses the parent accordion's kind.
26
+ */
27
+ kind?: SkAccordionKind;
28
+ }
29
+ declare function __VLS_template(): {
30
+ attrs: Partial<{}>;
31
+ slots: {
32
+ title?(_: {
33
+ open: boolean;
34
+ }): any;
35
+ default?(_: {}): any;
36
+ };
37
+ refs: {};
38
+ rootEl: any;
39
+ };
40
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
41
+ declare const __VLS_component: import('vue').DefineComponent<SkAccordionItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkAccordionItemComponentProps> & Readonly<{}>, {
42
+ kind: SkAccordionKind;
43
+ disabled: boolean;
44
+ title: string;
45
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
46
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
47
+ export default _default;
48
+ type __VLS_WithTemplateSlots<T, S> = T & {
49
+ new (): {
50
+ $slots: S;
51
+ };
52
+ };
@@ -0,0 +1,3 @@
1
+ export { default as SkAccordion } from './SkAccordion.vue';
2
+ export { default as SkAccordionItem } from './SkAccordionItem.vue';
3
+ export * from './types';
@@ -0,0 +1,3 @@
1
+ import { ComponentKind } from '../../types';
2
+ export type SkAccordionKind = ComponentKind;
3
+ export type SkAccordionType = 'single' | 'multiple';
@@ -0,0 +1,39 @@
1
+ import { SkAlertKind } from './types';
2
+ import { ComponentCustomColors } from '../../types';
3
+ export interface SkAlertComponentProps extends ComponentCustomColors {
4
+ /**
5
+ * Semantic kind that determines the alert's color scheme and default icon. Each kind
6
+ * conveys a different meaning: 'info' for general information, 'success' for positive
7
+ * confirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.
8
+ * @default 'info'
9
+ */
10
+ kind?: SkAlertKind;
11
+ /**
12
+ * When true, applies prominent styling with a more vivid background color and stronger
13
+ * visual presence. Use prominent alerts for critical messages that require immediate
14
+ * user attention, such as errors or important warnings.
15
+ * @default false
16
+ */
17
+ prominent?: boolean;
18
+ }
19
+ declare function __VLS_template(): {
20
+ attrs: Partial<{}>;
21
+ slots: {
22
+ icon?(_: {}): any;
23
+ default?(_: {}): any;
24
+ };
25
+ refs: {};
26
+ rootEl: HTMLDivElement;
27
+ };
28
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
29
+ declare const __VLS_component: import('vue').DefineComponent<SkAlertComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkAlertComponentProps> & Readonly<{}>, {
30
+ kind: SkAlertKind;
31
+ prominent: boolean;
32
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
33
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
34
+ export default _default;
35
+ type __VLS_WithTemplateSlots<T, S> = T & {
36
+ new (): {
37
+ $slots: S;
38
+ };
39
+ };
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Alert semantic kinds (feedback-focused subset)
3
+ */
4
+ export type SkAlertKind = 'info' | 'success' | 'warning' | 'danger';
@@ -0,0 +1,75 @@
1
+ import { ComponentKind } from '../../types';
2
+ import { SkAvatarSize } from './types';
3
+ export interface SkAvatarComponentProps {
4
+ /**
5
+ * URL of the avatar image to display. When provided, the component attempts to load and display
6
+ * this image. If the image fails to load (404, network error, etc.), the component automatically
7
+ * falls back to initials or the default icon. Supports any valid image URL including data URIs.
8
+ */
9
+ src?: string;
10
+ /**
11
+ * Alternative text for the avatar image, used for accessibility. Screen readers announce this
12
+ * text, so provide meaningful descriptions like "Jane Doe's profile photo" rather than generic
13
+ * text like "avatar". Only applies when displaying an image.
14
+ * @default ''
15
+ */
16
+ alt?: string;
17
+ /**
18
+ * Fallback text to display when no image is provided or the image fails to load. Typically
19
+ * a user's initials (first and last name letters). Automatically truncated to 2 characters
20
+ * and uppercased. If neither src nor initials are provided, displays the default user icon.
21
+ */
22
+ initials?: string;
23
+ /**
24
+ * Semantic color kind that controls the avatar's background and text colors when displaying
25
+ * initials or the fallback icon. Has no visible effect when displaying an image. Semantic kinds
26
+ * (neutral, primary, accent, info, success, warning, danger) adapt to your theme.
27
+ * @default 'neutral'
28
+ */
29
+ kind?: ComponentKind;
30
+ /**
31
+ * Avatar size controlling both dimensions and text/icon scaling. Available sizes: 'xs' (extra
32
+ * small, 24px), 'sm' (small, 32px), 'md' (medium, 40px), 'lg' (large, 48px), 'xl' (extra large,
33
+ * 64px), '2xl' (double extra large, 80px). Choose based on context: 'sm' for lists, 'lg' for
34
+ * profile headers, 'xl' for profile pages.
35
+ * @default 'md'
36
+ */
37
+ size?: SkAvatarSize;
38
+ /**
39
+ * Custom background color that overrides the kind's default. Use for brand colors, user-selected
40
+ * colors, or dynamically generated colors based on user ID. Accepts any valid CSS color value.
41
+ * Only visible when displaying initials or the fallback icon.
42
+ */
43
+ baseColor?: string;
44
+ /**
45
+ * Custom text/icon color that overrides the kind's default. Should provide sufficient contrast
46
+ * against baseColor for accessibility. Accepts any valid CSS color value. Only visible when
47
+ * displaying initials or the fallback icon.
48
+ */
49
+ textColor?: string;
50
+ }
51
+ declare function __VLS_template(): {
52
+ attrs: Partial<{}>;
53
+ slots: {
54
+ icon?(_: {}): any;
55
+ };
56
+ refs: {};
57
+ rootEl: HTMLDivElement;
58
+ };
59
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
60
+ declare const __VLS_component: import('vue').DefineComponent<SkAvatarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkAvatarComponentProps> & Readonly<{}>, {
61
+ kind: ComponentKind;
62
+ baseColor: string;
63
+ textColor: string;
64
+ size: SkAvatarSize;
65
+ src: string;
66
+ alt: string;
67
+ initials: string;
68
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
69
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
70
+ export default _default;
71
+ type __VLS_WithTemplateSlots<T, S> = T & {
72
+ new (): {
73
+ $slots: S;
74
+ };
75
+ };
@@ -0,0 +1,2 @@
1
+ export { default } from './SkAvatar.vue';
2
+ export * from './types';
@@ -0,0 +1,20 @@
1
+ import { ComponentKind, ComponentSize } from '../../types';
2
+ /** Avatar size */
3
+ export type SkAvatarSize = ComponentSize;
4
+ /** Avatar props interface */
5
+ export interface SkAvatarProps {
6
+ /** Image source URL */
7
+ src?: string;
8
+ /** Alt text for image */
9
+ alt?: string;
10
+ /** Fallback initials (1-2 characters) */
11
+ initials?: string;
12
+ /** Semantic color kind */
13
+ kind?: ComponentKind;
14
+ /** Avatar size */
15
+ size?: SkAvatarSize;
16
+ /** Custom background color (overrides kind) */
17
+ baseColor?: string;
18
+ /** Custom text color */
19
+ textColor?: string;
20
+ }
@@ -0,0 +1,51 @@
1
+ import { SkBreadcrumbItemProps } from './types';
2
+ export interface SkBreadcrumbItemComponentProps {
3
+ /**
4
+ * Vue Router destination for client-side navigation. When provided, the item renders as a
5
+ * `RouterLink` component. Accepts any valid `RouteLocationRaw` value including path strings,
6
+ * named routes, and route objects with params.
7
+ */
8
+ to?: SkBreadcrumbItemProps['to'];
9
+ /**
10
+ * URL for standard anchor link navigation. When provided (and `to` is not set), the item
11
+ * renders as an `<a>` element. Use this for external links or non-Vue-Router navigation.
12
+ */
13
+ href?: string;
14
+ /**
15
+ * When true, marks this item as the current page in the breadcrumb trail. The item renders
16
+ * as a non-interactive `<span>` and receives `aria-current="page"` for accessibility.
17
+ * Typically used on the last item in the breadcrumb list.
18
+ * @default false
19
+ */
20
+ current?: boolean;
21
+ /**
22
+ * When true, the item is disabled and cannot be interacted with. The item renders as a
23
+ * non-interactive `<span>` with reduced opacity. Use for items that represent inaccessible
24
+ * or locked sections of the application.
25
+ * @default false
26
+ */
27
+ disabled?: boolean;
28
+ }
29
+ declare function __VLS_template(): {
30
+ attrs: Partial<{}>;
31
+ slots: {
32
+ icon?(_: {}): any;
33
+ default?(_: {}): any;
34
+ };
35
+ refs: {};
36
+ rootEl: HTMLLIElement;
37
+ };
38
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
39
+ declare const __VLS_component: import('vue').DefineComponent<SkBreadcrumbItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkBreadcrumbItemComponentProps> & Readonly<{}>, {
40
+ disabled: boolean;
41
+ to: string | import('vue-router').RouteLocationAsRelativeGeneric | import('vue-router').RouteLocationAsPathGeneric;
42
+ href: string;
43
+ current: boolean;
44
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
45
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
46
+ export default _default;
47
+ type __VLS_WithTemplateSlots<T, S> = T & {
48
+ new (): {
49
+ $slots: S;
50
+ };
51
+ };
@@ -0,0 +1,13 @@
1
+ export interface SkBreadcrumbSeparatorComponentProps {
2
+ /**
3
+ * Custom separator character or string to display. When not provided, inherits the separator
4
+ * from the parent `SkBreadcrumbs` component. Use this to override specific separators while
5
+ * keeping others consistent with the parent setting.
6
+ * @default '/' (inherited from parent)
7
+ */
8
+ separator?: string;
9
+ }
10
+ declare const _default: import('vue').DefineComponent<SkBreadcrumbSeparatorComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkBreadcrumbSeparatorComponentProps> & Readonly<{}>, {
11
+ separator: string;
12
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
13
+ export default _default;
@@ -0,0 +1,24 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkBreadcrumbsProps } from './types';
3
+ export interface SkBreadcrumbsComponentProps extends SkBreadcrumbsProps, ComponentCustomColors {
4
+ /**
5
+ * Semantic color kind that controls the appearance of breadcrumb links. The kind affects link colors
6
+ * for normal, hover, and active states. All child `SkBreadcrumbItem` components inherit this kind.
7
+ * @default 'neutral'
8
+ */
9
+ kind?: SkBreadcrumbsProps['kind'];
10
+ /**
11
+ * Character or string displayed between breadcrumb items. Common separators include '/', '>', and
12
+ * unicode characters like '\u203A' (single right-pointing angle quotation mark). Can be overridden
13
+ * on individual `SkBreadcrumbSeparator` components for custom patterns.
14
+ * @default '/'
15
+ */
16
+ separator?: string;
17
+ }
18
+ declare const _default: import('vue').DefineComponent<SkBreadcrumbsComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkBreadcrumbsComponentProps> & Readonly<{}>, {
19
+ kind: import('../../types').ComponentKind;
20
+ baseColor: string;
21
+ textColor: string;
22
+ separator: string;
23
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
24
+ export default _default;
@@ -0,0 +1,4 @@
1
+ export { default as SkBreadcrumbItem } from './SkBreadcrumbItem.vue';
2
+ export { default as SkBreadcrumbs } from './SkBreadcrumbs.vue';
3
+ export { default as SkBreadcrumbSeparator } from './SkBreadcrumbSeparator.vue';
4
+ export * from './types';
@@ -0,0 +1,18 @@
1
+ import { ComponentKind } from '../../types';
2
+ import { RouteLocationRaw } from 'vue-router';
3
+ export type SkBreadcrumbsKind = ComponentKind;
4
+ export interface SkBreadcrumbsProps {
5
+ kind?: SkBreadcrumbsKind;
6
+ separator?: string;
7
+ baseColor?: string;
8
+ textColor?: string;
9
+ }
10
+ export interface SkBreadcrumbItemProps {
11
+ to?: string | RouteLocationRaw;
12
+ href?: string;
13
+ current?: boolean;
14
+ disabled?: boolean;
15
+ }
16
+ export interface SkBreadcrumbSeparatorProps {
17
+ separator?: string;
18
+ }
@@ -0,0 +1,97 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkButtonKind, SkButtonSize, SkButtonType, SkButtonVariant } from './types';
3
+ export interface SkButtonComponentProps extends ComponentCustomColors {
4
+ /**
5
+ * The HTML `type` attribute for the button element. Only applies when rendering as a `<button>`
6
+ * (i.e., when neither `href` nor `to` props are provided). Use 'submit' for form submission
7
+ * buttons and 'reset' for form reset buttons.
8
+ * @default 'button'
9
+ */
10
+ type?: SkButtonType;
11
+ /**
12
+ * Semantic color kind that controls the button's color scheme. Semantic kinds (neutral, primary,
13
+ * accent, etc.) adapt to your theme colors, while color kinds (neon-blue, neon-purple, etc.)
14
+ * provide fixed branding colors that remain consistent across themes.
15
+ * @default 'neutral'
16
+ */
17
+ kind?: SkButtonKind;
18
+ /**
19
+ * Visual variant that determines the button's styling approach. 'solid' provides a filled
20
+ * background, 'outline' shows a bordered button with transparent background, and 'ghost'
21
+ * renders a minimal button with no background or border until hovered.
22
+ * @default 'solid'
23
+ */
24
+ variant?: SkButtonVariant;
25
+ /**
26
+ * Button size controlling padding, font size, and overall dimensions. Available sizes:
27
+ * 'sm' (small, compact), 'md' (medium, default), 'lg' (large), 'xl' (extra large).
28
+ * Icon-only buttons automatically adjust to square proportions at each size.
29
+ * @default 'md'
30
+ */
31
+ size?: SkButtonSize;
32
+ /**
33
+ * When true, disables the button preventing all user interaction. The button appears with
34
+ * reduced opacity and the cursor changes to not-allowed. Also disables any navigation
35
+ * for link-style buttons.
36
+ * @default false
37
+ */
38
+ disabled?: boolean;
39
+ /**
40
+ * When true, displays a loading spinner and disables the button. The button content remains
41
+ * visible but dimmed while the spinner overlays it. Use this to indicate async operations
42
+ * like form submissions or data fetching.
43
+ * @default false
44
+ */
45
+ loading?: boolean;
46
+ /**
47
+ * Toggle state for buttons used as toggle controls. When true, applies the pressed visual
48
+ * state and sets `aria-pressed="true"` for accessibility. Use with `@click` to toggle
49
+ * the value for toolbar buttons or toggle switches.
50
+ * @default false
51
+ */
52
+ pressed?: boolean;
53
+ /**
54
+ * URL for the button to navigate to. When provided, the button renders as an `<a>` element
55
+ * instead of a `<button>`. Use for external links or simple navigation that doesn't require
56
+ * Vue Router.
57
+ * @default undefined
58
+ */
59
+ href?: string;
60
+ /**
61
+ * Vue Router route for the button to navigate to. When provided, the button renders as a
62
+ * `<router-link>` component. Accepts either a string path or a route location object with
63
+ * name, params, and query properties.
64
+ * @default undefined
65
+ */
66
+ to?: string | Record<string, any>;
67
+ }
68
+ declare function __VLS_template(): {
69
+ attrs: Partial<{}>;
70
+ slots: {
71
+ leading?(_: {}): any;
72
+ icon?(_: {}): any;
73
+ default?(_: {}): any;
74
+ trailing?(_: {}): any;
75
+ };
76
+ refs: {};
77
+ rootEl: any;
78
+ };
79
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
80
+ declare const __VLS_component: import('vue').DefineComponent<SkButtonComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkButtonComponentProps> & Readonly<{}>, {
81
+ type: SkButtonType;
82
+ kind: SkButtonKind;
83
+ disabled: boolean;
84
+ size: SkButtonSize;
85
+ to: string | Record<string, any>;
86
+ href: string;
87
+ variant: SkButtonVariant;
88
+ loading: boolean;
89
+ pressed: boolean;
90
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
91
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
92
+ export default _default;
93
+ type __VLS_WithTemplateSlots<T, S> = T & {
94
+ new (): {
95
+ $slots: S;
96
+ };
97
+ };
@@ -0,0 +1,5 @@
1
+ import { ComponentKind, ComponentSize, ComponentVariant } from '../../types';
2
+ export type SkButtonType = 'button' | 'submit' | 'reset';
3
+ export type SkButtonKind = ComponentKind;
4
+ export type SkButtonVariant = ComponentVariant;
5
+ export type SkButtonSize = ComponentSize;
@@ -0,0 +1,88 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkCardKind } from './types';
3
+ import { SkPanelSize } from '../Panel/types';
4
+ export interface SkCardComponentProps extends ComponentCustomColors {
5
+ /**
6
+ * Semantic color kind that controls the card's border color and decorative accent stripe.
7
+ * Semantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,
8
+ * while color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors.
9
+ * @default 'neutral'
10
+ */
11
+ kind?: SkCardKind;
12
+ /**
13
+ * Controls the internal padding of the card's content areas. Larger sizes provide more
14
+ * breathing room, while smaller sizes create compact layouts. The header, content, and
15
+ * footer sections all respect this sizing. Available: 'sm', 'md', 'lg', 'xl'.
16
+ * @default 'md'
17
+ */
18
+ size?: SkPanelSize;
19
+ /**
20
+ * When true, displays a colored accent stripe along the top edge of the card.
21
+ * Can be explicitly set to override the default behavior. Takes precedence over
22
+ * `noDecoration` when explicitly set to true.
23
+ * @default undefined (defaults to true unless noDecoration is set)
24
+ */
25
+ showDecoration?: boolean;
26
+ /**
27
+ * When true, explicitly disables the decorative accent stripe. Use this for cleaner
28
+ * card appearances where the color accent is not needed. This is overridden if
29
+ * `showDecoration` is explicitly set to true.
30
+ * @default false
31
+ */
32
+ noDecoration?: boolean;
33
+ /**
34
+ * When true, removes the border entirely from the card. Useful for flat card designs
35
+ * or when cards are displayed on contrasting backgrounds. Note: This automatically
36
+ * disables the decoration stripe since it's part of the border styling.
37
+ * @default false
38
+ */
39
+ noBorder?: boolean;
40
+ /**
41
+ * Title text displayed prominently in the card header section. The title is rendered
42
+ * as an h3 element for proper document semantics. For more complex headers, use the
43
+ * `header` slot instead of or alongside this prop.
44
+ */
45
+ title?: string;
46
+ /**
47
+ * Custom CSS background color for the header section only. Accepts any valid CSS color
48
+ * value (hex, rgb, oklch, etc.). Use this to create visual distinction between the
49
+ * header and content areas, or to match brand colors.
50
+ */
51
+ headerColor?: string;
52
+ /**
53
+ * When true, makes the content area scrollable with a fixed maximum height. The card
54
+ * itself must have a constrained height (via CSS or parent container) for scrolling
55
+ * to take effect. Header and footer remain fixed while content scrolls.
56
+ * @default false
57
+ */
58
+ scrollable?: boolean;
59
+ }
60
+ declare function __VLS_template(): {
61
+ attrs: Partial<{}>;
62
+ slots: {
63
+ header?(_: {}): any;
64
+ media?(_: {}): any;
65
+ default?(_: {}): any;
66
+ footer?(_: {}): any;
67
+ };
68
+ refs: {};
69
+ rootEl: HTMLDivElement;
70
+ };
71
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
72
+ declare const __VLS_component: import('vue').DefineComponent<SkCardComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkCardComponentProps> & Readonly<{}>, {
73
+ kind: SkCardKind;
74
+ size: SkPanelSize;
75
+ title: string;
76
+ showDecoration: boolean;
77
+ noBorder: boolean;
78
+ noDecoration: boolean;
79
+ headerColor: string;
80
+ scrollable: boolean;
81
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
82
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
83
+ export default _default;
84
+ type __VLS_WithTemplateSlots<T, S> = T & {
85
+ new (): {
86
+ $slots: S;
87
+ };
88
+ };
@@ -0,0 +1,2 @@
1
+ import { ComponentKind } from '../../types';
2
+ export type SkCardKind = ComponentKind;
@@ -0,0 +1,71 @@
1
+ import { ComponentCustomColors } from '../../types';
2
+ import { SkCheckboxKind, SkCheckboxSize } from './types';
3
+ export interface SkCheckboxComponentProps extends ComponentCustomColors {
4
+ /**
5
+ * Semantic color kind that controls the checkbox appearance when checked. Semantic kinds
6
+ * (neutral, primary, accent, etc.) adapt to your theme, while color kinds (neon-blue,
7
+ * neon-purple, etc.) provide fixed branding colors.
8
+ * @default 'neutral'
9
+ */
10
+ kind?: SkCheckboxKind;
11
+ /**
12
+ * Checkbox size. Controls both the checkbox box dimensions and the label text size.
13
+ * Available sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
14
+ * @default 'md'
15
+ */
16
+ size?: SkCheckboxSize;
17
+ /**
18
+ * When true, the checkbox is disabled and cannot be interacted with. The checkbox
19
+ * appears with reduced opacity and the cursor changes to not-allowed.
20
+ * @default false
21
+ */
22
+ disabled?: boolean;
23
+ /**
24
+ * When true, marks the checkbox as required for form validation. This does not
25
+ * add visual indication—use a SkField wrapper for required field styling.
26
+ * @default false
27
+ */
28
+ required?: boolean;
29
+ /**
30
+ * The form field name used when submitting the checkbox value in a form.
31
+ * Required for native form submission.
32
+ */
33
+ name?: string;
34
+ /**
35
+ * Label text displayed next to the checkbox. Can be overridden by the default slot
36
+ * for custom label content (icons, formatted text, etc.).
37
+ */
38
+ label?: string;
39
+ }
40
+ type __VLS_Props = SkCheckboxComponentProps;
41
+ type __VLS_PublicProps = {
42
+ modelValue?: boolean | 'indeterminate';
43
+ } & __VLS_Props;
44
+ declare function __VLS_template(): {
45
+ attrs: Partial<{}>;
46
+ slots: {
47
+ default?(_: {}): any;
48
+ };
49
+ refs: {};
50
+ rootEl: HTMLLabelElement;
51
+ };
52
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
53
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
54
+ "update:modelValue": (value: boolean | "indeterminate") => any;
55
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
56
+ "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
57
+ }>, {
58
+ kind: SkCheckboxKind;
59
+ disabled: boolean;
60
+ size: SkCheckboxSize;
61
+ label: string;
62
+ required: boolean;
63
+ name: string;
64
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
65
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
66
+ export default _default;
67
+ type __VLS_WithTemplateSlots<T, S> = T & {
68
+ new (): {
69
+ $slots: S;
70
+ };
71
+ };
@@ -0,0 +1,2 @@
1
+ export { default as SkCheckbox } from './SkCheckbox.vue';
2
+ export type { SkCheckboxKind, SkCheckboxSize } from './types';