@bookklik/senangstart-css 0.1.8 → 0.2.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 (341) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2269 -1955
  3. package/dist/senangstart-css.min.js +141 -1479
  4. package/docs/.vitepress/config.js +2 -0
  5. package/docs/guide/responsive.md +25 -0
  6. package/docs/index.md +1 -1
  7. package/docs/ms/guide/responsive.md +25 -0
  8. package/docs/ms/index.md +1 -1
  9. package/docs/ms/reference/breakpoints.md +23 -0
  10. package/docs/ms/reference/layout/align-content.md +57 -4
  11. package/docs/ms/reference/layout/align-items.md +81 -4
  12. package/docs/ms/reference/layout/align-self.md +25 -4
  13. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  14. package/docs/ms/reference/layout/border-collapse.md +81 -4
  15. package/docs/ms/reference/layout/border-spacing.md +43 -8
  16. package/docs/ms/reference/layout/box-sizing.md +21 -4
  17. package/docs/ms/reference/layout/caption-side.md +69 -4
  18. package/docs/ms/reference/layout/columns.md +21 -4
  19. package/docs/ms/reference/layout/container.md +21 -4
  20. package/docs/ms/reference/layout/display.md +39 -7
  21. package/docs/ms/reference/layout/flex-basis.md +29 -8
  22. package/docs/ms/reference/layout/flex-direction.md +81 -4
  23. package/docs/ms/reference/layout/flex-items.md +51 -4
  24. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  25. package/docs/ms/reference/layout/flex.md +54 -7
  26. package/docs/ms/reference/layout/float-clear.md +23 -4
  27. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  28. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  29. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  30. package/docs/ms/reference/layout/grid-columns.md +61 -4
  31. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  32. package/docs/ms/reference/layout/grid-rows.md +31 -4
  33. package/docs/ms/reference/layout/inset.md +56 -7
  34. package/docs/ms/reference/layout/isolation.md +21 -4
  35. package/docs/ms/reference/layout/justify-content.md +81 -4
  36. package/docs/ms/reference/layout/justify-items.md +25 -4
  37. package/docs/ms/reference/layout/justify-self.md +25 -4
  38. package/docs/ms/reference/layout/object-fit.md +57 -4
  39. package/docs/ms/reference/layout/object-position.md +29 -8
  40. package/docs/ms/reference/layout/order.md +53 -4
  41. package/docs/ms/reference/layout/overflow.md +45 -4
  42. package/docs/ms/reference/layout/overscroll.md +21 -4
  43. package/docs/ms/reference/layout/place-content.md +23 -4
  44. package/docs/ms/reference/layout/place-items.md +25 -4
  45. package/docs/ms/reference/layout/place-self.md +25 -4
  46. package/docs/ms/reference/layout/position.md +47 -4
  47. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  48. package/docs/ms/reference/layout/table-layout.md +69 -4
  49. package/docs/ms/reference/layout/visibility.md +25 -4
  50. package/docs/ms/reference/layout/z-index.md +27 -4
  51. package/docs/ms/reference/space/gap.md +71 -7
  52. package/docs/ms/reference/space/height.md +61 -7
  53. package/docs/ms/reference/space/margin.md +61 -7
  54. package/docs/ms/reference/space/padding.md +65 -7
  55. package/docs/ms/reference/space/width.md +61 -7
  56. package/docs/ms/reference/visual/accent-color.md +29 -8
  57. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  58. package/docs/ms/reference/visual/animation-delay.md +25 -8
  59. package/docs/ms/reference/visual/animation-direction.md +25 -4
  60. package/docs/ms/reference/visual/animation-duration.md +27 -8
  61. package/docs/ms/reference/visual/animation-fill.md +25 -4
  62. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  63. package/docs/ms/reference/visual/animation-play.md +23 -4
  64. package/docs/ms/reference/visual/appearance.md +23 -4
  65. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  66. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  69. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  70. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  71. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  72. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  74. package/docs/ms/reference/visual/background-attachment.md +23 -4
  75. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  76. package/docs/ms/reference/visual/background-clip.md +21 -4
  77. package/docs/ms/reference/visual/background-color.md +33 -8
  78. package/docs/ms/reference/visual/background-image.md +27 -8
  79. package/docs/ms/reference/visual/background-origin.md +25 -4
  80. package/docs/ms/reference/visual/background-position.md +29 -8
  81. package/docs/ms/reference/visual/background-repeat.md +25 -4
  82. package/docs/ms/reference/visual/background-size.md +29 -8
  83. package/docs/ms/reference/visual/blend-modes.md +23 -4
  84. package/docs/ms/reference/visual/border-radius.md +36 -4
  85. package/docs/ms/reference/visual/border-style.md +25 -4
  86. package/docs/ms/reference/visual/border-width.md +29 -8
  87. package/docs/ms/reference/visual/border.md +56 -7
  88. package/docs/ms/reference/visual/box-shadow.md +34 -4
  89. package/docs/ms/reference/visual/caret-color.md +25 -8
  90. package/docs/ms/reference/visual/color-scheme.md +23 -4
  91. package/docs/ms/reference/visual/cursor.md +25 -4
  92. package/docs/ms/reference/visual/field-sizing.md +23 -4
  93. package/docs/ms/reference/visual/fill.md +29 -8
  94. package/docs/ms/reference/visual/filter-blur.md +29 -8
  95. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  96. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  97. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  98. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  99. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  100. package/docs/ms/reference/visual/filter-invert.md +27 -8
  101. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  102. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  103. package/docs/ms/reference/visual/font-family.md +25 -4
  104. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  105. package/docs/ms/reference/visual/font-style.md +23 -4
  106. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  107. package/docs/ms/reference/visual/font-weight.md +35 -4
  108. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  109. package/docs/ms/reference/visual/hyphens.md +25 -4
  110. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  111. package/docs/ms/reference/visual/line-clamp.md +29 -8
  112. package/docs/ms/reference/visual/line-height.md +29 -8
  113. package/docs/ms/reference/visual/list-style.md +25 -4
  114. package/docs/ms/reference/visual/mask.md +25 -8
  115. package/docs/ms/reference/visual/opacity.md +27 -4
  116. package/docs/ms/reference/visual/outline.md +25 -8
  117. package/docs/ms/reference/visual/pointer-events.md +23 -4
  118. package/docs/ms/reference/visual/resize.md +27 -4
  119. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  120. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  121. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  122. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  123. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  124. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  125. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  126. package/docs/ms/reference/visual/stroke-width.md +29 -8
  127. package/docs/ms/reference/visual/stroke.md +27 -8
  128. package/docs/ms/reference/visual/text-alignment.md +25 -4
  129. package/docs/ms/reference/visual/text-color.md +31 -8
  130. package/docs/ms/reference/visual/text-decoration.md +23 -4
  131. package/docs/ms/reference/visual/text-indent.md +25 -8
  132. package/docs/ms/reference/visual/text-overflow.md +21 -4
  133. package/docs/ms/reference/visual/text-shadow.md +25 -8
  134. package/docs/ms/reference/visual/text-size.md +41 -7
  135. package/docs/ms/reference/visual/text-transform.md +25 -4
  136. package/docs/ms/reference/visual/text-wrap.md +25 -4
  137. package/docs/ms/reference/visual/touch-action.md +25 -4
  138. package/docs/ms/reference/visual/transform-backface.md +23 -4
  139. package/docs/ms/reference/visual/transform-origin.md +27 -8
  140. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  141. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  142. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  143. package/docs/ms/reference/visual/transform-scale.md +29 -8
  144. package/docs/ms/reference/visual/transform-skew.md +29 -8
  145. package/docs/ms/reference/visual/transform-style.md +23 -4
  146. package/docs/ms/reference/visual/transform-translate.md +29 -8
  147. package/docs/ms/reference/visual/transition-delay.md +25 -8
  148. package/docs/ms/reference/visual/transition-duration.md +27 -8
  149. package/docs/ms/reference/visual/transition-property.md +21 -4
  150. package/docs/ms/reference/visual/transition-timing.md +29 -8
  151. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  152. package/docs/ms/reference/visual/user-select.md +23 -4
  153. package/docs/ms/reference/visual/vertical-align.md +25 -4
  154. package/docs/ms/reference/visual/whitespace.md +25 -4
  155. package/docs/ms/reference/visual/will-change.md +23 -4
  156. package/docs/ms/reference/visual/word-break.md +25 -4
  157. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  158. package/docs/reference/breakpoints.md +23 -0
  159. package/docs/reference/layout/align-content.md +57 -4
  160. package/docs/reference/layout/align-items.md +81 -4
  161. package/docs/reference/layout/align-self.md +25 -4
  162. package/docs/reference/layout/aspect-ratio.md +27 -8
  163. package/docs/reference/layout/border-collapse.md +81 -4
  164. package/docs/reference/layout/border-spacing.md +43 -8
  165. package/docs/reference/layout/box-sizing.md +21 -4
  166. package/docs/reference/layout/caption-side.md +69 -4
  167. package/docs/reference/layout/columns.md +21 -4
  168. package/docs/reference/layout/container.md +21 -4
  169. package/docs/reference/layout/display.md +39 -7
  170. package/docs/reference/layout/flex-basis.md +29 -8
  171. package/docs/reference/layout/flex-direction.md +81 -4
  172. package/docs/reference/layout/flex-items.md +51 -4
  173. package/docs/reference/layout/flex-wrap.md +55 -4
  174. package/docs/reference/layout/flex.md +54 -7
  175. package/docs/reference/layout/float-clear.md +23 -4
  176. package/docs/reference/layout/grid-auto-flow.md +57 -4
  177. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  178. package/docs/reference/layout/grid-column-span.md +59 -4
  179. package/docs/reference/layout/grid-columns.md +61 -4
  180. package/docs/reference/layout/grid-row-span.md +29 -4
  181. package/docs/reference/layout/grid-rows.md +31 -4
  182. package/docs/reference/layout/inset.md +56 -7
  183. package/docs/reference/layout/isolation.md +21 -4
  184. package/docs/reference/layout/justify-content.md +81 -4
  185. package/docs/reference/layout/justify-items.md +25 -4
  186. package/docs/reference/layout/justify-self.md +25 -4
  187. package/docs/reference/layout/object-fit.md +57 -4
  188. package/docs/reference/layout/object-position.md +29 -8
  189. package/docs/reference/layout/order.md +53 -4
  190. package/docs/reference/layout/overflow.md +45 -4
  191. package/docs/reference/layout/overscroll.md +21 -4
  192. package/docs/reference/layout/place-content.md +23 -4
  193. package/docs/reference/layout/place-items.md +25 -4
  194. package/docs/reference/layout/place-self.md +25 -4
  195. package/docs/reference/layout/position.md +47 -4
  196. package/docs/reference/layout/shorthand-alignment.md +47 -4
  197. package/docs/reference/layout/table-layout.md +69 -4
  198. package/docs/reference/layout/visibility.md +25 -4
  199. package/docs/reference/layout/z-index.md +27 -4
  200. package/docs/reference/space/gap.md +71 -7
  201. package/docs/reference/space/height.md +61 -7
  202. package/docs/reference/space/margin.md +61 -7
  203. package/docs/reference/space/padding.md +65 -7
  204. package/docs/reference/space/width.md +61 -7
  205. package/docs/reference/visual/accent-color.md +29 -8
  206. package/docs/reference/visual/animation-builtin.md +29 -8
  207. package/docs/reference/visual/animation-delay.md +25 -8
  208. package/docs/reference/visual/animation-direction.md +25 -4
  209. package/docs/reference/visual/animation-duration.md +27 -8
  210. package/docs/reference/visual/animation-fill.md +25 -4
  211. package/docs/reference/visual/animation-iteration.md +23 -4
  212. package/docs/reference/visual/animation-play.md +23 -4
  213. package/docs/reference/visual/appearance.md +23 -4
  214. package/docs/reference/visual/backdrop-blur.md +29 -8
  215. package/docs/reference/visual/backdrop-brightness.md +29 -8
  216. package/docs/reference/visual/backdrop-contrast.md +29 -8
  217. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  218. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  219. package/docs/reference/visual/backdrop-invert.md +27 -8
  220. package/docs/reference/visual/backdrop-opacity.md +29 -8
  221. package/docs/reference/visual/backdrop-saturate.md +29 -8
  222. package/docs/reference/visual/backdrop-sepia.md +27 -8
  223. package/docs/reference/visual/background-attachment.md +23 -4
  224. package/docs/reference/visual/background-blend-mode.md +25 -4
  225. package/docs/reference/visual/background-clip.md +21 -4
  226. package/docs/reference/visual/background-color.md +33 -8
  227. package/docs/reference/visual/background-image.md +27 -8
  228. package/docs/reference/visual/background-origin.md +25 -4
  229. package/docs/reference/visual/background-position.md +29 -8
  230. package/docs/reference/visual/background-repeat.md +25 -4
  231. package/docs/reference/visual/background-size.md +29 -8
  232. package/docs/reference/visual/blend-modes.md +23 -4
  233. package/docs/reference/visual/border-radius.md +36 -4
  234. package/docs/reference/visual/border-style.md +25 -4
  235. package/docs/reference/visual/border-width.md +29 -8
  236. package/docs/reference/visual/border.md +56 -7
  237. package/docs/reference/visual/box-shadow.md +34 -4
  238. package/docs/reference/visual/caret-color.md +25 -8
  239. package/docs/reference/visual/color-scheme.md +23 -4
  240. package/docs/reference/visual/cursor.md +25 -4
  241. package/docs/reference/visual/field-sizing.md +23 -4
  242. package/docs/reference/visual/fill.md +29 -8
  243. package/docs/reference/visual/filter-blur.md +29 -8
  244. package/docs/reference/visual/filter-brightness.md +29 -8
  245. package/docs/reference/visual/filter-contrast.md +29 -8
  246. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  247. package/docs/reference/visual/filter-grayscale.md +29 -8
  248. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  249. package/docs/reference/visual/filter-invert.md +27 -8
  250. package/docs/reference/visual/filter-saturate.md +29 -8
  251. package/docs/reference/visual/filter-sepia.md +29 -8
  252. package/docs/reference/visual/font-family.md +25 -4
  253. package/docs/reference/visual/font-smoothing.md +23 -4
  254. package/docs/reference/visual/font-style.md +23 -4
  255. package/docs/reference/visual/font-variant-numeric.md +23 -4
  256. package/docs/reference/visual/font-weight.md +35 -4
  257. package/docs/reference/visual/forced-color-adjust.md +23 -4
  258. package/docs/reference/visual/hyphens.md +25 -4
  259. package/docs/reference/visual/letter-spacing.md +29 -8
  260. package/docs/reference/visual/line-clamp.md +29 -8
  261. package/docs/reference/visual/line-height.md +29 -8
  262. package/docs/reference/visual/list-style.md +25 -4
  263. package/docs/reference/visual/mask.md +25 -8
  264. package/docs/reference/visual/opacity.md +27 -4
  265. package/docs/reference/visual/outline.md +25 -8
  266. package/docs/reference/visual/pointer-events.md +23 -4
  267. package/docs/reference/visual/resize.md +27 -4
  268. package/docs/reference/visual/scroll-behavior.md +23 -4
  269. package/docs/reference/visual/scroll-margin.md +25 -8
  270. package/docs/reference/visual/scroll-padding.md +25 -8
  271. package/docs/reference/visual/scroll-snap-align.md +25 -4
  272. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  273. package/docs/reference/visual/scroll-snap-type.md +25 -4
  274. package/docs/reference/visual/state-prefixes.md +21 -4
  275. package/docs/reference/visual/stroke-width.md +29 -8
  276. package/docs/reference/visual/stroke.md +27 -8
  277. package/docs/reference/visual/text-alignment.md +25 -4
  278. package/docs/reference/visual/text-color.md +31 -8
  279. package/docs/reference/visual/text-decoration.md +23 -4
  280. package/docs/reference/visual/text-indent.md +25 -8
  281. package/docs/reference/visual/text-overflow.md +21 -4
  282. package/docs/reference/visual/text-shadow.md +25 -8
  283. package/docs/reference/visual/text-size.md +41 -7
  284. package/docs/reference/visual/text-transform.md +25 -4
  285. package/docs/reference/visual/text-wrap.md +25 -4
  286. package/docs/reference/visual/touch-action.md +25 -4
  287. package/docs/reference/visual/transform-backface.md +23 -4
  288. package/docs/reference/visual/transform-origin.md +27 -8
  289. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  290. package/docs/reference/visual/transform-perspective.md +25 -8
  291. package/docs/reference/visual/transform-rotate.md +29 -8
  292. package/docs/reference/visual/transform-scale.md +29 -8
  293. package/docs/reference/visual/transform-skew.md +29 -8
  294. package/docs/reference/visual/transform-style.md +23 -4
  295. package/docs/reference/visual/transform-translate.md +29 -8
  296. package/docs/reference/visual/transition-delay.md +25 -8
  297. package/docs/reference/visual/transition-duration.md +27 -8
  298. package/docs/reference/visual/transition-property.md +21 -4
  299. package/docs/reference/visual/transition-timing.md +29 -8
  300. package/docs/reference/visual/typography-keywords.md +27 -4
  301. package/docs/reference/visual/user-select.md +23 -4
  302. package/docs/reference/visual/vertical-align.md +25 -4
  303. package/docs/reference/visual/whitespace.md +25 -4
  304. package/docs/reference/visual/will-change.md +23 -4
  305. package/docs/reference/visual/word-break.md +25 -4
  306. package/package.json +2 -1
  307. package/playground/jit-tw-mix-test.html +238 -0
  308. package/playground/tw-convertor.html +696 -0
  309. package/scripts/build-dist.js +34 -29
  310. package/scripts/bundle-jit.js +45 -0
  311. package/scripts/convert-tailwind.js +759 -0
  312. package/scripts/generate-docs.js +65 -16
  313. package/src/cdn/jit.js +313 -102
  314. package/src/cli/commands/build.js +14 -6
  315. package/src/cli/commands/dev.js +28 -10
  316. package/src/compiler/generators/css.js +187 -28
  317. package/src/compiler/parser.js +23 -10
  318. package/src/compiler/tokenizer.js +19 -137
  319. package/src/config/defaults.js +45 -18
  320. package/src/core/constants.js +427 -0
  321. package/src/core/tokenizer-core.js +233 -0
  322. package/src/definitions/layout-alignment.js +210 -0
  323. package/src/definitions/layout-flex.js +155 -0
  324. package/src/definitions/layout-grid.js +134 -0
  325. package/src/definitions/layout-positioning.js +64 -0
  326. package/src/definitions/layout-table.js +129 -0
  327. package/src/definitions/layout-utilities.js +164 -0
  328. package/src/definitions/space.js +172 -0
  329. package/src/definitions/visual-backgrounds.js +231 -0
  330. package/src/definitions/visual-borders.js +66 -0
  331. package/src/definitions/visual-filters.js +111 -0
  332. package/src/definitions/visual-interactivity.js +159 -0
  333. package/src/definitions/visual-svg.js +41 -0
  334. package/src/definitions/visual-transform3d.js +74 -0
  335. package/src/definitions/visual-transforms.js +69 -0
  336. package/src/definitions/visual-transitions.js +144 -0
  337. package/src/definitions/visual-typography.js +214 -0
  338. package/src/definitions/visual.js +306 -1
  339. package/tests/integration/compiler.test.js +63 -2
  340. package/tests/unit/convert-tailwind.test.js +324 -0
  341. package/tests/unit/security.test.js +206 -0
