mancha 0.17.4 → 0.17.5

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 (3) hide show
  1. package/docs/css.md +346 -236
  2. package/package.json +1 -1
  3. package/scripts/generate-css-docs.ts +132 -21
package/docs/css.md CHANGED
@@ -7,7 +7,6 @@ Mancha provides a set of CSS utilities and basic styles to help you build your a
7
7
  The basic CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectBasicCss()` or by adding `css="basic"` to your script tag.
8
8
 
9
9
  ### Reset & Defaults
10
-
11
10
  - **Max Width**: 70ch (centered)
12
11
  - **Padding**: 2em 1em
13
12
  - **Line Height**: 1.75
@@ -22,16 +21,15 @@ The utility CSS rules are inspired by Tailwind CSS. You can inject them using `i
22
21
  ### Media Breakpoints
23
22
 
24
23
  | Prefix | Min Width |
25
- | ------ | --------- |
26
- | `sm:` | `640px` |
27
- | `md:` | `768px` |
28
- | `lg:` | `1024px` |
29
- | `xl:` | `1280px` |
24
+ | --- | --- |
25
+ | `sm:` | `640px` |
26
+ | `md:` | `768px` |
27
+ | `lg:` | `1024px` |
28
+ | `xl:` | `1280px` |
30
29
 
31
30
  ### Pseudo States
32
31
 
33
32
  The following pseudo states are supported for all utilities:
34
-
35
33
  - `hover:`
36
34
  - `focus:`
37
35
  - `disabled:`
@@ -41,269 +39,381 @@ The following pseudo states are supported for all utilities:
41
39
 
42
40
  Spacing utilities use a 0.25rem (4px) unit by default.
43
41
 
44
- | Prefix | Property | Values |
45
- | ------ | -------------------- | ------------------------------------------------- |
46
- | `m-` | `margin` | `0`, `0.25rem` - `128rem` (and negative versions) |
47
- | `mx-` | `margin-left/right` | Same as above |
48
- | `my-` | `margin-top/bottom` | Same as above |
49
- | `mt-` | `margin-top` | Same as above |
50
- | `mb-` | `margin-bottom` | Same as above |
51
- | `ml-` | `margin-left` | Same as above |
52
- | `mr-` | `margin-right` | Same as above |
53
- | `p-` | `padding` | `0`, `0.25rem` - `128rem` (and negative versions) |
54
- | `px-` | `padding-left/right` | Same as above |
55
- | `py-` | `padding-top/bottom` | Same as above |
56
- | `pt-` | `padding-top` | Same as above |
57
- | `pb-` | `padding-bottom` | Same as above |
58
- | `pl-` | `padding-left` | Same as above |
59
- | `pr-` | `padding-right` | Same as above |
42
+ | Prefix | Property | Values |
43
+ | --- | --- | --- |
44
+ | `m-` | `margin` | `0`, `0.25rem` - `128rem` (and negative versions) |
45
+ | `mx-` | `margin-left/right` | Same as above |
46
+ | `my-` | `margin-top/bottom` | Same as above |
47
+ | `mt-` | `margin-top` | Same as above |
48
+ | `mb-` | `margin-bottom` | Same as above |
49
+ | `ml-` | `margin-left` | Same as above |
50
+ | `mr-` | `margin-right` | Same as above |
51
+ | `p-` | `padding` | `0`, `0.25rem` - `128rem` (and negative versions) |
52
+ | `px-` | `padding-left/right` | Same as above |
53
+ | `py-` | `padding-top/bottom` | Same as above |
54
+ | `pt-` | `padding-top` | Same as above |
55
+ | `pb-` | `padding-bottom` | Same as above |
56
+ | `pl-` | `padding-left` | Same as above |
57
+ | `pr-` | `padding-right` | Same as above |
60
58
 
61
59
  ### Sizing (Width & Height)
62
60
 
63
- | Prefix | Property | Values |
64
- | --------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
65
- | `w-` | `width` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
66
- | `w-dvw/dvh/svw/svh/lvw/lvh` | `width` | Viewport-relative units |
67
- | `w-fit/min/max` | `width` | `fit-content`, `min-content`, `max-content` |
68
- | `h-` | `height` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
69
- | `h-dvw/dvh/svw/svh/lvw/lvh` | `height` | Viewport-relative units |
70
- | `h-fit/min/max` | `height` | `fit-content`, `min-content`, `max-content` |
71
- | `min-w-` | `min-width` | Same as sizing |
72
- | `min-h-` | `min-height` | Same as sizing |
73
- | `max-w-` | `max-width` | Same as sizing |
74
- | `max-h-` | `max-height` | Same as sizing |
75
- | `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |
61
+ | Prefix | Property | Values |
62
+ | --- | --- | --- |
63
+ | `w-` | `width` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
64
+ | `w-dvw/dvh/svw/svh/lvw/lvh` | `width` | Viewport-relative units |
65
+ | `w-fit/min/max` | `width` | `fit-content`, `min-content`, `max-content` |
66
+ | `h-` | `height` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
67
+ | `h-dvw/dvh/svw/svh/lvw/lvh` | `height` | Viewport-relative units |
68
+ | `h-fit/min/max` | `height` | `fit-content`, `min-content`, `max-content` |
69
+ | `min-w-` | `min-width` | Same as sizing |
70
+ | `min-h-` | `min-height` | Same as sizing |
71
+ | `max-w-` | `max-width` | Same as sizing |
72
+ | `max-h-` | `max-height` | Same as sizing |
73
+ | `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |
76
74
 
77
75
  ### Colors
78
76
 
79
77
  Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.
80
78
 
