@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/layout/sidebar-nav/sidebar-nav.docs.json DELETED
@@ -1,833 +0,0 @@
1
- {
2
- "id": "sidebar-nav",
3
- "type": "primitive",
4
- "title": "Sidebar Nav",
5
- "description": "Navigation component for sidebars with support for groups, nested items, icons, and badges.",
6
- "api": "./sidebar-nav.api.json",
7
- "customization": [
8
- {
9
- "token": "--ui-sidebar-nav-width",
10
- "default": "calc(var(--ui-unit) * 30)",
11
- "description": "Default sidebar width"
12
- },
13
- {
14
- "token": "--ui-sidebar-nav-width-collapsed",
15
- "default": "var(--ui-row-3)",
16
- "description": "Width in collapsed mode"
17
- },
18
- {
19
- "token": "--ui-sidebar-nav-bg",
20
- "default": "var(--ui-color-bg-subtle)",
21
- "description": "Background color"
22
- },
23
- {
24
- "token": "--ui-sidebar-nav-item-height",
25
- "default": "var(--ui-row-2)",
26
- "description": "Nav item height"
27
- },
28
- {
29
- "token": "--ui-sidebar-nav-item-hover-bg",
30
- "default": "var(--ui-color-bg-muted)",
31
- "description": "Item hover background"
32
- },
33
- {
34
- "token": "--ui-sidebar-nav-item-active-bg",
35
- "default": "var(--ui-color-primary-subtle)",
36
- "description": "Active item background"
37
- },
38
- {
39
- "token": "--ui-sidebar-nav-item-active-color",
40
- "default": "var(--ui-color-primary)",
41
- "description": "Active item text color"
42
- }
43
- ],
44
- "sections": [
45
- {
46
- "title": "Basic",
47
- "description": "Simple navigation with grouped items.",
48
- "examples": [
49
- {
50
- "items": [
51
- {
52
- "tag": "nav",
53
- "class": "ui-sidebar-nav",
54
- "attrs": { "aria-label": "Main navigation", "style": "block-size: 400px;" },
55
- "children": [
56
- {
57
- "tag": "div",
58
- "class": "ui-sidebar-nav__header",
59
- "children": [{ "tag": "strong", "text": "App Name" }]
60
- },
61
- {
62
- "tag": "div",
63
- "class": "ui-sidebar-nav__content",
64
- "children": [
65
- {
66
- "tag": "div",
67
- "class": "ui-sidebar-nav__group",
68
- "children": [
69
- { "tag": "span", "class": "ui-sidebar-nav__group-label", "text": "Main" },
70
- {
71
- "tag": "ul",
72
- "class": "ui-sidebar-nav__group-items",
73
- "children": [
74
- {
75
- "tag": "li",
76
- "children": [
77
- {
78
- "tag": "a",
79
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
80
- "attrs": { "href": "#", "aria-current": "page" },
81
- "children": [
82
- {
83
- "tag": "span",
84
- "class": "ui-sidebar-nav__label",
85
- "text": "Dashboard"
86
- }
87
- ]
88
- }
89
- ]
90
- },
91
- {
92
- "tag": "li",
93
- "children": [
94
- {
95
- "tag": "a",
96
- "class": "ui-sidebar-nav__item",
97
- "attrs": { "href": "#" },
98
- "children": [
99
- {
100
- "tag": "span",
101
- "class": "ui-sidebar-nav__label",
102
- "text": "Projects"
103
- }
104
- ]
105
- }
106
- ]
107
- },
108
- {
109
- "tag": "li",
110
- "children": [
111
- {
112
- "tag": "a",
113
- "class": "ui-sidebar-nav__item",
114
- "attrs": { "href": "#" },
115
- "children": [
116
- {
117
- "tag": "span",
118
- "class": "ui-sidebar-nav__label",
119
- "text": "Tasks"
120
- }
121
- ]
122
- }
123
- ]
124
- }
125
- ]
126
- }
127
- ]
128
- },
129
- {
130
- "tag": "div",
131
- "class": "ui-sidebar-nav__group",
132
- "children": [
133
- {
134
- "tag": "span",
135
- "class": "ui-sidebar-nav__group-label",
136
- "text": "Settings"
137
- },
138
- {
139
- "tag": "ul",
140
- "class": "ui-sidebar-nav__group-items",
141
- "children": [
142
- {
143
- "tag": "li",
144
- "children": [
145
- {
146
- "tag": "a",
147
- "class": "ui-sidebar-nav__item",
148
- "attrs": { "href": "#" },
149
- "children": [
150
- {
151
- "tag": "span",
152
- "class": "ui-sidebar-nav__label",
153
- "text": "Profile"
154
- }
155
- ]
156
- }
157
- ]
158
- },
159
- {
160
- "tag": "li",
161
- "children": [
162
- {
163
- "tag": "a",
164
- "class": "ui-sidebar-nav__item",
165
- "attrs": { "href": "#" },
166
- "children": [
167
- {
168
- "tag": "span",
169
- "class": "ui-sidebar-nav__label",
170
- "text": "Preferences"
171
- }
172
- ]
173
- }
174
- ]
175
- }
176
- ]
177
- }
178
- ]
179
- }
180
- ]
181
- },
182
- {
183
- "tag": "div",
184
- "class": "ui-sidebar-nav__footer",
185
- "children": [
186
- {
187
- "tag": "a",
188
- "class": "ui-sidebar-nav__item",
189
- "attrs": { "href": "#" },
190
- "children": [
191
- { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Logout" }
192
- ]
193
- }
194
- ]
195
- }
196
- ]
197
- }
198
- ]
199
- }
200
- ]
201
- },
202
- {
203
- "title": "With Icons",
204
- "description": "Navigation items with icons for visual clarity.",
205
- "examples": [
206
- {
207
- "items": [
208
- {
209
- "tag": "nav",
210
- "class": "ui-sidebar-nav",
211
- "attrs": { "aria-label": "Navigation", "style": "block-size: 300px;" },
212
- "children": [
213
- {
214
- "tag": "div",
215
- "class": "ui-sidebar-nav__content",
216
- "children": [
217
- {
218
- "tag": "ul",
219
- "class": "ui-sidebar-nav__group-items",
220
- "children": [
221
- {
222
- "tag": "li",
223
- "children": [
224
- {
225
- "tag": "a",
226
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
227
- "attrs": { "href": "#", "aria-current": "page" },
228
- "children": [
229
- {
230
- "tag": "span",
231
- "class": "ui-sidebar-nav__icon",
232
- "children": [
233
- {
234
- "tag": "svg",
235
- "attrs": {
236
- "width": "16",
237
- "height": "16",
238
- "viewBox": "0 0 24 24",
239
- "fill": "none",
240
- "stroke": "currentColor",
241
- "stroke-width": "2"
242
- },
243
- "children": [
244
- {
245
- "tag": "path",
246
- "attrs": {
247
- "d": "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
248
- }
249
- }
250
- ]
251
- }
252
- ]
253
- },
254
- { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Home" }
255
- ]
256
- }
257
- ]
258
- },
259
- {
260
- "tag": "li",
261
- "children": [
262
- {
263
- "tag": "a",
264
- "class": "ui-sidebar-nav__item",
265
- "attrs": { "href": "#" },
266
- "children": [
267
- {
268
- "tag": "span",
269
- "class": "ui-sidebar-nav__icon",
270
- "children": [
271
- {
272
- "tag": "svg",
273
- "attrs": {
274
- "width": "16",
275
- "height": "16",
276
- "viewBox": "0 0 24 24",
277
- "fill": "none",
278
- "stroke": "currentColor",
279
- "stroke-width": "2"
280
- },
281
- "children": [
282
- {
283
- "tag": "path",
284
- "attrs": {
285
- "d": "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
286
- }
287
- },
288
- {
289
- "tag": "circle",
290
- "attrs": { "cx": "9", "cy": "7", "r": "4" }
291
- }
292
- ]
293
- }
294
- ]
295
- },
296
- { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Users" }
297
- ]
298
- }
299
- ]
300
- },
301
- {
302
- "tag": "li",
303
- "children": [
304
- {
305
- "tag": "a",
306
- "class": "ui-sidebar-nav__item",
307
- "attrs": { "href": "#" },
308
- "children": [
309
- {
310
- "tag": "span",
311
- "class": "ui-sidebar-nav__icon",
312
- "children": [
313
- {
314
- "tag": "svg",
315
- "attrs": {
316
- "width": "16",
317
- "height": "16",
318
- "viewBox": "0 0 24 24",
319
- "fill": "none",
320
- "stroke": "currentColor",
321
- "stroke-width": "2"
322
- },
323
- "children": [
324
- {
325
- "tag": "circle",
326
- "attrs": { "cx": "12", "cy": "12", "r": "3" }
327
- },
328
- {
329
- "tag": "path",
330
- "attrs": {
331
- "d": "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
332
- }
333
- }
334
- ]
335
- }
336
- ]
337
- },
338
- {
339
- "tag": "span",
340
- "class": "ui-sidebar-nav__label",
341
- "text": "Settings"
342
- }
343
- ]
344
- }
345
- ]
346
- }
347
- ]
348
- }
349
- ]
350
- }
351
- ]
352
- }
353
- ]
354
- }
355
- ]
356
- },
357
- {
358
- "title": "With Badges",
359
- "description": "Navigation items with badges for counts or status indicators.",
360
- "examples": [
361
- {
362
- "items": [
363
- {
364
- "tag": "nav",
365
- "class": "ui-sidebar-nav",
366
- "attrs": { "aria-label": "Navigation", "style": "block-size: 200px;" },
367
- "children": [
368
- {
369
- "tag": "div",
370
- "class": "ui-sidebar-nav__content",
371
- "children": [
372
- {
373
- "tag": "ul",
374
- "class": "ui-sidebar-nav__group-items",
375
- "children": [
376
- {
377
- "tag": "li",
378
- "children": [
379
- {
380
- "tag": "a",
381
- "class": "ui-sidebar-nav__item",
382
- "attrs": { "href": "#" },
383
- "children": [
384
- {
385
- "tag": "span",
386
- "class": "ui-sidebar-nav__label",
387
- "text": "Inbox"
388
- },
389
- {
390
- "tag": "span",
391
- "class": "ui-sidebar-nav__badge",
392
- "children": [
393
- {
394
- "tag": "span",
395
- "class": "ui-badge ui-badge--primary",
396
- "text": "12"
397
- }
398
- ]
399
- }
400
- ]
401
- }
402
- ]
403
- },
404
- {
405
- "tag": "li",
406
- "children": [
407
- {
408
- "tag": "a",
409
- "class": "ui-sidebar-nav__item",
410
- "attrs": { "href": "#" },
411
- "children": [
412
- {
413
- "tag": "span",
414
- "class": "ui-sidebar-nav__label",
415
- "text": "Notifications"
416
- },
417
- {
418
- "tag": "span",
419
- "class": "ui-sidebar-nav__badge",
420
- "children": [
421
- {
422
- "tag": "span",
423
- "class": "ui-badge ui-badge--danger",
424
- "text": "3"
425
- }
426
- ]
427
- }
428
- ]
429
- }
430
- ]
431
- },
432
- {
433
- "tag": "li",
434
- "children": [
435
- {
436
- "tag": "a",
437
- "class": "ui-sidebar-nav__item",
438
- "attrs": { "href": "#" },
439
- "children": [
440
- {
441
- "tag": "span",
442
- "class": "ui-sidebar-nav__label",
443
- "text": "Updates"
444
- },
445
- {
446
- "tag": "span",
447
- "class": "ui-sidebar-nav__badge",
448
- "children": [
449
- { "tag": "span", "class": "ui-status ui-status--success" }
450
- ]
451
- }
452
- ]
453
- }
454
- ]
455
- }
456
- ]
457
- }
458
- ]
459
- }
460
- ]
461
- }
462
- ]
463
- }
464
- ]
465
- },
466
- {
467
- "title": "Nested Items",
468
- "description": "Navigation with nested/indented items for sub-sections.",
469
- "examples": [
470
- {
471
- "items": [
472
- {
473
- "tag": "nav",
474
- "class": "ui-sidebar-nav",
475
- "attrs": { "aria-label": "Navigation", "style": "block-size: 280px;" },
476
- "children": [
477
- {
478
- "tag": "div",
479
- "class": "ui-sidebar-nav__content",
480
- "children": [
481
- {
482
- "tag": "div",
483
- "class": "ui-sidebar-nav__group",
484
- "children": [
485
- {
486
- "tag": "span",
487
- "class": "ui-sidebar-nav__group-label",
488
- "text": "Components"
489
- },
490
- {
491
- "tag": "ul",
492
- "class": "ui-sidebar-nav__group-items",
493
- "children": [
494
- {
495
- "tag": "li",
496
- "children": [
497
- {
498
- "tag": "div",
499
- "class": "ui-sidebar-nav__subgroup",
500
- "children": [
501
- {
502
- "tag": "span",
503
- "class": "ui-sidebar-nav__subgroup-label",
504
- "text": "Actions"
505
- }
506
- ]
507
- }
508
- ]
509
- },
510
- {
511
- "tag": "li",
512
- "children": [
513
- {
514
- "tag": "a",
515
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
516
- "attrs": { "href": "#" },
517
- "children": [
518
- {
519
- "tag": "span",
520
- "class": "ui-sidebar-nav__label",
521
- "text": "Button"
522
- }
523
- ]
524
- }
525
- ]
526
- },
527
- {
528
- "tag": "li",
529
- "children": [
530
- {
531
- "tag": "a",
532
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested ui-sidebar-nav__item--active",
533
- "attrs": { "href": "#", "aria-current": "page" },
534
- "children": [
535
- {
536
- "tag": "span",
537
- "class": "ui-sidebar-nav__label",
538
- "text": "Button Group"
539
- }
540
- ]
541
- }
542
- ]
543
- },
544
- {
545
- "tag": "li",
546
- "children": [
547
- {
548
- "tag": "span",
549
- "class": "ui-sidebar-nav__subgroup-label",
550
- "text": "Forms"
551
- }
552
- ]
553
- },
554
- {
555
- "tag": "li",
556
- "children": [
557
- {
558
- "tag": "a",
559
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
560
- "attrs": { "href": "#" },
561
- "children": [
562
- {
563
- "tag": "span",
564
- "class": "ui-sidebar-nav__label",
565
- "text": "Input"
566
- }
567
- ]
568
- }
569
- ]
570
- },
571
- {
572
- "tag": "li",
573
- "children": [
574
- {
575
- "tag": "a",
576
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--nested",
577
- "attrs": { "href": "#" },
578
- "children": [
579
- {
580
- "tag": "span",
581
- "class": "ui-sidebar-nav__label",
582
- "text": "Select"
583
- }
584
- ]
585
- }
586
- ]
587
- }
588
- ]
589
- }
590
- ]
591
- }
592
- ]
593
- }
594
- ]
595
- }
596
- ]
597
- }
598
- ]
599
- },
600
- {
601
- "title": "Collapsed",
602
- "description": "Icon-only mode for compact sidebars.",
603
- "examples": [
604
- {
605
- "items": [
606
- {
607
- "tag": "nav",
608
- "class": "ui-sidebar-nav ui-sidebar-nav--collapsed",
609
- "attrs": { "aria-label": "Navigation", "style": "block-size: 200px;" },
610
- "children": [
611
- {
612
- "tag": "div",
613
- "class": "ui-sidebar-nav__content",
614
- "children": [
615
- {
616
- "tag": "ul",
617
- "class": "ui-sidebar-nav__group-items",
618
- "children": [
619
- {
620
- "tag": "li",
621
- "children": [
622
- {
623
- "tag": "a",
624
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--active",
625
- "attrs": {
626
- "href": "#",
627
- "aria-current": "page",
628
- "aria-label": "Home"
629
- },
630
- "children": [
631
- {
632
- "tag": "span",
633
- "class": "ui-sidebar-nav__icon",
634
- "children": [
635
- {
636
- "tag": "svg",
637
- "attrs": {
638
- "width": "16",
639
- "height": "16",
640
- "viewBox": "0 0 24 24",
641
- "fill": "none",
642
- "stroke": "currentColor",
643
- "stroke-width": "2"
644
- },
645
- "children": [
646
- {
647
- "tag": "path",
648
- "attrs": {
649
- "d": "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
650
- }
651
- }
652
- ]
653
- }
654
- ]
655
- },
656
- { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Home" }
657
- ]
658
- }
659
- ]
660
- },
661
- {
662
- "tag": "li",
663
- "children": [
664
- {
665
- "tag": "a",
666
- "class": "ui-sidebar-nav__item",
667
- "attrs": { "href": "#", "aria-label": "Users" },
668
- "children": [
669
- {
670
- "tag": "span",
671
- "class": "ui-sidebar-nav__icon",
672
- "children": [
673
- {
674
- "tag": "svg",
675
- "attrs": {
676
- "width": "16",
677
- "height": "16",
678
- "viewBox": "0 0 24 24",
679
- "fill": "none",
680
- "stroke": "currentColor",
681
- "stroke-width": "2"
682
- },
683
- "children": [
684
- {
685
- "tag": "path",
686
- "attrs": {
687
- "d": "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
688
- }
689
- },
690
- {
691
- "tag": "circle",
692
- "attrs": { "cx": "9", "cy": "7", "r": "4" }
693
- }
694
- ]
695
- }
696
- ]
697
- },
698
- { "tag": "span", "class": "ui-sidebar-nav__label", "text": "Users" }
699
- ]
700
- }
701
- ]
702
- },
703
- {
704
- "tag": "li",
705
- "children": [
706
- {
707
- "tag": "a",
708
- "class": "ui-sidebar-nav__item",
709
- "attrs": { "href": "#", "aria-label": "Settings" },
710
- "children": [
711
- {
712
- "tag": "span",
713
- "class": "ui-sidebar-nav__icon",
714
- "children": [
715
- {
716
- "tag": "svg",
717
- "attrs": {
718
- "width": "16",
719
- "height": "16",
720
- "viewBox": "0 0 24 24",
721
- "fill": "none",
722
- "stroke": "currentColor",
723
- "stroke-width": "2"
724
- },
725
- "children": [
726
- {
727
- "tag": "circle",
728
- "attrs": { "cx": "12", "cy": "12", "r": "3" }
729
- }
730
- ]
731
- }
732
- ]
733
- },
734
- {
735
- "tag": "span",
736
- "class": "ui-sidebar-nav__label",
737
- "text": "Settings"
738
- }
739
- ]
740
- }
741
- ]
742
- }
743
- ]
744
- }
745
- ]
746
- }
747
- ]
748
- }
749
- ]
750
- }
751
- ]
752
- },
753
- {
754
- "title": "Disabled Items",
755
- "description": "Non-interactive navigation items.",
756
- "examples": [
757
- {
758
- "items": [
759
- {
760
- "tag": "nav",
761
- "class": "ui-sidebar-nav",
762
- "attrs": { "aria-label": "Navigation", "style": "block-size: 180px;" },
763
- "children": [
764
- {
765
- "tag": "div",
766
- "class": "ui-sidebar-nav__content",
767
- "children": [
768
- {
769
- "tag": "ul",
770
- "class": "ui-sidebar-nav__group-items",
771
- "children": [
772
- {
773
- "tag": "li",
774
- "children": [
775
- {
776
- "tag": "a",
777
- "class": "ui-sidebar-nav__item",
778
- "attrs": { "href": "#" },
779
- "children": [
780
- {
781
- "tag": "span",
782
- "class": "ui-sidebar-nav__label",
783
- "text": "Active Link"
784
- }
785
- ]
786
- }
787
- ]
788
- },
789
- {
790
- "tag": "li",
791
- "children": [
792
- {
793
- "tag": "span",
794
- "class": "ui-sidebar-nav__item ui-sidebar-nav__item--disabled",
795
- "children": [
796
- {
797
- "tag": "span",
798
- "class": "ui-sidebar-nav__label",
799
- "text": "Disabled Link"
800
- }
801
- ]
802
- }
803
- ]
804
- },
805
- {
806
- "tag": "li",
807
- "children": [
808
- {
809
- "tag": "a",
810
- "class": "ui-sidebar-nav__item",
811
- "attrs": { "href": "#" },
812
- "children": [
813
- {
814
- "tag": "span",
815
- "class": "ui-sidebar-nav__label",
816
- "text": "Another Link"
817
- }
818
- ]
819
- }
820
- ]
821
- }
822
- ]
823
- }
824
- ]
825
- }
826
- ]
827
- }
828
- ]
829
- }
830
- ]
831
- }
832
- ]
833
- }