package/docs/reference/breakpoints.md CHANGED
@@ -12,6 +12,29 @@ Complete reference for responsive breakpoints.
12
12
  | `lap:` | 1024px | Laptop |
13
13
  | `desk:` | 1280px | Desktop |
14
14
 
15
+ ## Tailwind Compatibility
16
+
17
+ SenangStart supports Tailwind CSS default breakpoints using the `tw-` prefix.
18
+
19
+ | Prefix | Min-Width | Tailwind Equiv. |
20
+ |--------|-----------|-----------------|
21
+ | `tw-sm:` | 640px | `sm:` |
22
+ | `tw-md:` | 768px | `md:` |
23
+ | `tw-lg:` | 1024px | `lg:` |
24
+ | `tw-xl:` | 1280px | `xl:` |
25
+ | `tw-2xl:` | 1536px | `2xl:` |
26
+
27
+ ### Usage with Tailwind Scale
28
+
29
+ ```html
30
+ <div
31
+ space="p:tw-4 tw-md:p:tw-8"
32
+ visual="rounded:tw-lg tw-lg:shadow:tw-xl"
33
+ >
34
+ Tailwind-compatible scaling
35
+ </div>
36
+ ```
37
+
15
38
  ## CSS Media Queries
16
39
 
17
40
  ```css
package/docs/reference/layout/align-content.md CHANGED
@@ -25,11 +25,64 @@ layout="content:[value]"
25
25
  <div layout="flex wrap content:center">Centered rows</div>
26
26
  ```
