ui-style-kit-css 2.3.0 → 2.4.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 (120) hide show
  1. package/CHANGELOG.md +40 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +91 -42
  4. package/STYLE-MAP.md +9 -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 +47483 -15117
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47344 -15106
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47510 -15134
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +2821 -279
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +812 -224
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2238 -267
  37. package/dist/visual/data-terminal.css +1671 -293
  38. package/dist/visual/editorial-luxe.css +1889 -243
  39. package/dist/visual/industrial-utility.css +2717 -255
  40. package/dist/visual/maximalist.css +1768 -447
  41. package/dist/visual/minimal-saas.css +1076 -382
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1266 -388
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2551 -276
  46. package/dist/visual/retro-glass.css +2235 -319
  47. package/dist/visual/retrofuturism.css +1460 -382
  48. package/dist/visual/tactile.css +2251 -443
  49. package/dist/visual/technical-blueprint.css +2207 -285
  50. package/dist/visual/y2k.css +1481 -294
  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/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +4 -4
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +31 -10
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +40 -25
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +80 -3
  70. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  71. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  72. package/manifest.json +618 -27
  73. package/package.json +18 -10
  74. package/styles/art-deco.css +1397 -12
  75. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  76. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  77. package/styles/assets/bauhaus-barlow.ttf +0 -0
  78. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  79. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  81. package/styles/assets/bento-manrope-OFL.txt +93 -0
  82. package/styles/assets/bento-manrope.ttf +0 -0
  83. package/styles/assets/clay-grain.png +0 -0
  84. package/styles/assets/clay-rounded-OFL.txt +93 -0
  85. package/styles/assets/clay-rounded.ttf +0 -0
  86. package/styles/assets/neo-noir-corner-dark.png +0 -0
  87. package/styles/assets/neo-noir-corner-light.png +0 -0
  88. package/styles/assets/neo-noir-texture-dark.png +0 -0
  89. package/styles/assets/neo-noir-texture-light.png +0 -0
  90. package/styles/assets/organic-display-OFL.txt +93 -0
  91. package/styles/assets/organic-display.ttf +0 -0
  92. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  93. package/styles/assets/organic-sans-OFL.txt +93 -0
  94. package/styles/assets/organic-sans.ttf +0 -0
  95. package/styles/bauhaus.css +878 -107
  96. package/styles/bento.css +1176 -108
  97. package/styles/brutalism.css +262 -11
  98. package/styles/clay.css +1303 -68
  99. package/styles/compat-layout.css +1 -2
  100. package/styles/components.css +105 -34
  101. package/styles/content-overflow.css +11 -5
  102. package/styles/cyberpunk.css +1852 -47
  103. package/styles/data-terminal.css +1116 -12
  104. package/styles/editorial-luxe.css +576 -12
  105. package/styles/industrial-utility.css +1771 -12
  106. package/styles/interactive-surface-bridge.css +30 -20
  107. package/styles/interactive-surface-theme.css +21 -11
  108. package/styles/maximalist.css +1214 -132
  109. package/styles/minimal-saas.css +459 -88
  110. package/styles/native-elements.css +347 -171
  111. package/styles/neo-noir.css +656 -14
  112. package/styles/neumorphism.css +1018 -146
  113. package/styles/organic-modern.css +688 -18
  114. package/styles/paper-editorial.css +1048 -12
  115. package/styles/retro-glass.css +635 -46
  116. package/styles/retrofuturism.css +944 -56
  117. package/styles/tactile.css +1810 -108
  118. package/styles/technical-blueprint.css +668 -17
  119. package/styles/theme-colors.css +2 -2
  120. package/styles/y2k.css +950 -42
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,12 +14,12 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
17
+ :where([data-ui][data-mode="light"]) {
18
18
  --usk-border-text-mix: 45%;
19
19
  --usk-border-min-alpha: 1;
20
20
  }
21
21
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
22
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
23
  --usk-border-text-mix: 0%;
24
24
  --usk-border-min-alpha: 0;
25
25
  }
@@ -1597,7 +1597,8 @@
1597
1597
  ========================================================= */
1598
1598
 
1599
1599
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
1600
+ [data-ui][data-mode] {
1601
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
1602
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
1603
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
1604
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +1635,52 @@
1634
1635
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
1636
  --usk-native-thumb-border: var(--usk-native-primary);
1636
1637
  --usk-native-indicator: var(--usk-native-primary);
1638
+ --usk-native-choice-size: 1.5rem;
1639
+ --usk-native-choice-background: var(--usk-native-control-bg);
1640
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
1641
+ --usk-native-checkbox-radius: .3rem;
1642
+ --usk-native-radio-radius: 50%;
1643
+ --usk-native-choice-shadow: none;
1644
+ --usk-native-choice-checked-background: var(--usk-native-primary);
1645
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
1646
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
1647
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
1648
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
1649
+ --usk-native-select-padding-inline-end: 2.5rem;
1650
+ --usk-native-range-track-size: .45rem;
1651
+ --usk-native-range-track-background: var(--usk-native-track);
1652
+ --usk-native-range-track-border: 0 solid transparent;
1653
+ --usk-native-range-track-radius: 999px;
1654
+ --usk-native-range-track-shadow: none;
1655
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
1656
+ --usk-native-range-thumb-size: 1.2rem;
1657
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
1658
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1659
+ --usk-native-range-thumb-radius: 50%;
1660
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
1661
+ --usk-native-progress-size: .9rem;
1662
+ --usk-native-progress-track-background: var(--usk-native-track);
1663
+ --usk-native-progress-track-border: 0 solid transparent;
1664
+ --usk-native-progress-track-radius: 999px;
1665
+ --usk-native-progress-track-shadow: none;
1666
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
1667
+ --usk-native-progress-value-radius: inherit;
1668
+ --usk-native-progress-value-shadow: none;
1669
+ --usk-native-meter-optimum-background: var(--usk-native-success);
1670
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
1671
+ --usk-native-meter-critical-background: var(--usk-native-danger);
1672
+ --usk-native-file-button-background: var(--usk-native-primary);
1673
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
1674
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
1675
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
1676
+ --usk-native-color-swatch-border: 0 solid transparent;
1677
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
1678
+ --usk-native-indicator-opacity: .78;
1679
+ --usk-native-indicator-filter: none;
1680
+ --usk-native-scrollbar-size: .75rem;
1681
+ --usk-native-scrollbar-track: var(--usk-native-track);
1682
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
1683
+ --usk-native-scrollbar-radius: 999px;
1637
1684
  --usk-native-shadow: none;
1638
1685
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
1686
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +1688,7 @@
1641
1688
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
1689
 
1643
1690
  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
- --ui-color-bg: rgb(var(--usk-bg-rgb));
1691
+ --ui-color-bg: var(--usk-native-bg);
1645
1692
  --ui-color-surface: var(--usk-native-surface-strong);
1646
1693
  --ui-color-text: var(--usk-native-text);
1647
1694
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +1702,7 @@
1655
1702
  --ui-motion-easing: var(--usk-motion-easing);
1656
1703
  }
1657
1704
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1705
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
1706
  color: var(--usk-native-text);
1660
1707
  font-family: var(--usk-native-font-heading);
1661
1708
  line-height: 1.15;
@@ -1663,42 +1710,42 @@
1663
1710
  }
1664
1711
 
1665
1712
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1713
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
1714
  }
1668
1715
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
1716
+ [data-ui][data-mode] :where(hgroup) {
1670
1717
  display: grid;
1671
1718
  gap: .35rem;
1672
1719
  margin-block: 0 1rem;
1673
1720
  }
1674
1721
 
