@askrjs/themes 0.0.8 → 0.0.10

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 (479) hide show
  1. package/README.md +19 -13
  2. package/THEMING.md +24 -18
  3. package/dist/components/_internal/block-layout.d.ts +49 -0
  4. package/dist/components/_internal/block-layout.js +210 -0
  5. package/dist/components/_internal/block-layout.js.map +1 -0
  6. package/dist/components/_internal/jsx.js.map +1 -1
  7. package/dist/components/_internal/style.js +25 -1
  8. package/dist/components/_internal/style.js.map +1 -1
  9. package/dist/components/alert/alert.js +2 -2
  10. package/dist/components/alert/alert.js.map +1 -1
  11. package/dist/components/alert/alert.types.d.ts +0 -1
  12. package/dist/components/aside/aside.d.ts +7 -0
  13. package/dist/components/aside/aside.js +16 -0
  14. package/dist/components/aside/aside.js.map +1 -0
  15. package/dist/components/aside/aside.types.d.ts +6 -0
  16. package/dist/components/aside/index.d.ts +2 -0
  17. package/dist/components/aspect-ratio/aspect-ratio.js +1 -1
  18. package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -1
  19. package/dist/components/badge/index.d.ts +1 -2
  20. package/dist/components/block/block.d.ts +2 -3
  21. package/dist/components/block/block.js +16 -46
  22. package/dist/components/block/block.js.map +1 -1
  23. package/dist/components/block/block.types.d.ts +13 -23
  24. package/dist/components/block/index.d.ts +3 -3
  25. package/dist/components/brand/brand.d.ts +9 -0
  26. package/dist/components/brand/brand.js +49 -0
  27. package/dist/components/brand/brand.js.map +1 -0
  28. package/dist/components/brand/brand.types.d.ts +31 -0
  29. package/dist/components/brand/index.d.ts +2 -0
  30. package/dist/components/card/card.d.ts +3 -3
  31. package/dist/components/card/card.js +6 -11
  32. package/dist/components/card/card.js.map +1 -1
  33. package/dist/components/card/card.types.d.ts +10 -12
  34. package/dist/components/card/index.d.ts +2 -2
  35. package/dist/components/catalog.d.ts +156 -0
  36. package/dist/components/catalog.js +723 -0
  37. package/dist/components/catalog.js.map +1 -0
  38. package/dist/components/container/container.d.ts +2 -3
  39. package/dist/components/container/container.js +8 -71
  40. package/dist/components/container/container.js.map +1 -1
  41. package/dist/components/container/container.types.d.ts +5 -24
  42. package/dist/components/container/index.d.ts +2 -3
  43. package/dist/components/empty-state/empty-state.js +34 -28
  44. package/dist/components/empty-state/empty-state.js.map +1 -1
  45. package/dist/components/empty-state/empty-state.types.d.ts +3 -6
  46. package/dist/components/field/field.js +4 -2
  47. package/dist/components/field/field.js.map +1 -1
  48. package/dist/components/field/field.types.d.ts +1 -0
  49. package/dist/components/footer/footer.d.ts +13 -0
  50. package/dist/components/footer/footer.js +86 -0
  51. package/dist/components/footer/footer.js.map +1 -0
  52. package/dist/components/footer/footer.types.d.ts +37 -0
  53. package/dist/components/footer/index.d.ts +2 -0
  54. package/dist/components/grid/grid.d.ts +7 -0
  55. package/dist/components/grid/grid.js +76 -0
  56. package/dist/components/grid/grid.js.map +1 -0
  57. package/dist/components/grid/grid.types.d.ts +19 -0
  58. package/dist/components/grid/index.d.ts +2 -0
  59. package/dist/components/header/header.js +9 -6
  60. package/dist/components/header/header.js.map +1 -1
  61. package/dist/components/header/header.types.d.ts +5 -5
  62. package/dist/components/header/index.d.ts +2 -0
  63. package/dist/components/main/index.d.ts +2 -0
  64. package/dist/components/main/main.d.ts +7 -0
  65. package/dist/components/main/main.js +17 -0
  66. package/dist/components/main/main.js.map +1 -0
  67. package/dist/components/main/main.types.d.ts +6 -0
  68. package/dist/components/nav/index.d.ts +2 -2
  69. package/dist/components/nav/nav.d.ts +8 -6
  70. package/dist/components/nav/nav.js +93 -58
  71. package/dist/components/nav/nav.js.map +1 -1
  72. package/dist/components/nav/nav.types.d.ts +16 -20
  73. package/dist/components/navbar/index.d.ts +4 -5
  74. package/dist/components/navbar/navbar.d.ts +3 -38
  75. package/dist/components/navbar/navbar.js +102 -198
  76. package/dist/components/navbar/navbar.js.map +1 -1
  77. package/dist/components/navbar/navbar.types.d.ts +14 -24
  78. package/dist/components/page/index.d.ts +2 -0
  79. package/dist/components/page/page.d.ts +7 -0
  80. package/dist/components/page/page.js +22 -0
  81. package/dist/components/page/page.js.map +1 -0
  82. package/dist/components/page/page.types.d.ts +6 -0
  83. package/dist/components/page-header/index.d.ts +2 -0
  84. package/dist/components/page-header/page-header.d.ts +7 -0
  85. package/dist/components/page-header/page-header.js +37 -0
  86. package/dist/components/page-header/page-header.js.map +1 -0
  87. package/dist/components/page-header/page-header.types.d.ts +10 -0
  88. package/dist/components/section/index.d.ts +2 -3
  89. package/dist/components/section/section.d.ts +2 -3
  90. package/dist/components/section/section.js +7 -30
  91. package/dist/components/section/section.js.map +1 -1
  92. package/dist/components/section/section.types.d.ts +3 -20
  93. package/dist/components/separator/index.d.ts +1 -2
  94. package/dist/components/sidebar/index.d.ts +2 -0
  95. package/dist/components/sidebar/sidebar.d.ts +17 -2
  96. package/dist/components/sidebar/sidebar.js +115 -211
  97. package/dist/components/sidebar/sidebar.js.map +1 -1
  98. package/dist/components/sidebar/sidebar.types.d.ts +21 -23
  99. package/dist/components/skeleton/index.d.ts +1 -2
  100. package/dist/components/skeleton/skeleton.js +12 -1
  101. package/dist/components/skeleton/skeleton.js.map +1 -1
  102. package/dist/components/skeleton/skeleton.types.d.ts +2 -0
  103. package/dist/components/spinner/index.d.ts +1 -1
  104. package/dist/components/spinner/spinner.js +6 -3
  105. package/dist/components/spinner/spinner.js.map +1 -1
  106. package/dist/components/spinner/spinner.types.d.ts +3 -1
  107. package/dist/components/stat/index.d.ts +2 -0
  108. package/dist/components/stat/stat.d.ts +10 -0
  109. package/dist/components/stat/stat.js +52 -0
  110. package/dist/components/stat/stat.js.map +1 -0
  111. package/dist/components/stat/stat.types.d.ts +24 -0
  112. package/dist/components/text/index.d.ts +2 -0
  113. package/dist/components/text/text.d.ts +7 -0
  114. package/dist/components/text/text.js +28 -0
  115. package/dist/components/text/text.js.map +1 -0
  116. package/dist/components/text/text.types.d.ts +26 -0
  117. package/dist/components/theme/theme.js +97 -18
  118. package/dist/components/theme/theme.js.map +1 -1
  119. package/dist/components/toolbar/index.d.ts +2 -0
  120. package/dist/components/toolbar/toolbar.d.ts +7 -0
  121. package/dist/components/toolbar/toolbar.js +30 -0
  122. package/dist/components/toolbar/toolbar.js.map +1 -0
  123. package/dist/components/toolbar/toolbar.types.d.ts +9 -0
  124. package/dist/components.d.ts +60 -0
  125. package/dist/components.js +35 -0
  126. package/dist/controls.d.ts +2 -2
  127. package/dist/controls.js +3 -3
  128. package/dist/core.d.ts +36 -0
  129. package/dist/core.js +19 -0
  130. package/dist/navs.d.ts +3 -15
  131. package/dist/navs.js +2 -8
  132. package/dist/overlays.d.ts +2 -2
  133. package/dist/overlays.js +2 -2
  134. package/dist/surfaces.d.ts +10 -8
  135. package/dist/surfaces.js +6 -4
  136. package/dist/themes/default/index.css +3691 -3959
  137. package/package.json +239 -73
  138. package/src/components/_internal/block-layout.ts +354 -0
  139. package/src/components/_internal/jsx.ts +18 -6
  140. package/src/components/_internal/style.ts +42 -4
  141. package/src/components/alert/alert.tsx +1 -2
  142. package/src/components/alert/alert.types.ts +0 -1
  143. package/src/components/aside/aside.tsx +12 -0
  144. package/src/components/aside/aside.types.ts +3 -0
  145. package/src/components/aside/index.ts +2 -0
  146. package/src/components/aspect-ratio/aspect-ratio.tsx +1 -1
  147. package/src/components/badge/index.ts +0 -1
  148. package/src/components/block/block.a11y.ts +0 -6
  149. package/src/components/block/block.tsx +40 -56
  150. package/src/components/block/block.types.ts +59 -41
  151. package/src/components/block/index.ts +1 -10
  152. package/src/components/brand/brand.tsx +61 -0
  153. package/src/components/brand/brand.types.ts +39 -0
  154. package/src/components/brand/index.ts +2 -0
  155. package/src/components/card/card.tsx +6 -18
  156. package/src/components/card/card.types.ts +9 -11
  157. package/src/components/card/index.ts +2 -3
  158. package/src/components/catalog.tsx +713 -0
  159. package/src/components/container/container.a11y.ts +0 -5
  160. package/src/components/container/container.tsx +18 -128
  161. package/src/components/container/container.types.ts +3 -32
  162. package/src/components/container/index.ts +1 -8
  163. package/src/components/empty-state/empty-state.tsx +17 -35
  164. package/src/components/empty-state/empty-state.types.ts +3 -5
  165. package/src/components/field/field.tsx +3 -1
  166. package/src/components/field/field.types.ts +1 -0
  167. package/src/components/footer/footer.tsx +88 -0
  168. package/src/components/footer/footer.types.ts +40 -0
  169. package/src/components/footer/index.ts +10 -0
  170. package/src/components/grid/grid.tsx +113 -0
  171. package/src/components/grid/grid.types.ts +20 -0
  172. package/src/components/grid/index.ts +2 -0
  173. package/src/components/header/header.tsx +10 -7
  174. package/src/components/header/header.types.ts +4 -4
  175. package/src/components/header/index.ts +1 -2
  176. package/src/components/main/index.ts +2 -0
  177. package/src/components/main/main.tsx +12 -0
  178. package/src/components/main/main.types.ts +3 -0
  179. package/src/components/nav/index.ts +7 -9
  180. package/src/components/nav/nav.tsx +153 -110
  181. package/src/components/nav/nav.types.ts +26 -27
  182. package/src/components/navbar/index.ts +4 -11
  183. package/src/components/navbar/navbar.tsx +104 -251
  184. package/src/components/navbar/navbar.types.ts +16 -42
  185. package/src/components/page/index.ts +2 -0
  186. package/src/components/page/page.tsx +17 -0
  187. package/src/components/page/page.types.ts +3 -0
  188. package/src/components/page-header/index.ts +2 -0
  189. package/src/components/page-header/page-header.tsx +29 -0
  190. package/src/components/page-header/page-header.types.ts +7 -0
  191. package/src/components/section/index.ts +1 -7
  192. package/src/components/section/section.a11y.ts +0 -1
  193. package/src/components/section/section.tsx +9 -35
  194. package/src/components/section/section.types.ts +2 -22
  195. package/src/components/separator/index.ts +4 -9
  196. package/src/components/sidebar/index.ts +27 -5
  197. package/src/components/sidebar/sidebar.tsx +145 -317
  198. package/src/components/sidebar/sidebar.types.ts +21 -28
  199. package/src/components/skeleton/index.ts +1 -2
  200. package/src/components/skeleton/skeleton.tsx +33 -1
  201. package/src/components/skeleton/skeleton.types.ts +2 -0
  202. package/src/components/spinner/index.ts +1 -1
  203. package/src/components/spinner/spinner.tsx +7 -2
  204. package/src/components/spinner/spinner.types.ts +3 -0
  205. package/src/components/stat/index.ts +2 -0
  206. package/src/components/stat/stat.tsx +47 -0
  207. package/src/components/stat/stat.types.ts +24 -0
  208. package/src/components/text/index.ts +2 -0
  209. package/src/components/text/text.tsx +39 -0
  210. package/src/components/text/text.types.ts +35 -0
  211. package/src/components/theme/theme.tsx +163 -21
  212. package/src/components/toolbar/index.ts +2 -0
  213. package/src/components/toolbar/toolbar.tsx +24 -0
  214. package/src/components/toolbar/toolbar.types.ts +6 -0
  215. package/src/components.ts +289 -0
  216. package/src/controls.ts +69 -2
  217. package/src/core.ts +42 -0
  218. package/src/navs.ts +9 -24
  219. package/src/overlays.ts +101 -59
  220. package/src/parity.ts +125 -0
  221. package/src/surfaces.ts +60 -13
  222. package/src/themes/default/index.css +11 -14
  223. package/src/themes/default/styles/actions/button-group.css +6 -6
  224. package/src/themes/default/styles/actions/button.css +98 -60
  225. package/src/themes/default/styles/actions/toggle-group.css +61 -25
  226. package/src/themes/default/styles/base/text.css +87 -0
  227. package/src/themes/default/styles/base/typography.css +24 -117
  228. package/src/themes/default/styles/base/utilities.css +0 -250
  229. package/src/themes/default/styles/disclosure/accordion.css +35 -28
  230. package/src/themes/default/styles/display/alert.css +7 -7
  231. package/src/themes/default/styles/display/avatar.css +7 -1
  232. package/src/themes/default/styles/display/badge.css +10 -10
  233. package/src/themes/default/styles/display/card.css +10 -47
  234. package/src/themes/default/styles/display/catalog.css +753 -0
  235. package/src/themes/default/styles/display/coverage.css +30 -305
  236. package/src/themes/default/styles/display/progress-circle.css +2 -0
  237. package/src/themes/default/styles/display/scroll-area.css +29 -24
  238. package/src/themes/default/styles/display/spinner.css +38 -1
  239. package/src/themes/default/styles/display/stat.css +21 -0
  240. package/src/themes/default/styles/display/table.css +39 -12
  241. package/src/themes/default/styles/display/virtual-list.css +24 -13
  242. package/src/themes/default/styles/display/virtual-table.css +58 -36
  243. package/src/themes/default/styles/forms/checkbox.css +12 -21
  244. package/src/themes/default/styles/forms/input-group.css +2 -1
  245. package/src/themes/default/styles/forms/input.css +11 -12
  246. package/src/themes/default/styles/forms/radio-group.css +44 -27
  247. package/src/themes/default/styles/forms/select.css +33 -35
  248. package/src/themes/default/styles/forms/slider.css +61 -47
  249. package/src/themes/default/styles/forms/switch.css +18 -23
  250. package/src/themes/default/styles/forms/textarea.css +12 -12
  251. package/src/themes/default/styles/layout/block.css +96 -12
  252. package/src/themes/default/styles/layout/grid.css +78 -0
  253. package/src/themes/default/styles/layout/layout.css +502 -772
  254. package/src/themes/default/styles/layout/patterns.css +0 -155
  255. package/src/themes/default/styles/navigation/nav.css +104 -154
  256. package/src/themes/default/styles/overlays/alert-dialog.css +2 -2
  257. package/src/themes/default/styles/overlays/dialog.css +76 -22
  258. package/src/themes/default/styles/overlays/dropdown.css +108 -31
  259. package/src/themes/default/styles/overlays/hover-card.css +39 -17
  260. package/src/themes/default/styles/overlays/menubar.css +223 -0
  261. package/src/themes/default/styles/overlays/popover.css +69 -23
  262. package/src/themes/default/styles/overlays/toast.css +91 -33
  263. package/src/themes/default/styles/overlays/tooltip.css +88 -14
  264. package/src/themes/default/styles/shell/brand.css +48 -0
  265. package/src/themes/default/styles/shell/footer.css +72 -0
  266. package/src/themes/default/styles/shell/header.css +7 -50
  267. package/src/themes/default/styles/shell/navbar.css +226 -453
  268. package/src/themes/default/styles/shell/sidebar.css +243 -829
  269. package/src/themes/default/tokens.css +145 -98
  270. package/templates/theme/index.css +11 -14
  271. package/templates/theme/styles/actions/button-group.css +6 -6
  272. package/templates/theme/styles/actions/button.css +98 -60
  273. package/templates/theme/styles/actions/toggle-group.css +61 -25
  274. package/templates/theme/styles/base/text.css +87 -0
  275. package/templates/theme/styles/base/typography.css +24 -117
  276. package/templates/theme/styles/disclosure/accordion.css +35 -28
  277. package/templates/theme/styles/display/alert.css +7 -7
  278. package/templates/theme/styles/display/avatar.css +7 -1
  279. package/templates/theme/styles/display/badge.css +10 -10
  280. package/templates/theme/styles/display/card.css +10 -47
  281. package/templates/theme/styles/display/catalog.css +753 -0
  282. package/templates/theme/styles/display/coverage.css +30 -305
  283. package/templates/theme/styles/display/scroll-area.css +29 -24
  284. package/templates/theme/styles/display/spinner.css +38 -1
  285. package/templates/theme/styles/display/stat.css +21 -0
  286. package/templates/theme/styles/display/table.css +39 -12
  287. package/templates/theme/styles/display/virtual-list.css +24 -13
  288. package/templates/theme/styles/display/virtual-table.css +58 -36
  289. package/templates/theme/styles/forms/checkbox.css +12 -21
  290. package/templates/theme/styles/forms/input.css +11 -12
  291. package/templates/theme/styles/forms/radio-group.css +44 -27
  292. package/templates/theme/styles/forms/select.css +33 -35
  293. package/templates/theme/styles/forms/slider.css +61 -47
  294. package/templates/theme/styles/forms/switch.css +18 -23
  295. package/templates/theme/styles/forms/textarea.css +12 -12
  296. package/templates/theme/styles/layout/block.css +96 -12
  297. package/templates/theme/styles/layout/grid.css +78 -0
  298. package/templates/theme/styles/layout/layout.css +676 -1
  299. package/templates/theme/styles/layout/patterns.css +0 -155
  300. package/templates/theme/styles/navigation/nav.css +104 -154
  301. package/templates/theme/styles/overlays/alert-dialog.css +2 -2
  302. package/templates/theme/styles/overlays/dialog.css +76 -22
  303. package/templates/theme/styles/overlays/dropdown.css +108 -31
  304. package/templates/theme/styles/overlays/hover-card.css +39 -17
  305. package/templates/theme/styles/overlays/menubar.css +223 -0
  306. package/templates/theme/styles/overlays/popover.css +69 -23
  307. package/templates/theme/styles/overlays/toast.css +80 -33
  308. package/templates/theme/styles/overlays/tooltip.css +88 -14
  309. package/templates/theme/styles/shell/brand.css +48 -0
  310. package/templates/theme/styles/shell/footer.css +72 -0
  311. package/templates/theme/styles/shell/header.css +7 -50
  312. package/templates/theme/styles/shell/navbar.css +226 -453
  313. package/templates/theme/styles/shell/sidebar.css +197 -779
  314. package/templates/theme/tokens.css +145 -98
  315. package/dist/components/_internal/box-layout.js +0 -116
  316. package/dist/components/_internal/box-layout.js.map +0 -1
  317. package/dist/components/_internal/layout.d.ts +0 -9
  318. package/dist/components/_internal/layout.js +0 -147
  319. package/dist/components/_internal/layout.js.map +0 -1
  320. package/dist/components/badge/badge.a11y.d.ts +0 -17
  321. package/dist/components/block/block.a11y.d.ts +0 -20
  322. package/dist/components/box/box.a11y.d.ts +0 -14
  323. package/dist/components/box/box.d.ts +0 -9
  324. package/dist/components/box/box.js +0 -36
  325. package/dist/components/box/box.js.map +0 -1
  326. package/dist/components/box/box.types.d.ts +0 -72
  327. package/dist/components/box/index.d.ts +0 -3
  328. package/dist/components/breadcrumb/breadcrumb.a11y.d.ts +0 -17
  329. package/dist/components/breadcrumb/breadcrumb.a11y.js +0 -15
  330. package/dist/components/breadcrumb/breadcrumb.a11y.js.map +0 -1
  331. package/dist/components/breadcrumb/breadcrumb.d.ts +0 -18
  332. package/dist/components/breadcrumb/breadcrumb.js +0 -113
  333. package/dist/components/breadcrumb/breadcrumb.js.map +0 -1
  334. package/dist/components/breadcrumb/breadcrumb.types.d.ts +0 -65
  335. package/dist/components/breadcrumb/index.d.ts +0 -3
  336. package/dist/components/container/container.a11y.d.ts +0 -19
  337. package/dist/components/flex/flex.a11y.d.ts +0 -22
  338. package/dist/components/flex/flex.d.ts +0 -9
  339. package/dist/components/flex/flex.js +0 -115
  340. package/dist/components/flex/flex.js.map +0 -1
  341. package/dist/components/flex/flex.types.d.ts +0 -42
  342. package/dist/components/flex/index.d.ts +0 -3
  343. package/dist/components/header/header.a11y.d.ts +0 -14
  344. package/dist/components/header/header.a11y.js +0 -12
  345. package/dist/components/header/header.a11y.js.map +0 -1
  346. package/dist/components/inline/index.d.ts +0 -8
  347. package/dist/components/inline/index.js +0 -13
  348. package/dist/components/inline/index.js.map +0 -1
  349. package/dist/components/list-group/index.d.ts +0 -2
  350. package/dist/components/list-group/list-group.d.ts +0 -9
  351. package/dist/components/list-group/list-group.js +0 -43
  352. package/dist/components/list-group/list-group.js.map +0 -1
  353. package/dist/components/list-group/list-group.types.d.ts +0 -32
  354. package/dist/components/navbar/navbar-panel.js +0 -42
  355. package/dist/components/navbar/navbar-panel.js.map +0 -1
  356. package/dist/components/navbar/navbar.context.js +0 -13
  357. package/dist/components/navbar/navbar.context.js.map +0 -1
  358. package/dist/components/navbar/navbar.render.js +0 -26
  359. package/dist/components/navbar/navbar.render.js.map +0 -1
  360. package/dist/components/navbar/navbar.shared.js +0 -18
  361. package/dist/components/navbar/navbar.shared.js.map +0 -1
  362. package/dist/components/pagination/index.d.ts +0 -2
  363. package/dist/components/pagination/pagination.d.ts +0 -11
  364. package/dist/components/pagination/pagination.js +0 -95
  365. package/dist/components/pagination/pagination.js.map +0 -1
  366. package/dist/components/pagination/pagination.types.d.ts +0 -40
  367. package/dist/components/section/section.a11y.d.ts +0 -15
  368. package/dist/components/separator/separator.a11y.d.ts +0 -17
  369. package/dist/components/separator/separator.a11y.js +0 -15
  370. package/dist/components/separator/separator.a11y.js.map +0 -1
  371. package/dist/components/shell/index.d.ts +0 -3
  372. package/dist/components/shell/shell-nav.types.d.ts +0 -7
  373. package/dist/components/shell/shell-panel.js +0 -54
  374. package/dist/components/shell/shell-panel.js.map +0 -1
  375. package/dist/components/shell/shell-responsive.js +0 -118
  376. package/dist/components/shell/shell-responsive.js.map +0 -1
  377. package/dist/components/shell/shell.a11y.d.ts +0 -23
  378. package/dist/components/shell/shell.a11y.js +0 -23
  379. package/dist/components/shell/shell.a11y.js.map +0 -1
  380. package/dist/components/shell/shell.d.ts +0 -13
  381. package/dist/components/shell/shell.js +0 -69
  382. package/dist/components/shell/shell.js.map +0 -1
  383. package/dist/components/shell/shell.types.d.ts +0 -58
  384. package/dist/components/sidebar/sidebar-panel.d.ts +0 -7
  385. package/dist/components/sidebar/sidebar-panel.js +0 -49
  386. package/dist/components/sidebar/sidebar-panel.js.map +0 -1
  387. package/dist/components/sidebar/sidebar-toggle.d.ts +0 -7
  388. package/dist/components/sidebar/sidebar-toggle.js +0 -8
  389. package/dist/components/sidebar/sidebar-toggle.js.map +0 -1
  390. package/dist/components/sidebar/sidebar.context.js +0 -21
  391. package/dist/components/sidebar/sidebar.context.js.map +0 -1
  392. package/dist/components/sidebar/sidebar.shared.js +0 -12
  393. package/dist/components/sidebar/sidebar.shared.js.map +0 -1
  394. package/dist/components/skeleton/skeleton.a11y.d.ts +0 -16
  395. package/dist/components/spacer/index.d.ts +0 -3
  396. package/dist/components/spacer/spacer.a11y.d.ts +0 -17
  397. package/dist/components/spacer/spacer.d.ts +0 -8
  398. package/dist/components/spacer/spacer.js +0 -49
  399. package/dist/components/spacer/spacer.js.map +0 -1
  400. package/dist/components/spacer/spacer.types.d.ts +0 -26
  401. package/dist/components/stack/index.d.ts +0 -3
  402. package/dist/components/stack/stack.a11y.d.ts +0 -18
  403. package/dist/components/stack/stack.d.ts +0 -8
  404. package/dist/components/stack/stack.js +0 -16
  405. package/dist/components/stack/stack.js.map +0 -1
  406. package/dist/components/stack/stack.types.d.ts +0 -22
  407. package/dist/feedback.d.ts +0 -5
  408. package/dist/feedback.js +0 -4
  409. package/dist/layouts.d.ts +0 -25
  410. package/dist/layouts.js +0 -11
  411. package/dist/shells.d.ts +0 -16
  412. package/dist/shells.js +0 -11
  413. package/src/components/_internal/box-layout.ts +0 -164
  414. package/src/components/_internal/layout.ts +0 -211
  415. package/src/components/box/box.a11y.ts +0 -11
  416. package/src/components/box/box.tsx +0 -38
  417. package/src/components/box/box.types.ts +0 -76
  418. package/src/components/box/index.ts +0 -11
  419. package/src/components/breadcrumb/breadcrumb.a11y.ts +0 -15
  420. package/src/components/breadcrumb/breadcrumb.tsx +0 -123
  421. package/src/components/breadcrumb/breadcrumb.types.ts +0 -74
  422. package/src/components/breadcrumb/index.ts +0 -24
  423. package/src/components/flex/flex.a11y.ts +0 -19
  424. package/src/components/flex/flex.tsx +0 -162
  425. package/src/components/flex/flex.types.ts +0 -51
  426. package/src/components/flex/index.ts +0 -16
  427. package/src/components/inline/index.tsx +0 -28
  428. package/src/components/list-group/index.ts +0 -7
  429. package/src/components/list-group/list-group.tsx +0 -74
  430. package/src/components/list-group/list-group.types.ts +0 -32
  431. package/src/components/navbar/navbar-panel.tsx +0 -62
  432. package/src/components/navbar/navbar.context.ts +0 -22
  433. package/src/components/navbar/navbar.render.tsx +0 -32
  434. package/src/components/navbar/navbar.shared.ts +0 -21
  435. package/src/components/pagination/index.ts +0 -8
  436. package/src/components/pagination/pagination.tsx +0 -158
  437. package/src/components/pagination/pagination.types.ts +0 -41
  438. package/src/components/shell/index.ts +0 -16
  439. package/src/components/shell/shell-nav.types.ts +0 -3
  440. package/src/components/shell/shell-panel.tsx +0 -85
  441. package/src/components/shell/shell-responsive.tsx +0 -246
  442. package/src/components/shell/shell.a11y.ts +0 -20
  443. package/src/components/shell/shell.tsx +0 -74
  444. package/src/components/shell/shell.types.ts +0 -71
  445. package/src/components/sidebar/sidebar-panel.tsx +0 -67
  446. package/src/components/sidebar/sidebar-toggle.tsx +0 -5
  447. package/src/components/sidebar/sidebar.context.ts +0 -40
  448. package/src/components/sidebar/sidebar.shared.ts +0 -12
  449. package/src/components/spacer/index.ts +0 -9
  450. package/src/components/spacer/spacer.a11y.ts +0 -14
  451. package/src/components/spacer/spacer.tsx +0 -61
  452. package/src/components/spacer/spacer.types.ts +0 -31
  453. package/src/components/stack/index.ts +0 -3
  454. package/src/components/stack/stack.a11y.ts +0 -15
  455. package/src/components/stack/stack.tsx +0 -13
  456. package/src/components/stack/stack.types.ts +0 -22
  457. package/src/feedback.ts +0 -6
  458. package/src/layouts.ts +0 -19
  459. package/src/shells.ts +0 -13
  460. package/src/themes/default/styles/actions/toggle.css +0 -50
  461. package/src/themes/default/styles/disclosure/collapsible.css +0 -58
  462. package/src/themes/default/styles/display/list-group.css +0 -84
  463. package/src/themes/default/styles/forms/form.css +0 -5
  464. package/src/themes/default/styles/layout/responsive-layout.css +0 -230
  465. package/src/themes/default/styles/navigation/breadcrumb.css +0 -45
  466. package/src/themes/default/styles/navigation/menu.css +0 -203
  467. package/src/themes/default/styles/navigation/menubar.css +0 -255
  468. package/src/themes/default/styles/navigation/pagination.css +0 -91
  469. package/src/themes/default/styles/shell/theme.css +0 -37
  470. package/templates/theme/styles/actions/toggle.css +0 -50
  471. package/templates/theme/styles/disclosure/collapsible.css +0 -58
  472. package/templates/theme/styles/display/list-group.css +0 -84
  473. package/templates/theme/styles/forms/form.css +0 -5
  474. package/templates/theme/styles/layout/responsive-layout.css +0 -230
  475. package/templates/theme/styles/navigation/breadcrumb.css +0 -45
  476. package/templates/theme/styles/navigation/menu.css +0 -203
  477. package/templates/theme/styles/navigation/menubar.css +0 -255
  478. package/templates/theme/styles/navigation/pagination.css +0 -91
  479. package/templates/theme/styles/shell/theme.css +0 -37
