@teseor/css 1.14.2 → 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 (300) 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 +7 -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 +7 -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 +7 -3
  10. package/src/components/content/divider/divider.docs.html +27 -0
  11. package/src/components/content/divider/divider.visual.spec.ts +7 -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 +7 -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 +7 -3
  19. package/src/components/data-display/badge/badge.docs.html +39 -0
  20. package/src/components/data-display/badge/badge.visual.spec.ts +7 -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 +7 -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 +7 -3
  27. package/src/components/data-display/icon/icon.docs.html +72 -0
  28. package/src/components/data-display/icon/icon.visual.spec.ts +7 -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 +7 -3
  32. package/src/components/data-display/stat/stat.docs.html +35 -0
  33. package/src/components/data-display/stat/stat.visual.spec.ts +7 -3
  34. package/src/components/data-display/status/status.docs.html +67 -0
  35. package/src/components/data-display/status/status.visual.spec.ts +7 -3
  36. package/src/components/data-display/table/table.docs.html +73 -0
  37. package/src/components/data-display/table/table.visual.spec.ts +7 -3
  38. package/src/components/data-display/tag/tag.docs.html +42 -0
  39. package/src/components/data-display/tag/tag.visual.spec.ts +7 -3
  40. package/src/components/disclosure/accordion/accordion.docs.html +83 -0
  41. package/src/components/disclosure/accordion/accordion.visual.spec.ts +7 -3
  42. package/src/components/disclosure/disclosure/disclosure.docs.html +51 -0
  43. package/src/components/disclosure/disclosure/disclosure.visual.spec.ts +7 -3
  44. package/src/components/feedback/alert/alert.docs.html +90 -0
  45. package/src/components/feedback/alert/alert.visual.spec.ts +7 -3
  46. package/src/components/feedback/progress/progress.docs.html +65 -0
  47. package/src/components/feedback/progress/progress.visual.spec.ts +7 -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 +7 -3
  50. package/src/components/feedback/skeleton/skeleton.docs.html +40 -0
  51. package/src/components/feedback/skeleton/skeleton.visual.spec.ts +7 -3
  52. package/src/components/feedback/spinner/spinner.docs.html +28 -0
  53. package/src/components/feedback/spinner/spinner.visual.spec.ts +7 -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 +7 -3
  57. package/src/components/forms/checkbox/checkbox.docs.html +33 -0
  58. package/src/components/forms/checkbox/checkbox.visual.spec.ts +7 -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 +7 -3
  61. package/src/components/forms/field/field.docs.html +63 -0
  62. package/src/components/forms/field/field.visual.spec.ts +7 -3
  63. package/src/components/forms/fieldset/fieldset.docs.html +122 -0
  64. package/src/components/forms/fieldset/fieldset.visual.spec.ts +7 -3
  65. package/src/components/forms/form/form.docs.html +132 -0
  66. package/src/components/forms/form/form.visual.spec.ts +7 -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 +7 -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 +7 -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 +7 -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 +7 -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 +7 -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 +7 -3
  83. package/src/components/forms/radio/radio.docs.html +52 -0
  84. package/src/components/forms/radio/radio.visual.spec.ts +7 -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 +7 -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 +7 -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 +7 -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 +7 -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 +7 -3
  99. package/src/components/forms/toggle/toggle.docs.html +64 -0
  100. package/src/components/forms/toggle/toggle.visual.spec.ts +7 -3
  101. package/src/components/navigation/breadcrumb/breadcrumb.docs.html +60 -0
  102. package/src/components/navigation/breadcrumb/breadcrumb.visual.spec.ts +7 -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 +7 -3
  106. package/src/components/navigation/menu/menu.docs.html +122 -0
  107. package/src/components/navigation/menu/menu.visual.spec.ts +7 -3
  108. package/src/components/navigation/nav/nav.docs.html +74 -0
  109. package/src/components/navigation/nav/nav.visual.spec.ts +7 -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 +7 -3
  113. package/src/components/navigation/tabs/tabs.docs.html +66 -0
  114. package/src/components/navigation/tabs/tabs.visual.spec.ts +7 -3
  115. package/src/components/overlays/dialog/dialog.docs.html +61 -0
  116. package/src/components/overlays/dialog/dialog.visual.spec.ts +7 -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 +7 -3
  120. package/src/components/overlays/modal/modal.docs.html +69 -0
  121. package/src/components/overlays/modal/modal.visual.spec.ts +7 -3
  122. package/src/components/overlays/overlay/overlay.docs.html +30 -0
  123. package/src/components/overlays/overlay/overlay.visual.spec.ts +7 -3
  124. package/src/components/overlays/popover/popover.docs.html +41 -0
  125. package/src/components/overlays/popover/popover.visual.spec.ts +7 -3
  126. package/src/components/overlays/tooltip/tooltip.docs.html +33 -0
  127. package/src/components/overlays/tooltip/tooltip.visual.spec.ts +7 -3
  128. package/src/components/typography/blockquote/blockquote.docs.html +24 -0
  129. package/src/components/typography/blockquote/blockquote.visual.spec.ts +7 -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 +7 -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 +7 -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 +7 -3
  139. package/src/components/typography/kbd/kbd.docs.html +16 -0
  140. package/src/components/typography/kbd/kbd.visual.spec.ts +7 -3
  141. package/src/components/typography/link/link.docs.html +33 -0
  142. package/src/components/typography/link/link.visual.spec.ts +7 -3
  143. package/src/components/typography/list/list.docs.html +79 -0
  144. package/src/components/typography/list/list.visual.spec.ts +7 -3
  145. package/src/components/typography/mark/mark.docs.html +12 -0
  146. package/src/components/typography/mark/mark.visual.spec.ts +7 -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/debug/index.scss +81 -1
  156. package/src/layout/app-shell/app-shell-visual.png +0 -0
  157. package/src/layout/app-shell/app-shell.docs.html +102 -0
  158. package/src/layout/app-shell/app-shell.visual.spec.ts +3 -3
  159. package/src/layout/aspect-ratio/aspect-ratio.docs.html +41 -0
  160. package/src/layout/aspect-ratio/aspect-ratio.visual.spec.ts +3 -3
  161. package/src/layout/box/box-visual.png +0 -0
  162. package/src/layout/box/box.docs.html +27 -0
  163. package/src/layout/box/box.visual.spec.ts +3 -3
  164. package/src/layout/center/center.docs.html +26 -0
  165. package/src/layout/center/center.visual.spec.ts +3 -3
  166. package/src/layout/column/column.docs.html +32 -0
  167. package/src/layout/column/column.visual.spec.ts +3 -3
  168. package/src/layout/container/container.docs.html +37 -0
  169. package/src/layout/content/content-visual.png +0 -0
  170. package/src/layout/content/content.docs.html +38 -0
  171. package/src/layout/content/content.visual.spec.ts +7 -3
  172. package/src/layout/footer/footer-visual.png +0 -0
  173. package/src/layout/footer/footer.docs.html +73 -0
  174. package/src/layout/footer/footer.visual.spec.ts +7 -3
  175. package/src/layout/grid/grid.docs.html +87 -0
  176. package/src/layout/grid/grid.visual.spec.ts +3 -3
  177. package/src/layout/main/main.docs.html +31 -0
  178. package/src/layout/nav-rail/nav-rail-visual.png +0 -0
  179. package/src/layout/nav-rail/nav-rail.docs.html +42 -0
  180. package/src/layout/nav-rail/nav-rail.visual.spec.ts +7 -3
  181. package/src/layout/page-header/page-header.docs.html +52 -0
  182. package/src/layout/page-header/page-header.visual.spec.ts +7 -3
  183. package/src/layout/row/row.docs.html +47 -0
  184. package/src/layout/row/row.visual.spec.ts +3 -3
  185. package/src/layout/sidebar/sidebar-visual.png +0 -0
  186. package/src/layout/sidebar/sidebar.docs.html +30 -0
  187. package/src/layout/sidebar/sidebar.visual.spec.ts +7 -3
  188. package/src/layout/sidebar-nav/sidebar-nav.docs.html +235 -0
  189. package/src/layout/sidebar-nav/sidebar-nav.visual.spec.ts +7 -3
  190. package/src/layout/topbar/topbar-visual.png +0 -0
  191. package/src/layout/topbar/topbar.docs.html +64 -0
  192. package/src/layout/topbar/topbar.visual.spec.ts +7 -3
  193. package/src/utilities/container/container.docs.html +34 -0
  194. package/src/utilities/display/display.docs.html +30 -0
  195. package/src/utilities/scroll-animation/scroll-animation.docs.html +32 -0
  196. package/src/utilities/scroll-snap/scroll-snap.docs.html +80 -0
  197. package/src/utilities/spacing/spacing.docs.html +29 -0
  198. package/src/utilities/text/text.docs.html +66 -0
  199. package/src/utilities/view-transition/view-transition.docs.html +52 -0
  200. package/src/utilities/visually-hidden/visually-hidden.docs.html +18 -0
  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/tokens/accessibility.docs.json +0 -125
  265. package/src/config/tokens/colors/colors.docs.json +0 -316
  266. package/src/config/tokens/grid/grid.docs.json +0 -54
  267. package/src/config/tokens/spacing/spacing.docs.json +0 -114
  268. package/src/config/tokens/theming.docs.json +0 -288
  269. package/src/debug/grid-overlay.scss +0 -81
  270. package/src/layout/app-shell/app-shell.docs.json +0 -155
  271. package/src/layout/aspect-ratio/aspect-ratio.docs.json +0 -193
  272. package/src/layout/box/box.docs.json +0 -93
  273. package/src/layout/center/center.docs.json +0 -63
  274. package/src/layout/column/column.docs.json +0 -157
  275. package/src/layout/container/container.docs.json +0 -85
  276. package/src/layout/content/content.docs.json +0 -82
  277. package/src/layout/footer/footer.docs.json +0 -119
  278. package/src/layout/grid/grid.docs.json +0 -493
  279. package/src/layout/main/main.docs.json +0 -87
  280. package/src/layout/nav-rail/nav-rail.docs.json +0 -76
  281. package/src/layout/page-header/page-header.docs.json +0 -124
  282. package/src/layout/row/row.docs.json +0 -237
  283. package/src/layout/sidebar/sidebar.docs.json +0 -63
  284. package/src/layout/sidebar-nav/sidebar-nav.docs.json +0 -833
  285. package/src/layout/topbar/topbar.docs.json +0 -110
  286. package/src/testing/api-types.ts +0 -20
  287. package/src/testing/grid-alignment.spec.ts +0 -38
  288. package/src/testing/html-generator.ts +0 -151
  289. package/src/testing/index.ts +0 -15
  290. package/src/testing/page-setup.ts +0 -149
  291. package/src/testing/rhythm.ts +0 -146
  292. package/src/testing/scaffold.ts +0 -50
  293. package/src/utilities/container/container.docs.json +0 -121
  294. package/src/utilities/display/display.docs.json +0 -83
  295. package/src/utilities/scroll-animation/scroll-animation.docs.json +0 -100
  296. package/src/utilities/scroll-snap/scroll-snap.docs.json +0 -333
  297. package/src/utilities/spacing/spacing.docs.json +0 -133
  298. package/src/utilities/text/text.docs.json +0 -191
  299. package/src/utilities/view-transition/view-transition.docs.json +0 -63
  300. package/src/utilities/visually-hidden/visually-hidden.docs.json +0 -44
