@teseor/css 1.14.3 → 1.15.1

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 (464) hide show
  1. package/package.json +1 -1
  2. package/src/base/docs.html +19 -0
  3. package/src/base/typography/docs.html +159 -0
  4. package/src/components/actions/button/docs.html +73 -0
  5. package/src/components/actions/button/{button.visual.spec.ts → visual.spec.ts} +4 -4
  6. package/src/components/actions/button-group/docs.html +44 -0
  7. package/src/components/actions/button-group/{button-group.visual.spec.ts → visual.spec.ts} +4 -4
  8. package/src/components/actions/close-button/docs.html +74 -0
  9. package/src/components/actions/close-button/{close-button.visual.spec.ts → visual.spec.ts} +4 -4
  10. package/src/components/content/divider/docs.html +25 -0
  11. package/src/components/content/divider/{divider.visual.spec.ts → visual.spec.ts} +4 -4
  12. package/src/components/content/scroll-area/docs.html +127 -0
  13. package/src/components/content/scroll-area/visual.png +0 -0
  14. package/src/components/content/scroll-area/{scroll-area.visual.spec.ts → visual.spec.ts} +4 -4
  15. package/src/components/content/spacer/docs.html +20 -0
  16. package/src/components/content/spacer/{spacer.visual.spec.ts → visual.spec.ts} +4 -4
  17. package/src/components/data-display/avatar/docs.html +64 -0
  18. package/src/components/data-display/avatar/{avatar.visual.spec.ts → visual.spec.ts} +4 -4
  19. package/src/components/data-display/badge/docs.html +37 -0
  20. package/src/components/data-display/badge/{badge.visual.spec.ts → visual.spec.ts} +4 -4
  21. package/src/components/data-display/card/docs.html +33 -0
  22. package/src/components/data-display/card/visual.png +0 -0
  23. package/src/components/data-display/card/{card.visual.spec.ts → visual.spec.ts} +4 -4
  24. package/src/components/data-display/data-list/docs.html +94 -0
  25. package/src/components/data-display/data-list/{data-list-visual.png → visual.png} +0 -0
  26. package/src/components/data-display/data-list/{data-list.visual.spec.ts → visual.spec.ts} +4 -4
  27. package/src/components/data-display/icon/docs.html +69 -0
  28. package/src/components/data-display/icon/{icon.visual.spec.ts → visual.spec.ts} +4 -4
  29. package/src/components/data-display/image/docs.html +64 -0
  30. package/src/components/data-display/image/visual.png +0 -0
  31. package/src/components/data-display/image/{image.visual.spec.ts → visual.spec.ts} +4 -4
  32. package/src/components/data-display/stat/docs.html +32 -0
  33. package/src/components/data-display/stat/{stat.visual.spec.ts → visual.spec.ts} +4 -4
  34. package/src/components/data-display/status/docs.html +64 -0
  35. package/src/components/data-display/status/{status.visual.spec.ts → visual.spec.ts} +4 -4
  36. package/src/components/data-display/table/docs.html +70 -0
  37. package/src/components/data-display/table/{table.visual.spec.ts → visual.spec.ts} +4 -4
  38. package/src/components/data-display/tag/docs.html +39 -0
  39. package/src/components/data-display/tag/{tag.visual.spec.ts → visual.spec.ts} +4 -4
  40. package/src/components/disclosure/accordion/docs.html +80 -0
  41. package/src/components/disclosure/accordion/{accordion.visual.spec.ts → visual.spec.ts} +4 -4
  42. package/src/components/disclosure/disclosure/docs.html +48 -0
  43. package/src/components/disclosure/disclosure/{disclosure.visual.spec.ts → visual.spec.ts} +4 -4
  44. package/src/components/feedback/alert/docs.html +87 -0
  45. package/src/components/feedback/alert/{alert.visual.spec.ts → visual.spec.ts} +4 -4
  46. package/src/components/feedback/progress/docs.html +62 -0
  47. package/src/components/feedback/progress/{progress.visual.spec.ts → visual.spec.ts} +4 -4
  48. package/src/components/feedback/progress-circle/docs.html +62 -0
  49. package/src/components/feedback/progress-circle/{progress-circle.visual.spec.ts → visual.spec.ts} +4 -4
  50. package/src/components/feedback/skeleton/docs.html +37 -0
  51. package/src/components/feedback/skeleton/{skeleton.visual.spec.ts → visual.spec.ts} +4 -4
  52. package/src/components/feedback/spinner/docs.html +26 -0
  53. package/src/components/feedback/spinner/{spinner.visual.spec.ts → visual.spec.ts} +4 -4
  54. package/src/components/feedback/toast/docs.html +106 -0
  55. package/src/components/feedback/toast/visual.png +0 -0
  56. package/src/components/feedback/toast/{toast.visual.spec.ts → visual.spec.ts} +4 -4
  57. package/src/components/forms/checkbox/docs.html +30 -0
  58. package/src/components/forms/checkbox/{checkbox.visual.spec.ts → visual.spec.ts} +4 -4
  59. package/src/components/forms/checkbox-group/docs.html +101 -0
  60. package/src/components/forms/checkbox-group/{checkbox-group.visual.spec.ts → visual.spec.ts} +4 -4
  61. package/src/components/forms/field/docs.html +60 -0
  62. package/src/components/forms/field/{field.visual.spec.ts → visual.spec.ts} +4 -4
  63. package/src/components/forms/fieldset/docs.html +119 -0
  64. package/src/components/forms/fieldset/{fieldset.visual.spec.ts → visual.spec.ts} +4 -4
  65. package/src/components/forms/form/docs.html +129 -0
  66. package/src/components/forms/form/{form.visual.spec.ts → visual.spec.ts} +4 -4
  67. package/src/components/forms/form-error/docs.html +15 -0
  68. package/src/components/forms/form-error/{form-error.visual.spec.ts → visual.spec.ts} +4 -4
  69. package/src/components/forms/form-helper/docs.html +39 -0
  70. package/src/components/forms/form-helper/{form-helper.visual.spec.ts → visual.spec.ts} +4 -4
  71. package/src/components/forms/input/docs.html +66 -0
  72. package/src/components/forms/input/visual.png +0 -0
  73. package/src/components/forms/input/{input.visual.spec.ts → visual.spec.ts} +4 -4
  74. package/src/components/forms/label/docs.html +26 -0
  75. package/src/components/forms/label/visual.png +0 -0
  76. package/src/components/forms/label/{label.visual.spec.ts → visual.spec.ts} +4 -4
  77. package/src/components/forms/number-input/docs.html +97 -0
  78. package/src/components/forms/number-input/visual.png +0 -0
  79. package/src/components/forms/number-input/{number-input.visual.spec.ts → visual.spec.ts} +4 -4
  80. package/src/components/forms/password-input/docs.html +85 -0
  81. package/src/components/forms/password-input/visual.png +0 -0
  82. package/src/components/forms/password-input/{password-input.visual.spec.ts → visual.spec.ts} +4 -4
  83. package/src/components/forms/radio/docs.html +49 -0
  84. package/src/components/forms/radio/{radio.visual.spec.ts → visual.spec.ts} +4 -4
  85. package/src/components/forms/radio-group/docs.html +97 -0
  86. package/src/components/forms/radio-group/{radio-group.visual.spec.ts → visual.spec.ts} +4 -4
  87. package/src/components/forms/search-input/docs.html +84 -0
  88. package/src/components/forms/search-input/visual.png +0 -0
  89. package/src/components/forms/search-input/{search-input.visual.spec.ts → visual.spec.ts} +4 -4
  90. package/src/components/forms/select/docs.html +67 -0
  91. package/src/components/forms/select/visual.png +0 -0
  92. package/src/components/forms/select/{select.visual.spec.ts → visual.spec.ts} +4 -4
  93. package/src/components/forms/slider/docs.html +22 -0
  94. package/src/components/forms/slider/visual.png +0 -0
  95. package/src/components/forms/slider/{slider.visual.spec.ts → visual.spec.ts} +4 -4
  96. package/src/components/forms/textarea/docs.html +36 -0
  97. package/src/components/forms/textarea/visual.png +0 -0
  98. package/src/components/forms/textarea/{textarea.visual.spec.ts → visual.spec.ts} +4 -4
  99. package/src/components/forms/toggle/docs.html +61 -0
  100. package/src/components/forms/toggle/{toggle.visual.spec.ts → visual.spec.ts} +4 -4
  101. package/src/components/navigation/breadcrumb/docs.html +57 -0
  102. package/src/components/navigation/breadcrumb/{breadcrumb.visual.spec.ts → visual.spec.ts} +4 -4
  103. package/src/components/navigation/dropdown-menu/docs.html +103 -0
  104. package/src/components/navigation/dropdown-menu/visual.png +0 -0
  105. package/src/components/navigation/dropdown-menu/{dropdown-menu.visual.spec.ts → visual.spec.ts} +4 -4
  106. package/src/components/navigation/menu/docs.html +119 -0
  107. package/src/components/navigation/menu/{menu.visual.spec.ts → visual.spec.ts} +4 -4
  108. package/src/components/navigation/nav/docs.html +71 -0
  109. package/src/components/navigation/nav/{nav.visual.spec.ts → visual.spec.ts} +4 -4
  110. package/src/components/navigation/pagination/docs.html +113 -0
  111. package/src/components/navigation/pagination/visual.png +0 -0
  112. package/src/components/navigation/pagination/{pagination.visual.spec.ts → visual.spec.ts} +4 -4
  113. package/src/components/navigation/tabs/docs.html +63 -0
  114. package/src/components/navigation/tabs/{tabs.visual.spec.ts → visual.spec.ts} +4 -4
  115. package/src/components/overlays/dialog/docs.html +58 -0
  116. package/src/components/overlays/dialog/{dialog.visual.spec.ts → visual.spec.ts} +4 -4
  117. package/src/components/overlays/drawer/docs.html +87 -0
  118. package/src/components/overlays/drawer/visual.png +0 -0
  119. package/src/components/overlays/drawer/{drawer.visual.spec.ts → visual.spec.ts} +4 -4
  120. package/src/components/overlays/modal/docs.html +66 -0
  121. package/src/components/overlays/modal/{modal.visual.spec.ts → visual.spec.ts} +4 -4
  122. package/src/components/overlays/overlay/docs.html +27 -0
  123. package/src/components/overlays/overlay/{overlay.visual.spec.ts → visual.spec.ts} +4 -4
  124. package/src/components/overlays/popover/docs.html +38 -0
  125. package/src/components/overlays/popover/{popover.visual.spec.ts → visual.spec.ts} +4 -4
  126. package/src/components/overlays/tooltip/docs.html +30 -0
  127. package/src/components/overlays/tooltip/{tooltip.visual.spec.ts → visual.spec.ts} +4 -4
  128. package/src/components/typography/blockquote/docs.html +21 -0
  129. package/src/components/typography/blockquote/{blockquote.visual.spec.ts → visual.spec.ts} +4 -4
  130. package/src/components/typography/code/docs.html +20 -0
  131. package/src/components/typography/code/visual.png +0 -0
  132. package/src/components/typography/code/{code.visual.spec.ts → visual.spec.ts} +4 -4
  133. package/src/components/typography/code-block/docs.html +84 -0
  134. package/src/components/typography/code-block/visual.png +0 -0
  135. package/src/components/typography/code-block/{code-block.visual.spec.ts → visual.spec.ts} +4 -4
  136. package/src/components/typography/heading/docs.html +23 -0
  137. package/src/components/typography/heading/visual.png +0 -0
  138. package/src/components/typography/heading/{heading.visual.spec.ts → visual.spec.ts} +4 -4
  139. package/src/components/typography/kbd/docs.html +14 -0
  140. package/src/components/typography/kbd/{kbd.visual.spec.ts → visual.spec.ts} +4 -4
  141. package/src/components/typography/link/docs.html +30 -0
  142. package/src/components/typography/link/{link.visual.spec.ts → visual.spec.ts} +4 -4
  143. package/src/components/typography/list/docs.html +76 -0
  144. package/src/components/typography/list/{list.visual.spec.ts → visual.spec.ts} +4 -4
  145. package/src/components/typography/mark/docs.html +10 -0
  146. package/src/components/typography/mark/{mark.visual.spec.ts → visual.spec.ts} +4 -4
  147. package/src/config/guides/accessibility.docs.html +106 -0
  148. package/src/config/guides/getting-started.docs.html +45 -0
  149. package/src/config/guides/theming.docs.html +69 -0
  150. package/src/config/tokens/colors/docs.html +73 -0
  151. package/src/config/tokens/docs.html +115 -0
  152. package/src/config/tokens/grid/docs.html +10 -0
  153. package/src/config/tokens/spacing/docs.html +31 -0
  154. package/src/debug/docs.html +27 -0
  155. package/src/layout/app-shell/docs.html +100 -0
  156. package/src/layout/app-shell/visual.png +0 -0
  157. package/src/layout/app-shell/visual.spec.ts +13 -0
  158. package/src/layout/aspect-ratio/docs.html +38 -0
  159. package/src/layout/aspect-ratio/{aspect-ratio.visual.spec.ts → visual.spec.ts} +4 -4
  160. package/src/layout/box/docs.html +24 -0
  161. package/src/layout/box/visual.png +0 -0
  162. package/src/layout/box/visual.spec.ts +13 -0
  163. package/src/layout/center/docs.html +23 -0
  164. package/src/layout/center/visual.spec.ts +13 -0
  165. package/src/layout/column/docs.html +29 -0
  166. package/src/layout/column/visual.spec.ts +13 -0
  167. package/src/layout/container/docs.html +34 -0
  168. package/src/layout/content/docs.html +35 -0
  169. package/src/layout/content/{content-visual.png → visual.png} +0 -0
  170. package/src/layout/content/visual.spec.ts +18 -0
  171. package/src/layout/footer/docs.html +70 -0
  172. package/src/layout/footer/visual.png +0 -0
  173. package/src/layout/footer/visual.spec.ts +18 -0
  174. package/src/layout/grid/docs.html +85 -0
  175. package/src/layout/grid/visual.spec.ts +13 -0
  176. package/src/layout/main/docs.html +28 -0
  177. package/src/layout/nav-rail/docs.html +39 -0
  178. package/src/layout/nav-rail/visual.png +0 -0
  179. package/src/layout/nav-rail/visual.spec.ts +18 -0
  180. package/src/layout/page-header/docs.html +49 -0
  181. package/src/layout/page-header/{page-header.visual.spec.ts → visual.spec.ts} +8 -4
  182. package/src/layout/row/docs.html +44 -0
  183. package/src/layout/row/{row.visual.spec.ts → visual.spec.ts} +4 -4
  184. package/src/layout/sidebar/docs.html +27 -0
  185. package/src/layout/sidebar/visual.png +0 -0
  186. package/src/layout/sidebar/visual.spec.ts +18 -0
  187. package/src/layout/sidebar-nav/docs.html +232 -0
  188. package/src/layout/sidebar-nav/{sidebar-nav.visual.spec.ts → visual.spec.ts} +7 -3
  189. package/src/layout/topbar/docs.html +61 -0
  190. package/src/layout/topbar/visual.png +0 -0
  191. package/src/layout/topbar/visual.spec.ts +18 -0
  192. package/src/utilities/container/docs.html +31 -0
  193. package/src/utilities/display/docs.html +27 -0
  194. package/src/utilities/scroll-animation/docs.html +29 -0
  195. package/src/utilities/scroll-snap/docs.html +77 -0
  196. package/src/utilities/spacing/docs.html +26 -0
  197. package/src/utilities/text/docs.html +63 -0
  198. package/src/utilities/view-transition/docs.html +49 -0
  199. package/src/utilities/visually-hidden/docs.html +16 -0
  200. package/src/base/root.docs.json +0 -35
  201. package/src/base/typography/typography.docs.json +0 -328
  202. package/src/components/actions/button/button.docs.json +0 -264
  203. package/src/components/actions/button-group/button-group.docs.json +0 -151
  204. package/src/components/actions/close-button/close-button.docs.json +0 -265
  205. package/src/components/content/divider/divider.docs.json +0 -113
  206. package/src/components/content/scroll-area/scroll-area-visual.png +0 -0
  207. package/src/components/content/scroll-area/scroll-area.docs.json +0 -273
  208. package/src/components/content/spacer/spacer.docs.json +0 -102
  209. package/src/components/data-display/avatar/avatar.docs.json +0 -245
  210. package/src/components/data-display/badge/badge.docs.json +0 -114
  211. package/src/components/data-display/card/card-visual.png +0 -0
  212. package/src/components/data-display/card/card.docs.json +0 -229
  213. package/src/components/data-display/data-list/data-list.docs.json +0 -259
  214. package/src/components/data-display/icon/icon.docs.json +0 -307
  215. package/src/components/data-display/image/image-visual.png +0 -0
  216. package/src/components/data-display/image/image.docs.json +0 -337
  217. package/src/components/data-display/stat/stat.docs.json +0 -114
  218. package/src/components/data-display/status/status.docs.json +0 -147
  219. package/src/components/data-display/table/table.docs.json +0 -184
  220. package/src/components/data-display/tag/tag.docs.json +0 -146
  221. package/src/components/disclosure/accordion/accordion.docs.json +0 -206
  222. package/src/components/disclosure/disclosure/disclosure.docs.json +0 -154
  223. package/src/components/feedback/alert/alert.docs.json +0 -325
  224. package/src/components/feedback/progress/progress.docs.json +0 -315
  225. package/src/components/feedback/progress-circle/progress-circle.docs.json +0 -378
  226. package/src/components/feedback/skeleton/skeleton.docs.json +0 -142
  227. package/src/components/feedback/spinner/spinner.docs.json +0 -121
  228. package/src/components/feedback/toast/toast-visual.png +0 -0
  229. package/src/components/feedback/toast/toast.docs.json +0 -418
  230. package/src/components/forms/checkbox/checkbox.docs.json +0 -166
  231. package/src/components/forms/checkbox-group/checkbox-group.docs.json +0 -339
  232. package/src/components/forms/field/field.docs.json +0 -276
  233. package/src/components/forms/fieldset/fieldset.docs.json +0 -520
  234. package/src/components/forms/form/form.docs.json +0 -482
  235. package/src/components/forms/form-error/form-error.docs.json +0 -61
  236. package/src/components/forms/form-helper/form-helper.docs.json +0 -151
  237. package/src/components/forms/input/input-visual.png +0 -0
  238. package/src/components/forms/input/input.docs.json +0 -306
  239. package/src/components/forms/label/label-visual.png +0 -0
  240. package/src/components/forms/label/label.docs.json +0 -110
  241. package/src/components/forms/number-input/number-input-visual.png +0 -0
  242. package/src/components/forms/number-input/number-input.docs.json +0 -311
  243. package/src/components/forms/password-input/password-input-visual.png +0 -0
  244. package/src/components/forms/password-input/password-input.docs.json +0 -316
  245. package/src/components/forms/radio/radio.docs.json +0 -236
  246. package/src/components/forms/radio-group/radio-group.docs.json +0 -351
  247. package/src/components/forms/search-input/search-input-visual.png +0 -0
  248. package/src/components/forms/search-input/search-input.docs.json +0 -293
  249. package/src/components/forms/select/select-visual.png +0 -0
  250. package/src/components/forms/select/select.docs.json +0 -231
  251. package/src/components/forms/slider/slider-visual.png +0 -0
  252. package/src/components/forms/slider/slider.docs.json +0 -144
  253. package/src/components/forms/textarea/textarea-visual.png +0 -0
  254. package/src/components/forms/textarea/textarea.docs.json +0 -229
  255. package/src/components/forms/toggle/toggle.docs.json +0 -229
  256. package/src/components/navigation/breadcrumb/breadcrumb.docs.json +0 -240
  257. package/src/components/navigation/dropdown-menu/dropdown-menu-visual.png +0 -0
  258. package/src/components/navigation/dropdown-menu/dropdown-menu.docs.json +0 -290
  259. package/src/components/navigation/menu/menu.docs.json +0 -326
  260. package/src/components/navigation/nav/nav.docs.json +0 -304
  261. package/src/components/navigation/pagination/pagination-visual.png +0 -0
  262. package/src/components/navigation/pagination/pagination.docs.json +0 -483
  263. package/src/components/navigation/tabs/tabs.docs.json +0 -243
  264. package/src/components/overlays/dialog/dialog.docs.json +0 -200
  265. package/src/components/overlays/drawer/drawer-visual.png +0 -0
  266. package/src/components/overlays/drawer/drawer.docs.json +0 -307
  267. package/src/components/overlays/modal/modal.docs.json +0 -252
  268. package/src/components/overlays/overlay/overlay.docs.json +0 -138
  269. package/src/components/overlays/popover/popover.docs.json +0 -154
  270. package/src/components/overlays/tooltip/tooltip.docs.json +0 -133
  271. package/src/components/typography/blockquote/blockquote.docs.json +0 -89
  272. package/src/components/typography/code/code-visual.png +0 -0
  273. package/src/components/typography/code/code.docs.json +0 -104
  274. package/src/components/typography/code-block/code-block-visual.png +0 -0
  275. package/src/components/typography/code-block/code-block.docs.json +0 -308
  276. package/src/components/typography/heading/heading-visual.png +0 -0
  277. package/src/components/typography/heading/heading.docs.json +0 -120
  278. package/src/components/typography/kbd/kbd.docs.json +0 -61
  279. package/src/components/typography/link/link.docs.json +0 -149
  280. package/src/components/typography/list/list.docs.json +0 -296
  281. package/src/components/typography/mark/mark.docs.json +0 -60
  282. package/src/config/guides/accessibility.docs.json +0 -126
  283. package/src/config/guides/getting-started.docs.json +0 -106
  284. package/src/config/guides/theming.docs.json +0 -289
  285. package/src/config/tokens/colors/colors.docs.json +0 -316
  286. package/src/config/tokens/design-tokens.docs.json +0 -239
  287. package/src/config/tokens/grid/grid.docs.json +0 -54
  288. package/src/config/tokens/spacing/spacing.docs.json +0 -114
  289. package/src/debug/debug.docs.json +0 -96
  290. package/src/layout/app-shell/app-shell-visual.png +0 -0
  291. package/src/layout/app-shell/app-shell.docs.json +0 -155
  292. package/src/layout/app-shell/app-shell.visual.spec.ts +0 -13
  293. package/src/layout/aspect-ratio/aspect-ratio.docs.json +0 -193
  294. package/src/layout/box/box-visual.png +0 -0
  295. package/src/layout/box/box.docs.json +0 -93
  296. package/src/layout/box/box.visual.spec.ts +0 -13
  297. package/src/layout/center/center.docs.json +0 -63
  298. package/src/layout/center/center.visual.spec.ts +0 -13
  299. package/src/layout/column/column.docs.json +0 -157
  300. package/src/layout/column/column.visual.spec.ts +0 -13
  301. package/src/layout/container/container.docs.json +0 -85
  302. package/src/layout/content/content.docs.json +0 -82
  303. package/src/layout/content/content.visual.spec.ts +0 -14
  304. package/src/layout/footer/footer-visual.png +0 -0
  305. package/src/layout/footer/footer.docs.json +0 -119
  306. package/src/layout/footer/footer.visual.spec.ts +0 -14
  307. package/src/layout/grid/grid.docs.json +0 -493
  308. package/src/layout/grid/grid.visual.spec.ts +0 -13
  309. package/src/layout/main/main.docs.json +0 -87
  310. package/src/layout/nav-rail/nav-rail-visual.png +0 -0
  311. package/src/layout/nav-rail/nav-rail.docs.json +0 -76
  312. package/src/layout/nav-rail/nav-rail.visual.spec.ts +0 -14
  313. package/src/layout/page-header/page-header.docs.json +0 -124
  314. package/src/layout/row/row.docs.json +0 -237
  315. package/src/layout/sidebar/sidebar-visual.png +0 -0
  316. package/src/layout/sidebar/sidebar.docs.json +0 -63
  317. package/src/layout/sidebar/sidebar.visual.spec.ts +0 -14
  318. package/src/layout/sidebar-nav/sidebar-nav.docs.json +0 -833
  319. package/src/layout/topbar/topbar-visual.png +0 -0
  320. package/src/layout/topbar/topbar.docs.json +0 -110
  321. package/src/layout/topbar/topbar.visual.spec.ts +0 -14
  322. package/src/utilities/container/container.docs.json +0 -121
  323. package/src/utilities/display/display.docs.json +0 -83
  324. package/src/utilities/scroll-animation/scroll-animation.docs.json +0 -100
  325. package/src/utilities/scroll-snap/scroll-snap.docs.json +0 -333
  326. package/src/utilities/spacing/spacing.docs.json +0 -133
  327. package/src/utilities/text/text.docs.json +0 -191
  328. package/src/utilities/view-transition/view-transition.docs.json +0 -63
  329. package/src/utilities/visually-hidden/visually-hidden.docs.json +0 -44
  330. /package/src/components/actions/button/{button.api.json → api.json} +0 -0
  331. /package/src/components/actions/button/{button-visual.png → visual.png} +0 -0
  332. /package/src/components/actions/button-group/{button-group.api.json → api.json} +0 -0
  333. /package/src/components/actions/button-group/{button-group-visual.png → visual.png} +0 -0
  334. /package/src/components/actions/close-button/{close-button.api.json → api.json} +0 -0
  335. /package/src/components/actions/close-button/{close-button-visual.png → visual.png} +0 -0
  336. /package/src/components/content/divider/{divider.api.json → api.json} +0 -0
  337. /package/src/components/content/divider/{divider-visual.png → visual.png} +0 -0
  338. /package/src/components/content/scroll-area/{scroll-area.api.json → api.json} +0 -0
  339. /package/src/components/content/spacer/{spacer.api.json → api.json} +0 -0
  340. /package/src/components/content/spacer/{spacer-visual.png → visual.png} +0 -0
  341. /package/src/components/data-display/avatar/{avatar.api.json → api.json} +0 -0
  342. /package/src/components/data-display/avatar/{avatar-visual.png → visual.png} +0 -0
  343. /package/src/components/data-display/badge/{badge.api.json → api.json} +0 -0
  344. /package/src/components/data-display/badge/{badge-visual.png → visual.png} +0 -0
  345. /package/src/components/data-display/card/{card.api.json → api.json} +0 -0
  346. /package/src/components/data-display/data-list/{data-list.api.json → api.json} +0 -0
  347. /package/src/components/data-display/icon/{icon.api.json → api.json} +0 -0
  348. /package/src/components/data-display/icon/{icon-visual.png → visual.png} +0 -0
  349. /package/src/components/data-display/image/{image.api.json → api.json} +0 -0
  350. /package/src/components/data-display/stat/{stat.api.json → api.json} +0 -0
  351. /package/src/components/data-display/stat/{stat-visual.png → visual.png} +0 -0
  352. /package/src/components/data-display/status/{status.api.json → api.json} +0 -0
  353. /package/src/components/data-display/status/{status-visual.png → visual.png} +0 -0
  354. /package/src/components/data-display/table/{table.api.json → api.json} +0 -0
  355. /package/src/components/data-display/table/{table-visual.png → visual.png} +0 -0
  356. /package/src/components/data-display/tag/{tag.api.json → api.json} +0 -0
  357. /package/src/components/data-display/tag/{tag-visual.png → visual.png} +0 -0
  358. /package/src/components/disclosure/accordion/{accordion.api.json → api.json} +0 -0
  359. /package/src/components/disclosure/accordion/{accordion-visual.png → visual.png} +0 -0
  360. /package/src/components/disclosure/disclosure/{disclosure.api.json → api.json} +0 -0
  361. /package/src/components/disclosure/disclosure/{disclosure-visual.png → visual.png} +0 -0
  362. /package/src/components/feedback/alert/{alert.api.json → api.json} +0 -0
  363. /package/src/components/feedback/alert/{alert-visual.png → visual.png} +0 -0
  364. /package/src/components/feedback/progress/{progress.api.json → api.json} +0 -0
  365. /package/src/components/feedback/progress/{progress-visual.png → visual.png} +0 -0
  366. /package/src/components/feedback/progress-circle/{progress-circle.api.json → api.json} +0 -0
  367. /package/src/components/feedback/progress-circle/{progress-circle-visual.png → visual.png} +0 -0
  368. /package/src/components/feedback/skeleton/{skeleton.api.json → api.json} +0 -0
  369. /package/src/components/feedback/skeleton/{skeleton-visual.png → visual.png} +0 -0
  370. /package/src/components/feedback/spinner/{spinner.api.json → api.json} +0 -0
  371. /package/src/components/feedback/spinner/{spinner-visual.png → visual.png} +0 -0
  372. /package/src/components/feedback/toast/{toast.api.json → api.json} +0 -0
  373. /package/src/components/forms/checkbox/{checkbox.api.json → api.json} +0 -0
  374. /package/src/components/forms/checkbox/{checkbox-visual.png → visual.png} +0 -0
  375. /package/src/components/forms/checkbox-group/{checkbox-group.api.json → api.json} +0 -0
  376. /package/src/components/forms/checkbox-group/{checkbox-group-visual.png → visual.png} +0 -0
  377. /package/src/components/forms/field/{field.api.json → api.json} +0 -0
  378. /package/src/components/forms/field/{field-visual.png → visual.png} +0 -0
  379. /package/src/components/forms/fieldset/{fieldset.api.json → api.json} +0 -0
  380. /package/src/components/forms/fieldset/{fieldset-visual.png → visual.png} +0 -0
  381. /package/src/components/forms/form/{form.api.json → api.json} +0 -0
  382. /package/src/components/forms/form/{form-visual.png → visual.png} +0 -0
  383. /package/src/components/forms/form-error/{form-error.api.json → api.json} +0 -0
  384. /package/src/components/forms/form-error/{form-error-visual.png → visual.png} +0 -0
  385. /package/src/components/forms/form-helper/{form-helper.api.json → api.json} +0 -0
  386. /package/src/components/forms/form-helper/{form-helper-visual.png → visual.png} +0 -0
  387. /package/src/components/forms/input/{input.api.json → api.json} +0 -0
  388. /package/src/components/forms/label/{label.api.json → api.json} +0 -0
  389. /package/src/components/forms/number-input/{number-input.api.json → api.json} +0 -0
  390. /package/src/components/forms/password-input/{password-input.api.json → api.json} +0 -0
  391. /package/src/components/forms/radio/{radio.api.json → api.json} +0 -0
  392. /package/src/components/forms/radio/{radio-visual.png → visual.png} +0 -0
  393. /package/src/components/forms/radio-group/{radio-group.api.json → api.json} +0 -0
  394. /package/src/components/forms/radio-group/{radio-group-visual.png → visual.png} +0 -0
  395. /package/src/components/forms/search-input/{search-input.api.json → api.json} +0 -0
  396. /package/src/components/forms/select/{select.api.json → api.json} +0 -0
  397. /package/src/components/forms/slider/{slider.api.json → api.json} +0 -0
  398. /package/src/components/forms/textarea/{textarea.api.json → api.json} +0 -0
  399. /package/src/components/forms/toggle/{toggle.api.json → api.json} +0 -0
  400. /package/src/components/forms/toggle/{toggle-visual.png → visual.png} +0 -0
  401. /package/src/components/navigation/breadcrumb/{breadcrumb.api.json → api.json} +0 -0
  402. /package/src/components/navigation/breadcrumb/{breadcrumb-visual.png → visual.png} +0 -0
  403. /package/src/components/navigation/dropdown-menu/{dropdown-menu.api.json → api.json} +0 -0
  404. /package/src/components/navigation/menu/{menu.api.json → api.json} +0 -0
  405. /package/src/components/navigation/menu/{menu-visual.png → visual.png} +0 -0
  406. /package/src/components/navigation/nav/{nav.api.json → api.json} +0 -0
  407. /package/src/components/navigation/nav/{nav-visual.png → visual.png} +0 -0
  408. /package/src/components/navigation/pagination/{pagination.api.json → api.json} +0 -0
  409. /package/src/components/navigation/tabs/{tabs.api.json → api.json} +0 -0
  410. /package/src/components/navigation/tabs/{tabs-visual.png → visual.png} +0 -0
  411. /package/src/components/overlays/dialog/{dialog.api.json → api.json} +0 -0
  412. /package/src/components/overlays/dialog/{dialog-visual.png → visual.png} +0 -0
  413. /package/src/components/overlays/drawer/{drawer.api.json → api.json} +0 -0
  414. /package/src/components/overlays/modal/{modal.api.json → api.json} +0 -0
  415. /package/src/components/overlays/modal/{modal-visual.png → visual.png} +0 -0
  416. /package/src/components/overlays/overlay/{overlay.api.json → api.json} +0 -0
  417. /package/src/components/overlays/overlay/{overlay-visual.png → visual.png} +0 -0
  418. /package/src/components/overlays/popover/{popover.api.json → api.json} +0 -0
  419. /package/src/components/overlays/popover/{popover-visual.png → visual.png} +0 -0
  420. /package/src/components/overlays/tooltip/{tooltip.api.json → api.json} +0 -0
  421. /package/src/components/overlays/tooltip/{tooltip-visual.png → visual.png} +0 -0
  422. /package/src/components/typography/blockquote/{blockquote.api.json → api.json} +0 -0
  423. /package/src/components/typography/blockquote/{blockquote-visual.png → visual.png} +0 -0
  424. /package/src/components/typography/code/{code.api.json → api.json} +0 -0
  425. /package/src/components/typography/code-block/{code-block.api.json → api.json} +0 -0
  426. /package/src/components/typography/heading/{heading.api.json → api.json} +0 -0
  427. /package/src/components/typography/kbd/{kbd.api.json → api.json} +0 -0
  428. /package/src/components/typography/kbd/{kbd-visual.png → visual.png} +0 -0
  429. /package/src/components/typography/link/{link.api.json → api.json} +0 -0
  430. /package/src/components/typography/link/{link-visual.png → visual.png} +0 -0
  431. /package/src/components/typography/list/{list.api.json → api.json} +0 -0
  432. /package/src/components/typography/list/{list-visual.png → visual.png} +0 -0
  433. /package/src/components/typography/mark/{mark.api.json → api.json} +0 -0
  434. /package/src/components/typography/mark/{mark-visual.png → visual.png} +0 -0
  435. /package/src/layout/app-shell/{app-shell.api.json → api.json} +0 -0
  436. /package/src/layout/aspect-ratio/{aspect-ratio.api.json → api.json} +0 -0
  437. /package/src/layout/aspect-ratio/{aspect-ratio-visual.png → visual.png} +0 -0
  438. /package/src/layout/box/{box.api.json → api.json} +0 -0
  439. /package/src/layout/center/{center.api.json → api.json} +0 -0
  440. /package/src/layout/center/{center-visual.png → visual.png} +0 -0
  441. /package/src/layout/column/{column.api.json → api.json} +0 -0
  442. /package/src/layout/column/{column-visual.png → visual.png} +0 -0
  443. /package/src/layout/container/{container.api.json → api.json} +0 -0
  444. /package/src/layout/content/{content.api.json → api.json} +0 -0
  445. /package/src/layout/footer/{footer.api.json → api.json} +0 -0
  446. /package/src/layout/grid/{grid.api.json → api.json} +0 -0
  447. /package/src/layout/grid/{grid-visual.png → visual.png} +0 -0
  448. /package/src/layout/main/{main.api.json → api.json} +0 -0
  449. /package/src/layout/nav-rail/{nav-rail.api.json → api.json} +0 -0
  450. /package/src/layout/page-header/{page-header.api.json → api.json} +0 -0
  451. /package/src/layout/page-header/{page-header-visual.png → visual.png} +0 -0
  452. /package/src/layout/row/{row.api.json → api.json} +0 -0
  453. /package/src/layout/row/{row-visual.png → visual.png} +0 -0
  454. /package/src/layout/sidebar/{sidebar.api.json → api.json} +0 -0
  455. /package/src/layout/sidebar-nav/{sidebar-nav.api.json → api.json} +0 -0
  456. /package/src/layout/topbar/{topbar.api.json → api.json} +0 -0
  457. /package/src/utilities/container/{container.api.json → api.json} +0 -0
  458. /package/src/utilities/display/{display.api.json → api.json} +0 -0
  459. /package/src/utilities/scroll-animation/{scroll-animation.api.json → api.json} +0 -0
  460. /package/src/utilities/scroll-snap/{scroll-snap.api.json → api.json} +0 -0
  461. /package/src/utilities/spacing/{spacing.api.json → api.json} +0 -0
  462. /package/src/utilities/text/{text.api.json → api.json} +0 -0
  463. /package/src/utilities/view-transition/{view-transition.api.json → api.json} +0 -0
  464. /package/src/utilities/visually-hidden/{visually-hidden.api.json → api.json} +0 -0
