ui-style-kit-css 2.3.0 → 2.4.1

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 (122) hide show
  1. package/CHANGELOG.md +57 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +102 -44
  4. package/STYLE-MAP.md +14 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47898 -15121
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47771 -15122
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47932 -15145
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +3247 -295
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +1229 -231
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2663 -282
  37. package/dist/visual/data-terminal.css +2064 -276
  38. package/dist/visual/editorial-luxe.css +2315 -259
  39. package/dist/visual/industrial-utility.css +3142 -270
  40. package/dist/visual/maximalist.css +2185 -454
  41. package/dist/visual/minimal-saas.css +1503 -398
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1690 -402
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2977 -292
  46. package/dist/visual/retro-glass.css +2625 -299
  47. package/dist/visual/retrofuturism.css +1885 -397
  48. package/dist/visual/tactile.css +2716 -498
  49. package/dist/visual/technical-blueprint.css +2599 -267
  50. package/dist/visual/y2k.css +1906 -309
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/COLOR-THEMES.md +63 -0
  56. package/docs/DEMO-SHOWCASE.md +65 -0
  57. package/docs/ECOSYSTEM.md +4 -4
  58. package/docs/EDITORIAL-LUX.md +75 -0
  59. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  60. package/docs/NATIVE-ELEMENTS.md +23 -17
  61. package/docs/NEO-NOIR.md +94 -0
  62. package/docs/ORGANIC-MODERN.md +91 -0
  63. package/docs/PAPER-EDITORIAL.md +63 -0
  64. package/docs/PUBLISHING.md +31 -10
  65. package/docs/RELEASE-2.4.0.md +88 -0
  66. package/docs/RELEASE-2.4.1.md +35 -0
  67. package/docs/RETRO-GLASS.md +105 -0
  68. package/docs/STYLE-GUIDE.md +41 -26
  69. package/docs/TACTILE.md +38 -0
  70. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  71. package/docs/TOKENS.md +80 -3
  72. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +624 -28
  75. package/package.json +20 -11
  76. package/styles/art-deco.css +1402 -17
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +881 -110
  98. package/styles/bento.css +1182 -113
  99. package/styles/brutalism.css +266 -15
  100. package/styles/clay.css +1307 -72
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +107 -36
  103. package/styles/content-overflow.css +11 -5
  104. package/styles/cyberpunk.css +1856 -51
  105. package/styles/data-terminal.css +1122 -18
  106. package/styles/editorial-luxe.css +581 -17
  107. package/styles/industrial-utility.css +1775 -16
  108. package/styles/interactive-surface-bridge.css +30 -20
  109. package/styles/interactive-surface-theme.css +21 -11
  110. package/styles/maximalist.css +1215 -133
  111. package/styles/minimal-saas.css +465 -93
  112. package/styles/native-elements.css +347 -171
  113. package/styles/neo-noir.css +661 -19
  114. package/styles/neumorphism.css +1021 -149
  115. package/styles/organic-modern.css +693 -23
  116. package/styles/paper-editorial.css +1053 -17
  117. package/styles/retro-glass.css +639 -50
  118. package/styles/retrofuturism.css +948 -60
  119. package/styles/tactile.css +1813 -111
  120. package/styles/technical-blueprint.css +673 -22
  121. package/styles/theme-colors.css +412 -2
  122. package/styles/y2k.css +954 -46
package/styles/compat-layout.css CHANGED
@@ -6,7 +6,7 @@
6
6
  ========================================================= */
7
7
 
