@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/layout/grid-columns.md CHANGED
@@ -22,11 +22,68 @@ layout="grid-cols:[value]"
22
22
  <div layout="grid grid-cols:12">12 columns</div>
23
23
  ```
24
24
 
25
- ## Responsive
25
+ ## Preview
26
+
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
+ ### 3 Column Grid
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="grid-cols:3"</code> - Equal width columns with grid-cols:3</p>
33
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
37
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
38
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
39
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
45
+
46
+ ```html
47
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
49
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
50
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
51
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
52
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
53
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
54
+ </div>
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
+ ### 4 Column Grid
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="grid-cols:4"</code> - Four equal columns layout</p>
67
+ <div layout="grid grid-cols:4" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
68
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
69
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
70
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
71
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
72
+ </div>
73
+ </div>
74
+
75
+ <details>
76
+ <summary>View Code</summary>
26
77
 
27
78
  ```html
28
- <!-- Responsive example -->
29
- <div layout="mob:... tab:... lap:...">
30
- Responsive content
79
+ <div layout="grid grid-cols:4" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
80
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
81
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
82
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
83
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
31
84
  </div>
32
85
  ```
86
+
87
+ </details>
88
+
89
+ </div>
package/docs/reference/layout/grid-row-span.md CHANGED
@@ -20,11 +20,36 @@ layout="row-span:[value]"
20
20
  <div layout="row-span:2">Spans 2 rows</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
+ ### Row Span
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="row-span:2"</code> - Item spanning multiple rows</p>
31
+ <div layout="grid grid-cols:3 grid-rows:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
33
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
34
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
35
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
36
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">4</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
24
42
 
25
43
  ```html
26
- <!-- Responsive example -->
27
- <div layout="mob:... tab:... lap:...">
28
- Responsive content
44
+ <div layout="grid grid-cols:3 grid-rows:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
46
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
47
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
48
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
49
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">4</span>
29
50
  </div>
30
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/reference/layout/grid-rows.md CHANGED
@@ -21,11 +21,38 @@ layout="grid-rows:[value]"
21
21
  <div layout="grid grid-rows:3">3 rows</div>
22
22
  ```
23
23
 
24
- ## Responsive
24
+ ## Preview
25
+
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
+ ### Grid Rows
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="grid-rows:3"</code> - Define explicit row tracks in a grid</p>
32
+ <div layout="grid grid-rows:3 grid-cols:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
34
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
37
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
38
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
25
44
 
26
45
  ```html
27
- <!-- Responsive example -->
28
- <div layout="mob:... tab:... lap:...">
29
- Responsive content
46
+ <div layout="grid grid-rows:3 grid-cols:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
49
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
50
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
51
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
52
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
30
53
  </div>
31
54
  ```
55
+
56
+ </details>
57
+
58
+ </div>
package/docs/reference/layout/inset.md CHANGED
@@ -26,19 +26,68 @@ layout="inset:[value]" or layout="top:[value]"
26
26
  <div layout="absolute top:medium left:medium">Offset</div>
27
27
  ```
28
28
 
29
- ## Arbitrary Values
29
+ ## Preview
30
30
 
31
- Supports custom values using bracket syntax:
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Inset Zero
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="inset:0"</code> - Cover entire parent with inset:0</p>
37
+ <div layout="relative" space="p:large" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
38
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Parent</span>
39
+ <span layout="absolute inset:0 flex center" visual="bg:primary/50 text:white rounded:medium">inset:0</span>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
32
45
 
33
46
  ```html
34
- <div layout="inset:[custom-value]">Custom</div>
47
+ <div layout="relative" space="p:large" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
48
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Parent</span>
49
+ <span layout="absolute inset:0 flex center" visual="bg:primary/50 text:white rounded:medium">inset:0</span>
50
+ </div>
35
51
  ```
36
52
 
37
- ## Responsive
53
+ </details>
54
+
55
+ </div>
56
+
57
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
58
+
59
+ ### Directional Insets
60
+
61
+ <div layout="flex col" space="g:medium">
62
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="top:0"</code> - Position with top, right, bottom, left</p>
63
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
64
+ <span layout="absolute top:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">TL</span>
65
+ <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">TR</span>
66
+ <span layout="absolute bottom:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">BL</span>
67
+ <span layout="absolute bottom:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">BR</span>
68
+ </div>
69
+ </div>
70
+
71
+ <details>
72
+ <summary>View Code</summary>
38
73
 
39
74
  ```html