1675
- [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1676
- [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1677
- [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1722
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1723
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1724
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
1725
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
1726
+ [data-ui][data-mode] :where(p) {
1680
1727
  margin: 0 0 1rem;
1681
1728
  color: var(--usk-native-text-muted);
1682
1729
  line-height: 1.7;
1683
1730
  }
1684
1731
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
1732
+ [data-ui][data-mode] :where(a) {
1686
1733
  color: var(--usk-native-link);
1687
1734
  text-decoration-thickness: .08em;
1688
1735
  text-underline-offset: .18em;
1689
1736
  }
1690
1737
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1738
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1692
1739
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
1740
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
1741
  margin: 0 0 1rem;
1695
1742
  padding-left: 1.35rem;
1696
1743
  color: var(--usk-native-text-muted);
1697
1744
  }
1698
1745
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
1746
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
1747
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
1748
+ [data-ui][data-mode] :where(blockquote) {
1702
1749
  margin: 1.25rem 0;
1703
1750
  padding: 1rem 1.25rem;
1704
1751
  color: var(--usk-native-text);
@@ -1707,7 +1754,7 @@
1707
1754
  border-radius: var(--usk-native-radius);
1708
1755
  }
1709
1756
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
1757
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
1758
  padding: .15em .35em;
1712
1759
  color: var(--usk-native-text);
1713
1760
  background: var(--usk-native-surface-soft);
@@ -1717,7 +1764,7 @@
1717
1764
  font-size: .92em;
1718
1765
  }
1719
1766
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
1767
+ [data-ui][data-mode] :where(pre) {
1721
1768
  overflow: auto;
1722
1769
  margin: 1rem 0;
1723
1770
  padding: 1rem;
@@ -1727,57 +1774,88 @@
1727
1774
  border-radius: var(--usk-native-radius);
1728
1775
  }
1729
1776
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
1777
+ [data-ui][data-mode] :where(pre code) {
1731
1778
  display: block;
1732
1779
  padding: 0;
1733
1780
  background: transparent;
1734
1781
  border: 0;
1735
1782
  }
1736
1783
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
1784
+ [data-ui][data-mode] :where(hr) {
1738
1785
  height: 1px;
1739
1786
  margin: 2rem 0;
1740
1787
  background: var(--usk-native-border);
1741
1788
  border: 0;
1742
1789
  }
1743
1790
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
1791
+ [data-ui][data-mode] :where(mark) {
1745
1792
  padding-inline: .15em;
1746
1793
  color: var(--usk-native-text);
1747
1794
  background: rgb(var(--usk-warning-rgb) / .32);
1748
1795
  border-radius: .2em;
1749
1796
  }
1750
1797
 
1751
- [data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1752
- [data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }
1798
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1799
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
1800
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
1801
+ [data-ui][data-mode] :where(abbr[title]) {
1755
1802
  text-decoration: underline dotted var(--usk-native-primary);
1756
1803
  text-underline-offset: .18em;
1757
1804
  cursor: help;
1758
1805
  }
1759
1806
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1807
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
1808
  max-width: 100%;
1762
1809
  }
1763
1810
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1811
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1765
1812
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
1813
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
1814
+ [data-ui][data-mode] audio[controls] {
1815
+ display: block;
1816
+ box-sizing: border-box;
1817
+ inline-size: 100%;
1818
+ min-inline-size: 0;
1819
+ block-size: 60px;
1820
+ padding: 3px;
1821
+ background: var(--usk-native-control-bg);
1822
+ color: var(--usk-native-text);
1823
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
1824
+ border-radius: var(--usk-native-radius);
1825
+ box-shadow: var(--usk-native-shadow);
1826
+ accent-color: var(--usk-native-primary);
1827
+ color-scheme: light;
1828
+ }
1829
+ [data-ui][data-mode="dark"] audio[controls],
1830
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
1831
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
1832
+ border-radius: var(--usk-native-radius);
1833
+ background: transparent;
1834
+ }
1835
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
1836
+ background: var(--usk-native-control-bg);
1837
+ color: var(--usk-native-text);
1838
+ }
1839
+ [data-ui][data-mode] audio[controls]:focus-visible {
1840
+ outline: 2px solid var(--usk-native-focus);
1841
+ outline-offset: 2px;
1842
+ }
1843
+
1844
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
1845
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
1846
+ [data-ui][data-mode] :where(figcaption) {
1769
1847
  margin-top: .5rem;
1770
1848
  color: var(--usk-native-text-muted);
1771
1849
  font-size: .9rem;
1772
1850
  }
1773
1851
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
1852
+ [data-ui][data-mode] :where(form) {
1775
1853
  display: grid;
1776
1854
  gap: var(--usk-native-field-gap);
1777
1855
  min-inline-size: 0;
1778
1856
  }
1779
1857
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
1858
+ [data-ui][data-mode] :where(fieldset) {
1781
1859
  display: grid;
1782
1860
  gap: .9rem;
1783
1861
  min-inline-size: 0;
@@ -1788,30 +1866,30 @@
1788
1866
  border-radius: var(--usk-native-radius);
1789
1867
  }
1790
1868
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
1869
+ [data-ui][data-mode] :where(legend) {
1792
1870
  padding-inline: .35rem;
1793
1871
  color: var(--usk-native-text);
1794
1872
  font-weight: 900;
1795
1873
  }
1796
1874
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
1875
+ [data-ui][data-mode] :where(label) {
1798
1876
  color: var(--usk-native-text);
1799
1877
  font-weight: 750;
1800
1878
  }
1801
1879
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1880
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
1881
  display: grid;
1804
1882
  gap: var(--usk-native-field-gap);
1805
1883
  align-content: start;
1806
1884
  }
1807
1885
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1886
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
1887
  display: inline-flex;
1810
1888
  gap: var(--usk-native-field-gap);
1811
1889
  align-items: center;
1812
1890
  }
1813
1891
 
1814
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1892
+ [data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1815
1893
  width: 100%;
1816
1894
  min-block-size: var(--usk-native-control-min-block-size);
1817
1895
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +1900,44 @@
1822
1900
  font: inherit;
1823
1901
  }
1824
1902
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
1903
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
1904
  color-scheme: inherit;
1827
1905
  accent-color: var(--usk-native-primary);
1828
1906
  }
1829
1907
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
1908
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
1909
  color: var(--usk-native-text-muted);
1832
1910
  opacity: .78;
1833
1911
  }
1834
1912
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
1913
+ [data-ui][data-mode] :where(textarea) {
1836
1914
  min-height: 7rem;
1837
1915
  resize: vertical;
1838
1916
  }
1839
1917
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1918
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
1919
+
1920
+ [data-ui][data-mode] :where(select:not([multiple])) {
1921
+ -webkit-appearance: none;
1922
+ appearance: none;
1923
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
1924
+ background-image: var(--usk-native-select-indicator-image);
1925
+ background-repeat: no-repeat;
1926
+ background-position: var(--usk-native-select-indicator-position);
1927
+ background-size: var(--usk-native-select-indicator-size);
1928
+ }
1929
+
1930
+ [data-ui][data-mode] :where(select[multiple]) {
1931
+ padding-inline-end: var(--usk-native-control-padding-inline);
1932
+ background-image: none;
1933
+ }
1934
+
1935
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
1936
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
1937
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
1938
+ }
1841
1939
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1940
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
1941
  -webkit-appearance: none;
1844
1942
  appearance: none;
1845
1943
  box-sizing: border-box;
@@ -1848,7 +1946,7 @@
1848
1946
  font: inherit;
1849
1947
  }
1850
1948
 
1851
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1949
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
1950
  color: var(--usk-native-on-primary);
1853
1951
  background: var(--usk-native-primary);
1854
1952
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +1957,56 @@
1859
1957
  }
1860
1958
 
1861
1959
  /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1960
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
1961
  display: inline-flex;
1864
1962
  align-items: center;
1865
1963
  justify-content: center;
1866
1964
  gap: .55rem;
1867
1965
  }
1868
1966
 
1869
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1967
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
1968
  flex: 0 0 1em;
1871
1969
  }
1872
1970
 
1873
- [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1971
+ [data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1874
1972
  background: var(--usk-native-primary-hover);
1875
1973
  border-color: var(--usk-native-primary-hover);
1876
1974
  }
1877
1975
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
1976
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1977
+ -webkit-appearance: none;
1978
+ appearance: none;
1979
+ inline-size: var(--usk-native-choice-size);
1980
+ block-size: var(--usk-native-choice-size);
1981
+ background: var(--usk-native-choice-background);
1982
+ border: var(--usk-native-choice-border);
1983
+ box-shadow: var(--usk-native-choice-shadow);
1881
1984
  accent-color: var(--usk-native-primary);
1882
1985
  }
1883
1986
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
1987
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
1988
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
1989
+
1990
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
1991
+ background-color: var(--usk-native-choice-checked-background);
1992
+ background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
1993
+ }
1994
+
1995
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
1996
+ border-color: var(--usk-native-primary);
1997
+ filter: brightness(1.04);
1998
+ }
1999
+
2000
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2001
+ filter: brightness(.94);
2002
+ transform: scale(.94);
2003
+ }
2004
+
2005
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2006
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2007
+ }
2008
+
2009
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2010
  -webkit-appearance: none;
1886
2011
  appearance: none;
1887
2012
  width: 100%;
@@ -1890,40 +2015,50 @@
1890
2015
  accent-color: var(--usk-native-primary);
1891
2016
  }
1892
2017
 
1893
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
1894
- block-size: .45rem;
1895
- background: var(--usk-native-track);
1896
- border-radius: 999px;
2018
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2019
+ block-size: var(--usk-native-range-track-size);
2020
+ background: var(--usk-native-range-track-background);
2021
+ border: var(--usk-native-range-track-border);
2022
+ border-radius: var(--usk-native-range-track-radius);
2023
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2024
  }
1898
2025
 
1899
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
1900
- block-size: .45rem;
1901
- background: var(--usk-native-track);
1902
- border-radius: 999px;
2026
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2027
+ block-size: var(--usk-native-range-track-size);
2028
+ background: var(--usk-native-range-track-background);
2029
+ border: var(--usk-native-range-track-border);
2030
+ border-radius: var(--usk-native-range-track-radius);
2031
+ box-shadow: var(--usk-native-range-track-shadow);
2032
+ }
2033
+
2034
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2035
+ block-size: var(--usk-native-range-track-size);
2036
+ background: var(--usk-native-range-progress-background);
2037
+ border-radius: var(--usk-native-range-track-radius);
1903
2038
  }
