@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
package/src/components/forms/checkbox-group/checkbox-group.docs.json DELETED
@@ -1,339 +0,0 @@
1
- {
2
- "id": "checkbox-group",
3
- "type": "component",
4
- "mergeInto": "checkbox",
5
- "title": "Checkbox Group",
6
- "description": "Groups related checkboxes with a legend and consistent spacing. Built on native fieldset semantics.",
7
- "api": "./checkbox-group.api.json",
8
- "sections": [
9
- {
10
- "title": "Default",
11
- "examples": [
12
- {
13
- "items": [
14
- {
15
- "tag": "fieldset",
16
- "class": "ui-checkbox-group",
17
- "children": [
18
- {
19
- "tag": "legend",
20
- "class": "ui-checkbox-group__legend",
21
- "text": "Notifications"
22
- },
23
- {
24
- "tag": "div",
25
- "class": "ui-checkbox-group__items",
26
- "children": [
27
- {
28
- "tag": "label",
29
- "class": "ui-checkbox-group__item",
30
- "children": [
31
- {
32
- "tag": "input",
33
- "class": "ui-checkbox",
34
- "attrs": { "type": "checkbox", "checked": "" }
35
- },
36
- { "tag": "span", "text": "Email" }
37
- ]
38
- },
39
- {
40
- "tag": "label",
41
- "class": "ui-checkbox-group__item",
42
- "children": [
43
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
44
- { "tag": "span", "text": "SMS" }
45
- ]
46
- },
47
- {
48
- "tag": "label",
49
- "class": "ui-checkbox-group__item",
50
- "children": [
51
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
52
- { "tag": "span", "text": "Push" }
53
- ]
54
- }
55
- ]
56
- }
57
- ]
58
- }
59
- ],
60
- "code": "<fieldset class=\"ui-checkbox-group\">\n <legend class=\"ui-checkbox-group__legend\">Notifications</legend>\n <div class=\"ui-checkbox-group__items\">\n <label class=\"ui-checkbox-group__item\">\n <input type=\"checkbox\" class=\"ui-checkbox\" checked>\n <span>Email</span>\n </label>\n ...\n </div>\n</fieldset>"
61
- }
62
- ]
63
- },
64
- {
65
- "title": "Horizontal",
66
- "examples": [
67
- {
68
- "items": [
69
- {
70
- "tag": "fieldset",
71
- "class": "ui-checkbox-group ui-checkbox-group--horizontal",
72
- "children": [
73
- {
74
- "tag": "legend",
75
- "class": "ui-checkbox-group__legend",
76
- "text": "Interests"
77
- },
78
- {
79
- "tag": "div",
80
- "class": "ui-checkbox-group__items",
81
- "children": [
82
- {
83
- "tag": "label",
84
- "class": "ui-checkbox-group__item",
85
- "children": [
86
- {
87
- "tag": "input",
88
- "class": "ui-checkbox",
89
- "attrs": { "type": "checkbox", "checked": "" }
90
- },
91
- { "tag": "span", "text": "Design" }
92
- ]
93
- },
94
- {
95
- "tag": "label",
96
- "class": "ui-checkbox-group__item",
97
- "children": [
98
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
99
- { "tag": "span", "text": "Engineering" }
100
- ]
101
- },
102
- {
103
- "tag": "label",
104
- "class": "ui-checkbox-group__item",
105
- "children": [
106
- {
107
- "tag": "input",
108
- "class": "ui-checkbox",
109
- "attrs": { "type": "checkbox", "checked": "" }
110
- },
111
- { "tag": "span", "text": "Product" }
112
- ]
113
- },
114
- {
115
- "tag": "label",
116
- "class": "ui-checkbox-group__item",
117
- "children": [
118
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
119
- { "tag": "span", "text": "Marketing" }
120
- ]
121
- }
122
- ]
123
- }
124
- ]
125
- }
126
- ],
127
- "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--horizontal\">\n <legend class=\"ui-checkbox-group__legend\">Interests</legend>\n ...\n</fieldset>"
128
- }
129
- ]
130
- },
131
- {
132
- "title": "Compact",
133
- "examples": [
134
- {
135
- "items": [
136
- {
137
- "tag": "fieldset",
138
- "class": "ui-checkbox-group ui-checkbox-group--compact",
139
- "children": [
140
- {
141
- "tag": "legend",
142
- "class": "ui-checkbox-group__legend",
143
- "text": "Features"
144
- },
145
- {
146
- "tag": "div",
147
- "class": "ui-checkbox-group__items",
148
- "children": [
149
- {
150
- "tag": "label",
151
- "class": "ui-checkbox-group__item",
152
- "children": [
153
- {
154
- "tag": "input",
155
- "class": "ui-checkbox",
156
- "attrs": { "type": "checkbox", "checked": "" }
157
- },
158
- { "tag": "span", "text": "Dark mode" }
159
- ]
160
- },
161
- {
162
- "tag": "label",
163
- "class": "ui-checkbox-group__item",
164
- "children": [
165
- {
166
- "tag": "input",
167
- "class": "ui-checkbox",
168
- "attrs": { "type": "checkbox", "checked": "" }
169
- },
170
- { "tag": "span", "text": "Notifications" }
171
- ]
172
- },
173
- {
174
- "tag": "label",
175
- "class": "ui-checkbox-group__item",
176
- "children": [
177
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
178
- { "tag": "span", "text": "Analytics" }
179
- ]
180
- }
181
- ]
182
- }
183
- ]
184
- }
185
- ],
186
- "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--compact\">\n ...\n</fieldset>"
187
- }
188
- ]
189
- },
190
- {
191
- "title": "Error State",
192
- "examples": [
193
- {
194
- "items": [
195
- {
196
- "tag": "fieldset",
197
- "class": "ui-checkbox-group ui-checkbox-group--error",
198
- "children": [
199
- {
200
- "tag": "legend",
201
- "class": "ui-checkbox-group__legend",
202
- "text": "Terms"
203
- },
204
- {
205
- "tag": "div",
206
- "class": "ui-checkbox-group__items",
207
- "children": [
208
- {
209
- "tag": "label",
210
- "class": "ui-checkbox-group__item",
211
- "children": [
212
- {
213
- "tag": "input",
214
- "class": "ui-checkbox ui-checkbox--error",
215
- "attrs": { "type": "checkbox" }
216
- },
217
- { "tag": "span", "text": "I accept the terms of service" }
218
- ]
219
- },
220
- {
221
- "tag": "label",
222
- "class": "ui-checkbox-group__item",
223
- "children": [
224
- {
225
- "tag": "input",
226
- "class": "ui-checkbox ui-checkbox--error",
227
- "attrs": { "type": "checkbox" }
228
- },
229
- { "tag": "span", "text": "I accept the privacy policy" }
230
- ]
231
- }
232
- ]
233
- },
234
- {
235
- "tag": "span",
236
- "class": "ui-form-error",
237
- "text": "You must accept all terms to continue"
238
- }
239
- ]
240
- }
241
- ],
242
- "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--error\">\n <legend class=\"ui-checkbox-group__legend\">Terms</legend>\n <div class=\"ui-checkbox-group__items\">\n <label class=\"ui-checkbox-group__item\">\n <input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n <span>I accept the terms of service</span>\n </label>\n ...\n </div>\n <span class=\"ui-form-error\">You must accept all terms to continue</span>\n</fieldset>"
243
- }
244
- ]
245
- },
246
- {
247
- "title": "Disabled",
248
- "examples": [
249
- {
250
- "items": [
251
- {
252
- "tag": "fieldset",
253
- "class": "ui-checkbox-group",
254
- "attrs": { "disabled": "" },
255
- "children": [
256
- {
257
- "tag": "legend",
258
- "class": "ui-checkbox-group__legend",
259
- "text": "Permissions (locked)"
260
- },
261
- {
262
- "tag": "div",
263
- "class": "ui-checkbox-group__items",
264
- "children": [
265
- {
266
- "tag": "label",
267
- "class": "ui-checkbox-group__item",
268
- "children": [
269
- {
270
- "tag": "input",
271
- "class": "ui-checkbox",
272
- "attrs": { "type": "checkbox", "checked": "" }
273
- },
274
- { "tag": "span", "text": "Read" }
275
- ]
276
- },
277
- {
278
- "tag": "label",
279
- "class": "ui-checkbox-group__item",
280
- "children": [
281
- {
282
- "tag": "input",
283
- "class": "ui-checkbox",
284
- "attrs": { "type": "checkbox", "checked": "" }
285
- },
286
- { "tag": "span", "text": "Write" }
287
- ]
288
- },
289
- {
290
- "tag": "label",
291
- "class": "ui-checkbox-group__item",
292
- "children": [
293
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
294
- { "tag": "span", "text": "Admin" }
295
- ]
296
- }
297
- ]
298
- }
299
- ]
300
- }
301
- ],
302
- "code": "<fieldset class=\"ui-checkbox-group\" disabled>\n ...\n</fieldset>"
303
- }
304
- ]
305
- }
306
- ],
307
- "customization": [
308
- {
309
- "token": "--ui-checkbox-group-spacing",
310
- "default": "var(--ui-space-1)",
311
- "description": "Gap between checkbox items"
312
- },
313
- {
314
- "token": "--ui-checkbox-group-legend-size",
315
- "default": "var(--ui-font-size-sm)",
316
- "description": "Legend font size"
317
- },
318
- {
319
- "token": "--ui-checkbox-group-legend-weight",
320
- "default": "var(--ui-weight-medium)",
321
- "description": "Legend font weight"
322
- },
323
- {
324
- "token": "--ui-checkbox-group-legend-color",
325
- "default": "var(--ui-color-text)",
326
- "description": "Legend text color"
327
- },
328
- {
329
- "token": "--ui-checkbox-group-item-gap",
330
- "default": "var(--ui-space-1)",
331
- "description": "Gap between checkbox and label text"
332
- },
333
- {
334
- "token": "--ui-checkbox-group-error-color",
335
- "default": "var(--ui-color-danger)",
336
- "description": "Legend color in error state"
337
- }
338
- ]
339
- }
package/src/components/forms/field/field.docs.json DELETED
@@ -1,276 +0,0 @@
1
- {
2
- "id": "field",
3
- "type": "component",
4
- "title": "Field",
5
- "description": "Form field wrapper that combines label, control, helper text, and error message.",
6
- "api": "./field.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "class": "ui-field",
16
- "children": [
17
- {
18
- "tag": "label",
19
- "class": "ui-label",
20
- "text": "Email",
21
- "attrs": {
22
- "for": "email"
23
- }
24
- },
25
- {
26
- "tag": "div",
27
- "class": "ui-field__control",
28
- "children": [
29
- {
30
- "tag": "input",
31
- "class": "ui-input",
32
- "attrs": {
33
- "type": "email",
34
- "id": "email",
35
- "placeholder": "Enter email"
36
- }
37
- }
38
- ]
39
- }
40
- ]
41
- }
42
- ],
43
- "code": "<div class=\"ui-field\">\n <label class=\"ui-label\" for=\"email\">Email</label>\n <div class=\"ui-field__control\">\n <input type=\"email\" id=\"email\" class=\"ui-input\">\n </div>\n</div>"
44
- }
45
- ]
46
- },
47
- {
48
- "title": "With Helper Text",
49
- "examples": [
50
- {
51
- "items": [
52
- {
53
- "tag": "div",
54
- "class": "ui-field",
55
- "children": [
56
- {
57
- "tag": "label",
58
- "class": "ui-label",
59
- "text": "Password",
60
- "attrs": {
61
- "for": "password"
62
- }
63
- },
64
- {
65
- "tag": "div",
66
- "class": "ui-field__control",
67
- "children": [
68
- {
69
- "tag": "input",
70
- "class": "ui-input",
71
- "attrs": {
72
- "type": "password",
73
- "id": "password"
74
- }
75
- },
76
- {
77
- "tag": "span",
78
- "class": "ui-form-helper",
79
- "text": "Must be at least 8 characters"
80
- }
81
- ]
82
- }
83
- ]
84
- }
85
- ],
86
- "code": "<div class=\"ui-field\">\n <label class=\"ui-label\" for=\"password\">Password</label>\n <div class=\"ui-field__control\">\n <input type=\"password\" id=\"password\" class=\"ui-input\">\n <span class=\"ui-form-helper\">Must be at least 8 characters</span>\n </div>\n</div>"
87
- }
88
- ]
89
- },
90
- {
91
- "title": "With Error",
92
- "examples": [
93
- {
94
- "items": [
95
- {
96
- "tag": "div",
97
- "class": "ui-field",
98
- "children": [
99
- {
100
- "tag": "label",
101
- "class": "ui-label",
102
- "text": "Username",
103
- "attrs": {
104
- "for": "username"
105
- }
106
- },
107
- {
108
- "tag": "div",
109
- "class": "ui-field__control",
110
- "children": [
111
- {
112
- "tag": "input",
113
- "class": "ui-input ui-input--error",
114
- "attrs": {
115
- "type": "text",
116
- "id": "username",
117
- "value": "ab"
118
- }
119
- },
120
- {
121
- "tag": "span",
122
- "class": "ui-form-error",
123
- "text": "Username must be at least 3 characters"
124
- }
125
- ]
126
- }
127
- ]
128
- }
129
- ],
130
- "code": "<div class=\"ui-field\">\n <label class=\"ui-label\" for=\"username\">Username</label>\n <div class=\"ui-field__control\">\n <input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\">\n <span class=\"ui-form-error\">Username must be at least 3 characters</span>\n </div>\n</div>"
131
- }
132
- ]
133
- },
134
- {
135
- "title": "Horizontal Layout",
136
- "description": "Label beside control for wider forms",
137
- "api": "./field.api.json",
138
- "examples": [
139
- {
140
- "items": [
141
- {
142
- "tag": "div",
143
- "class": "ui-field ui-field--horizontal",
144
- "children": [
145
- {
146
- "tag": "label",
147
- "class": "ui-label ui-field__label",
148
- "text": "Full Name",
149
- "attrs": {
150
- "for": "name"
151
- }
152
- },
153
- {
154
- "tag": "div",
155
- "class": "ui-field__control",
156
- "children": [
157
- {
158
- "tag": "input",
159
- "class": "ui-input",
160
- "attrs": {
161
- "type": "text",
162
- "id": "name"
163
- }
164
- },
165
- {
166
- "tag": "span",
167
- "class": "ui-form-helper",
168
- "text": "As it appears on your ID"
169
- }
170
- ]
171
- }
172
- ]
173
- }
174
- ],
175
- "code": "<div class=\"ui-field ui-field--horizontal\">\n <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n <div class=\"ui-field__control\">\n <input type=\"text\" id=\"name\" class=\"ui-input\">\n <span class=\"ui-form-helper\">As it appears on your ID</span>\n </div>\n</div>"
176
- }
177
- ]
178
- },
179
- {
180
- "title": "Responsive Layout",
181
- "description": "Auto-switches to horizontal layout when container is wide enough (>= 30rem). Requires a parent with container-type: inline-size (use ui-container-inline utility).",
182
- "examples": [
183
- {
184
- "items": [
185
- {
186
- "tag": "div",
187
- "class": "ui-container-inline",
188
- "children": [
189
- {
190
- "tag": "div",
191
- "class": "ui-field ui-field--responsive",
192
- "children": [
193
- {
194
- "tag": "label",
195
- "class": "ui-label ui-field__label",
196
- "text": "Full Name",
197
- "attrs": {
198
- "for": "resp-name"
199
- }
200
- },
201
- {
202
- "tag": "div",
203
- "class": "ui-field__control",
204
- "children": [
205
- {
206
- "tag": "input",
207
- "class": "ui-input",
208
- "attrs": {
209
- "type": "text",
210
- "id": "resp-name"
211
- }
212
- },
213
- {
214
- "tag": "span",
215
- "class": "ui-form-helper",
216
- "text": "Stacks vertically in narrow containers, horizontal at >= 30rem"
217
- }
218
- ]
219
- }
220
- ]
221
- }
222
- ]
223
- }
224
- ],
225
- "code": "<div class=\"ui-container-inline\">\n <div class=\"ui-field ui-field--responsive\">\n <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n <div class=\"ui-field__control\">\n <input type=\"text\" id=\"name\" class=\"ui-input\">\n </div>\n </div>\n</div>"
226
- }
227
- ]
228
- },
229
- {
230
- "title": "Required Field",
231
- "examples": [
232
- {
233
- "items": [
234
- {
235
- "tag": "div",
236
- "class": "ui-field",
237
- "children": [
238
- {
239
- "tag": "label",
240
- "class": "ui-label ui-label--required",
241
- "text": "Required Field",
242
- "attrs": {
243
- "for": "req"
244
- }
245
- },
246
- {
247
- "tag": "div",
248
- "class": "ui-field__control",
249
- "children": [
250
- {
251
- "tag": "input",
252
- "class": "ui-input",
253
- "attrs": {
254
- "type": "text",
255
- "id": "req",
256
- "required": ""
257
- }
258
- }
259
- ]
260
- }
261
- ]
262
- }
263
- ],
264
- "code": "<div class=\"ui-field\">\n <label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label>\n <div class=\"ui-field__control\">\n <input type=\"text\" id=\"req\" class=\"ui-input\" required>\n </div>\n</div>"
265
- }
266
- ]
267
- }
268
- ],
269
- "customization": [
270
- {
271
- "token": "--ui-field-gap",
272
- "default": "0",
273
- "description": "Gap between field elements"
274
- }
275
- ]
276
- }