@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,418 +0,0 @@
1
- {
2
- "id": "toast",
3
- "type": "component",
4
- "title": "Toast",
5
- "api": "./toast.api.json",
6
- "sections": [
7
- {
8
- "title": "Default",
9
- "examples": [
10
- {
11
- "items": [
12
- {
13
- "tag": "div",
14
- "class": "ui-toast",
15
- "children": [
16
- {
17
- "tag": "span",
18
- "class": "ui-toast__icon",
19
- "text": "i"
20
- },
21
- {
22
- "tag": "div",
23
- "class": "ui-toast__content",
24
- "children": [
25
- { "tag": "p", "class": "ui-toast__title", "text": "Notification" },
26
- {
27
- "tag": "p",
28
- "class": "ui-toast__description",
29
- "text": "Your changes have been saved."
30
- }
31
- ]
32
- },
33
- { "tag": "button", "class": "ui-toast__close", "text": "X" }
34
- ]
35
- }
36
- ]
37
- }
38
- ]
39
- },
40
- {
41
- "title": "Variants",
42
- "examples": [
43
- {
44
- "items": [
45
- {
46
- "tag": "div",
47
- "class": "ui-toast ui-toast--success",
48
- "children": [
49
- {
50
- "tag": "div",
51
- "class": "ui-toast__content",
52
- "children": [
53
- { "tag": "p", "class": "ui-toast__title", "text": "Success" },
54
- {
55
- "tag": "p",
56
- "class": "ui-toast__description",
57
- "text": "Operation completed successfully."
58
- }
59
- ]
60
- }
61
- ]
62
- }
63
- ],
64
- "layout": "column"
65
- },
66
- {
67
- "items": [
68
- {
69
- "tag": "div",
70
- "class": "ui-toast ui-toast--warning",
71
- "children": [
72
- {
73
- "tag": "div",
74
- "class": "ui-toast__content",
75
- "children": [
76
- { "tag": "p", "class": "ui-toast__title", "text": "Warning" },
77
- {
78
- "tag": "p",
79
- "class": "ui-toast__description",
80
- "text": "Please review before continuing."
81
- }
82
- ]
83
- }
84
- ]
85
- }
86
- ],
87
- "layout": "column"
88
- },
89
- {
90
- "items": [
91
- {
92
- "tag": "div",
93
- "class": "ui-toast ui-toast--danger",
94
- "children": [
95
- {
96
- "tag": "div",
97
- "class": "ui-toast__content",
98
- "children": [
99
- { "tag": "p", "class": "ui-toast__title", "text": "Error" },
100
- {
101
- "tag": "p",
102
- "class": "ui-toast__description",
103
- "text": "Something went wrong."
104
- }
105
- ]
106
- }
107
- ]
108
- }
109
- ],
110
- "layout": "column"
111
- },
112
- {
113
- "items": [
114
- {
115
- "tag": "div",
116
- "class": "ui-toast ui-toast--info",
117
- "children": [
118
- {
119
- "tag": "div",
120
- "class": "ui-toast__content",
121
- "children": [
122
- { "tag": "p", "class": "ui-toast__title", "text": "Info" },
123
- {
124
- "tag": "p",
125
- "class": "ui-toast__description",
126
- "text": "New updates available."
127
- }
128
- ]
129
- }
130
- ]
131
- }
132
- ],
133
- "layout": "column"
134
- }
135
- ]
136
- },
137
- {
138
- "title": "With Action",
139
- "examples": [
140
- {
141
- "items": [
142
- {
143
- "tag": "div",
144
- "class": "ui-toast",
145
- "children": [
146
- {
147
- "tag": "div",
148
- "class": "ui-toast__content",
149
- "children": [
150
- { "tag": "p", "class": "ui-toast__title", "text": "File deleted" },
151
- {
152
- "tag": "p",
153
- "class": "ui-toast__description",
154
- "text": "document.pdf was moved to trash."
155
- }
156
- ]
157
- },
158
- {
159
- "tag": "button",
160
- "class": "ui-toast__action ui-button ui-button--sm ui-button--secondary",
161
- "text": "Undo"
162
- },
163
- { "tag": "button", "class": "ui-toast__close", "text": "X" }
164
- ]
165
- }
166
- ]
167
- }
168
- ]
169
- },
170
- {
171
- "title": "Viewport Positions",
172
- "description": "Container positions for toast placement",
173
- "examples": [
174
- {
175
- "items": [
176
- {
177
- "tag": "div",
178
- "attrs": {
179
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
180
- },
181
- "children": [
182
- {
183
- "tag": "div",
184
- "class": "ui-toast-viewport ui-toast-viewport--top-end",
185
- "attrs": { "style": "position:absolute" },
186
- "children": [
187
- {
188
- "tag": "div",
189
- "class": "ui-toast",
190
- "children": [
191
- {
192
- "tag": "div",
193
- "class": "ui-toast__content",
194
- "children": [
195
- { "tag": "p", "class": "ui-toast__title", "text": "Top End" }
196
- ]
197
- }
198
- ]
199
- }
200
- ]
201
- }
202
- ]
203
- }
204
- ],
205
- "layout": "column"
206
- },
207
- {
208
- "items": [
209
- {
210
- "tag": "div",
211
- "attrs": {
212
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
213
- },
214
- "children": [
215
- {
216
- "tag": "div",
217
- "class": "ui-toast-viewport ui-toast-viewport--bottom-end",
218
- "attrs": { "style": "position:absolute" },
219
- "children": [
220
- {
221
- "tag": "div",
222
- "class": "ui-toast",
223
- "children": [
224
- {
225
- "tag": "div",
226
- "class": "ui-toast__content",
227
- "children": [
228
- { "tag": "p", "class": "ui-toast__title", "text": "Bottom End" }
229
- ]
230
- }
231
- ]
232
- }
233
- ]
234
- }
235
- ]
236
- }
237
- ],
238
- "layout": "column"
239
- },
240
- {
241
- "items": [
242
- {
243
- "tag": "div",
244
- "attrs": {
245
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
246
- },
247
- "children": [
248
- {
249
- "tag": "div",
250
- "class": "ui-toast-viewport ui-toast-viewport--top-start",
251
- "attrs": { "style": "position:absolute" },
252
- "children": [
253
- {
254
- "tag": "div",
255
- "class": "ui-toast",
256
- "children": [
257
- {
258
- "tag": "div",
259
- "class": "ui-toast__content",
260
- "children": [
261
- { "tag": "p", "class": "ui-toast__title", "text": "Top Start" }
262
- ]
263
- }
264
- ]
265
- }
266
- ]
267
- }
268
- ]
269
- }
270
- ],
271
- "layout": "column"
272
- },
273
- {
274
- "items": [
275
- {
276
- "tag": "div",
277
- "attrs": {
278
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
279
- },
280
- "children": [
281
- {
282
- "tag": "div",
283
- "class": "ui-toast-viewport ui-toast-viewport--top-center",
284
- "attrs": { "style": "position:absolute" },
285
- "children": [
286
- {
287
- "tag": "div",
288
- "class": "ui-toast",
289
- "children": [
290
- {
291
- "tag": "div",
292
- "class": "ui-toast__content",
293
- "children": [
294
- { "tag": "p", "class": "ui-toast__title", "text": "Top Center" }
295
- ]
296
- }
297
- ]
298
- }
299
- ]
300
- }
301
- ]
302
- }
303
- ],
304
- "layout": "column"
305
- },
306
- {
307
- "items": [
308
- {
309
- "tag": "div",
310
- "attrs": {
311
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
312
- },
313
- "children": [
314
- {
315
- "tag": "div",
316
- "class": "ui-toast-viewport ui-toast-viewport--bottom-start",
317
- "attrs": { "style": "position:absolute" },
318
- "children": [
319
- {
320
- "tag": "div",
321
- "class": "ui-toast",
322
- "children": [
323
- {
324
- "tag": "div",
325
- "class": "ui-toast__content",
326
- "children": [
327
- { "tag": "p", "class": "ui-toast__title", "text": "Bottom Start" }
328
- ]
329
- }
330
- ]
331
- }
332
- ]
333
- }
334
- ]
335
- }
336
- ],
337
- "layout": "column"
338
- },
339
- {
340
- "items": [
341
- {
342
- "tag": "div",
343
- "attrs": {
344
- "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
345
- },
346
- "children": [
347
- {
348
- "tag": "div",
349
- "class": "ui-toast-viewport ui-toast-viewport--bottom-center",
350
- "attrs": { "style": "position:absolute" },
351
- "children": [
352
- {
353
- "tag": "div",
354
- "class": "ui-toast",
355
- "children": [
356
- {
357
- "tag": "div",
358
- "class": "ui-toast__content",
359
- "children": [
360
- { "tag": "p", "class": "ui-toast__title", "text": "Bottom Center" }
361
- ]
362
- }
363
- ]
364
- }
365
- ]
366
- }
367
- ]
368
- }
369
- ],
370
- "layout": "column"
371
- }
372
- ]
373
- }
374
- ],
375
- "customization": [
376
- {
377
- "token": "--ui-toast-viewport-gap",
378
- "default": "var(--ui-unit)",
379
- "description": "Gap between toasts in viewport"
380
- },
381
- {
382
- "token": "--ui-toast-viewport-padding",
383
- "default": "calc(var(--ui-unit) * 2)",
384
- "description": "Viewport padding from edges"
385
- },
386
- {
387
- "token": "--ui-toast-viewport-max-width",
388
- "default": "420px",
389
- "description": "Maximum toast width"
390
- },
391
- {
392
- "token": "--ui-toast-padding",
393
- "default": "calc(var(--ui-unit) * 2)",
394
- "description": "Toast padding"
395
- },
396
- {
397
- "token": "--ui-toast-gap",
398
- "default": "var(--ui-unit)",
399
- "description": "Gap between toast elements"
400
- },
401
- {
402
- "token": "--ui-toast-radius",
403
- "default": "var(--ui-radius-md)",
404
- "description": "Border radius"
405
- },
406
- {
407
- "token": "--ui-toast-bg",
408
- "default": "var(--ui-color-bg)",
409
- "description": "Background color"
410
- },
411
- {
412
- "token": "--ui-toast-border-color",
413
- "default": "var(--ui-color-border)",
414
- "description": "Border color"
415
- },
416
- { "token": "--ui-toast-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" }
417
- ]
418
- }
@@ -1,166 +0,0 @@
1
- {
2
- "id": "checkbox",
3
- "type": "component",
4
- "title": "Checkbox",
5
- "description": "Native checkbox input with custom styling. Supports checked, indeterminate, and disabled states.",
6
- "api": "./checkbox.api.json",
7
- "sections": [
8
- {
9
- "title": "Default",
10
- "examples": [
11
- {
12
- "layout": "row",
13
- "items": [
14
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
15
- {
16
- "tag": "input",
17
- "class": "ui-checkbox",
18
- "attrs": { "type": "checkbox", "checked": "" }
19
- }
20
- ],
21
- "code": "<input type=\"checkbox\" class=\"ui-checkbox\">\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>"
22
- }
23
- ]
24
- },
25
- {
26
- "title": "Sizes",
27
- "examples": [
28
- {
29
- "layout": "row",
30
- "items": [
31
- {
32
- "tag": "input",
33
- "class": "ui-checkbox",
34
- "attrs": { "type": "checkbox", "checked": "" }
35
- },
36
- {
37
- "tag": "input",
38
- "class": "ui-checkbox ui-checkbox--lg",
39
- "attrs": { "type": "checkbox", "checked": "" }
40
- }
41
- ],
42
- "code": "<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--lg\" checked>"
43
- }
44
- ]
45
- },
46
- {
47
- "title": "States",
48
- "examples": [
49
- {
50
- "layout": "row",
51
- "items": [
52
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
53
- {
54
- "tag": "input",
55
- "class": "ui-checkbox",
56
- "attrs": { "type": "checkbox", "checked": "" }
57
- },
58
- {
59
- "tag": "input",
60
- "class": "ui-checkbox",
61
- "attrs": { "type": "checkbox", "disabled": "" }
62
- },
63
- {
64
- "tag": "input",
65
- "class": "ui-checkbox",
66
- "attrs": { "type": "checkbox", "checked": "", "disabled": "" }
67
- }
68
- ],
69
- "code": "<input type=\"checkbox\" class=\"ui-checkbox\">\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox\" disabled>\n<input type=\"checkbox\" class=\"ui-checkbox\" checked disabled>"
70
- }
71
- ]
72
- },
73
- {
74
- "title": "Validation States",
75
- "examples": [
76
- {
77
- "layout": "row",
78
- "items": [
79
- {
80
- "tag": "input",
81
- "class": "ui-checkbox ui-checkbox--error",
82
- "attrs": { "type": "checkbox" }
83
- },
84
- {
85
- "tag": "input",
86
- "class": "ui-checkbox ui-checkbox--error",
87
- "attrs": { "type": "checkbox", "checked": "" }
88
- },
89
- {
90
- "tag": "input",
91
- "class": "ui-checkbox ui-checkbox--success",
92
- "attrs": { "type": "checkbox" }
93
- },
94
- {
95
- "tag": "input",
96
- "class": "ui-checkbox ui-checkbox--success",
97
- "attrs": { "type": "checkbox", "checked": "" }
98
- }
99
- ],
100
- "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--success\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--success\" checked>"
101
- }
102
- ]
103
- },
104
- {
105
- "title": "With Label",
106
- "examples": [
107
- {
108
- "items": [
109
- {
110
- "tag": "label",
111
- "class": "ui-row",
112
- "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
113
- "children": [
114
- { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
115
- { "tag": "span", "text": "Accept terms and conditions" }
116
- ]
117
- }
118
- ],
119
- "code": "<label class=\"ui-row\">\n <input type=\"checkbox\" class=\"ui-checkbox\">\n <span>Accept terms</span>\n</label>"
120
- }
121
- ]
122
- }
123
- ],
124
- "customization": [
125
- {
126
- "token": "--ui-checkbox-size",
127
- "default": "calc(var(--ui-unit) * 2)",
128
- "description": "Default size"
129
- },
130
- {
131
- "token": "--ui-checkbox-size-lg",
132
- "default": "calc(var(--ui-unit) * 3)",
133
- "description": "Large size"
134
- },
135
- {
136
- "token": "--ui-checkbox-radius",
137
- "default": "var(--ui-radius-sm)",
138
- "description": "Border radius"
139
- },
140
- {
141
- "token": "--ui-checkbox-bg",
142
- "default": "var(--ui-color-bg)",
143
- "description": "Background (unchecked)"
144
- },
145
- {
146
- "token": "--ui-checkbox-bg-checked",
147
- "default": "var(--ui-color-primary)",
148
- "description": "Background (checked)"
149
- },
150
- {
151
- "token": "--ui-checkbox-border-color",
152
- "default": "var(--ui-color-border-strong)",
153
- "description": "Border color"
154
- },
155
- {
156
- "token": "--ui-checkbox-border-color-focus",
157
- "default": "var(--ui-color-primary)",
158
- "description": "Focus border color"
159
- },
160
- {
161
- "token": "--ui-checkbox-check-color",
162
- "default": "var(--ui-color-text-inverse)",
163
- "description": "Checkmark color"
164
- }
165
- ]
166
- }