@bookklik/senangstart-css 0.1.8 → 0.2.3

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 (350) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2346 -1955
  3. package/dist/senangstart-css.min.js +143 -1479
  4. package/docs/.vitepress/config.js +9 -4
  5. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  6. package/docs/guide/responsive.md +25 -0
  7. package/docs/index.md +7 -1
  8. package/docs/ms/guide/responsive.md +25 -0
  9. package/docs/ms/index.md +7 -1
  10. package/docs/ms/reference/breakpoints.md +23 -0
  11. package/docs/ms/reference/layout/align-content.md +57 -4
  12. package/docs/ms/reference/layout/align-items.md +81 -4
  13. package/docs/ms/reference/layout/align-self.md +25 -4
  14. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  15. package/docs/ms/reference/layout/border-collapse.md +81 -4
  16. package/docs/ms/reference/layout/border-spacing.md +43 -8
  17. package/docs/ms/reference/layout/box-sizing.md +21 -4
  18. package/docs/ms/reference/layout/caption-side.md +69 -4
  19. package/docs/ms/reference/layout/columns.md +21 -4
  20. package/docs/ms/reference/layout/container.md +21 -4
  21. package/docs/ms/reference/layout/display.md +39 -7
  22. package/docs/ms/reference/layout/flex-basis.md +29 -8
  23. package/docs/ms/reference/layout/flex-direction.md +81 -4
  24. package/docs/ms/reference/layout/flex-items.md +51 -4
  25. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  26. package/docs/ms/reference/layout/flex.md +54 -7
  27. package/docs/ms/reference/layout/float-clear.md +23 -4
  28. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  29. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  30. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  31. package/docs/ms/reference/layout/grid-columns.md +61 -4
  32. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  33. package/docs/ms/reference/layout/grid-rows.md +31 -4
  34. package/docs/ms/reference/layout/inset.md +56 -7
  35. package/docs/ms/reference/layout/isolation.md +21 -4
  36. package/docs/ms/reference/layout/justify-content.md +81 -4
  37. package/docs/ms/reference/layout/justify-items.md +25 -4
  38. package/docs/ms/reference/layout/justify-self.md +25 -4
  39. package/docs/ms/reference/layout/object-fit.md +57 -4
  40. package/docs/ms/reference/layout/object-position.md +29 -8
  41. package/docs/ms/reference/layout/order.md +53 -4
  42. package/docs/ms/reference/layout/overflow.md +45 -4
  43. package/docs/ms/reference/layout/overscroll.md +21 -4
  44. package/docs/ms/reference/layout/place-content.md +23 -4
  45. package/docs/ms/reference/layout/place-items.md +25 -4
  46. package/docs/ms/reference/layout/place-self.md +25 -4
  47. package/docs/ms/reference/layout/position.md +47 -4
  48. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  49. package/docs/ms/reference/layout/table-layout.md +69 -4
  50. package/docs/ms/reference/layout/visibility.md +25 -4
  51. package/docs/ms/reference/layout/z-index.md +27 -4
  52. package/docs/ms/reference/space/gap.md +71 -7
  53. package/docs/ms/reference/space/height.md +61 -7
  54. package/docs/ms/reference/space/margin.md +61 -7
  55. package/docs/ms/reference/space/padding.md +65 -7
  56. package/docs/ms/reference/space/width.md +61 -7
  57. package/docs/ms/reference/visual/accent-color.md +29 -8
  58. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  59. package/docs/ms/reference/visual/animation-delay.md +27 -8
  60. package/docs/ms/reference/visual/animation-direction.md +25 -4
  61. package/docs/ms/reference/visual/animation-duration.md +27 -8
  62. package/docs/ms/reference/visual/animation-fill.md +49 -4
  63. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  64. package/docs/ms/reference/visual/animation-play.md +23 -4
  65. package/docs/ms/reference/visual/appearance.md +23 -4
  66. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  69. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  70. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  71. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  72. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  74. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  75. package/docs/ms/reference/visual/background-attachment.md +23 -4
  76. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  77. package/docs/ms/reference/visual/background-clip.md +21 -4
  78. package/docs/ms/reference/visual/background-color.md +33 -8
  79. package/docs/ms/reference/visual/background-image.md +27 -8
  80. package/docs/ms/reference/visual/background-origin.md +25 -4
  81. package/docs/ms/reference/visual/background-position.md +29 -8
  82. package/docs/ms/reference/visual/background-repeat.md +25 -4
  83. package/docs/ms/reference/visual/background-size.md +29 -8
  84. package/docs/ms/reference/visual/blend-modes.md +23 -4
  85. package/docs/ms/reference/visual/border-radius.md +36 -4
  86. package/docs/ms/reference/visual/border-style.md +25 -4
  87. package/docs/ms/reference/visual/border-width.md +29 -8
  88. package/docs/ms/reference/visual/border.md +56 -7
  89. package/docs/ms/reference/visual/box-shadow.md +34 -4
  90. package/docs/ms/reference/visual/caret-color.md +25 -8
  91. package/docs/ms/reference/visual/color-scheme.md +23 -4
  92. package/docs/ms/reference/visual/cursor.md +25 -4
  93. package/docs/ms/reference/visual/field-sizing.md +23 -4
  94. package/docs/ms/reference/visual/fill.md +29 -8
  95. package/docs/ms/reference/visual/filter-blur.md +29 -8
  96. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  97. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  98. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  99. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  100. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  101. package/docs/ms/reference/visual/filter-invert.md +27 -8
  102. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  103. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  104. package/docs/ms/reference/visual/font-family.md +25 -4
  105. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  106. package/docs/ms/reference/visual/font-style.md +23 -4
  107. package/docs/ms/reference/visual/font-variant-numeric.md +25 -4
  108. package/docs/ms/reference/visual/font-weight.md +35 -4
  109. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  110. package/docs/ms/reference/visual/hyphens.md +25 -4
  111. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  112. package/docs/ms/reference/visual/line-clamp.md +29 -8
  113. package/docs/ms/reference/visual/line-height.md +29 -8
  114. package/docs/ms/reference/visual/list-style.md +25 -4
  115. package/docs/ms/reference/visual/mask.md +29 -8
  116. package/docs/ms/reference/visual/opacity.md +27 -4
  117. package/docs/ms/reference/visual/outline.md +25 -8
  118. package/docs/ms/reference/visual/pointer-events.md +23 -4
  119. package/docs/ms/reference/visual/resize.md +27 -4
  120. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  121. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  122. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  123. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  124. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  125. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  126. package/docs/ms/reference/visual/state-prefixes.md +23 -4
  127. package/docs/ms/reference/visual/stroke-width.md +29 -8
  128. package/docs/ms/reference/visual/stroke.md +27 -8
  129. package/docs/ms/reference/visual/text-alignment.md +25 -4
  130. package/docs/ms/reference/visual/text-color.md +31 -8
  131. package/docs/ms/reference/visual/text-decoration.md +25 -4
  132. package/docs/ms/reference/visual/text-indent.md +29 -8
  133. package/docs/ms/reference/visual/text-overflow.md +23 -4
  134. package/docs/ms/reference/visual/text-shadow.md +31 -8
  135. package/docs/ms/reference/visual/text-size.md +84 -32
  136. package/docs/ms/reference/visual/text-transform.md +25 -4
  137. package/docs/ms/reference/visual/text-wrap.md +25 -4
  138. package/docs/ms/reference/visual/touch-action.md +25 -4
  139. package/docs/ms/reference/visual/transform-backface.md +45 -6
  140. package/docs/ms/reference/visual/transform-origin.md +27 -8
  141. package/docs/ms/reference/visual/transform-perspective-origin.md +61 -10
  142. package/docs/ms/reference/visual/transform-perspective.md +61 -10
  143. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  144. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  145. package/docs/ms/reference/visual/transform-scale.md +29 -8
  146. package/docs/ms/reference/visual/transform-skew.md +29 -8
  147. package/docs/ms/reference/visual/transform-style.md +47 -8
  148. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  149. package/docs/ms/reference/visual/transform-translate.md +60 -13
  150. package/docs/ms/reference/visual/transition-delay.md +27 -8
  151. package/docs/ms/reference/visual/transition-duration.md +27 -8
  152. package/docs/ms/reference/visual/transition-property.md +21 -4
  153. package/docs/ms/reference/visual/transition-timing.md +29 -8
  154. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  155. package/docs/ms/reference/visual/user-select.md +23 -4
  156. package/docs/ms/reference/visual/vertical-align.md +27 -4
  157. package/docs/ms/reference/visual/whitespace.md +25 -4
  158. package/docs/ms/reference/visual/will-change.md +23 -4
  159. package/docs/ms/reference/visual/word-break.md +25 -4
  160. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  161. package/docs/public/assets/ss-logo.svg +83 -0
  162. package/docs/reference/breakpoints.md +23 -0
  163. package/docs/reference/layout/align-content.md +57 -4
  164. package/docs/reference/layout/align-items.md +81 -4
  165. package/docs/reference/layout/align-self.md +25 -4
  166. package/docs/reference/layout/aspect-ratio.md +27 -8
  167. package/docs/reference/layout/border-collapse.md +81 -4
  168. package/docs/reference/layout/border-spacing.md +43 -8
  169. package/docs/reference/layout/box-sizing.md +21 -4
  170. package/docs/reference/layout/caption-side.md +69 -4
  171. package/docs/reference/layout/columns.md +21 -4
  172. package/docs/reference/layout/container.md +21 -4
  173. package/docs/reference/layout/display.md +39 -7
  174. package/docs/reference/layout/flex-basis.md +29 -8
  175. package/docs/reference/layout/flex-direction.md +81 -4
  176. package/docs/reference/layout/flex-items.md +51 -4
  177. package/docs/reference/layout/flex-wrap.md +55 -4
  178. package/docs/reference/layout/flex.md +54 -7
  179. package/docs/reference/layout/float-clear.md +23 -4
  180. package/docs/reference/layout/grid-auto-flow.md +57 -4
  181. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  182. package/docs/reference/layout/grid-column-span.md +59 -4
  183. package/docs/reference/layout/grid-columns.md +61 -4
  184. package/docs/reference/layout/grid-row-span.md +29 -4
  185. package/docs/reference/layout/grid-rows.md +31 -4
  186. package/docs/reference/layout/inset.md +56 -7
  187. package/docs/reference/layout/isolation.md +21 -4
  188. package/docs/reference/layout/justify-content.md +81 -4
  189. package/docs/reference/layout/justify-items.md +25 -4
  190. package/docs/reference/layout/justify-self.md +25 -4
  191. package/docs/reference/layout/object-fit.md +57 -4
  192. package/docs/reference/layout/object-position.md +29 -8
  193. package/docs/reference/layout/order.md +53 -4
  194. package/docs/reference/layout/overflow.md +45 -4
  195. package/docs/reference/layout/overscroll.md +21 -4
  196. package/docs/reference/layout/place-content.md +23 -4
  197. package/docs/reference/layout/place-items.md +25 -4
  198. package/docs/reference/layout/place-self.md +25 -4
  199. package/docs/reference/layout/position.md +47 -4
  200. package/docs/reference/layout/shorthand-alignment.md +47 -4
  201. package/docs/reference/layout/table-layout.md +69 -4
  202. package/docs/reference/layout/visibility.md +25 -4
  203. package/docs/reference/layout/z-index.md +27 -4
  204. package/docs/reference/space/gap.md +71 -7
  205. package/docs/reference/space/height.md +61 -7
  206. package/docs/reference/space/margin.md +61 -7
  207. package/docs/reference/space/padding.md +65 -7
  208. package/docs/reference/space/width.md +61 -7
  209. package/docs/reference/visual/accent-color.md +29 -8
  210. package/docs/reference/visual/animation-builtin.md +29 -8
  211. package/docs/reference/visual/animation-delay.md +27 -8
  212. package/docs/reference/visual/animation-direction.md +25 -4
  213. package/docs/reference/visual/animation-duration.md +27 -8
  214. package/docs/reference/visual/animation-fill.md +49 -4
  215. package/docs/reference/visual/animation-iteration.md +23 -4
  216. package/docs/reference/visual/animation-play.md +23 -4
  217. package/docs/reference/visual/appearance.md +23 -4
  218. package/docs/reference/visual/backdrop-blur.md +29 -8
  219. package/docs/reference/visual/backdrop-brightness.md +29 -8
  220. package/docs/reference/visual/backdrop-contrast.md +29 -8
  221. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  222. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  223. package/docs/reference/visual/backdrop-invert.md +27 -8
  224. package/docs/reference/visual/backdrop-opacity.md +29 -8
  225. package/docs/reference/visual/backdrop-saturate.md +29 -8
  226. package/docs/reference/visual/backdrop-sepia.md +27 -8
  227. package/docs/reference/visual/background-attachment.md +23 -4
  228. package/docs/reference/visual/background-blend-mode.md +25 -4
  229. package/docs/reference/visual/background-clip.md +21 -4
  230. package/docs/reference/visual/background-color.md +33 -8
  231. package/docs/reference/visual/background-image.md +27 -8
  232. package/docs/reference/visual/background-origin.md +25 -4
  233. package/docs/reference/visual/background-position.md +29 -8
  234. package/docs/reference/visual/background-repeat.md +25 -4
  235. package/docs/reference/visual/background-size.md +29 -8
  236. package/docs/reference/visual/blend-modes.md +23 -4
  237. package/docs/reference/visual/border-radius.md +36 -4
  238. package/docs/reference/visual/border-style.md +25 -4
  239. package/docs/reference/visual/border-width.md +29 -8
  240. package/docs/reference/visual/border.md +56 -7
  241. package/docs/reference/visual/box-shadow.md +34 -4
  242. package/docs/reference/visual/caret-color.md +25 -8
  243. package/docs/reference/visual/color-scheme.md +23 -4
  244. package/docs/reference/visual/cursor.md +25 -4
  245. package/docs/reference/visual/field-sizing.md +23 -4
  246. package/docs/reference/visual/fill.md +29 -8
  247. package/docs/reference/visual/filter-blur.md +29 -8
  248. package/docs/reference/visual/filter-brightness.md +29 -8
  249. package/docs/reference/visual/filter-contrast.md +29 -8
  250. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  251. package/docs/reference/visual/filter-grayscale.md +29 -8
  252. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  253. package/docs/reference/visual/filter-invert.md +27 -8
  254. package/docs/reference/visual/filter-saturate.md +29 -8
  255. package/docs/reference/visual/filter-sepia.md +29 -8
  256. package/docs/reference/visual/font-family.md +25 -4
  257. package/docs/reference/visual/font-smoothing.md +23 -4
  258. package/docs/reference/visual/font-style.md +23 -4
  259. package/docs/reference/visual/font-variant-numeric.md +25 -4
  260. package/docs/reference/visual/font-weight.md +35 -4
  261. package/docs/reference/visual/forced-color-adjust.md +23 -4
  262. package/docs/reference/visual/hyphens.md +25 -4
  263. package/docs/reference/visual/letter-spacing.md +29 -8
  264. package/docs/reference/visual/line-clamp.md +29 -8
  265. package/docs/reference/visual/line-height.md +29 -8
  266. package/docs/reference/visual/list-style.md +25 -4
  267. package/docs/reference/visual/mask.md +29 -8
  268. package/docs/reference/visual/opacity.md +27 -4
  269. package/docs/reference/visual/outline.md +25 -8
  270. package/docs/reference/visual/pointer-events.md +23 -4
  271. package/docs/reference/visual/resize.md +27 -4
  272. package/docs/reference/visual/scroll-behavior.md +23 -4
  273. package/docs/reference/visual/scroll-margin.md +25 -8
  274. package/docs/reference/visual/scroll-padding.md +25 -8
  275. package/docs/reference/visual/scroll-snap-align.md +25 -4
  276. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  277. package/docs/reference/visual/scroll-snap-type.md +25 -4
  278. package/docs/reference/visual/state-prefixes.md +23 -4
  279. package/docs/reference/visual/stroke-width.md +29 -8
  280. package/docs/reference/visual/stroke.md +27 -8
  281. package/docs/reference/visual/text-alignment.md +25 -4
  282. package/docs/reference/visual/text-color.md +31 -8
  283. package/docs/reference/visual/text-decoration.md +25 -4
  284. package/docs/reference/visual/text-indent.md +29 -8
  285. package/docs/reference/visual/text-overflow.md +23 -4
  286. package/docs/reference/visual/text-shadow.md +31 -8
  287. package/docs/reference/visual/text-size.md +84 -32
  288. package/docs/reference/visual/text-transform.md +25 -4
  289. package/docs/reference/visual/text-wrap.md +25 -4
  290. package/docs/reference/visual/touch-action.md +25 -4
  291. package/docs/reference/visual/transform-backface.md +45 -6
  292. package/docs/reference/visual/transform-origin.md +27 -8
  293. package/docs/reference/visual/transform-perspective-origin.md +61 -10
  294. package/docs/reference/visual/transform-perspective.md +61 -10
  295. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  296. package/docs/reference/visual/transform-rotate.md +29 -8
  297. package/docs/reference/visual/transform-scale.md +29 -8
  298. package/docs/reference/visual/transform-skew.md +29 -8
  299. package/docs/reference/visual/transform-style.md +47 -8
  300. package/docs/reference/visual/transform-translate-z.md +90 -0
  301. package/docs/reference/visual/transform-translate.md +60 -13
  302. package/docs/reference/visual/transition-delay.md +27 -8
  303. package/docs/reference/visual/transition-duration.md +27 -8
  304. package/docs/reference/visual/transition-property.md +21 -4
  305. package/docs/reference/visual/transition-timing.md +29 -8
  306. package/docs/reference/visual/typography-keywords.md +27 -4
  307. package/docs/reference/visual/user-select.md +23 -4
  308. package/docs/reference/visual/vertical-align.md +27 -4
  309. package/docs/reference/visual/whitespace.md +25 -4
  310. package/docs/reference/visual/will-change.md +23 -4
  311. package/docs/reference/visual/word-break.md +25 -4
  312. package/docs/syntax-reference.json +2009 -1972
  313. package/package.json +3 -2
  314. package/playground/index.html +37 -38
  315. package/playground/jit-tw-mix-test.html +238 -0
  316. package/playground/sample_code.txt +23 -0
  317. package/playground/tw-convertor.html +696 -0
  318. package/scripts/build-dist.js +34 -29
  319. package/scripts/bundle-jit.js +45 -0
  320. package/scripts/convert-tailwind.js +759 -0
  321. package/scripts/generate-docs.js +74 -23
  322. package/src/cdn/jit.js +364 -109
  323. package/src/cli/commands/build.js +14 -6
  324. package/src/cli/commands/dev.js +28 -10
  325. package/src/compiler/generators/css.js +211 -30
  326. package/src/compiler/parser.js +23 -10
  327. package/src/compiler/tokenizer.js +19 -137
  328. package/src/config/defaults.js +76 -25
  329. package/src/core/constants.js +427 -0
  330. package/src/core/tokenizer-core.js +233 -0
  331. package/src/definitions/layout-alignment.js +210 -0
  332. package/src/definitions/layout-flex.js +155 -0
  333. package/src/definitions/layout-grid.js +134 -0
  334. package/src/definitions/layout-positioning.js +64 -0
  335. package/src/definitions/layout-table.js +129 -0
  336. package/src/definitions/layout-utilities.js +164 -0
  337. package/src/definitions/space.js +172 -0
  338. package/src/definitions/visual-backgrounds.js +231 -0
  339. package/src/definitions/visual-borders.js +66 -0
  340. package/src/definitions/visual-filters.js +111 -0
  341. package/src/definitions/visual-interactivity.js +159 -0
  342. package/src/definitions/visual-svg.js +41 -0
  343. package/src/definitions/visual-transform3d.js +255 -15
  344. package/src/definitions/visual-transforms.js +92 -6
  345. package/src/definitions/visual-transitions.js +158 -0
  346. package/src/definitions/visual-typography.js +223 -0
  347. package/src/definitions/visual.js +321 -1
  348. package/tests/integration/compiler.test.js +63 -2
  349. package/tests/unit/convert-tailwind.test.js +324 -0
  350. package/tests/unit/security.test.js +206 -0