package/src/themes/default/styles/layout/layout.css CHANGED
@@ -1,338 +1,308 @@
1
1
  :where([data-ak-layout="true"]) {
2
- display: var(--ak-display-initial);
3
- margin: var(--ak-m-initial);
4
- margin-block: var(--ak-my-initial);
5
- margin-inline: var(--ak-mx-initial);
6
- margin-top: var(--ak-mt-initial);
7
- margin-right: var(--ak-mr-initial);
8
- margin-bottom: var(--ak-mb-initial);
9
- margin-left: var(--ak-ml-initial);
10
- padding: var(--ak-p-initial);
11
- padding-block: var(--ak-py-initial);
12
- padding-inline: var(--ak-px-initial);
13
- padding-top: var(--ak-pt-initial);
14
- padding-right: var(--ak-pr-initial);
15
- padding-bottom: var(--ak-pb-initial);
16
- padding-left: var(--ak-pl-initial);
17
- width: var(--ak-width-initial);
18
- min-width: var(--ak-min-width-initial);
19
- max-width: var(--ak-max-width-initial);
20
- height: var(--ak-height-initial);
21
- min-height: var(--ak-min-height-initial);
22
- max-height: var(--ak-max-height-initial);
23
- position: var(--ak-position-initial);
24
- inset: var(--ak-inset-initial);
25
- top: var(--ak-top-initial);
26
- right: var(--ak-right-initial);
27
- bottom: var(--ak-bottom-initial);
28
- left: var(--ak-left-initial);
29
- overflow: var(--ak-overflow-initial);
30
- overflow-x: var(--ak-overflow-x-initial);
31
- overflow-y: var(--ak-overflow-y-initial);
32
- flex-basis: var(--ak-flex-basis-initial);
33
- flex-grow: var(--ak-flex-grow-initial);
34
- flex-shrink: var(--ak-flex-shrink-initial);
35
- grid-area: var(--ak-grid-area-initial);
36
- grid-column: var(--ak-grid-column-initial);
37
- grid-column-start: var(--ak-grid-column-start-initial);
38
- grid-column-end: var(--ak-grid-column-end-initial);
39
- grid-row: var(--ak-grid-row-initial);
40
- grid-row-start: var(--ak-grid-row-start-initial);
41
- grid-row-end: var(--ak-grid-row-end-initial);
42
- gap: var(--ak-gap-initial);
43
- column-gap: var(--ak-column-gap-initial);
44
- row-gap: var(--ak-row-gap-initial);
45
- flex-direction: var(--ak-flex-direction-initial);
46
- align-items: var(--ak-align-items-initial);
47
- justify-content: var(--ak-justify-content-initial);
48
- flex-wrap: var(--ak-flex-wrap-initial);
49
- grid-template-areas: var(--ak-grid-template-areas-initial);
50
- grid-template-columns: var(--ak-grid-template-columns-initial);
51
- grid-template-rows: var(--ak-grid-template-rows-initial);
52
- grid-auto-flow: var(--ak-grid-auto-flow-initial);
53
- }
2
+ --ak-display-base: flex;
3
+ --ak-display-sm: var(--ak-display-base);
4
+ --ak-display-md: var(--ak-display-sm);
5
+ --ak-display-lg: var(--ak-display-md);
6
+ --ak-display-xl: var(--ak-display-lg);
7
+ --ak-flex-direction-base: column;
8
+ --ak-flex-direction-sm: var(--ak-flex-direction-base);
9
+ --ak-flex-direction-md: var(--ak-flex-direction-sm);
10
+ --ak-flex-direction-lg: var(--ak-flex-direction-md);
11
+ --ak-flex-direction-xl: var(--ak-flex-direction-lg);
12
+ --ak-flex-wrap-base: nowrap;
13
+ --ak-flex-wrap-sm: var(--ak-flex-wrap-base);
14
+ --ak-align-items-base: stretch;
15
+ --ak-align-items-sm: var(--ak-align-items-base);
16
+ --ak-align-items-md: var(--ak-align-items-sm);
17
+ --ak-align-items-lg: var(--ak-align-items-md);
18
+ --ak-align-items-xl: var(--ak-align-items-lg);
19
+ --ak-justify-content-base: flex-start;
20
+ --ak-justify-content-sm: var(--ak-justify-content-base);
21
+ --ak-justify-content-md: var(--ak-justify-content-sm);
22
+ --ak-justify-content-lg: var(--ak-justify-content-md);
23
+ --ak-justify-content-xl: var(--ak-justify-content-lg);
24
+ --ak-gap-base: 0;
25
+ --ak-gap-sm: var(--ak-gap-base);
26
+ --ak-gap-md: var(--ak-gap-sm);
27
+ --ak-gap-lg: var(--ak-gap-md);
28
+ --ak-gap-xl: var(--ak-gap-lg);
29
+ --ak-flex-grow-base: 0;
30
+ --ak-flex-grow-sm: var(--ak-flex-grow-base);
31
+ --ak-flex-grow-md: var(--ak-flex-grow-sm);
32
+ --ak-flex-grow-lg: var(--ak-flex-grow-md);
33
+ --ak-flex-shrink-base: 1;
34
+ --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
35
+ --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
36
+ --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
37
+ --ak-flex-basis-base: auto;
38
+ --ak-flex-basis-sm: var(--ak-flex-basis-base);
39
+ --ak-flex-basis-md: var(--ak-flex-basis-sm);
40
+ --ak-flex-basis-lg: var(--ak-flex-basis-md);
41
+ --ak-min-width-base: 0;
42
+ --ak-min-width-sm: var(--ak-min-width-base);
43
+ --ak-min-width-md: var(--ak-min-width-sm);
44
+ --ak-min-width-lg: var(--ak-min-width-md);
45
+ --ak-max-width-base: none;
46
+ --ak-max-width-sm: var(--ak-max-width-base);
47
+ --ak-max-width-md: var(--ak-max-width-sm);
48
+ --ak-max-width-lg: var(--ak-max-width-md);
49
+ --ak-width-base: auto;
50
+ --ak-width-sm: var(--ak-width-base);
51
+ --ak-width-md: var(--ak-width-sm);
52
+ --ak-width-lg: var(--ak-width-md);
53
+ --ak-min-height-base: auto;
54
+ --ak-min-height-sm: var(--ak-min-height-base);
55
+ --ak-min-height-md: var(--ak-min-height-sm);
56
+ --ak-min-height-lg: var(--ak-min-height-md);
57
+ --ak-max-height-base: none;
58
+ --ak-max-height-sm: var(--ak-max-height-base);
59
+ --ak-height-base: auto;
60
+ --ak-height-sm: var(--ak-height-base);
61
+ --ak-height-md: var(--ak-height-sm);
62
+ --ak-height-lg: var(--ak-height-md);
63
+ --ak-m-base: 0;
64
+ --ak-m-sm: var(--ak-m-base);
65
+ --ak-m-md: var(--ak-m-sm);
66
+ --ak-m-lg: var(--ak-m-md);
67
+ --ak-mx-base: var(--ak-m-base);
68
+ --ak-mx-sm: var(--ak-mx-base);
69
+ --ak-mx-md: var(--ak-mx-sm);
70
+ --ak-mx-lg: var(--ak-mx-md);
71
+ --ak-my-base: var(--ak-m-base);
72
+ --ak-my-sm: var(--ak-my-base);
73
+ --ak-my-md: var(--ak-my-sm);
74
+ --ak-my-lg: var(--ak-my-md);
75
+ --ak-p-base: 0;
76
+ --ak-p-sm: var(--ak-p-base);
77
+ --ak-p-md: var(--ak-p-sm);
78
+ --ak-p-lg: var(--ak-p-md);
79
+ --ak-px-base: var(--ak-p-base);
80
+ --ak-px-sm: var(--ak-px-base);
81
+ --ak-px-md: var(--ak-px-sm);
82
+ --ak-px-lg: var(--ak-px-md);
83
+ --ak-py-base: var(--ak-p-base);
84
+ --ak-py-sm: var(--ak-py-base);
85
+ --ak-py-md: var(--ak-py-sm);
86
+ --ak-py-lg: var(--ak-py-md);
87
+ --ak-position-base: static;
88
+ --ak-position-sm: var(--ak-position-base);
89
+ --ak-position-md: var(--ak-position-sm);
90
+ --ak-position-lg: var(--ak-position-md);
91
+ --ak-inset-base: auto;
92
+ --ak-inset-sm: var(--ak-inset-base);
93
+ --ak-top-base: auto;
94
+ --ak-top-sm: var(--ak-top-base);
95
+ --ak-top-md: var(--ak-top-sm);
96
+ --ak-top-lg: var(--ak-top-md);
97
+ --ak-right-base: auto;
98
+ --ak-right-sm: var(--ak-right-base);
99
+ --ak-bottom-base: auto;
100
+ --ak-bottom-sm: var(--ak-bottom-base);
101
+ --ak-left-base: auto;
102
+ --ak-left-sm: var(--ak-left-base);
103
+ --ak-z-index-base: auto;
104
+ --ak-z-index-sm: var(--ak-z-index-base);
105
+ --ak-z-index-md: var(--ak-z-index-sm);
106
+ --ak-z-index-lg: var(--ak-z-index-md);
107
+ --ak-overflow-base: visible;
108
+ --ak-overflow-sm: var(--ak-overflow-base);
109
+ --ak-overflow-x-base: var(--ak-overflow-base);
110
+ --ak-overflow-x-sm: var(--ak-overflow-x-base);
111
+ --ak-overflow-y-base: var(--ak-overflow-base);
112
+ --ak-overflow-y-sm: var(--ak-overflow-y-base);
113
+ --ak-border-base: 0 solid transparent;
114
+ --ak-border-sm: var(--ak-border-base);
115
+ --ak-border-md: var(--ak-border-sm);
116
+ --ak-border-lg: var(--ak-border-md);
117
+ --ak-border-bottom-base: var(--ak-border-base);
118
+ --ak-border-bottom-sm: var(--ak-border-bottom-base);
119
+ --ak-border-bottom-md: var(--ak-border-bottom-sm);
120
+ --ak-border-bottom-lg: var(--ak-border-bottom-md);
121
+ --ak-border-right-base: var(--ak-border-base);
122
+ --ak-border-right-sm: var(--ak-border-right-base);
123
+ --ak-border-right-md: var(--ak-border-right-sm);
124
+ --ak-border-right-lg: var(--ak-border-right-md);
125
+ --ak-border-radius-base: 0;
126
+ --ak-border-radius-sm: var(--ak-border-radius-base);
127
+ --ak-border-radius-md: var(--ak-border-radius-sm);
128
+ --ak-border-radius-lg: var(--ak-border-radius-md);
129
+ --ak-background-base: transparent;
130
+ --ak-background-sm: var(--ak-background-base);
131
+ --ak-background-md: var(--ak-background-sm);
132
+ --ak-background-lg: var(--ak-background-md);
133
+ --ak-box-shadow-base: none;
134
+ --ak-box-shadow-sm: var(--ak-box-shadow-base);
135
+ --ak-box-shadow-md: var(--ak-box-shadow-sm);
136
+ --ak-box-shadow-lg: var(--ak-box-shadow-md);
54
137
 