27
27
 
28
- ## Responsive
28
+ ## Preview
29
+
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Content Center
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="content:center"</code> - Center wrapped rows in multi-line container</p>
36
+ <div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
37
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
38
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
39
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
40
+ <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
46
+
47
+ ```html
48
+ <div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
49
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
50
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
51
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
52
+ <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
53
+ </div>
54
+ ```
55
+
56
+ </details>
57
+
58
+ </div>
59
+
60
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
61
+
62
+ ### Content Between
63
+
64
+ <div layout="flex col" space="g:medium">
65
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="content:between"</code> - Space between wrapped rows</p>
66
+ <div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
67
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
68
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
69
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
70
+ <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
71
+ </div>
72
+ </div>
73
+
74
+ <details>
75
+ <summary>View Code</summary>
29
76
 
30
77
  ```html
31
- <!-- Responsive example -->
32
- <div layout="mob:... tab:... lap:...">
33
- Responsive content
78
+ <div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
79
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
80
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
81
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
82
+ <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
34
83
  </div>
35
84
  ```
85
+
86
+ </details>
87
+
88
+ </div>
package/docs/reference/layout/align-items.md CHANGED
@@ -23,11 +23,88 @@ layout="items:[value]"
23
23
  <div layout="flex items:center">Centered</div>