1904
2039
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2040
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2041
  -webkit-appearance: none;
1907
2042
  appearance: none;
1908
- inline-size: 1.2rem;
1909
- block-size: 1.2rem;
1910
- margin-block-start: -.38rem;
1911
- background: var(--usk-native-thumb);
1912
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1913
- border-radius: 999px;
1914
- box-shadow: var(--usk-native-shadow);
2043
+ inline-size: var(--usk-native-range-thumb-size);
2044
+ block-size: var(--usk-native-range-thumb-size);
2045
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2046
+ background: var(--usk-native-range-thumb-background);
2047
+ border: var(--usk-native-range-thumb-border);
2048
+ border-radius: var(--usk-native-range-thumb-radius);
2049
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2050
  }
1916
2051
 
1917
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
1918
- inline-size: 1.2rem;
1919
- block-size: 1.2rem;
1920
- background: var(--usk-native-thumb);
1921
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1922
- border-radius: 999px;
1923
- box-shadow: var(--usk-native-shadow);
2052
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2053
+ inline-size: var(--usk-native-range-thumb-size);
2054
+ block-size: var(--usk-native-range-thumb-size);
2055
+ background: var(--usk-native-range-thumb-background);
2056
+ border: var(--usk-native-range-thumb-border);
2057
+ border-radius: var(--usk-native-range-thumb-radius);
2058
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2059
  }
1925
2060
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2061
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2062
  inline-size: 3rem;
1928
2063
  block-size: 2.4rem;
1929
2064
  padding: .2rem;
@@ -1932,84 +2067,86 @@
1932
2067
  border-radius: var(--usk-native-radius-sm);
1933
2068
  }
1934
2069
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2070
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2071
  padding: 0;
1937
2072
  }
1938
2073
 
1939
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
1940
- border: 0;
1941
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2074
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2075
+ border: var(--usk-native-color-swatch-border);
2076
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2077
  }
1943
2078
 
1944
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
1945
- border: 0;
1946
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2079
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2080
+ border: var(--usk-native-color-swatch-border);
2081
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2082
  }
1948
2083
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2084
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2085
 
1951
2086
  /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
1952
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1953
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2087
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2088
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2089
  margin-inline-end: .75rem;
1955
2090
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2091
  color: var(--usk-native-on-primary);
1957
- background: var(--usk-native-primary);
1958
- border: var(--usk-native-border-width) solid var(--usk-native-primary);
1959
- border-radius: var(--usk-native-radius-sm);
2092
+ background: var(--usk-native-file-button-background);
2093
+ border: var(--usk-native-file-button-border);
2094
+ border-radius: var(--usk-native-file-button-radius);
2095
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2096
  font-weight: 800;
1961
2097
  cursor: pointer;
1962
2098
  }
1963
2099
 
1964
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
1965
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
2100
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2101
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2102
  background: var(--usk-native-primary-hover);
1967
2103
  border-color: var(--usk-native-primary-hover);
1968
2104
  }
1969
2105
 
1970
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
1971
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
2106
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2107
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2108
  box-shadow: var(--usk-native-focus-ring);
1973
2109
  }
1974
2110
 
1975
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
1976
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
2111
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2112
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2113
  filter: brightness(.96);
1978
2114
  }
1979
2115
 
1980
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
1981
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
2116
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2117
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2118
  color: var(--usk-native-text-muted);
1983
2119
  background: var(--usk-native-surface-soft);
1984
2120
  border-color: var(--usk-native-border);
1985
2121
  cursor: not-allowed;
1986
2122
  }
1987
2123
 
1988
- [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
2124
+ [data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1989
2125
  background: var(--usk-native-surface-soft);
1990
2126
  }
1991
2127
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2128
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2129
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2130
  }
1995
2131
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2132
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2133
  border-color: var(--usk-native-success);
1998
2134
  }
1999
2135
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2136
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2137
  border-color: var(--usk-native-danger);
2002
2138
  }
2003
2139
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2140
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2141
+ background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
2005
2142
  accent-color: var(--usk-native-warning);
2006
2143
  }
2007
2144
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2145
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2146
  filter: brightness(.96);
2010
2147
  }
2011
2148
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2149
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2150
  color: var(--usk-native-text-muted);
2014
2151
  background: var(--usk-native-surface-soft);
2015
2152
  border-color: var(--usk-native-border);
@@ -2018,37 +2155,36 @@
2018
2155
  cursor: not-allowed;
2019
2156
  }
2020
2157
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2158
+ [data-ui][data-mode] :where(table) {
2022
2159
  width: 100%;
2023
2160
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2161
  background: var(--usk-native-surface);
2026
2162
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2163
  border-radius: var(--usk-native-radius);
2028
2164
  border-collapse: collapse;
2029
2165
  }
2030
2166
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2167
+ [data-ui][data-mode] :where(caption) {
2032
2168
  caption-side: bottom;
2033
2169
  padding: .75rem;
2034
2170
  color: var(--usk-native-text-muted);
2035
2171
  font-size: .9rem;
2036
2172
  }
2037
2173
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2174
+ [data-ui][data-mode] :where(th, td) {
2039
2175
  padding: .8rem .9rem;
2040
2176
  text-align: left;
2041
2177
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2178
  }
2043
2179
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2180
+ [data-ui][data-mode] :where(th) {
2045
2181
  color: var(--usk-native-text);
2046
2182
  background: var(--usk-native-surface-soft);
2047
2183
  }
2048
2184
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2185
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2186
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2187
+ [data-ui][data-mode] :where(details) {
2052
2188
  margin: 1rem 0;
2053
2189
  padding: .9rem 1rem;
2054
2190
  color: var(--usk-native-text);
@@ -2057,13 +2193,13 @@
2057
2193
  border-radius: var(--usk-native-radius);
2058
2194
  }
2059
2195
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2196
+ [data-ui][data-mode] :where(summary) {
2061
2197
  color: var(--usk-native-text);
2062
2198
  font-weight: 900;
2063
2199
  cursor: pointer;
2064
2200
  }
2065
2201
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2202
+ [data-ui][data-mode] :where(dialog) {
2067
2203
  max-width: min(92vw, 42rem);
2068
2204
  padding: 0;
2069
2205
  color: var(--usk-native-text);
@@ -2073,47 +2209,68 @@
2073
2209
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2210
  }
2075
2211
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2212
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2213
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2214
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2215
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2216
+ [data-ui][data-mode] :where(progress, meter) {
2217
+ -webkit-appearance: none;
2218
+ appearance: none;
2081
2219
  width: 100%;
2082
- min-height: .9rem;
2220
+ min-height: var(--usk-native-progress-size);
2083
2221
  accent-color: var(--usk-native-primary);
2084
2222
  }
2085
2223
 
2086
- [data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
2087
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
2088
- background: var(--usk-native-track);
2089
- border-radius: 999px;
2224
+ [data-ui][data-mode] :where(progress:not([value])) {
2225
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2226
+ background-size: 200% 100%;
2227
+ border: var(--usk-native-progress-track-border);
2228
+ border-radius: var(--usk-native-progress-track-radius);
2229
+ box-shadow: var(--usk-native-progress-track-shadow);
2230
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2231
  }
2091
2232
 
2092
- [data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
2093
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
2094
- background: var(--usk-native-track-fill);
2095
- border-radius: inherit;
2233
+ @keyframes usk-native-progress-indeterminate {
2234
+ to { background-position: -2rem 0; }
2096
2235
  }
2097
2236
 
2098
- [data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
2099
- [data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
2100
- background: var(--usk-native-track-fill);
2101
- border-radius: 999px;
2237
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2238
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2239
+ background: var(--usk-native-progress-track-background);
2240
+ border: var(--usk-native-progress-track-border);
2241
+ border-radius: var(--usk-native-progress-track-radius);
2242
+ box-shadow: var(--usk-native-progress-track-shadow);
2243
+ }
2244
+
2245
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2246
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2247
+ background: var(--usk-native-progress-value-background);
2248
+ border-radius: var(--usk-native-progress-value-radius);
2249
+ box-shadow: var(--usk-native-progress-value-shadow);
2250
+ }
2251
+
2252
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2253
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2254
+ background: var(--usk-native-progress-value-background);
2255
+ border-radius: var(--usk-native-progress-value-radius);
2256
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2257
  }
2103
2258
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2259
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2260
+
2261
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2262
+ background: var(--usk-native-meter-suboptimum-background);
2106
2263
  }
2107
2264
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2265
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2266
+ background: var(--usk-native-meter-critical-background);
2110
2267
  }
2111
2268
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2269
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2270
  color: var(--usk-native-text);
2114
2271
  }