8
8
  @layer ui-style-kit.compat_layout {
9
- [data-ui][data-theme][data-mode] :where(
9
+ [data-ui][data-mode] :where(
10
10
  [class~="saas-page"],
11
11
  [class~="saas-container"],
12
12
  [class~="saas-section"],
@@ -83,6 +83,5 @@
83
83
  ) {
84
84
  max-inline-size: 100%;
85
85
  min-inline-size: 0;
86
- overflow-wrap: anywhere;
87
86
  }
88
87
  }
package/styles/components.css CHANGED
@@ -6,7 +6,7 @@
6
6
  ========================================================= */
7
7
 
8
8
  @layer ui-style-kit.components {
9
- [data-ui][data-theme][data-mode] :where(
9
+ [data-ui][data-mode] :where(
10
10
  h1,
11
11
  h2,
12
12
  h3,
@@ -23,6 +23,9 @@
23
23
  label,
24
24
  legend,
25
25
  summary,
26
+ strong,
27
+ small,
28
+ em,
26
29
  code,
27
30
  kbd,
28
31
  samp,
@@ -32,10 +35,11 @@
32
35
  ) {
33
36
  max-inline-size: 100%;
34
37
  min-inline-size: 0;
35
- overflow-wrap: anywhere;
38
+ overflow-wrap: break-word;
39
+ word-break: normal;
36
40
  }
37
41
 
38
- [data-ui][data-theme][data-mode] :where(
42
+ [data-ui][data-mode] :where(
39
43
  [class~="saas-surface"],
40
44
  [class~="saas-surface-sm"],
41
45
  [class~="saas-surface-lg"],
@@ -160,10 +164,9 @@
160
164
  ) {
161
165
  max-inline-size: 100%;
162
166
  min-inline-size: 0;
163
- overflow-wrap: anywhere;
164
167
  }
165
168
 
166
- [data-ui][data-theme][data-mode] :where(
169
+ [data-ui][data-mode] :where(
167
170
  [class~="saas-button"],
168
171
  [class~="saas-icon-button"],
169
172
  [class~="saas-badge"],
@@ -211,10 +214,12 @@
211
214
  ) {
212
215
  max-inline-size: 100%;
213
216
  min-inline-size: 0;
217
+ overflow-wrap: break-word;
218
+ word-break: normal;
214
219
  white-space: normal;
215
220
  }
216
221
 
217
- [data-ui][data-theme][data-mode] :where(
222
+ [data-ui][data-mode] :where(
218
223
  .saas-button,
219
224
  .saas-icon-button,
220
225
  .saas-button-pill,
@@ -260,7 +265,7 @@
260
265
  vertical-align: middle;
261
266
  }
262
267
 
263
- [data-ui][data-theme][data-mode] :where(
268
+ [data-ui][data-mode] :where(
264
269
  .saas-button-pill,
265
270
  .bento-button-pill,
266
271
  .max-button-pill,
@@ -283,7 +288,8 @@
283
288
  font-weight: 850;
284
289
  text-align: center;
285
290
  text-decoration: none;
286
- overflow-wrap: anywhere;
291
+ overflow-wrap: break-word;
292
+ word-break: normal;
287
293
  white-space: normal;
288
294
  cursor: pointer;
289
295
  transition:
@@ -317,7 +323,7 @@
317
323
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
318
324
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
319
325
 
320
- [data-ui][data-theme][data-mode] :where(
326
+ [data-ui][data-mode] :where(
321
327
  .saas-button-pill:active,
322
328
  .saas-button-pill[aria-pressed="true"],
323
329
  .bento-button-pill:active,
@@ -356,7 +362,7 @@
356
362
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
357
363
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
358
364
 
359
- [data-ui][data-theme][data-mode] :where(
365
+ [data-ui][data-mode] :where(
360
366
  .saas-button-pill:disabled,
361
367
  .saas-button-pill[aria-disabled="true"],
362
368
  .bento-button-pill:disabled,
@@ -386,7 +392,7 @@
386
392
  transform: none;
387
393
  }
388
394
 
389
- [data-ui][data-theme][data-mode] :where(
395
+ [data-ui][data-mode] :where(
390
396
  .saas-tooltip,
391
397
  .saas-tooltip-top,
392
398
  .saas-tooltip-right,
@@ -445,16 +451,17 @@
445
451
  ) {
446
452
  max-inline-size: min(18rem, calc(100vw - 2rem));
447
453
  text-align: start;
448
- overflow-wrap: anywhere;
454
+ overflow-wrap: break-word;
455
+ word-break: normal;
449
456
  }
450
457
 
451
458
  /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
452
- [data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
453
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
459
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
460
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
454
461
  position: relative;
455
462
  }
456
463
 
457
- [data-ui][data-theme][data-mode] :where(
464
+ [data-ui][data-mode] :where(
458
465
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
459
466
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
460
467
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -504,10 +511,10 @@
504
511
  z-index: 20;
505
512
  }
506
513
 
507
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
508
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
509
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
510
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
514
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
515
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
516
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
517
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
511
518
 
512
519
  .saas-pill { border-radius: var(--saas-radius-pill); }
513
520
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -573,7 +580,7 @@
573
580
  .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
574
581
 
575
582
  .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost {
576
- color: var(--usk-native-primary);
583
+ color: var(--usk-primary-ink, var(--usk-native-primary));
577
584
  background: transparent;
578
585
  border-color: var(--usk-native-border);
579
586
  }
@@ -657,10 +664,72 @@
657
664
  }
658
665
  }
659
666
 
667
+ /**
668
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
669
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
670
+ * The root attributes intentionally raise specificity within the preset layer
671
+ * so later style-specific defaults cannot collapse the number and caption.
672
+ */
673
+ @layer ui-style-kit.presets {
674
+ [data-ui][data-mode] :where(
675
+ .saas-badge-seal,
676
+ .bento-badge-seal,
677
+ .max-badge-seal,
678
+ .bau-badge-seal,
679
+ .tactile-badge-seal,
680
+ .neo-badge-seal,
681
+ .retro-badge-seal,
682
+ .brutal-badge-seal,
683
+ .cyber-badge-seal,
684
+ .y2k-badge-seal,
685
+ .rg-badge-seal,
686
+ .luxe-badge-seal,
687
+ .organic-badge-seal,
688
+ .utility-badge-seal,
689
+ .blueprint-badge-seal,
690
+ .deco-badge-seal,
691
+ .clay-badge-seal,
692
+ .terminal-badge-seal,
693
+ .paper-badge-seal,
694
+ .noir-badge-seal
695
+ ) > strong {
696
+ color: inherit;
697
+ font-size: 1.5rem;
698
+ line-height: .9;
699
+ }
700
+
701
+ [data-ui][data-mode] :where(
702
+ .saas-badge-seal,
703
+ .bento-badge-seal,
704
+ .max-badge-seal,
705
+ .bau-badge-seal,
706
+ .tactile-badge-seal,
707
+ .neo-badge-seal,
708
+ .retro-badge-seal,
709
+ .brutal-badge-seal,
710
+ .cyber-badge-seal,
711
+ .y2k-badge-seal,
712
+ .rg-badge-seal,
713
+ .luxe-badge-seal,
714
+ .organic-badge-seal,
715
+ .utility-badge-seal,
716
+ .blueprint-badge-seal,
717
+ .deco-badge-seal,
718
+ .clay-badge-seal,
719
+ .terminal-badge-seal,
720
+ .paper-badge-seal,
721
+ .noir-badge-seal
722
+ ) > small {
723
+ color: inherit;
724
+ font-size: .8125rem;
725
+ line-height: 1;
726
+ }
727
+ }
728
+
660
729
  /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
661
730
  /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
662
731
  @layer ui-style-kit.components {
663
- [data-ui][data-theme][data-mode] :where(
732
+ [data-ui][data-mode] :where(
664
733
  .luxe-surface,
665
734
  .luxe-surface-sm,
666
735
  .luxe-surface-lg,
@@ -826,10 +895,9 @@
826
895
  ) {
827
896
  max-inline-size: 100%;
828
897
  min-inline-size: 0;
829
- overflow-wrap: anywhere;
830
898
  }
831
899
 
832
- [data-ui][data-theme][data-mode] :where(
900
+ [data-ui][data-mode] :where(
833
901
  .luxe-button,
834
902
  .luxe-icon-button,
835
903
  .luxe-button-cut,
@@ -905,10 +973,12 @@
905
973
  ) {
906
974
  max-inline-size: 100%;
907
975
  min-inline-size: 0;
976
+ overflow-wrap: break-word;
977
+ word-break: normal;
908
978
  white-space: normal;
909
979
  }
910
980
 
911
- [data-ui][data-theme][data-mode] :where(
981
+ [data-ui][data-mode] :where(
912
982
  .luxe-button,
913
983
  .luxe-icon-button,
914
984
  .luxe-button-pill,
@@ -948,7 +1018,7 @@
948
1018
  vertical-align: middle;
949
1019
  }
950
1020
 
951
- [data-ui][data-theme][data-mode] :where(
1021
+ [data-ui][data-mode] :where(
952
1022
  .luxe-button-pill,
953
1023
  .organic-button-pill,
954
1024
  .utility-button-pill,
@@ -969,7 +1039,8 @@
969
1039
  font-weight: 850;
970
1040
  text-align: center;
971
1041
  text-decoration: none;
972
- overflow-wrap: anywhere;
1042
+ overflow-wrap: break-word;
1043
+ word-break: normal;
973
1044
  white-space: normal;
974
1045
  cursor: pointer;
975
1046
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -1056,7 +1127,7 @@
1056
1127
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
1057
1128
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
1058
1129
 
1059
- [data-ui][data-theme][data-mode] :where(
1130
+ [data-ui][data-mode] :where(
1060
1131
  .luxe-button-pill:active,
1061
1132
  .luxe-button-pill[aria-pressed="true"],
1062
1133
  .organic-button-pill:active,
@@ -1077,7 +1148,7 @@
1077
1148
  .noir-button-pill[aria-pressed="true"]
1078
1149
  ) { transform: translateY(1px); }
1079
1150
 
1080
- [data-ui][data-theme][data-mode] :where(
1151
+ [data-ui][data-mode] :where(
1081
1152
  .luxe-button-pill:disabled,
1082
1153
  .luxe-button-pill[aria-disabled="true"],
1083
1154
  .organic-button-pill:disabled,
@@ -1098,7 +1169,7 @@
1098
1169
  .noir-button-pill[aria-disabled="true"]
1099
1170
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
1100
1171
 
1101
- [data-ui][data-theme][data-mode] :where(
1172
+ [data-ui][data-mode] :where(
1102
1173
  .luxe-tooltip,
1103
1174
  .luxe-tooltip-top,
1104
1175
  .luxe-tooltip-right,
@@ -1144,9 +1215,9 @@
1144
1215
  .noir-tooltip-right,
1145
1216
  .noir-tooltip-bottom,
1146
1217
  .noir-tooltip-left
1147
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
1218
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
1148
1219
 
1149
- [data-ui][data-theme][data-mode] :where(
1220
+ [data-ui][data-mode] :where(
1150
1221
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
1151
1222
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
1152
1223
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -1185,10 +1256,10 @@
1185
1256
  [data-ui-tooltip-anchor] > .noir-tooltip-left
1186
1257
  ) { position: absolute; z-index: 20; }
1187
1258
 
1188
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
1189
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
1190
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
1191
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
1259
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
1260
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
1261
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
1262
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
1192
1263
 
1193
1264
  :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
1194
1265
  :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
@@ -1196,7 +1267,7 @@
1196
1267
  :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
1197
1268
  :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
1198
1269
 
1199
- :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
1270
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
1200
1271
 
1201
1272
  :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch) {
1202
1273
  display: inline-flex;
package/styles/content-overflow.css CHANGED
@@ -6,7 +6,7 @@
6
6
  ========================================================= */
7
7
 
8
8
  @layer ui-style-kit.content_overflow {
9
- [data-ui][data-theme][data-mode] :where(
9
+ [data-ui][data-mode] :where(
10
10
  h1,
11
11
  h2,
12
12
  h3,
@@ -23,6 +23,9 @@
23
23
  label,
24
24
  legend,
25
25
  summary,
26
+ strong,
27
+ small,
28
+ em,
26
29
  code,
27
30
  kbd,
28
31
  samp,
@@ -32,10 +35,11 @@
32
35
  ) {
33
36
  max-inline-size: 100%;
34
37
  min-inline-size: 0;
35
- overflow-wrap: anywhere;
38
+ overflow-wrap: break-word;
39
+ word-break: normal;
36
40
  }
37
41
 
38
- [data-ui][data-theme][data-mode] :where(
42
+ [data-ui][data-mode] :where(
39
43
  [class~="saas-page"],
40
44
  [class~="saas-container"],
41
45
  [class~="saas-section"],
@@ -539,10 +543,9 @@
539
543
  ) {
540
544
  max-inline-size: 100%;
541
545
  min-inline-size: 0;
542
- overflow-wrap: anywhere;
543
546
  }
544
547
 
545
- [data-ui][data-theme][data-mode] :where(
548
+ [data-ui][data-mode] :where(
546
549
  [class~="saas-button"],
547
550
  [class~="saas-icon-button"],
548
551
  [class~="saas-button-cut"],
@@ -706,6 +709,9 @@
706
709
  ) {
707
710
  max-inline-size: 100%;
708
711
  min-inline-size: 0;
712
+ overflow-wrap: break-word;
713
+ word-break: normal;
709
714
  white-space: normal;
710
715
  }
716
+
711
717
  }