55
- :where([data-slot="container"]) {
56
- --ak-container-inline-size: 100%;
57
- display: block;
58
138
  box-sizing: border-box;
59
- width: var(--ak-width-initial, 100%);
60
- max-width: min(100%, var(--ak-max-width-initial, var(--ak-container-inline-size)));
61
- margin-left: var(--ak-ml-initial, auto);
62
- margin-right: var(--ak-mr-initial, auto);
63
- padding-left: var(--ak-pl-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
64
- padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
65
- }
66
-
67
- :where([data-slot="container"][data-size="initial:fluid"]) {
68
- --ak-container-inline-size: 100%;
69
- }
70
-
71
- :where([data-slot="container"][data-variant="default"]),
72
- :where([data-slot="container"][data-variant="sm"]),
73
- :where([data-slot="container"][data-variant="md"]),
74
- :where([data-slot="container"][data-variant="lg"]),
75
- :where([data-slot="container"][data-variant="xl"]),
76
- :where([data-slot="container"][data-variant="xxl"]),
77
- :where([data-slot="container"][data-variant="fluid"]) {
78
- --ak-container-inline-size: 100%;
79
- }
80
-
81
- :where([data-slot="container"][data-size="initial:1"]),
82
- :where([data-slot="container"][data-size="initial:sm"]),
83
- :where([data-slot="container"][data-max-width="initial:1"]),
84
- :where([data-slot="container"][data-max-width="initial:sm"]) {
85
- --ak-container-inline-size: var(--ak-container-1);
86
- }
87
-
88
- :where([data-slot="container"][data-size="initial:2"]),
89
- :where([data-slot="container"][data-size="initial:md"]),
90
- :where([data-slot="container"][data-max-width="initial:2"]),
91
- :where([data-slot="container"][data-max-width="initial:md"]) {
92
- --ak-container-inline-size: var(--ak-container-2);
93
- }
94
-
95
- :where([data-slot="container"][data-size="initial:3"]),
96
- :where([data-slot="container"][data-size="initial:lg"]),
97
- :where([data-slot="container"][data-max-width="initial:3"]),
98
- :where([data-slot="container"][data-max-width="initial:lg"]) {
99
- --ak-container-inline-size: var(--ak-container-3);
100
- }
101
-
102
- :where([data-slot="container"][data-size="initial:4"]),
103
- :where([data-slot="container"][data-size="initial:xl"]),
104
- :where([data-slot="container"][data-max-width="initial:4"]),
105
- :where([data-slot="container"][data-max-width="initial:xl"]) {
106
- --ak-container-inline-size: var(--ak-container-4);
107
- }
108
-
109
- :where([data-slot="container"][data-align="initial:left"]) {
110
- margin-left: var(--ak-ml-initial, 0);
111
- margin-right: var(--ak-mr-initial, auto);
112
- }
113
-
114
- :where([data-slot="container"][data-align="initial:right"]) {
115
- margin-left: var(--ak-ml-initial, auto);
116
- margin-right: var(--ak-mr-initial, 0);
117
- }
118
-
119
- @media (min-width: 36rem) {
120
- :where([data-slot="container"][data-variant="default"]),
121
- :where([data-slot="container"][data-variant="sm"]) {
122
- --ak-container-inline-size: 540px;
123
- }
139
+ display: var(--ak-display-base, flex);
140
+ flex-direction: var(--ak-flex-direction-base, column);
141
+ flex-wrap: var(--ak-flex-wrap-base, nowrap);
142
+ align-items: var(--ak-align-items-base, stretch);
143
+ justify-content: var(--ak-justify-content-base, flex-start);
144
+ gap: var(--ak-gap-base, 0);
145
+ flex-grow: var(--ak-flex-grow-base, 0);
146
+ flex-shrink: var(--ak-flex-shrink-base, 1);
147
+ flex-basis: var(--ak-flex-basis-base, auto);
148
+ min-width: var(--ak-min-width-base, 0);
149
+ max-width: var(--ak-max-width-base, none);
150
+ width: var(--ak-width-base, auto);
151
+ min-height: var(--ak-min-height-base, auto);
152
+ max-height: var(--ak-max-height-base, none);
153
+ height: var(--ak-height-base, auto);
154
+ margin: var(--ak-m-base, 0);
155
+ margin-inline: var(--ak-mx-base, var(--ak-m-base, 0));
156
+ margin-block: var(--ak-my-base, var(--ak-m-base, 0));
157
+ padding: var(--ak-p-base, 0);
158
+ padding-inline: var(--ak-px-base, var(--ak-p-base, 0));
159
+ padding-block: var(--ak-py-base, var(--ak-p-base, 0));
160
+ position: var(--ak-position-base, static);
161
+ inset: var(--ak-inset-base, auto);
162
+ top: var(--ak-top-base, auto);
163
+ right: var(--ak-right-base, auto);
164
+ bottom: var(--ak-bottom-base, auto);
165
+ left: var(--ak-left-base, auto);
166
+ z-index: var(--ak-z-index-base, auto);
167
+ overflow: var(--ak-overflow-base, visible);
168
+ overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
169
+ overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
170
+ border: var(--ak-border-base, 0 solid transparent);
171
+ border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
172
+ border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
173
+ border-radius: var(--ak-border-radius-base, 0);
174
+ background: var(--ak-background-base, transparent);
175
+ box-shadow: var(--ak-box-shadow-base, none);
124
176
  }
125
177
 
126
178
  @media (min-width: 40rem) {
127
179
  :where([data-ak-layout="true"]) {
128
- display: var(--ak-display-sm, var(--ak-display-initial));
129
- margin: var(--ak-m-sm, var(--ak-m-initial));
130
- margin-block: var(--ak-my-sm, var(--ak-my-initial));
131
- margin-inline: var(--ak-mx-sm, var(--ak-mx-initial));
132
- margin-top: var(--ak-mt-sm, var(--ak-mt-initial));
133
- margin-right: var(--ak-mr-sm, var(--ak-mr-initial));
134
- margin-bottom: var(--ak-mb-sm, var(--ak-mb-initial));
135
- margin-left: var(--ak-ml-sm, var(--ak-ml-initial));
136
- padding: var(--ak-p-sm, var(--ak-p-initial));
137
- padding-block: var(--ak-py-sm, var(--ak-py-initial));
138
- padding-inline: var(--ak-px-sm, var(--ak-px-initial));
139
- padding-top: var(--ak-pt-sm, var(--ak-pt-initial));
140
- padding-right: var(--ak-pr-sm, var(--ak-pr-initial));
141
- padding-bottom: var(--ak-pb-sm, var(--ak-pb-initial));
142
- padding-left: var(--ak-pl-sm, var(--ak-pl-initial));
143
- width: var(--ak-width-sm, var(--ak-width-initial));
144
- min-width: var(--ak-min-width-sm, var(--ak-min-width-initial));
145
- max-width: var(--ak-max-width-sm, var(--ak-max-width-initial));
146
- height: var(--ak-height-sm, var(--ak-height-initial));
147
- min-height: var(--ak-min-height-sm, var(--ak-min-height-initial));
148
- max-height: var(--ak-max-height-sm, var(--ak-max-height-initial));
149
- position: var(--ak-position-sm, var(--ak-position-initial));
150
- inset: var(--ak-inset-sm, var(--ak-inset-initial));
151
- top: var(--ak-top-sm, var(--ak-top-initial));
152
- right: var(--ak-right-sm, var(--ak-right-initial));
153
- bottom: var(--ak-bottom-sm, var(--ak-bottom-initial));
154
- left: var(--ak-left-sm, var(--ak-left-initial));
155
- overflow: var(--ak-overflow-sm, var(--ak-overflow-initial));
156
- overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-initial));
157
- overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-initial));
158
- flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-initial));
159
- flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-initial));
160
- flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial));
161
- grid-area: var(--ak-grid-area-sm, var(--ak-grid-area-initial));
162
- grid-column: var(--ak-grid-column-sm, var(--ak-grid-column-initial));
163
- grid-column-start: var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial));
164
- grid-column-end: var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial));
165
- grid-row: var(--ak-grid-row-sm, var(--ak-grid-row-initial));
166
- grid-row-start: var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial));
167
- grid-row-end: var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial));
168
- gap: var(--ak-gap-sm, var(--ak-gap-initial));
169
- column-gap: var(--ak-column-gap-sm, var(--ak-column-gap-initial));
170
- row-gap: var(--ak-row-gap-sm, var(--ak-row-gap-initial));
171
- flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-initial));
172
- align-items: var(--ak-align-items-sm, var(--ak-align-items-initial));
173
- justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-initial));
174
- flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial));
175
- grid-template-areas: var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial));
176
- grid-template-columns: var(
177
- --ak-grid-template-columns-sm,
178
- var(--ak-grid-template-columns-initial)
179
- );
180
- grid-template-rows: var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial));
181
- grid-auto-flow: var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial));
182
- }
183
-
184
- :where([data-slot="container"]) {
185
- display: block;
186
- width: var(--ak-width-sm, var(--ak-width-initial, 100%));
187
- max-width: min(
188
- 100%,
189
- var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
190
- );
191
- margin-left: var(--ak-ml-sm, var(--ak-ml-initial, auto));
192
- margin-right: var(--ak-mr-sm, var(--ak-mr-initial, auto));
193
- padding-left: var(
194
- --ak-pl-sm,
195
- var(--ak-pl-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
196
- );
197
- padding-right: var(
198
- --ak-pr-sm,
199
- var(--ak-pr-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
180
+ display: var(--ak-display-sm, var(--ak-display-base, flex));
181
+ flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column));
182
+ flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-base, nowrap));
183
+ align-items: var(--ak-align-items-sm, var(--ak-align-items-base, stretch));
184
+ justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start));
185
+ gap: var(--ak-gap-sm, var(--ak-gap-base, 0));
186
+ flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0));
187
+ flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1));
188
+ flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-base, auto));
189
+ min-width: var(--ak-min-width-sm, var(--ak-min-width-base, 0));
190
+ max-width: var(--ak-max-width-sm, var(--ak-max-width-base, none));
191
+ width: var(--ak-width-sm, var(--ak-width-base, auto));
192
+ min-height: var(--ak-min-height-sm, var(--ak-min-height-base, auto));
193
+ max-height: var(--ak-max-height-sm, var(--ak-max-height-base, none));
194
+ height: var(--ak-height-sm, var(--ak-height-base, auto));
195
+ margin: var(--ak-m-sm, var(--ak-m-base, 0));
196
+ margin-inline: var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-sm, var(--ak-m-base, 0))));
197
+ margin-block: var(--ak-my-sm, var(--ak-my-base, var(--ak-m-sm, var(--ak-m-base, 0))));
198
+ padding: var(--ak-p-sm, var(--ak-p-base, 0));
199
+ padding-inline: var(--ak-px-sm, var(--ak-px-base, var(--ak-p-sm, var(--ak-p-base, 0))));
200
+ padding-block: var(--ak-py-sm, var(--ak-py-base, var(--ak-p-sm, var(--ak-p-base, 0))));
201
+ position: var(--ak-position-sm, var(--ak-position-base, static));
202
+ inset: var(--ak-inset-sm, var(--ak-inset-base, auto));
203
+ top: var(--ak-top-sm, var(--ak-top-base, auto));
204
+ right: var(--ak-right-sm, var(--ak-right-base, auto));
205
+ bottom: var(--ak-bottom-sm, var(--ak-bottom-base, auto));
206
+ left: var(--ak-left-sm, var(--ak-left-base, auto));
207
+ z-index: var(--ak-z-index-sm, var(--ak-z-index-base, auto));
208
+ overflow: var(--ak-overflow-sm, var(--ak-overflow-base, visible));
209
+ overflow-x: var(
210
+ --ak-overflow-x-sm,
211
+ var(--ak-overflow-x-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
212
+ );
213
+ overflow-y: var(
214
+ --ak-overflow-y-sm,
215
+ var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
216
+ );
217
+ border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
218
+ border-bottom: var(
219
+ --ak-border-bottom-sm,
220
+ var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
221
+ );
222
+ border-right: var(
223
+ --ak-border-right-sm,
224
+ var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
200
225
  );
226
+ border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
227
+ background: var(--ak-background-sm, var(--ak-background-base, transparent));
228
+ box-shadow: var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none));
201
229
  }
