@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,206 +0,0 @@
1
- {
2
- "id": "accordion",
3
- "type": "component",
4
- "title": "Accordion",
5
- "description": "Container for grouped expandable sections. Use with disclosure components.",
6
- "api": "./accordion.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "class": "ui-accordion",
16
- "children": [
17
- {
18
- "tag": "details",
19
- "class": "ui-disclosure",
20
- "children": [
21
- {
22
- "tag": "summary",
23
- "class": "ui-disclosure__trigger",
24
- "children": [
25
- { "text": "Section 1" },
26
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
27
- ]
28
- },
29
- {
30
- "tag": "div",
31
- "class": "ui-disclosure__content",
32
- "children": [{ "tag": "p", "text": "Content for section 1" }]
33
- }
34
- ]
35
- },
36
- {
37
- "tag": "details",
38
- "class": "ui-disclosure",
39
- "children": [
40
- {
41
- "tag": "summary",
42
- "class": "ui-disclosure__trigger",
43
- "children": [
44
- { "text": "Section 2" },
45
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
46
- ]
47
- },
48
- {
49
- "tag": "div",
50
- "class": "ui-disclosure__content",
51
- "children": [{ "tag": "p", "text": "Content for section 2" }]
52
- }
53
- ]
54
- },
55
- {
56
- "tag": "details",
57
- "class": "ui-disclosure",
58
- "children": [
59
- {
60
- "tag": "summary",
61
- "class": "ui-disclosure__trigger",
62
- "children": [
63
- { "text": "Section 3" },
64
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
65
- ]
66
- },
67
- {
68
- "tag": "div",
69
- "class": "ui-disclosure__content",
70
- "children": [{ "tag": "p", "text": "Content for section 3" }]
71
- }
72
- ]
73
- }
74
- ]
75
- }
76
- ],
77
- "code": "<div class=\"ui-accordion\">\n <details class=\"ui-disclosure\">\n <summary class=\"ui-disclosure__trigger\">Section 1</summary>\n <div class=\"ui-disclosure__content\">...</div>\n </details>\n <details class=\"ui-disclosure\">\n <summary class=\"ui-disclosure__trigger\">Section 2</summary>\n <div class=\"ui-disclosure__content\">...</div>\n </details>\n</div>"
78
- }
79
- ]
80
- },
81
- {
82
- "title": "Separated",
83
- "description": "Gap between accordion items",
84
- "api": "./accordion.api.json",
85
- "examples": [
86
- {
87
- "items": [
88
- {
89
- "tag": "div",
90
- "class": "ui-accordion ui-accordion--separated",
91
- "children": [
92
- {
93
- "tag": "details",
94
- "class": "ui-disclosure",
95
- "children": [
96
- {
97
- "tag": "summary",
98
- "class": "ui-disclosure__trigger",
99
- "children": [
100
- { "text": "Section 1" },
101
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
102
- ]
103
- },
104
- {
105
- "tag": "div",
106
- "class": "ui-disclosure__content",
107
- "children": [{ "tag": "p", "text": "Content for section 1" }]
108
- }
109
- ]
110
- },
111
- {
112
- "tag": "details",
113
- "class": "ui-disclosure",
114
- "children": [
115
- {
116
- "tag": "summary",
117
- "class": "ui-disclosure__trigger",
118
- "children": [
119
- { "text": "Section 2" },
120
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
121
- ]
122
- },
123
- {
124
- "tag": "div",
125
- "class": "ui-disclosure__content",
126
- "children": [{ "tag": "p", "text": "Content for section 2" }]
127
- }
128
- ]
129
- }
130
- ]
131
- }
132
- ],
133
- "code": "<div class=\"ui-accordion ui-accordion--separated\">\n ...\n</div>"
134
- }
135
- ]
136
- },
137
- {
138
- "title": "With One Open",
139
- "examples": [
140
- {
141
- "items": [
142
- {
143
- "tag": "div",
144
- "class": "ui-accordion",
145
- "children": [
146
- {
147
- "tag": "details",
148
- "class": "ui-disclosure",
149
- "attrs": { "open": true },
150
- "children": [
151
- {
152
- "tag": "summary",
153
- "class": "ui-disclosure__trigger",
154
- "children": [
155
- { "text": "Open Section" },
156
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
157
- ]
158
- },
159
- {
160
- "tag": "div",
161
- "class": "ui-disclosure__content",
162
- "children": [{ "tag": "p", "text": "This section starts open" }]
163
- }
164
- ]
165
- },
166
- {
167
- "tag": "details",
168
- "class": "ui-disclosure",
169
- "children": [
170
- {
171
- "tag": "summary",
172
- "class": "ui-disclosure__trigger",
173
- "children": [
174
- { "text": "Closed Section" },
175
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
176
- ]
177
- },
178
- {
179
- "tag": "div",
180
- "class": "ui-disclosure__content",
181
- "children": [{ "tag": "p", "text": "Click to open" }]
182
- }
183
- ]
184
- }
185
- ]
186
- }
187
- ],
188
- "code": "<div class=\"ui-accordion\">\n <details class=\"ui-disclosure\" open>\n <summary class=\"ui-disclosure__trigger\">Open Section</summary>\n <div class=\"ui-disclosure__content\">...</div>\n </details>\n <details class=\"ui-disclosure\">\n ...\n </details>\n</div>"
189
- }
190
- ]
191
- }
192
- ],
193
- "customization": [
194
- {
195
- "token": "--ui-accordion-border-color",
196
- "default": "var(--ui-color-border)",
197
- "description": "Border color"
198
- },
199
- { "token": "--ui-accordion-border-width", "default": "1px", "description": "Border width" },
200
- {
201
- "token": "--ui-accordion-radius",
202
- "default": "var(--ui-radius-md)",
203
- "description": "Border radius"
204
- }
205
- ]
206
- }
@@ -1,154 +0,0 @@
1
- {
2
- "id": "disclosure",
3
- "type": "component",
4
- "title": "Disclosure",
5
- "description": "Expandable/collapsible content section. Uses native details/summary for accessibility without JS.",
6
- "api": "./disclosure.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "details",
15
- "class": "ui-disclosure",
16
- "children": [
17
- {
18
- "tag": "summary",
19
- "class": "ui-disclosure__trigger",
20
- "children": [
21
- { "text": "Click to expand" },
22
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
23
- ]
24
- },
25
- {
26
- "tag": "div",
27
- "class": "ui-disclosure__content",
28
- "children": [{ "tag": "p", "text": "Hidden content that expands when clicked." }]
29
- }
30
- ]
31
- }
32
- ],
33
- "code": "<details class=\"ui-disclosure\">\n <summary class=\"ui-disclosure__trigger\">\n Click to expand\n <span class=\"ui-disclosure__icon\">&#9662;</span>\n </summary>\n <div class=\"ui-disclosure__content\">\n <p>Hidden content that expands when clicked.</p>\n </div>\n</details>"
34
- }
35
- ]
36
- },
37
- {
38
- "title": "Open by Default",
39
- "examples": [
40
- {
41
- "items": [
42
- {
43
- "tag": "details",
44
- "class": "ui-disclosure",
45
- "attrs": { "open": true },
46
- "children": [
47
- {
48
- "tag": "summary",
49
- "class": "ui-disclosure__trigger",
50
- "children": [
51
- { "text": "Already expanded" },
52
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
53
- ]
54
- },
55
- {
56
- "tag": "div",
57
- "class": "ui-disclosure__content",
58
- "children": [{ "tag": "p", "text": "This content is visible by default." }]
59
- }
60
- ]
61
- }
62
- ],
63
- "code": "<details class=\"ui-disclosure\" open>\n <summary class=\"ui-disclosure__trigger\">Already expanded</summary>\n <div class=\"ui-disclosure__content\">...</div>\n</details>"
64
- }
65
- ]
66
- },
67
- {
68
- "title": "Borderless",
69
- "examples": [
70
- {
71
- "items": [
72
- {
73
- "tag": "details",
74
- "class": "ui-disclosure ui-disclosure--borderless",
75
- "children": [
76
- {
77
- "tag": "summary",
78
- "class": "ui-disclosure__trigger",
79
- "children": [
80
- { "text": "Borderless disclosure" },
81
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
82
- ]
83
- },
84
- {
85
- "tag": "div",
86
- "class": "ui-disclosure__content",
87
- "children": [{ "tag": "p", "text": "No border around the disclosure." }]
88
- }
89
- ]
90
- }
91
- ],
92
- "code": "<details class=\"ui-disclosure ui-disclosure--borderless\">\n ...\n</details>"
93
- }
94
- ]
95
- },
96
- {
97
- "title": "Animated",
98
- "examples": [
99
- {
100
- "items": [
101
- {
102
- "tag": "details",
103
- "class": "ui-disclosure ui-disclosure--animate",
104
- "children": [
105
- {
106
- "tag": "summary",
107
- "class": "ui-disclosure__trigger",
108
- "children": [
109
- { "text": "Animated expansion" },
110
- { "tag": "span", "class": "ui-disclosure__icon", "text": "\u25BE" }
111
- ]
112
- },
113
- {
114
- "tag": "div",
115
- "class": "ui-disclosure__content",
116
- "children": [{ "tag": "p", "text": "Content animates in when opened." }]
117
- }
118
- ]
119
- }
120
- ],
121
- "code": "<details class=\"ui-disclosure ui-disclosure--animate\">\n ...\n</details>"
122
- }
123
- ]
124
- }
125
- ],
126
- "customization": [
127
- {
128
- "token": "--ui-disclosure-border-color",
129
- "default": "var(--ui-color-border)",
130
- "description": "Border color"
131
- },
132
- { "token": "--ui-disclosure-border-width", "default": "1px", "description": "Border width" },
133
- {
134
- "token": "--ui-disclosure-radius",
135
- "default": "var(--ui-radius-md)",
136
- "description": "Border radius"
137
- },
138
- {
139
- "token": "--ui-disclosure-trigger-height",
140
- "default": "var(--ui-row-3)",
141
- "description": "Trigger button height"
142
- },
143
- {
144
- "token": "--ui-disclosure-padding-x",
145
- "default": "calc(var(--ui-unit) * 2)",
146
- "description": "Horizontal padding"
147
- },
148
- {
149
- "token": "--ui-disclosure-padding-y",
150
- "default": "calc(var(--ui-unit) * 2)",
151
- "description": "Content vertical padding"
152
- }
153
- ]
154
- }
@@ -1,325 +0,0 @@
1
- {
2
- "id": "alert",
3
- "type": "component",
4
- "title": "Alert",
5
- "description": "Informational banner for important messages. Use variants for different message types.",
6
- "api": "./alert.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "class": "ui-alert",
16
- "children": [
17
- {
18
- "tag": "div",
19
- "class": "ui-alert__content",
20
- "children": [
21
- { "tag": "p", "class": "ui-alert__title", "text": "Note" },
22
- {
23
- "tag": "p",
24
- "class": "ui-alert__description",
25
- "text": "This is a default alert message."
26
- }
27
- ]
28
- }
29
- ]
30
- }
31
- ],
32
- "code": "<div class=\"ui-alert\">\n <div class=\"ui-alert__content\">\n <p class=\"ui-alert__title\">Note</p>\n <p class=\"ui-alert__description\">This is a default alert.</p>\n </div>\n</div>"
33
- }
34
- ]
35
- },
36
- {
37
- "title": "Variants",
38
- "examples": [
39
- {
40
- "items": [
41
- {
42
- "tag": "div",
43
- "class": "ui-column",
44
- "attrs": { "style": "--column-gap: var(--ui-space-2);" },
45
- "children": [
46
- {
47
- "tag": "div",
48
- "class": "ui-alert ui-alert--info",
49
- "children": [
50
- {
51
- "tag": "div",
52
- "class": "ui-alert__content",
53
- "children": [
54
- { "tag": "p", "class": "ui-alert__title", "text": "Info" },
55
- {
56
- "tag": "p",
57
- "class": "ui-alert__description",
58
- "text": "Informational message for the user."
59
- }
60
- ]
61
- }
62
- ]
63
- },
64
- {
65
- "tag": "div",
66
- "class": "ui-alert ui-alert--success",
67
- "children": [
68
- {
69
- "tag": "div",
70
- "class": "ui-alert__content",
71
- "children": [
72
- { "tag": "p", "class": "ui-alert__title", "text": "Success" },
73
- {
74
- "tag": "p",
75
- "class": "ui-alert__description",
76
- "text": "Your action was completed successfully."
77
- }
78
- ]
79
- }
80
- ]
81
- },
82
- {
83
- "tag": "div",
84
- "class": "ui-alert ui-alert--warning",
85
- "children": [
86
- {
87
- "tag": "div",
88
- "class": "ui-alert__content",
89
- "children": [
90
- { "tag": "p", "class": "ui-alert__title", "text": "Warning" },
91
- {
92
- "tag": "p",
93
- "class": "ui-alert__description",
94
- "text": "Please review before continuing."
95
- }
96
- ]
97
- }
98
- ]
99
- },
100
- {
101
- "tag": "div",
102
- "class": "ui-alert ui-alert--danger",
103
- "children": [
104
- {
105
- "tag": "div",
106
- "class": "ui-alert__content",
107
- "children": [
108
- { "tag": "p", "class": "ui-alert__title", "text": "Error" },
109
- {
110
- "tag": "p",
111
- "class": "ui-alert__description",
112
- "text": "Something went wrong. Please try again."
113
- }
114
- ]
115
- }
116
- ]
117
- }
118
- ]
119
- }
120
- ],
121
- "code": "<div class=\"ui-alert ui-alert--info\">...</div>\n<div class=\"ui-alert ui-alert--success\">...</div>\n<div class=\"ui-alert ui-alert--warning\">...</div>\n<div class=\"ui-alert ui-alert--danger\">...</div>"
122
- }
123
- ]
124
- },
125
- {
126
- "title": "With Icon",
127
- "examples": [
128
- {
129
- "items": [
130
- {
131
- "tag": "div",
132
- "class": "ui-alert ui-alert--info",
133
- "children": [
134
- {
135
- "tag": "svg",
136
- "class": "ui-icon ui-icon--sm ui-alert__icon",
137
- "attrs": { "viewBox": "0 0 24 24" },
138
- "children": [
139
- { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "10" } },
140
- { "tag": "path", "attrs": { "d": "M12 16v-4" } },
141
- { "tag": "path", "attrs": { "d": "M12 8h.01" } }
142
- ]
143
- },
144
- {
145
- "tag": "div",
146
- "class": "ui-alert__content",
147
- "children": [
148
- {
149
- "tag": "p",
150
- "class": "ui-alert__description",
151
- "text": "Your session will expire in 5 minutes."
152
- }
153
- ]
154
- }
155
- ]
156
- }
157
- ],
158
- "code": "<div class=\"ui-alert ui-alert--info\">\n <svg class=\"ui-icon ui-alert__icon\">...</svg>\n <div class=\"ui-alert__content\">\n <p class=\"ui-alert__description\">Your session will expire.</p>\n </div>\n</div>"
159
- }
160
- ]
161
- },
162
- {
163
- "title": "Description Only",
164
- "examples": [
165
- {
166
- "items": [
167
- {
168
- "tag": "div",
169
- "class": "ui-alert ui-alert--success",
170
- "children": [
171
- {
172
- "tag": "div",
173
- "class": "ui-alert__content",
174
- "children": [
175
- {
176
- "tag": "p",
177
- "class": "ui-alert__description",
178
- "text": "File uploaded successfully."
179
- }
180
- ]
181
- }
182
- ]
183
- }
184
- ],
185
- "code": "<div class=\"ui-alert ui-alert--success\">\n <div class=\"ui-alert__content\">\n <p class=\"ui-alert__description\">File uploaded.</p>\n </div>\n</div>"
186
- }
187
- ]
188
- },
189
- {
190
- "title": "Sizes",
191
- "examples": [
192
- {
193
- "items": [
194
- {
195
- "tag": "div",
196
- "class": "ui-column",
197
- "attrs": { "style": "--column-gap: var(--ui-space-2);" },
198
- "children": [
199
- {
200
- "tag": "div",
201
- "class": "ui-alert ui-alert--info ui-alert--sm",
202
- "children": [
203
- {
204
- "tag": "div",
205
- "class": "ui-alert__content",
206
- "children": [
207
- {
208
- "tag": "p",
209
- "class": "ui-alert__description",
210
- "text": "Small alert with compact padding."
211
- }
212
- ]
213
- }
214
- ]
215
- },
216
- {
217
- "tag": "div",
218
- "class": "ui-alert ui-alert--info",
219
- "children": [
220
- {
221
- "tag": "div",
222
- "class": "ui-alert__content",
223
- "children": [
224
- {
225
- "tag": "p",
226
- "class": "ui-alert__description",
227
- "text": "Default alert size."
228
- }
229
- ]
230
- }
231
- ]
232
- },
233
- {
234
- "tag": "div",
235
- "class": "ui-alert ui-alert--info ui-alert--lg",
236
- "children": [
237
- {
238
- "tag": "div",
239
- "class": "ui-alert__content",
240
- "children": [
241
- {
242
- "tag": "p",
243
- "class": "ui-alert__description",
244
- "text": "Large alert with extra padding."
245
- }
246
- ]
247
- }
248
- ]
249
- }
250
- ]
251
- }
252
- ],
253
- "code": "<div class=\"ui-alert ui-alert--sm\">...</div>\n<div class=\"ui-alert\">...</div>\n<div class=\"ui-alert ui-alert--lg\">...</div>"
254
- }
255
- ]
256
- },
257
- {
258
- "title": "Dismissible",
259
- "examples": [
260
- {
261
- "items": [
262
- {
263
- "tag": "div",
264
- "class": "ui-alert ui-alert--info ui-alert--dismissible",
265
- "children": [
266
- {
267
- "tag": "div",
268
- "class": "ui-alert__content",
269
- "children": [
270
- { "tag": "p", "class": "ui-alert__title", "text": "Dismissible" },
271
- {
272
- "tag": "p",
273
- "class": "ui-alert__description",
274
- "text": "This alert can be closed by the user."
275
- }
276
- ]
277
- },
278
- {
279
- "tag": "button",
280
- "class": "ui-alert__close ui-close-button",
281
- "attrs": { "aria-label": "Close" }
282
- }
283
- ]
284
- }
285
- ],
286
- "code": "<div class=\"ui-alert ui-alert--info ui-alert--dismissible\">\n <div class=\"ui-alert__content\">\n <p class=\"ui-alert__title\">Dismissible</p>\n <p class=\"ui-alert__description\">This alert can be closed.</p>\n </div>\n <button class=\"ui-alert__close\" aria-label=\"Close\">...</button>\n</div>"
287
- }
288
- ]
289
- }
290
- ],
291
- "customization": [
292
- {
293
- "token": "--ui-alert-padding",
294
- "default": "var(--ui-space-2)",
295
- "description": "Inner padding"
296
- },
297
- {
298
- "token": "--ui-alert-gap",
299
- "default": "var(--ui-space-1)",
300
- "description": "Gap between icon and content"
301
- },
302
- {
303
- "token": "--ui-alert-radius",
304
- "default": "var(--ui-radius-md)",
305
- "description": "Border radius"
306
- },
307
- {
308
- "token": "--ui-alert-border-width",
309
- "default": "var(--ui-border-width-sm)",
310
- "description": "Border width"
311
- },
312
- {
313
- "token": "--ui-alert-bg",
314
- "default": "var(--ui-color-bg-subtle)",
315
- "description": "Background color"
316
- },
317
- {
318
- "token": "--ui-alert-border-color",
319
- "default": "var(--ui-color-border)",
320
- "description": "Border color"
321
- },
322
- { "token": "--ui-alert-color", "default": "var(--ui-color-text)", "description": "Text color" },
323
- { "token": "--ui-alert-icon-color", "default": "currentcolor", "description": "Icon color" }
324
- ]
325
- }