81
- | Color | Shades |
82
- | ------------------------------- | ------------------------------------------------------------------- |
83
- | `white`, `black`, `transparent` | N/A |
84
- | `red` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
85
- | `pink` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
86
- | `purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
87
- | `deep-purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
88
- | `indigo` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
89
- | `blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
90
- | `light-blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
91
- | `cyan` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
92
- | `teal` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
93
- | `green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
94
- | `light-green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
95
- | `lime` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
96
- | `yellow` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
97
- | `amber` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
98
- | `orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
99
- | `deep-orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
100
- | `brown` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
101
- | `gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
102
- | `blue-gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
79
+ | Color | Shades |
80
+ | --- | --- |
81
+ | `white`, `black`, `transparent` | N/A |
82
+ | `red` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
83
+ | `pink` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
84
+ | `purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
85
+ | `deep-purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
86
+ | `indigo` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
87
+ | `blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
88
+ | `light-blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
89
+ | `cyan` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
90
+ | `teal` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
91
+ | `green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
92
+ | `light-green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
93
+ | `lime` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
94
+ | `yellow` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
95
+ | `amber` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
96
+ | `orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
97
+ | `deep-orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
98
+ | `brown` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
99
+ | `gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
100
+ | `blue-gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
103
101
 
104
102
  ### Borders & Corners
105
103
 
106
- | Utility | Description |
107
- | ----------------- | -------------------------------- |
108
- | `border` | `{"border":"1px solid"}` |
109
- | `border-none` | `{"border":"none"}` |
110
- | `border-solid` | `{"border-style":"solid"}` |
111
- | `border-dashed` | `{"border-style":"dashed"}` |
112
- | `border-dotted` | `{"border-style":"dotted"}` |
104
+ | Utility | Description |
105
+ | --- | --- |
106
+ | `border` | `{"border":"1px solid"}` |
107
+ | `border-none` | `{"border":"none"}` |
108
+ | `border-solid` | `{"border-style":"solid"}` |
109
+ | `border-dashed` | `{"border-style":"dashed"}` |
110
+ | `border-dotted` | `{"border-style":"dotted"}` |
113
111
  | `border-collapse` | `{"border-collapse":"collapse"}` |
114
- | `rounded-none` | `{"border-radius":"0"}` |
115
- | `rounded` | `{"border-radius":".25rem"}` |
116
- | `rounded-sm` | `{"border-radius":".125rem"}` |
117
- | `rounded-md` | `{"border-radius":".375rem"}` |
118
- | `rounded-lg` | `{"border-radius":".5rem"}` |
119
- | `rounded-xl` | `{"border-radius":".75rem"}` |
120
- | `rounded-full` | `{"border-radius":"9999px"}` |
112
+ | `rounded-none` | `{"border-radius":"0"}` |
113
+ | `rounded` | `{"border-radius":".25rem"}` |
114
+ | `rounded-sm` | `{"border-radius":".125rem"}` |
115
+ | `rounded-md` | `{"border-radius":".375rem"}` |
116
+ | `rounded-lg` | `{"border-radius":".5rem"}` |
117
+ | `rounded-xl` | `{"border-radius":".75rem"}` |
118
+ | `rounded-full` | `{"border-radius":"9999px"}` |
119
+ | `border-{0-15}` | Border width in pixels (e.g., `border-0`, `border-1`, ..., `border-15`) |
120
+ | `border-x-{0-15}` | Horizontal border width in pixels |
121
+ | `border-y-{0-15}` | Vertical border width in pixels |
122
+ | `border-{t,b,l,r}-{0-15}` | Individual side border width in pixels |
121
123
 
122
124
  ### Shadows & Effects
123
125
 
124
- | Utility | Description |
125
- | ---------------- | -------------------------------------------------------------------------------------------- |
126
- | `shadow` | `{"box-shadow":"0 0 1px 0 rgba(0, 0, 0, 0.05)"}` |
127
- | `shadow-sm` | `{"box-shadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)"}` |
128
- | `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"}` |
129
- | `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"}` |
130
- | `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"}` |
131
- | `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgba(0, 0, 0, 0.25)"}` |
132
- | `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"}` |
133
- | `shadow-outline` | `{"box-shadow":"0 0 0 3px rgba(66, 153, 225, 0.5)"}` |
134
- | `shadow-none` | `{"box-shadow":"none"}` |
126
+ | Utility | Description |
127
+ | --- | --- |
128
+ | `shadow` | `{"box-shadow":"0 0 1px 0 rgba(0, 0, 0, 0.05)"}` |
129
+ | `shadow-sm` | `{"box-shadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)"}` |
130
+ | `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"}` |
131
+ | `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"}` |
132
+ | `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"}` |
133
+ | `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgba(0, 0, 0, 0.25)"}` |
134
+ | `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"}` |
135
+ | `shadow-outline` | `{"box-shadow":"0 0 0 3px rgba(66, 153, 225, 0.5)"}` |
136
+ | `shadow-none` | `{"box-shadow":"none"}` |
137
+ | `opacity-0` | Fully transparent |
138
+ | `opacity-{1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100}` | Opacity values from 0-100 |
135
139
 
136
140
  ### Transitions & Animations
137
141
 
138
- | Utility | Description |
139
- | ----------------- | ---------------------------------------------------------------- |
140
- | `transition-none` | `{"transition":"none"}` |
141
- | `transition` | `{"transition":"all 150ms ease-in-out"}` |
142
- | `animate-none` | `{"animation":"none"}` |
143
- | `animate-spin` | `{"animation":"spin 1s linear infinite"}` |
144
- | `animate-ping` | `{"animation":"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"}` |
145
- | `animate-pulse` | `{"animation":"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}` |
142
+ | Utility | Description |
143
+ | --- | --- |
144
+ | `transition-none` | `{"transition":"none"}` |
145
+ | `transition` | `{"transition":"all 150ms ease-in-out"}` |
146
+ | `animate-none` | `{"animation":"none"}` |
147
+ | `animate-spin` | `{"animation":"spin 1s linear infinite"}` |
148
+ | `animate-ping` | `{"animation":"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"}` |
149
+ | `animate-pulse` | `{"animation":"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}` |
150
+ | `duration-{75,100,150,200,300,500,700,1000}` | Transition duration in milliseconds |
146
151
 
147
152
  ### Interactivity
148
153
 