2115
2272
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2273
+ [data-ui][data-mode] :where(article, aside) {
2117
2274
  padding: var(--usk-native-panel-padding);
2118
2275
  color: var(--usk-native-text);
2119
2276
  background: var(--usk-native-card-bg);
@@ -2122,113 +2279,132 @@
2122
2279
  box-shadow: var(--usk-native-shadow);
2123
2280
  }
2124
2281
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2282
+ [data-ui][data-mode] :where(dl) {
2126
2283
  margin: 0 0 1rem;
2127
2284
  color: var(--usk-native-text-muted);
2128
2285
  }
2129
2286
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2287
+ [data-ui][data-mode] :where(dt) {
2131
2288
  color: var(--usk-native-text);
2132
2289
  font-weight: 900;
2133
2290
  }
2134
2291
 
2135
- [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2136
- [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2137
- [data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2138
- [data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2139
- [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2140
- [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2141
- [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2142
- [data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2143
- [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2144
- [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2145
- [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2146
- [data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2147
- [data-ui][data-theme][data-mode] :where(datalist) { display: none; }
2148
-
2149
- [data-ui][data-theme][data-mode] :where(summary, li)::marker {
2292
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2293
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2294
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2295
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2296
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2297
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2298
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2299
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2300
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2301
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2302
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2303
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2304
+ [data-ui][data-mode] :where(datalist) { display: none; }
2305
+
2306
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2307
  color: var(--usk-native-indicator);
2151
2308
  }
2152
2309
 
2153
- [data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2154
- opacity: .78;
2310
+ [data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2311
+ opacity: var(--usk-native-indicator-opacity);
2312
+ filter: var(--usk-native-indicator-filter);
2155
2313
  accent-color: var(--usk-native-indicator);
2156
2314
  }
2157
2315
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2316
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2317
  accent-color: var(--usk-native-indicator);
2160
2318
  }
2161
2319
 
2162
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2163
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2320
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2321
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2322
  opacity: .72;
2165
2323
  }
2166
2324
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2325
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2326
  color: var(--usk-native-indicator);
2327
+ opacity: var(--usk-native-indicator-opacity);
2328
+ filter: var(--usk-native-indicator-filter);
2169
2329
  }
2170
2330
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2331
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2332
  outline: 3px solid var(--usk-native-focus);
2173
2333
  outline-offset: 3px;
2174
2334
  box-shadow: var(--usk-native-focus-ring);
2175
2335
  }
2176
2336
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2337
+ [data-ui][data-mode] :where(:target) {
2178
2338
  scroll-margin-top: 6rem;
2179
2339
  outline: 3px solid var(--usk-native-focus);
2180
2340
  outline-offset: .35rem;
2181
2341
  }
2182
2342
 
2183
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2343
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2344
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2345
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2346
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2347
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2348
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2349
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2350
 
2191
2351
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2352
+ [data-ui][data-mode] {
2193
2353
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2354
  }
2195
2355
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2356
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2357
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2358
  }
2199
2359
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2360
+ [data-ui][data-mode] :where(mark) {
2201
2361
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2362
  }
2203
2363
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2364
+ [data-ui][data-mode] :where(fieldset) {
2205
2365
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2366
  }
2207
2367
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2368
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2369
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2370
  }
2211
2371
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2372
+ [data-ui][data-mode] :where(th) {
2213
2373
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2374
  }
2215
2375
  }
2216
2376
 
2217
2377
  @media (prefers-reduced-motion: reduce) {
2218
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
2219
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2378
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2379
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2380
  transition-duration: 1ms !important;
2221
2381
  }
2382
+
2383
+ [data-ui][data-mode] :where(progress:not([value])) {
2384
+ animation: none;
2385
+ }
2386
+ }
2387
+
2388
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2389
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2390
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2391
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2392
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2393
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2394
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2395
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2396
+ box-shadow: none;
2397
+ filter: none;
2222
2398
  }
2223
2399
 
2224
2400
  @media (forced-colors: active) {
2225
2401
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2402
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2403
  forced-color-adjust: auto;
2228
2404
  }
2229
2405
  }
2230
2406
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2407
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2408
  border-color: Mark;
2233
2409
  }
2234
2410
  }
@@ -2244,7 +2420,7 @@
2244
2420
  ========================================================= */
2245
2421
 
2246
2422
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2423
+ [data-ui][data-mode] :where(
2248
2424
  h1,
2249
2425
  h2,
2250
2426
  h3,
@@ -2261,6 +2437,9 @@
2261
2437
  label,
2262
2438
  legend,
2263
2439
  summary,
2440
+ strong,
2441
+ small,
2442
+ em,
2264
2443
  code,
2265
2444
  kbd,
2266
2445
  samp,
@@ -2270,10 +2449,11 @@
2270
2449
  ) {
2271
2450
  max-inline-size: 100%;
2272
2451
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2452
+ overflow-wrap: break-word;
2453
+ word-break: normal;
2274
2454
  }
2275
2455
 
2276
- [data-ui][data-theme][data-mode] :where(
2456
+ [data-ui][data-mode] :where(
2277
2457
  [class~="saas-surface"],
2278
2458
  [class~="saas-surface-sm"],
2279
2459
  [class~="saas-surface-lg"],
@@ -2395,13 +2575,12 @@
2395
2575
  [class~="rg-alert"],
2396
2576
  [class~="rg-table-wrap"],
2397
2577
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2578
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2399
2579
  max-inline-size: 100%;
2400
2580
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2581
  }
2403
2582
 
2404
- [data-ui][data-theme][data-mode] :where(
2583
+ [data-ui][data-mode] :where(
2405
2584
  [class~="saas-button"],
2406
2585
  [class~="saas-icon-button"],
2407
2586
  [class~="saas-badge"],
@@ -2446,13 +2625,15 @@
2446
2625
  [class~="rg-icon-button"],
2447
2626
  [class~="rg-badge"],
2448
2627
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2628
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2450
2629
  max-inline-size: 100%;
2451
2630
  min-inline-size: 0;
2631
+ overflow-wrap: break-word;
2632
+ word-break: normal;
2452
2633
  white-space: normal;
2453
2634
  }
2454
2635
 
2455
- [data-ui][data-theme][data-mode] :where(
2636
+ [data-ui][data-mode] :where(
2456
2637
  .saas-button,
2457
2638
  .saas-icon-button,
2458
2639
  .saas-button-pill,
@@ -2486,7 +2667,7 @@
2486
2667
  .rg-button,
2487
2668
  .rg-icon-button,
2488
2669
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2670
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2490
2671
  box-sizing: border-box;
2491
2672
  display: inline-flex;
2492
2673
  align-items: center;
@@ -2498,7 +2679,7 @@
2498
2679
  vertical-align: middle;
2499
2680
  }
2500
2681
 
2501
- [data-ui][data-theme][data-mode] :where(
2682
+ [data-ui][data-mode] :where(
2502
2683
  .saas-button-pill,
2503
2684
  .bento-button-pill,
2504
2685
  .max-button-pill,
@@ -2521,7 +2702,8 @@
2521
2702
  font-weight: 850;
2522
2703
  text-align: center;
2523
2704
  text-decoration: none;
2524
- overflow-wrap: anywhere;
2705
+ overflow-wrap: break-word;
2706
+ word-break: normal;
2525
2707
  white-space: normal;
2526
2708
  cursor: pointer;
2527
2709
  transition:
@@ -2555,7 +2737,7 @@
2555
2737
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
2738
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
2739
 
2558
- [data-ui][data-theme][data-mode] :where(
2740
+ [data-ui][data-mode] :where(
2559
2741
  .saas-button-pill:active,
2560
2742
  .saas-button-pill[aria-pressed="true"],
2561
2743
  .bento-button-pill:active,
@@ -2594,7 +2776,7 @@
2594
2776
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
2777
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
2778
 
2597
- [data-ui][data-theme][data-mode] :where(
2779
+ [data-ui][data-mode] :where(
2598
2780
  .saas-button-pill:disabled,
2599
2781
  .saas-button-pill[aria-disabled="true"],
2600
2782
  .bento-button-pill:disabled,
@@ -2624,7 +2806,7 @@
2624
2806
  transform: none;
2625
2807
  }
2626
2808
 
2627
- [data-ui][data-theme][data-mode] :where(
2809
+ [data-ui][data-mode] :where(
2628
2810
  .saas-tooltip,
2629
2811
  .saas-tooltip-top,
2630
2812
  .saas-tooltip-right,
@@ -2683,16 +2865,17 @@
2683
2865
  ) {
2684
2866
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
2867
  text-align: start;
2686
- overflow-wrap: anywhere;
2868
+ overflow-wrap: break-word;
2869
+ word-break: normal;
2687
2870
  }
2688
2871
 
2689
2872
  /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
2690
- [data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
2691
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
2873
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
2874
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
2875
  position: relative;
2693
2876
  }
2694
2877
 
2695
- [data-ui][data-theme][data-mode] :where(
2878
+ [data-ui][data-mode] :where(
2696
2879
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
2880
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
2881
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +2925,10 @@
2742
2925
  z-index: 20;
2743
2926
  }
2744
2927
 
2745
- [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%); }
2746
- [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%); }
2747
- [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%); }
2748
- [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%); }
2928
+ [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%); }
2929
+ [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%); }
2930
+ [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%); }
2931
+ [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%); }
2749
2932
 
2750
2933
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
2934
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2895,10 +3078,72 @@
2895
3078
  }
2896
3079
  }
2897
3080
 
3081
+ /**
3082
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3083
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3084
+ * The root attributes intentionally raise specificity within the preset layer
3085
+ * so later style-specific defaults cannot collapse the number and caption.
3086
+ */
3087
+ @layer ui-style-kit.presets {
3088
+ [data-ui][data-mode] :where(
3089
+ .saas-badge-seal,
3090
+ .bento-badge-seal,
3091
+ .max-badge-seal,
3092
+ .bau-badge-seal,
3093
+ .tactile-badge-seal,
3094
+ .neo-badge-seal,
3095
+ .retro-badge-seal,
3096
+ .brutal-badge-seal,
3097
+ .cyber-badge-seal,
3098
+ .y2k-badge-seal,
3099
+ .rg-badge-seal,
3100
+ .luxe-badge-seal,
3101
+ .organic-badge-seal,
3102
+ .utility-badge-seal,
3103
+ .blueprint-badge-seal,
3104
+ .deco-badge-seal,
3105
+ .clay-badge-seal,
3106
+ .terminal-badge-seal,
3107
+ .paper-badge-seal,
3108
+ .noir-badge-seal
3109
+ ) > strong {
3110
+ color: inherit;
3111
+ font-size: 1.5rem;
3112
+ line-height: .9;
3113
+ }
3114
+
3115
+ [data-ui][data-mode] :where(
3116
+ .saas-badge-seal,
3117
+ .bento-badge-seal,
3118
+ .max-badge-seal,
3119
+ .bau-badge-seal,
3120
+ .tactile-badge-seal,
3121
+ .neo-badge-seal,
3122
+ .retro-badge-seal,
3123
+ .brutal-badge-seal,
3124
+ .cyber-badge-seal,
3125
+ .y2k-badge-seal,
3126
+ .rg-badge-seal,
3127
+ .luxe-badge-seal,
3128
+ .organic-badge-seal,
3129
+ .utility-badge-seal,
3130
+ .blueprint-badge-seal,
3131
+ .deco-badge-seal,
3132
+ .clay-badge-seal,
3133
+ .terminal-badge-seal,
3134
+ .paper-badge-seal,
3135
+ .noir-badge-seal
3136
+ ) > small {
3137
+ color: inherit;
3138
+ font-size: .8125rem;
3139
+ line-height: 1;
3140
+ }
3141
+ }
3142
+
2898
3143
  /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
3144
  /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
3145
  @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
3146
+ [data-ui][data-mode] :where(
2902
3147
  .luxe-surface,
2903
3148
  .luxe-surface-sm,
2904
3149
  .luxe-surface-lg,
@@ -3061,13 +3306,12 @@
3061
3306
  .noir-feature-item,
3062
3307
  .noir-callout-bar,
3063
3308
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3309
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
3310
  max-inline-size: 100%;
3066
3311
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3312
  }
3069
3313
 
3070
- [data-ui][data-theme][data-mode] :where(
3314
+ [data-ui][data-mode] :where(
3071
3315
  .luxe-button,
3072
3316
  .luxe-icon-button,
3073
3317
  .luxe-button-cut,
@@ -3140,13 +3384,15 @@
3140
3384
  .noir-badge-seal,
3141
3385
  .noir-nav-link,
3142
3386
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3387
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
3388
  max-inline-size: 100%;
3145
3389
  min-inline-size: 0;
3390
+ overflow-wrap: break-word;
3391
+ word-break: normal;
3146
3392
  white-space: normal;
3147
3393
  }
3148
3394
 
3149
- [data-ui][data-theme][data-mode] :where(
3395
+ [data-ui][data-mode] :where(
3150
3396
  .luxe-button,
3151
3397
  .luxe-icon-button,
3152
3398
  .luxe-button-pill,
@@ -3174,7 +3420,7 @@
3174
3420
  .noir-button,
3175
3421
  .noir-icon-button,
3176
3422
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3423
+ ), [data-ui]:where([data-ui="brutalism"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
3424
  box-sizing: border-box;
3179
3425
  display: inline-flex;
3180
3426
  align-items: center;
@@ -3186,7 +3432,7 @@
3186
3432
  vertical-align: middle;
3187
3433
  }
3188
3434
 
3189
- [data-ui][data-theme][data-mode] :where(
3435
+ [data-ui][data-mode] :where(
3190
3436
  .luxe-button-pill,
3191
3437
  .organic-button-pill,
3192
3438
  .utility-button-pill,
@@ -3207,7 +3453,8 @@
3207
3453
  font-weight: 850;
3208
3454
  text-align: center;
3209
3455
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3456
+ overflow-wrap: break-word;
3457
+ word-break: normal;
3211
3458
  white-space: normal;
3212
3459
  cursor: pointer;
3213
3460
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3541,7 @@
3294
3541
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3542
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3543
 
3297
- [data-ui][data-theme][data-mode] :where(
3544
+ [data-ui][data-mode] :where(
3298
3545
  .luxe-button-pill:active,
3299
3546
  .luxe-button-pill[aria-pressed="true"],
3300
3547
  .organic-button-pill:active,
@@ -3315,7 +3562,7 @@
3315
3562
  .noir-button-pill[aria-pressed="true"]
3316
3563
  ) { transform: translateY(1px); }
3317
3564
 
3318
- [data-ui][data-theme][data-mode] :where(
3565
+ [data-ui][data-mode] :where(
3319
3566
  .luxe-button-pill:disabled,
3320
3567
  .luxe-button-pill[aria-disabled="true"],
3321
3568
  .organic-button-pill:disabled,
@@ -3336,7 +3583,7 @@
3336
3583
  .noir-button-pill[aria-disabled="true"]
3337
3584
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3585
 
3339
- [data-ui][data-theme][data-mode] :where(
3586
+ [data-ui][data-mode] :where(
3340
3587
  .luxe-tooltip,
3341
3588
  .luxe-tooltip-top,
3342
3589
  .luxe-tooltip-right,
@@ -3382,9 +3629,9 @@
3382
3629
  .noir-tooltip-right,
3383
3630
  .noir-tooltip-bottom,
3384
3631
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
3632
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
3633
 
3387
- [data-ui][data-theme][data-mode] :where(
3634
+ [data-ui][data-mode] :where(
3388
3635
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
3636
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
3637
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +3670,10 @@
3423
3670
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
3671
  ) { position: absolute; z-index: 20; }
3425
3672
 
3426
- [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%); }
3427
- [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%); }
3428
- [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%); }
3429
- [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%); }
3673
+ [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%); }
3674
+ [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%); }
3675
+ [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%); }
3676
+ [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%); }
3430
3677
 
3431
3678
  :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); }
3432
3679
  :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); }