24
24
  ```
25
25
 
26
- ## Responsive
26
+ ## Preview
27
+
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Items Center
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:center"</code> - Items centered along cross axis</p>
34
+ <div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
36
+ <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
37
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
27
43
 
28
44
  ```html
29
- <!-- Responsive example -->
30
- <div layout="mob:... tab:... lap:...">
31
- Responsive content
45
+ <div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
47
+ <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
55
+
56
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
57
+
58
+ ### Items Start
59
+
60
+ <div layout="flex col" space="g:medium">
61
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:start"</code> - Items aligned to the start of cross axis</p>
62
+ <div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
63
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
64
+ <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
65
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
66
+ </div>
67
+ </div>
68
+
69
+ <details>
70
+ <summary>View Code</summary>
71
+
72
+ ```html
73
+ <div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
74
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
75
+ <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
76
+ <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
77
+ </div>
78
+ ```
79
+
80
+ </details>
81
+
82
+ </div>
83
+
84
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
85
+
86
+ ### Items Stretch
87
+
88
+ <div layout="flex col" space="g:medium">
89
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:stretch"</code> - Items stretched to fill container height</p>
90
+ <div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
91
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
92
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
93
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
94
+ </div>
95
+ </div>
96
+
97
+ <details>
98
+ <summary>View Code</summary>
99
+
100
+ ```html
101
+ <div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
102
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
103
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
104
+ <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
105
+ </div>
106
+ ```
107
+
108
+ </details>
109
+
110
+ </div>
package/docs/reference/layout/align-self.md CHANGED
@@ -24,11 +24,32 @@ layout="self:[value]"
24
24
  <div layout="self:center">Centered item</div>