149
- | Utility | Description |
150
- | --------------------- | --------------------------- |
151
- | `cursor-pointer` | `{"cursor":"pointer"}` |
152
- | `cursor-wait` | `{"cursor":"wait"}` |
153
- | `cursor-not-allowed` | `{"cursor":"not-allowed"}` |
154
- | `select-none` | `{"user-select":"none"}` |
155
- | `select-all` | `{"user-select":"all"}` |
154
+ | Utility | Description |
155
+ | --- | --- |
156
+ | `cursor-pointer` | `{"cursor":"pointer"}` |
157
+ | `cursor-wait` | `{"cursor":"wait"}` |
158
+ | `cursor-not-allowed` | `{"cursor":"not-allowed"}` |
159
+ | `select-none` | `{"user-select":"none"}` |
160
+ | `select-all` | `{"user-select":"all"}` |
156
161
  | `pointer-events-auto` | `{"pointer-events":"auto"}` |
157
162
  | `pointer-events-none` | `{"pointer-events":"none"}` |
158
- | `resize` | `{"resize":"both"}` |
159
- | `resize-x` | `{"resize":"horizontal"}` |
160
- | `resize-y` | `{"resize":"vertical"}` |
161
- | `resize-none` | `{"resize":"none"}` |
163
+ | `resize` | `{"resize":"both"}` |
164
+ | `resize-x` | `{"resize":"horizontal"}` |
165
+ | `resize-y` | `{"resize":"vertical"}` |
166
+ | `resize-none` | `{"resize":"none"}` |
162
167
 
163
168
  ### Typography
164
169
 