@@ -3534,6 +3781,29 @@
3534
3781
  --lightningcss-light: initial;
3535
3782
  --lightningcss-dark: ;
3536
3783
  color-scheme: light;
3784
+ --brutal-fallback-bg-rgb: 245 247 250;
3785
+ --brutal-fallback-surface-rgb: 255 255 255;
3786
+ --brutal-fallback-surface-strong-rgb: 252 252 253;
3787
+ --brutal-fallback-surface-soft-rgb: 232 235 240;
3788
+ --brutal-fallback-text-rgb: 17 36 59;
3789
+ --brutal-fallback-text-muted-rgb: 90 104 119;
3790
+ --brutal-fallback-border-rgb: 200 207 217;
3791
+ --brutal-fallback-primary-rgb: 13 59 102;
3792
+ --brutal-fallback-primary-hover-rgb: 11 49 85;
3793
+ --brutal-fallback-primary-text-rgb: 255 255 255;
3794
+ --brutal-fallback-secondary-rgb: 214 43 43;
3795
+ --brutal-fallback-secondary-hover-rgb: 178 35 35;
3796
+ --brutal-fallback-secondary-text-rgb: 255 255 255;
3797
+ --brutal-fallback-accent-rgb: 233 90 90;
3798
+ --brutal-fallback-accent-text-rgb: 0 0 0;
3799
+ --brutal-fallback-success-rgb: 47 125 84;
3800
+ --brutal-fallback-success-text-rgb: 255 255 255;
3801
+ --brutal-fallback-warning-rgb: 164 106 0;
3802
+ --brutal-fallback-warning-text-rgb: 0 0 0;
3803
+ --brutal-fallback-danger-rgb: 198 40 40;
3804
+ --brutal-fallback-danger-text-rgb: 255 255 255;
3805
+ --brutal-fallback-link-rgb: 11 49 85;
3806
+ --brutal-fallback-focus-rgb: 214 43 43;
3537
3807
  --brutal-panel-alpha: .92;
3538
3808
  --brutal-panel-strong-alpha: .98;