package/docs/reference/visual/scroll-margin.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-m:[value]"
23
23
  <div visual="scroll-m:medium">Scroll margin</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Scroll Margin
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>visual="scroll-m:medium"</code> - Offset for scroll snap</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsive
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/reference/visual/scroll-padding.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-p:[value]"
23
23
  <div visual="scroll-p:big">Scroll padding</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Scroll Padding
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>visual="scroll-p:big"</code> - Padding for scroll snap container</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsive
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/reference/visual/scroll-snap-align.md CHANGED
@@ -22,11 +22,32 @@ visual="snap-align:[value]"
22
22
  <div visual="snap-align:start">Snap to start</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
+ ### Snap Alignment
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>visual="snap-align:start"</code> - Where to snap within container</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
26
42
 
27
43
  ```html
28
- <!-- Responsive example -->
29
- <div visual="mob:... tab:... lap:...">
30
- Responsive content
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/reference/visual/scroll-snap-stop.md CHANGED
@@ -20,11 +20,30 @@ visual="snap-stop:[value]"
20
20
  <div visual="snap-stop:always">Always stop here</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
+ ### Snap Stop
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>visual="snap-stop:always"</code> - Control whether to stop at snap point</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
24
39
 
25
40
  ```html
26
- <!-- Responsive example -->
27
- <div visual="mob:... tab:... lap:...">
28
- Responsive content
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/scroll-snap-type.md CHANGED
@@ -24,11 +24,32 @@ visual="snap-type:[value]"
24
24
  <div visual="snap-type:x">Horizontal snap container</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