165
- | Utility | Description |
166
- | ------------------------- | ------------------------------------------------------------------------- |
167
- | `font-mono` | `{"font-family":"monospace"}` |
168
- | `font-sans` | `{"font-family":"sans-serif"}` |
169
- | `font-serif` | `{"font-family":"serif"}` |
170
- | `font-cursive` | `{"font-family":"cursive"}` |
171
- | `text-xs` | `{"font-size":".75rem","line-height":"calc(1 / 0.75)"}` |
172
- | `text-sm` | `{"font-size":".875rem","line-height":"calc(1.25 / 0.875)"}` |
173
- | `text-base` | `{"font-size":"1rem","line-height":"calc(1.5 / 1)"}` |
174
- | `text-lg` | `{"font-size":"1.125rem","line-height":"calc(1.75 / 1.125)"}` |
175
- | `text-xl` | `{"font-size":"1.25rem","line-height":"calc(1.75 / 1.25)"}` |
176
- | `text-2xl` | `{"font-size":"1.5rem","line-height":"calc(2 / 1.5)"}` |
177
- | `text-3xl` | `{"font-size":"1.875rem","line-height":"calc(2.25 / 1.875)"}` |
178
- | `text-4xl` | `{"font-size":"2.25rem","line-height":"calc(2.5 / 2.25)"}` |
179
- | `text-5xl` | `{"font-size":"3rem","line-height":"1"}` |
180
- | `text-6xl` | `{"font-size":"3.75rem","line-height":"1"}` |
181
- | `text-7xl` | `{"font-size":"4.5rem","line-height":"1"}` |
182
- | `font-thin` | `{"font-weight":100}` |
183
- | `font-extralight` | `{"font-weight":200}` |
184
- | `font-light` | `{"font-weight":300}` |
185
- | `font-normal` | `{"font-weight":400}` |
186
- | `font-medium` | `{"font-weight":500}` |
187
- | `font-semibold` | `{"font-weight":600}` |
188
- | `font-bold` | `{"font-weight":700}` |
189
- | `font-extrabold` | `{"font-weight":800}` |
190
- | `font-black` | `{"font-weight":900}` |
191
- | `italic` | `{"font-style":"italic"}` |
192
- | `not-italic` | `{"font-style":"normal"}` |
193
- | `tracking-tighter` | `{"letter-spacing":"-0.05em"}` |
194
- | `tracking-tight` | `{"letter-spacing":"-0.025em"}` |
195
- | `tracking-normal` | `{"letter-spacing":"0"}` |
196
- | `tracking-wide` | `{"letter-spacing":"0.025em"}` |
197
- | `tracking-wider` | `{"letter-spacing":"0.05em"}` |
198
- | `tracking-widest` | `{"letter-spacing":"0.1em"}` |
199
- | `leading-none` | `{"line-height":"1"}` |
200
- | `leading-tight` | `{"line-height":"1.25"}` |
201
- | `leading-snug` | `{"line-height":"1.375"}` |
202
- | `leading-normal` | `{"line-height":"1.5"}` |
203
- | `leading-relaxed` | `{"line-height":"1.625"}` |
204
- | `leading-loose` | `{"line-height":"2"}` |
205
- | `text-left` | `{"text-align":"left"}` |
206
- | `text-right` | `{"text-align":"right"}` |
207
- | `text-center` | `{"text-align":"center"}` |
208
- | `text-justify` | `{"text-align":"justify"}` |
209
- | `underline` | `{"text-decoration":"underline"}` |
210
- | `decoration-none` | `{"text-decoration":"none"}` |
211
- | `line-through` | `{"text-decoration":"line-through"}` |
212
- | `uppercase` | `{"text-transform":"uppercase"}` |
213
- | `lowercase` | `{"text-transform":"lowercase"}` |
214
- | `capitalize` | `{"text-transform":"capitalize"}` |
215
- | `truncate` | `{"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}` |
216
- | `text-elipsis` | `{"text-overflow":"ellipsis"}` |
217
- | `text-clip` | `{"text-overflow":"clip"}` |
218
- | `text-wrap` | `{"text-wrap":"wrap"}` |
219
- | `text-nowrap` | `{"text-wrap":"nowrap"}` |
220
- | `text-balance` | `{"text-wrap":"balance"}` |
221
- | `text-pretty` | `{"text-wrap":"pretty"}` |
222
- | `whitespace-normal` | `{"white-space":"normal"}` |
223
- | `whitespace-nowrap` | `{"white-space":"nowrap"}` |
224
- | `whitespace-pre` | `{"white-space":"pre"}` |
225
- | `whitespace-pre-line` | `{"white-space":"pre-line"}` |
226
- | `whitespace-pre-wrap` | `{"white-space":"pre-wrap"}` |
227
- | `whitespace-break-spaces` | `{"white-space":"break-spaces"}` |
170
+ | Utility | Description |
171
+ | --- | --- |
172
+ | `font-mono` | `{"font-family":"monospace"}` |
173
+ | `font-sans` | `{"font-family":"sans-serif"}` |
174
+ | `font-serif` | `{"font-family":"serif"}` |
175
+ | `font-cursive` | `{"font-family":"cursive"}` |
176
+ | `text-xs` | `{"font-size":".75rem","line-height":"calc(1 / 0.75)"}` |
177
+ | `text-sm` | `{"font-size":".875rem","line-height":"calc(1.25 / 0.875)"}` |
178
+ | `text-base` | `{"font-size":"1rem","line-height":"calc(1.5 / 1)"}` |
179
+ | `text-lg` | `{"font-size":"1.125rem","line-height":"calc(1.75 / 1.125)"}` |
180
+ | `text-xl` | `{"font-size":"1.25rem","line-height":"calc(1.75 / 1.25)"}` |
181
+ | `text-2xl` | `{"font-size":"1.5rem","line-height":"calc(2 / 1.5)"}` |
182
+ | `text-3xl` | `{"font-size":"1.875rem","line-height":"calc(2.25 / 1.875)"}` |
183
+ | `text-4xl` | `{"font-size":"2.25rem","line-height":"calc(2.5 / 2.25)"}` |
184
+ | `text-5xl` | `{"font-size":"3rem","line-height":"1"}` |
185
+ | `text-6xl` | `{"font-size":"3.75rem","line-height":"1"}` |
186
+ | `text-7xl` | `{"font-size":"4.5rem","line-height":"1"}` |
187
+ | `font-thin` | `{"font-weight":100}` |
188
+ | `font-extralight` | `{"font-weight":200}` |
189
+ | `font-light` | `{"font-weight":300}` |
190
+ | `font-normal` | `{"font-weight":400}` |
191
+ | `font-medium` | `{"font-weight":500}` |
192
+ | `font-semibold` | `{"font-weight":600}` |
193
+ | `font-bold` | `{"font-weight":700}` |
194
+ | `font-extrabold` | `{"font-weight":800}` |
195
+ | `font-black` | `{"font-weight":900}` |
196
+ | `italic` | `{"font-style":"italic"}` |
197
+ | `not-italic` | `{"font-style":"normal"}` |
198
+ | `tracking-tighter` | `{"letter-spacing":"-0.05em"}` |
199
+ | `tracking-tight` | `{"letter-spacing":"-0.025em"}` |
200
+ | `tracking-normal` | `{"letter-spacing":"0"}` |
201
+ | `tracking-wide` | `{"letter-spacing":"0.025em"}` |
202
+ | `tracking-wider` | `{"letter-spacing":"0.05em"}` |
203
+ | `tracking-widest` | `{"letter-spacing":"0.1em"}` |
204
+ | `leading-none` | `{"line-height":"1"}` |
205
+ | `leading-tight` | `{"line-height":"1.25"}` |
206
+ | `leading-snug` | `{"line-height":"1.375"}` |
207
+ | `leading-normal` | `{"line-height":"1.5"}` |
208
+ | `leading-relaxed` | `{"line-height":"1.625"}` |
209
+ | `leading-loose` | `{"line-height":"2"}` |
210
+ | `text-left` | `{"text-align":"left"}` |
211
+ | `text-right` | `{"text-align":"right"}` |
212
+ | `text-center` | `{"text-align":"center"}` |
213
+ | `text-justify` | `{"text-align":"justify"}` |
214
+ | `underline` | `{"text-decoration":"underline"}` |
215
+ | `decoration-none` | `{"text-decoration":"none"}` |
216
+ | `line-through` | `{"text-decoration":"line-through"}` |
217
+ | `uppercase` | `{"text-transform":"uppercase"}` |
218
+ | `lowercase` | `{"text-transform":"lowercase"}` |
219
+ | `capitalize` | `{"text-transform":"capitalize"}` |
220
+ | `truncate` | `{"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}` |
221
+ | `text-elipsis` | `{"text-overflow":"ellipsis"}` |
222
+ | `text-clip` | `{"text-overflow":"clip"}` |
223
+ | `text-wrap` | `{"text-wrap":"wrap"}` |
224
+ | `text-nowrap` | `{"text-wrap":"nowrap"}` |
225
+ | `text-balance` | `{"text-wrap":"balance"}` |
226
+ | `text-pretty` | `{"text-wrap":"pretty"}` |
227
+ | `whitespace-normal` | `{"white-space":"normal"}` |
228
+ | `whitespace-nowrap` | `{"white-space":"nowrap"}` |
229
+ | `whitespace-pre` | `{"white-space":"pre"}` |
230
+ | `whitespace-pre-line` | `{"white-space":"pre-line"}` |
231
+ | `whitespace-pre-wrap` | `{"white-space":"pre-wrap"}` |
232
+ | `whitespace-break-spaces` | `{"white-space":"break-spaces"}` |
228
233
 
229
234
  ### Flexbox & Layout
230
235
 