202
230
  }
203
231
 
204
232
  @media (min-width: 48rem) {
205
- :where([data-slot="container"][data-variant="default"]),
206
- :where([data-slot="container"][data-variant="sm"]),
207
- :where([data-slot="container"][data-variant="md"]) {
208
- --ak-container-inline-size: 720px;
209
- }
210
-
211
233
  :where([data-ak-layout="true"]) {
212
- display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)));
213
- margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)));
214
- margin-block: var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial)));
215
- margin-inline: var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial)));
216
- margin-top: var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial)));
217
- margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial)));
218
- margin-bottom: var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial)));
219
- margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial)));
220
- padding: var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)));
221
- padding-block: var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial)));
222
- padding-inline: var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial)));
223
- padding-top: var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial)));
224
- padding-right: var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial)));
225
- padding-bottom: var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial)));
226
- padding-left: var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial)));
227
- width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial)));
228
- min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)));
229
- max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)));
230
- height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial)));
231
- min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)));
232
- max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)));
233
- position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)));
234
- inset: var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial)));
235
- top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial)));
236
- right: var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial)));
237
- bottom: var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial)));
238
- left: var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial)));
239
- overflow: var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)));
240
- overflow-x: var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)));
241
- overflow-y: var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)));
242
- flex-basis: var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)));
243
- flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)));
244
- flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)));
245
- grid-area: var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)));
246
- grid-column: var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)));
247
- grid-column-start: var(
248
- --ak-grid-column-start-md,
249
- var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
250
- );
251
- grid-column-end: var(
252
- --ak-grid-column-end-md,
253
- var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial))
254
- );
255
- grid-row: var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)));
256
- grid-row-start: var(
257
- --ak-grid-row-start-md,
258
- var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial))
259
- );
260
- grid-row-end: var(
261
- --ak-grid-row-end-md,
262
- var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial))
263
- );
264
- gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial)));
265
- column-gap: var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)));
266
- row-gap: var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)));
234
+ display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)));
267
235
  flex-direction: var(
268
236
  --ak-flex-direction-md,
269
- var(--ak-flex-direction-sm, var(--ak-flex-direction-initial))
237
+ var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
238
+ );
239
+ align-items: var(
240
+ --ak-align-items-md,
241
+ var(--ak-align-items-sm, var(--ak-align-items-base, stretch))
270
242
  );