25
25
  ```
26
26
 
27
- ## Responsive
27
+ ## Preview
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Align Self
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="self:center"</code> - Override parent alignment for one item</p>
35
+ <div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
36
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
37
+ <span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
38
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
28
44
 
29
45
  ```html
30
- <!-- Responsive example -->
31
- <div layout="mob:... tab:... lap:...">
32
- Responsive content
46
+ <div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
47
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
48
+ <span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
49
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/reference/layout/aspect-ratio.md CHANGED
@@ -22,19 +22,38 @@ layout="aspect:[value]"
22
22
  <div layout="aspect:[4/3]">4:3</div>
23
23
  ```
24
24
 
25
- ## Arbitrary Values
25
+ ## Preview
26
26
 
27
- Supports custom values using bracket syntax:
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Aspect Ratio Square
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="aspect:square"</code> - 1:1 aspect ratio</p>
33
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
35
+ <div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
28
41
 
29
42
  ```html
30
- <div layout="aspect:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
45
+ <div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
46
+ </div>
31
47
  ```
32
48
 
33
- ## Responsive
49
+ </details>
34
50
 
35
- ```html
36
- <!-- Responsive example -->
37
- <div layout="mob:... tab:... lap:...">
38
- Responsive content
39
51
  </div>
52
+
53
+ ## Arbitrary Values
54
+
55
+ Supports custom values using bracket syntax:
56
+
57
+ ```html
58
+ <div layout="aspect:[custom-value]">Custom</div>
40
59
  ```