231
- | Utility | Description |
232
- | ------------------- | ------------------------------------- |
233
- | `flex` | `{"display":"flex"}` |
234
- | `flex-1` | `{"flex":"1 1 0%"}` |
235
- | `flex-inline` | `{"display":"inline-flex"}` |
236
- | `flex-row` | `{"flex-direction":"row"}` |
237
- | `flex-col` | `{"flex-direction":"column"}` |
238
- | `flex-row-reverse` | `{"flex-direction":"row-reverse"}` |
239
- | `flex-col-reverse` | `{"flex-direction":"column-reverse"}` |
240
- | `flex-wrap` | `{"flex-wrap":"wrap"}` |
241
- | `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}` |
242
- | `flex-nowrap` | `{"flex-wrap":"nowrap"}` |
243
- | `justify-start` | `{"justify-content":"flex-start"}` |
244
- | `justify-end` | `{"justify-content":"flex-end"}` |
245
- | `justify-center` | `{"justify-content":"center"}` |
246
- | `justify-between` | `{"justify-content":"space-between"}` |
247
- | `justify-around` | `{"justify-content":"space-around"}` |
248
- | `justify-evenly` | `{"justify-content":"space-evenly"}` |
249
- | `justify-stretch` | `{"justify-content":"stretch"}` |
250
- | `items-start` | `{"align-items":"flex-start"}` |
251
- | `items-end` | `{"align-items":"flex-end"}` |
252
- | `items-center` | `{"align-items":"center"}` |
253
- | `items-stretch` | `{"align-items":"stretch"}` |
254
- | `flex-grow` | `{"flex-grow":1}` |
255
- | `flex-shrink` | `{"flex-shrink":1}` |
256
- | `flex-none` | `{"flex":"none"}` |
257
- | `flex-auto` | `{"flex":"1 1 auto"}` |
258
- | `flex-initial` | `{"flex":"0 1 auto"}` |
259
- | `grow` | `{"flex-grow":"1"}` |
260
- | `grow-0` | `{"flex-grow":"0"}` |
261
- | `shrink` | `{"flex-shrink":"1"}` |
262
- | `shrink-0` | `{"flex-shrink":"0"}` |
263
- | `self-auto` | `{"align-self":"auto"}` |
264
- | `self-start` | `{"align-self":"flex-start"}` |
265
- | `self-end` | `{"align-self":"flex-end"}` |
266
- | `self-center` | `{"align-self":"center"}` |
267
- | `self-stretch` | `{"align-self":"stretch"}` |
268
- | `self-baseline` | `{"align-self":"baseline"}` |
269
- | `content-normal` | `{"align-content":"normal"}` |
270
- | `content-start` | `{"align-content":"flex-start"}` |
271
- | `content-end` | `{"align-content":"flex-end"}` |
272
- | `content-center` | `{"align-content":"center"}` |
273
- | `content-between` | `{"align-content":"space-between"}` |
274
- | `content-around` | `{"align-content":"space-around"}` |
275
- | `content-evenly` | `{"align-content":"space-evenly"}` |
276
- | `content-stretch` | `{"align-content":"stretch"}` |
277
- | `items-baseline` | `{"align-items":"baseline"}` |
236
+ | Utility | Description |
237
+ | --- | --- |
238
+ | `flex` | `{"display":"flex"}` |
239
+ | `flex-1` | `{"flex":"1 1 0%"}` |
240
+ | `flex-inline` | `{"display":"inline-flex"}` |
241
+ | `flex-row` | `{"flex-direction":"row"}` |
242
+ | `flex-col` | `{"flex-direction":"column"}` |
243
+ | `flex-row-reverse` | `{"flex-direction":"row-reverse"}` |
244
+ | `flex-col-reverse` | `{"flex-direction":"column-reverse"}` |
245
+ | `flex-wrap` | `{"flex-wrap":"wrap"}` |
246
+ | `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}` |
247
+ | `flex-nowrap` | `{"flex-wrap":"nowrap"}` |
248
+ | `justify-start` | `{"justify-content":"flex-start"}` |
249
+ | `justify-end` | `{"justify-content":"flex-end"}` |
250
+ | `justify-center` | `{"justify-content":"center"}` |
251
+ | `justify-between` | `{"justify-content":"space-between"}` |
252
+ | `justify-around` | `{"justify-content":"space-around"}` |
253
+ | `justify-evenly` | `{"justify-content":"space-evenly"}` |
254
+ | `justify-stretch` | `{"justify-content":"stretch"}` |
255
+ | `items-start` | `{"align-items":"flex-start"}` |
256
+ | `items-end` | `{"align-items":"flex-end"}` |
257
+ | `items-center` | `{"align-items":"center"}` |
258
+ | `items-stretch` | `{"align-items":"stretch"}` |
259
+ | `flex-grow` | `{"flex-grow":1}` |
260
+ | `flex-shrink` | `{"flex-shrink":1}` |
261
+ | `flex-none` | `{"flex":"none"}` |
262
+ | `flex-auto` | `{"flex":"1 1 auto"}` |
263
+ | `flex-initial` | `{"flex":"0 1 auto"}` |
264
+ | `grow` | `{"flex-grow":"1"}` |
265
+ | `grow-0` | `{"flex-grow":"0"}` |
266
+ | `shrink` | `{"flex-shrink":"1"}` |
267
+ | `shrink-0` | `{"flex-shrink":"0"}` |
268
+ | `self-auto` | `{"align-self":"auto"}` |
269
+ | `self-start` | `{"align-self":"flex-start"}` |
270
+ | `self-end` | `{"align-self":"flex-end"}` |
271
+ | `self-center` | `{"align-self":"center"}` |
272
+ | `self-stretch` | `{"align-self":"stretch"}` |
273
+ | `self-baseline` | `{"align-self":"baseline"}` |
274
+ | `content-normal` | `{"align-content":"normal"}` |
275
+ | `content-start` | `{"align-content":"flex-start"}` |
276
+ | `content-end` | `{"align-content":"flex-end"}` |
277
+ | `content-center` | `{"align-content":"center"}` |
278
+ | `content-between` | `{"align-content":"space-between"}` |
279
+ | `content-around` | `{"align-content":"space-around"}` |
280
+ | `content-evenly` | `{"align-content":"space-evenly"}` |
281
+ | `content-stretch` | `{"align-content":"stretch"}` |
282
+ | `items-baseline` | `{"align-items":"baseline"}` |
283
+ | `gap-0` | No gap |
284
+ | `gap-{1-512}` | Gap in rem units (0.25rem increments) |
285
+ | `gap-{1-512}px` | Gap in pixels |
286
+ | `gap-x-{1-512}` | Horizontal gap in rem units |
287
+ | `gap-y-{1-512}` | Vertical gap in rem units |
288
+ | `gap-x-{1-512}px` | Horizontal gap in pixels |
289
+ | `gap-y-{1-512}px` | Vertical gap in pixels |
290
+ | `space-x-{0-512}` | Horizontal spacing between children (rem) |
291
+ | `space-y-{0-512}` | Vertical spacing between children (rem) |
292
+ | `space-x-{0-512}px` | Horizontal spacing between children (px) |
293
+ | `space-y-{0-512}px` | Vertical spacing between children (px) |
278
294
 
