nuclo 0.1.56 → 0.1.58

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 (25) hide show
  1. package/dist/core/tagConstants.d.ts +5 -0
  2. package/dist/core/tagConstants.d.ts.map +1 -0
  3. package/dist/core/tagRegistry.d.ts +2 -3
  4. package/dist/core/tagRegistry.d.ts.map +1 -1
  5. package/dist/nuclo.cjs +1 -1
  6. package/dist/nuclo.cjs.map +1 -1
  7. package/dist/nuclo.js +1 -1
  8. package/dist/nuclo.js.map +1 -1
  9. package/dist/nuclo.umd.js +1 -1
  10. package/dist/nuclo.umd.js.map +1 -1
  11. package/dist/style/cssGenerator.d.ts +4 -2
  12. package/dist/style/cssGenerator.d.ts.map +1 -1
  13. package/dist/style/cssPropertyTypes.d.ts +98 -0
  14. package/dist/style/cssPropertyTypes.d.ts.map +1 -0
  15. package/dist/style/index.d.ts +1 -1
  16. package/dist/style/index.d.ts.map +1 -1
  17. package/dist/style/styleBuilder.d.ts +293 -166
  18. package/dist/style/styleBuilder.d.ts.map +1 -1
  19. package/dist/style/styleProperties.d.ts.map +1 -1
  20. package/dist/style/styleQueries.d.ts +8 -0
  21. package/dist/style/styleQueries.d.ts.map +1 -0
  22. package/package.json +1 -1
  23. package/types/features/style.d.ts +1470 -668
  24. package/dist/style/breakpoints.d.ts +0 -7
  25. package/dist/style/breakpoints.d.ts.map +0 -1
package/types/features/style.d.ts CHANGED
@@ -1,5 +1,105 @@
1
1
  // Style utility functions type definitions
2
2
 
3
+ import type {
4
+ DisplayValue,
5
+ PositionValue,
6
+ TextAlignValue,
7
+ FontWeightValue,
8
+ FontStyleValue,
9
+ TextTransformValue,
10
+ TextDecorationValue,
11
+ TextDecorationStyleValue,
12
+ TextDecorationLineValue,
13
+ WhiteSpaceValue,
14
+ OverflowValue,
15
+ VisibilityValue,
16
+ FlexDirectionValue,
17
+ FlexWrapValue,
18
+ AlignItemsValue,
19
+ JustifyContentValue,
20
+ AlignSelfValue,
21
+ AlignContentValue,
22
+ JustifySelfValue,
23
+ JustifyItemsValue,
24
+ GridAutoFlowValue,
25
+ BorderStyleValue,
26
+ OutlineStyleValue,
27
+ BoxSizingValue,
28
+ ObjectFitValue,
29
+ VerticalAlignValue,
30
+ TextAlignLastValue,
31
+ TextJustifyValue,
32
+ TextOverflowValue,
33
+ WordWrapValue,
34
+ OverflowWrapValue,
35
+ BackgroundRepeatValue,
36
+ BackgroundAttachmentValue,
37
+ BackgroundClipValue,
38
+ BackgroundOriginValue,
39
+ TransformStyleValue,
40
+ BackfaceVisibilityValue,
41
+ AnimationDirectionValue,
42
+ AnimationFillModeValue,
43
+ AnimationPlayStateValue,
44
+ ListStyleTypeValue,
45
+ ListStylePositionValue,
46
+ BorderCollapseValue,
47
+ CaptionSideValue,
48
+ EmptyCellsValue,
49
+ TableLayoutValue,
50
+ AppearanceValue,
51
+ UserSelectValue,
52
+ PointerEventsValue,
53
+ ResizeValue,
54
+ ScrollBehaviorValue,
55
+ IsolationValue,
56
+ MixBlendModeValue,
57
+ ContainValue,
58
+ PageBreakValue,
59
+ BreakValue,
60
+ ColumnFillValue,
61
+ ColumnRuleStyleValue,
62
+ ColumnSpanValue,
63
+ CursorValue,
64
+ CSSLengthValue,
65
+ CSSColorValue,
66
+ CSSFontFamilyValue,
67
+ CSSTimingFunctionValue,
68
+ CSSTransformValue,
69
+ CSSFilterValue,
70
+ CSSBackgroundImageValue,
71
+ CSSAnimationNameValue,
72
+ CSSContentValue,
73
+ CSSAspectRatioValue,
74
+ FloatValue,
75
+ ClearValue,
76
+ WritingModeValue,
77
+ DirectionValue,
78
+ UnicodeBidiValue,
79
+ TextOrientationValue,
80
+ HyphensValue,
81
+ LineBreakValue,
82
+ WordBreakValue,
83
+ TouchActionValue,
84
+ OverscrollBehaviorValue,
85
+ ImageRenderingValue,
86
+ ColorSchemeValue,
87
+ CaretColorValue,
88
+ CaretShapeValue,
89
+ BackgroundBlendModeValue,
90
+ ContentVisibilityValue,
91
+ ContainerTypeValue,
92
+ FontKerningValue,
93
+ FontSynthesisValue,
94
+ FontOpticalSizingValue,
95
+ FontDisplayValue,
96
+ FontVariantCapsValue,
97
+ TextRenderingValue,
98
+ TextCombineUprightValue,
99
+ MaskCompositeValue,
100
+ ClipRuleValue,
101
+ } from "../../src/style/cssPropertyTypes";
102
+
3
103
  /**
4
104
  * Creates a CSS class with the given styles and injects it into the document
5
105
  */