package/docs/reference/layout/border-collapse.md CHANGED
@@ -20,11 +20,88 @@ layout="border:[value]"
20
20
  <table layout="border:collapse">Collapsed table</table>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Border Collapse
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border:collapse"</code> - Table borders collapse into single lines</p>
31
+ <table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
32
+ <tbody>
33
+ <tr>
34
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
35
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
36
+ </tr>
37
+ <tr>
38
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
39
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
40
+ </tr>
41
+ </tbody>
42
+ </table>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>View Code</summary>
24
47
 
25
48
  ```html
26
- <!-- Responsive example -->
27
- <div layout="mob:... tab:... lap:...">
28
- Responsive content
49
+ <table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
50
+ <tbody>
51
+ <tr>
52
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
53
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
54
+ </tr>
55
+ <tr>
56
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
57
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
58
+ </tr>
59
+ </tbody>
60
+ </table>
61
+ ```
62
+
63
+ </details>
64
+
65
+ </div>
66
+
67
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
68
+
69
+ ### Border Separate
70
+
71
+ <div layout="flex col" space="g:medium">
72
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border:separate"</code> - Table borders are separate (default)</p>
73
+ <table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
74
+ <tbody>
75
+ <tr>
76
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
77
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
78
+ </tr>
79
+ <tr>
80
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
81
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
82
+ </tr>
83
+ </tbody>
84
+ </table>
29
85
  </div>