3539
3809
  --brutal-panel-soft-alpha: .74;
@@ -3547,6 +3817,29 @@
3547
3817
  --lightningcss-light: ;
3548
3818
  --lightningcss-dark: initial;
3549
3819
  color-scheme: dark;
3820
+ --brutal-fallback-bg-rgb: 8 17 28;
3821
+ --brutal-fallback-surface-rgb: 16 32 48;
3822
+ --brutal-fallback-surface-strong-rgb: 24 49 73;
3823
+ --brutal-fallback-surface-soft-rgb: 11 23 36;
3824
+ --brutal-fallback-text-rgb: 243 247 251;
3825
+ --brutal-fallback-text-muted-rgb: 188 200 213;
3826
+ --brutal-fallback-border-rgb: 71 96 121;
3827
+ --brutal-fallback-primary-rgb: 108 169 227;
3828
+ --brutal-fallback-primary-hover-rgb: 147 193 237;
3829
+ --brutal-fallback-primary-text-rgb: 0 0 0;
3830
+ --brutal-fallback-secondary-rgb: 255 106 106;
3831
+ --brutal-fallback-secondary-hover-rgb: 255 146 146;
3832
+ --brutal-fallback-secondary-text-rgb: 0 0 0;
3833
+ --brutal-fallback-accent-rgb: 255 154 154;
3834
+ --brutal-fallback-accent-text-rgb: 0 0 0;
3835
+ --brutal-fallback-success-rgb: 143 223 182;
3836
+ --brutal-fallback-success-text-rgb: 0 0 0;
3837
+ --brutal-fallback-warning-rgb: 255 210 122;
3838
+ --brutal-fallback-warning-text-rgb: 0 0 0;
3839
+ --brutal-fallback-danger-rgb: 255 143 143;
3840
+ --brutal-fallback-danger-text-rgb: 0 0 0;
3841
+ --brutal-fallback-link-rgb: 165 203 241;
3842
+ --brutal-fallback-focus-rgb: 255 106 106;
3550
3843
  --brutal-panel-alpha: .82;
3551
3844
  --brutal-panel-strong-alpha: .94;
3552
3845
  --brutal-panel-soft-alpha: .58;
@@ -3560,6 +3853,29 @@
3560
3853
  --lightningcss-light: ;
3561
3854
  --lightningcss-dark: initial;
3562
3855
  color-scheme: dark;
3856
+ --brutal-fallback-bg-rgb: 0 0 0;
3857
+ --brutal-fallback-surface-rgb: 6 16 26;
3858
+ --brutal-fallback-surface-strong-rgb: 10 29 48;
3859
+ --brutal-fallback-surface-soft-rgb: 0 0 0;
3860
+ --brutal-fallback-text-rgb: 255 255 255;
3861
+ --brutal-fallback-text-muted-rgb: 238 244 255;
3862
+ --brutal-fallback-border-rgb: 255 255 255;
3863
+ --brutal-fallback-primary-rgb: 102 181 255;
3864
+ --brutal-fallback-primary-hover-rgb: 255 255 255;
3865
+ --brutal-fallback-primary-text-rgb: 0 0 0;
3866
+ --brutal-fallback-secondary-rgb: 255 102 102;
3867
+ --brutal-fallback-secondary-hover-rgb: 255 255 255;
3868
+ --brutal-fallback-secondary-text-rgb: 0 0 0;
3869
+ --brutal-fallback-accent-rgb: 255 170 170;
3870
+ --brutal-fallback-accent-text-rgb: 0 0 0;
3871
+ --brutal-fallback-success-rgb: 0 255 144;
3872
+ --brutal-fallback-success-text-rgb: 0 0 0;
3873
+ --brutal-fallback-warning-rgb: 255 212 0;
3874
+ --brutal-fallback-warning-text-rgb: 0 0 0;
3875
+ --brutal-fallback-danger-rgb: 255 92 92;
3876
+ --brutal-fallback-danger-text-rgb: 0 0 0;
3877
+ --brutal-fallback-link-rgb: 140 198 255;
3878
+ --brutal-fallback-focus-rgb: 255 255 255;
3563
3879
  --brutal-panel-alpha: 1;
3564
3880
  --brutal-panel-strong-alpha: 1;
3565
3881
  --brutal-panel-soft-alpha: .92;
@@ -3584,15 +3900,42 @@
3584
3900
  --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3585
3901
  --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb);
3586
3902
  --brutal-accent-rgb: var(--usk-accent-rgb);
3587
- --brutal-success-rgb: var(--usk-success-rgb);
3588
- --brutal-warning-rgb: var(--usk-warning-rgb);
3589
- --brutal-danger-rgb: var(--usk-danger-rgb);
3590
- --brutal-link-rgb: var(--usk-link-rgb);
3591
3903
  --brutal-accent-text-rgb: var(--usk-accent-text-rgb);
3904
+ --brutal-success-rgb: var(--usk-success-rgb);
3592
3905
  --brutal-success-text-rgb: var(--usk-success-text-rgb);
3906
+ --brutal-warning-rgb: var(--usk-warning-rgb);
3593
3907
  --brutal-warning-text-rgb: var(--usk-warning-text-rgb);
3908
+ --brutal-danger-rgb: var(--usk-danger-rgb);
3594
3909
  --brutal-danger-text-rgb: var(--usk-danger-text-rgb);
3910
+ --brutal-link-rgb: var(--usk-link-rgb);
3595
3911
  --brutal-focus-rgb: var(--usk-focus-rgb);
3912
+ }
3913
+
3914
+ [data-ui="brutalism"][data-mode] {
3915
+ --usk-native-bg: var(--brutal-bg);
3916
+ --brutal-bg-rgb: var(--usk-bg-rgb, var(--brutal-fallback-bg-rgb));
3917
+ --brutal-surface-rgb: var(--usk-surface-rgb, var(--brutal-fallback-surface-rgb));
3918
+ --brutal-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--brutal-fallback-surface-strong-rgb));
3919
+ --brutal-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--brutal-fallback-surface-soft-rgb));
3920
+ --brutal-text-rgb: var(--usk-text-rgb, var(--brutal-fallback-text-rgb));
3921
+ --brutal-text-muted-rgb: var(--usk-text-muted-rgb, var(--brutal-fallback-text-muted-rgb));
3922
+ --brutal-border-rgb: var(--usk-border-rgb, var(--brutal-fallback-border-rgb));
3923
+ --brutal-primary-rgb: var(--usk-primary-rgb, var(--brutal-fallback-primary-rgb));
3924
+ --brutal-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--brutal-fallback-primary-hover-rgb));
3925
+ --brutal-primary-text-rgb: var(--usk-primary-text-rgb, var(--brutal-fallback-primary-text-rgb));
3926
+ --brutal-secondary-rgb: var(--usk-secondary-rgb, var(--brutal-fallback-secondary-rgb));
3927
+ --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--brutal-fallback-secondary-hover-rgb));
3928
+ --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--brutal-fallback-secondary-text-rgb));
3929
+ --brutal-accent-rgb: var(--usk-accent-rgb, var(--brutal-fallback-accent-rgb));
3930
+ --brutal-accent-text-rgb: var(--usk-accent-text-rgb, var(--brutal-fallback-accent-text-rgb));
3931
+ --brutal-success-rgb: var(--usk-success-rgb, var(--brutal-fallback-success-rgb));
3932
+ --brutal-success-text-rgb: var(--usk-success-text-rgb, var(--brutal-fallback-success-text-rgb));
3933
+ --brutal-warning-rgb: var(--usk-warning-rgb, var(--brutal-fallback-warning-rgb));
3934
+ --brutal-warning-text-rgb: var(--usk-warning-text-rgb, var(--brutal-fallback-warning-text-rgb));
3935
+ --brutal-danger-rgb: var(--usk-danger-rgb, var(--brutal-fallback-danger-rgb));
3936
+ --brutal-danger-text-rgb: var(--usk-danger-text-rgb, var(--brutal-fallback-danger-text-rgb));
3937
+ --brutal-link-rgb: var(--usk-link-rgb, var(--brutal-fallback-link-rgb));
3938
+ --brutal-focus-rgb: var(--usk-focus-rgb, var(--brutal-fallback-focus-rgb));
3596
3939
  --usk-native-surface: var(--brutal-surface);
3597
3940
  --usk-native-surface-strong: var(--brutal-surface-strong);
3598
3941
  --usk-native-surface-soft: var(--brutal-surface-soft);
@@ -3622,6 +3965,57 @@
3622
3965
  --usk-native-border-width: 3px;
3623
3966
  --usk-native-field-gap: .5rem;
3624
3967
  --usk-native-panel-padding: var(--brutal-space-5);
