@yahoo/uds 3.169.1 → 3.170.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/automated-config/dist/generated/autoVariantTemplates.cjs +218 -0
  2. package/dist/automated-config/dist/generated/autoVariantTemplates.js +218 -0
  3. package/dist/components/IconSlot.cjs +1 -1
  4. package/dist/components/IconSlot.js +1 -1
  5. package/dist/components/client/Button/Button.cjs +1 -1
  6. package/dist/components/client/Button/Button.js +1 -1
  7. package/dist/components/client/IconButton/IconButton.cjs +1 -1
  8. package/dist/components/client/IconButton/IconButton.js +1 -1
  9. package/dist/components/client/Menu/Menu.Content.cjs +1 -1
  10. package/dist/components/client/Menu/Menu.Content.js +1 -1
  11. package/dist/components/client/Popover/PopoverContent.cjs +1 -1
  12. package/dist/components/client/Popover/PopoverContent.js +1 -1
  13. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
  14. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
  15. package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
  16. package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
  17. package/dist/index.cjs +3 -3
  18. package/dist/index.js +3 -3
  19. package/dist/styles/styleVariantTemplates.cjs +146 -0
  20. package/dist/styles/styleVariantTemplates.d.cts +161 -0
  21. package/dist/styles/styleVariantTemplates.d.ts +161 -0
  22. package/dist/styles/styleVariantTemplates.js +145 -0
  23. package/dist/styles/styler.cjs +27 -32
  24. package/dist/styles/styler.d.cts +13 -289
  25. package/dist/styles/styler.d.ts +13 -289
  26. package/dist/styles/styler.js +27 -32
  27. package/dist/styles/stylerTypes.d.cts +1 -1
  28. package/dist/styles/stylerTypes.d.ts +1 -1
  29. package/dist/styles/udsTailwindMerge.cjs +522 -0
  30. package/dist/styles/udsTailwindMerge.d.cts +7 -0
  31. package/dist/styles/udsTailwindMerge.d.ts +7 -0
  32. package/dist/styles/udsTailwindMerge.js +520 -0
  33. package/dist/styles/variantClass.cjs +31 -0
  34. package/dist/styles/variantClass.d.cts +12 -0
  35. package/dist/styles/variantClass.d.ts +12 -0
  36. package/dist/styles/variantClass.js +30 -0
  37. package/dist/styles/variants.cjs +3 -2
  38. package/dist/styles/variants.js +1 -1
  39. package/dist/tokens/index.cjs +1 -1
  40. package/dist/tokens/index.js +1 -1
  41. package/dist/uds/generated/componentData.cjs +205 -205
  42. package/dist/uds/generated/componentData.js +205 -205
  43. package/dist/uds/generated/tailwindPurge.cjs +79 -79
  44. package/dist/uds/generated/tailwindPurge.js +79 -79
  45. package/generated/componentData.json +335 -335
  46. package/generated/tailwindPurge.ts +1 -1
  47. package/package.json +1 -1