@@ -1,483 +0,0 @@
1
- {
2
- "id": "pagination",
3
- "type": "component",
4
- "title": "Pagination",
5
- "api": "./pagination.api.json",
6
- "sections": [
7
- {
8
- "title": "Default",
9
- "examples": [
10
- {
11
- "items": [
12
- {
13
- "tag": "nav",
14
- "class": "ui-pagination",
15
- "children": [
16
- {
17
- "tag": "a",
18
- "class": "ui-pagination__link ui-pagination__prev",
19
- "attrs": { "href": "#" },
20
- "text": "Prev"
21
- },
22
- {
23
- "tag": "ul",
24
- "class": "ui-pagination__list",
25
- "children": [
26
- {
27
- "tag": "li",
28
- "class": "ui-pagination__item",
29
- "children": [
30
- {
31
- "tag": "a",
32
- "class": "ui-pagination__link",
33
- "attrs": { "href": "#" },
34
- "text": "1"
35
- }
36
- ]
37
- },
38
- {
39
- "tag": "li",
40
- "class": "ui-pagination__item",
41
- "children": [
42
- {
43
- "tag": "a",
44
- "class": "ui-pagination__link ui-pagination__link--active",
45
- "attrs": { "aria-current": "page", "href": "#" },
46
- "text": "2"
47
- }
48
- ]
49
- },
50
- {
51
- "tag": "li",
52
- "class": "ui-pagination__item",
53
- "children": [
54
- {
55
- "tag": "a",
56
- "class": "ui-pagination__link",
57
- "attrs": { "href": "#" },
58
- "text": "3"
59
- }
60
- ]
61
- },
62
- {
63
- "tag": "li",
64
- "class": "ui-pagination__item",
65
- "children": [
66
- {
67
- "tag": "a",
68
- "class": "ui-pagination__link",
69
- "attrs": { "href": "#" },
70
- "text": "4"
71
- }
72
- ]
73
- },
74
- {
75
- "tag": "li",
76
- "class": "ui-pagination__item",
77
- "children": [
78
- {
79
- "tag": "a",
80
- "class": "ui-pagination__link",
81
- "attrs": { "href": "#" },
82
- "text": "5"
83
- }
84
- ]
85
- }
86
- ]
87
- },
88
- {
89
- "tag": "a",
90
- "class": "ui-pagination__link ui-pagination__next",
91
- "attrs": { "href": "#" },
92
- "text": "Next"
93
- }
94
- ]
95
- }
96
- ]
97
- }
98
- ]
99
- },
100
- {
101
- "title": "With Ellipsis",
102
- "examples": [
103
- {
104
- "items": [
105
- {
106
- "tag": "nav",
107
- "class": "ui-pagination",
108
- "children": [
109
- {
110
- "tag": "a",
111
- "class": "ui-pagination__link ui-pagination__prev",
112
- "attrs": { "href": "#" },
113
- "text": "Prev"
114
- },
115
- {
116
- "tag": "ul",
117
- "class": "ui-pagination__list",
118
- "children": [
119
- {
120
- "tag": "li",
121
- "class": "ui-pagination__item",
122
- "children": [
123
- {
124
- "tag": "a",
125
- "class": "ui-pagination__link",
126
- "attrs": { "href": "#" },
127
- "text": "1"
128
- }
129
- ]
130
- },
131
- {
132
- "tag": "li",
133
- "class": "ui-pagination__item",
134
- "children": [
135
- { "tag": "span", "class": "ui-pagination__ellipsis", "text": "..." }
136
- ]
137
- },
138
- {
139
- "tag": "li",
140
- "class": "ui-pagination__item",
141
- "children": [
142
- {
143
- "tag": "a",
144
- "class": "ui-pagination__link",
145
- "attrs": { "href": "#" },
146
- "text": "4"
147
- }
148
- ]
149
- },
150
- {
151
- "tag": "li",
152
- "class": "ui-pagination__item",
153
- "children": [
154
- {
155
- "tag": "a",
156
- "class": "ui-pagination__link ui-pagination__link--active",
157
- "attrs": { "aria-current": "page", "href": "#" },
158
- "text": "5"
159
- }
160
- ]
161
- },
162
- {
163
- "tag": "li",
164
- "class": "ui-pagination__item",
165
- "children": [
166
- {
167
- "tag": "a",
168
- "class": "ui-pagination__link",
169
- "attrs": { "href": "#" },
170
- "text": "6"
171
- }
172
- ]
173
- },
174
- {
175
- "tag": "li",
176
- "class": "ui-pagination__item",
177
- "children": [
178
- { "tag": "span", "class": "ui-pagination__ellipsis", "text": "..." }
179
- ]
180
- },
181
- {
182
- "tag": "li",
183
- "class": "ui-pagination__item",
184
- "children": [
185
- {
186
- "tag": "a",
187
- "class": "ui-pagination__link",
188
- "attrs": { "href": "#" },
189
- "text": "20"
190
- }
191
- ]
192
- }
193
- ]
194
- },
195
- {
196
- "tag": "a",
197
- "class": "ui-pagination__link ui-pagination__next",
198
- "attrs": { "href": "#" },
199
- "text": "Next"
200
- }
201
- ]
202
- }
203
- ]
204
- }
205
- ]
206
- },
207
- {
208
- "title": "Disabled States",
209
- "examples": [
210
- {
211
- "items": [
212
- {
213
- "tag": "nav",
214
- "class": "ui-pagination",
215
- "children": [
216
- {
217
- "tag": "a",
218
- "class": "ui-pagination__link ui-pagination__prev ui-pagination__link--disabled",
219
- "attrs": { "aria-disabled": "true" },
220
- "text": "Prev"
221
- },
222
- {
223
- "tag": "ul",
224
- "class": "ui-pagination__list",
225
- "children": [
226
- {
227
- "tag": "li",
228
- "class": "ui-pagination__item",
229
- "children": [
230
- {
231
- "tag": "a",
232
- "class": "ui-pagination__link ui-pagination__link--active",
233
- "attrs": { "aria-current": "page", "href": "#" },
234
- "text": "1"
235
- }
236
- ]
237
- },
238
- {
239
- "tag": "li",
240
- "class": "ui-pagination__item",
241
- "children": [
242
- {
243
- "tag": "a",
244
- "class": "ui-pagination__link",
245
- "attrs": { "href": "#" },
246
- "text": "2"
247
- }
248
- ]
249
- },
250
- {
251
- "tag": "li",
252
- "class": "ui-pagination__item",
253
- "children": [
254
- {
255
- "tag": "a",
256
- "class": "ui-pagination__link",
257
- "attrs": { "href": "#" },
258
- "text": "3"
259
- }
260
- ]
261
- }
262
- ]
263
- },
264
- {
265
- "tag": "a",
266
- "class": "ui-pagination__link ui-pagination__next",
267
- "attrs": { "href": "#" },
268
- "text": "Next"
269
- }
270
- ]
271
- }
272
- ]
273
- }
274
- ]
275
- },
276
- {
277
- "title": "Sizes",
278
- "examples": [
279
- {
280
- "items": [
281
- {
282
- "tag": "nav",
283
- "class": "ui-pagination ui-pagination--sm",
284
- "children": [
285
- {
286
- "tag": "ul",
287
- "class": "ui-pagination__list",
288
- "children": [
289
- {
290
- "tag": "li",
291
- "class": "ui-pagination__item",
292
- "children": [
293
- {
294
- "tag": "a",
295
- "class": "ui-pagination__link",
296
- "attrs": { "href": "#" },
297
- "text": "1"
298
- }
299
- ]
300
- },
301
- {
302
- "tag": "li",
303
- "class": "ui-pagination__item",
304
- "children": [
305
- {
306
- "tag": "a",
307
- "class": "ui-pagination__link ui-pagination__link--active",
308
- "attrs": { "aria-current": "page", "href": "#" },
309
- "text": "2"
310
- }
311
- ]
312
- },
313
- {
314
- "tag": "li",
315
- "class": "ui-pagination__item",
316
- "children": [
317
- {
318
- "tag": "a",
319
- "class": "ui-pagination__link",
320
- "attrs": { "href": "#" },
321
- "text": "3"
322
- }
323
- ]
324
- }
325
- ]
326
- }
327
- ]
328
- }
329
- ],
330
- "layout": "column"
331
- },
332
- {
333
- "items": [
334
- {
335
- "tag": "nav",
336
- "class": "ui-pagination",
337
- "children": [
338
- {
339
- "tag": "ul",
340
- "class": "ui-pagination__list",
341
- "children": [
342
- {
343
- "tag": "li",
344
- "class": "ui-pagination__item",
345
- "children": [
346
- {
347
- "tag": "a",
348
- "class": "ui-pagination__link",
349
- "attrs": { "href": "#" },
350
- "text": "1"
351
- }
352
- ]
353
- },
354
- {
355
- "tag": "li",
356
- "class": "ui-pagination__item",
357
- "children": [
358
- {
359
- "tag": "a",
360
- "class": "ui-pagination__link ui-pagination__link--active",
361
- "attrs": { "aria-current": "page", "href": "#" },
362
- "text": "2"
363
- }
364
- ]
365
- },
366
- {
367
- "tag": "li",
368
- "class": "ui-pagination__item",
369
- "children": [
370
- {
371
- "tag": "a",
372
- "class": "ui-pagination__link",
373
- "attrs": { "href": "#" },
374
- "text": "3"
375
- }
376
- ]
377
- }
378
- ]
379
- }
380
- ]
381
- }
382
- ],
383
- "layout": "column"
384
- },
385
- {
386
- "items": [
387
- {
388
- "tag": "nav",
389
- "class": "ui-pagination ui-pagination--lg",
390
- "children": [
391
- {
392
- "tag": "ul",
393
- "class": "ui-pagination__list",
394
- "children": [
395
- {
396
- "tag": "li",
397
- "class": "ui-pagination__item",
398
- "children": [
399
- {
400
- "tag": "a",
401
- "class": "ui-pagination__link",
402
- "attrs": { "href": "#" },
403
- "text": "1"
404
- }
405
- ]
406
- },
407
- {
408
- "tag": "li",
409
- "class": "ui-pagination__item",
410
- "children": [
411
- {
412
- "tag": "a",
413
- "class": "ui-pagination__link ui-pagination__link--active",
414
- "attrs": { "aria-current": "page", "href": "#" },
415
- "text": "2"
416
- }
417
- ]
418
- },
419
- {
420
- "tag": "li",
421
- "class": "ui-pagination__item",
422
- "children": [
423
- {
424
- "tag": "a",
425
- "class": "ui-pagination__link",
426
- "attrs": { "href": "#" },
427
- "text": "3"
428
- }
429
- ]
430
- }
431
- ]
432
- }
433
- ]
434
- }
435
- ],
436
- "layout": "column"
437
- }
438
- ]
439
- }
440
- ],
441
- "customization": [
442
- {
443
- "token": "--ui-pagination-gap",
444
- "default": "calc(var(--ui-unit) * 0.5)",
445
- "description": "Gap between items"
446
- },
447
- {
448
- "token": "--ui-pagination-item-size",
449
- "default": "calc(var(--ui-unit) * 4)",
450
- "description": "Item size"
451
- },
452
- {
453
- "token": "--ui-pagination-item-radius",
454
- "default": "var(--ui-radius-sm)",
455
- "description": "Item border radius"
456
- },
457
- {
458
- "token": "--ui-pagination-item-bg",
459
- "default": "transparent",
460
- "description": "Item background"
461
- },
462
- {
463
- "token": "--ui-pagination-item-bg-hover",
464
- "default": "var(--ui-color-bg-subtle)",
465
- "description": "Item hover background"
466
- },
467
- {
468
- "token": "--ui-pagination-item-bg-active",
469
- "default": "var(--ui-color-primary)",
470
- "description": "Active item background"
471
- },
472
- {
473
- "token": "--ui-pagination-item-color",
474
- "default": "var(--ui-color-text)",
475
- "description": "Item text color"
476
- },
477
- {
478
- "token": "--ui-pagination-item-color-active",
479
- "default": "var(--ui-color-text-inverse)",
480
- "description": "Active item text color"
481
- }
482
- ]
483
- }