271
- align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)));
272
243
  justify-content: var(
273
244
  --ak-justify-content-md,
274
- var(--ak-justify-content-sm, var(--ak-justify-content-initial))
275
- );
276
- flex-wrap: var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)));
277
- grid-template-areas: var(
278
- --ak-grid-template-areas-md,
279
- var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
280
- );
281
- grid-template-columns: var(
282
- --ak-grid-template-columns-md,
283
- var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
245
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
246
+ );
247
+ gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0)));
248
+ flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)));
249
+ flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)));
250
+ min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)));
251
+ max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
252
+ width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
253
+ min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
254
+ height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
255
+ margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
256
+ margin-inline: var(
257
+ --ak-mx-md,
258
+ var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
284
259
  );
285
- grid-template-rows: var(
286
- --ak-grid-template-rows-md,
287
- var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
260
+ margin-block: var(
261
+ --ak-my-md,
262
+ var(--ak-my-sm, var(--ak-my-base, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
288
263
  );
289
- grid-auto-flow: var(
290
- --ak-grid-auto-flow-md,
291
- var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial))
264
+ padding: var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)));
265
+ padding-inline: var(
266
+ --ak-px-md,
267
+ var(--ak-px-sm, var(--ak-px-base, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
292
268
  );
293
- }
294
-
295
- :where([data-slot="container"]) {
296
- display: block;
297
- width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)));
298
- max-width: min(
299
- 100%,
300
- var(
301
- --ak-max-width-md,
302
- var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
303
- )
269
+ padding-block: var(
270
+ --ak-py-md,
271
+ var(--ak-py-sm, var(--ak-py-base, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
304
272
  );
305
- margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto)));
306
- margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto)));
307
- padding-left: var(
308
- --ak-pl-md,
273
+ position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)));
274
+ top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
275
+ z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
276
+ border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
277
+ border-bottom: var(
278
+ --ak-border-bottom-md,
309
279
  var(
310
- --ak-pl-sm,
280
+ --ak-border-bottom-sm,
311
281
  var(
312
- --ak-pl-initial,
313
- var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
282
+ --ak-border-bottom-base,
283
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
314
284
  )
315
285
  )
316
286
  );