+ ### Snap Type
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>visual="snap-type:x"</code> - Enable scroll snapping</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
28
44
 
29
45
  ```html
30
- <!-- Responsive example -->
31
- <div visual="mob:... tab:... lap:...">
32
- Responsive content
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/reference/visual/state-prefixes.md CHANGED
@@ -27,11 +27,30 @@ visual="hover:... focus:... active:..."
27
27
  <button visual="hover:bg:primary focus:outline:primary">Interactive button</button>
28
28
  ```
29
29
 
30
- ## Responsive
30
+ ## Preview
31
+
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
+ ### State Prefixes
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>visual="hover:scale:110"</code> - Apply styles on hover, focus, etc.</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
40
+ <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
31
46
 
32
47
  ```html
33
- <!-- Responsive example -->
34
- <div visual="mob:... tab:... lap:...">
35
- Responsive content
48
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
50
+ <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
36
51
  </div>
37
52
  ```
53
+
54
+ </details>
55
+
56
+ </div>
package/docs/reference/visual/stroke-width.md CHANGED
@@ -21,19 +21,40 @@ visual="stroke-w:[value]"
21
21
  <svg visual="stroke:black stroke-w:2">...</svg>
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
+ ### Stroke Width
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>visual="stroke-w:2"</code> - Control SVG stroke thickness</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
34
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
35
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="stroke:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
45
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
46
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
47
+ </div>
30
48
  ```
31
49
 
32
- ## Responsive
50
+ </details>
33
51
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
52
  </div>
53
+
54
+ ## Arbitrary Values
55
+
56
+ Supports custom values using bracket syntax:
57
+
58
+ ```html
59
+ <div visual="stroke:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/stroke.md CHANGED
@@ -20,19 +20,38 @@ visual="stroke:[color]"
20
20
  <svg visual="stroke:primary stroke-w:2">...</svg>