3968
+ --usk-native-control-min-block-size: 3rem;
3969
+ --usk-native-control-padding-block: .74rem;
3970
+ --usk-native-control-padding-inline: 1rem;
3971
+ --usk-native-subcontrol-padding-block: .58rem;
3972
+ --usk-native-subcontrol-padding-inline: .8rem;
3973
+ --usk-native-choice-size: 1.55rem;
3974
+ --usk-native-choice-background: var(--brutal-control-bg);
3975
+ --usk-native-choice-border: 2px solid var(--brutal-border);
3976
+ --usk-native-checkbox-radius: 0;
3977
+ --usk-native-radio-radius: 0;
3978
+ --usk-native-choice-shadow: 4px 4px 0 var(--brutal-border);
3979
+ --usk-native-choice-checked-background: var(--brutal-primary);
3980
+ --usk-native-choice-mark-color: var(--brutal-on-primary);
3981
+ --usk-native-select-indicator-image: linear-gradient(48deg, transparent 50%, var(--brutal-primary) 50%), linear-gradient(132deg, var(--brutal-primary) 50%, transparent 50%);
3982
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
3983
+ --usk-native-select-indicator-position: calc(100% - 1.24rem) 50%, calc(100% - .9rem) 50%;
3984
+ --usk-native-select-padding-inline-end: 2.7rem;
3985
+ --usk-native-range-track-size: .8rem;
3986
+ --usk-native-range-track-background: var(--brutal-surface-soft);
3987
+ --usk-native-range-track-border: 2px solid var(--brutal-border);
3988
+ --usk-native-range-track-radius: 0;
3989
+ --usk-native-range-track-shadow: 4px 4px 0 var(--brutal-border);
3990
+ --usk-native-range-progress-background: var(--brutal-primary);
3991
+ --usk-native-range-thumb-size: 1.45rem;
3992
+ --usk-native-range-thumb-background: var(--brutal-surface-strong);
3993
+ --usk-native-range-thumb-border: 2px solid var(--brutal-border);
3994
+ --usk-native-range-thumb-radius: 0;
3995
+ --usk-native-range-thumb-shadow: 4px 4px 0 var(--brutal-border);
3996
+ --usk-native-progress-size: .95rem;
3997
+ --usk-native-progress-track-background: var(--brutal-surface-soft);
3998
+ --usk-native-progress-track-border: 2px solid var(--brutal-border);
3999
+ --usk-native-progress-track-radius: 0;
4000
+ --usk-native-progress-track-shadow: 4px 4px 0 var(--brutal-border);
4001
+ --usk-native-progress-value-background: var(--brutal-primary);
4002
+ --usk-native-progress-value-radius: 0;
4003
+ --usk-native-progress-value-shadow: 4px 4px 0 var(--brutal-border);
4004
+ --usk-native-meter-optimum-background: var(--brutal-success);
4005
+ --usk-native-meter-suboptimum-background: var(--brutal-warning);
4006
+ --usk-native-meter-critical-background: var(--brutal-danger);
4007
+ --usk-native-file-button-background: var(--brutal-primary);
4008
+ --usk-native-file-button-border: 2px solid var(--brutal-border);
4009
+ --usk-native-file-button-radius: 0;
4010
+ --usk-native-file-button-shadow: 4px 4px 0 var(--brutal-border);
4011
+ --usk-native-color-swatch-border: 2px solid var(--brutal-border);
4012
+ --usk-native-color-swatch-radius: 0;
4013
+ --usk-native-indicator-opacity: .82;
4014
+ --usk-native-indicator-filter: none;
4015
+ --usk-native-scrollbar-size: 1rem;
4016
+ --usk-native-scrollbar-track: var(--brutal-surface-soft);
4017
+ --usk-native-scrollbar-thumb: var(--brutal-primary);
4018
+ --usk-native-scrollbar-radius: 0;
3625
4019
  --brutal-bg: rgb(var(--brutal-bg-rgb));
3626
4020
  --brutal-surface: rgb(var(--brutal-surface-rgb) / var(--brutal-panel-alpha));
3627
4021
  --brutal-surface-strong: rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-strong-alpha));
@@ -3667,7 +4061,7 @@
3667
4061
  }
3668
4062
 
3669
4063
  @supports (color: color-mix(in srgb,black,white)) {
3670
- [data-ui="brutalism"][data-theme][data-mode] {
4064
+ [data-ui="brutalism"][data-mode] {
3671
4065
  --brutal-border: color-mix(in srgb, rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha))), var(--brutal-text) var(--usk-border-text-mix));
3672
4066
  }
3673
4067
  }
@@ -3683,7 +4077,7 @@
3683
4077
  box-sizing: border-box;
3684
4078
  }
3685
4079
 
3686
- [data-ui="brutalism"][data-theme][data-mode] {
4080
+ [data-ui="brutalism"][data-mode] {
3687
4081
  background: var(--brutal-theme-bg);
3688
4082
  background-size: var(--brutal-theme-bg-size);
3689
4083
  }
@@ -3902,7 +4296,7 @@
3902
4296
  background: var(--brutal-card-bg);
3903
4297
  }
3904
4298
 
3905
- .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="brutalism"]) .ui-icon-button {
4299
+ .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="brutalism"]) .ui-icon-button {
3906
4300
  background: var(--brutal-control-bg);
3907
4301
  }
3908
4302
 
@@ -4265,7 +4659,6 @@
4265
4659
  border-radius: var(--brutal-radius-lg);
4266
4660
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4267
4661
  display: grid;
4268
- overflow: hidden;
4269
4662
  }
4270
4663
 
4271
4664
  .brutal-feature-item {
@@ -4399,6 +4792,7 @@
4399
4792
  clip-path: polygon(.52rem 0, 100% 0, 100% calc(100% - .52rem), calc(100% - .52rem) 100%, 0 100%, 0 .52rem);
4400
4793
  justify-content: center;
4401
4794
  justify-self: start;
4795
+ min-block-size: 2.75rem;
4402
4796
  inline-size: min(100%, 14rem);
4403
4797
  min-inline-size: 6rem;
4404
4798
  max-inline-size: 100%;
@@ -4417,13 +4811,13 @@
4417
4811
  border-radius: 0;
4418
4812
  }
4419
4813
 