86
+
87
+ <details>
88
+ <summary>View Code</summary>
89
+
90
+ ```html
91
+ <table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
92
+ <tbody>
93
+ <tr>
94
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
95
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
96
+ </tr>
97
+ <tr>
98
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
99
+ <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
100
+ </tr>
101
+ </tbody>
102
+ </table>
30
103
  ```
104
+
105
+ </details>
106
+
107
+ </div>
package/docs/reference/layout/border-spacing.md CHANGED
@@ -21,19 +21,54 @@ layout="border-spacing:[value]"
21
21
  <table layout="border-separate border-spacing:small">Spaced</table>
22
22
  ```
23
23
 
24
- ## Arbitrary Values
24
+ ## Preview
25
25
 
26
- Supports custom values using bracket syntax:
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Border Spacing
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border-spacing:small"</code> - Space between table cell borders</p>
32
+ <table layout="border:separate" style="width: 100%; border-spacing: 8px;">
33
+ <tbody>
34
+ <tr>
35
+ <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
36
+ <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
37
+ </tr>
38
+ <tr>
39
+ <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
40
+ <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
41
+ </tr>
42
+ </tbody>
43
+ </table>
44
+ </div>
45
+
46
+ <details>
47
+ <summary>View Code</summary>
27
48
 
28
49
  ```html