@@ -1,114 +0,0 @@
1
- {
2
- "id": "stat",
3
- "type": "component",
4
- "title": "Stat",
5
- "description": "Statistic display with prominent value and descriptive label.",
6
- "api": "./stat.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "class": "ui-stat",
16
- "children": [
17
- { "tag": "span", "class": "ui-stat__value", "text": "2,847" },
18
- { "tag": "span", "class": "ui-stat__label", "text": "Total users" }
19
- ]
20
- }
21
- ]
22
- }
23
- ]
24
- },
25
- {
26
- "title": "Multiple stats",
27
- "examples": [
28
- {
29
- "items": [
30
- {
31
- "tag": "div",
32
- "class": "ui-row ui-row--lg",
33
- "children": [
34
- {
35
- "tag": "div",
36
- "class": "ui-stat",
37
- "children": [
38
- { "tag": "span", "class": "ui-stat__value", "text": "12.5k" },
39
- { "tag": "span", "class": "ui-stat__label", "text": "Revenue" }
40
- ]
41
- },
42
- {
43
- "tag": "div",
44
- "class": "ui-stat",
45
- "children": [
46
- { "tag": "span", "class": "ui-stat__value", "text": "573" },
47
- { "tag": "span", "class": "ui-stat__label", "text": "Orders" }
48
- ]
49
- },
50
- {
51
- "tag": "div",
52
- "class": "ui-stat",
53
- "children": [
54
- { "tag": "span", "class": "ui-stat__value", "text": "98%" },
55
- { "tag": "span", "class": "ui-stat__label", "text": "Satisfaction" }
56
- ]
57
- }
58
- ]
59
- }
60
- ]
61
- }
62
- ]
63
- },
64
- {
65
- "title": "Small",
66
- "examples": [
67
- {
68
- "items": [
69
- {
70
- "tag": "div",
71
- "class": "ui-stat ui-stat--sm",
72
- "children": [
73
- { "tag": "span", "class": "ui-stat__value", "text": "42" },
74
- { "tag": "span", "class": "ui-stat__label", "text": "Active now" }
75
- ]
76
- }
77
- ]
78
- }
79
- ]
80
- }
81
- ],
82
- "customization": [
83
- {
84
- "token": "--ui-stat-gap",
85
- "default": "var(--ui-space-1)",
86
- "description": "Gap between value and label"
87
- },
88
- {
89
- "token": "--ui-stat-value-font-size",
90
- "default": "var(--ui-font-size-3xl)",
91
- "description": "Value font size"
92
- },
93
- {
94
- "token": "--ui-stat-value-font-weight",
95
- "default": "var(--ui-weight-bold)",
96
- "description": "Value font weight"
97
- },
98
- {
99
- "token": "--ui-stat-value-color",
100
- "default": "var(--ui-color-text)",
101
- "description": "Value text color"
102
- },
103
- {
104
- "token": "--ui-stat-label-font-size",
105
- "default": "var(--ui-font-size-sm)",
106
- "description": "Label font size"
107
- },
108
- {
109
- "token": "--ui-stat-label-color",
110
- "default": "var(--ui-color-text-muted)",
111
- "description": "Label text color"
112
- }
113
- ]
114
- }
@@ -1,147 +0,0 @@
1
- {
2
- "id": "status",
3
- "type": "component",
4
- "title": "Status",
5
- "description": "Visual status indicator with colored dot to show state.",
6
- "api": "./status.api.json",
7
- "sections": [
8
- {
9
- "title": "Variants",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "attrs": {
16
- "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
17
- },
18
- "children": [
19
- {
20
- "tag": "span",
21
- "class": "ui-status",
22
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
23
- },
24
- {
25
- "tag": "span",
26
- "class": "ui-status ui-status--success",
27
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Online" }]
28
- },
29
- {
30
- "tag": "span",
31
- "class": "ui-status ui-status--warning",
32
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Away" }]
33
- },
34
- {
35
- "tag": "span",
36
- "class": "ui-status ui-status--danger",
37
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Busy" }]
38
- },
39
- {
40
- "tag": "span",
41
- "class": "ui-status ui-status--info",
42
- "children": [
43
- { "tag": "span", "class": "ui-status__dot" },
44
- { "text": "In a meeting" }
45
- ]
46
- }
47
- ]
48
- }
49
- ],
50
- "code": "<span class=\"ui-status ui-status--success\">\n <span class=\"ui-status__dot\"></span>\n Online\n</span>"
51
- }
52
- ]
53
- },
54
- {
55
- "title": "Sizes",
56
- "examples": [
57
- {
58
- "items": [
59
- {
60
- "tag": "div",
61
- "attrs": { "style": "display: flex; gap: var(--ui-space-4); align-items: center;" },
62
- "children": [
63
- {
64
- "tag": "span",
65
- "class": "ui-status ui-status--success ui-status--sm",
66
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Small" }]
67
- },
68
- {
69
- "tag": "span",
70
- "class": "ui-status ui-status--success",
71
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
72
- },
73
- {
74
- "tag": "span",
75
- "class": "ui-status ui-status--success ui-status--lg",
76
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Large" }]
77
- }
78
- ]
79
- }
80
- ],
81
- "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
82
- }
83
- ]
84
- },
85
- {
86
- "title": "Pulse Animation",
87
- "description": "For live or active indicators",
88
- "api": "./status.api.json",
89
- "examples": [
90
- {
91
- "items": [
92
- {
93
- "tag": "span",
94
- "class": "ui-status ui-status--success ui-status--pulse",
95
- "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Live" }]
96
- }
97
- ],
98
- "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n <span class=\"ui-status__dot\"></span>\n Live\n</span>"
99
- }
100
- ]
101
- },
102
- {
103
- "title": "Dot Only",
104
- "examples": [
105
- {
106
- "items": [
107
- {
108
- "tag": "div",
109
- "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
110
- "children": [
111
- {
112
- "tag": "span",
113
- "class": "ui-status ui-status--success",
114
- "children": [{ "tag": "span", "class": "ui-status__dot" }]
115
- },
116
- {
117
- "tag": "span",
118
- "class": "ui-status ui-status--warning",
119
- "children": [{ "tag": "span", "class": "ui-status__dot" }]
120
- },
121
- {
122
- "tag": "span",
123
- "class": "ui-status ui-status--danger",
124
- "children": [{ "tag": "span", "class": "ui-status__dot" }]
125
- }
126
- ]
127
- }
128
- ],
129
- "code": "<span class=\"ui-status ui-status--success\">\n <span class=\"ui-status__dot\"></span>\n</span>"
130
- }
131
- ]
132
- }
133
- ],
134
- "customization": [
135
- { "token": "--ui-status-size", "default": "var(--ui-unit)", "description": "Dot size" },
136
- {
137
- "token": "--ui-status-color",
138
- "default": "var(--ui-color-text-muted)",
139
- "description": "Default dot color"
140
- },
141
- {
142
- "token": "--ui-status-gap",
143
- "default": "var(--ui-unit)",
144
- "description": "Gap between dot and text"
145
- }
146
- ]
147
- }
@@ -1,184 +0,0 @@
1
- {
2
- "id": "table",
3
- "type": "component",
4
- "title": "Table",
5
- "description": "Styled table with header formatting and optional variants.",
6
- "api": "./table.api.json",
7
- "componentName": "table",
8
- "sections": [
9
- {
10
- "title": "Basic table",
11
- "examples": [
12
- {
13
- "title": "Default",
14
- "items": [
15
- {
16
- "tag": "table",
17
- "class": "ui-table",
18
- "children": [
19
- {
20
- "tag": "thead",
21
- "children": [
22
- {
23
- "tag": "tr",
24
- "children": [
25
- { "tag": "th", "text": "Name" },
26
- { "tag": "th", "text": "Value" }
27
- ]
28
- }
29
- ]
30
- },
31
- {
32
- "tag": "tbody",
33
- "children": [
34
- {
35
- "tag": "tr",
36
- "children": [{ "tag": "td", "text": "Alpha" }, { "tag": "td", "text": "100" }]
37
- },
38
- {
39
- "tag": "tr",
40
- "children": [{ "tag": "td", "text": "Beta" }, { "tag": "td", "text": "200" }]
41
- }
42
- ]
43
- }
44
- ]
45
- }
46
- ]
47
- }
48
- ]
49
- },
50
- {
51
- "title": "Variants",
52
- "examples": [
53
- {
54
- "title": "Compact",
55
- "items": [
56
- {
57
- "tag": "table",
58
- "class": "ui-table ui-table--compact",
59
- "children": [
60
- {
61
- "tag": "thead",
62
- "children": [
63
- {
64
- "tag": "tr",
65
- "children": [
66
- { "tag": "th", "text": "Token" },
67
- { "tag": "th", "text": "Value" }
68
- ]
69
- }
70
- ]
71
- },
72
- {
73
- "tag": "tbody",
74
- "children": [
75
- {
76
- "tag": "tr",
77
- "children": [
78
- {
79
- "tag": "td",
80
- "children": [
81
- { "tag": "code", "class": "ui-code ui-code--sm", "text": "--space-1" }
82
- ]
83
- },
84
- { "tag": "td", "text": "0.5rem" }
85
- ]
86
- },
87
- {
88
- "tag": "tr",
89
- "children": [
90
- {
91
- "tag": "td",
92
- "children": [
93
- { "tag": "code", "class": "ui-code ui-code--sm", "text": "--space-2" }
94
- ]
95
- },
96
- { "tag": "td", "text": "1rem" }
97
- ]
98
- }
99
- ]
100
- }
101
- ]
102
- }
103
- ]
104
- },
105
- {
106
- "title": "Striped",
107
- "items": [
108
- {
109
- "tag": "table",
110
- "class": "ui-table ui-table--striped",
111
- "children": [
112
- {
113
- "tag": "thead",
114
- "children": [
115
- {
116
- "tag": "tr",
117
- "children": [
118
- { "tag": "th", "text": "Item" },
119
- { "tag": "th", "text": "Status" }
120
- ]
121
- }
122
- ]
123
- },
124
- {
125
- "tag": "tbody",
126
- "children": [
127
- {
128
- "tag": "tr",
129
- "children": [
130
- { "tag": "td", "text": "Task 1" },
131
- { "tag": "td", "text": "Done" }
132
- ]
133
- },
134
- {
135
- "tag": "tr",
136
- "children": [
137
- { "tag": "td", "text": "Task 2" },
138
- { "tag": "td", "text": "Pending" }
139
- ]
140
- },
141
- {
142
- "tag": "tr",
143
- "children": [
144
- { "tag": "td", "text": "Task 3" },
145
- { "tag": "td", "text": "Done" }
146
- ]
147
- }
148
- ]
149
- }
150
- ]
151
- }
152
- ]
153
- }
154
- ]
155
- }
156
- ],
157
- "customization": [
158
- {
159
- "token": "--ui-table-font-size",
160
- "default": "var(--ui-font-size-sm)",
161
- "description": "Table font size"
162
- },
163
- {
164
- "token": "--ui-table-border-color",
165
- "default": "var(--ui-color-border)",
166
- "description": "Border color"
167
- },
168
- {
169
- "token": "--ui-table-header-bg",
170
- "default": "var(--ui-color-bg-subtle)",
171
- "description": "Header background"
172
- },
173
- {
174
- "token": "--ui-table-cell-padding-x",
175
- "default": "var(--ui-space-2)",
176
- "description": "Cell horizontal padding"
177
- },
178
- {
179
- "token": "--ui-table-cell-padding-y",
180
- "default": "var(--ui-space-1)",
181
- "description": "Cell vertical padding"
182
- }
183
- ]
184
- }
@@ -1,146 +0,0 @@
1
- {
2
- "id": "tag",
3
- "type": "component",
4
- "title": "Tag",
5
- "description": "Keyword labels for categorization. Use for filtering, attributes, or status indicators.",
6
- "api": "./tag.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "layout": "row",
13
- "items": [
14
- { "tag": "span", "class": "ui-tag", "text": "Tag" },
15
- { "tag": "span", "class": "ui-tag", "text": "Category" },
16
- { "tag": "span", "class": "ui-tag", "text": "Label" }
17
- ],
18
- "code": "<span class=\"ui-tag\">Tag</span>"
19
- }
20
- ]
21
- },
22
- {
23
- "title": "Sizes",
24
- "examples": [
25
- {
26
- "layout": "row",
27
- "items": [
28
- { "tag": "span", "class": "ui-tag ui-tag--sm", "text": "Small" },
29
- { "tag": "span", "class": "ui-tag", "text": "Default" },
30
- { "tag": "span", "class": "ui-tag ui-tag--lg", "text": "Large" }
31
- ],
32
- "code": "<span class=\"ui-tag ui-tag--sm\">Small</span>\n<span class=\"ui-tag\">Default</span>\n<span class=\"ui-tag ui-tag--lg\">Large</span>"
33
- }
34
- ]
35
- },
36
- {
37
- "title": "Variants",
38
- "examples": [
39
- {
40
- "layout": "row",
41
- "items": [
42
- { "tag": "span", "class": "ui-tag", "text": "Default" },
43
- { "tag": "span", "class": "ui-tag ui-tag--primary", "text": "Primary" },
44
- { "tag": "span", "class": "ui-tag ui-tag--success", "text": "Success" },
45
- { "tag": "span", "class": "ui-tag ui-tag--warning", "text": "Warning" },
46
- { "tag": "span", "class": "ui-tag ui-tag--danger", "text": "Danger" }
47
- ],
48
- "code": "<span class=\"ui-tag\">Default</span>\n<span class=\"ui-tag ui-tag--primary\">Primary</span>\n<span class=\"ui-tag ui-tag--success\">Success</span>\n<span class=\"ui-tag ui-tag--warning\">Warning</span>\n<span class=\"ui-tag ui-tag--danger\">Danger</span>"
49
- }
50
- ]
51
- },
52
- {
53
- "title": "With Remove Button",
54
- "examples": [
55
- {
56
- "items": [
57
- {
58
- "tag": "span",
59
- "class": "ui-tag",
60
- "children": [
61
- { "tag": "span", "text": "Removable" },
62
- {
63
- "tag": "button",
64
- "class": "ui-tag__remove",
65
- "attrs": { "aria-label": "Remove" },
66
- "children": [
67
- {
68
- "tag": "svg",
69
- "class": "ui-icon ui-icon--xs",
70
- "attrs": { "viewBox": "0 0 24 24" },
71
- "children": [{ "tag": "path", "attrs": { "d": "M18 6 6 18M6 6l12 12" } }]
72
- }
73
- ]
74
- }
75
- ]
76
- }
77
- ],
78
- "code": "<span class=\"ui-tag\">\n Removable\n <button class=\"ui-tag__remove\" aria-label=\"Remove\">\n <svg class=\"ui-icon\">...</svg>\n </button>\n</span>"
79
- }
80
- ]
81
- },
82
- {
83
- "title": "Tag Group",
84
- "examples": [
85
- {
86
- "items": [
87
- {
88
- "tag": "div",
89
- "class": "ui-tag-group",
90
- "children": [
91
- { "tag": "span", "class": "ui-tag", "text": "JavaScript" },
92
- { "tag": "span", "class": "ui-tag", "text": "TypeScript" },
93
- { "tag": "span", "class": "ui-tag", "text": "React" },
94
- { "tag": "span", "class": "ui-tag", "text": "CSS" }
95
- ]
96
- }
97
- ],
98
- "code": "<div class=\"ui-tag-group\">\n <span class=\"ui-tag\">JavaScript</span>\n <span class=\"ui-tag\">TypeScript</span>\n <span class=\"ui-tag\">React</span>\n</div>"
99
- }
100
- ]
101
- }
102
- ],
103
- "customization": [
104
- {
105
- "token": "--ui-tag-height",
106
- "default": "calc(var(--ui-unit) * 3)",
107
- "description": "Default height"
108
- },
109
- {
110
- "token": "--ui-tag-height-sm",
111
- "default": "calc(var(--ui-unit) * 2.5)",
112
- "description": "Small height"
113
- },
114
- {
115
- "token": "--ui-tag-height-lg",
116
- "default": "calc(var(--ui-unit) * 3.5)",
117
- "description": "Large height"
118
- },
119
- {
120
- "token": "--ui-tag-padding-x",
121
- "default": "var(--ui-space-1)",
122
- "description": "Horizontal padding"
123
- },
124
- {
125
- "token": "--ui-tag-gap",
126
- "default": "calc(var(--ui-unit) * 0.5)",
127
- "description": "Gap between content and remove button"
128
- },
129
- {
130
- "token": "--ui-tag-radius",
131
- "default": "var(--ui-radius-full)",
132
- "description": "Border radius"
133
- },
134
- {
135
- "token": "--ui-tag-font-size",
136
- "default": "var(--ui-font-size-sm)",
137
- "description": "Font size"
138
- },
139
- {
140
- "token": "--ui-tag-bg",
141
- "default": "var(--ui-color-bg-muted)",
142
- "description": "Background color"
143
- },
144
- { "token": "--ui-tag-color", "default": "var(--ui-color-text)", "description": "Text color" }
145
- ]
146
- }