40
- <!-- Responsive example -->
41
- <div layout="mob:... tab:... lap:...">
42
- Responsive content
75
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
76
+ <span layout="absolute top:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">TL</span>
77
+ <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">TR</span>
78
+ <span layout="absolute bottom:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">BL</span>
79
+ <span layout="absolute bottom:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">BR</span>
80
+ </div>
81
+ ```
82
+
83
+ </details>
84
+
43
85
  </div>
86
+
87
+ ## Arbitrary Values
88
+
89
+ Supports custom values using bracket syntax:
90
+
91
+ ```html
92
+ <div layout="inset:[custom-value]">Custom</div>
44
93
  ```
package/docs/reference/layout/isolation.md CHANGED
@@ -20,11 +20,28 @@ layout="isolation:[value]"
20
20
  <div layout="isolation:isolate">Isolated</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
+ ### Isolation
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="isolation:isolate"</code> - Create new stacking context</p>
31
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div layout="isolation:isolate" space="p:small" visual="bg:primary text:white rounded:small">isolation:isolate</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="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
+ <div layout="isolation:isolate" space="p:small" visual="bg:primary text:white rounded:small">isolation:isolate</div>
29
42
  </div>
30
43
  ```
44
+
45
+ </details>
46
+
47
+ </div>
package/docs/reference/layout/justify-content.md CHANGED
@@ -26,11 +26,88 @@ layout="justify:[value]"
26
26
  <div layout="flex justify:between">Spaced</div>
27
27
  ```
28
28
 
29
- ## Responsive
29
+ ## Preview
30
+
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Justify Start
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="justify:start"</code> - Items aligned to the start of container</p>
37
+ <div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
39
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
40
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
30
46
 
31
47
  ```html
32
- <!-- Responsive example -->
33
- <div layout="mob:... tab:... lap:...">
34
- Responsive content
48
+ <div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
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>
35
52
  </div>
36
53
  ```
54
+
55
+ </details>
56
+
57
+ </div>
58
+
59
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
60
+
61
+ ### Justify Center
62
+
63
+ <div layout="flex col" space="g:medium">
64
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="justify:center"</code> - Items centered along the main axis</p>
65
+ <div layout="flex justify:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
66
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
67
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
68
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
69
+ </div>
70
+ </div>
71
+
72
+ <details>
73
+ <summary>View Code</summary>
74
+
75
+ ```html
76
+ <div layout="flex justify:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
77
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
78
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
79
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
80
+ </div>
81
+ ```
82
+
83
+ </details>
84
+
85
+ </div>
86
+
87
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
88
+
89
+ ### Justify Between
90
+
91
+ <div layout="flex col" space="g:medium">
92
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="justify:between"</code> - Items with equal space between them</p>
93
+ <div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
94
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
95
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
96
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
97
+ </div>
98
+ </div>
99
+
100
+ <details>
101
+ <summary>View Code</summary>
102
+
103
+ ```html
104
+ <div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
105
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
106
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
107
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
108
+ </div>
109
+ ```
110
+
111
+ </details>
112
+
113
+ </div>
package/docs/reference/layout/justify-items.md CHANGED
@@ -22,11 +22,32 @@ layout="justify-items:[value]"
22
22
  <div layout="grid justify-items:center">Centered items</div>
23
23
  ```
24
24
 
25
- ## Responsive
25
+ ## Preview
26
+
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
+ ### Justify Items Center
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="justify-items:center"</code> - Center all grid items horizontally within their cells</p>
33
+ <div layout="grid grid-cols:3 justify-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
26
42
 