21
21
  ```
22
22
 
23
- ## Arbitrary Values
23
+ ## Preview
24
24
 
25
- Supports custom values using bracket syntax:
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
+ ### SVG Stroke
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>visual="stroke:primary"</code> - Stroke SVG elements with color</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
33
+ <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
26
39
 
27
40
  ```html
28
- <div visual="stroke:[custom-value]">Custom</div>
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
43
+ <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
44
+ </div>
29
45
  ```
30
46
 
31
- ## Responsive
47
+ </details>
32
48
 
33
- ```html
34
- <!-- Responsive example -->
35
- <div visual="mob:... tab:... lap:...">
36
- Responsive content
37
49
  </div>
50
+
51
+ ## Arbitrary Values
52
+
53
+ Supports custom values using bracket syntax:
54
+
55
+ ```html
56
+ <div visual="stroke:[custom-value]">Custom</div>
38
57
  ```
package/docs/reference/visual/text-alignment.md CHANGED
@@ -22,11 +22,32 @@ visual="text:[alignment]"
22
22
  <p visual="text:center">Centered text</p>
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
+ ### Text Alignment
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>visual="text:center"</code> - Align text within container</p>
33
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
35
+ <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
36
+ <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
26
42
 
27
43
  ```html
28
- <!-- Responsive example -->
29
- <div visual="mob:... tab:... lap:...">
30
- Responsive content
44
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
46
+ <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
47
+ <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/reference/visual/text-color.md CHANGED
@@ -23,19 +23,42 @@ visual="text:[color]"
23
23
  <div visual="text:center">Centered text</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Text Color
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>visual="text:primary"</code> - Set text color from theme or palette</p>
34
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span visual="text:primary">Primary</span>
36
+ <span visual="text:secondary">Secondary</span>
37
+ <span visual="text:success">Success</span>
38
+ <span visual="text:danger">Danger</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
29
44
 
30
45
  ```html
