@teseor/css 1.14.3 → 1.15.0

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 (295) hide show
  1. package/package.json +1 -1
  2. package/src/base/root.docs.html +20 -0
  3. package/src/base/typography/typography.docs.html +161 -0
  4. package/src/components/actions/button/button.docs.html +76 -0
  5. package/src/components/actions/button/button.visual.spec.ts +3 -3
  6. package/src/components/actions/button-group/button-group.docs.html +47 -0
  7. package/src/components/actions/button-group/button-group.visual.spec.ts +3 -3
  8. package/src/components/actions/close-button/close-button.docs.html +77 -0
  9. package/src/components/actions/close-button/close-button.visual.spec.ts +3 -3
  10. package/src/components/content/divider/divider.docs.html +27 -0
  11. package/src/components/content/divider/divider.visual.spec.ts +3 -3
  12. package/src/components/content/scroll-area/scroll-area-visual.png +0 -0
  13. package/src/components/content/scroll-area/scroll-area.docs.html +130 -0
  14. package/src/components/content/scroll-area/scroll-area.visual.spec.ts +3 -3
  15. package/src/components/content/spacer/spacer.docs.html +23 -0
  16. package/src/components/content/spacer/spacer.visual.spec.ts +3 -3
  17. package/src/components/data-display/avatar/avatar.docs.html +67 -0
  18. package/src/components/data-display/avatar/avatar.visual.spec.ts +3 -3
  19. package/src/components/data-display/badge/badge.docs.html +39 -0
  20. package/src/components/data-display/badge/badge.visual.spec.ts +3 -3
  21. package/src/components/data-display/card/card-visual.png +0 -0
  22. package/src/components/data-display/card/card.docs.html +36 -0
  23. package/src/components/data-display/card/card.visual.spec.ts +3 -3
  24. package/src/components/data-display/data-list/data-list-visual.png +0 -0
  25. package/src/components/data-display/data-list/data-list.docs.html +97 -0
  26. package/src/components/data-display/data-list/data-list.visual.spec.ts +3 -3
  27. package/src/components/data-display/icon/icon.docs.html +72 -0
  28. package/src/components/data-display/icon/icon.visual.spec.ts +3 -3
  29. package/src/components/data-display/image/image-visual.png +0 -0
  30. package/src/components/data-display/image/image.docs.html +67 -0
  31. package/src/components/data-display/image/image.visual.spec.ts +3 -3
  32. package/src/components/data-display/stat/stat.docs.html +35 -0
  33. package/src/components/data-display/stat/stat.visual.spec.ts +3 -3
  34. package/src/components/data-display/status/status.docs.html +67 -0
  35. package/src/components/data-display/status/status.visual.spec.ts +3 -3
  36. package/src/components/data-display/table/table.docs.html +73 -0
  37. package/src/components/data-display/table/table.visual.spec.ts +3 -3
  38. package/src/components/data-display/tag/tag.docs.html +42 -0
  39. package/src/components/data-display/tag/tag.visual.spec.ts +3 -3
  40. package/src/components/disclosure/accordion/accordion.docs.html +83 -0
  41. package/src/components/disclosure/accordion/accordion.visual.spec.ts +3 -3
  42. package/src/components/disclosure/disclosure/disclosure.docs.html +51 -0
  43. package/src/components/disclosure/disclosure/disclosure.visual.spec.ts +3 -3
  44. package/src/components/feedback/alert/alert.docs.html +90 -0
  45. package/src/components/feedback/alert/alert.visual.spec.ts +3 -3
  46. package/src/components/feedback/progress/progress.docs.html +65 -0
  47. package/src/components/feedback/progress/progress.visual.spec.ts +3 -3
  48. package/src/components/feedback/progress-circle/progress-circle.docs.html +65 -0
  49. package/src/components/feedback/progress-circle/progress-circle.visual.spec.ts +3 -3
  50. package/src/components/feedback/skeleton/skeleton.docs.html +40 -0
  51. package/src/components/feedback/skeleton/skeleton.visual.spec.ts +3 -3
  52. package/src/components/feedback/spinner/spinner.docs.html +28 -0
  53. package/src/components/feedback/spinner/spinner.visual.spec.ts +3 -3
  54. package/src/components/feedback/toast/toast-visual.png +0 -0
  55. package/src/components/feedback/toast/toast.docs.html +109 -0
  56. package/src/components/feedback/toast/toast.visual.spec.ts +3 -3
  57. package/src/components/forms/checkbox/checkbox.docs.html +33 -0
  58. package/src/components/forms/checkbox/checkbox.visual.spec.ts +3 -3
  59. package/src/components/forms/checkbox-group/checkbox-group.docs.html +104 -0
  60. package/src/components/forms/checkbox-group/checkbox-group.visual.spec.ts +3 -3
  61. package/src/components/forms/field/field.docs.html +63 -0
  62. package/src/components/forms/field/field.visual.spec.ts +3 -3
  63. package/src/components/forms/fieldset/fieldset.docs.html +122 -0
  64. package/src/components/forms/fieldset/fieldset.visual.spec.ts +3 -3
  65. package/src/components/forms/form/form.docs.html +132 -0
  66. package/src/components/forms/form/form.visual.spec.ts +3 -3
  67. package/src/components/forms/form-error/form-error.docs.html +18 -0
  68. package/src/components/forms/form-error/form-error.visual.spec.ts +3 -3
  69. package/src/components/forms/form-helper/form-helper.docs.html +42 -0
  70. package/src/components/forms/form-helper/form-helper.visual.spec.ts +3 -3
  71. package/src/components/forms/input/input-visual.png +0 -0
  72. package/src/components/forms/input/input.docs.html +69 -0
  73. package/src/components/forms/input/input.visual.spec.ts +3 -3
  74. package/src/components/forms/label/label-visual.png +0 -0
  75. package/src/components/forms/label/label.docs.html +29 -0
  76. package/src/components/forms/label/label.visual.spec.ts +3 -3
  77. package/src/components/forms/number-input/number-input-visual.png +0 -0
  78. package/src/components/forms/number-input/number-input.docs.html +100 -0
  79. package/src/components/forms/number-input/number-input.visual.spec.ts +3 -3
  80. package/src/components/forms/password-input/password-input-visual.png +0 -0
  81. package/src/components/forms/password-input/password-input.docs.html +88 -0
  82. package/src/components/forms/password-input/password-input.visual.spec.ts +3 -3
  83. package/src/components/forms/radio/radio.docs.html +52 -0
  84. package/src/components/forms/radio/radio.visual.spec.ts +3 -3
  85. package/src/components/forms/radio-group/radio-group.docs.html +100 -0
  86. package/src/components/forms/radio-group/radio-group.visual.spec.ts +3 -3
  87. package/src/components/forms/search-input/search-input-visual.png +0 -0
  88. package/src/components/forms/search-input/search-input.docs.html +87 -0
  89. package/src/components/forms/search-input/search-input.visual.spec.ts +3 -3
  90. package/src/components/forms/select/select-visual.png +0 -0
  91. package/src/components/forms/select/select.docs.html +70 -0
  92. package/src/components/forms/select/select.visual.spec.ts +3 -3
  93. package/src/components/forms/slider/slider-visual.png +0 -0
  94. package/src/components/forms/slider/slider.docs.html +25 -0
  95. package/src/components/forms/slider/slider.visual.spec.ts +3 -3
  96. package/src/components/forms/textarea/textarea-visual.png +0 -0
  97. package/src/components/forms/textarea/textarea.docs.html +39 -0
  98. package/src/components/forms/textarea/textarea.visual.spec.ts +3 -3
  99. package/src/components/forms/toggle/toggle.docs.html +64 -0
  100. package/src/components/forms/toggle/toggle.visual.spec.ts +3 -3
  101. package/src/components/navigation/breadcrumb/breadcrumb.docs.html +60 -0
  102. package/src/components/navigation/breadcrumb/breadcrumb.visual.spec.ts +3 -3
  103. package/src/components/navigation/dropdown-menu/dropdown-menu-visual.png +0 -0
  104. package/src/components/navigation/dropdown-menu/dropdown-menu.docs.html +106 -0
  105. package/src/components/navigation/dropdown-menu/dropdown-menu.visual.spec.ts +3 -3
  106. package/src/components/navigation/menu/menu.docs.html +122 -0
  107. package/src/components/navigation/menu/menu.visual.spec.ts +3 -3
  108. package/src/components/navigation/nav/nav.docs.html +74 -0
  109. package/src/components/navigation/nav/nav.visual.spec.ts +3 -3
  110. package/src/components/navigation/pagination/pagination-visual.png +0 -0
  111. package/src/components/navigation/pagination/pagination.docs.html +116 -0
  112. package/src/components/navigation/pagination/pagination.visual.spec.ts +3 -3
  113. package/src/components/navigation/tabs/tabs.docs.html +66 -0
  114. package/src/components/navigation/tabs/tabs.visual.spec.ts +3 -3
  115. package/src/components/overlays/dialog/dialog.docs.html +61 -0
  116. package/src/components/overlays/dialog/dialog.visual.spec.ts +3 -3
  117. package/src/components/overlays/drawer/drawer-visual.png +0 -0
  118. package/src/components/overlays/drawer/drawer.docs.html +90 -0
  119. package/src/components/overlays/drawer/drawer.visual.spec.ts +3 -3
  120. package/src/components/overlays/modal/modal.docs.html +69 -0
  121. package/src/components/overlays/modal/modal.visual.spec.ts +3 -3
  122. package/src/components/overlays/overlay/overlay.docs.html +30 -0
  123. package/src/components/overlays/overlay/overlay.visual.spec.ts +3 -3
  124. package/src/components/overlays/popover/popover.docs.html +41 -0
  125. package/src/components/overlays/popover/popover.visual.spec.ts +3 -3
  126. package/src/components/overlays/tooltip/tooltip.docs.html +33 -0
  127. package/src/components/overlays/tooltip/tooltip.visual.spec.ts +3 -3
  128. package/src/components/typography/blockquote/blockquote.docs.html +24 -0
  129. package/src/components/typography/blockquote/blockquote.visual.spec.ts +3 -3
  130. package/src/components/typography/code/code-visual.png +0 -0
  131. package/src/components/typography/code/code.docs.html +23 -0
  132. package/src/components/typography/code/code.visual.spec.ts +3 -3
  133. package/src/components/typography/code-block/code-block-visual.png +0 -0
  134. package/src/components/typography/code-block/code-block.docs.html +87 -0
  135. package/src/components/typography/code-block/code-block.visual.spec.ts +3 -3
  136. package/src/components/typography/heading/heading-visual.png +0 -0
  137. package/src/components/typography/heading/heading.docs.html +26 -0
  138. package/src/components/typography/heading/heading.visual.spec.ts +3 -3
  139. package/src/components/typography/kbd/kbd.docs.html +16 -0
  140. package/src/components/typography/kbd/kbd.visual.spec.ts +3 -3
  141. package/src/components/typography/link/link.docs.html +33 -0
  142. package/src/components/typography/link/link.visual.spec.ts +3 -3
  143. package/src/components/typography/list/list.docs.html +79 -0
  144. package/src/components/typography/list/list.visual.spec.ts +3 -3
  145. package/src/components/typography/mark/mark.docs.html +12 -0
  146. package/src/components/typography/mark/mark.visual.spec.ts +3 -3
  147. package/src/config/guides/accessibility.docs.html +108 -0
  148. package/src/config/guides/getting-started.docs.html +47 -0
  149. package/src/config/guides/theming.docs.html +71 -0
  150. package/src/config/tokens/colors/colors.docs.html +75 -0
  151. package/src/config/tokens/design-tokens.docs.html +116 -0
  152. package/src/config/tokens/grid/grid.docs.html +12 -0
  153. package/src/config/tokens/spacing/spacing.docs.html +33 -0
  154. package/src/debug/debug.docs.html +29 -0
  155. package/src/layout/app-shell/app-shell-visual.png +0 -0
  156. package/src/layout/app-shell/app-shell.docs.html +102 -0
  157. package/src/layout/app-shell/app-shell.visual.spec.ts +3 -3
  158. package/src/layout/aspect-ratio/aspect-ratio.docs.html +41 -0
  159. package/src/layout/aspect-ratio/aspect-ratio.visual.spec.ts +3 -3
  160. package/src/layout/box/box-visual.png +0 -0
  161. package/src/layout/box/box.docs.html +27 -0
  162. package/src/layout/box/box.visual.spec.ts +3 -3
  163. package/src/layout/center/center.docs.html +26 -0
  164. package/src/layout/center/center.visual.spec.ts +3 -3
  165. package/src/layout/column/column.docs.html +32 -0
  166. package/src/layout/column/column.visual.spec.ts +3 -3
  167. package/src/layout/container/container.docs.html +37 -0
  168. package/src/layout/content/content-visual.png +0 -0
  169. package/src/layout/content/content.docs.html +38 -0
  170. package/src/layout/content/content.visual.spec.ts +7 -3
  171. package/src/layout/footer/footer-visual.png +0 -0
  172. package/src/layout/footer/footer.docs.html +73 -0
  173. package/src/layout/footer/footer.visual.spec.ts +7 -3
  174. package/src/layout/grid/grid.docs.html +87 -0
  175. package/src/layout/grid/grid.visual.spec.ts +3 -3
  176. package/src/layout/main/main.docs.html +31 -0
  177. package/src/layout/nav-rail/nav-rail-visual.png +0 -0
  178. package/src/layout/nav-rail/nav-rail.docs.html +42 -0
  179. package/src/layout/nav-rail/nav-rail.visual.spec.ts +7 -3
  180. package/src/layout/page-header/page-header.docs.html +52 -0
  181. package/src/layout/page-header/page-header.visual.spec.ts +7 -3
  182. package/src/layout/row/row.docs.html +47 -0
  183. package/src/layout/row/row.visual.spec.ts +3 -3
  184. package/src/layout/sidebar/sidebar-visual.png +0 -0
  185. package/src/layout/sidebar/sidebar.docs.html +30 -0
  186. package/src/layout/sidebar/sidebar.visual.spec.ts +7 -3
  187. package/src/layout/sidebar-nav/sidebar-nav.docs.html +235 -0
  188. package/src/layout/sidebar-nav/sidebar-nav.visual.spec.ts +7 -3
  189. package/src/layout/topbar/topbar-visual.png +0 -0
  190. package/src/layout/topbar/topbar.docs.html +64 -0
  191. package/src/layout/topbar/topbar.visual.spec.ts +7 -3
  192. package/src/utilities/container/container.docs.html +34 -0
  193. package/src/utilities/display/display.docs.html +30 -0
  194. package/src/utilities/scroll-animation/scroll-animation.docs.html +32 -0
  195. package/src/utilities/scroll-snap/scroll-snap.docs.html +80 -0
  196. package/src/utilities/spacing/spacing.docs.html +29 -0
  197. package/src/utilities/text/text.docs.html +66 -0
  198. package/src/utilities/view-transition/view-transition.docs.html +52 -0
  199. package/src/utilities/visually-hidden/visually-hidden.docs.html +18 -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.docs.json +0 -273
  207. package/src/components/content/spacer/spacer.docs.json +0 -102
  208. package/src/components/data-display/avatar/avatar.docs.json +0 -245
  209. package/src/components/data-display/badge/badge.docs.json +0 -114
  210. package/src/components/data-display/card/card.docs.json +0 -229
  211. package/src/components/data-display/data-list/data-list.docs.json +0 -259
  212. package/src/components/data-display/icon/icon.docs.json +0 -307
  213. package/src/components/data-display/image/image.docs.json +0 -337
  214. package/src/components/data-display/stat/stat.docs.json +0 -114
  215. package/src/components/data-display/status/status.docs.json +0 -147
  216. package/src/components/data-display/table/table.docs.json +0 -184
  217. package/src/components/data-display/tag/tag.docs.json +0 -146
  218. package/src/components/disclosure/accordion/accordion.docs.json +0 -206
  219. package/src/components/disclosure/disclosure/disclosure.docs.json +0 -154
  220. package/src/components/feedback/alert/alert.docs.json +0 -325
  221. package/src/components/feedback/progress/progress.docs.json +0 -315
  222. package/src/components/feedback/progress-circle/progress-circle.docs.json +0 -378
  223. package/src/components/feedback/skeleton/skeleton.docs.json +0 -142
  224. package/src/components/feedback/spinner/spinner.docs.json +0 -121
  225. package/src/components/feedback/toast/toast.docs.json +0 -418
  226. package/src/components/forms/checkbox/checkbox.docs.json +0 -166
  227. package/src/components/forms/checkbox-group/checkbox-group.docs.json +0 -339
  228. package/src/components/forms/field/field.docs.json +0 -276
  229. package/src/components/forms/fieldset/fieldset.docs.json +0 -520
  230. package/src/components/forms/form/form.docs.json +0 -482
  231. package/src/components/forms/form-error/form-error.docs.json +0 -61
  232. package/src/components/forms/form-helper/form-helper.docs.json +0 -151
  233. package/src/components/forms/input/input.docs.json +0 -306
  234. package/src/components/forms/label/label.docs.json +0 -110
  235. package/src/components/forms/number-input/number-input.docs.json +0 -311
  236. package/src/components/forms/password-input/password-input.docs.json +0 -316
  237. package/src/components/forms/radio/radio.docs.json +0 -236
  238. package/src/components/forms/radio-group/radio-group.docs.json +0 -351
  239. package/src/components/forms/search-input/search-input.docs.json +0 -293
  240. package/src/components/forms/select/select.docs.json +0 -231
  241. package/src/components/forms/slider/slider.docs.json +0 -144
  242. package/src/components/forms/textarea/textarea.docs.json +0 -229
  243. package/src/components/forms/toggle/toggle.docs.json +0 -229
  244. package/src/components/navigation/breadcrumb/breadcrumb.docs.json +0 -240
  245. package/src/components/navigation/dropdown-menu/dropdown-menu.docs.json +0 -290
  246. package/src/components/navigation/menu/menu.docs.json +0 -326
  247. package/src/components/navigation/nav/nav.docs.json +0 -304
  248. package/src/components/navigation/pagination/pagination.docs.json +0 -483
  249. package/src/components/navigation/tabs/tabs.docs.json +0 -243
  250. package/src/components/overlays/dialog/dialog.docs.json +0 -200
  251. package/src/components/overlays/drawer/drawer.docs.json +0 -307
  252. package/src/components/overlays/modal/modal.docs.json +0 -252
  253. package/src/components/overlays/overlay/overlay.docs.json +0 -138
  254. package/src/components/overlays/popover/popover.docs.json +0 -154
  255. package/src/components/overlays/tooltip/tooltip.docs.json +0 -133
  256. package/src/components/typography/blockquote/blockquote.docs.json +0 -89
  257. package/src/components/typography/code/code.docs.json +0 -104
  258. package/src/components/typography/code-block/code-block.docs.json +0 -308
  259. package/src/components/typography/heading/heading.docs.json +0 -120
  260. package/src/components/typography/kbd/kbd.docs.json +0 -61
  261. package/src/components/typography/link/link.docs.json +0 -149
  262. package/src/components/typography/list/list.docs.json +0 -296
  263. package/src/components/typography/mark/mark.docs.json +0 -60
  264. package/src/config/guides/accessibility.docs.json +0 -126
  265. package/src/config/guides/getting-started.docs.json +0 -106
  266. package/src/config/guides/theming.docs.json +0 -289
  267. package/src/config/tokens/colors/colors.docs.json +0 -316
  268. package/src/config/tokens/design-tokens.docs.json +0 -239
  269. package/src/config/tokens/grid/grid.docs.json +0 -54
  270. package/src/config/tokens/spacing/spacing.docs.json +0 -114
  271. package/src/debug/debug.docs.json +0 -96
  272. package/src/layout/app-shell/app-shell.docs.json +0 -155
  273. package/src/layout/aspect-ratio/aspect-ratio.docs.json +0 -193
  274. package/src/layout/box/box.docs.json +0 -93
  275. package/src/layout/center/center.docs.json +0 -63
  276. package/src/layout/column/column.docs.json +0 -157
  277. package/src/layout/container/container.docs.json +0 -85
  278. package/src/layout/content/content.docs.json +0 -82
  279. package/src/layout/footer/footer.docs.json +0 -119
  280. package/src/layout/grid/grid.docs.json +0 -493
  281. package/src/layout/main/main.docs.json +0 -87
  282. package/src/layout/nav-rail/nav-rail.docs.json +0 -76
  283. package/src/layout/page-header/page-header.docs.json +0 -124
  284. package/src/layout/row/row.docs.json +0 -237
  285. package/src/layout/sidebar/sidebar.docs.json +0 -63
  286. package/src/layout/sidebar-nav/sidebar-nav.docs.json +0 -833
  287. package/src/layout/topbar/topbar.docs.json +0 -110
  288. package/src/utilities/container/container.docs.json +0 -121
  289. package/src/utilities/display/display.docs.json +0 -83
  290. package/src/utilities/scroll-animation/scroll-animation.docs.json +0 -100
  291. package/src/utilities/scroll-snap/scroll-snap.docs.json +0 -333
  292. package/src/utilities/spacing/spacing.docs.json +0 -133
  293. package/src/utilities/text/text.docs.json +0 -191
  294. package/src/utilities/view-transition/view-transition.docs.json +0 -63
  295. package/src/utilities/visually-hidden/visually-hidden.docs.json +0 -44