279
295
  ### Position & Inset
280
296
 
281
- | Utility | Description |
282
- | ---------------- | -------------------------------- |
283
- | `relative` | `{"position":"relative"}` |
284
- | `fixed` | `{"position":"fixed"}` |
285
- | `absolute` | `{"position":"absolute"}` |
286
- | `sticky` | `{"position":"sticky"}` |
287
- | `object-contain` | `{"object-fit":"contain"}` |
288
- | `object-cover` | `{"object-fit":"cover"}` |
289
- | `object-fill` | `{"object-fit":"fill"}` |
290
- | `object-none` | `{"object-fit":"none"}` |
291
- | `z-auto` | `{"z-index":"auto"}` |
292
- | `inset-0` | `{"inset":"0"}` |
293
- | `inset-auto` | `{"inset":"auto"}` |
294
- | `inset-x-0` | `{"left":"0","right":"0"}` |
295
- | `inset-y-0` | `{"top":"0","bottom":"0"}` |
296
- | `inset-x-auto` | `{"left":"auto","right":"auto"}` |
297
- | `inset-y-auto` | `{"top":"auto","bottom":"auto"}` |
297
+ | Utility | Description |
298
+ | --- | --- |
299
+ | `relative` | `{"position":"relative"}` |
300
+ | `fixed` | `{"position":"fixed"}` |
301
+ | `absolute` | `{"position":"absolute"}` |
302
+ | `sticky` | `{"position":"sticky"}` |
303
+ | `object-contain` | `{"object-fit":"contain"}` |
304
+ | `object-cover` | `{"object-fit":"cover"}` |
305
+ | `object-fill` | `{"object-fit":"fill"}` |
306
+ | `object-none` | `{"object-fit":"none"}` |
307
+ | `inset-0` | `{"inset":"0"}` |
308
+ | `inset-auto` | `{"inset":"auto"}` |
309
+ | `inset-x-0` | `{"left":"0","right":"0"}` |
310
+ | `inset-y-0` | `{"top":"0","bottom":"0"}` |
311
+ | `inset-x-auto` | `{"left":"auto","right":"auto"}` |
312
+ | `inset-y-auto` | `{"top":"auto","bottom":"auto"}` |
313
+ | `top-{0-512}`, `bottom-{0-512}`, `left-{0-512}`, `right-{0-512}` | Position in rem units (0.25rem increments) |
314
+ | `top-{0-512}px`, `bottom-{0-512}px`, `left-{0-512}px`, `right-{0-512}px` | Position in pixels |
315
+ | `top-{1-100}%`, `bottom-{1-100}%`, `left-{1-100}%`, `right-{1-100}%` | Position in percentages |
316
+ | `top-auto`, `bottom-auto`, `left-auto`, `right-auto` | Auto positioning |
317
+ | `z-{1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100}` | Z-index values |
318
+
319
+ ### Display & Visibility
320
+
321
+ | Utility | Description |
322
+ | --- | --- |
323
+ | `block` | `{"display":"block"}` |
324
+ | `contents` | `{"display":"contents"}` |
325
+ | `hidden` | `{"display":"none"}` |
326
+ | `inline` | `{"display":"inline"}` |
327
+ | `visible` | `{"visibility":"visible"}` |
328
+ | `invisible` | `{"visibility":"hidden"}` |
329
+ | `collapse` | `{"visibility":"collapse"}` |
330
+
331
+ ### Overflow & Scrolling
332
+
333
+ | Utility | Description |
334
+ | --- | --- |
335
+ | `overflow-auto` | `{"overflow":"auto"}` |
336
+ | `overflow-x-auto` | `{"overflow-x":"auto"}` |
337
+ | `overflow-y-auto` | `{"overflow-y":"auto"}` |
338
+ | `overflow-hidden` | `{"overflow":"hidden"}` |
339
+ | `overflow-x-hidden` | `{"overflow-x":"hidden"}` |
340
+ | `overflow-y-hidden` | `{"overflow-y":"hidden"}` |
341
+ | `overflow-visible` | `{"overflow":"visible"}` |
342
+ | `overscroll-auto` | `{"overscroll-behavior":"auto"}` |
343
+ | `overscroll-contain` | `{"overscroll-behavior":"contain"}` |
344
+ | `overscroll-none` | `{"overscroll-behavior":"none"}` |
345
+ | `overscroll-x-auto` | `{"overscroll-behavior-x":"auto"}` |
346
+ | `overscroll-x-contain` | `{"overscroll-behavior-x":"contain"}` |
347
+ | `overscroll-x-none` | `{"overscroll-behavior-x":"none"}` |
348
+ | `overscroll-y-auto` | `{"overscroll-behavior-y":"auto"}` |
349
+ | `overscroll-y-contain` | `{"overscroll-behavior-y":"contain"}` |
350
+ | `overscroll-y-none` | `{"overscroll-behavior-y":"none"}` |
351
+
352
+ ### Backgrounds
353
+
354
+ | Utility | Description |
355
+ | --- | --- |
356
+ | `bg-auto` | `{"background-size":"auto"}` |
357
+ | `bg-cover` | `{"background-size":"cover"}` |
358
+ | `bg-contain` | `{"background-size":"contain"}` |
359
+ | `bg-no-repeat` | `{"background-repeat":"no-repeat"}` |
360
+ | `bg-fixed` | `{"background-attachment":"fixed"}` |
361
+ | `bg-local` | `{"background-attachment":"local"}` |
362
+ | `bg-scroll` | `{"background-attachment":"scroll"}` |
363
+
364
+ ### Lists
365
+
366
+ | Utility | Description |
367
+ | --- | --- |
368
+ | `list-none` | `{"list-style-type":"none"}` |
369
+ | `list-disc` | `{"list-style-type":"disc"}` |
370
+ | `list-decimal` | `{"list-style-type":"decimal"}` |
371
+
372
+ ### Vertical Alignment
373
+
374
+ | Utility | Description |
375
+ | --- | --- |
376
+ | `align-baseline` | `{"vertical-align":"baseline"}` |
377
+ | `align-top` | `{"vertical-align":"top"}` |
378
+ | `align-middle` | `{"vertical-align":"middle"}` |
379
+ | `align-bottom` | `{"vertical-align":"bottom"}` |
380
+ | `align-text-top` | `{"vertical-align":"text-top"}` |
381
+ | `align-text-bottom` | `{"vertical-align":"text-bottom"}` |
382
+
383
+ ### Viewport Sizing
384
+
385
+ | Utility | Description |
386
+ | --- | --- |
387
+ | `min-h-screen` | `{"min-height":"100vh"}` |
388
+ | `max-h-screen` | `{"max-height":"100vh"}` |
389
+ | `min-w-screen` | `{"min-width":"100vw"}` |
390
+ | `h-dvh` | `{"height":"100dvh"}` |
391
+ | `h-svh` | `{"height":"100svh"}` |
392
+ | `h-lvh` | `{"height":"100lvh"}` |
393
+ | `w-dvw` | `{"width":"100dvw"}` |
394
+ | `w-svw` | `{"width":"100svw"}` |
395
+ | `w-lvw` | `{"width":"100lvw"}` |
396
+ | `min-h-dvh` | `{"min-height":"100dvh"}` |
397
+ | `min-h-svh` | `{"min-height":"100svh"}` |
398
+ | `min-h-lvh` | `{"min-height":"100lvh"}` |
399
+
400
+ ### Accessibility
401
+
402
+ | Utility | Description |
403
+ | --- | --- |
404
+ | `sr-only` | `{"position":"absolute","width":"1px","height":"1px","padding":"0","margin":"-1px","overflow":"hidden","clip":"rect(0, 0, 0, 0)","white-space":"nowrap","border-width":"0"}` |
405
+ | `not-sr-only` | `{"position":"static","width":"auto","height":"auto","padding":"0","margin":"0","overflow":"visible","clip":"auto","white-space":"normal"}` |
298
406
 