317
- padding-right: var(
318
- --ak-pr-md,
287
+ border-right: var(
288
+ --ak-border-right-md,
319
289
  var(
320
- --ak-pr-sm,
290
+ --ak-border-right-sm,
321
291
  var(
322
- --ak-pr-initial,
323
- var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
292
+ --ak-border-right-base,
293
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
324
294
  )
325
295
  )
326
296
  );
327
- }
328
- }
329
-
330
- @media (min-width: 62rem) {
331
- :where([data-slot="container"][data-variant="default"]),
332
- :where([data-slot="container"][data-variant="sm"]),
333
- :where([data-slot="container"][data-variant="md"]),
334
- :where([data-slot="container"][data-variant="lg"]) {
335
- --ak-container-inline-size: 960px;
297
+ border-radius: var(
298
+ --ak-border-radius-md,
299
+ var(--ak-border-radius-sm, var(--ak-border-radius-base, 0))
300
+ );
301
+ background: var(
302
+ --ak-background-md,
303
+ var(--ak-background-sm, var(--ak-background-base, transparent))
304
+ );
305
+ box-shadow: var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)));
336
306
  }
337
307
  }
338
308
 
@@ -340,216 +310,151 @@
340
310
  :where([data-ak-layout="true"]) {
341
311
  display: var(
342
312
  --ak-display-lg,
343
- var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)))
344
- );
345
- margin: var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial))));
346
- margin-block: var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial))));
347
- margin-inline: var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial))));
348
- margin-top: var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial))));
349
- margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial))));
350
- margin-bottom: var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial))));
351
- margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial))));
352
- padding: var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial))));
353
- padding-block: var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial))));
354
- padding-inline: var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial))));
355
- padding-top: var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial))));
356
- padding-right: var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial))));
357
- padding-bottom: var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial))));
358
- padding-left: var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial))));
359
- width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial))));
360
- min-width: var(
361
- --ak-min-width-lg,
362
- var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)))
363
- );
364
- max-width: var(
365
- --ak-max-width-lg,
366
- var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)))
367
- );
368
- height: var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial))));
369
- min-height: var(
370
- --ak-min-height-lg,
371
- var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)))
372
- );
373
- max-height: var(
374
- --ak-max-height-lg,
375
- var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)))
376
- );
377
- position: var(
378
- --ak-position-lg,
379
- var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)))
380
- );
381
- inset: var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial))));
382
- top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial))));
383
- right: var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial))));
384
- bottom: var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial))));
385
- left: var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial))));
386
- overflow: var(
387
- --ak-overflow-lg,
388
- var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)))
313
+ var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)))
389
314
  );
390
- overflow-x: var(
391
- --ak-overflow-x-lg,
392
- var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)))
315
+ flex-direction: var(
316
+ --ak-flex-direction-lg,
317
+ var(
318
+ --ak-flex-direction-md,
319
+ var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
320
+ )
393
321
  );