31
- <div visual="text:[custom-value]">Custom</div>
46
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <span visual="text:primary">Primary</span>
48
+ <span visual="text:secondary">Secondary</span>
49
+ <span visual="text:success">Success</span>
50
+ <span visual="text:danger">Danger</span>
51
+ </div>
32
52
  ```
33
53
 
34
- ## Responsive
54
+ </details>
35
55
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
56
  </div>
57
+
58
+ ## Arbitrary Values
59
+
60
+ Supports custom values using bracket syntax:
61
+
62
+ ```html
63
+ <div visual="text:[custom-value]">Custom</div>
41
64
  ```
package/docs/reference/visual/text-decoration.md CHANGED
@@ -22,11 +22,32 @@ visual="[decoration-value]"
22
22
  <a visual="no-underline">No underline link</a>
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
+ ### Text Decoration
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>visual="underline"</code> - Add lines to text</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
26
42
 
27
43
  ```html
28
- <!-- Responsive example -->
29
- <div visual="mob:... tab:... lap:...">
30
- Responsive content
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/reference/visual/text-indent.md CHANGED
@@ -19,19 +19,40 @@ visual="indent:[value]"
19
19
  <p visual="indent:medium">Indented paragraph</p>
20
20
  ```
21
21
 
22
- ## Arbitrary Values
22
+ ## Preview
23
23
 
24
- Supports custom values using bracket syntax:
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
+ ### Text Indent
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>visual="indent:medium"</code> - Indent first line of text</p>
30
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
31
+ <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
32
+ <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
33
+ <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
25
39
 
26
40
  ```html