299
407
  ### Other Utilities
300
408
 
301
- | Utility | Description |
302
- | -------------- | ------------------------------ |
303
- | `no-underline` | `{"text-decoration":"none"}` |
304
- | `box-border` | `{"box-sizing":"border-box"}` |
305
- | `box-content` | `{"box-sizing":"content-box"}` |
409
+ | Utility | Description |
410
+ | --- | --- |
411
+ | `no-underline` | `{"text-decoration":"none"}` |
412
+ | `box-border` | `{"box-sizing":"border-box"}` |
413
+ | `box-content` | `{"box-sizing":"content-box"}` |
414
+ | `text-{0-99}px` | Font size in pixels (e.g., `text-12px`, `text-16px`) |
415
+ | `text-{0-24.75}rem` | Font size in rem units (0.25rem increments) |
306
416
 
307
- ---
417
+ ---
308
418
 
309
- _Generated automatically from `src/css_gen_utils.ts`_
419
+ *Generated automatically from `src/css_gen_utils.ts`*
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mancha",
3
- "version": "0.17.4",
3
+ "version": "0.17.5",
4
4
  "description": "Javscript HTML rendering engine",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
package/scripts/generate-css-docs.ts CHANGED
@@ -105,28 +105,38 @@ function generateMarkdown() {
105
105
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
106
106
  }
107
107
  }
108
+ // Document dynamic border widths
109
+ md += "| `border-{0-15}` | Border width in pixels (e.g., `border-0`, `border-1`, ..., `border-15`) |\n";
110
+ md += "| `border-x-{0-15}` | Horizontal border width in pixels |\n";
111
+ md += "| `border-y-{0-15}` | Vertical border width in pixels |\n";
112
+ md += "| `border-{t,b,l,r}-{0-15}` | Individual side border width in pixels |\n";
108
113
  md += "\n";
109
114
 
110
115
  md += "### Shadows & Effects\n\n";
111
116
  md += "| Utility | Description |\n";
112
117
  md += "| --- | --- |\n";
113
- const effectProps = ["shadow", "opacity-", "mix-blend-"];
118
+ const effectProps = ["shadow", "mix-blend-"];
114
119
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
115
120
  if (effectProps.some((p) => klass.startsWith(p))) {
116
121
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
117
122
  }
118
123
  }
124
+ // Document opacity
125
+ md += "| `opacity-0` | Fully transparent |\n";
126
+ md += `| \`opacity-{${PERCENTS.join(",")}}\` | Opacity values from 0-100 |\n`;
119
127
  md += "\n";
120
128
 
121
129
  md += "### Transitions & Animations\n\n";
122
130
  md += "| Utility | Description |\n";
123
131
  md += "| --- | --- |\n";
124
- const animProps = ["transition", "duration-", "animate-"];
132
+ const animProps = ["transition", "animate-"];
125
133
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
126
134
  if (animProps.some((p) => klass.startsWith(p))) {
127
135
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
128
136
  }
129
137
  }
138
+ // Document durations
139
+ md += `| \`duration-{${DURATIONS.join(",")}}\` | Transition duration in milliseconds |\n`;
130
140
  md += "\n";
131
141
 
132
142
  md += "### Interactivity\n\n";
@@ -186,6 +196,18 @@ function generateMarkdown() {
186
196
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
187
197
  }
188
198
  }
199
+ // Document gap utilities
200
+ md += "| `gap-0` | No gap |\n";
201
+ md += "| `gap-{1-512}` | Gap in rem units (0.25rem increments) |\n";
202
+ md += "| `gap-{1-512}px` | Gap in pixels |\n";
203
+ md += "| `gap-x-{1-512}` | Horizontal gap in rem units |\n";
204
+ md += "| `gap-y-{1-512}` | Vertical gap in rem units |\n";
205
+ md += "| `gap-x-{1-512}px` | Horizontal gap in pixels |\n";
206
+ md += "| `gap-y-{1-512}px` | Vertical gap in pixels |\n";
207
+ md += "| `space-x-{0-512}` | Horizontal spacing between children (rem) |\n";
208
+ md += "| `space-y-{0-512}` | Vertical spacing between children (rem) |\n";
209
+ md += "| `space-x-{0-512}px` | Horizontal spacing between children (px) |\n";
210
+ md += "| `space-y-{0-512}px` | Vertical spacing between children (px) |\n";
189
211
  md += "\n";