394
- overflow-y: var(
395
- --ak-overflow-y-lg,
396
- var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)))
322
+ align-items: var(
323
+ --ak-align-items-lg,
324
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))
397
325
  );
398
- flex-basis: var(
399
- --ak-flex-basis-lg,
400
- var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)))
326
+ justify-content: var(
327
+ --ak-justify-content-lg,
328
+ var(
329
+ --ak-justify-content-md,
330
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
331
+ )
401
332
  );
333
+ gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))));
402
334
  flex-grow: var(
403
335
  --ak-flex-grow-lg,
404
- var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)))
336
+ var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
405
337
  );
406
338
  flex-shrink: var(
407
339
  --ak-flex-shrink-lg,
408
- var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)))
409
- );
410
- grid-area: var(
411
- --ak-grid-area-lg,
412
- var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)))
413
- );
414
- grid-column: var(
415
- --ak-grid-column-lg,
416
- var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)))
417
- );
418
- grid-column-start: var(
419
- --ak-grid-column-start-lg,
420
- var(
421
- --ak-grid-column-start-md,
422
- var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
423
- )
340
+ var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))
424
341
  );
425
- grid-column-end: var(
426
- --ak-grid-column-end-lg,
427
- var(--ak-grid-column-end-md, var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial)))
428
- );
429
- grid-row: var(
430
- --ak-grid-row-lg,
431
- var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)))
432
- );
433
- grid-row-start: var(
434
- --ak-grid-row-start-lg,
435
- var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)))
436
- );
437
- grid-row-end: var(
438
- --ak-grid-row-end-lg,
439
- var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)))
440
- );
441
- gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial))));
442
- column-gap: var(
443
- --ak-column-gap-lg,
444
- var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)))
445
- );
446
- row-gap: var(
447
- --ak-row-gap-lg,
448
- var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)))
449
- );
450
- flex-direction: var(
451
- --ak-flex-direction-lg,
452
- var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)))
342
+ min-width: var(
343
+ --ak-min-width-lg,
344
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
453
345
  );
454
- align-items: var(
455
- --ak-align-items-lg,
456
- var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)))
346
+ max-width: var(
347
+ --ak-max-width-lg,
348
+ var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)))
457
349
  );
458
- justify-content: var(
459
- --ak-justify-content-lg,
460
- var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-initial)))
350
+ width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))));
351
+ min-height: var(
352
+ --ak-min-height-lg,
353
+ var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
461
354
  );
462
- flex-wrap: var(
463
- --ak-flex-wrap-lg,
464
- var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)))
355
+ height: var(
356
+ --ak-height-lg,
357
+ var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)))
465
358
  );
466
- grid-template-areas: var(
467
- --ak-grid-template-areas-lg,
359
+ margin: var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))));
360
+ margin-inline: var(
361
+ --ak-mx-lg,
468
362
  var(
469
- --ak-grid-template-areas-md,
470
- var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
363
+ --ak-mx-md,
364
+ var(
365
+ --ak-mx-sm,
366
+ var(--ak-mx-base, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
367
+ )
471
368
  )
472
369
  );
473
- grid-template-columns: var(
474
- --ak-grid-template-columns-lg,
370
+ margin-block: var(
371
+ --ak-my-lg,
475
372
  var(
476
- --ak-grid-template-columns-md,
477
- var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
373
+ --ak-my-md,
374
+ var(
375
+ --ak-my-sm,
376
+ var(--ak-my-base, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
377
+ )
478
378
  )
479
379
  );
480
- grid-template-rows: var(
481
- --ak-grid-template-rows-lg,
380
+ padding: var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0))));
381
+ padding-inline: var(
382
+ --ak-px-lg,
482
383
  var(
483
- --ak-grid-template-rows-md,
484
- var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
384
+ --ak-px-md,
385
+ var(
386
+ --ak-px-sm,
387
+ var(--ak-px-base, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
388
+ )
485
389
  )
486
390
  );
487
- grid-auto-flow: var(
488
- --ak-grid-auto-flow-lg,
489
- var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)))
490
- );
491
- }
492
-
493
- :where([data-slot="container"]) {
494
- display: block;
495
- width: var(
496
- --ak-width-lg,
497
- var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)))
498
- );
499
- max-width: min(
500
- 100%,
391
+ padding-block: var(
392
+ --ak-py-lg,
501
393
  var(
502
- --ak-max-width-lg,
394
+ --ak-py-md,
503
395
  var(
504
- --ak-max-width-md,
505
- var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
396
+ --ak-py-sm,
397
+ var(--ak-py-base, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
506
398
  )
507
399
  )
508
400
  );
509
- margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto))));
510
- margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto))));
511
- padding-left: var(
512
- --ak-pl-lg,
401
+ position: var(
402
+ --ak-position-lg,
403
+ var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)))
404
+ );
405
+ top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))));
406
+ z-index: var(
407
+ --ak-z-index-lg,
408
+ var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)))
409
+ );
410
+ border: var(
411
+ --ak-border-lg,
412
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
413
+ );
414
+ border-bottom: var(
415
+ --ak-border-bottom-lg,
513
416
  var(
514
- --ak-pl-md,
417
+ --ak-border-bottom-md,
515
418
  var(
516
- --ak-pl-sm,
419
+ --ak-border-bottom-sm,
517
420
  var(
518
- --ak-pl-initial,
421
+ --ak-border-bottom-base,
519
422
  var(
520
- --ak-px-lg,
521
- var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
423
+ --ak-border-lg,
424
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
522
425
  )
523
426
  )
524
427
  )
525
428
  )
526
429
  );
527
- padding-right: var(
528
- --ak-pr-lg,
430
+ border-right: var(
431
+ --ak-border-right-lg,
529
432
  var(
530
- --ak-pr-md,
433
+ --ak-border-right-md,
531
434
  var(
532
- --ak-pr-sm,
435
+ --ak-border-right-sm,
533
436
  var(
534
- --ak-pr-initial,
437
+ --ak-border-right-base,
535
438
  var(
536
- --ak-px-lg,
537
- var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
439
+ --ak-border-lg,
440
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
538
441
  )
539
442
  )
540
443
  )
541
444
  )
542
445
  );
543
- }
544
- }
545
-
546
- @media (min-width: 75rem) {
547
- :where([data-slot="container"][data-variant="default"]),
548
- :where([data-slot="container"][data-variant="sm"]),
549
- :where([data-slot="container"][data-variant="md"]),
550
- :where([data-slot="container"][data-variant="lg"]),
551
- :where([data-slot="container"][data-variant="xl"]) {
552
- --ak-container-inline-size: 1140px;
446
+ border-radius: var(
447
+ --ak-border-radius-lg,
448
+ var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)))
449
+ );
450
+ background: var(
451
+ --ak-background-lg,
452
+ var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)))
453
+ );
454
+ box-shadow: var(
455
+ --ak-box-shadow-lg,
456
+ var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)))
457
+ );
553
458
  }
554
459
  }
555
460
 
@@ -557,245 +462,23 @@
557
462
  :where([data-ak-layout="true"]) {
558
463
  display: var(
559
464
  --ak-display-xl,
560
- var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial))))
561
- );
562
- margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)))));
563
- margin-block: var(
564
- --ak-my-xl,
565
- var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial))))
566
- );
567
- margin-inline: var(
568
- --ak-mx-xl,
569
- var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial))))
570
- );
571
- margin-top: var(
572
- --ak-mt-xl,
573
- var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial))))
574
- );
575
- margin-right: var(
576
- --ak-mr-xl,
577
- var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial))))
578
- );
579
- margin-bottom: var(
580
- --ak-mb-xl,
581
- var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial))))
582
- );
583
- margin-left: var(
584
- --ak-ml-xl,
585
- var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial))))
586
- );
587
- padding: var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)))));
588
- padding-block: var(
589
- --ak-py-xl,
590
- var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial))))
591
- );
592
- padding-inline: var(
593
- --ak-px-xl,
594
- var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial))))
595
- );
596
- padding-top: var(
597
- --ak-pt-xl,
598
- var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial))))
599
- );
600
- padding-right: var(
601
- --ak-pr-xl,
602
- var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial))))
603
- );
604
- padding-bottom: var(
605
- --ak-pb-xl,
606
- var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial))))
607
- );
608
- padding-left: var(
609
- --ak-pl-xl,
610
- var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial))))
611
- );
612
- width: var(
613
- --ak-width-xl,
614
- var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial))))
615
- );
616
- min-width: var(
617
- --ak-min-width-xl,
618
- var(
619
- --ak-min-width-lg,
620
- var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)))
621
- )
622
- );
623
- max-width: var(
624
- --ak-max-width-xl,
625
- var(
626
- --ak-max-width-lg,
627
- var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)))
628
- )
629
- );
630
- height: var(
631
- --ak-height-xl,
632
- var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial))))
633
- );
634
- min-height: var(
635
- --ak-min-height-xl,
636
- var(
637
- --ak-min-height-lg,
638
- var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)))
639
- )
640
- );
641
- max-height: var(
642
- --ak-max-height-xl,
643
- var(
644
- --ak-max-height-lg,
645
- var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)))
646
- )
647
- );
648
- position: var(
649
- --ak-position-xl,
650
- var(
651
- --ak-position-lg,
652
- var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)))
653
- )
654
- );
655
- inset: var(
656
- --ak-inset-xl,
657
- var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial))))
658
- );
659
- top: var(
660
- --ak-top-xl,
661
- var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial))))
662
- );
663
- right: var(
664
- --ak-right-xl,
665
- var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial))))
666
- );
667
- bottom: var(
668
- --ak-bottom-xl,
669
- var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial))))
670
- );
671
- left: var(
672
- --ak-left-xl,
673
- var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial))))
674
- );
675
- overflow: var(
676
- --ak-overflow-xl,
677
- var(
678
- --ak-overflow-lg,
679
- var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)))
680
- )
681
- );
682
- overflow-x: var(
683
- --ak-overflow-x-xl,
684
- var(
685
- --ak-overflow-x-lg,
686
- var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)))
687
- )
688
- );
689
- overflow-y: var(
690
- --ak-overflow-y-xl,
691
- var(
692
- --ak-overflow-y-lg,
693
- var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)))
694
- )
695
- );
696
- flex-basis: var(
697
- --ak-flex-basis-xl,
698
- var(
699
- --ak-flex-basis-lg,
700
- var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)))
701
- )
702
- );
703
- flex-grow: var(
704
- --ak-flex-grow-xl,
705
- var(
706
- --ak-flex-grow-lg,
707
- var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)))
708
- )
709
- );
710
- flex-shrink: var(
711
- --ak-flex-shrink-xl,
712
- var(
713
- --ak-flex-shrink-lg,
714
- var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)))
715
- )
716
- );
717
- grid-area: var(
718
- --ak-grid-area-xl,
719
- var(
720
- --ak-grid-area-lg,
721
- var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)))
722
- )
723
- );
724
- grid-column: var(
725
- --ak-grid-column-xl,
726
- var(
727
- --ak-grid-column-lg,
728
- var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)))
729
- )
730
- );
731
- grid-column-start: var(
732
- --ak-grid-column-start-xl,
733
- var(
734
- --ak-grid-column-start-lg,
735
- var(
736
- --ak-grid-column-start-md,
737
- var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
738
- )
739
- )
740
- );
741
- grid-column-end: var(
742
- --ak-grid-column-end-xl,
743
- var(
744
- --ak-grid-column-end-lg,
745
- var(
746
- --ak-grid-column-end-md,
747
- var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial))
748
- )
749
- )
750
- );
751
- grid-row: var(
752
- --ak-grid-row-xl,
753
- var(
754
- --ak-grid-row-lg,
755
- var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)))
756
- )
757
- );
758
- grid-row-start: var(
759
- --ak-grid-row-start-xl,
760
- var(
761
- --ak-grid-row-start-lg,
762
- var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)))
763
- )
764
- );
765
- grid-row-end: var(
766
- --ak-grid-row-end-xl,
767
- var(
768
- --ak-grid-row-end-lg,
769
- var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)))
770
- )
771
- );
772
- gap: var(
773
- --ak-gap-xl,
774
- var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial))))
775
- );
776
- column-gap: var(
777
- --ak-column-gap-xl,
778
- var(
779
- --ak-column-gap-lg,
780
- var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)))
781
- )
782
- );
783
- row-gap: var(
784
- --ak-row-gap-xl,
785
- var(--ak-row-gap-lg, var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial))))
465
+ var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex))))
786
466
  );