4420
- [data-ui="brutalism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4814
+ [data-ui="brutalism"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4421
4815
  border: 3px solid var(--brutal-text);
4422
4816
  box-shadow: .26rem .26rem 0 var(--brutal-text);
4423
4817
  border-radius: 0;
4424
4818
  }
4425
4819
 
4426
- [data-ui="brutalism"][data-theme][data-mode] :where(dialog) {
4820
+ [data-ui="brutalism"][data-mode] :where(dialog) {
4427
4821
  border: 3px solid var(--brutal-text);
4428
4822
  box-shadow: .48rem .48rem 0 var(--brutal-text);
4429
4823
  border-radius: 0;
@@ -4439,6 +4833,145 @@
4439
4833
  box-shadow: .12em .12em;
4440
4834
  }
4441
4835
 
4836
+ [data-ui="brutalism"][data-mode] {
4837
+ --usk-native-font-control: var(--brutal-font-mono);
4838
+ --usk-native-control-min-block-size: 2.7rem;
4839
+ --usk-native-control-padding-block: .5rem;
4840
+ --usk-native-control-padding-inline: .72rem;
4841
+ --usk-native-border-width: 4px;
4842
+ --usk-native-radius-sm: 0;
4843
+ --usk-native-radius: 0;
4844
+ --usk-native-radius-lg: 0;
4845
+ --usk-native-shadow: .32rem .32rem 0 var(--brutal-text);
4846
+ --usk-native-shadow-md: .48rem .48rem 0 var(--brutal-primary);
4847
+ --usk-native-focus-ring: 0 0 0 2px var(--brutal-surface-strong), 0 0 0 6px var(--brutal-warning);
4848
+ --usk-native-subcontrol-padding-block: .34rem;
4849
+ --usk-native-subcontrol-padding-inline: .52rem;
4850
+ --usk-native-choice-size: 1.18rem;
4851
+ --usk-native-choice-background: var(--brutal-surface-strong);
4852
+ --usk-native-choice-border: 3px solid var(--brutal-text);
4853
+ --usk-native-checkbox-radius: 0;
4854
+ --usk-native-radio-radius: 0;
4855
+ --usk-native-choice-shadow: .12rem .12rem 0 var(--brutal-primary);
4856
+ --usk-native-choice-checked-background: var(--brutal-primary);
4857
+ --usk-native-choice-mark-color: var(--brutal-on-primary);
4858
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 38%, var(--brutal-warning) 39% 61%, transparent 62%), linear-gradient(135deg, var(--brutal-warning) 0 50%, transparent 51%);
4859
+ --usk-native-select-indicator-size: .7rem .7rem, .7rem .7rem;
4860
+ --usk-native-select-indicator-position: calc(100% - 1.38rem) 50%, calc(100% - .92rem) 50%;
4861
+ --usk-native-select-padding-inline-end: 2.85rem;
4862
+ --usk-native-range-track-size: .92rem;
4863
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-soft) 0 1.05rem, var(--brutal-text) 1.05rem calc(1.05rem + 3px));
4864
+ --usk-native-range-track-border: 3px solid var(--brutal-text);
4865
+ --usk-native-range-track-radius: 0;
4866
+ --usk-native-range-track-shadow: inset 0 0 0 2px var(--brutal-surface-strong);
4867
+ --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .9rem, var(--brutal-warning) .9rem 1.05rem);
4868
+ --usk-native-range-thumb-size: 1.24rem;
4869
+ --usk-native-range-thumb-background: var(--brutal-text);
4870
+ --usk-native-range-thumb-border: 3px solid var(--brutal-warning);
4871
+ --usk-native-range-thumb-radius: 0;
4872
+ --usk-native-range-thumb-shadow: .14rem .14rem 0 var(--brutal-primary);
4873
+ --usk-native-progress-size: 1.22rem;
4874
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-strong) 0 1rem, var(--brutal-text) 1rem calc(1rem + 3px));
4875
+ --usk-native-progress-track-border: 3px solid var(--brutal-text);
4876
+ --usk-native-progress-track-radius: 0;
4877
+ --usk-native-progress-track-shadow: inset 0 0 0 2px var(--brutal-surface-soft);
4878
+ --usk-native-progress-value-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .82rem, var(--brutal-warning) .82rem 1rem);
4879
+ --usk-native-progress-value-radius: 0;
4880
+ --usk-native-progress-value-shadow: inset -3px 0 0 var(--brutal-text);
4881
+ --usk-native-scrollbar-size: 1.25rem;
4882
+ --usk-native-scrollbar-track: repeating-linear-gradient(0deg, var(--brutal-surface-soft) 0 .7rem, var(--brutal-text) .7rem calc(.7rem + 2px));
4883
+ --usk-native-scrollbar-thumb: var(--brutal-primary);
4884
+ --usk-native-scrollbar-radius: 0;
4885
+ }
4886
+
4887
+ .brutal-title {
4888
+ letter-spacing: max(.032em, .5px);
4889
+ margin-block: .75rem;
4890
+ font-weight: 1000;
4891
+ }
4892
+
4893
+ .brutal-label, :where([data-ui="brutalism"]) .ui-label {
4894
+ font-size: .68rem;
4895
+ font-weight: 900;
4896
+ }
4897
+
4898
+ .brutal-button, :where([data-ui="brutalism"]) .ui-button {
4899
+ background: var(--brutal-primary);
4900
+ min-height: 2.7rem;
4901
+ box-shadow: .32rem .32rem 0 var(--brutal-text);
4902
+ border-radius: 0 .08rem 0 0;
4903
+ padding: .5rem .72rem;
4904
+ font-weight: 900;
4905
+ }
4906
+
4907
+ .brutal-input, :where([data-ui="brutalism"]) .ui-input {
4908
+ border-radius: 0 0 .06rem;
4909
+ min-height: 2.55rem;
4910
+ padding: .46rem .64rem;
4911
+ }
4912
+
4913
+ .brutal-card, :where([data-ui="brutalism"]) .ui-card {
4914
+ background: var(--brutal-card-bg);
4915
+ border: 4px solid var(--brutal-text);
4916
+ box-shadow: .42rem .42rem 0 var(--brutal-primary);
4917
+ border-radius: 0;
4918
+ padding: .88rem;
4919
+ }
4920
+
4921
+ .brutal-well {
4922
+ background: repeating-linear-gradient(0deg,rgb(var(--brutal-text-rgb)/.08)0 2px,transparent 2px .65rem),var(--brutal-surface-soft);
4923
+ border: 3px solid var(--brutal-text);
4924
+ box-shadow: inset .5rem 0 0 var(--brutal-warning);
4925
+ }
4926
+
4927
+ .brutal-badge, :where([data-ui="brutalism"]) .ui-badge {
4928
+ border-radius: 0;
4929
+ min-height: 1.55rem;
4930
+ padding: .15rem .42rem;
4931
+ }
4932
+
4933
+ .brutal-alert, :where([data-ui="brutalism"]) .ui-alert {
4934
+ background: var(--brutal-surface-strong);
4935
+ border: 4px solid var(--brutal-text);
4936
+ box-shadow: .28rem .28rem 0 var(--brutal-warning);
4937
+ border-radius: 0;
4938
+ }
4939
+
4940
+ .brutal-progress, :where([data-ui="brutalism"]) .ui-progress {
4941
+ background: repeating-linear-gradient(90deg,var(--brutal-surface-strong)0 1rem,var(--brutal-text) 1rem calc(1rem + 3px));
4942
+ height: 1.22rem;
4943
+ }
4944
+
4945
+ .brutal-table-wrap, :where([data-ui="brutalism"]) .ui-table-wrap {
4946
+ background: var(--brutal-surface-strong);
4947
+ box-shadow: .32rem .32rem 0 var(--brutal-primary);
4948
+ border-radius: 0;
4949
+ }
4950
+
4951
+ .brutal-table th, :where([data-ui="brutalism"]) .ui-table th {
4952
+ background: var(--brutal-text);
4953
+ padding: .48rem .62rem;
4954
+ font-weight: 950;
4955
+ }
4956
+
4957
+ .brutal-table td, :where([data-ui="brutalism"]) .ui-table td {
4958
+ padding: .46rem .6rem;
4959
+ }
4960
+
4961
+ .brutal-nav, .brutal-panel, .brutal-toolbar, .brutal-tooltip, [data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .brutal-card-service, .brutal-feature-strip, .brutal-callout-bar, :where([data-ui="brutalism"]) .ui-nav, :where([data-ui="brutalism"]) .ui-toolbar {
4962
+ border: 4px solid var(--brutal-text);
4963
+ box-shadow: .34rem .34rem 0 var(--brutal-primary);
4964
+ border-radius: 0;
4965
+ }
4966
+
4967
+ .brutal-nav-link, :where([data-ui="brutalism"]) .ui-nav-link {
4968
+ border-inline-start: 3px solid var(--brutal-text);
4969
+ }
4970
+
4971
+ .brutal-progress-bar, :where([data-ui="brutalism"]) .ui-progress-bar {
4972
+ background: repeating-linear-gradient(90deg,var(--brutal-primary)0 .82rem,var(--brutal-warning) .82rem 1rem);
4973
+ }
4974
+
4442
4975
  @media (prefers-reduced-motion: reduce) {
4443
4976
  [data-ui="brutalism"] *, [data-ui="brutalism"] :before, [data-ui="brutalism"] :after {
4444
4977
  scroll-behavior: auto !important;
@@ -4483,4 +5016,59 @@
4483
5016
  color: #000 !important;
4484
5017
  }
4485
5018
  }
5019
+
5020
+ .brutal-input[aria-invalid="true"], .brutal-textarea[aria-invalid="true"], .brutal-select[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-input[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-textarea[aria-invalid="true"], :where([data-ui="brutalism"]) .ui-select[aria-invalid="true"] {
5021
+ border-color: var(--brutal-danger);
5022
+ box-shadow: 3px 3px 0 rgb(var(--brutal-danger-rgb)/.38);
5023
+ }
5024
+
5025
+ .brutal-input[readonly], .brutal-textarea[readonly], :where([data-ui="brutalism"]) .ui-input[readonly], :where([data-ui="brutalism"]) .ui-textarea[readonly] {
5026
+ filter: saturate(.72);
5027
+ opacity: .78;
5028
+ border-style: dashed;
5029
+ }
5030
+
5031
+ .brutal-button-primary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]) {
5032
+ background: var(--brutal-primary);
5033
+ color: var(--brutal-on-primary);
5034
+ border-color: var(--brutal-primary);
5035
+ }
5036
+
5037
+ .brutal-button-secondary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]) {
5038
+ background: var(--brutal-secondary);
5039
+ color: var(--brutal-on-secondary);
5040
+ border-color: var(--brutal-secondary);
5041
+ }
5042
+
5043
+ .brutal-button-danger, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="danger"]) {
5044
+ background: var(--brutal-danger);
5045
+ color: var(--brutal-on-danger);
5046
+ border-color: var(--brutal-danger);
5047
+ }
5048
+
5049
+ .brutal-button-ghost, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="ghost"]) {
5050
+ color: var(--brutal-primary);
5051
+ background: none;
5052
+ border-color: #0000;
5053
+ }
5054
+
5055
+ .brutal-feature-item > .brutal-icon-medallion {
5056
+ font-size: 1.5rem;
5057
+ line-height: 1;
5058
+ }
5059
+
5060
+ .brutal-callout-bar > .brutal-icon-medallion {
5061
+ min-block-size: 4.5rem;
5062
+ min-inline-size: 4.5rem;
5063
+ font-size: 2rem;
5064
+ font-weight: 800;
5065
+ line-height: 1;
5066
+ }
5067
+
5068
+ [data-ui="brutalism"][data-mode] .brutal-button.brutal-button-warning, :where([data-ui="brutalism"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
5069
+ background: var(--brutal-warning);
5070
+ color: var(--brutal-on-warning);
5071
+ border-color: var(--brutal-warning);
5072
+ text-shadow: none;
5073
+ }
4486
5074
  }