27
- <div visual="text:[custom-value]">Custom</div>
41
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
43
+ <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
44
+ <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
45
+ </div>
28
46
  ```
29
47
 
30
- ## Responsive
48
+ </details>
31
49
 
32
- ```html
33
- <!-- Responsive example -->
34
- <div visual="mob:... tab:... lap:...">
35
- Responsive content
36
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="text:[custom-value]">Custom</div>
37
58
  ```
package/docs/reference/visual/text-overflow.md CHANGED
@@ -21,11 +21,30 @@ visual="[overflow-value]"
21
21
  <div visual="truncate">Very long text that gets truncated...</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
+ ### Text Overflow
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>visual="truncate"</code> - Handle overflowing text</p>
32
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
34
+ <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
25
40
 
26
41
  ```html
27
- <!-- Responsive example -->
28
- <div visual="mob:... tab:... lap:...">
29
- Responsive content
42
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
44
+ <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
30
45
  </div>
31
46
  ```
47
+
48
+ </details>
49
+
50
+ </div>
package/docs/reference/visual/text-shadow.md CHANGED
@@ -22,19 +22,42 @@ visual="text-shadow:[value]"
22
22
  <h1 visual="text-shadow:medium">Shadowed heading</h1>
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
+ ### Text Shadow
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>visual="text-shadow:medium"</code> - Add shadow to text</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
35
+ <div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
36
+ <div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
37
+ <div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
28
43
 
29
44
  ```html
30
- <div visual="text:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
47
+ <div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
48
+ <div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
49
+ <div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
50
+ </div>
31
51
  ```
32
52
 
33
- ## Responsive
53
+ </details>
34
54
 
35
- ```html
36
- <!-- Responsive example -->
37
- <div visual="mob:... tab:... lap:...">
38
- Responsive content
39
55
  </div>
56
+
57
+ ## Arbitrary Values
58
+
59
+ Supports custom values using bracket syntax:
60
+
61
+ ```html
62
+ <div visual="text:[custom-value]">Custom</div>
40
63
  ```