787
467
  flex-direction: var(
788
468
  --ak-flex-direction-xl,
789
469
  var(
790
470
  --ak-flex-direction-lg,
791
- var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)))
471
+ var(
472
+ --ak-flex-direction-md,
473
+ var(--ak-flex-direction-sm, var(--ak-flex-direction-base, column))
474
+ )
792
475
  )
793
476
  );
794
477
  align-items: var(
795
478
  --ak-align-items-xl,
796
479
  var(
797
480
  --ak-align-items-lg,
798
- var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)))
481
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))
799
482
  )
800
483
  );
801
484
  justify-content: var(
@@ -804,100 +487,137 @@
804
487
  --ak-justify-content-lg,
805
488
  var(
806
489
  --ak-justify-content-md,
807
- var(--ak-justify-content-sm, var(--ak-justify-content-initial))
490
+ var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start))
808
491
  )
809
492
  )
810
493
  );
811
- flex-wrap: var(
812
- --ak-flex-wrap-xl,
494
+ gap: var(
495
+ --ak-gap-xl,
496
+ var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
497
+ );
498
+ width: var(
499
+ --ak-width-xl,
500
+ var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))))
501
+ );
502
+ max-width: var(
503
+ --ak-max-width-xl,
813
504
  var(
814
- --ak-flex-wrap-lg,
815
- var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)))
505
+ --ak-max-width-lg,
506
+ var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)))
816
507
  )
817
508
  );
818
- grid-template-areas: var(
819
- --ak-grid-template-areas-xl,
509
+ min-height: var(
510
+ --ak-min-height-xl,
820
511
  var(
821
- --ak-grid-template-areas-lg,
822
- var(
823
- --ak-grid-template-areas-md,
824
- var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
825
- )
512
+ --ak-min-height-lg,
513
+ var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
826
514
  )
827
515
  );
828
- grid-template-columns: var(
829
- --ak-grid-template-columns-xl,
516
+ margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
517
+ margin-inline: var(
518
+ --ak-mx-xl,
830
519
  var(
831
- --ak-grid-template-columns-lg,
520
+ --ak-mx-lg,
832
521
  var(
833
- --ak-grid-template-columns-md,
834
- var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
522
+ --ak-mx-md,
523
+ var(
524
+ --ak-mx-sm,
525
+ var(
526
+ --ak-mx-base,
527
+ var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
528
+ )
529
+ )
835
530
  )
836
531
  )
837
532
  );
838
- grid-template-rows: var(
839
- --ak-grid-template-rows-xl,
533
+ margin-block: var(
534
+ --ak-my-xl,
840
535
  var(
841
- --ak-grid-template-rows-lg,
536
+ --ak-my-lg,
842
537
  var(
843
- --ak-grid-template-rows-md,
844
- var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
538
+ --ak-my-md,
539
+ var(
540
+ --ak-my-sm,
541
+ var(
542
+ --ak-my-base,
543
+ var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))))
544
+ )
545
+ )
845
546
  )
846
547
  )
847
548
  );
848
- grid-auto-flow: var(
849
- --ak-grid-auto-flow-xl,
549
+ padding: var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))));
550
+ padding-inline: var(
551
+ --ak-px-xl,
850
552
  var(
851
- --ak-grid-auto-flow-lg,
852
- var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)))
553
+ --ak-px-lg,
554
+ var(
555
+ --ak-px-md,
556
+ var(
557
+ --ak-px-sm,
558
+ var(
559
+ --ak-px-base,
560
+ var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
561
+ )
562
+ )
563
+ )
853
564
  )
854
565
  );
855
- }
856
-
857
- :where([data-slot="container"]) {
858
- display: block;
859
- width: var(
860
- --ak-width-xl,
861
- var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%))))
862
- );
863
- max-width: min(
864
- 100%,
566
+ padding-block: var(
567
+ --ak-py-xl,
865
568
  var(
866
- --ak-max-width-xl,
569
+ --ak-py-lg,
867
570
  var(
868
- --ak-max-width-lg,
571
+ --ak-py-md,
869
572
  var(
870
- --ak-max-width-md,
871
- var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
573
+ --ak-py-sm,
574
+ var(
575
+ --ak-py-base,
576
+ var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-base, 0)))))
577
+ )
872
578
  )
873
579
  )
874
580
  )
875
581
  );
876
- margin-left: var(
877
- --ak-ml-xl,
878
- var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto))))
582
+ position: var(
583
+ --ak-position-xl,
584
+ var(
585
+ --ak-position-lg,
586
+ var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)))
587
+ )
879
588
  );
880
- margin-right: var(
881
- --ak-mr-xl,
882
- var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto))))
589
+ top: var(
590
+ --ak-top-xl,
591
+ var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))))
592
+ );
593
+ z-index: var(
594
+ --ak-z-index-xl,
595
+ var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto))))
883
596
  );
884
- padding-left: var(
885
- --ak-pl-xl,
597
+ border: var(
598
+ --ak-border-xl,
886
599
  var(
887
- --ak-pl-lg,
600
+ --ak-border-lg,
601
+ var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
602
+ )
603
+ );
604
+ border-bottom: var(
605
+ --ak-border-bottom-xl,
606
+ var(
607
+ --ak-border-bottom-lg,
888
608
  var(
889
- --ak-pl-md,
609
+ --ak-border-bottom-md,
890
610
  var(
891
- --ak-pl-sm,
611
+ --ak-border-bottom-sm,
892
612
  var(
893
- --ak-pl-initial,
613
+ --ak-border-bottom-base,
894
614
  var(
895
- --ak-px-xl,
615
+ --ak-border-xl,
896
616
  var(
897
- --ak-px-lg,
617
+ --ak-border-lg,
898
618
  var(
899
- --ak-px-md,
900
- var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))
619
+ --ak-border-md,
620
+ var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
901
621
  )
902
622
  )
903
623
  )
@@ -906,23 +626,23 @@
906
626
  )
907
627
  )
908
628
  );
909
- padding-right: var(
910
- --ak-pr-xl,
629
+ border-right: var(
630
+ --ak-border-right-xl,
911
631
  var(
912
- --ak-pr-lg,
632
+ --ak-border-right-lg,
913
633
  var(
914
- --ak-pr-md,
634
+ --ak-border-right-md,
915
635
  var(
916
- --ak-pr-sm,
636
+ --ak-border-right-sm,
917
637
  var(
918
- --ak-pr-initial,
638
+ --ak-border-right-base,
919
639
  var(
920
- --ak-px-xl,
640
+ --ak-border-xl,
921
641
  var(
922
- --ak-px-lg,
642
+ --ak-border-lg,
923
643
  var(
924
- --ak-px-md,
925
- var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))
644
+ --ak-border-md,
645
+ var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
926
646
  )
927
647
  )
928
648
  )
@@ -931,16 +651,26 @@
931
651
  )
932
652
  )
933
653
  );
934
- }
935
- }
936
-
937
- @media (min-width: 87.5rem) {
938
- :where([data-slot="container"][data-variant="default"]),
939
- :where([data-slot="container"][data-variant="sm"]),
940
- :where([data-slot="container"][data-variant="md"]),
941
- :where([data-slot="container"][data-variant="lg"]),
942
- :where([data-slot="container"][data-variant="xl"]),
943
- :where([data-slot="container"][data-variant="xxl"]) {
944
- --ak-container-inline-size: 1320px;
654
+ border-radius: var(
655
+ --ak-border-radius-xl,
656
+ var(
657
+ --ak-border-radius-lg,
658
+ var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)))
659
+ )
660
+ );
661
+ background: var(
662
+ --ak-background-xl,
663
+ var(
664
+ --ak-background-lg,
665
+ var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)))
666
+ )
667
+ );
668
+ box-shadow: var(
669
+ --ak-box-shadow-xl,
670
+ var(
671
+ --ak-box-shadow-lg,
672
+ var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)))
673
+ )
674
+ );
945
675
  }
946
676
  }