@@ -1,240 +0,0 @@
1
- {
2
- "id": "breadcrumb",
3
- "type": "component",
4
- "title": "Breadcrumb",
5
- "description": "Navigation hierarchy showing current page location in site structure.",
6
- "api": "./breadcrumb.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "nav",
15
- "class": "ui-breadcrumb",
16
- "attrs": { "aria-label": "Breadcrumb" },
17
- "children": [
18
- {
19
- "tag": "ol",
20
- "class": "ui-breadcrumb",
21
- "children": [
22
- {
23
- "tag": "li",
24
- "class": "ui-breadcrumb__item",
25
- "children": [
26
- {
27
- "tag": "a",
28
- "class": "ui-breadcrumb__link",
29
- "attrs": { "href": "#" },
30
- "text": "Home"
31
- }
32
- ]
33
- },
34
- {
35
- "tag": "li",
36
- "class": "ui-breadcrumb__item",
37
- "children": [
38
- {
39
- "tag": "a",
40
- "class": "ui-breadcrumb__link",
41
- "attrs": { "href": "#" },
42
- "text": "Products"
43
- }
44
- ]
45
- },
46
- {
47
- "tag": "li",
48
- "class": "ui-breadcrumb__item",
49
- "children": [
50
- {
51
- "tag": "span",
52
- "class": "ui-breadcrumb__current",
53
- "attrs": { "aria-current": "page" },
54
- "text": "Shoes"
55
- }
56
- ]
57
- }
58
- ]
59
- }
60
- ]
61
- }
62
- ],
63
- "code": "<nav aria-label=\"Breadcrumb\">\n <ol class=\"ui-breadcrumb\">\n <li class=\"ui-breadcrumb__item\">\n <a href=\"#\" class=\"ui-breadcrumb__link\">Home</a>\n </li>\n <li class=\"ui-breadcrumb__item\">\n <a href=\"#\" class=\"ui-breadcrumb__link\">Products</a>\n </li>\n <li class=\"ui-breadcrumb__item\">\n <span aria-current=\"page\">Shoes</span>\n </li>\n </ol>\n</nav>"
64
- }
65
- ]
66
- },
67
- {
68
- "title": "With Icons",
69
- "examples": [
70
- {
71
- "items": [
72
- {
73
- "tag": "nav",
74
- "attrs": { "aria-label": "Breadcrumb" },
75
- "children": [
76
- {
77
- "tag": "ol",
78
- "class": "ui-breadcrumb",
79
- "children": [
80
- {
81
- "tag": "li",
82
- "class": "ui-breadcrumb__item",
83
- "children": [
84
- {
85
- "tag": "a",
86
- "class": "ui-breadcrumb__link",
87
- "attrs": { "href": "#" },
88
- "children": [
89
- {
90
- "tag": "svg",
91
- "class": "ui-icon ui-icon--sm",
92
- "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
93
- "children": [
94
- {
95
- "tag": "path",
96
- "attrs": { "d": "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }
97
- }
98
- ]
99
- }
100
- ]
101
- }
102
- ]
103
- },
104
- {
105
- "tag": "li",
106
- "class": "ui-breadcrumb__item",
107
- "children": [
108
- {
109
- "tag": "a",
110
- "class": "ui-breadcrumb__link",
111
- "attrs": { "href": "#" },
112
- "text": "Settings"
113
- }
114
- ]
115
- },
116
- {
117
- "tag": "li",
118
- "class": "ui-breadcrumb__item",
119
- "children": [
120
- {
121
- "tag": "span",
122
- "class": "ui-breadcrumb__current",
123
- "attrs": { "aria-current": "page" },
124
- "text": "Profile"
125
- }
126
- ]
127
- }
128
- ]
129
- }
130
- ]
131
- }
132
- ],
133
- "code": "<ol class=\"ui-breadcrumb\">\n <li class=\"ui-breadcrumb__item\">\n <a href=\"#\" class=\"ui-breadcrumb__link\">\n <svg class=\"ui-icon\">...</svg>\n </a>\n </li>\n ...\n</ol>"
134
- }
135
- ]
136
- },
137
- {
138
- "title": "Overflow with Ellipsis",
139
- "description": "Truncate long breadcrumbs with hidden items and an ellipsis indicator.",
140
- "examples": [
141
- {
142
- "items": [
143
- {
144
- "tag": "nav",
145
- "attrs": { "aria-label": "Breadcrumb" },
146
- "children": [
147
- {
148
- "tag": "ol",
149
- "class": "ui-breadcrumb",
150
- "children": [
151
- {
152
- "tag": "li",
153
- "class": "ui-breadcrumb__item",
154
- "children": [
155
- {
156
- "tag": "a",
157
- "class": "ui-breadcrumb__link",
158
- "attrs": { "href": "#" },
159
- "text": "Home"
160
- }
161
- ]
162
- },
163
- {
164
- "tag": "li",
165
- "class": "ui-breadcrumb__item ui-breadcrumb__item--hidden",
166
- "children": [
167
- {
168
- "tag": "a",
169
- "class": "ui-breadcrumb__link",
170
- "attrs": { "href": "#" },
171
- "text": "Category"
172
- }
173
- ]
174
- },
175
- {
176
- "tag": "li",
177
- "class": "ui-breadcrumb__item",
178
- "children": [
179
- {
180
- "tag": "span",
181
- "class": "ui-breadcrumb__ellipsis",
182
- "text": "..."
183
- }
184
- ]
185
- },
186
- {
187
- "tag": "li",
188
- "class": "ui-breadcrumb__item",
189
- "children": [
190
- {
191
- "tag": "span",
192
- "class": "ui-breadcrumb__current",
193
- "attrs": { "aria-current": "page" },
194
- "text": "Current Page"
195
- }
196
- ]
197
- }
198
- ]
199
- }
200
- ]
201
- }
202
- ],
203
- "code": "<ol class=\"ui-breadcrumb\">\n <li class=\"ui-breadcrumb__item\"><a href=\"#\">Home</a></li>\n <li class=\"ui-breadcrumb__item ui-breadcrumb__item--hidden\"><a href=\"#\">Category</a></li>\n <li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__ellipsis\">...</span></li>\n <li class=\"ui-breadcrumb__item\"><span aria-current=\"page\">Current</span></li>\n</ol>"
204
- }
205
- ]
206
- }
207
- ],
208
- "customization": [
209
- {
210
- "token": "--ui-breadcrumb-height",
211
- "default": "var(--ui-row-1)",
212
- "description": "Container height"
213
- },
214
- {
215
- "token": "--ui-breadcrumb-gap",
216
- "default": "var(--ui-unit)",
217
- "description": "Gap between items"
218
- },
219
- {
220
- "token": "--ui-breadcrumb-separator",
221
- "default": "\"/\"",
222
- "description": "Separator character"
223
- },
224
- {
225
- "token": "--ui-breadcrumb-separator-color",
226
- "default": "var(--ui-color-text-muted)",
227
- "description": "Separator color"
228
- },
229
- {
230
- "token": "--ui-breadcrumb-link-color",
231
- "default": "var(--ui-color-text-muted)",
232
- "description": "Link color"
233
- },
234
- {
235
- "token": "--ui-breadcrumb-current-color",
236
- "default": "var(--ui-color-text)",
237
- "description": "Current page color"
238
- }
239
- ]
240
- }
@@ -1,290 +0,0 @@
1
- {
2
- "id": "dropdown-menu",
3
- "type": "component",
4
- "title": "Dropdown Menu",
5
- "description": "Trigger button with floating menu panel. Reuses the menu component for consistent item styling.",
6
- "api": "./dropdown-menu.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "items": [
13
- {
14
- "tag": "div",
15
- "class": "ui-dropdown-menu ui-dropdown-menu--open",
16
- "children": [
17
- {
18
- "tag": "button",
19
- "class": "ui-dropdown-menu__trigger ui-button",
20
- "attrs": { "type": "button" },
21
- "children": [
22
- { "tag": "span", "text": "Actions" },
23
- { "tag": "span", "class": "ui-dropdown-menu__trigger-icon", "text": "\u25BE" }
24
- ]
25
- },
26
- {
27
- "tag": "div",
28
- "class": "ui-dropdown-menu__panel",
29
- "attrs": { "role": "menu" },
30
- "children": [
31
- {
32
- "tag": "div",
33
- "class": "ui-menu",
34
- "children": [
35
- {
36
- "tag": "ul",
37
- "class": "ui-menu__group",
38
- "children": [
39
- {
40
- "tag": "li",
41
- "children": [
42
- {
43
- "tag": "button",
44
- "class": "ui-menu__item",
45
- "attrs": { "role": "menuitem" },
46
- "text": "Edit"
47
- }
48
- ]
49
- },
50
- {
51
- "tag": "li",
52
- "children": [
53
- {
54
- "tag": "button",
55
- "class": "ui-menu__item",
56
- "attrs": { "role": "menuitem" },
57
- "text": "Duplicate"
58
- }
59
- ]
60
- },
61
- {
62
- "tag": "li",
63
- "children": [
64
- {
65
- "tag": "button",
66
- "class": "ui-menu__item ui-menu__item--danger",
67
- "attrs": { "role": "menuitem" },
68
- "text": "Delete"
69
- }
70
- ]
71
- }
72
- ]
73
- }
74
- ]
75
- }
76
- ]
77
- }
78
- ]
79
- }
80
- ],
81
- "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n <button class=\"ui-dropdown-menu__trigger ui-button\">Actions \u25BE</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
82
- }
83
- ]
84
- },
85
- {
86
- "title": "With Separator",
87
- "examples": [
88
- {
89
- "items": [
90
- {
91
- "tag": "div",
92
- "class": "ui-dropdown-menu ui-dropdown-menu--open",
93
- "children": [
94
- {
95
- "tag": "button",
96
- "class": "ui-dropdown-menu__trigger ui-button ui-button--secondary",
97
- "attrs": { "type": "button" },
98
- "text": "File"
99
- },
100
- {
101
- "tag": "div",
102
- "class": "ui-dropdown-menu__panel",
103
- "attrs": { "role": "menu" },
104
- "children": [
105
- {
106
- "tag": "div",
107
- "class": "ui-menu",
108
- "children": [
109
- {
110
- "tag": "ul",
111
- "class": "ui-menu__group",
112
- "children": [
113
- {
114
- "tag": "li",
115
- "children": [
116
- {
117
- "tag": "button",
118
- "class": "ui-menu__item",
119
- "attrs": { "role": "menuitem" },
120
- "text": "New"
121
- }
122
- ]
123
- },
124
- {
125
- "tag": "li",
126
- "children": [
127
- {
128
- "tag": "button",
129
- "class": "ui-menu__item",
130
- "attrs": { "role": "menuitem" },
131
- "text": "Open"
132
- }
133
- ]
134
- },
135
- {
136
- "tag": "li",
137
- "children": [
138
- {
139
- "tag": "button",
140
- "class": "ui-menu__item",
141
- "attrs": { "role": "menuitem" },
142
- "text": "Save"
143
- }
144
- ]
145
- },
146
- {
147
- "tag": "li",
148
- "children": [{ "tag": "hr", "class": "ui-menu__separator" }]
149
- },
150
- {
151
- "tag": "li",
152
- "children": [
153
- {
154
- "tag": "button",
155
- "class": "ui-menu__item ui-menu__item--danger",
156
- "attrs": { "role": "menuitem" },
157
- "text": "Close"
158
- }
159
- ]
160
- }
161
- ]
162
- }
163
- ]
164
- }
165
- ]
166
- }
167
- ]
168
- }
169
- ],
170
- "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n <button class=\"ui-dropdown-menu__trigger ui-button ui-button--secondary\">File</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">\n <ul class=\"ui-menu__group\">\n <li><button class=\"ui-menu__item\">New</button></li>\n <li><hr class=\"ui-menu__separator\"></li>\n <li><button class=\"ui-menu__item--danger\">Close</button></li>\n </ul>\n </div>\n </div>\n</div>"
171
- }
172
- ]
173
- },
174
- {
175
- "title": "Top Position",
176
- "description": "Opens panel above the trigger.",
177
- "examples": [
178
- {
179
- "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top\">\n <button class=\"ui-dropdown-menu__trigger ui-button\">Actions</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
180
- }
181
- ]
182
- },
183
- {
184
- "title": "Full Width",
185
- "description": "Panel stretches to match trigger width.",
186
- "examples": [
187
- {
188
- "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width\">\n <button class=\"ui-dropdown-menu__trigger ui-button\">Select option</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
189
- }
190
- ]
191
- },
192
- {
193
- "title": "Align End",
194
- "examples": [
195
- {
196
- "items": [
197
- {
198
- "tag": "div",
199
- "style": { "display": "flex", "justify-content": "flex-end" },
200
- "children": [
201
- {
202
- "tag": "div",
203
- "class": "ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end",
204
- "children": [
205
- {
206
- "tag": "button",
207
- "class": "ui-dropdown-menu__trigger ui-button ui-button--ghost",
208
- "attrs": { "type": "button" },
209
- "text": "\u22EE"
210
- },
211
- {
212
- "tag": "div",
213
- "class": "ui-dropdown-menu__panel",
214
- "attrs": { "role": "menu" },
215
- "children": [
216
- {
217
- "tag": "div",
218
- "class": "ui-menu",
219
- "children": [
220
- {
221
- "tag": "ul",
222
- "class": "ui-menu__group",
223
- "children": [
224
- {
225
- "tag": "li",
226
- "children": [
227
- {
228
- "tag": "button",
229
- "class": "ui-menu__item",
230
- "attrs": { "role": "menuitem" },
231
- "text": "View"
232
- }
233
- ]
234
- },
235
- {
236
- "tag": "li",
237
- "children": [
238
- {
239
- "tag": "button",
240
- "class": "ui-menu__item",
241
- "attrs": { "role": "menuitem" },
242
- "text": "Share"
243
- }
244
- ]
245
- },
246
- {
247
- "tag": "li",
248
- "children": [
249
- {
250
- "tag": "button",
251
- "class": "ui-menu__item ui-menu__item--danger",
252
- "attrs": { "role": "menuitem" },
253
- "text": "Remove"
254
- }
255
- ]
256
- }
257
- ]
258
- }
259
- ]
260
- }
261
- ]
262
- }
263
- ]
264
- }
265
- ]
266
- }
267
- ],
268
- "code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end\">\n <button class=\"ui-dropdown-menu__trigger ui-button ui-button--ghost\">\u22EE</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
269
- }
270
- ]
271
- }
272
- ],
273
- "customization": [
274
- {
275
- "token": "--ui-dropdown-menu-z",
276
- "default": "200",
277
- "description": "Z-index for floating panel"
278
- },
279
- {
280
- "token": "--ui-dropdown-menu-panel-offset",
281
- "default": "var(--ui-space-1)",
282
- "description": "Gap between trigger and panel"
283
- },
284
- {
285
- "token": "--ui-dropdown-menu-panel-min-width",
286
- "default": "auto",
287
- "description": "Minimum panel width"
288
- }
289
- ]
290
- }