29
- <div layout="border:[custom-value]">Custom</div>
50
+ <table layout="border:separate" style="width: 100%; border-spacing: 8px;">
51
+ <tbody>
52
+ <tr>
53
+ <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
54
+ <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
55
+ </tr>
56
+ <tr>
57
+ <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
58
+ <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
59
+ </tr>
60
+ </tbody>
61
+ </table>
30
62
  ```
31
63
 
32
- ## Responsive
64
+ </details>
33
65
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div layout="mob:... tab:... lap:...">
37
- Responsive content
38
66
  </div>
67
+
68
+ ## Arbitrary Values
69
+
70
+ Supports custom values using bracket syntax:
71
+
72
+ ```html
73
+ <div layout="border:[custom-value]">Custom</div>
39
74
  ```
package/docs/reference/layout/box-sizing.md CHANGED
@@ -20,11 +20,28 @@ layout="box:[value]"
20
20
  <div layout="box:border">Border box</div>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Border Box
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="box:border"</code> - Padding and border included in width</p>
31
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
33
+ </div>
34
+ </div>
35
+
36
+ <details>
37
+ <summary>View Code</summary>
24
38
 
25
39
  ```html
26
- <!-- Responsive example -->
27
- <div layout="mob:... tab:... lap:...">
28
- Responsive content
40
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
+ <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
29
42
  </div>
30
43
  ```
44
+
45
+ </details>
46
+
47
+ </div>
package/docs/reference/layout/caption-side.md CHANGED
@@ -20,11 +20,76 @@ layout="caption:[value]"
20
20
  <caption layout="caption:bottom">Bottom caption</caption>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Caption Top
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="caption:top"</code> - Table caption at the top</p>
31
+ <table style="width: 100%;">
32
+ <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
33
+ <tbody>
34
+ <tr>
35
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
36
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
37
+ </tr>
38
+ </tbody>
39
+ </table>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
24
44
 
25
45
  ```html
26
- <!-- Responsive example -->
27
- <div layout="mob:... tab:... lap:...">
28
- Responsive content
46
+ <table style="width: 100%;">
47
+ <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
48
+ <tbody>
49
+ <tr>
50
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
51
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
52
+ </tr>
53
+ </tbody>
54
+ </table>
55
+ ```
56
+
57
+ </details>
58
+
59
+ </div>
60
+
61
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
62
+
63
+ ### Caption Bottom
64
+
65
+ <div layout="flex col" space="g:medium">
66
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="caption:bottom"</code> - Table caption at the bottom</p>
67
+ <table style="width: 100%;">
68
+ <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
69
+ <tbody>
70
+ <tr>
71
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
72
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
73
+ </tr>
74
+ </tbody>
75
+ </table>
29
76
  </div>
77
+
78
+ <details>
79
+ <summary>View Code</summary>
80
+
81
+ ```html
82
+ <table style="width: 100%;">
83
+ <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
84
+ <tbody>
85
+ <tr>
86
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
87
+ <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
88
+ </tr>
89
+ </tbody>
90
+ </table>
30
91
  ```
92
+
93
+ </details>
94
+
95
+ </div>
package/docs/reference/layout/columns.md CHANGED
@@ -20,11 +20,28 @@ layout="cols:[value]"
20
20
  <div layout="cols:3">Three columns</div>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Multi-Column Layout
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="cols:2"</code> - Text flows into multiple columns</p>
31
+ <div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
33
+ </div>
34
+ </div>
35
+
36
+ <details>
37
+ <summary>View Code</summary>
24
38
 
25
39
  ```html
26
- <!-- Responsive example -->
27
- <div layout="mob:... tab:... lap:...">
28
- Responsive content
40
+ <div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
+ <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
29
42
  </div>
30
43
  ```
44
+
45
+ </details>
46
+
47
+ </div>
package/docs/reference/layout/container.md CHANGED
@@ -19,11 +19,28 @@ layout="container"
19
19
  <div layout="container">Centered content</div>
20
20
  ```
21
21
 
22
- ## Responsive
22
+ ## Preview
23
+
24
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
25
+
26
+ ### Container
27
+
28
+ <div layout="flex col" space="g:medium">
29
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="container"</code> - Centered container with max-width</p>
30
+ <div visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" space="p:small">
31
+ <div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
32
+ </div>
33
+ </div>
34
+
35
+ <details>
36
+ <summary>View Code</summary>
23
37
 
24
38
  ```html
25
- <!-- Responsive example -->
26
- <div layout="mob:... tab:... lap:...">
27
- Responsive content
39
+ <div visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" space="p:small">
40
+ <div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
28
41
  </div>
29
42
  ```
43
+
44
+ </details>
45
+
46
+ </div>