190
212
 
191
213
  md += "### Position & Inset\n\n";
@@ -197,11 +219,6 @@ function generateMarkdown() {
197
219
  "fixed",
198
220
  "sticky",
199
221
  "inset-",
200
- "top-",
201
- "bottom-",
202
- "left-",
203
- "right-",
204
- "z-",
205
222
  "object-",
206
223
  ];
207
224
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
@@ -209,6 +226,95 @@ function generateMarkdown() {
209
226
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
210
227
  }
211
228
  }
229
+ // Document position values
230
+ md += "| `top-{0-512}`, `bottom-{0-512}`, `left-{0-512}`, `right-{0-512}` | Position in rem units (0.25rem increments) |\n";
231
+ md += "| `top-{0-512}px`, `bottom-{0-512}px`, `left-{0-512}px`, `right-{0-512}px` | Position in pixels |\n";
232
+ md += "| `top-{1-100}%`, `bottom-{1-100}%`, `left-{1-100}%`, `right-{1-100}%` | Position in percentages |\n";
233
+ md += "| `top-auto`, `bottom-auto`, `left-auto`, `right-auto` | Auto positioning |\n";
234
+ // Document z-index
235
+ md += `| \`z-{${PERCENTS.join(",")}}\` | Z-index values |\n`;
236
+ md += "\n";
237
+
238
+ md += "### Display & Visibility\n\n";
239
+ md += "| Utility | Description |\n";
240
+ md += "| --- | --- |\n";
241
+ const displayProps = ["block", "inline", "hidden", "contents", "visible", "invisible", "collapse"];
242
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
243
+ if (displayProps.some((p) => klass === p)) {
244
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
245
+ }
246
+ }
247
+ md += "\n";
248
+
249
+ md += "### Overflow & Scrolling\n\n";
250
+ md += "| Utility | Description |\n";
251
+ md += "| --- | --- |\n";
252
+ const overflowProps = ["overflow-", "overscroll-"];
253
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
254
+ if (overflowProps.some((p) => klass.startsWith(p))) {
255
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
256
+ }
257
+ }
258
+ md += "\n";
259
+
260
+ md += "### Backgrounds\n\n";
261
+ md += "| Utility | Description |\n";
262
+ md += "| --- | --- |\n";
263
+ const bgProps = ["bg-auto", "bg-cover", "bg-contain", "bg-no-repeat", "bg-fixed", "bg-local", "bg-scroll"];
264
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
265
+ if (bgProps.some((p) => klass === p)) {
266
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
267
+ }
268
+ }
269
+ md += "\n";
270
+
271
+ md += "### Lists\n\n";
272
+ md += "| Utility | Description |\n";
273
+ md += "| --- | --- |\n";
274
+ const listProps = ["list-"];
275
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
276
+ if (listProps.some((p) => klass.startsWith(p))) {
277
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
278
+ }
279
+ }
280
+ md += "\n";
281
+
282
+ md += "### Vertical Alignment\n\n";
283
+ md += "| Utility | Description |\n";
284
+ md += "| --- | --- |\n";
285
+ const alignProps = ["align-"];
286
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
287
+ if (alignProps.some((p) => klass.startsWith(p))) {
288
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
289
+ }
290
+ }
291
+ md += "\n";
292
+
293
+ md += "### Viewport Sizing\n\n";
294
+ md += "| Utility | Description |\n";
295
+ md += "| --- | --- |\n";
296
+ const viewportProps = [
297
+ "min-h-screen", "max-h-screen", "min-w-screen",
298
+ "h-dvh", "h-svh", "h-lvh",
299
+ "w-dvw", "w-svw", "w-lvw",
300
+ "min-h-dvh", "min-h-svh", "min-h-lvh"
301
+ ];
302
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
303
+ if (viewportProps.some((p) => klass === p)) {
304
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
305
+ }
306
+ }
307
+ md += "\n";
308
+
309
+ md += "### Accessibility\n\n";
310
+ md += "| Utility | Description |\n";
311
+ md += "| --- | --- |\n";
312
+ const a11yProps = ["sr-only", "not-sr-only"];
313
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
314
+ if (a11yProps.some((p) => klass === p)) {
315
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
316
+ }
317
+ }
212
318
  md += "\n";
213
319
 
214
320
  md += "### Other Utilities\n\n";
@@ -222,6 +328,13 @@ function generateMarkdown() {
222
328
  ...effectProps,
223
329
  ...animProps,
224
330
  ...interProps,
331
+ ...displayProps,
332
+ ...overflowProps,
333
+ ...bgProps,
334
+ ...listProps,
335
+ ...alignProps,
336
+ ...a11yProps,
337
+ ...viewportProps,
225
338
  "w-",
226
339
  "h-",
227
340
  "min-w-",
@@ -233,25 +346,23 @@ function generateMarkdown() {
233
346
  "opacity-",
234
347
  "cursor-",
235
348
  "size-",
236
- "block",
237
- "inline",
238
- "hidden",
239
- "contents",
240
- "visible",
241
- "invisible",
242
- "collapse",
243
- "overflow-",
244
- "overscroll-",
245
- "list-",
246
- "align-",
247
- "sr-only",
248
- "not-sr-only",
349
+ "top-",
350
+ "bottom-",
351
+ "left-",
352
+ "right-",
353
+ "z-",
354
+ "duration-",
355
+ "gap-",
356
+ "space-",
249
357
  ];
250
358
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
251
- if (!allHandledPrefixes.some((p) => klass.startsWith(p))) {
359
+ if (!allHandledPrefixes.some((p) => klass.startsWith(p) || klass === p)) {
252
360
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
253
361
  }
254
362
  }
363
+ // Document text sizes
364
+ md += "| `text-{0-99}px` | Font size in pixels (e.g., `text-12px`, `text-16px`) |\n";
365
+ md += "| `text-{0-24.75}rem` | Font size in rem units (0.25rem increments) |\n";
255
366
  md += "\n";
256
367
 
257
368
  md += "--- \n\n*Generated automatically from `src/css_gen_utils.ts`*\n";