@@ -7,11 +107,29 @@ declare global {
7
107
  function createCSSClass(className: string, styles: Record<string, string>): void;
8
108
 
9
109
  /**
10
- * Creates a breakpoint-aware class name generator
11
- *
110
+ * Creates a style query class name generator for responsive and conditional styles.
111
+ * Supports @media, @container, @supports queries.
112
+ *
113
+ * Query values should include the at-rule prefix:
114
+ * - "@media (min-width: 768px)" for media queries
115
+ * - "@container (min-width: 400px)" for container queries
116
+ * - "@supports (display: grid)" for feature queries
117
+ *
118
+ * For backward compatibility, values without a prefix are treated as media queries.
119
+ *
12
120
  * Supports two signatures:
13
- * 1. cn(breakpointStyles) - Only breakpoint-specific styles
14
- * 2. cn(defaultStyles, breakpointStyles) - Default styles + breakpoint overrides
121
+ * 1. cn(queryStyles) - Only query-specific styles
122
+ * 2. cn(defaultStyles, queryStyles) - Default styles + query overrides
123
+ */
124
+ function createStyleQueries<T extends string>(
125
+ queries: Record<T, string>
126
+ ): {
127
+ (styles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
128
+ (defaultStyles: StyleBuilder, queryStyles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
129
+ };
130
+
131
+ /**
132
+ * @deprecated Use createStyleQueries instead. Alias for backward compatibility.
15
133
  */
16
134
  function createBreakpoints<T extends string>(
17
135
  breakpoints: Record<T, string>
@@ -28,85 +146,85 @@ declare global {
28
146
  add(property: string, value: string): this;
29
147
 
30
148
  // Display
31
- display(value: string): this;
32
- flex(value?: string): this;
149
+ display(value: DisplayValue): this;
150
+ flex(value?: CSSLengthValue | "auto" | "initial" | "none" | "1" | "0"): this;
33
151
  grid(): this;
34
152
 
35
153
  // Colors
36
- bg(color: string): this;
37
- color(color: string): this;
38
- accentColor(value: string): this;
154
+ bg(color: CSSColorValue): this;
155
+ color(color: CSSColorValue): this;
156
+ accentColor(value: CSSColorValue): this;
39
157
 
40
158
  // Typography
41
- fontSize(size: string): this;
42
- fontWeight(value: string): this;
43
- fontFamily(value: string): this;
44
- lineHeight(value: string): this;
45
- letterSpacing(value: string): this;
46
- textAlign(value: string): this;
47
- textDecoration(value: string): this;
159
+ fontSize(size: CSSLengthValue): this;
160
+ fontWeight(value: FontWeightValue): this;
161
+ fontFamily(value: CSSFontFamilyValue): this;
162
+ lineHeight(value: CSSLengthValue | "normal" | number): this;
163
+ letterSpacing(value: CSSLengthValue | "normal"): this;
164
+ textAlign(value: TextAlignValue): this;
165
+ textDecoration(value: TextDecorationValue): this;
48
166
  bold(): this;
49
- fontStyle(value: string): this;
167
+ fontStyle(value: FontStyleValue): this;
50
168
  fontVariant(value: string): this;
51
169
  fontStretch(value: string): this;
52
- textTransform(value: string): this;
53
- textIndent(value: string): this;
54
- textOverflow(value: string): this;
170
+ textTransform(value: TextTransformValue): this;
171
+ textIndent(value: CSSLengthValue): this;
172
+ textOverflow(value: TextOverflowValue): this;
55
173
  textShadow(value: string): this;
56
- whiteSpace(value: string): this;
57
- wordSpacing(value: string): this;
58
- wordWrap(value: string): this;
59
- overflowWrap(value: string): this;
60
- textAlignLast(value: string): this;
61
- textJustify(value: string): this;
62
- textDecorationLine(value: string): this;
63
- textDecorationColor(value: string): this;
64
- textDecorationStyle(value: string): this;
65
- textDecorationThickness(value: string): this;
66
- textUnderlineOffset(value: string): this;
67
- verticalAlign(value: string): this;
174
+ whiteSpace(value: WhiteSpaceValue): this;
175
+ wordSpacing(value: CSSLengthValue | "normal"): this;
176
+ wordWrap(value: WordWrapValue): this;
177
+ overflowWrap(value: OverflowWrapValue): this;
178
+ textAlignLast(value: TextAlignLastValue): this;
179
+ textJustify(value: TextJustifyValue): this;
180
+ textDecorationLine(value: TextDecorationLineValue): this;
181
+ textDecorationColor(value: CSSColorValue): this;
182
+ textDecorationStyle(value: TextDecorationStyleValue): this;
183
+ textDecorationThickness(value: CSSLengthValue | "auto" | "from-font"): this;
184
+ textUnderlineOffset(value: CSSLengthValue | "auto"): this;
185
+ verticalAlign(value: VerticalAlignValue): this;
68
186
 
69
187
  // Layout
70
- position(value: string): this;
71
- padding(value: string): this;
72
- paddingTop(value: string): this;
73
- paddingRight(value: string): this;
74
- paddingBottom(value: string): this;
75
- paddingLeft(value: string): this;
76
- margin(value: string): this;
77
- marginTop(value: string): this;
78
- marginRight(value: string): this;
79
- marginBottom(value: string): this;
80
- marginLeft(value: string): this;
81
- width(value: string): this;
82
- height(value: string): this;
83
- minWidth(value: string): this;
84
- maxWidth(value: string): this;
85
- minHeight(value: string): this;
86
- maxHeight(value: string): this;
87
- boxSizing(value: string): this;
188
+ position(value: PositionValue): this;
189
+ padding(value: CSSLengthValue): this;
190
+ paddingTop(value: CSSLengthValue): this;
191
+ paddingRight(value: CSSLengthValue): this;
192
+ paddingBottom(value: CSSLengthValue): this;
193
+ paddingLeft(value: CSSLengthValue): this;
194
+ margin(value: CSSLengthValue | "auto"): this;
195
+ marginTop(value: CSSLengthValue | "auto"): this;
196
+ marginRight(value: CSSLengthValue | "auto"): this;
197
+ marginBottom(value: CSSLengthValue | "auto"): this;
198
+ marginLeft(value: CSSLengthValue | "auto"): this;
199
+ width(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
200
+ height(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
201
+ minWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
202
+ maxWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
203
+ minHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
204
+ maxHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
205
+ boxSizing(value: BoxSizingValue): this;
88
206
 
89
207
  // Positioning
90
- top(value: string): this;
91
- right(value: string): this;
92
- bottom(value: string): this;
93
- left(value: string): this;
94
- zIndex(value: string): this;
208
+ top(value: CSSLengthValue | "auto"): this;
209
+ right(value: CSSLengthValue | "auto"): this;
210
+ bottom(value: CSSLengthValue | "auto"): this;
211
+ left(value: CSSLengthValue | "auto"): this;
212
+ zIndex(value: number | "auto"): this;
95
213
 
96
214
  // Flexbox
97
- flexDirection(value: string): this;
98
- alignItems(value: string): this;
99
- justifyContent(value: string): this;
215
+ flexDirection(value: FlexDirectionValue): this;
216
+ alignItems(value: AlignItemsValue): this;
217
+ justifyContent(value: JustifyContentValue): this;
100
218
  center(): this;
101
- gap(value: string): this;
102
- flexWrap(value: string): this;
103
- flexGrow(value: string): this;
104
- flexShrink(value: string): this;
105
- flexBasis(value: string): this;
106
- alignSelf(value: string): this;
107
- alignContent(value: string): this;
108
- justifySelf(value: string): this;
109
- justifyItems(value: string): this;
219
+ gap(value: CSSLengthValue): this;
220
+ flexWrap(value: FlexWrapValue): this;
221
+ flexGrow(value: number | string): this;
222
+ flexShrink(value: number | string): this;
223
+ flexBasis(value: CSSLengthValue | "auto" | "content" | "fit-content"): this;
224
+ alignSelf(value: AlignSelfValue): this;
225
+ alignContent(value: AlignContentValue): this;
226
+ justifySelf(value: JustifySelfValue): this;
227
+ justifyItems(value: JustifyItemsValue): this;
110
228
 
111
229
  // Grid
112
230
  gridTemplateColumns(value: string): this;
@@ -114,14 +232,14 @@ declare global {
114
232
  gridTemplateAreas(value: string): this;
115
233
  gridColumn(value: string): this;
116
234
  gridRow(value: string): this;
117
- gridColumnStart(value: string): this;
118
- gridColumnEnd(value: string): this;
119
- gridRowStart(value: string): this;
120
- gridRowEnd(value: string): this;
235
+ gridColumnStart(value: string | number | "auto"): this;
236
+ gridColumnEnd(value: string | number | "auto"): this;
237
+ gridRowStart(value: string | number | "auto"): this;
238
+ gridRowEnd(value: string | number | "auto"): this;
121
239
  gridArea(value: string): this;
122
- gridAutoColumns(value: string): this;
123
- gridAutoRows(value: string): this;
124
- gridAutoFlow(value: string): this;
240
+ gridAutoColumns(value: CSSLengthValue): this;
241
+ gridAutoRows(value: CSSLengthValue): this;
242
+ gridAutoFlow(value: GridAutoFlowValue): this;
125
243
 
126
244
  // Borders
127
245
  border(value: string): this;
@@ -129,241 +247,407 @@ declare global {
129
247
  borderRight(value: string): this;
130
248
  borderBottom(value: string): this;
131
249
  borderLeft(value: string): this;
132
- borderWidth(value: string): this;
133
- borderStyle(value: string): this;
134
- borderColor(value: string): this;
135
- borderTopWidth(value: string): this;
136
- borderRightWidth(value: string): this;
137
- borderBottomWidth(value: string): this;
138
- borderLeftWidth(value: string): this;
139
- borderTopStyle(value: string): this;
140
- borderRightStyle(value: string): this;
141
- borderBottomStyle(value: string): this;
142
- borderLeftStyle(value: string): this;
143
- borderTopColor(value: string): this;
144
- borderRightColor(value: string): this;
145
- borderBottomColor(value: string): this;
146
- borderLeftColor(value: string): this;
147
- borderRadius(value: string): this;
148
- borderTopLeftRadius(value: string): this;
149
- borderTopRightRadius(value: string): this;
150
- borderBottomLeftRadius(value: string): this;
151
- borderBottomRightRadius(value: string): this;
250
+ borderWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
251
+ borderStyle(value: BorderStyleValue): this;
252
+ borderColor(value: CSSColorValue): this;
253
+ borderTopWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
254
+ borderRightWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
255
+ borderBottomWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
256
+ borderLeftWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
257
+ borderTopStyle(value: BorderStyleValue): this;
258
+ borderRightStyle(value: BorderStyleValue): this;
259
+ borderBottomStyle(value: BorderStyleValue): this;
260
+ borderLeftStyle(value: BorderStyleValue): this;
261
+ borderTopColor(value: CSSColorValue): this;
262
+ borderRightColor(value: CSSColorValue): this;
263
+ borderBottomColor(value: CSSColorValue): this;
264
+ borderLeftColor(value: CSSColorValue): this;
265
+ borderRadius(value: CSSLengthValue): this;
266
+ borderTopLeftRadius(value: CSSLengthValue): this;
267
+ borderTopRightRadius(value: CSSLengthValue): this;
268
+ borderBottomLeftRadius(value: CSSLengthValue): this;
269
+ borderBottomRightRadius(value: CSSLengthValue): this;
152
270
 
153
271
  // Outline
154
272
  outline(value: string): this;
155
- outlineWidth(value: string): this;
156
- outlineStyle(value: string): this;
157
- outlineColor(value: string): this;
158
- outlineOffset(value: string): this;
273
+ outlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
274
+ outlineStyle(value: OutlineStyleValue): this;
275
+ outlineColor(value: CSSColorValue): this;
276
+ outlineOffset(value: CSSLengthValue): this;
159
277
 
160
278
  // Background
161
- backgroundColor(value: string): this;
162
- backgroundImage(value: string): this;
163
- backgroundRepeat(value: string): this;
279
+ backgroundColor(value: CSSColorValue): this;
280
+ backgroundImage(value: CSSBackgroundImageValue | "none"): this;
281
+ backgroundRepeat(value: BackgroundRepeatValue): this;
164
282
  backgroundPosition(value: string): this;
165
- backgroundSize(value: string): this;
166
- backgroundAttachment(value: string): this;
167
- backgroundClip(value: string): this;
168
- backgroundOrigin(value: string): this;
283
+ backgroundSize(value: CSSLengthValue | "auto" | "cover" | "contain"): this;
284
+ backgroundAttachment(value: BackgroundAttachmentValue): this;
285
+ backgroundClip(value: BackgroundClipValue): this;
286
+ backgroundOrigin(value: BackgroundOriginValue): this;
169
287
 
170
288
  // Effects
171
- boxShadow(value: string): this;
172
- opacity(value: string): this;
289
+ boxShadow(value: string | "none"): this;
290
+ opacity(value: number | string): this;
173
291
  transition(value: string): this;
174
- transitionProperty(value: string): this;
175
- transitionDuration(value: string): this;
176
- transitionTimingFunction(value: string): this;
177
- transitionDelay(value: string): this;
292
+ transitionProperty(value: string | "none" | "all"): this;
293
+ transitionDuration(value: string | number): this;
294
+ transitionTimingFunction(value: CSSTimingFunctionValue): this;
295
+ transitionDelay(value: string | number): this;
178
296
 
179
297
  // Transform
180
- transform(value: string): this;
298
+ transform(value: CSSTransformValue | "none"): this;
181
299
  transformOrigin(value: string): this;
182
- transformStyle(value: string): this;
183
- perspective(value: string): this;
300
+ transformStyle(value: TransformStyleValue): this;
301
+ perspective(value: CSSLengthValue | "none"): this;
184
302
  perspectiveOrigin(value: string): this;
185
- backfaceVisibility(value: string): this;
303
+ backfaceVisibility(value: BackfaceVisibilityValue): this;
186
304
 
187
305
  // Animation
188
306
  animation(value: string): this;
189
- animationName(value: string): this;
190
- animationDuration(value: string): this;
191
- animationTimingFunction(value: string): this;
192
- animationDelay(value: string): this;
193
- animationIterationCount(value: string): this;
194
- animationDirection(value: string): this;
195
- animationFillMode(value: string): this;
196
- animationPlayState(value: string): this;
307
+ animationName(value: CSSAnimationNameValue): this;
308
+ animationDuration(value: string | number): this;
309
+ animationTimingFunction(value: CSSTimingFunctionValue): this;
310
+ animationDelay(value: string | number): this;
311
+ animationIterationCount(value: number | "infinite" | string): this;
312
+ animationDirection(value: AnimationDirectionValue): this;
313
+ animationFillMode(value: AnimationFillModeValue): this;
314
+ animationPlayState(value: AnimationPlayStateValue): this;
197
315
 
198
316
  // Filter
199
- filter(value: string): this;
200
- backdropFilter(value: string): this;
317
+ filter(value: CSSFilterValue | "none"): this;
318
+ backdropFilter(value: CSSFilterValue | "none"): this;
201
319
 
202
320
  // Overflow
203
- overflow(value: string): this;
204
- overflowX(value: string): this;
205
- overflowY(value: string): this;
321
+ overflow(value: OverflowValue): this;
322
+ overflowX(value: OverflowValue): this;
323
+ overflowY(value: OverflowValue): this;
206
324
 
207
325
  // Visibility
208
- visibility(value: string): this;
326
+ visibility(value: VisibilityValue): this;
209
327
 
210
328
  // Object fit/position
211
- objectFit(value: string): this;
329
+ objectFit(value: ObjectFitValue): this;
212
330
  objectPosition(value: string): this;
213
331
 
214
332
  // List
215
333
  listStyle(value: string): this;
216
- listStyleType(value: string): this;
217
- listStylePosition(value: string): this;
218
- listStyleImage(value: string): this;
334
+ listStyleType(value: ListStyleTypeValue): this;
335
+ listStylePosition(value: ListStylePositionValue): this;
336
+ listStyleImage(value: CSSBackgroundImageValue | "none"): this;
219
337
 
220
338
  // Table
221
- borderCollapse(value: string): this;
222
- borderSpacing(value: string): this;
223
- captionSide(value: string): this;
224
- emptyCells(value: string): this;
225
- tableLayout(value: string): this;
339
+ borderCollapse(value: BorderCollapseValue): this;
340
+ borderSpacing(value: CSSLengthValue): this;
341
+ captionSide(value: CaptionSideValue): this;
342
+ emptyCells(value: EmptyCellsValue): this;
343
+ tableLayout(value: TableLayoutValue): this;
226
344
 
227
345
  // Content
228
- content(value: string): this;
229
- quotes(value: string): this;
230
- counterReset(value: string): this;
231
- counterIncrement(value: string): this;
346
+ content(value: CSSContentValue | "normal" | "none"): this;
347
+ quotes(value: string | "none"): this;
348
+ counterReset(value: string | "none"): this;
349
+ counterIncrement(value: string | "none"): this;
232
350
 
233
351
  // User interface
234
- appearance(value: string): this;
235
- userSelect(value: string): this;
236
- pointerEvents(value: string): this;
237
- resize(value: string): this;
238
- scrollBehavior(value: string): this;
352
+ appearance(value: AppearanceValue): this;
353
+ userSelect(value: UserSelectValue): this;
354
+ pointerEvents(value: PointerEventsValue): this;
355
+ resize(value: ResizeValue): this;
356
+ scrollBehavior(value: ScrollBehaviorValue): this;
239
357
 
240
358
  // Clip
241
- clip(value: string): this;
242
- clipPath(value: string): this;
359
+ clip(value: string | "auto"): this;
360
+ clipPath(value: string | "none"): this;
243
361
 
244
362
  // Isolation
245
- isolation(value: string): this;
363
+ isolation(value: IsolationValue): this;
246
364
 
247
365
  // Mix blend mode
248
- mixBlendMode(value: string): this;
366
+ mixBlendMode(value: MixBlendModeValue): this;
249
367
 
250
368
  // Will change
251
- willChange(value: string): this;
369
+ willChange(value: string | "auto"): this;
252
370
 
253
371
  // Contain
254
- contain(value: string): this;
372
+ contain(value: ContainValue): this;
255
373
 
256
374
  // Page break
257
- pageBreakBefore(value: string): this;
258
- pageBreakAfter(value: string): this;
259
- pageBreakInside(value: string): this;
375
+ pageBreakBefore(value: PageBreakValue): this;
376
+ pageBreakAfter(value: PageBreakValue): this;
377
+ pageBreakInside(value: PageBreakValue): this;
260
378
 
261
379
  // Break
262
- breakBefore(value: string): this;
263
- breakAfter(value: string): this;
264
- breakInside(value: string): this;
380
+ breakBefore(value: BreakValue): this;
381
+ breakAfter(value: BreakValue): this;
382
+ breakInside(value: BreakValue): this;
265
383
 
266
384
  // Orphans and widows
267
- orphans(value: string): this;
268
- widows(value: string): this;
385
+ orphans(value: number | string): this;
386
+ widows(value: number | string): this;
269
387
 
270
388
  // Column
271
- columnCount(value: string): this;
272
- columnFill(value: string): this;
273
- columnGap(value: string): this;
389
+ columnCount(value: number | "auto" | string): this;
390
+ columnFill(value: ColumnFillValue): this;
391
+ columnGap(value: CSSLengthValue | "normal"): this;
274
392
  columnRule(value: string): this;
275
- columnRuleColor(value: string): this;
276
- columnRuleStyle(value: string): this;
277
- columnRuleWidth(value: string): this;
278
- columnSpan(value: string): this;
279
- columnWidth(value: string): this;
393
+ columnRuleColor(value: CSSColorValue): this;
394
+ columnRuleStyle(value: ColumnRuleStyleValue): this;
395
+ columnRuleWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
396
+ columnSpan(value: ColumnSpanValue): this;
397
+ columnWidth(value: CSSLengthValue | "auto"): this;
280
398
  columns(value: string): this;
281
399
 
282
400
  // Interaction
283
- cursor(value: string): this;
401
+ cursor(value: CursorValue): this;
402
+
403
+ // Layout - Additional
404
+ aspectRatio(value: CSSAspectRatioValue): this;
405
+ clear(value: ClearValue): this;
406
+ float(value: FloatValue): this;
407
+ order(value: number | string): this;
408
+
409
+ // Flexbox - Place properties
410
+ placeContent(value: string): this;
411
+ placeItems(value: string): this;
412
+ placeSelf(value: string): this;
413
+
414
+ // Text - Additional
415
+ hyphens(value: HyphensValue): this;
416
+ lineBreak(value: LineBreakValue): this;
417
+ wordBreak(value: WordBreakValue): this;
418
+ textOrientation(value: TextOrientationValue): this;
419
+ writingMode(value: WritingModeValue): this;
420
+ direction(value: DirectionValue): this;
421
+ unicodeBidi(value: UnicodeBidiValue): this;
422
+
423
+ // Background - Additional
424
+ backgroundBlendMode(value: BackgroundBlendModeValue): this;
425
+ backgroundPositionX(value: string): this;
426
+ backgroundPositionY(value: string): this;
427
+
428
+ // Border Image
429
+ borderImage(value: string): this;
430
+ borderImageSource(value: CSSBackgroundImageValue | "none"): this;
431
+ borderImageSlice(value: string | number): this;
432
+ borderImageWidth(value: CSSLengthValue | number): this;
433
+ borderImageOutset(value: CSSLengthValue | number): this;
434
+ borderImageRepeat(value: BackgroundRepeatValue): this;
435
+
436
+ // Logical Properties - Inset
437
+ inset(value: CSSLengthValue | "auto"): this;
438
+ insetBlock(value: CSSLengthValue): this;
439
+ insetBlockStart(value: CSSLengthValue | "auto"): this;
440
+ insetBlockEnd(value: CSSLengthValue | "auto"): this;
441
+ insetInline(value: CSSLengthValue): this;
442
+ insetInlineStart(value: CSSLengthValue | "auto"): this;
443
+ insetInlineEnd(value: CSSLengthValue | "auto"): this;
444
+
445
+ // Logical Properties - Margin
446
+ marginBlock(value: CSSLengthValue | "auto"): this;
447
+ marginBlockStart(value: CSSLengthValue | "auto"): this;
448
+ marginBlockEnd(value: CSSLengthValue | "auto"): this;
449
+ marginInline(value: CSSLengthValue | "auto"): this;
450
+ marginInlineStart(value: CSSLengthValue | "auto"): this;
451
+ marginInlineEnd(value: CSSLengthValue | "auto"): this;
452
+
453
+ // Logical Properties - Padding
454
+ paddingBlock(value: CSSLengthValue): this;
455
+ paddingBlockStart(value: CSSLengthValue): this;
456
+ paddingBlockEnd(value: CSSLengthValue): this;
457
+ paddingInline(value: CSSLengthValue): this;
458
+ paddingInlineStart(value: CSSLengthValue): this;
459
+ paddingInlineEnd(value: CSSLengthValue): this;
460
+
461
+ // Logical Properties - Size
462
+ inlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
463
+ blockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
464
+ minInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
465
+ minBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
466
+ maxInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
467
+ maxBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
468
+
469
+ // Logical Properties - Border
470
+ borderBlock(value: string): this;
471
+ borderBlockStart(value: string): this;
472
+ borderBlockEnd(value: string): this;
473
+ borderInline(value: string): this;
474
+ borderInlineStart(value: string): this;
475
+ borderInlineEnd(value: string): this;
476
+ borderBlockWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
477
+ borderBlockStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
478
+ borderBlockEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
479
+ borderInlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
480
+ borderInlineStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
481
+ borderInlineEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
482
+ borderBlockStyle(value: BorderStyleValue): this;
483
+ borderBlockStartStyle(value: BorderStyleValue): this;
484
+ borderBlockEndStyle(value: BorderStyleValue): this;
485
+ borderInlineStyle(value: BorderStyleValue): this;
486
+ borderInlineStartStyle(value: BorderStyleValue): this;
487
+ borderInlineEndStyle(value: BorderStyleValue): this;
488
+ borderBlockColor(value: CSSColorValue): this;
489
+ borderBlockStartColor(value: CSSColorValue): this;
490
+ borderBlockEndColor(value: CSSColorValue): this;
491
+ borderInlineColor(value: CSSColorValue): this;
492
+ borderInlineStartColor(value: CSSColorValue): this;
493
+ borderInlineEndColor(value: CSSColorValue): this;
494
+
495
+ // Logical Properties - Border Radius
496
+ borderStartStartRadius(value: CSSLengthValue): this;
497
+ borderStartEndRadius(value: CSSLengthValue): this;
498
+ borderEndStartRadius(value: CSSLengthValue): this;
499
+ borderEndEndRadius(value: CSSLengthValue): this;
500
+
501
+ // Scroll
502
+ scrollMargin(value: CSSLengthValue): this;
503
+ scrollMarginTop(value: CSSLengthValue): this;
504
+ scrollMarginRight(value: CSSLengthValue): this;
505
+ scrollMarginBottom(value: CSSLengthValue): this;
506
+ scrollMarginLeft(value: CSSLengthValue): this;
507
+ scrollPadding(value: CSSLengthValue): this;
508
+ scrollPaddingTop(value: CSSLengthValue): this;
509
+ scrollPaddingRight(value: CSSLengthValue): this;
510
+ scrollPaddingBottom(value: CSSLengthValue): this;
511
+ scrollPaddingLeft(value: CSSLengthValue): this;
512
+ overscrollBehavior(value: OverscrollBehaviorValue): this;
513
+ overscrollBehaviorX(value: OverscrollBehaviorValue): this;
514
+ overscrollBehaviorY(value: OverscrollBehaviorValue): this;
515
+
516
+ // Caret
517
+ caretColor(value: CaretColorValue): this;
518
+ caretShape(value: CaretShapeValue): this;
519
+ caretAnimation(value: string): this;
520
+
521
+ // Other
522
+ imageRendering(value: ImageRenderingValue): this;
523
+ colorScheme(value: ColorSchemeValue): this;
524
+ contentVisibility(value: ContentVisibilityValue): this;
525
+ touchAction(value: TouchActionValue): this;
526
+
527
+ // Container Queries
528
+ containerType(value: ContainerTypeValue): this;
529
+ containerName(value: string): this;
530
+ container(value: string): this;
531
+
532
+ // Font - Additional
533
+ fontFeatureSettings(value: string): this;
534
+ fontKerning(value: FontKerningValue): this;
535
+ fontSynthesis(value: FontSynthesisValue): this;
536
+ fontOpticalSizing(value: FontOpticalSizingValue): this;
537
+ fontDisplay(value: FontDisplayValue): this;
538
+ fontVariantCaps(value: FontVariantCapsValue): this;
539
+ fontVariantNumeric(value: string): this;
540
+ fontVariantLigatures(value: string): this;
541
+ fontVariantEastAsian(value: string): this;
542
+ fontVariantAlternates(value: string): this;
543
+ fontVariantPosition(value: string): this;
544
+
545
+ // Text - Additional
546
+ textRendering(value: TextRenderingValue): this;
547
+ textCombineUpright(value: TextCombineUprightValue): this;
548
+ textSizeAdjust(value: string | "auto" | "none" | `${number}%`): this;
549
+
550
+ // Mask
551
+ mask(value: string): this;
552
+ maskImage(value: CSSBackgroundImageValue | "none"): this;
553
+ maskMode(value: string): this;
554
+ maskRepeat(value: BackgroundRepeatValue): this;
555
+ maskPosition(value: string): this;
556
+ maskSize(value: CSSLengthValue | "auto" | "cover" | "contain"): this;
557
+ maskOrigin(value: BackgroundOriginValue): this;
558
+ maskClip(value: BackgroundClipValue): this;
559
+ maskComposite(value: MaskCompositeValue): this;
560
+
561
+ // Clip
562
+ clipRule(value: ClipRuleValue): this;
563
+
564
+ // Grid - Additional
565
+ gridColumnGap(value: CSSLengthValue): this;
566
+ gridRowGap(value: CSSLengthValue): this;
567
+ gridGap(value: CSSLengthValue): this;
284
568
  }
285
569
 
286
570
  // Utility functions available globally (like HTML tags)
287
571
  // Display
288
- function display(value: string): StyleBuilder;
289
- function flex(value?: string): StyleBuilder;
572
+ function display(value: DisplayValue): StyleBuilder;
573
+ function flex(value?: CSSLengthValue | "auto" | "initial" | "none" | "1" | "0"): StyleBuilder;
290
574
  function grid(): StyleBuilder;
291
575
 
292
576
  // Colors
293
- function bg(color: string): StyleBuilder;
294
- function color(colorValue: string): StyleBuilder;
295
- function accentColor(value: string): StyleBuilder;
577
+ function bg(color: CSSColorValue): StyleBuilder;
578
+ function color(colorValue: CSSColorValue): StyleBuilder;
579
+ function accentColor(value: CSSColorValue): StyleBuilder;
296
580
 
297
581
  // Typography
298
- function fontSize(size: string): StyleBuilder;
299
- function fontWeight(value: string): StyleBuilder;
300
- function fontFamily(value: string): StyleBuilder;
301
- function lineHeight(value: string): StyleBuilder;
302
- function letterSpacing(value: string): StyleBuilder;
303
- function textAlign(value: string): StyleBuilder;
304
- function textDecoration(value: string): StyleBuilder;
582
+ function fontSize(size: CSSLengthValue): StyleBuilder;
583
+ function fontWeight(value: FontWeightValue): StyleBuilder;
584
+ function fontFamily(value: CSSFontFamilyValue): StyleBuilder;
585
+ function lineHeight(value: CSSLengthValue | "normal" | number): StyleBuilder;
586
+ function letterSpacing(value: CSSLengthValue | "normal"): StyleBuilder;
587
+ function textAlign(value: TextAlignValue): StyleBuilder;
588
+ function textDecoration(value: TextDecorationValue): StyleBuilder;
305
589
  function bold(): StyleBuilder;
306
- function fontStyle(value: string): StyleBuilder;
590
+ function fontStyle(value: FontStyleValue): StyleBuilder;
307
591
  function fontVariant(value: string): StyleBuilder;
308
592
  function fontStretch(value: string): StyleBuilder;
309
- function textTransform(value: string): StyleBuilder;
310
- function textIndent(value: string): StyleBuilder;
311
- function textOverflow(value: string): StyleBuilder;
593
+ function textTransform(value: TextTransformValue): StyleBuilder;
594
+ function textIndent(value: CSSLengthValue): StyleBuilder;
595
+ function textOverflow(value: TextOverflowValue): StyleBuilder;
312
596
  function textShadow(value: string): StyleBuilder;
313
- function whiteSpace(value: string): StyleBuilder;
314
- function wordSpacing(value: string): StyleBuilder;
315
- function wordWrap(value: string): StyleBuilder;
316
- function overflowWrap(value: string): StyleBuilder;
317
- function textAlignLast(value: string): StyleBuilder;
318
- function textJustify(value: string): StyleBuilder;
319
- function textDecorationLine(value: string): StyleBuilder;
320
- function textDecorationColor(value: string): StyleBuilder;
321
- function textDecorationStyle(value: string): StyleBuilder;
322
- function textDecorationThickness(value: string): StyleBuilder;
323
- function textUnderlineOffset(value: string): StyleBuilder;
324
- function verticalAlign(value: string): StyleBuilder;
597
+ function whiteSpace(value: WhiteSpaceValue): StyleBuilder;
598
+ function wordSpacing(value: CSSLengthValue | "normal"): StyleBuilder;
599
+ function wordWrap(value: WordWrapValue): StyleBuilder;
600
+ function overflowWrap(value: OverflowWrapValue): StyleBuilder;
601
+ function textAlignLast(value: TextAlignLastValue): StyleBuilder;
602
+ function textJustify(value: TextJustifyValue): StyleBuilder;
603
+ function textDecorationLine(value: TextDecorationLineValue): StyleBuilder;
604
+ function textDecorationColor(value: CSSColorValue): StyleBuilder;
605
+ function textDecorationStyle(value: TextDecorationStyleValue): StyleBuilder;
606
+ function textDecorationThickness(value: CSSLengthValue | "auto" | "from-font"): StyleBuilder;
607
+ function textUnderlineOffset(value: CSSLengthValue | "auto"): StyleBuilder;
608
+ function verticalAlign(value: VerticalAlignValue): StyleBuilder;
325
609
 
326
610
  // Layout
327
- function position(value: string): StyleBuilder;
328
- function padding(value: string): StyleBuilder;
329
- function paddingTop(value: string): StyleBuilder;
330
- function paddingRight(value: string): StyleBuilder;
331
- function paddingBottom(value: string): StyleBuilder;
332
- function paddingLeft(value: string): StyleBuilder;
333
- function margin(value: string): StyleBuilder;
334
- function marginTop(value: string): StyleBuilder;
335
- function marginRight(value: string): StyleBuilder;
336
- function marginBottom(value: string): StyleBuilder;
337
- function marginLeft(value: string): StyleBuilder;
338
- function width(value: string): StyleBuilder;
339
- function height(value: string): StyleBuilder;
340
- function minWidth(value: string): StyleBuilder;
341
- function maxWidth(value: string): StyleBuilder;
342
- function minHeight(value: string): StyleBuilder;
343
- function maxHeight(value: string): StyleBuilder;
344
- function boxSizing(value: string): StyleBuilder;
611
+ function position(value: PositionValue): StyleBuilder;
612
+ function padding(value: CSSLengthValue): StyleBuilder;
613
+ function paddingTop(value: CSSLengthValue): StyleBuilder;
614
+ function paddingRight(value: CSSLengthValue): StyleBuilder;
615
+ function paddingBottom(value: CSSLengthValue): StyleBuilder;
616
+ function paddingLeft(value: CSSLengthValue): StyleBuilder;
617
+ function margin(value: CSSLengthValue | "auto"): StyleBuilder;
618
+ function marginTop(value: CSSLengthValue | "auto"): StyleBuilder;
619
+ function marginRight(value: CSSLengthValue | "auto"): StyleBuilder;
620
+ function marginBottom(value: CSSLengthValue | "auto"): StyleBuilder;
621
+ function marginLeft(value: CSSLengthValue | "auto"): StyleBuilder;
622
+ function width(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
623
+ function height(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
624
+ function minWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
625
+ function maxWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
626
+ function minHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
627
+ function maxHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
628
+ function boxSizing(value: BoxSizingValue): StyleBuilder;
345
629
 
346
630
  // Positioning (Note: top conflicts with window.top and is skipped at runtime)
347
- // function top(value: string): StyleBuilder; // Use module import: import { top } from "nuclo"
348
- function right(value: string): StyleBuilder;
349
- function bottom(value: string): StyleBuilder;
350
- function left(value: string): StyleBuilder;
351
- function zIndex(value: string): StyleBuilder;
631
+ // function top(value: CSSLengthValue | "auto"): StyleBuilder; // Use module import: import { top } from "nuclo"
632
+ function right(value: CSSLengthValue | "auto"): StyleBuilder;
633
+ function bottom(value: CSSLengthValue | "auto"): StyleBuilder;
634
+ function left(value: CSSLengthValue | "auto"): StyleBuilder;
635
+ function zIndex(value: number | "auto"): StyleBuilder;
352
636
 
353
637
  // Flexbox
354
- function flexDirection(value: string): StyleBuilder;
355
- function alignItems(value: string): StyleBuilder;
356
- function justifyContent(value: string): StyleBuilder;
638
+ function flexDirection(value: FlexDirectionValue): StyleBuilder;
639
+ function alignItems(value: AlignItemsValue): StyleBuilder;
640
+ function justifyContent(value: JustifyContentValue): StyleBuilder;
357
641
  function center(): StyleBuilder;
358
- function gap(value: string): StyleBuilder;
359
- function flexWrap(value: string): StyleBuilder;
360
- function flexGrow(value: string): StyleBuilder;
361
- function flexShrink(value: string): StyleBuilder;
362
- function flexBasis(value: string): StyleBuilder;
363
- function alignSelf(value: string): StyleBuilder;
364
- function alignContent(value: string): StyleBuilder;
365
- function justifySelf(value: string): StyleBuilder;
366
- function justifyItems(value: string): StyleBuilder;
642
+ function gap(value: CSSLengthValue): StyleBuilder;
643
+ function flexWrap(value: FlexWrapValue): StyleBuilder;
644
+ function flexGrow(value: number | string): StyleBuilder;
645
+ function flexShrink(value: number | string): StyleBuilder;
646
+ function flexBasis(value: CSSLengthValue | "auto" | "content" | "fit-content"): StyleBuilder;
647
+ function alignSelf(value: AlignSelfValue): StyleBuilder;
648
+ function alignContent(value: AlignContentValue): StyleBuilder;
649
+ function justifySelf(value: JustifySelfValue): StyleBuilder;
650
+ function justifyItems(value: JustifyItemsValue): StyleBuilder;
367
651
 
368
652
  // Grid
369
653
  function gridTemplateColumns(value: string): StyleBuilder;
@@ -371,14 +655,14 @@ declare global {
371
655
  function gridTemplateAreas(value: string): StyleBuilder;
372
656
  function gridColumn(value: string): StyleBuilder;
373
657
  function gridRow(value: string): StyleBuilder;
374
- function gridColumnStart(value: string): StyleBuilder;
375
- function gridColumnEnd(value: string): StyleBuilder;
376
- function gridRowStart(value: string): StyleBuilder;
377
- function gridRowEnd(value: string): StyleBuilder;
658
+ function gridColumnStart(value: string | number | "auto"): StyleBuilder;
659
+ function gridColumnEnd(value: string | number | "auto"): StyleBuilder;
660
+ function gridRowStart(value: string | number | "auto"): StyleBuilder;
661
+ function gridRowEnd(value: string | number | "auto"): StyleBuilder;
378
662
  function gridArea(value: string): StyleBuilder;
379
- function gridAutoColumns(value: string): StyleBuilder;
380
- function gridAutoRows(value: string): StyleBuilder;
381
- function gridAutoFlow(value: string): StyleBuilder;
663
+ function gridAutoColumns(value: CSSLengthValue): StyleBuilder;
664
+ function gridAutoRows(value: CSSLengthValue): StyleBuilder;
665
+ function gridAutoFlow(value: GridAutoFlowValue): StyleBuilder;
382
666
 
383
667
  // Borders
384
668
  function border(value: string): StyleBuilder;
@@ -386,158 +670,324 @@ declare global {
386
670
  function borderRight(value: string): StyleBuilder;
387
671
  function borderBottom(value: string): StyleBuilder;
388
672
  function borderLeft(value: string): StyleBuilder;
389
- function borderWidth(value: string): StyleBuilder;
390
- function borderStyle(value: string): StyleBuilder;
391
- function borderColor(value: string): StyleBuilder;
392
- function borderTopWidth(value: string): StyleBuilder;
393
- function borderRightWidth(value: string): StyleBuilder;
394
- function borderBottomWidth(value: string): StyleBuilder;
395
- function borderLeftWidth(value: string): StyleBuilder;
396
- function borderTopStyle(value: string): StyleBuilder;
397
- function borderRightStyle(value: string): StyleBuilder;
398
- function borderBottomStyle(value: string): StyleBuilder;
399
- function borderLeftStyle(value: string): StyleBuilder;
400
- function borderTopColor(value: string): StyleBuilder;
401
- function borderRightColor(value: string): StyleBuilder;
402
- function borderBottomColor(value: string): StyleBuilder;
403
- function borderLeftColor(value: string): StyleBuilder;
404
- function borderRadius(value: string): StyleBuilder;
405
- function borderTopLeftRadius(value: string): StyleBuilder;
406
- function borderTopRightRadius(value: string): StyleBuilder;
407
- function borderBottomLeftRadius(value: string): StyleBuilder;
408
- function borderBottomRightRadius(value: string): StyleBuilder;
673
+ function borderWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
674
+ function borderStyle(value: BorderStyleValue): StyleBuilder;
675
+ function borderColor(value: CSSColorValue): StyleBuilder;
676
+ function borderTopWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
677
+ function borderRightWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
678
+ function borderBottomWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
679
+ function borderLeftWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
680
+ function borderTopStyle(value: BorderStyleValue): StyleBuilder;
681
+ function borderRightStyle(value: BorderStyleValue): StyleBuilder;
682
+ function borderBottomStyle(value: BorderStyleValue): StyleBuilder;
683
+ function borderLeftStyle(value: BorderStyleValue): StyleBuilder;
684
+ function borderTopColor(value: CSSColorValue): StyleBuilder;
685
+ function borderRightColor(value: CSSColorValue): StyleBuilder;
686
+ function borderBottomColor(value: CSSColorValue): StyleBuilder;
687
+ function borderLeftColor(value: CSSColorValue): StyleBuilder;
688
+ function borderRadius(value: CSSLengthValue): StyleBuilder;
689
+ function borderTopLeftRadius(value: CSSLengthValue): StyleBuilder;
690
+ function borderTopRightRadius(value: CSSLengthValue): StyleBuilder;
691
+ function borderBottomLeftRadius(value: CSSLengthValue): StyleBuilder;
692
+ function borderBottomRightRadius(value: CSSLengthValue): StyleBuilder;
409
693
 
410
694
  // Outline
411
695
  function outline(value: string): StyleBuilder;
412
- function outlineWidth(value: string): StyleBuilder;
413
- function outlineStyle(value: string): StyleBuilder;
414
- function outlineColor(value: string): StyleBuilder;
415
- function outlineOffset(value: string): StyleBuilder;
696
+ function outlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
697
+ function outlineStyle(value: OutlineStyleValue): StyleBuilder;
698
+ function outlineColor(value: CSSColorValue): StyleBuilder;
699
+ function outlineOffset(value: CSSLengthValue): StyleBuilder;
416
700
 
417
701
  // Background
418
- function backgroundColor(value: string): StyleBuilder;
419
- function backgroundImage(value: string): StyleBuilder;
420
- function backgroundRepeat(value: string): StyleBuilder;
702
+ function backgroundColor(value: CSSColorValue): StyleBuilder;
703
+ function backgroundImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
704
+ function backgroundRepeat(value: BackgroundRepeatValue): StyleBuilder;
421
705
  function backgroundPosition(value: string): StyleBuilder;
422
- function backgroundSize(value: string): StyleBuilder;
423
- function backgroundAttachment(value: string): StyleBuilder;
424
- function backgroundClip(value: string): StyleBuilder;
425
- function backgroundOrigin(value: string): StyleBuilder;
706
+ function backgroundSize(value: CSSLengthValue | "auto" | "cover" | "contain"): StyleBuilder;
707
+ function backgroundAttachment(value: BackgroundAttachmentValue): StyleBuilder;
708
+ function backgroundClip(value: BackgroundClipValue): StyleBuilder;
709
+ function backgroundOrigin(value: BackgroundOriginValue): StyleBuilder;
426
710
 
427
711
  // Effects
428
- function boxShadow(value: string): StyleBuilder;
429
- function opacity(value: string): StyleBuilder;
712
+ function boxShadow(value: string | "none"): StyleBuilder;
713
+ function opacity(value: number | string): StyleBuilder;
430
714
  function transition(value: string): StyleBuilder;
431
- function transitionProperty(value: string): StyleBuilder;
432
- function transitionDuration(value: string): StyleBuilder;
433
- function transitionTimingFunction(value: string): StyleBuilder;
434
- function transitionDelay(value: string): StyleBuilder;
715
+ function transitionProperty(value: string | "none" | "all"): StyleBuilder;
716
+ function transitionDuration(value: string | number): StyleBuilder;
717
+ function transitionTimingFunction(value: CSSTimingFunctionValue): StyleBuilder;
718
+ function transitionDelay(value: string | number): StyleBuilder;
435
719
 
436
720
  // Transform
437
- function transform(value: string): StyleBuilder;
721
+ function transform(value: CSSTransformValue | "none"): StyleBuilder;
438
722
  function transformOrigin(value: string): StyleBuilder;
439
- function transformStyle(value: string): StyleBuilder;
440
- function perspective(value: string): StyleBuilder;
723
+ function transformStyle(value: TransformStyleValue): StyleBuilder;
724
+ function perspective(value: CSSLengthValue | "none"): StyleBuilder;
441
725
  function perspectiveOrigin(value: string): StyleBuilder;
442
- function backfaceVisibility(value: string): StyleBuilder;
726
+ function backfaceVisibility(value: BackfaceVisibilityValue): StyleBuilder;
443
727
 
444
728
  // Animation
445
729
  function animation(value: string): StyleBuilder;
446
- function animationName(value: string): StyleBuilder;
447
- function animationDuration(value: string): StyleBuilder;
448
- function animationTimingFunction(value: string): StyleBuilder;
449
- function animationDelay(value: string): StyleBuilder;
450
- function animationIterationCount(value: string): StyleBuilder;
451
- function animationDirection(value: string): StyleBuilder;
452
- function animationFillMode(value: string): StyleBuilder;
453
- function animationPlayState(value: string): StyleBuilder;
730
+ function animationName(value: CSSAnimationNameValue): StyleBuilder;
731
+ function animationDuration(value: string | number): StyleBuilder;
732
+ function animationTimingFunction(value: CSSTimingFunctionValue): StyleBuilder;
733
+ function animationDelay(value: string | number): StyleBuilder;
734
+ function animationIterationCount(value: number | "infinite" | string): StyleBuilder;
735
+ function animationDirection(value: AnimationDirectionValue): StyleBuilder;
736
+ function animationFillMode(value: AnimationFillModeValue): StyleBuilder;
737
+ function animationPlayState(value: AnimationPlayStateValue): StyleBuilder;
454
738
 
455
739
  // Filter (Note: conflicts with SVG filter element, use module import if needed)
456
- // function filter(value: string): StyleBuilder; // Use: import { filter } from "nuclo"
457
- function backdropFilter(value: string): StyleBuilder;
740
+ // function filter(value: CSSFilterValue | "none"): StyleBuilder; // Use: import { filter } from "nuclo"
741
+ function backdropFilter(value: CSSFilterValue | "none"): StyleBuilder;
458
742
 
459
743
  // Overflow
460
- function overflow(value: string): StyleBuilder;
461
- function overflowX(value: string): StyleBuilder;
462
- function overflowY(value: string): StyleBuilder;
744
+ function overflow(value: OverflowValue): StyleBuilder;
745
+ function overflowX(value: OverflowValue): StyleBuilder;
746
+ function overflowY(value: OverflowValue): StyleBuilder;
463
747
 
464
748
  // Visibility
465
- function visibility(value: string): StyleBuilder;
749
+ function visibility(value: VisibilityValue): StyleBuilder;
466
750
 
467
751
  // Object fit/position
468
- function objectFit(value: string): StyleBuilder;
752
+ function objectFit(value: ObjectFitValue): StyleBuilder;
469
753
  function objectPosition(value: string): StyleBuilder;
470
754
 
471
755
  // List
472
756
  function listStyle(value: string): StyleBuilder;
473
- function listStyleType(value: string): StyleBuilder;
474
- function listStylePosition(value: string): StyleBuilder;
475
- function listStyleImage(value: string): StyleBuilder;
757
+ function listStyleType(value: ListStyleTypeValue): StyleBuilder;
758
+ function listStylePosition(value: ListStylePositionValue): StyleBuilder;
759
+ function listStyleImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
476
760
 
477
761
  // Table
478
- function borderCollapse(value: string): StyleBuilder;
479
- function borderSpacing(value: string): StyleBuilder;
480
- function captionSide(value: string): StyleBuilder;
481
- function emptyCells(value: string): StyleBuilder;
482
- function tableLayout(value: string): StyleBuilder;
762
+ function borderCollapse(value: BorderCollapseValue): StyleBuilder;
763
+ function borderSpacing(value: CSSLengthValue): StyleBuilder;
764
+ function captionSide(value: CaptionSideValue): StyleBuilder;
765
+ function emptyCells(value: EmptyCellsValue): StyleBuilder;
766
+ function tableLayout(value: TableLayoutValue): StyleBuilder;
483
767
 
484
768
  // Content
485
- function content(value: string): StyleBuilder;
486
- function quotes(value: string): StyleBuilder;
487
- function counterReset(value: string): StyleBuilder;
488
- function counterIncrement(value: string): StyleBuilder;
769
+ function content(value: CSSContentValue | "normal" | "none"): StyleBuilder;
770
+ function quotes(value: string | "none"): StyleBuilder;
771
+ function counterReset(value: string | "none"): StyleBuilder;
772
+ function counterIncrement(value: string | "none"): StyleBuilder;
489
773
 
490
774
  // User interface
491
- function appearance(value: string): StyleBuilder;
492
- function userSelect(value: string): StyleBuilder;
493
- function pointerEvents(value: string): StyleBuilder;
494
- function resize(value: string): StyleBuilder;
495
- function scrollBehavior(value: string): StyleBuilder;
775
+ function appearance(value: AppearanceValue): StyleBuilder;
776
+ function userSelect(value: UserSelectValue): StyleBuilder;
777
+ function pointerEvents(value: PointerEventsValue): StyleBuilder;
778
+ function resize(value: ResizeValue): StyleBuilder;
779
+ function scrollBehavior(value: ScrollBehaviorValue): StyleBuilder;
496
780
 
497
781
  // Clip (Note: clipPath conflicts with SVG clipPath element, use module import if needed)
498
- function clip(value: string): StyleBuilder;
499
- // function clipPath(value: string): StyleBuilder; // Use: import { clipPath } from "nuclo"
782
+ function clip(value: string | "auto"): StyleBuilder;
783
+ // function clipPath(value: string | "none"): StyleBuilder; // Use: import { clipPath } from "nuclo"
500
784
 
501
785
  // Isolation
502
- function isolation(value: string): StyleBuilder;
786
+ function isolation(value: IsolationValue): StyleBuilder;
503
787
 
504
788
  // Mix blend mode
505
- function mixBlendMode(value: string): StyleBuilder;
789
+ function mixBlendMode(value: MixBlendModeValue): StyleBuilder;
506
790
 
507
791
  // Will change
508
- function willChange(value: string): StyleBuilder;
792
+ function willChange(value: string | "auto"): StyleBuilder;
509
793
 
510
794
  // Contain
511
- function contain(value: string): StyleBuilder;
795
+ function contain(value: ContainValue): StyleBuilder;
512
796
 
513
797
  // Page break
514
- function pageBreakBefore(value: string): StyleBuilder;
515
- function pageBreakAfter(value: string): StyleBuilder;
516
- function pageBreakInside(value: string): StyleBuilder;
798
+ function pageBreakBefore(value: PageBreakValue): StyleBuilder;
799
+ function pageBreakAfter(value: PageBreakValue): StyleBuilder;
800
+ function pageBreakInside(value: PageBreakValue): StyleBuilder;
517
801
 
518
802
  // Break
519
- function breakBefore(value: string): StyleBuilder;
520
- function breakAfter(value: string): StyleBuilder;
521
- function breakInside(value: string): StyleBuilder;
803
+ function breakBefore(value: BreakValue): StyleBuilder;
804
+ function breakAfter(value: BreakValue): StyleBuilder;
805
+ function breakInside(value: BreakValue): StyleBuilder;
522
806
 
523
807
  // Orphans and widows
524
- function orphans(value: string): StyleBuilder;
525
- function widows(value: string): StyleBuilder;
808
+ function orphans(value: number | string): StyleBuilder;
809
+ function widows(value: number | string): StyleBuilder;
526
810
 
527
811
  // Column
528
- function columnCount(value: string): StyleBuilder;
529
- function columnFill(value: string): StyleBuilder;
530
- function columnGap(value: string): StyleBuilder;
812
+ function columnCount(value: number | "auto" | string): StyleBuilder;
813
+ function columnFill(value: ColumnFillValue): StyleBuilder;
814
+ function columnGap(value: CSSLengthValue | "normal"): StyleBuilder;
531
815
  function columnRule(value: string): StyleBuilder;
532
- function columnRuleColor(value: string): StyleBuilder;
533
- function columnRuleStyle(value: string): StyleBuilder;
534
- function columnRuleWidth(value: string): StyleBuilder;
535
- function columnSpan(value: string): StyleBuilder;
536
- function columnWidth(value: string): StyleBuilder;
816
+ function columnRuleColor(value: CSSColorValue): StyleBuilder;
817
+ function columnRuleStyle(value: ColumnRuleStyleValue): StyleBuilder;
818
+ function columnRuleWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
819
+ function columnSpan(value: ColumnSpanValue): StyleBuilder;
820
+ function columnWidth(value: CSSLengthValue | "auto"): StyleBuilder;
537
821
  function columns(value: string): StyleBuilder;
538
822
 
539
823
  // Interaction
540
- function cursor(value: string): StyleBuilder;
824
+ function cursor(value: CursorValue): StyleBuilder;
825
+
826
+ // Layout - Additional
827
+ function aspectRatio(value: CSSAspectRatioValue): StyleBuilder;
828
+ function clear(value: ClearValue): StyleBuilder;
829
+ function float(value: FloatValue): StyleBuilder;
830
+ function order(value: number | string): StyleBuilder;
831
+
832
+ // Flexbox - Place properties
833
+ function placeContent(value: string): StyleBuilder;
834
+ function placeItems(value: string): StyleBuilder;
835
+ function placeSelf(value: string): StyleBuilder;
836
+
837
+ // Text - Additional
838
+ function hyphens(value: HyphensValue): StyleBuilder;
839
+ function lineBreak(value: LineBreakValue): StyleBuilder;
840
+ function wordBreak(value: WordBreakValue): StyleBuilder;
841
+ function textOrientation(value: TextOrientationValue): StyleBuilder;
842
+ function writingMode(value: WritingModeValue): StyleBuilder;
843
+ function direction(value: DirectionValue): StyleBuilder;
844
+ function unicodeBidi(value: UnicodeBidiValue): StyleBuilder;
845
+
846
+ // Background - Additional
847
+ function backgroundBlendMode(value: BackgroundBlendModeValue): StyleBuilder;
848
+ function backgroundPositionX(value: string): StyleBuilder;
849
+ function backgroundPositionY(value: string): StyleBuilder;
850
+
851
+ // Border Image
852
+ function borderImage(value: string): StyleBuilder;
853
+ function borderImageSource(value: CSSBackgroundImageValue | "none"): StyleBuilder;
854
+ function borderImageSlice(value: string | number): StyleBuilder;
855
+ function borderImageWidth(value: CSSLengthValue | number): StyleBuilder;
856
+ function borderImageOutset(value: CSSLengthValue | number): StyleBuilder;
857
+ function borderImageRepeat(value: BackgroundRepeatValue): StyleBuilder;
858
+
859
+ // Logical Properties - Inset
860
+ function inset(value: CSSLengthValue | "auto"): StyleBuilder;
861
+ function insetBlock(value: CSSLengthValue): StyleBuilder;
862
+ function insetBlockStart(value: CSSLengthValue | "auto"): StyleBuilder;
863
+ function insetBlockEnd(value: CSSLengthValue | "auto"): StyleBuilder;
864
+ function insetInline(value: CSSLengthValue): StyleBuilder;
865
+ function insetInlineStart(value: CSSLengthValue | "auto"): StyleBuilder;
866
+ function insetInlineEnd(value: CSSLengthValue | "auto"): StyleBuilder;
867
+
868
+ // Logical Properties - Margin
869
+ function marginBlock(value: CSSLengthValue | "auto"): StyleBuilder;
870
+ function marginBlockStart(value: CSSLengthValue | "auto"): StyleBuilder;
871
+ function marginBlockEnd(value: CSSLengthValue | "auto"): StyleBuilder;
872
+ function marginInline(value: CSSLengthValue | "auto"): StyleBuilder;
873
+ function marginInlineStart(value: CSSLengthValue | "auto"): StyleBuilder;
874
+ function marginInlineEnd(value: CSSLengthValue | "auto"): StyleBuilder;
875
+
876
+ // Logical Properties - Padding
877
+ function paddingBlock(value: CSSLengthValue): StyleBuilder;
878
+ function paddingBlockStart(value: CSSLengthValue): StyleBuilder;
879
+ function paddingBlockEnd(value: CSSLengthValue): StyleBuilder;
880
+ function paddingInline(value: CSSLengthValue): StyleBuilder;
881
+ function paddingInlineStart(value: CSSLengthValue): StyleBuilder;
882
+ function paddingInlineEnd(value: CSSLengthValue): StyleBuilder;
883
+
884
+ // Logical Properties - Size
885
+ function inlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
886
+ function blockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
887
+ function minInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
888
+ function minBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
889
+ function maxInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
890
+ function maxBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
891
+
892
+ // Logical Properties - Border
893
+ function borderBlock(value: string): StyleBuilder;
894
+ function borderBlockStart(value: string): StyleBuilder;
895
+ function borderBlockEnd(value: string): StyleBuilder;
896
+ function borderInline(value: string): StyleBuilder;
897
+ function borderInlineStart(value: string): StyleBuilder;
898
+ function borderInlineEnd(value: string): StyleBuilder;
899
+ function borderBlockWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
900
+ function borderBlockStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
901
+ function borderBlockEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
902
+ function borderInlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
903
+ function borderInlineStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
904
+ function borderInlineEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
905
+ function borderBlockStyle(value: BorderStyleValue): StyleBuilder;
906
+ function borderBlockStartStyle(value: BorderStyleValue): StyleBuilder;
907
+ function borderBlockEndStyle(value: BorderStyleValue): StyleBuilder;
908
+ function borderInlineStyle(value: BorderStyleValue): StyleBuilder;
909
+ function borderInlineStartStyle(value: BorderStyleValue): StyleBuilder;
910
+ function borderInlineEndStyle(value: BorderStyleValue): StyleBuilder;
911
+ function borderBlockColor(value: CSSColorValue): StyleBuilder;
912
+ function borderBlockStartColor(value: CSSColorValue): StyleBuilder;
913
+ function borderBlockEndColor(value: CSSColorValue): StyleBuilder;
914
+ function borderInlineColor(value: CSSColorValue): StyleBuilder;
915
+ function borderInlineStartColor(value: CSSColorValue): StyleBuilder;
916
+ function borderInlineEndColor(value: CSSColorValue): StyleBuilder;
917
+
918
+ // Logical Properties - Border Radius
919
+ function borderStartStartRadius(value: CSSLengthValue): StyleBuilder;
920
+ function borderStartEndRadius(value: CSSLengthValue): StyleBuilder;
921
+ function borderEndStartRadius(value: CSSLengthValue): StyleBuilder;
922
+ function borderEndEndRadius(value: CSSLengthValue): StyleBuilder;
923
+
924
+ // Scroll
925
+ function scrollMargin(value: CSSLengthValue): StyleBuilder;
926
+ function scrollMarginTop(value: CSSLengthValue): StyleBuilder;
927
+ function scrollMarginRight(value: CSSLengthValue): StyleBuilder;
928
+ function scrollMarginBottom(value: CSSLengthValue): StyleBuilder;
929
+ function scrollMarginLeft(value: CSSLengthValue): StyleBuilder;
930
+ function scrollPadding(value: CSSLengthValue): StyleBuilder;
931
+ function scrollPaddingTop(value: CSSLengthValue): StyleBuilder;
932
+ function scrollPaddingRight(value: CSSLengthValue): StyleBuilder;
933
+ function scrollPaddingBottom(value: CSSLengthValue): StyleBuilder;
934
+ function scrollPaddingLeft(value: CSSLengthValue): StyleBuilder;
935
+ function overscrollBehavior(value: OverscrollBehaviorValue): StyleBuilder;
936
+ function overscrollBehaviorX(value: OverscrollBehaviorValue): StyleBuilder;
937
+ function overscrollBehaviorY(value: OverscrollBehaviorValue): StyleBuilder;
938
+
939
+ // Caret
940
+ function caretColor(value: CaretColorValue): StyleBuilder;
941
+ function caretShape(value: CaretShapeValue): StyleBuilder;
942
+ function caretAnimation(value: string): StyleBuilder;
943
+
944
+ // Other
945
+ function imageRendering(value: ImageRenderingValue): StyleBuilder;
946
+ function colorScheme(value: ColorSchemeValue): StyleBuilder;
947
+ function contentVisibility(value: ContentVisibilityValue): StyleBuilder;
948
+ function touchAction(value: TouchActionValue): StyleBuilder;
949
+
950
+ // Container Queries
951
+ function containerType(value: ContainerTypeValue): StyleBuilder;
952
+ function containerName(value: string): StyleBuilder;
953
+ function container(value: string): StyleBuilder;
954
+
955
+ // Font - Additional
956
+ function fontFeatureSettings(value: string): StyleBuilder;
957
+ function fontKerning(value: FontKerningValue): StyleBuilder;
958
+ function fontSynthesis(value: FontSynthesisValue): StyleBuilder;
959
+ function fontOpticalSizing(value: FontOpticalSizingValue): StyleBuilder;
960
+ function fontDisplay(value: FontDisplayValue): StyleBuilder;
961
+ function fontVariantCaps(value: FontVariantCapsValue): StyleBuilder;
962
+ function fontVariantNumeric(value: string): StyleBuilder;
963
+ function fontVariantLigatures(value: string): StyleBuilder;
964
+ function fontVariantEastAsian(value: string): StyleBuilder;
965
+ function fontVariantAlternates(value: string): StyleBuilder;
966
+ function fontVariantPosition(value: string): StyleBuilder;
967
+
968
+ // Text - Additional
969
+ function textRendering(value: TextRenderingValue): StyleBuilder;
970
+ function textCombineUpright(value: TextCombineUprightValue): StyleBuilder;
971
+ function textSizeAdjust(value: string | "auto" | "none" | `${number}%`): StyleBuilder;
972
+
973
+ // Mask (Note: mask conflicts with SVG mask element, use module import if needed)
974
+ // function mask(value: string): StyleBuilder; // Use: import { mask } from "nuclo"
975
+ function maskImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
976
+ function maskMode(value: string): StyleBuilder;
977
+ function maskRepeat(value: BackgroundRepeatValue): StyleBuilder;
978
+ function maskPosition(value: string): StyleBuilder;
979
+ function maskSize(value: CSSLengthValue | "auto" | "cover" | "contain"): StyleBuilder;
980
+ function maskOrigin(value: BackgroundOriginValue): StyleBuilder;
981
+ function maskClip(value: BackgroundClipValue): StyleBuilder;
982
+ function maskComposite(value: MaskCompositeValue): StyleBuilder;
983
+
984
+ // Clip
985
+ function clipRule(value: ClipRuleValue): StyleBuilder;
986
+
987
+ // Grid - Additional
988
+ function gridColumnGap(value: CSSLengthValue): StyleBuilder;
989
+ function gridRowGap(value: CSSLengthValue): StyleBuilder;
990
+ function gridGap(value: CSSLengthValue): StyleBuilder;
541
991
  }
542
992
 
543
993
  // Export StyleBuilder class with all its methods (for module imports)
@@ -546,85 +996,85 @@ export class StyleBuilder {
546
996
  add(property: string, value: string): this;
547
997
 
548
998
  // Display
549
- display(value: string): this;
550
- flex(value?: string): this;
999
+ display(value: DisplayValue): this;
1000
+ flex(value?: CSSLengthValue | "auto" | "initial" | "none" | "1" | "0"): this;
551
1001
  grid(): this;
552
1002
 
553
1003
  // Colors
554
- bg(color: string): this;
555
- color(color: string): this;
556
- accentColor(value: string): this;
1004
+ bg(color: CSSColorValue): this;
1005
+ color(color: CSSColorValue): this;
1006
+ accentColor(value: CSSColorValue): this;
557
1007
 
558
1008
  // Typography
559
- fontSize(size: string): this;
560
- fontWeight(value: string): this;
561
- fontFamily(value: string): this;
562
- lineHeight(value: string): this;
563
- letterSpacing(value: string): this;
564
- textAlign(value: string): this;
565
- textDecoration(value: string): this;
1009
+ fontSize(size: CSSLengthValue): this;
1010
+ fontWeight(value: FontWeightValue): this;
1011
+ fontFamily(value: CSSFontFamilyValue): this;
1012
+ lineHeight(value: CSSLengthValue | "normal" | number): this;
1013
+ letterSpacing(value: CSSLengthValue | "normal"): this;
1014
+ textAlign(value: TextAlignValue): this;
1015
+ textDecoration(value: TextDecorationValue): this;
566
1016
  bold(): this;
567
- fontStyle(value: string): this;
1017
+ fontStyle(value: FontStyleValue): this;
568
1018
  fontVariant(value: string): this;
569
1019
  fontStretch(value: string): this;
570
- textTransform(value: string): this;
571
- textIndent(value: string): this;
572
- textOverflow(value: string): this;
1020
+ textTransform(value: TextTransformValue): this;
1021
+ textIndent(value: CSSLengthValue): this;
1022
+ textOverflow(value: TextOverflowValue): this;
573
1023
  textShadow(value: string): this;
574
- whiteSpace(value: string): this;
575
- wordSpacing(value: string): this;
576
- wordWrap(value: string): this;
577
- overflowWrap(value: string): this;
578
- textAlignLast(value: string): this;
579
- textJustify(value: string): this;
580
- textDecorationLine(value: string): this;
581
- textDecorationColor(value: string): this;
582
- textDecorationStyle(value: string): this;
583
- textDecorationThickness(value: string): this;
584
- textUnderlineOffset(value: string): this;
585
- verticalAlign(value: string): this;
1024
+ whiteSpace(value: WhiteSpaceValue): this;
1025
+ wordSpacing(value: CSSLengthValue | "normal"): this;
1026
+ wordWrap(value: WordWrapValue): this;
1027
+ overflowWrap(value: OverflowWrapValue): this;
1028
+ textAlignLast(value: TextAlignLastValue): this;
1029
+ textJustify(value: TextJustifyValue): this;
1030
+ textDecorationLine(value: TextDecorationLineValue): this;
1031
+ textDecorationColor(value: CSSColorValue): this;
1032
+ textDecorationStyle(value: TextDecorationStyleValue): this;
1033
+ textDecorationThickness(value: CSSLengthValue | "auto" | "from-font"): this;
1034
+ textUnderlineOffset(value: CSSLengthValue | "auto"): this;
1035
+ verticalAlign(value: VerticalAlignValue): this;
586
1036
 
587
1037
  // Layout
588
- position(value: string): this;
589
- padding(value: string): this;
590
- paddingTop(value: string): this;
591
- paddingRight(value: string): this;
592
- paddingBottom(value: string): this;
593
- paddingLeft(value: string): this;
594
- margin(value: string): this;
595
- marginTop(value: string): this;
596
- marginRight(value: string): this;
597
- marginBottom(value: string): this;
598
- marginLeft(value: string): this;
599
- width(value: string): this;
600
- height(value: string): this;
601
- minWidth(value: string): this;
602
- maxWidth(value: string): this;
603
- minHeight(value: string): this;
604
- maxHeight(value: string): this;
605
- boxSizing(value: string): this;
1038
+ position(value: PositionValue): this;
1039
+ padding(value: CSSLengthValue): this;
1040
+ paddingTop(value: CSSLengthValue): this;
1041
+ paddingRight(value: CSSLengthValue): this;
1042
+ paddingBottom(value: CSSLengthValue): this;
1043
+ paddingLeft(value: CSSLengthValue): this;
1044
+ margin(value: CSSLengthValue | "auto"): this;
1045
+ marginTop(value: CSSLengthValue | "auto"): this;
1046
+ marginRight(value: CSSLengthValue | "auto"): this;
1047
+ marginBottom(value: CSSLengthValue | "auto"): this;
1048
+ marginLeft(value: CSSLengthValue | "auto"): this;
1049
+ width(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1050
+ height(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1051
+ minWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1052
+ maxWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
1053
+ minHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1054
+ maxHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
1055
+ boxSizing(value: BoxSizingValue): this;
606
1056
 
607
1057
  // Positioning
608
- top(value: string): this;
609
- right(value: string): this;
610
- bottom(value: string): this;
611
- left(value: string): this;
612
- zIndex(value: string): this;
1058
+ top(value: CSSLengthValue | "auto"): this;
1059
+ right(value: CSSLengthValue | "auto"): this;
1060
+ bottom(value: CSSLengthValue | "auto"): this;
1061
+ left(value: CSSLengthValue | "auto"): this;
1062
+ zIndex(value: number | "auto"): this;
613
1063
 
614
1064
  // Flexbox
615
- flexDirection(value: string): this;
616
- alignItems(value: string): this;
617
- justifyContent(value: string): this;
1065
+ flexDirection(value: FlexDirectionValue): this;
1066
+ alignItems(value: AlignItemsValue): this;
1067
+ justifyContent(value: JustifyContentValue): this;
618
1068
  center(): this;
619
- gap(value: string): this;
620
- flexWrap(value: string): this;
621
- flexGrow(value: string): this;
622
- flexShrink(value: string): this;
623
- flexBasis(value: string): this;
624
- alignSelf(value: string): this;
625
- alignContent(value: string): this;
626
- justifySelf(value: string): this;
627
- justifyItems(value: string): this;
1069
+ gap(value: CSSLengthValue): this;
1070
+ flexWrap(value: FlexWrapValue): this;
1071
+ flexGrow(value: number | string): this;
1072
+ flexShrink(value: number | string): this;
1073
+ flexBasis(value: CSSLengthValue | "auto" | "content" | "fit-content"): this;
1074
+ alignSelf(value: AlignSelfValue): this;
1075
+ alignContent(value: AlignContentValue): this;
1076
+ justifySelf(value: JustifySelfValue): this;
1077
+ justifyItems(value: JustifyItemsValue): this;
628
1078
 
629
1079
  // Grid
630
1080
  gridTemplateColumns(value: string): this;
@@ -632,14 +1082,14 @@ export class StyleBuilder {
632
1082
  gridTemplateAreas(value: string): this;
633
1083
  gridColumn(value: string): this;
634
1084
  gridRow(value: string): this;
635
- gridColumnStart(value: string): this;
636
- gridColumnEnd(value: string): this;
637
- gridRowStart(value: string): this;
638
- gridRowEnd(value: string): this;
1085
+ gridColumnStart(value: string | number | "auto"): this;
1086
+ gridColumnEnd(value: string | number | "auto"): this;
1087
+ gridRowStart(value: string | number | "auto"): this;
1088
+ gridRowEnd(value: string | number | "auto"): this;
639
1089
  gridArea(value: string): this;
640
- gridAutoColumns(value: string): this;
641
- gridAutoRows(value: string): this;
642
- gridAutoFlow(value: string): this;
1090
+ gridAutoColumns(value: CSSLengthValue): this;
1091
+ gridAutoRows(value: CSSLengthValue): this;
1092
+ gridAutoFlow(value: GridAutoFlowValue): this;
643
1093
 
644
1094
  // Borders
645
1095
  border(value: string): this;
@@ -647,241 +1097,407 @@ export class StyleBuilder {
647
1097
  borderRight(value: string): this;
648
1098
  borderBottom(value: string): this;
649
1099
  borderLeft(value: string): this;
650
- borderWidth(value: string): this;
651
- borderStyle(value: string): this;
652
- borderColor(value: string): this;
653
- borderTopWidth(value: string): this;
654
- borderRightWidth(value: string): this;
655
- borderBottomWidth(value: string): this;
656
- borderLeftWidth(value: string): this;
657
- borderTopStyle(value: string): this;
658
- borderRightStyle(value: string): this;
659
- borderBottomStyle(value: string): this;
660
- borderLeftStyle(value: string): this;
661
- borderTopColor(value: string): this;
662
- borderRightColor(value: string): this;
663
- borderBottomColor(value: string): this;
664
- borderLeftColor(value: string): this;
665
- borderRadius(value: string): this;
666
- borderTopLeftRadius(value: string): this;
667
- borderTopRightRadius(value: string): this;
668
- borderBottomLeftRadius(value: string): this;
669
- borderBottomRightRadius(value: string): this;
1100
+ borderWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1101
+ borderStyle(value: BorderStyleValue): this;
1102
+ borderColor(value: CSSColorValue): this;
1103
+ borderTopWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1104
+ borderRightWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1105
+ borderBottomWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1106
+ borderLeftWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1107
+ borderTopStyle(value: BorderStyleValue): this;
1108
+ borderRightStyle(value: BorderStyleValue): this;
1109
+ borderBottomStyle(value: BorderStyleValue): this;
1110
+ borderLeftStyle(value: BorderStyleValue): this;
1111
+ borderTopColor(value: CSSColorValue): this;
1112
+ borderRightColor(value: CSSColorValue): this;
1113
+ borderBottomColor(value: CSSColorValue): this;
1114
+ borderLeftColor(value: CSSColorValue): this;
1115
+ borderRadius(value: CSSLengthValue): this;
1116
+ borderTopLeftRadius(value: CSSLengthValue): this;
1117
+ borderTopRightRadius(value: CSSLengthValue): this;
1118
+ borderBottomLeftRadius(value: CSSLengthValue): this;
1119
+ borderBottomRightRadius(value: CSSLengthValue): this;
670
1120
 
671
1121
  // Outline
672
1122
  outline(value: string): this;
673
- outlineWidth(value: string): this;
674
- outlineStyle(value: string): this;
675
- outlineColor(value: string): this;
676
- outlineOffset(value: string): this;
1123
+ outlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1124
+ outlineStyle(value: OutlineStyleValue): this;
1125
+ outlineColor(value: CSSColorValue): this;
1126
+ outlineOffset(value: CSSLengthValue): this;
677
1127
 
678
1128
  // Background
679
- backgroundColor(value: string): this;
680
- backgroundImage(value: string): this;
681
- backgroundRepeat(value: string): this;
1129
+ backgroundColor(value: CSSColorValue): this;
1130
+ backgroundImage(value: CSSBackgroundImageValue | "none"): this;
1131
+ backgroundRepeat(value: BackgroundRepeatValue): this;
682
1132
  backgroundPosition(value: string): this;
683
- backgroundSize(value: string): this;
684
- backgroundAttachment(value: string): this;
685
- backgroundClip(value: string): this;
686
- backgroundOrigin(value: string): this;
1133
+ backgroundSize(value: CSSLengthValue | "auto" | "cover" | "contain"): this;
1134
+ backgroundAttachment(value: BackgroundAttachmentValue): this;
1135
+ backgroundClip(value: BackgroundClipValue): this;
1136
+ backgroundOrigin(value: BackgroundOriginValue): this;
687
1137
 
688
1138
  // Effects
689
- boxShadow(value: string): this;
690
- opacity(value: string): this;
1139
+ boxShadow(value: string | "none"): this;
1140
+ opacity(value: number | string): this;
691
1141
  transition(value: string): this;
692
- transitionProperty(value: string): this;
693
- transitionDuration(value: string): this;
694
- transitionTimingFunction(value: string): this;
695
- transitionDelay(value: string): this;
1142
+ transitionProperty(value: string | "none" | "all"): this;
1143
+ transitionDuration(value: string | number): this;
1144
+ transitionTimingFunction(value: CSSTimingFunctionValue): this;
1145
+ transitionDelay(value: string | number): this;
696
1146
 
697
1147
  // Transform
698
- transform(value: string): this;
1148
+ transform(value: CSSTransformValue | "none"): this;
699
1149
  transformOrigin(value: string): this;
700
- transformStyle(value: string): this;
701
- perspective(value: string): this;
1150
+ transformStyle(value: TransformStyleValue): this;
1151
+ perspective(value: CSSLengthValue | "none"): this;
702
1152
  perspectiveOrigin(value: string): this;
703
- backfaceVisibility(value: string): this;
1153
+ backfaceVisibility(value: BackfaceVisibilityValue): this;
704
1154
 
705
1155
  // Animation
706
1156
  animation(value: string): this;
707
- animationName(value: string): this;
708
- animationDuration(value: string): this;
709
- animationTimingFunction(value: string): this;
710
- animationDelay(value: string): this;
711
- animationIterationCount(value: string): this;
712
- animationDirection(value: string): this;
713
- animationFillMode(value: string): this;
714
- animationPlayState(value: string): this;
1157
+ animationName(value: CSSAnimationNameValue): this;
1158
+ animationDuration(value: string | number): this;
1159
+ animationTimingFunction(value: CSSTimingFunctionValue): this;
1160
+ animationDelay(value: string | number): this;
1161
+ animationIterationCount(value: number | "infinite" | string): this;
1162
+ animationDirection(value: AnimationDirectionValue): this;
1163
+ animationFillMode(value: AnimationFillModeValue): this;
1164
+ animationPlayState(value: AnimationPlayStateValue): this;
715
1165
 
716
1166
  // Filter
717
- filter(value: string): this;
718
- backdropFilter(value: string): this;
1167
+ filter(value: CSSFilterValue | "none"): this;
1168
+ backdropFilter(value: CSSFilterValue | "none"): this;
719
1169
 
720
1170
  // Overflow
721
- overflow(value: string): this;
722
- overflowX(value: string): this;
723
- overflowY(value: string): this;
1171
+ overflow(value: OverflowValue): this;
1172
+ overflowX(value: OverflowValue): this;
1173
+ overflowY(value: OverflowValue): this;
724
1174
 
725
1175
  // Visibility
726
- visibility(value: string): this;
1176
+ visibility(value: VisibilityValue): this;
727
1177
 
728
1178
  // Object fit/position
729
- objectFit(value: string): this;
1179
+ objectFit(value: ObjectFitValue): this;
730
1180
  objectPosition(value: string): this;
731
1181
 
732
1182
  // List
733
1183
  listStyle(value: string): this;
734
- listStyleType(value: string): this;
735
- listStylePosition(value: string): this;
736
- listStyleImage(value: string): this;
1184
+ listStyleType(value: ListStyleTypeValue): this;
1185
+ listStylePosition(value: ListStylePositionValue): this;
1186
+ listStyleImage(value: CSSBackgroundImageValue | "none"): this;
737
1187
 
738
1188
  // Table
739
- borderCollapse(value: string): this;
740
- borderSpacing(value: string): this;
741
- captionSide(value: string): this;
742
- emptyCells(value: string): this;
743
- tableLayout(value: string): this;
1189
+ borderCollapse(value: BorderCollapseValue): this;
1190
+ borderSpacing(value: CSSLengthValue): this;
1191
+ captionSide(value: CaptionSideValue): this;
1192
+ emptyCells(value: EmptyCellsValue): this;
1193
+ tableLayout(value: TableLayoutValue): this;
744
1194
 
745
1195
  // Content
746
- content(value: string): this;
747
- quotes(value: string): this;
748
- counterReset(value: string): this;
749
- counterIncrement(value: string): this;
1196
+ content(value: CSSContentValue | "normal" | "none"): this;
1197
+ quotes(value: string | "none"): this;
1198
+ counterReset(value: string | "none"): this;
1199
+ counterIncrement(value: string | "none"): this;
750
1200
 
751
1201
  // User interface
752
- appearance(value: string): this;
753
- userSelect(value: string): this;
754
- pointerEvents(value: string): this;
755
- resize(value: string): this;
756
- scrollBehavior(value: string): this;
1202
+ appearance(value: AppearanceValue): this;
1203
+ userSelect(value: UserSelectValue): this;
1204
+ pointerEvents(value: PointerEventsValue): this;
1205
+ resize(value: ResizeValue): this;
1206
+ scrollBehavior(value: ScrollBehaviorValue): this;
757
1207
 
758
1208
  // Clip
759
- clip(value: string): this;
760
- clipPath(value: string): this;
1209
+ clip(value: string | "auto"): this;
1210
+ clipPath(value: string | "none"): this;
761
1211
 
762
1212
  // Isolation
763
- isolation(value: string): this;
1213
+ isolation(value: IsolationValue): this;
764
1214
 
765
1215
  // Mix blend mode
766
- mixBlendMode(value: string): this;
1216
+ mixBlendMode(value: MixBlendModeValue): this;
767
1217
 
768
1218
  // Will change
769
- willChange(value: string): this;
1219
+ willChange(value: string | "auto"): this;
770
1220
 
771
1221
  // Contain
772
- contain(value: string): this;
1222
+ contain(value: ContainValue): this;
773
1223
 
774
1224
  // Page break
775
- pageBreakBefore(value: string): this;
776
- pageBreakAfter(value: string): this;
777
- pageBreakInside(value: string): this;
1225
+ pageBreakBefore(value: PageBreakValue): this;
1226
+ pageBreakAfter(value: PageBreakValue): this;
1227
+ pageBreakInside(value: PageBreakValue): this;
778
1228
 
779
1229
  // Break
780
- breakBefore(value: string): this;
781
- breakAfter(value: string): this;
782
- breakInside(value: string): this;
1230
+ breakBefore(value: BreakValue): this;
1231
+ breakAfter(value: BreakValue): this;
1232
+ breakInside(value: BreakValue): this;
783
1233
 
784
1234
  // Orphans and widows
785
- orphans(value: string): this;
786
- widows(value: string): this;
1235
+ orphans(value: number | string): this;
1236
+ widows(value: number | string): this;
787
1237
 
788
1238
  // Column
789
- columnCount(value: string): this;
790
- columnFill(value: string): this;
791
- columnGap(value: string): this;
1239
+ columnCount(value: number | "auto" | string): this;
1240
+ columnFill(value: ColumnFillValue): this;
1241
+ columnGap(value: CSSLengthValue | "normal"): this;
792
1242
  columnRule(value: string): this;
793
- columnRuleColor(value: string): this;
794
- columnRuleStyle(value: string): this;
795
- columnRuleWidth(value: string): this;
796
- columnSpan(value: string): this;
797
- columnWidth(value: string): this;
1243
+ columnRuleColor(value: CSSColorValue): this;
1244
+ columnRuleStyle(value: ColumnRuleStyleValue): this;
1245
+ columnRuleWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1246
+ columnSpan(value: ColumnSpanValue): this;
1247
+ columnWidth(value: CSSLengthValue | "auto"): this;
798
1248
  columns(value: string): this;
799
1249
 
800
1250
  // Interaction
801
- cursor(value: string): this;
1251
+ cursor(value: CursorValue): this;
1252
+
1253
+ // Layout - Additional
1254
+ aspectRatio(value: CSSAspectRatioValue): this;
1255
+ clear(value: ClearValue): this;
1256
+ float(value: FloatValue): this;
1257
+ order(value: number | string): this;
1258
+
1259
+ // Flexbox - Place properties
1260
+ placeContent(value: string): this;
1261
+ placeItems(value: string): this;
1262
+ placeSelf(value: string): this;
1263
+
1264
+ // Text - Additional
1265
+ hyphens(value: HyphensValue): this;
1266
+ lineBreak(value: LineBreakValue): this;
1267
+ wordBreak(value: WordBreakValue): this;
1268
+ textOrientation(value: TextOrientationValue): this;
1269
+ writingMode(value: WritingModeValue): this;
1270
+ direction(value: DirectionValue): this;
1271
+ unicodeBidi(value: UnicodeBidiValue): this;
1272
+
1273
+ // Background - Additional
1274
+ backgroundBlendMode(value: BackgroundBlendModeValue): this;
1275
+ backgroundPositionX(value: string): this;
1276
+ backgroundPositionY(value: string): this;
1277
+
1278
+ // Border Image
1279
+ borderImage(value: string): this;
1280
+ borderImageSource(value: CSSBackgroundImageValue | "none"): this;
1281
+ borderImageSlice(value: string | number): this;
1282
+ borderImageWidth(value: CSSLengthValue | number): this;
1283
+ borderImageOutset(value: CSSLengthValue | number): this;
1284
+ borderImageRepeat(value: BackgroundRepeatValue): this;
1285
+
1286
+ // Logical Properties - Inset
1287
+ inset(value: CSSLengthValue | "auto"): this;
1288
+ insetBlock(value: CSSLengthValue): this;
1289
+ insetBlockStart(value: CSSLengthValue | "auto"): this;
1290
+ insetBlockEnd(value: CSSLengthValue | "auto"): this;
1291
+ insetInline(value: CSSLengthValue): this;
1292
+ insetInlineStart(value: CSSLengthValue | "auto"): this;
1293
+ insetInlineEnd(value: CSSLengthValue | "auto"): this;
1294
+
1295
+ // Logical Properties - Margin
1296
+ marginBlock(value: CSSLengthValue | "auto"): this;
1297
+ marginBlockStart(value: CSSLengthValue | "auto"): this;
1298
+ marginBlockEnd(value: CSSLengthValue | "auto"): this;
1299
+ marginInline(value: CSSLengthValue | "auto"): this;
1300
+ marginInlineStart(value: CSSLengthValue | "auto"): this;
1301
+ marginInlineEnd(value: CSSLengthValue | "auto"): this;
1302
+
1303
+ // Logical Properties - Padding
1304
+ paddingBlock(value: CSSLengthValue): this;
1305
+ paddingBlockStart(value: CSSLengthValue): this;
1306
+ paddingBlockEnd(value: CSSLengthValue): this;
1307
+ paddingInline(value: CSSLengthValue): this;
1308
+ paddingInlineStart(value: CSSLengthValue): this;
1309
+ paddingInlineEnd(value: CSSLengthValue): this;
1310
+
1311
+ // Logical Properties - Size
1312
+ inlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1313
+ blockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1314
+ minInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1315
+ minBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): this;
1316
+ maxInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
1317
+ maxBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): this;
1318
+
1319
+ // Logical Properties - Border
1320
+ borderBlock(value: string): this;
1321
+ borderBlockStart(value: string): this;
1322
+ borderBlockEnd(value: string): this;
1323
+ borderInline(value: string): this;
1324
+ borderInlineStart(value: string): this;
1325
+ borderInlineEnd(value: string): this;
1326
+ borderBlockWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1327
+ borderBlockStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1328
+ borderBlockEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1329
+ borderInlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1330
+ borderInlineStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1331
+ borderInlineEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): this;
1332
+ borderBlockStyle(value: BorderStyleValue): this;
1333
+ borderBlockStartStyle(value: BorderStyleValue): this;
1334
+ borderBlockEndStyle(value: BorderStyleValue): this;
1335
+ borderInlineStyle(value: BorderStyleValue): this;
1336
+ borderInlineStartStyle(value: BorderStyleValue): this;
1337
+ borderInlineEndStyle(value: BorderStyleValue): this;
1338
+ borderBlockColor(value: CSSColorValue): this;
1339
+ borderBlockStartColor(value: CSSColorValue): this;
1340
+ borderBlockEndColor(value: CSSColorValue): this;
1341
+ borderInlineColor(value: CSSColorValue): this;
1342
+ borderInlineStartColor(value: CSSColorValue): this;
1343
+ borderInlineEndColor(value: CSSColorValue): this;
1344
+
1345
+ // Logical Properties - Border Radius
1346
+ borderStartStartRadius(value: CSSLengthValue): this;
1347
+ borderStartEndRadius(value: CSSLengthValue): this;
1348
+ borderEndStartRadius(value: CSSLengthValue): this;
1349
+ borderEndEndRadius(value: CSSLengthValue): this;
1350
+
1351
+ // Scroll
1352
+ scrollMargin(value: CSSLengthValue): this;
1353
+ scrollMarginTop(value: CSSLengthValue): this;
1354
+ scrollMarginRight(value: CSSLengthValue): this;
1355
+ scrollMarginBottom(value: CSSLengthValue): this;
1356
+ scrollMarginLeft(value: CSSLengthValue): this;
1357
+ scrollPadding(value: CSSLengthValue): this;
1358
+ scrollPaddingTop(value: CSSLengthValue): this;
1359
+ scrollPaddingRight(value: CSSLengthValue): this;
1360
+ scrollPaddingBottom(value: CSSLengthValue): this;
1361
+ scrollPaddingLeft(value: CSSLengthValue): this;
1362
+ overscrollBehavior(value: OverscrollBehaviorValue): this;
1363
+ overscrollBehaviorX(value: OverscrollBehaviorValue): this;
1364
+ overscrollBehaviorY(value: OverscrollBehaviorValue): this;
1365
+
1366
+ // Caret
1367
+ caretColor(value: CaretColorValue): this;
1368
+ caretShape(value: CaretShapeValue): this;
1369
+ caretAnimation(value: string): this;
1370
+
1371
+ // Other
1372
+ imageRendering(value: ImageRenderingValue): this;
1373
+ colorScheme(value: ColorSchemeValue): this;
1374
+ contentVisibility(value: ContentVisibilityValue): this;
1375
+ touchAction(value: TouchActionValue): this;
1376
+
1377
+ // Container Queries
1378
+ containerType(value: ContainerTypeValue): this;
1379
+ containerName(value: string): this;
1380
+ container(value: string): this;
1381
+
1382
+ // Font - Additional
1383
+ fontFeatureSettings(value: string): this;
1384
+ fontKerning(value: FontKerningValue): this;
1385
+ fontSynthesis(value: FontSynthesisValue): this;
1386
+ fontOpticalSizing(value: FontOpticalSizingValue): this;
1387
+ fontDisplay(value: FontDisplayValue): this;
1388
+ fontVariantCaps(value: FontVariantCapsValue): this;
1389
+ fontVariantNumeric(value: string): this;
1390
+ fontVariantLigatures(value: string): this;
1391
+ fontVariantEastAsian(value: string): this;
1392
+ fontVariantAlternates(value: string): this;
1393
+ fontVariantPosition(value: string): this;
1394
+
1395
+ // Text - Additional
1396
+ textRendering(value: TextRenderingValue): this;
1397
+ textCombineUpright(value: TextCombineUprightValue): this;
1398
+ textSizeAdjust(value: string | "auto" | "none" | `${number}%`): this;
1399
+
1400
+ // Mask (Note: mask conflicts with SVG mask element, use module import if needed)
1401
+ // mask(value: string): this; // Use: import { mask } from "nuclo"
1402
+ maskImage(value: CSSBackgroundImageValue | "none"): this;
1403
+ maskMode(value: string): this;
1404
+ maskRepeat(value: BackgroundRepeatValue): this;
1405
+ maskPosition(value: string): this;
1406
+ maskSize(value: CSSLengthValue | "auto" | "cover" | "contain"): this;
1407
+ maskOrigin(value: BackgroundOriginValue): this;
1408
+ maskClip(value: BackgroundClipValue): this;
1409
+ maskComposite(value: MaskCompositeValue): this;
1410
+
1411
+ // Clip
1412
+ clipRule(value: ClipRuleValue): this;
1413
+
1414
+ // Grid - Additional
1415
+ gridColumnGap(value: CSSLengthValue): this;
1416
+ gridRowGap(value: CSSLengthValue): this;
1417
+ gridGap(value: CSSLengthValue): this;
802
1418
  }
803
1419
 
804
1420
  // Utility functions that return StyleBuilders - exported at module level
805
1421
  // Display
806
- export function display(value: string): StyleBuilder;
807
- export function flex(value?: string): StyleBuilder;
1422
+ export function display(value: DisplayValue): StyleBuilder;
1423
+ export function flex(value?: CSSLengthValue | "auto" | "initial" | "none" | "1" | "0"): StyleBuilder;
808
1424
  export function grid(): StyleBuilder;
809
1425
 
810
1426
  // Colors
811
- export function bg(color: string): StyleBuilder;
812
- export function color(colorValue: string): StyleBuilder;
813
- export function accentColor(value: string): StyleBuilder;
1427
+ export function bg(color: CSSColorValue): StyleBuilder;
1428
+ export function color(colorValue: CSSColorValue): StyleBuilder;
1429
+ export function accentColor(value: CSSColorValue): StyleBuilder;
814
1430
 
815
1431
  // Typography
816
- export function fontSize(size: string): StyleBuilder;
817
- export function fontWeight(value: string): StyleBuilder;
818
- export function fontFamily(value: string): StyleBuilder;
819
- export function lineHeight(value: string): StyleBuilder;
820
- export function letterSpacing(value: string): StyleBuilder;
821
- export function textAlign(value: string): StyleBuilder;
822
- export function textDecoration(value: string): StyleBuilder;
1432
+ export function fontSize(size: CSSLengthValue): StyleBuilder;
1433
+ export function fontWeight(value: FontWeightValue): StyleBuilder;
1434
+ export function fontFamily(value: CSSFontFamilyValue): StyleBuilder;
1435
+ export function lineHeight(value: CSSLengthValue | "normal" | number): StyleBuilder;
1436
+ export function letterSpacing(value: CSSLengthValue | "normal"): StyleBuilder;
1437
+ export function textAlign(value: TextAlignValue): StyleBuilder;
1438
+ export function textDecoration(value: TextDecorationValue): StyleBuilder;
823
1439
  export function bold(): StyleBuilder;
824
- export function fontStyle(value: string): StyleBuilder;
1440
+ export function fontStyle(value: FontStyleValue): StyleBuilder;
825
1441
  export function fontVariant(value: string): StyleBuilder;
826
1442
  export function fontStretch(value: string): StyleBuilder;
827
- export function textTransform(value: string): StyleBuilder;
828
- export function textIndent(value: string): StyleBuilder;
829
- export function textOverflow(value: string): StyleBuilder;
1443
+ export function textTransform(value: TextTransformValue): StyleBuilder;
1444
+ export function textIndent(value: CSSLengthValue): StyleBuilder;
1445
+ export function textOverflow(value: TextOverflowValue): StyleBuilder;
830
1446
  export function textShadow(value: string): StyleBuilder;
831
- export function whiteSpace(value: string): StyleBuilder;
832
- export function wordSpacing(value: string): StyleBuilder;
833
- export function wordWrap(value: string): StyleBuilder;
834
- export function overflowWrap(value: string): StyleBuilder;
835
- export function textAlignLast(value: string): StyleBuilder;
836
- export function textJustify(value: string): StyleBuilder;
837
- export function textDecorationLine(value: string): StyleBuilder;
838
- export function textDecorationColor(value: string): StyleBuilder;
839
- export function textDecorationStyle(value: string): StyleBuilder;
840
- export function textDecorationThickness(value: string): StyleBuilder;
841
- export function textUnderlineOffset(value: string): StyleBuilder;
842
- export function verticalAlign(value: string): StyleBuilder;
1447
+ export function whiteSpace(value: WhiteSpaceValue): StyleBuilder;
1448
+ export function wordSpacing(value: CSSLengthValue | "normal"): StyleBuilder;
1449
+ export function wordWrap(value: WordWrapValue): StyleBuilder;
1450
+ export function overflowWrap(value: OverflowWrapValue): StyleBuilder;
1451
+ export function textAlignLast(value: TextAlignLastValue): StyleBuilder;
1452
+ export function textJustify(value: TextJustifyValue): StyleBuilder;
1453
+ export function textDecorationLine(value: TextDecorationLineValue): StyleBuilder;
1454
+ export function textDecorationColor(value: CSSColorValue): StyleBuilder;
1455
+ export function textDecorationStyle(value: TextDecorationStyleValue): StyleBuilder;
1456
+ export function textDecorationThickness(value: CSSLengthValue | "auto" | "from-font"): StyleBuilder;
1457
+ export function textUnderlineOffset(value: CSSLengthValue | "auto"): StyleBuilder;
1458
+ export function verticalAlign(value: VerticalAlignValue): StyleBuilder;
843
1459
 
844
1460
  // Layout
845
- export function position(value: string): StyleBuilder;
846
- export function padding(value: string): StyleBuilder;
847
- export function paddingTop(value: string): StyleBuilder;
848
- export function paddingRight(value: string): StyleBuilder;
849
- export function paddingBottom(value: string): StyleBuilder;
850
- export function paddingLeft(value: string): StyleBuilder;
851
- export function margin(value: string): StyleBuilder;
852
- export function marginTop(value: string): StyleBuilder;
853
- export function marginRight(value: string): StyleBuilder;
854
- export function marginBottom(value: string): StyleBuilder;
855
- export function marginLeft(value: string): StyleBuilder;
856
- export function width(value: string): StyleBuilder;
857
- export function height(value: string): StyleBuilder;
858
- export function minWidth(value: string): StyleBuilder;
859
- export function maxWidth(value: string): StyleBuilder;
860
- export function minHeight(value: string): StyleBuilder;
861
- export function maxHeight(value: string): StyleBuilder;
862
- export function boxSizing(value: string): StyleBuilder;
1461
+ export function position(value: PositionValue): StyleBuilder;
1462
+ export function padding(value: CSSLengthValue): StyleBuilder;
1463
+ export function paddingTop(value: CSSLengthValue): StyleBuilder;
1464
+ export function paddingRight(value: CSSLengthValue): StyleBuilder;
1465
+ export function paddingBottom(value: CSSLengthValue): StyleBuilder;
1466
+ export function paddingLeft(value: CSSLengthValue): StyleBuilder;
1467
+ export function margin(value: CSSLengthValue | "auto"): StyleBuilder;
1468
+ export function marginTop(value: CSSLengthValue | "auto"): StyleBuilder;
1469
+ export function marginRight(value: CSSLengthValue | "auto"): StyleBuilder;
1470
+ export function marginBottom(value: CSSLengthValue | "auto"): StyleBuilder;
1471
+ export function marginLeft(value: CSSLengthValue | "auto"): StyleBuilder;
1472
+ export function width(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1473
+ export function height(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1474
+ export function minWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1475
+ export function maxWidth(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
1476
+ export function minHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1477
+ export function maxHeight(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
1478
+ export function boxSizing(value: BoxSizingValue): StyleBuilder;
863
1479
 
864
1480
  // Positioning
865
- export function top(value: string): StyleBuilder;
866
- export function right(value: string): StyleBuilder;
867
- export function bottom(value: string): StyleBuilder;
868
- export function left(value: string): StyleBuilder;
869
- export function zIndex(value: string): StyleBuilder;
1481
+ export function top(value: CSSLengthValue | "auto"): StyleBuilder;
1482
+ export function right(value: CSSLengthValue | "auto"): StyleBuilder;
1483
+ export function bottom(value: CSSLengthValue | "auto"): StyleBuilder;
1484
+ export function left(value: CSSLengthValue | "auto"): StyleBuilder;
1485
+ export function zIndex(value: number | "auto"): StyleBuilder;
870
1486
 
871
1487
  // Flexbox
872
- export function flexDirection(value: string): StyleBuilder;
873
- export function alignItems(value: string): StyleBuilder;
874
- export function justifyContent(value: string): StyleBuilder;
1488
+ export function flexDirection(value: FlexDirectionValue): StyleBuilder;
1489
+ export function alignItems(value: AlignItemsValue): StyleBuilder;
1490
+ export function justifyContent(value: JustifyContentValue): StyleBuilder;
875
1491
  export function center(): StyleBuilder;
876
- export function gap(value: string): StyleBuilder;
877
- export function flexWrap(value: string): StyleBuilder;
878
- export function flexGrow(value: string): StyleBuilder;
879
- export function flexShrink(value: string): StyleBuilder;
880
- export function flexBasis(value: string): StyleBuilder;
881
- export function alignSelf(value: string): StyleBuilder;
882
- export function alignContent(value: string): StyleBuilder;
883
- export function justifySelf(value: string): StyleBuilder;
884
- export function justifyItems(value: string): StyleBuilder;
1492
+ export function gap(value: CSSLengthValue): StyleBuilder;
1493
+ export function flexWrap(value: FlexWrapValue): StyleBuilder;
1494
+ export function flexGrow(value: number | string): StyleBuilder;
1495
+ export function flexShrink(value: number | string): StyleBuilder;
1496
+ export function flexBasis(value: CSSLengthValue | "auto" | "content" | "fit-content"): StyleBuilder;
1497
+ export function alignSelf(value: AlignSelfValue): StyleBuilder;
1498
+ export function alignContent(value: AlignContentValue): StyleBuilder;
1499
+ export function justifySelf(value: JustifySelfValue): StyleBuilder;
1500
+ export function justifyItems(value: JustifyItemsValue): StyleBuilder;
885
1501
 
886
1502
  // Grid
887
1503
  export function gridTemplateColumns(value: string): StyleBuilder;
@@ -889,14 +1505,14 @@ export function gridTemplateRows(value: string): StyleBuilder;
889
1505
  export function gridTemplateAreas(value: string): StyleBuilder;
890
1506
  export function gridColumn(value: string): StyleBuilder;
891
1507
  export function gridRow(value: string): StyleBuilder;
892
- export function gridColumnStart(value: string): StyleBuilder;
893
- export function gridColumnEnd(value: string): StyleBuilder;
894
- export function gridRowStart(value: string): StyleBuilder;
895
- export function gridRowEnd(value: string): StyleBuilder;
1508
+ export function gridColumnStart(value: string | number | "auto"): StyleBuilder;
1509
+ export function gridColumnEnd(value: string | number | "auto"): StyleBuilder;
1510
+ export function gridRowStart(value: string | number | "auto"): StyleBuilder;
1511
+ export function gridRowEnd(value: string | number | "auto"): StyleBuilder;
896
1512
  export function gridArea(value: string): StyleBuilder;
897
- export function gridAutoColumns(value: string): StyleBuilder;
898
- export function gridAutoRows(value: string): StyleBuilder;
899
- export function gridAutoFlow(value: string): StyleBuilder;
1513
+ export function gridAutoColumns(value: CSSLengthValue): StyleBuilder;
1514
+ export function gridAutoRows(value: CSSLengthValue): StyleBuilder;
1515
+ export function gridAutoFlow(value: GridAutoFlowValue): StyleBuilder;
900
1516
 
901
1517
  // Borders
902
1518
  export function border(value: string): StyleBuilder;
@@ -904,155 +1520,341 @@ export function borderTop(value: string): StyleBuilder;
904
1520
  export function borderRight(value: string): StyleBuilder;
905
1521
  export function borderBottom(value: string): StyleBuilder;
906
1522
  export function borderLeft(value: string): StyleBuilder;
907
- export function borderWidth(value: string): StyleBuilder;
908
- export function borderStyle(value: string): StyleBuilder;
909
- export function borderColor(value: string): StyleBuilder;
910
- export function borderTopWidth(value: string): StyleBuilder;
911
- export function borderRightWidth(value: string): StyleBuilder;
912
- export function borderBottomWidth(value: string): StyleBuilder;
913
- export function borderLeftWidth(value: string): StyleBuilder;
914
- export function borderTopStyle(value: string): StyleBuilder;
915
- export function borderRightStyle(value: string): StyleBuilder;
916
- export function borderBottomStyle(value: string): StyleBuilder;
917
- export function borderLeftStyle(value: string): StyleBuilder;
918
- export function borderTopColor(value: string): StyleBuilder;
919
- export function borderRightColor(value: string): StyleBuilder;
920
- export function borderBottomColor(value: string): StyleBuilder;
921
- export function borderLeftColor(value: string): StyleBuilder;
922
- export function borderRadius(value: string): StyleBuilder;
923
- export function borderTopLeftRadius(value: string): StyleBuilder;
924
- export function borderTopRightRadius(value: string): StyleBuilder;
925
- export function borderBottomLeftRadius(value: string): StyleBuilder;
926
- export function borderBottomRightRadius(value: string): StyleBuilder;
1523
+ export function borderWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1524
+ export function borderStyle(value: BorderStyleValue): StyleBuilder;
1525
+ export function borderColor(value: CSSColorValue): StyleBuilder;
1526
+ export function borderTopWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1527
+ export function borderRightWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1528
+ export function borderBottomWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1529
+ export function borderLeftWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1530
+ export function borderTopStyle(value: BorderStyleValue): StyleBuilder;
1531
+ export function borderRightStyle(value: BorderStyleValue): StyleBuilder;
1532
+ export function borderBottomStyle(value: BorderStyleValue): StyleBuilder;
1533
+ export function borderLeftStyle(value: BorderStyleValue): StyleBuilder;
1534
+ export function borderTopColor(value: CSSColorValue): StyleBuilder;
1535
+ export function borderRightColor(value: CSSColorValue): StyleBuilder;
1536
+ export function borderBottomColor(value: CSSColorValue): StyleBuilder;
1537
+ export function borderLeftColor(value: CSSColorValue): StyleBuilder;
1538
+ export function borderRadius(value: CSSLengthValue): StyleBuilder;
1539
+ export function borderTopLeftRadius(value: CSSLengthValue): StyleBuilder;
1540
+ export function borderTopRightRadius(value: CSSLengthValue): StyleBuilder;
1541
+ export function borderBottomLeftRadius(value: CSSLengthValue): StyleBuilder;
1542
+ export function borderBottomRightRadius(value: CSSLengthValue): StyleBuilder;
927
1543
 
928
1544
  // Outline
929
1545
  export function outline(value: string): StyleBuilder;
930
- export function outlineWidth(value: string): StyleBuilder;
931
- export function outlineStyle(value: string): StyleBuilder;
932
- export function outlineColor(value: string): StyleBuilder;
933
- export function outlineOffset(value: string): StyleBuilder;
1546
+ export function outlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1547
+ export function outlineStyle(value: OutlineStyleValue): StyleBuilder;
1548
+ export function outlineColor(value: CSSColorValue): StyleBuilder;
1549
+ export function outlineOffset(value: CSSLengthValue): StyleBuilder;
934
1550
 
935
1551
  // Background
936
- export function backgroundColor(value: string): StyleBuilder;
937
- export function backgroundImage(value: string): StyleBuilder;
938
- export function backgroundRepeat(value: string): StyleBuilder;
1552
+ export function backgroundColor(value: CSSColorValue): StyleBuilder;
1553
+ export function backgroundImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
1554
+ export function backgroundRepeat(value: BackgroundRepeatValue): StyleBuilder;
939
1555
  export function backgroundPosition(value: string): StyleBuilder;
940
- export function backgroundSize(value: string): StyleBuilder;
941
- export function backgroundAttachment(value: string): StyleBuilder;
942
- export function backgroundClip(value: string): StyleBuilder;
943
- export function backgroundOrigin(value: string): StyleBuilder;
1556
+ export function backgroundSize(value: CSSLengthValue | "auto" | "cover" | "contain"): StyleBuilder;
1557
+ export function backgroundAttachment(value: BackgroundAttachmentValue): StyleBuilder;
1558
+ export function backgroundClip(value: BackgroundClipValue): StyleBuilder;
1559
+ export function backgroundOrigin(value: BackgroundOriginValue): StyleBuilder;
944
1560
 
945
1561
  // Effects
946
- export function boxShadow(value: string): StyleBuilder;
947
- export function opacity(value: string): StyleBuilder;
1562
+ export function boxShadow(value: string | "none"): StyleBuilder;
1563
+ export function opacity(value: number | string): StyleBuilder;
948
1564
  export function transition(value: string): StyleBuilder;
949
- export function transitionProperty(value: string): StyleBuilder;
950
- export function transitionDuration(value: string): StyleBuilder;
951
- export function transitionTimingFunction(value: string): StyleBuilder;
952
- export function transitionDelay(value: string): StyleBuilder;
1565
+ export function transitionProperty(value: string | "none" | "all"): StyleBuilder;
1566
+ export function transitionDuration(value: string | number): StyleBuilder;
1567
+ export function transitionTimingFunction(value: CSSTimingFunctionValue): StyleBuilder;
1568
+ export function transitionDelay(value: string | number): StyleBuilder;
953
1569
 
954
1570
  // Transform
955
- export function transform(value: string): StyleBuilder;
1571
+ export function transform(value: CSSTransformValue | "none"): StyleBuilder;
956
1572
  export function transformOrigin(value: string): StyleBuilder;
957
- export function transformStyle(value: string): StyleBuilder;
958
- export function perspective(value: string): StyleBuilder;
1573
+ export function transformStyle(value: TransformStyleValue): StyleBuilder;
1574
+ export function perspective(value: CSSLengthValue | "none"): StyleBuilder;
959
1575
  export function perspectiveOrigin(value: string): StyleBuilder;
960
- export function backfaceVisibility(value: string): StyleBuilder;
1576
+ export function backfaceVisibility(value: BackfaceVisibilityValue): StyleBuilder;
961
1577
 
962
1578
  // Animation
963
1579
  export function animation(value: string): StyleBuilder;
964
- export function animationName(value: string): StyleBuilder;
965
- export function animationDuration(value: string): StyleBuilder;
966
- export function animationTimingFunction(value: string): StyleBuilder;
967
- export function animationDelay(value: string): StyleBuilder;
968
- export function animationIterationCount(value: string): StyleBuilder;
969
- export function animationDirection(value: string): StyleBuilder;
970
- export function animationFillMode(value: string): StyleBuilder;
971
- export function animationPlayState(value: string): StyleBuilder;
1580
+ export function animationName(value: CSSAnimationNameValue): StyleBuilder;
1581
+ export function animationDuration(value: string | number): StyleBuilder;
1582
+ export function animationTimingFunction(value: CSSTimingFunctionValue): StyleBuilder;
1583
+ export function animationDelay(value: string | number): StyleBuilder;
1584
+ export function animationIterationCount(value: number | "infinite" | string): StyleBuilder;
1585
+ export function animationDirection(value: AnimationDirectionValue): StyleBuilder;
1586
+ export function animationFillMode(value: AnimationFillModeValue): StyleBuilder;
1587
+ export function animationPlayState(value: AnimationPlayStateValue): StyleBuilder;
972
1588
 
973
1589
  // Filter
974
- export function filter(value: string): StyleBuilder;
975
- export function backdropFilter(value: string): StyleBuilder;
1590
+ export function filter(value: CSSFilterValue | "none"): StyleBuilder;
1591
+ export function backdropFilter(value: CSSFilterValue | "none"): StyleBuilder;
976
1592
 
977
1593
  // Overflow
978
- export function overflow(value: string): StyleBuilder;
979
- export function overflowX(value: string): StyleBuilder;
980
- export function overflowY(value: string): StyleBuilder;
1594
+ export function overflow(value: OverflowValue): StyleBuilder;
1595
+ export function overflowX(value: OverflowValue): StyleBuilder;
1596
+ export function overflowY(value: OverflowValue): StyleBuilder;
981
1597
 
982
1598
  // Visibility
983
- export function visibility(value: string): StyleBuilder;
1599
+ export function visibility(value: VisibilityValue): StyleBuilder;
984
1600
 
985
1601
  // Object fit/position
986
- export function objectFit(value: string): StyleBuilder;
1602
+ export function objectFit(value: ObjectFitValue): StyleBuilder;
987
1603
  export function objectPosition(value: string): StyleBuilder;
988
1604
 
989
1605
  // List
990
1606
  export function listStyle(value: string): StyleBuilder;
991
- export function listStyleType(value: string): StyleBuilder;
992
- export function listStylePosition(value: string): StyleBuilder;
993
- export function listStyleImage(value: string): StyleBuilder;
1607
+ export function listStyleType(value: ListStyleTypeValue): StyleBuilder;
1608
+ export function listStylePosition(value: ListStylePositionValue): StyleBuilder;
1609
+ export function listStyleImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
994
1610
 
995
1611
  // Table
996
- export function borderCollapse(value: string): StyleBuilder;
997
- export function borderSpacing(value: string): StyleBuilder;
998
- export function captionSide(value: string): StyleBuilder;
999
- export function emptyCells(value: string): StyleBuilder;
1000
- export function tableLayout(value: string): StyleBuilder;
1612
+ export function borderCollapse(value: BorderCollapseValue): StyleBuilder;
1613
+ export function borderSpacing(value: CSSLengthValue): StyleBuilder;
1614
+ export function captionSide(value: CaptionSideValue): StyleBuilder;
1615
+ export function emptyCells(value: EmptyCellsValue): StyleBuilder;
1616
+ export function tableLayout(value: TableLayoutValue): StyleBuilder;
1001
1617
 
1002
1618
  // Content
1003
- export function content(value: string): StyleBuilder;
1004
- export function quotes(value: string): StyleBuilder;
1005
- export function counterReset(value: string): StyleBuilder;
1006
- export function counterIncrement(value: string): StyleBuilder;
1619
+ export function content(value: CSSContentValue | "normal" | "none"): StyleBuilder;
1620
+ export function quotes(value: string | "none"): StyleBuilder;
1621
+ export function counterReset(value: string | "none"): StyleBuilder;
1622
+ export function counterIncrement(value: string | "none"): StyleBuilder;
1007
1623
 
1008
1624
  // User interface
1009
- export function appearance(value: string): StyleBuilder;
1010
- export function userSelect(value: string): StyleBuilder;
1011
- export function pointerEvents(value: string): StyleBuilder;
1012
- export function resize(value: string): StyleBuilder;
1013
- export function scrollBehavior(value: string): StyleBuilder;
1625
+ export function appearance(value: AppearanceValue): StyleBuilder;
1626
+ export function userSelect(value: UserSelectValue): StyleBuilder;
1627
+ export function pointerEvents(value: PointerEventsValue): StyleBuilder;
1628
+ export function resize(value: ResizeValue): StyleBuilder;
1629
+ export function scrollBehavior(value: ScrollBehaviorValue): StyleBuilder;
1014
1630
 
1015
1631
  // Clip
1016
- export function clip(value: string): StyleBuilder;
1017
- export function clipPath(value: string): StyleBuilder;
1632
+ export function clip(value: string | "auto"): StyleBuilder;
1633
+ export function clipPath(value: string | "none"): StyleBuilder;
1018
1634
 
1019
1635
  // Isolation
1020
- export function isolation(value: string): StyleBuilder;
1636
+ export function isolation(value: IsolationValue): StyleBuilder;
1021
1637
 
1022
1638
  // Mix blend mode
1023
- export function mixBlendMode(value: string): StyleBuilder;
1639
+ export function mixBlendMode(value: MixBlendModeValue): StyleBuilder;
1024
1640
 
1025
1641
  // Will change
1026
- export function willChange(value: string): StyleBuilder;
1642
+ export function willChange(value: string | "auto"): StyleBuilder;
1027
1643
 
1028
1644
  // Contain
1029
- export function contain(value: string): StyleBuilder;
1645
+ export function contain(value: ContainValue): StyleBuilder;
1030
1646
 
1031
1647
  // Page break
1032
- export function pageBreakBefore(value: string): StyleBuilder;
1033
- export function pageBreakAfter(value: string): StyleBuilder;
1034
- export function pageBreakInside(value: string): StyleBuilder;
1648
+ export function pageBreakBefore(value: PageBreakValue): StyleBuilder;
1649
+ export function pageBreakAfter(value: PageBreakValue): StyleBuilder;
1650
+ export function pageBreakInside(value: PageBreakValue): StyleBuilder;
1035
1651
 
1036
1652
  // Break
1037
- export function breakBefore(value: string): StyleBuilder;
1038
- export function breakAfter(value: string): StyleBuilder;
1039
- export function breakInside(value: string): StyleBuilder;
1653
+ export function breakBefore(value: BreakValue): StyleBuilder;
1654
+ export function breakAfter(value: BreakValue): StyleBuilder;
1655
+ export function breakInside(value: BreakValue): StyleBuilder;
1040
1656
 
1041
1657
  // Orphans and widows
1042
- export function orphans(value: string): StyleBuilder;
1043
- export function widows(value: string): StyleBuilder;
1658
+ export function orphans(value: number | string): StyleBuilder;
1659
+ export function widows(value: number | string): StyleBuilder;
1044
1660
 
1045
1661
  // Column
1046
- export function columnCount(value: string): StyleBuilder;
1047
- export function columnFill(value: string): StyleBuilder;
1048
- export function columnGap(value: string): StyleBuilder;
1662
+ export function columnCount(value: number | "auto" | string): StyleBuilder;
1663
+ export function columnFill(value: ColumnFillValue): StyleBuilder;
1664
+ export function columnGap(value: CSSLengthValue | "normal"): StyleBuilder;
1049
1665
  export function columnRule(value: string): StyleBuilder;
1050
- export function columnRuleColor(value: string): StyleBuilder;
1051
- export function columnRuleStyle(value: string): StyleBuilder;
1052
- export function columnRuleWidth(value: string): StyleBuilder;
1053
- export function columnSpan(value: string): StyleBuilder;
1054
- export function columnWidth(value: string): StyleBuilder;
1666
+ export function columnRuleColor(value: CSSColorValue): StyleBuilder;
1667
+ export function columnRuleStyle(value: ColumnRuleStyleValue): StyleBuilder;
1668
+ export function columnRuleWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1669
+ export function columnSpan(value: ColumnSpanValue): StyleBuilder;
1670
+ export function columnWidth(value: CSSLengthValue | "auto"): StyleBuilder;
1055
1671
  export function columns(value: string): StyleBuilder;
1056
1672
 
1057
1673
  // Interaction
1058
- export function cursor(value: string): StyleBuilder;
1674
+ export function cursor(value: CursorValue): StyleBuilder;
1675
+
1676
+ // Layout - Additional
1677
+ export function aspectRatio(value: CSSAspectRatioValue): StyleBuilder;
1678
+ export function clear(value: ClearValue): StyleBuilder;
1679
+ export function float(value: FloatValue): StyleBuilder;
1680
+ export function order(value: number | string): StyleBuilder;
1681
+
1682
+ // Flexbox - Place properties
1683
+ export function placeContent(value: string): StyleBuilder;
1684
+ export function placeItems(value: string): StyleBuilder;
1685
+ export function placeSelf(value: string): StyleBuilder;
1686
+
1687
+ // Text - Additional
1688
+ export function hyphens(value: HyphensValue): StyleBuilder;
1689
+ export function lineBreak(value: LineBreakValue): StyleBuilder;
1690
+ export function wordBreak(value: WordBreakValue): StyleBuilder;
1691
+ export function textOrientation(value: TextOrientationValue): StyleBuilder;
1692
+ export function writingMode(value: WritingModeValue): StyleBuilder;
1693
+ export function direction(value: DirectionValue): StyleBuilder;
1694
+ export function unicodeBidi(value: UnicodeBidiValue): StyleBuilder;
1695
+
1696
+ // Background - Additional
1697
+ export function backgroundBlendMode(value: BackgroundBlendModeValue): StyleBuilder;
1698
+ export function backgroundPositionX(value: string): StyleBuilder;
1699
+ export function backgroundPositionY(value: string): StyleBuilder;
1700
+
1701
+ // Border Image
1702
+ export function borderImage(value: string): StyleBuilder;
1703
+ export function borderImageSource(value: CSSBackgroundImageValue | "none"): StyleBuilder;
1704
+ export function borderImageSlice(value: string | number): StyleBuilder;
1705
+ export function borderImageWidth(value: CSSLengthValue | number): StyleBuilder;
1706
+ export function borderImageOutset(value: CSSLengthValue | number): StyleBuilder;
1707
+ export function borderImageRepeat(value: BackgroundRepeatValue): StyleBuilder;
1708
+
1709
+ // Logical Properties - Inset
1710
+ export function inset(value: CSSLengthValue | "auto"): StyleBuilder;
1711
+ export function insetBlock(value: CSSLengthValue): StyleBuilder;
1712
+ export function insetBlockStart(value: CSSLengthValue | "auto"): StyleBuilder;
1713
+ export function insetBlockEnd(value: CSSLengthValue | "auto"): StyleBuilder;
1714
+ export function insetInline(value: CSSLengthValue): StyleBuilder;
1715
+ export function insetInlineStart(value: CSSLengthValue | "auto"): StyleBuilder;
1716
+ export function insetInlineEnd(value: CSSLengthValue | "auto"): StyleBuilder;
1717
+
1718
+ // Logical Properties - Margin
1719
+ export function marginBlock(value: CSSLengthValue | "auto"): StyleBuilder;
1720
+ export function marginBlockStart(value: CSSLengthValue | "auto"): StyleBuilder;
1721
+ export function marginBlockEnd(value: CSSLengthValue | "auto"): StyleBuilder;
1722
+ export function marginInline(value: CSSLengthValue | "auto"): StyleBuilder;
1723
+ export function marginInlineStart(value: CSSLengthValue | "auto"): StyleBuilder;
1724
+ export function marginInlineEnd(value: CSSLengthValue | "auto"): StyleBuilder;
1725
+
1726
+ // Logical Properties - Padding
1727
+ export function paddingBlock(value: CSSLengthValue): StyleBuilder;
1728
+ export function paddingBlockStart(value: CSSLengthValue): StyleBuilder;
1729
+ export function paddingBlockEnd(value: CSSLengthValue): StyleBuilder;
1730
+ export function paddingInline(value: CSSLengthValue): StyleBuilder;
1731
+ export function paddingInlineStart(value: CSSLengthValue): StyleBuilder;
1732
+ export function paddingInlineEnd(value: CSSLengthValue): StyleBuilder;
1733
+
1734
+ // Logical Properties - Size
1735
+ export function inlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1736
+ export function blockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1737
+ export function minInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1738
+ export function minBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content"): StyleBuilder;
1739
+ export function maxInlineSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
1740
+ export function maxBlockSize(value: CSSLengthValue | "auto" | "fit-content" | "max-content" | "min-content" | "none"): StyleBuilder;
1741
+
1742
+ // Logical Properties - Border
1743
+ export function borderBlock(value: string): StyleBuilder;
1744
+ export function borderBlockStart(value: string): StyleBuilder;
1745
+ export function borderBlockEnd(value: string): StyleBuilder;
1746
+ export function borderInline(value: string): StyleBuilder;
1747
+ export function borderInlineStart(value: string): StyleBuilder;
1748
+ export function borderInlineEnd(value: string): StyleBuilder;
1749
+ export function borderBlockWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1750
+ export function borderBlockStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1751
+ export function borderBlockEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1752
+ export function borderInlineWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1753
+ export function borderInlineStartWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1754
+ export function borderInlineEndWidth(value: CSSLengthValue | "thin" | "medium" | "thick"): StyleBuilder;
1755
+ export function borderBlockStyle(value: BorderStyleValue): StyleBuilder;
1756
+ export function borderBlockStartStyle(value: BorderStyleValue): StyleBuilder;
1757
+ export function borderBlockEndStyle(value: BorderStyleValue): StyleBuilder;
1758
+ export function borderInlineStyle(value: BorderStyleValue): StyleBuilder;
1759
+ export function borderInlineStartStyle(value: BorderStyleValue): StyleBuilder;
1760
+ export function borderInlineEndStyle(value: BorderStyleValue): StyleBuilder;
1761
+ export function borderBlockColor(value: CSSColorValue): StyleBuilder;
1762
+ export function borderBlockStartColor(value: CSSColorValue): StyleBuilder;
1763
+ export function borderBlockEndColor(value: CSSColorValue): StyleBuilder;
1764
+ export function borderInlineColor(value: CSSColorValue): StyleBuilder;
1765
+ export function borderInlineStartColor(value: CSSColorValue): StyleBuilder;
1766
+ export function borderInlineEndColor(value: CSSColorValue): StyleBuilder;
1767
+
1768
+ // Logical Properties - Border Radius
1769
+ export function borderStartStartRadius(value: CSSLengthValue): StyleBuilder;
1770
+ export function borderStartEndRadius(value: CSSLengthValue): StyleBuilder;
1771
+ export function borderEndStartRadius(value: CSSLengthValue): StyleBuilder;
1772
+ export function borderEndEndRadius(value: CSSLengthValue): StyleBuilder;
1773
+
1774
+ // Scroll
1775
+ export function scrollMargin(value: CSSLengthValue): StyleBuilder;
1776
+ export function scrollMarginTop(value: CSSLengthValue): StyleBuilder;
1777
+ export function scrollMarginRight(value: CSSLengthValue): StyleBuilder;
1778
+ export function scrollMarginBottom(value: CSSLengthValue): StyleBuilder;
1779
+ export function scrollMarginLeft(value: CSSLengthValue): StyleBuilder;
1780
+ export function scrollPadding(value: CSSLengthValue): StyleBuilder;
1781
+ export function scrollPaddingTop(value: CSSLengthValue): StyleBuilder;
1782
+ export function scrollPaddingRight(value: CSSLengthValue): StyleBuilder;
1783
+ export function scrollPaddingBottom(value: CSSLengthValue): StyleBuilder;
1784
+ export function scrollPaddingLeft(value: CSSLengthValue): StyleBuilder;
1785
+ export function overscrollBehavior(value: OverscrollBehaviorValue): StyleBuilder;
1786
+ export function overscrollBehaviorX(value: OverscrollBehaviorValue): StyleBuilder;
1787
+ export function overscrollBehaviorY(value: OverscrollBehaviorValue): StyleBuilder;
1788
+
1789
+ // Caret
1790
+ export function caretColor(value: CaretColorValue): StyleBuilder;
1791
+ export function caretShape(value: CaretShapeValue): StyleBuilder;
1792
+ export function caretAnimation(value: string): StyleBuilder;
1793
+
1794
+ // Other
1795
+ export function imageRendering(value: ImageRenderingValue): StyleBuilder;
1796
+ export function colorScheme(value: ColorSchemeValue): StyleBuilder;
1797
+ export function contentVisibility(value: ContentVisibilityValue): StyleBuilder;
1798
+ export function touchAction(value: TouchActionValue): StyleBuilder;
1799
+
1800
+ // Container Queries
1801
+ export function containerType(value: ContainerTypeValue): StyleBuilder;
1802
+ export function containerName(value: string): StyleBuilder;
1803
+ export function container(value: string): StyleBuilder;
1804
+
1805
+ // Font - Additional
1806
+ export function fontFeatureSettings(value: string): StyleBuilder;
1807
+ export function fontKerning(value: FontKerningValue): StyleBuilder;
1808
+ export function fontSynthesis(value: FontSynthesisValue): StyleBuilder;
1809
+ export function fontOpticalSizing(value: FontOpticalSizingValue): StyleBuilder;
1810
+ export function fontDisplay(value: FontDisplayValue): StyleBuilder;
1811
+ export function fontVariantCaps(value: FontVariantCapsValue): StyleBuilder;
1812
+ export function fontVariantNumeric(value: string): StyleBuilder;
1813
+ export function fontVariantLigatures(value: string): StyleBuilder;
1814
+ export function fontVariantEastAsian(value: string): StyleBuilder;
1815
+ export function fontVariantAlternates(value: string): StyleBuilder;
1816
+ export function fontVariantPosition(value: string): StyleBuilder;
1817
+
1818
+ // Text - Additional
1819
+ export function textRendering(value: TextRenderingValue): StyleBuilder;
1820
+ export function textCombineUpright(value: TextCombineUprightValue): StyleBuilder;
1821
+ export function textSizeAdjust(value: string | "auto" | "none" | `${number}%`): StyleBuilder;
1822
+
1823
+ // Mask
1824
+ export function mask(value: string): StyleBuilder;
1825
+ export function maskImage(value: CSSBackgroundImageValue | "none"): StyleBuilder;
1826
+ export function maskMode(value: string): StyleBuilder;
1827
+ export function maskRepeat(value: BackgroundRepeatValue): StyleBuilder;
1828
+ export function maskPosition(value: string): StyleBuilder;
1829
+ export function maskSize(value: CSSLengthValue | "auto" | "cover" | "contain"): StyleBuilder;
1830
+ export function maskOrigin(value: BackgroundOriginValue): StyleBuilder;
1831
+ export function maskClip(value: BackgroundClipValue): StyleBuilder;
1832
+ export function maskComposite(value: MaskCompositeValue): StyleBuilder;
1833
+
1834
+ // Clip
1835
+ export function clipRule(value: ClipRuleValue): StyleBuilder;
1836
+
1837
+ // Grid - Additional
1838
+ export function gridColumnGap(value: CSSLengthValue): StyleBuilder;
1839
+ export function gridRowGap(value: CSSLengthValue): StyleBuilder;
1840
+ export function gridGap(value: CSSLengthValue): StyleBuilder;
1841
+
1842
+ // Style queries / breakpoints
1843
+ export function createStyleQueries<T extends string>(
1844
+ queries: Record<T, string>
1845
+ ): {
1846
+ (styles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
1847
+ (defaultStyles: StyleBuilder, queryStyles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
1848
+ };
1849
+
1850
+ /**
1851
+ * @deprecated Use createStyleQueries instead. Alias for backward compatibility.
1852
+ */
1853
+ export function createBreakpoints<T extends string>(
1854
+ breakpoints: Record<T, string>
1855
+ ): {
1856
+ (styles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
1857
+ (defaultStyles: StyleBuilder, breakpointStyles?: Partial<Record<T, StyleBuilder>>): { className: string } | string;
1858
+ };
1859
+
1860
+ export function createCSSClass(className: string, styles: Record<string, string>): void;