27
43
  ```html
28
- <!-- Responsive example -->
29
- <div layout="mob:... tab:... lap:...">
30
- Responsive content
44
+ <div layout="grid grid-cols:3 justify-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/reference/layout/justify-self.md CHANGED
@@ -23,11 +23,32 @@ layout="justify-self:[value]"
23
23
  <div layout="justify-self:end">End aligned</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
+ ### Justify Self
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="justify-self:center"</code> - Override horizontal alignment for one grid item</p>
34
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
36
+ <span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
37
+ <span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</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="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
47
+ <span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
48
+ <span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</span>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/reference/layout/object-fit.md CHANGED
@@ -23,11 +23,64 @@ layout="object:[value]"
23
23
  <img layout="object:cover">Cover image</img>
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
+ ### Object Fit Cover
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="object:cover"</code> - Image covers container, may crop</p>
34
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
36
+ <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
37
+ </div>
38
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
44
+
45
+ ```html
46
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
48
+ <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
49
+ </div>
50
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
51
+ </div>
52
+ ```
53
+
54
+ </details>
55
+
56
+ </div>
57
+
58
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
59
+
60
+ ### Object Fit Contain
61
+
62
+ <div layout="flex col" space="g:medium">
63
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="object:contain"</code> - Image fits inside, preserves ratio</p>
64
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
65
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
66
+ <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
67
+ </div>
68
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
69
+ </div>
70
+ </div>
71
+
72
+ <details>
73
+ <summary>View Code</summary>
27
74
 
28
75
  ```html
29
- <!-- Responsive example -->
30
- <div layout="mob:... tab:... lap:...">
31
- Responsive content
76
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
77
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
78
+ <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
79
+ </div>
80
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
32
81
  </div>
33
82
  ```
83
+
84
+ </details>
85
+
86
+ </div>
package/docs/reference/layout/object-position.md CHANGED
@@ -27,19 +27,40 @@ layout="object-pos:[value]"
27
27
  <img layout="object:cover object-pos:top">Top positioned</img>
28
28
  ```
29
29
 
30
- ## Arbitrary Values
30
+ ## Preview
31
31
 
32
- Supports custom values using bracket syntax:
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Object Position
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="object-pos:center"</code> - Control where media is positioned within container</p>
38
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
40
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
41
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>View Code</summary>
33
47
 
34
48
  ```html
35
- <div layout="object:[custom-value]">Custom</div>
49
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
51
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
52
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
53
+ </div>
36
54
  ```
37
55
 
38
- ## Responsive
56
+ </details>
39
57
 
40
- ```html
41
- <!-- Responsive example -->
42
- <div layout="mob:... tab:... lap:...">
43
- Responsive content
44
58
  </div>
59
+
60
+ ## Arbitrary Values
61
+
62
+ Supports custom values using bracket syntax:
63
+
64
+ ```html
65
+ <div layout="object:[custom-value]">Custom</div>
45
66
  ```
package/docs/reference/layout/order.md CHANGED
@@ -22,11 +22,60 @@ layout="order:[value]"
22
22
  <div layout="order:first">First item</div>
23
23
  ```
24
24
 
25
- ## Responsive
25
+ ## Preview
26
+
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
+ ### Reorder Items
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="order:1"</code> - Change visual order of flex items</p>
33
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
35
+ <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
36
+ <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
42
+
43
+ ```html
44
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
46
+ <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
47
+ <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</span>
48
+ </div>
49
+ ```
50
+
51
+ </details>
52
+
53
+ </div>
54
+
55
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
56
+
57
+ ### First and Last
58
+
59
+ <div layout="flex col" space="g:medium">
60
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="order:first"</code> - Move items to start or end</p>
61
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
62
+ <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
63
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
64
+ <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
65
+ </div>
66
+ </div>
67
+
68
+ <details>
69
+ <summary>View Code</summary>
26
70
 
27
71
  ```html
28
- <!-- Responsive example -->
29
- <div layout="mob:... tab:... lap:...">
30
- Responsive content
72
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
73
+ <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
74
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
75
+ <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
31
76
  </div>
32
77
  ```
78
+
79
+ </details>
80
+
81
+ </div>