@@ -0,0 +1,520 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ import { createTailwindMerge } from "tailwind-merge";
3
+ //#region src/styles/udsTailwindMerge.ts
4
+ /**
5
+ * A tailwind-merge instance scoped to the class vocabulary UDS can emit.
6
+ *
7
+ * tailwind-merge's default configuration catalogues every Tailwind utility and
8
+ * is ~82% of the library's size (20.3 kB vs 3.6 kB minified for the engine
9
+ * alone). UDS only needs conflict resolution between the classes its style
10
+ * props generate (see `styleVariantTemplates.ts`) and consumer `className`
11
+ * overrides, so this from-scratch config enumerates exactly that vocabulary:
12
+ * the engine still handles variant modifiers (`hover:`, `placeholder:`),
13
+ * `!important`, arbitrary values, and negative utilities.
14
+ *
15
+ * Guard groups exist for consumer utilities that share a prefix with a UDS
16
+ * group but target a different CSS property (`text-lg` vs `text-primary`,
17
+ * `border-2` vs `border-primary`, `font-bold` vs `font-icons`, `bg-cover` vs
18
+ * `bg-primary`) so a consumer override never deletes an unrelated UDS class.
19
+ *
20
+ * Known, intentional behavior difference from the previous full-config merge:
21
+ * conflicts between two classes *outside* this vocabulary (e.g.
22
+ * `cx('mt-2', 'columns-3', 'columns-2')` in consumer code) are passed through
23
+ * unmerged and CSS order decides. UDS never emits such classes, and
24
+ * `udsTailwindMerge.test.ts` verifies parity with the previous behavior for
25
+ * every class UDS does emit.
26
+ */
27
+ const anyValue = () => true;
28
+ const TEXT_VARIANT_NAMES = [
29
+ "display1",
30
+ "display2",
31
+ "display3",
32
+ "title1",
33
+ "title2",
34
+ "title3",
35
+ "title4",
36
+ "headline1",
37
+ "body1",
38
+ "label1",
39
+ "label2",
40
+ "label3",
41
+ "label4",
42
+ "caption1",
43
+ "caption2",
44
+ "legal1",
45
+ "ui1",
46
+ "ui2",
47
+ "ui3",
48
+ "ui4",
49
+ "ui5",
50
+ "ui6"
51
+ ];
52
+ const isTextVariant = (value) => TEXT_VARIANT_NAMES.includes(value.split("/")[0]);
53
+ const isArbitraryLength = (value) => /^\[(length:|\d|\.\d)/.test(value);
54
+ const isTshirtSize = (value) => /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/.test(value);
55
+ const isBorderWidth = (value) => /^\d+$/.test(value) || value === "thin" || value === "medium" || value === "thick" || value.startsWith("width-elevation-");
56
+ const udsTwMerge = /* @__PURE__ */ createTailwindMerge(() => ({
57
+ cacheSize: 500,
58
+ separator: ":",
59
+ theme: {},
60
+ classGroups: {
61
+ "text-align": [{ text: [
62
+ "center",
63
+ "justify",
64
+ "start",
65
+ "end",
66
+ "left",
67
+ "right"
68
+ ] }],
69
+ "text-overflow": ["truncate", { text: ["ellipsis", "clip"] }],
70
+ "text-wrap": [{ text: [
71
+ "wrap",
72
+ "nowrap",
73
+ "balance",
74
+ "pretty"
75
+ ] }],
76
+ "font-size": [{ text: [
77
+ "base",
78
+ isTshirtSize,
79
+ isTextVariant,
80
+ isArbitraryLength
81
+ ] }],
82
+ "text-opacity": [{ "text-opacity": [anyValue] }],
83
+ "text-color": [{ text: [anyValue] }],
84
+ "font-weight": [{ font: [
85
+ "thin",
86
+ "extralight",
87
+ "light",
88
+ "normal",
89
+ "medium",
90
+ "semibold",
91
+ "bold",
92
+ "extrabold",
93
+ "black"
94
+ ] }],
95
+ "font-style": ["italic", "not-italic"],
96
+ "font-family": [{ font: ["icons", isTextVariant] }],
97
+ leading: [{ leading: [anyValue] }],
98
+ tracking: [{ tracking: [anyValue] }],
99
+ "uds-font-family": [{ "uds-font-family": [anyValue] }],
100
+ "uds-font-size": [{ "uds-font-size": [anyValue] }],
101
+ "uds-font-weight": [{ "uds-font-weight": [anyValue] }],
102
+ "uds-line-height": [{ "uds-line-height": [anyValue] }],
103
+ "uds-letter-spacing": [{ "uds-letter-spacing": [anyValue] }],
104
+ "uds-text-transform": [
105
+ { "uds-text-transform": [anyValue] },
106
+ "normal-case",
107
+ "uppercase",
108
+ "lowercase",
109
+ "capitalize"
110
+ ],
111
+ p: [{ p: [anyValue] }],
112
+ px: [{ px: [anyValue] }],
113
+ py: [{ py: [anyValue] }],
114
+ ps: [{ ps: [anyValue] }],
115
+ pe: [{ pe: [anyValue] }],
116
+ pt: [{ pt: [anyValue] }],
117
+ pb: [{ pb: [anyValue] }],
118
+ m: [{ m: [anyValue] }],
119
+ mx: [{ mx: [anyValue] }],
120
+ my: [{ my: [anyValue] }],
121
+ ms: [{ ms: [anyValue] }],
122
+ me: [{ me: [anyValue] }],
123
+ mt: [{ mt: [anyValue] }],
124
+ mb: [{ mb: [anyValue] }],
125
+ gap: [{ gap: [anyValue] }],
126
+ "gap-x": [{ "gap-x": [anyValue] }],
127
+ "gap-y": [{ "gap-y": [anyValue] }],
128
+ "bg-size": [{ bg: [
129
+ "auto",
130
+ "cover",
131
+ "contain"
132
+ ] }],
133
+ "bg-position": [{ bg: [
134
+ "center",
135
+ "top",
136
+ "bottom",
137
+ "left",
138
+ "right",
139
+ "left-top",
140
+ "left-bottom",
141
+ "right-top",
142
+ "right-bottom"
143
+ ] }],
144
+ "bg-repeat": [{ bg: [
145
+ "repeat",
146
+ "no-repeat",
147
+ "repeat-x",
148
+ "repeat-y",
149
+ "repeat-round",
150
+ "repeat-space"
151
+ ] }],
152
+ "bg-attachment": [{ bg: [
153
+ "fixed",
154
+ "local",
155
+ "scroll"
156
+ ] }],
157
+ "bg-clip": [{ "bg-clip": [
158
+ "border",
159
+ "padding",
160
+ "content",
161
+ "text"
162
+ ] }],
163
+ "bg-origin": [{ "bg-origin": [
164
+ "border",
165
+ "padding",
166
+ "content"
167
+ ] }],
168
+ "bg-blend": [{ "bg-blend": [anyValue] }],
169
+ "bg-image": ["bg-none", { "bg-gradient-to": [anyValue] }],
170
+ "bg-opacity": [{ "bg-opacity": [anyValue] }],
171
+ "bg-color": [{ bg: [anyValue] }],
172
+ "border-width": ["border", { border: [isBorderWidth] }],
173
+ "border-width-x": ["border-x", { "border-x": [isBorderWidth] }],
174
+ "border-width-y": ["border-y", { "border-y": [isBorderWidth] }],
175
+ "border-width-s": ["border-s", { "border-s": [isBorderWidth] }],
176
+ "border-width-e": ["border-e", { "border-e": [isBorderWidth] }],
177
+ "border-width-t": ["border-t", { "border-t": [isBorderWidth] }],
178
+ "border-width-r": ["border-r", { "border-r": [isBorderWidth] }],
179
+ "border-width-b": ["border-b", { "border-b": [isBorderWidth] }],
180
+ "border-width-l": ["border-l", { "border-l": [isBorderWidth] }],
181
+ "border-style": [{ border: [
182
+ "solid",
183
+ "dashed",
184
+ "dotted",
185
+ "double",
186
+ "hidden",
187
+ "none"
188
+ ] }],
189
+ "border-collapse": ["border-collapse", "border-separate"],
190
+ "border-spacing": [{ "border-spacing": [anyValue] }],
191
+ "border-spacing-x": [{ "border-spacing-x": [anyValue] }],
192
+ "border-spacing-y": [{ "border-spacing-y": [anyValue] }],
193
+ "border-opacity": [{ "border-opacity": [anyValue] }],
194
+ "border-color": [{ border: [anyValue] }],
195
+ "border-color-x": [{ "border-x": [anyValue] }],
196
+ "border-color-y": [{ "border-y": [anyValue] }],
197
+ "border-color-s": [{ "border-s": [anyValue] }],
198
+ "border-color-e": [{ "border-e": [anyValue] }],
199
+ "border-color-t": [{ "border-t": [anyValue] }],
200
+ "border-color-r": [{ "border-r": [anyValue] }],
201
+ "border-color-b": [{ "border-b": [anyValue] }],
202
+ "border-color-l": [{ "border-l": [anyValue] }],
203
+ "uds-border-radius": [{ "uds-border-radius": [anyValue] }],
204
+ "uds-border-radius-ts": [{ "uds-border-top-start-radius": [anyValue] }],
205
+ "uds-border-radius-te": [{ "uds-border-top-end-radius": [anyValue] }],
206
+ "uds-border-radius-bs": [{ "uds-border-bottom-start-radius": [anyValue] }],
207
+ "uds-border-radius-be": [{ "uds-border-bottom-end-radius": [anyValue] }],
208
+ "uds-border-width": [{ "uds-border-width": [anyValue] }],
209
+ "uds-border-width-x": [{ "uds-border-width-x": [anyValue] }],
210
+ "uds-border-width-y": [{ "uds-border-width-y": [anyValue] }],
211
+ "uds-border-width-s": [{ "uds-border-width-start": [anyValue] }],
212
+ "uds-border-width-e": [{ "uds-border-width-end": [anyValue] }],
213
+ "uds-border-width-t": [{ "uds-border-width-top": [anyValue] }],
214
+ "uds-border-width-b": [{ "uds-border-width-bottom": [anyValue] }],
215
+ "uds-nested-border-radius": [
216
+ "uds-nested-border-radius",
217
+ "uds-nested-border-radius-first",
218
+ "uds-nested-border-radius-last"
219
+ ],
220
+ "uds-nested-border-radius-size": [{ "uds-nested-border-radius-size": [anyValue] }],
221
+ "uds-nested-border-radius-width": [{ "uds-nested-border-radius-width": [anyValue] }],
222
+ "uds-nested-border-radius-spacing": [{ "uds-nested-border-radius-spacing": [anyValue] }],
223
+ "uds-drop-shadow": [{ "uds-drop-shadow": [anyValue] }],
224
+ "uds-inset-shadow": [{ "uds-inset-shadow": [anyValue] }],
225
+ "uds-color-mode": [{ "uds-color-mode": [anyValue] }],
226
+ "uds-scale-mode": [{ "uds-scale-mode": [anyValue] }],
227
+ avatarSize: [{ avatarSize: [anyValue] }],
228
+ iconSize: [{ iconSize: [anyValue] }],
229
+ w: [{ w: [anyValue] }],
230
+ h: [{ h: [anyValue] }],
231
+ size: [{ size: [anyValue] }],
232
+ basis: [{ basis: [anyValue] }],
233
+ content: ["content-none", { content: [(value) => value.startsWith("[")] }],
234
+ "align-content": [{ content: [anyValue] }],
235
+ "align-items": [{ items: [anyValue] }],
236
+ "align-self": [{ self: [anyValue] }],
237
+ "justify-items": [{ "justify-items": [anyValue] }],
238
+ "justify-self": [{ "justify-self": [anyValue] }],
239
+ "justify-content": [{ justify: [anyValue] }],
240
+ flex: [{ flex: [
241
+ "1",
242
+ "auto",
243
+ "initial",
244
+ "none"
245
+ ] }],
246
+ "flex-direction": [{ flex: [
247
+ "row",
248
+ "row-reverse",
249
+ "col",
250
+ "col-reverse"
251
+ ] }],
252
+ "flex-wrap": [{ flex: [
253
+ "wrap",
254
+ "wrap-reverse",
255
+ "nowrap"
256
+ ] }],
257
+ grow: ["grow", { grow: [anyValue] }],
258
+ shrink: ["shrink", { shrink: [anyValue] }],
259
+ display: [
260
+ "block",
261
+ "inline-block",
262
+ "inline",
263
+ "flex",
264
+ "inline-flex",
265
+ "table",
266
+ "inline-table",
267
+ "table-caption",
268
+ "table-cell",
269
+ "table-column",
270
+ "table-column-group",
271
+ "table-footer-group",
272
+ "table-header-group",
273
+ "table-row-group",
274
+ "table-row",
275
+ "flow-root",
276
+ "grid",
277
+ "inline-grid",
278
+ "contents",
279
+ "list-item",
280
+ "hidden"
281
+ ],
282
+ position: [
283
+ "static",
284
+ "fixed",
285
+ "absolute",
286
+ "relative",
287
+ "sticky"
288
+ ],
289
+ overflow: [{ overflow: [anyValue] }],
290
+ "overflow-x": [{ "overflow-x": [anyValue] }],
291
+ "overflow-y": [{ "overflow-y": [anyValue] }],
292
+ "object-fit": [{ object: [
293
+ "contain",
294
+ "cover",
295
+ "fill",
296
+ "none",
297
+ "scale-down"
298
+ ] }],
299
+ "object-position": [{ object: [anyValue] }],
300
+ opacity: [{ opacity: [anyValue] }],
301
+ cursor: [{ cursor: [anyValue] }],
302
+ "pointer-events": [{ "pointer-events": [anyValue] }],
303
+ visibility: [
304
+ "visible",
305
+ "invisible",
306
+ "collapse"
307
+ ],
308
+ transition: ["transition", { transition: [anyValue] }],
309
+ duration: [{ duration: [anyValue] }],
310
+ ease: [{ ease: [anyValue] }],
311
+ delay: [{ delay: [anyValue] }],
312
+ animate: [{ animate: [anyValue] }],
313
+ z: [{ z: [anyValue] }],
314
+ inset: [{ inset: [anyValue] }],
315
+ "inset-x": [{ "inset-x": [anyValue] }],
316
+ "inset-y": [{ "inset-y": [anyValue] }],
317
+ top: [{ top: [anyValue] }],
318
+ right: [{ right: [anyValue] }],
319
+ bottom: [{ bottom: [anyValue] }],
320
+ left: [{ left: [anyValue] }],
321
+ "translate-x": [{ "translate-x": [anyValue] }],
322
+ "translate-y": [{ "translate-y": [anyValue] }],
323
+ scale: [{ scale: [anyValue] }],
324
+ "scale-x": [{ "scale-x": [anyValue] }],
325
+ "scale-y": [{ "scale-y": [anyValue] }],
326
+ rounded: ["rounded", { rounded: [anyValue] }],
327
+ "rounded-s": ["rounded-s", { "rounded-s": [anyValue] }],
328
+ "rounded-e": ["rounded-e", { "rounded-e": [anyValue] }],
329
+ "rounded-t": ["rounded-t", { "rounded-t": [anyValue] }],
330
+ "rounded-r": ["rounded-r", { "rounded-r": [anyValue] }],
331
+ "rounded-b": ["rounded-b", { "rounded-b": [anyValue] }],
332
+ "rounded-l": ["rounded-l", { "rounded-l": [anyValue] }],
333
+ "rounded-ss": ["rounded-ss", { "rounded-ss": [anyValue] }],
334
+ "rounded-se": ["rounded-se", { "rounded-se": [anyValue] }],
335
+ "rounded-ee": ["rounded-ee", { "rounded-ee": [anyValue] }],
336
+ "rounded-es": ["rounded-es", { "rounded-es": [anyValue] }],
337
+ "rounded-tl": ["rounded-tl", { "rounded-tl": [anyValue] }],
338
+ "rounded-tr": ["rounded-tr", { "rounded-tr": [anyValue] }],
339
+ "rounded-br": ["rounded-br", { "rounded-br": [anyValue] }],
340
+ "rounded-bl": ["rounded-bl", { "rounded-bl": [anyValue] }],
341
+ "min-w": [{ "min-w": [anyValue] }],
342
+ "min-h": [{ "min-h": [anyValue] }],
343
+ "max-w": [{ "max-w": [anyValue] }],
344
+ "max-h": [{ "max-h": [anyValue] }],
345
+ shadow: ["shadow", { shadow: [
346
+ "inner",
347
+ "none",
348
+ isTshirtSize,
349
+ isArbitraryLength
350
+ ] }],
351
+ "shadow-color": [{ shadow: [anyValue] }],
352
+ "outline-style": [
353
+ "outline",
354
+ "outline-none",
355
+ { outline: [
356
+ "dashed",
357
+ "dotted",
358
+ "double"
359
+ ] }
360
+ ],
361
+ "outline-offset": [{ "outline-offset": [anyValue] }],
362
+ select: [{ select: [anyValue] }],
363
+ touch: [{ touch: [
364
+ "auto",
365
+ "none",
366
+ "manipulation"
367
+ ] }],
368
+ "touch-x": [{ "touch-pan": [
369
+ "x",
370
+ "left",
371
+ "right"
372
+ ] }],
373
+ "touch-y": [{ "touch-pan": [
374
+ "y",
375
+ "up",
376
+ "down"
377
+ ] }],
378
+ "touch-pz": ["touch-pinch-zoom"],
379
+ whitespace: [{ whitespace: [anyValue] }],
380
+ fill: [{ fill: [anyValue] }],
381
+ "line-clamp": [{ "line-clamp": [anyValue] }],
382
+ "list-style-type": [
383
+ "list-none",
384
+ "list-disc",
385
+ "list-decimal"
386
+ ],
387
+ appearance: [{ appearance: [anyValue] }],
388
+ "box-sizing": ["box-border", "box-content"],
389
+ sr: ["sr-only", "not-sr-only"],
390
+ "fvn-spacing": [
391
+ "normal-nums",
392
+ "tabular-nums",
393
+ "proportional-nums"
394
+ ],
395
+ "place-content": [{ "place-content": [anyValue] }],
396
+ "place-items": [{ "place-items": [anyValue] }],
397
+ "grid-flow": [{ "grid-flow": [anyValue] }],
398
+ "grid-cols": [{ "grid-cols": [anyValue] }],
399
+ "auto-cols": [{ "auto-cols": [anyValue] }],
400
+ "col-start-end": ["col-auto", { "col-span": [anyValue] }],
401
+ "col-start": [{ "col-start": [anyValue] }],
402
+ "col-end": [{ "col-end": [anyValue] }],
403
+ aspect: [{ aspect: [anyValue] }],
404
+ "text-decoration": [
405
+ "underline",
406
+ "overline",
407
+ "line-through",
408
+ "no-underline"
409
+ ]
410
+ },
411
+ conflictingClassGroups: {
412
+ p: [
413
+ "px",
414
+ "py",
415
+ "ps",
416
+ "pe",
417
+ "pt",
418
+ "pb"
419
+ ],
420
+ py: ["pt", "pb"],
421
+ m: [
422
+ "mx",
423
+ "my",
424
+ "ms",
425
+ "me",
426
+ "mt",
427
+ "mb"
428
+ ],
429
+ my: ["mt", "mb"],
430
+ gap: ["gap-x", "gap-y"],
431
+ "border-width": [
432
+ "border-width-s",
433
+ "border-width-e",
434
+ "border-width-t",
435
+ "border-width-r",
436
+ "border-width-b",
437
+ "border-width-l"
438
+ ],
439
+ "border-width-x": ["border-width-r", "border-width-l"],
440
+ "border-width-y": ["border-width-t", "border-width-b"],
441
+ "border-color": [
442
+ "border-color-s",
443
+ "border-color-e",
444
+ "border-color-t",
445
+ "border-color-r",
446
+ "border-color-b",
447
+ "border-color-l"
448
+ ],
449
+ "border-color-x": ["border-color-r", "border-color-l"],
450
+ "border-color-y": ["border-color-t", "border-color-b"],
451
+ size: ["w", "h"],
452
+ rounded: [
453
+ "rounded-s",
454
+ "rounded-e",
455
+ "rounded-t",
456
+ "rounded-r",
457
+ "rounded-b",
458
+ "rounded-l",
459
+ "rounded-ss",
460
+ "rounded-se",
461
+ "rounded-ee",
462
+ "rounded-es",
463
+ "rounded-tl",
464
+ "rounded-tr",
465
+ "rounded-br",
466
+ "rounded-bl"
467
+ ],
468
+ "rounded-s": ["rounded-ss", "rounded-es"],
469
+ "rounded-e": ["rounded-se", "rounded-ee"],
470
+ "rounded-t": ["rounded-tl", "rounded-tr"],
471
+ "rounded-r": ["rounded-tr", "rounded-br"],
472
+ "rounded-b": ["rounded-br", "rounded-bl"],
473
+ "rounded-l": ["rounded-tl", "rounded-bl"],
474
+ "border-spacing": ["border-spacing-x", "border-spacing-y"],
475
+ touch: [
476
+ "touch-x",
477
+ "touch-y",
478
+ "touch-pz"
479
+ ],
480
+ "touch-x": ["touch"],
481
+ "touch-y": ["touch"],
482
+ "touch-pz": ["touch"],
483
+ "uds-border-radius": [
484
+ "uds-border-radius-ts",
485
+ "uds-border-radius-te",
486
+ "uds-border-radius-bs",
487
+ "uds-border-radius-be"
488
+ ],
489
+ "uds-border-width": [
490
+ "uds-border-width-x",
491
+ "uds-border-width-y",
492
+ "uds-border-width-s",
493
+ "uds-border-width-e",
494
+ "uds-border-width-t",
495
+ "uds-border-width-b"
496
+ ],
497
+ "uds-border-width-x": ["uds-border-width-s", "uds-border-width-e"],
498
+ "uds-border-width-y": ["uds-border-width-t", "uds-border-width-b"],
499
+ flex: [
500
+ "basis",
501
+ "grow",
502
+ "shrink"
503
+ ],
504
+ overflow: ["overflow-x", "overflow-y"],
505
+ inset: [
506
+ "inset-x",
507
+ "inset-y",
508
+ "top",
509
+ "right",
510
+ "bottom",
511
+ "left"
512
+ ],
513
+ "inset-x": ["left", "right"],
514
+ "inset-y": ["top", "bottom"],
515
+ "line-clamp": ["display", "overflow"]
516
+ },
517
+ conflictingClassGroupModifiers: {}
518
+ }));
519
+ //#endregion
520
+ export { udsTwMerge };
@@ -0,0 +1,31 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const require_autoVariantTemplates = require("../automated-config/dist/generated/autoVariantTemplates.cjs");
4
+ const require_styles_styleVariantTemplates = require("./styleVariantTemplates.cjs");
5
+ //#region src/styles/variantClass.ts
6
+ /**
7
+ * Normalizes a variant value before substituting it into a class template.
8
+ * Mirrors the transforms baked into the enumerated class names: lowercasing,
9
+ * `/` to `-` (e.g. `title1/emphasized` → `title1-emphasized`), whitespace to
10
+ * hyphens.
11
+ */
12
+ const normalizeVariantValue = (value) => value.toLowerCase().replace(/\//g, "-").replace(/\s+/g, "-");
13
+ /**
14
+ * Resolves a style/variant prop + value pair to its CSS class name by template
15
+ * substitution instead of looking it up in the enumerated `variants` map, so
16
+ * the map never has to ship in the client bundle. The generated CSS contains
17
+ * the exact same class names (both are derived from the same sources), and
18
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
19
+ */
20
+ function resolveVariantClass(prop, value) {
21
+ if (value === void 0 || value === null) return;
22
+ if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return;
23
+ const template = require_styles_styleVariantTemplates.styleVariantTemplates[prop] ?? require_autoVariantTemplates.autoVariantTemplates[prop];
24
+ if (template === void 0) return;
25
+ const rawValue = String(value);
26
+ if (typeof template === "string") return template.replace("%v", normalizeVariantValue(rawValue));
27
+ if (Object.hasOwn(template.e, rawValue)) return template.e[rawValue];
28
+ return template.t.replace("%v", normalizeVariantValue(rawValue));
29
+ }
30
+ //#endregion
31
+ exports.resolveVariantClass = resolveVariantClass;
@@ -0,0 +1,12 @@
1
+
2
+ //#region src/styles/variantClass.d.ts
3
+ /**
4
+ * Resolves a style/variant prop + value pair to its CSS class name by template
5
+ * substitution instead of looking it up in the enumerated `variants` map, so
6
+ * the map never has to ship in the client bundle. The generated CSS contains
7
+ * the exact same class names (both are derived from the same sources), and
8
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
9
+ */
10
+ declare function resolveVariantClass(prop: string, value: unknown): string | undefined;
11
+ //#endregion
12
+ export { resolveVariantClass };
@@ -0,0 +1,12 @@
1
+
2
+ //#region src/styles/variantClass.d.ts
3
+ /**
4
+ * Resolves a style/variant prop + value pair to its CSS class name by template
5
+ * substitution instead of looking it up in the enumerated `variants` map, so
6
+ * the map never has to ship in the client bundle. The generated CSS contains
7
+ * the exact same class names (both are derived from the same sources), and
8
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
9
+ */
10
+ declare function resolveVariantClass(prop: string, value: unknown): string | undefined;
11
+ //#endregion
12
+ export { resolveVariantClass };
@@ -0,0 +1,30 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ import { autoVariantTemplates } from "../automated-config/dist/generated/autoVariantTemplates.js";
3
+ import { styleVariantTemplates } from "./styleVariantTemplates.js";
4
+ //#region src/styles/variantClass.ts
5
+ /**
6
+ * Normalizes a variant value before substituting it into a class template.
7
+ * Mirrors the transforms baked into the enumerated class names: lowercasing,
8
+ * `/` to `-` (e.g. `title1/emphasized` → `title1-emphasized`), whitespace to
9
+ * hyphens.
10
+ */
11
+ const normalizeVariantValue = (value) => value.toLowerCase().replace(/\//g, "-").replace(/\s+/g, "-");
12
+ /**
13
+ * Resolves a style/variant prop + value pair to its CSS class name by template
14
+ * substitution instead of looking it up in the enumerated `variants` map, so
15
+ * the map never has to ship in the client bundle. The generated CSS contains
16
+ * the exact same class names (both are derived from the same sources), and
17
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
18
+ */
19
+ function resolveVariantClass(prop, value) {
20
+ if (value === void 0 || value === null) return;
21
+ if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return;
22
+ const template = styleVariantTemplates[prop] ?? autoVariantTemplates[prop];
23
+ if (template === void 0) return;
24
+ const rawValue = String(value);
25
+ if (typeof template === "string") return template.replace("%v", normalizeVariantValue(rawValue));
26
+ if (Object.hasOwn(template.e, rawValue)) return template.e[rawValue];
27
+ return template.t.replace("%v", normalizeVariantValue(rawValue));
28
+ }
29
+ //#endregion
30
+ export { resolveVariantClass };
@@ -1,10 +1,11 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const require_autoVariants = require("../automated-config/dist/generated/autoVariants.cjs");
4
3
  const require_index = require("../css-tokens/dist/index.cjs");
4
+ const require_styles_textColorVariants = require("./textColorVariants.cjs");
5
+ const require_autoVariants = require("../automated-config/dist/generated/autoVariants.cjs");
5
6
  //#region src/styles/variants.ts
6
7
  const variants = {
7
- color: require("./textColorVariants.cjs").textColorVariants,
8
+ color: require_styles_textColorVariants.textColorVariants,
8
9
  placeholderColor: {
9
10
  accent: "placeholder:text-accent",
10
11
  alert: "placeholder:text-alert",
@@ -1,7 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
- import { autoVariants } from "../automated-config/dist/generated/autoVariants.js";
3
2
  import { DARK_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME } from "../css-tokens/dist/index.js";
4
3
  import { textColorVariants } from "./textColorVariants.js";
4
+ import { autoVariants } from "../automated-config/dist/generated/autoVariants.js";
5
5
  //#region src/styles/variants.ts
6
6
  const variants = {
7
7
  color: textColorVariants,
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const require_index = require("../palette/dist/index.cjs");
4
4
  const require_index$1 = require("../css-tokens/dist/index.cjs");
5
- const require_styles_variants = require("../styles/variants.cjs");
6
5
  const require_entries = require("../utils/dist/entries.cjs");
7
6
  const require_fromEntries = require("../utils/dist/fromEntries.cjs");
8
7
  const require_mapValues = require("../utils/dist/mapValues.cjs");
@@ -31,6 +30,7 @@ const require_getConfigVariants = require("../automated-config/dist/utils/getCon
31
30
  const require_getPaginationControlWidthPx = require("../automated-config/dist/utils/getPaginationControlWidthPx.cjs");
32
31
  const require_isConfiguratorPropertyVisible = require("../automated-config/dist/utils/isConfiguratorPropertyVisible.cjs");
33
32
  const require_index$2 = require("../automated-config/dist/utils/index.cjs");
33
+ const require_styles_variants = require("../styles/variants.cjs");
34
34
  const require_generatedConfigs = require("../automated-config/dist/generated/generatedConfigs.cjs");
35
35
  const require_tokens_configs_shadow = require("./configs/shadow.cjs");
36
36
  const require_index$3 = require("../modes/dist/index.cjs");
@@ -1,7 +1,6 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  import { ALWAYS_PREFIX, alwaysPalette, deprecatedAlwaysPalette, newAlwaysPalette } from "../palette/dist/index.js";
3
3
  import { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe } from "../css-tokens/dist/index.js";
4
- import { variants } from "../styles/variants.js";
5
4
  import { entries } from "../utils/dist/entries.js";
6
5
  import { fromEntries } from "../utils/dist/fromEntries.js";
7
6
  import { mapValues } from "../utils/dist/mapValues.js";
@@ -30,6 +29,7 @@ import { getConfigVariants } from "../automated-config/dist/utils/getConfigVaria
30
29
  import { getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "../automated-config/dist/utils/getPaginationControlWidthPx.js";
31
30
  import { isConfiguratorPropertyVisible } from "../automated-config/dist/utils/isConfiguratorPropertyVisible.js";
32
31
  import { applyBoxShadowBorder, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, mergeUniversalUnderOverride, statePseudoMapDocsMode } from "../automated-config/dist/utils/index.js";
32
+ import { variants } from "../styles/variants.js";
33
33
  import { AvatarConfig, BadgeConfig, BannerConfig, BottomSheetConfig, ButtonConfig, CheckboxConfig, ChipConfig, DividerConfig, IconButtonConfig, InputConfig, LinkConfig, MenuContentConfig, MenuItemConfig, ModalConfig, PaddleNavConfig, PaginationConfig, PopoverConfig, RadioConfig, ScrimConfig, SelectConfig, SelectContentConfig, SelectItemConfig, SwitchConfig, TabConfig, TabsConfig, ToastConfig, TooltipConfig } from "../automated-config/dist/generated/generatedConfigs.js";
34
34
  import { shadow } from "./configs/shadow.js";
35
35
  import { DEFAULT_COLOR_MODE, DEFAULT_COLOR_MODE_FOR_APP, DEFAULT_HIGH_CONTRAST_MODE, DEFAULT_REGION_MODE, DEFAULT_SCALE_MODE, DEFAULT_SCALE_MODE_FOR_APP } from "../modes/dist/index.js";