ui-style-kit-css 2.3.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +57 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +102 -44
  4. package/STYLE-MAP.md +14 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47898 -15121
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47771 -15122
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47932 -15145
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +3247 -295
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +1229 -231
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2663 -282
  37. package/dist/visual/data-terminal.css +2064 -276
  38. package/dist/visual/editorial-luxe.css +2315 -259
  39. package/dist/visual/industrial-utility.css +3142 -270
  40. package/dist/visual/maximalist.css +2185 -454
  41. package/dist/visual/minimal-saas.css +1503 -398
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1690 -402
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2977 -292
  46. package/dist/visual/retro-glass.css +2625 -299
  47. package/dist/visual/retrofuturism.css +1885 -397
  48. package/dist/visual/tactile.css +2716 -498
  49. package/dist/visual/technical-blueprint.css +2599 -267
  50. package/dist/visual/y2k.css +1906 -309
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/COLOR-THEMES.md +63 -0
  56. package/docs/DEMO-SHOWCASE.md +65 -0
  57. package/docs/ECOSYSTEM.md +4 -4
  58. package/docs/EDITORIAL-LUX.md +75 -0
  59. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  60. package/docs/NATIVE-ELEMENTS.md +23 -17
  61. package/docs/NEO-NOIR.md +94 -0
  62. package/docs/ORGANIC-MODERN.md +91 -0
  63. package/docs/PAPER-EDITORIAL.md +63 -0
  64. package/docs/PUBLISHING.md +31 -10
  65. package/docs/RELEASE-2.4.0.md +88 -0
  66. package/docs/RELEASE-2.4.1.md +35 -0
  67. package/docs/RETRO-GLASS.md +105 -0
  68. package/docs/STYLE-GUIDE.md +41 -26
  69. package/docs/TACTILE.md +38 -0
  70. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  71. package/docs/TOKENS.md +80 -3
  72. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +624 -28
  75. package/package.json +20 -11
  76. package/styles/art-deco.css +1402 -17
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +881 -110
  98. package/styles/bento.css +1182 -113
  99. package/styles/brutalism.css +266 -15
  100. package/styles/clay.css +1307 -72
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +107 -36
  103. package/styles/content-overflow.css +11 -5
  104. package/styles/cyberpunk.css +1856 -51
  105. package/styles/data-terminal.css +1122 -18
  106. package/styles/editorial-luxe.css +581 -17
  107. package/styles/industrial-utility.css +1775 -16
  108. package/styles/interactive-surface-bridge.css +30 -20
  109. package/styles/interactive-surface-theme.css +21 -11
  110. package/styles/maximalist.css +1215 -133
  111. package/styles/minimal-saas.css +465 -93
  112. package/styles/native-elements.css +347 -171
  113. package/styles/neo-noir.css +661 -19
  114. package/styles/neumorphism.css +1021 -149
  115. package/styles/organic-modern.css +693 -23
  116. package/styles/paper-editorial.css +1053 -17
  117. package/styles/retro-glass.css +639 -50
  118. package/styles/retrofuturism.css +948 -60
  119. package/styles/tactile.css +1813 -111
  120. package/styles/technical-blueprint.css +673 -22
  121. package/styles/theme-colors.css +412 -2
  122. package/styles/y2k.css +954 -46
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.1
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -13,13 +13,26 @@
13
13
  ========================================================= */
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
+ /**
17
+ * Optional text inks let bright palette fills retain their color without making
18
+ * text on neutral surfaces unreadable. Initial values preserve preset colors and
19
+ * prevent an outer palette's text override from leaking into a nested UI root.
20
+ */
21
+ :where([data-ui]) {
22
+ --usk-primary-ink: initial;
23
+ --usk-accent-ink: initial;
24
+ }
25
+
16
26
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
27
+ :where([data-ui][data-mode="light"]) {
28
+ /* Keep vivid fills intact while using the darker link role for text treatments. */
29
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
30
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
18
31
  --usk-border-text-mix: 45%;
19
32
  --usk-border-min-alpha: 1;
20
33
  }
21
34
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
35
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
36
  --usk-border-text-mix: 0%;
24
37
  --usk-border-min-alpha: 0;
25
38
  }
@@ -1584,6 +1597,403 @@
1584
1597
  --usk-danger-text-rgb: 0 0 0;
1585
1598
  --usk-focus-rgb: 255 255 255;
1586
1599
  }
1600
+
1601
+ /** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
1602
+ :where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
1603
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
1604
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
1605
+ --usk-bg-rgb: 255 251 232;
1606
+ --usk-surface-rgb: 255 255 255;
1607
+ --usk-surface-strong-rgb: 255 254 245;
1608
+ --usk-surface-soft-rgb: 247 237 187;
1609
+ --usk-text-rgb: 33 29 12;
1610
+ --usk-text-muted-rgb: 100 91 55;
1611
+ --usk-border-rgb: 217 199 111;
1612
+ --usk-primary-rgb: 255 204 0;
1613
+ --usk-primary-hover-rgb: 222 175 0;
1614
+ --usk-primary-text-rgb: 0 0 0;
1615
+ --usk-secondary-rgb: 37 50 78;
1616
+ --usk-secondary-hover-rgb: 25 37 61;
1617
+ --usk-secondary-text-rgb: 255 255 255;
1618
+ --usk-accent-rgb: 255 228 92;
1619
+ --usk-success-rgb: 34 122 75;
1620
+ --usk-warning-rgb: 144 92 0;
1621
+ --usk-danger-rgb: 177 54 54;
1622
+ --usk-link-rgb: 112 79 0;
1623
+ --usk-accent-text-rgb: 0 0 0;
1624
+ --usk-success-text-rgb: 255 255 255;
1625
+ --usk-warning-text-rgb: 255 255 255;
1626
+ --usk-danger-text-rgb: 255 255 255;
1627
+ --usk-focus-rgb: 255 204 0;
1628
+ }
1629
+
1630
+ :where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
1631
+ --usk-bg-rgb: 18 15 3;
1632
+ --usk-surface-rgb: 32 27 7;
1633
+ --usk-surface-strong-rgb: 48 40 10;
1634
+ --usk-surface-soft-rgb: 25 21 5;
1635
+ --usk-text-rgb: 255 249 222;
1636
+ --usk-text-muted-rgb: 207 195 145;
1637
+ --usk-border-rgb: 104 88 31;
1638
+ --usk-primary-rgb: 255 216 59;
1639
+ --usk-primary-hover-rgb: 255 234 130;
1640
+ --usk-primary-text-rgb: 0 0 0;
1641
+ --usk-secondary-rgb: 142 198 255;
1642
+ --usk-secondary-hover-rgb: 182 220 255;
1643
+ --usk-secondary-text-rgb: 0 0 0;
1644
+ --usk-accent-rgb: 255 232 102;
1645
+ --usk-success-rgb: 103 217 151;
1646
+ --usk-warning-rgb: 255 194 62;
1647
+ --usk-danger-rgb: 255 119 119;
1648
+ --usk-link-rgb: 255 232 102;
1649
+ --usk-accent-text-rgb: 0 0 0;
1650
+ --usk-success-text-rgb: 0 0 0;
1651
+ --usk-warning-text-rgb: 0 0 0;
1652
+ --usk-danger-text-rgb: 0 0 0;
1653
+ --usk-focus-rgb: 255 232 102;
1654
+ }
1655
+
1656
+ :where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
1657
+ --usk-bg-rgb: 0 0 0;
1658
+ --usk-surface-rgb: 13 11 0;
1659
+ --usk-surface-strong-rgb: 26 22 0;
1660
+ --usk-surface-soft-rgb: 0 0 0;
1661
+ --usk-text-rgb: 255 255 255;
1662
+ --usk-text-muted-rgb: 255 250 222;
1663
+ --usk-border-rgb: 255 255 255;
1664
+ --usk-primary-rgb: 255 214 0;
1665
+ --usk-primary-hover-rgb: 255 255 255;
1666
+ --usk-primary-text-rgb: 0 0 0;
1667
+ --usk-secondary-rgb: 0 217 255;
1668
+ --usk-secondary-hover-rgb: 255 255 255;
1669
+ --usk-secondary-text-rgb: 0 0 0;
1670
+ --usk-accent-rgb: 255 234 0;
1671
+ --usk-success-rgb: 0 255 144;
1672
+ --usk-warning-rgb: 255 191 0;
1673
+ --usk-danger-rgb: 255 77 77;
1674
+ --usk-link-rgb: 255 234 0;
1675
+ --usk-accent-text-rgb: 0 0 0;
1676
+ --usk-success-text-rgb: 0 0 0;
1677
+ --usk-warning-text-rgb: 0 0 0;
1678
+ --usk-danger-text-rgb: 0 0 0;
1679
+ --usk-focus-rgb: 255 255 255;
1680
+ }
1681
+
1682
+ /** Botanical Green pairs leaf-green actions with restrained berry support. */
1683
+ :where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
1684
+ --usk-bg-rgb: 239 249 242;
1685
+ --usk-surface-rgb: 255 255 255;
1686
+ --usk-surface-strong-rgb: 248 253 249;
1687
+ --usk-surface-soft-rgb: 214 237 220;
1688
+ --usk-text-rgb: 14 38 23;
1689
+ --usk-text-muted-rgb: 75 98 81;
1690
+ --usk-border-rgb: 176 207 185;
1691
+ --usk-primary-rgb: 13 126 66;
1692
+ --usk-primary-hover-rgb: 8 97 50;
1693
+ --usk-primary-text-rgb: 255 255 255;
1694
+ --usk-secondary-rgb: 121 48 88;
1695
+ --usk-secondary-hover-rgb: 91 35 65;
1696
+ --usk-secondary-text-rgb: 255 255 255;
1697
+ --usk-accent-rgb: 64 201 117;
1698
+ --usk-success-rgb: 24 116 65;
1699
+ --usk-warning-rgb: 150 96 0;
1700
+ --usk-danger-rgb: 178 60 70;
1701
+ --usk-link-rgb: 8 97 50;
1702
+ --usk-accent-text-rgb: 0 0 0;
1703
+ --usk-success-text-rgb: 255 255 255;
1704
+ --usk-warning-text-rgb: 255 255 255;
1705
+ --usk-danger-text-rgb: 255 255 255;
1706
+ --usk-focus-rgb: 64 201 117;
1707
+ }
1708
+
1709
+ :where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
1710
+ --usk-bg-rgb: 4 17 9;
1711
+ --usk-surface-rgb: 10 32 18;
1712
+ --usk-surface-strong-rgb: 17 48 28;
1713
+ --usk-surface-soft-rgb: 7 24 14;
1714
+ --usk-text-rgb: 235 252 241;
1715
+ --usk-text-muted-rgb: 173 205 182;
1716
+ --usk-border-rgb: 49 91 63;
1717
+ --usk-primary-rgb: 82 222 139;
1718
+ --usk-primary-hover-rgb: 128 240 169;
1719
+ --usk-primary-text-rgb: 0 0 0;
1720
+ --usk-secondary-rgb: 238 148 199;
1721
+ --usk-secondary-hover-rgb: 255 187 222;
1722
+ --usk-secondary-text-rgb: 0 0 0;
1723
+ --usk-accent-rgb: 107 240 164;
1724
+ --usk-success-rgb: 100 218 149;
1725
+ --usk-warning-rgb: 255 205 91;
1726
+ --usk-danger-rgb: 255 126 137;
1727
+ --usk-link-rgb: 128 240 169;
1728
+ --usk-accent-text-rgb: 0 0 0;
1729
+ --usk-success-text-rgb: 0 0 0;
1730
+ --usk-warning-text-rgb: 0 0 0;
1731
+ --usk-danger-text-rgb: 0 0 0;
1732
+ --usk-focus-rgb: 107 240 164;
1733
+ }
1734
+
1735
+ :where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
1736
+ --usk-bg-rgb: 0 0 0;
1737
+ --usk-surface-rgb: 0 14 5;
1738
+ --usk-surface-strong-rgb: 0 29 11;
1739
+ --usk-surface-soft-rgb: 0 0 0;
1740
+ --usk-text-rgb: 255 255 255;
1741
+ --usk-text-muted-rgb: 238 255 244;
1742
+ --usk-border-rgb: 255 255 255;
1743
+ --usk-primary-rgb: 0 255 112;
1744
+ --usk-primary-hover-rgb: 255 255 255;
1745
+ --usk-primary-text-rgb: 0 0 0;
1746
+ --usk-secondary-rgb: 255 92 178;
1747
+ --usk-secondary-hover-rgb: 255 255 255;
1748
+ --usk-secondary-text-rgb: 0 0 0;
1749
+ --usk-accent-rgb: 103 255 166;
1750
+ --usk-success-rgb: 0 255 117;
1751
+ --usk-warning-rgb: 255 212 0;
1752
+ --usk-danger-rgb: 255 77 91;
1753
+ --usk-link-rgb: 103 255 166;
1754
+ --usk-accent-text-rgb: 0 0 0;
1755
+ --usk-success-text-rgb: 0 0 0;
1756
+ --usk-warning-text-rgb: 0 0 0;
1757
+ --usk-danger-text-rgb: 0 0 0;
1758
+ --usk-focus-rgb: 255 255 255;
1759
+ }
1760
+
1761
+ /** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
1762
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
1763
+ --usk-bg-rgb: 240 244 255;
1764
+ --usk-surface-rgb: 255 255 255;
1765
+ --usk-surface-strong-rgb: 248 250 255;
1766
+ --usk-surface-soft-rgb: 220 229 250;
1767
+ --usk-text-rgb: 14 27 57;
1768
+ --usk-text-muted-rgb: 73 89 123;
1769
+ --usk-border-rgb: 177 195 232;
1770
+ --usk-primary-rgb: 0 82 204;
1771
+ --usk-primary-hover-rgb: 0 61 158;
1772
+ --usk-primary-text-rgb: 255 255 255;
1773
+ --usk-secondary-rgb: 181 57 72;
1774
+ --usk-secondary-hover-rgb: 143 41 54;
1775
+ --usk-secondary-text-rgb: 255 255 255;
1776
+ --usk-accent-rgb: 82 121 255;
1777
+ --usk-success-rgb: 35 121 78;
1778
+ --usk-warning-rgb: 151 96 0;
1779
+ --usk-danger-rgb: 180 55 74;
1780
+ --usk-link-rgb: 0 64 163;
1781
+ --usk-accent-text-rgb: 0 0 0;
1782
+ --usk-success-text-rgb: 255 255 255;
1783
+ --usk-warning-text-rgb: 255 255 255;
1784
+ --usk-danger-text-rgb: 255 255 255;
1785
+ --usk-focus-rgb: 82 121 255;
1786
+ }
1787
+
1788
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
1789
+ --usk-bg-rgb: 4 9 25;
1790
+ --usk-surface-rgb: 10 20 48;
1791
+ --usk-surface-strong-rgb: 16 32 72;
1792
+ --usk-surface-soft-rgb: 7 14 36;
1793
+ --usk-text-rgb: 239 244 255;
1794
+ --usk-text-muted-rgb: 174 188 218;
1795
+ --usk-border-rgb: 49 70 122;
1796
+ --usk-primary-rgb: 111 149 255;
1797
+ --usk-primary-hover-rgb: 164 188 255;
1798
+ --usk-primary-text-rgb: 0 0 0;
1799
+ --usk-secondary-rgb: 255 133 147;
1800
+ --usk-secondary-hover-rgb: 255 173 183;
1801
+ --usk-secondary-text-rgb: 0 0 0;
1802
+ --usk-accent-rgb: 143 170 255;
1803
+ --usk-success-rgb: 105 219 159;
1804
+ --usk-warning-rgb: 255 205 91;
1805
+ --usk-danger-rgb: 255 121 139;
1806
+ --usk-link-rgb: 164 188 255;
1807
+ --usk-accent-text-rgb: 0 0 0;
1808
+ --usk-success-text-rgb: 0 0 0;
1809
+ --usk-warning-text-rgb: 0 0 0;
1810
+ --usk-danger-text-rgb: 0 0 0;
1811
+ --usk-focus-rgb: 143 170 255;
1812
+ }
1813
+
1814
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
1815
+ --usk-bg-rgb: 0 0 0;
1816
+ --usk-surface-rgb: 0 7 22;
1817
+ --usk-surface-strong-rgb: 0 15 44;
1818
+ --usk-surface-soft-rgb: 0 0 0;
1819
+ --usk-text-rgb: 255 255 255;
1820
+ --usk-text-muted-rgb: 239 245 255;
1821
+ --usk-border-rgb: 255 255 255;
1822
+ --usk-primary-rgb: 76 133 255;
1823
+ --usk-primary-hover-rgb: 255 255 255;
1824
+ --usk-primary-text-rgb: 0 0 0;
1825
+ --usk-secondary-rgb: 255 105 125;
1826
+ --usk-secondary-hover-rgb: 255 255 255;
1827
+ --usk-secondary-text-rgb: 0 0 0;
1828
+ --usk-accent-rgb: 132 168 255;
1829
+ --usk-success-rgb: 0 255 144;
1830
+ --usk-warning-rgb: 255 212 0;
1831
+ --usk-danger-rgb: 255 92 112;
1832
+ --usk-link-rgb: 132 168 255;
1833
+ --usk-accent-text-rgb: 0 0 0;
1834
+ --usk-success-text-rgb: 0 0 0;
1835
+ --usk-warning-text-rgb: 0 0 0;
1836
+ --usk-danger-text-rgb: 0 0 0;
1837
+ --usk-focus-rgb: 255 255 255;
1838
+ }
1839
+
1840
+ /** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
1841
+ :where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
1842
+ --usk-bg-rgb: 244 244 242;
1843
+ --usk-surface-rgb: 255 255 255;
1844
+ --usk-surface-strong-rgb: 250 250 248;
1845
+ --usk-surface-soft-rgb: 227 229 225;
1846
+ --usk-text-rgb: 27 29 28;
1847
+ --usk-text-muted-rgb: 86 91 88;
1848
+ --usk-border-rgb: 184 189 185;
1849
+ --usk-primary-rgb: 56 60 58;
1850
+ --usk-primary-hover-rgb: 37 40 38;
1851
+ --usk-primary-text-rgb: 255 255 255;
1852
+ --usk-secondary-rgb: 91 97 93;
1853
+ --usk-secondary-hover-rgb: 69 74 71;
1854
+ --usk-secondary-text-rgb: 255 255 255;
1855
+ --usk-accent-rgb: 184 190 186;
1856
+ --usk-success-rgb: 48 115 79;
1857
+ --usk-warning-rgb: 145 94 0;
1858
+ --usk-danger-rgb: 168 60 60;
1859
+ --usk-link-rgb: 52 60 56;
1860
+ --usk-accent-text-rgb: 0 0 0;
1861
+ --usk-success-text-rgb: 255 255 255;
1862
+ --usk-warning-text-rgb: 255 255 255;
1863
+ --usk-danger-text-rgb: 255 255 255;
1864
+ --usk-focus-rgb: 112 121 116;
1865
+ }
1866
+
1867
+ :where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
1868
+ --usk-bg-rgb: 12 13 13;
1869
+ --usk-surface-rgb: 25 27 26;
1870
+ --usk-surface-strong-rgb: 40 43 41;
1871
+ --usk-surface-soft-rgb: 18 20 19;
1872
+ --usk-text-rgb: 245 246 245;
1873
+ --usk-text-muted-rgb: 189 193 190;
1874
+ --usk-border-rgb: 78 84 80;
1875
+ --usk-primary-rgb: 208 212 209;
1876
+ --usk-primary-hover-rgb: 235 237 235;
1877
+ --usk-primary-text-rgb: 0 0 0;
1878
+ --usk-secondary-rgb: 164 170 166;
1879
+ --usk-secondary-hover-rgb: 194 199 196;
1880
+ --usk-secondary-text-rgb: 0 0 0;
1881
+ --usk-accent-rgb: 230 232 231;
1882
+ --usk-success-rgb: 130 210 165;
1883
+ --usk-warning-rgb: 242 197 112;
1884
+ --usk-danger-rgb: 240 137 137;
1885
+ --usk-link-rgb: 220 224 221;
1886
+ --usk-accent-text-rgb: 0 0 0;
1887
+ --usk-success-text-rgb: 0 0 0;
1888
+ --usk-warning-text-rgb: 0 0 0;
1889
+ --usk-danger-text-rgb: 0 0 0;
1890
+ --usk-focus-rgb: 255 255 255;
1891
+ }
1892
+
1893
+ :where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
1894
+ --usk-bg-rgb: 0 0 0;
1895
+ --usk-surface-rgb: 8 8 8;
1896
+ --usk-surface-strong-rgb: 20 20 20;
1897
+ --usk-surface-soft-rgb: 0 0 0;
1898
+ --usk-text-rgb: 255 255 255;
1899
+ --usk-text-muted-rgb: 245 245 245;
1900
+ --usk-border-rgb: 255 255 255;
1901
+ --usk-primary-rgb: 255 255 255;
1902
+ --usk-primary-hover-rgb: 221 221 221;
1903
+ --usk-primary-text-rgb: 0 0 0;
1904
+ --usk-secondary-rgb: 205 205 205;
1905
+ --usk-secondary-hover-rgb: 255 255 255;
1906
+ --usk-secondary-text-rgb: 0 0 0;
1907
+ --usk-accent-rgb: 245 245 245;
1908
+ --usk-success-rgb: 0 255 144;
1909
+ --usk-warning-rgb: 255 212 0;
1910
+ --usk-danger-rgb: 255 92 92;
1911
+ --usk-link-rgb: 255 255 255;
1912
+ --usk-accent-text-rgb: 0 0 0;
1913
+ --usk-success-text-rgb: 0 0 0;
1914
+ --usk-warning-text-rgb: 0 0 0;
1915
+ --usk-danger-text-rgb: 0 0 0;
1916
+ --usk-focus-rgb: 255 255 255;
1917
+ }
1918
+
1919
+ /** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
1920
+ :where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
1921
+ --usk-bg-rgb: 248 241 233;
1922
+ --usk-surface-rgb: 255 255 255;
1923
+ --usk-surface-strong-rgb: 253 249 245;
1924
+ --usk-surface-soft-rgb: 232 216 202;
1925
+ --usk-text-rgb: 49 36 29;
1926
+ --usk-text-muted-rgb: 102 84 74;
1927
+ --usk-border-rgb: 199 172 154;
1928
+ --usk-primary-rgb: 112 67 48;
1929
+ --usk-primary-hover-rgb: 83 47 34;
1930
+ --usk-primary-text-rgb: 255 255 255;
1931
+ --usk-secondary-rgb: 88 98 78;
1932
+ --usk-secondary-hover-rgb: 66 75 57;
1933
+ --usk-secondary-text-rgb: 255 255 255;
1934
+ --usk-accent-rgb: 190 111 82;
1935
+ --usk-success-rgb: 53 117 76;
1936
+ --usk-warning-rgb: 147 91 0;
1937
+ --usk-danger-rgb: 173 61 55;
1938
+ --usk-link-rgb: 105 60 43;
1939
+ --usk-accent-text-rgb: 0 0 0;
1940
+ --usk-success-text-rgb: 255 255 255;
1941
+ --usk-warning-text-rgb: 255 255 255;
1942
+ --usk-danger-text-rgb: 255 255 255;
1943
+ --usk-focus-rgb: 190 111 82;
1944
+ }
1945
+
1946
+ :where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
1947
+ --usk-bg-rgb: 18 12 9;
1948
+ --usk-surface-rgb: 35 24 19;
1949
+ --usk-surface-strong-rgb: 51 34 26;
1950
+ --usk-surface-soft-rgb: 27 18 14;
1951
+ --usk-text-rgb: 250 241 233;
1952
+ --usk-text-muted-rgb: 205 184 169;
1953
+ --usk-border-rgb: 107 78 61;
1954
+ --usk-primary-rgb: 218 158 124;
1955
+ --usk-primary-hover-rgb: 240 188 156;
1956
+ --usk-primary-text-rgb: 0 0 0;
1957
+ --usk-secondary-rgb: 178 192 157;
1958
+ --usk-secondary-hover-rgb: 207 217 190;
1959
+ --usk-secondary-text-rgb: 0 0 0;
1960
+ --usk-accent-rgb: 235 169 136;
1961
+ --usk-success-rgb: 133 214 164;
1962
+ --usk-warning-rgb: 255 203 100;
1963
+ --usk-danger-rgb: 255 135 128;
1964
+ --usk-link-rgb: 240 188 156;
1965
+ --usk-accent-text-rgb: 0 0 0;
1966
+ --usk-success-text-rgb: 0 0 0;
1967
+ --usk-warning-text-rgb: 0 0 0;
1968
+ --usk-danger-text-rgb: 0 0 0;
1969
+ --usk-focus-rgb: 235 169 136;
1970
+ }
1971
+
1972
+ :where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
1973
+ --usk-bg-rgb: 0 0 0;
1974
+ --usk-surface-rgb: 15 7 3;
1975
+ --usk-surface-strong-rgb: 31 15 7;
1976
+ --usk-surface-soft-rgb: 0 0 0;
1977
+ --usk-text-rgb: 255 255 255;
1978
+ --usk-text-muted-rgb: 255 244 237;
1979
+ --usk-border-rgb: 255 255 255;
1980
+ --usk-primary-rgb: 255 174 128;
1981
+ --usk-primary-hover-rgb: 255 255 255;
1982
+ --usk-primary-text-rgb: 0 0 0;
1983
+ --usk-secondary-rgb: 208 234 166;
1984
+ --usk-secondary-hover-rgb: 255 255 255;
1985
+ --usk-secondary-text-rgb: 0 0 0;
1986
+ --usk-accent-rgb: 255 194 160;
1987
+ --usk-success-rgb: 0 255 144;
1988
+ --usk-warning-rgb: 255 212 0;
1989
+ --usk-danger-rgb: 255 102 96;
1990
+ --usk-link-rgb: 255 194 160;
1991
+ --usk-accent-text-rgb: 0 0 0;
1992
+ --usk-success-text-rgb: 0 0 0;
1993
+ --usk-warning-text-rgb: 0 0 0;
1994
+ --usk-danger-text-rgb: 0 0 0;
1995
+ --usk-focus-rgb: 255 255 255;
1996
+ }
1587
1997
  }
1588
1998
 
1589
1999
 
@@ -1597,7 +2007,8 @@
1597
2007
  ========================================================= */
1598
2008
 
1599
2009
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
2010
+ [data-ui][data-mode] {
2011
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
2012
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
2013
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
2014
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +2045,52 @@
1634
2045
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
2046
  --usk-native-thumb-border: var(--usk-native-primary);
1636
2047
  --usk-native-indicator: var(--usk-native-primary);
2048
+ --usk-native-choice-size: 1.5rem;
2049
+ --usk-native-choice-background: var(--usk-native-control-bg);
2050
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
2051
+ --usk-native-checkbox-radius: .3rem;
2052
+ --usk-native-radio-radius: 50%;
2053
+ --usk-native-choice-shadow: none;
2054
+ --usk-native-choice-checked-background: var(--usk-native-primary);
2055
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
2056
+ --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%);
2057
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
2058
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
2059
+ --usk-native-select-padding-inline-end: 2.5rem;
2060
+ --usk-native-range-track-size: .45rem;
2061
+ --usk-native-range-track-background: var(--usk-native-track);
2062
+ --usk-native-range-track-border: 0 solid transparent;
2063
+ --usk-native-range-track-radius: 999px;
2064
+ --usk-native-range-track-shadow: none;
2065
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
2066
+ --usk-native-range-thumb-size: 1.2rem;
2067
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
2068
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2069
+ --usk-native-range-thumb-radius: 50%;
2070
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
2071
+ --usk-native-progress-size: .9rem;
2072
+ --usk-native-progress-track-background: var(--usk-native-track);
2073
+ --usk-native-progress-track-border: 0 solid transparent;
2074
+ --usk-native-progress-track-radius: 999px;
2075
+ --usk-native-progress-track-shadow: none;
2076
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
2077
+ --usk-native-progress-value-radius: inherit;
2078
+ --usk-native-progress-value-shadow: none;
2079
+ --usk-native-meter-optimum-background: var(--usk-native-success);
2080
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
2081
+ --usk-native-meter-critical-background: var(--usk-native-danger);
2082
+ --usk-native-file-button-background: var(--usk-native-primary);
2083
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
2084
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
2085
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
2086
+ --usk-native-color-swatch-border: 0 solid transparent;
2087
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
2088
+ --usk-native-indicator-opacity: .78;
2089
+ --usk-native-indicator-filter: none;
2090
+ --usk-native-scrollbar-size: .75rem;
2091
+ --usk-native-scrollbar-track: var(--usk-native-track);
2092
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
2093
+ --usk-native-scrollbar-radius: 999px;
1637
2094
  --usk-native-shadow: none;
1638
2095
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
2096
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +2098,7 @@
1641
2098
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
2099
 
1643
2100
  /* 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));
2101
+ --ui-color-bg: var(--usk-native-bg);
1645
2102
  --ui-color-surface: var(--usk-native-surface-strong);
1646
2103
  --ui-color-text: var(--usk-native-text);
1647
2104
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +2112,7 @@
1655
2112
  --ui-motion-easing: var(--usk-motion-easing);
1656
2113
  }
1657
2114
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
2115
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
2116
  color: var(--usk-native-text);
1660
2117
  font-family: var(--usk-native-font-heading);
1661
2118
  line-height: 1.15;
@@ -1663,42 +2120,42 @@
1663
2120
  }
1664
2121
 
1665
2122
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
2123
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
2124
  }
1668
2125
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
2126
+ [data-ui][data-mode] :where(hgroup) {
1670
2127
  display: grid;
1671
2128
  gap: .35rem;
1672
2129
  margin-block: 0 1rem;
1673
2130
  }
1674
2131
 
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); }
2132
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
2133
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
2134
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
2135
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
2136
+ [data-ui][data-mode] :where(p) {
1680
2137
  margin: 0 0 1rem;
1681
2138
  color: var(--usk-native-text-muted);
1682
2139
  line-height: 1.7;
1683
2140
  }
1684
2141
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
2142
+ [data-ui][data-mode] :where(a) {
1686
2143
  color: var(--usk-native-link);
1687
2144
  text-decoration-thickness: .08em;
1688
2145
  text-underline-offset: .18em;
1689
2146
  }
1690
2147
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
2148
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
1692
2149
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
2150
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
2151
  margin: 0 0 1rem;
1695
2152
  padding-left: 1.35rem;
1696
2153
  color: var(--usk-native-text-muted);
1697
2154
  }
1698
2155
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
2156
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
2157
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
2158
+ [data-ui][data-mode] :where(blockquote) {
1702
2159
  margin: 1.25rem 0;
1703
2160
  padding: 1rem 1.25rem;
1704
2161
  color: var(--usk-native-text);
@@ -1707,7 +2164,7 @@
1707
2164
  border-radius: var(--usk-native-radius);
1708
2165
  }
1709
2166
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2167
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
2168
  padding: .15em .35em;
1712
2169
  color: var(--usk-native-text);
1713
2170
  background: var(--usk-native-surface-soft);
@@ -1717,7 +2174,7 @@
1717
2174
  font-size: .92em;
1718
2175
  }
1719
2176
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
2177
+ [data-ui][data-mode] :where(pre) {
1721
2178
  overflow: auto;
1722
2179
  margin: 1rem 0;
1723
2180
  padding: 1rem;
@@ -1727,57 +2184,88 @@
1727
2184
  border-radius: var(--usk-native-radius);
1728
2185
  }
1729
2186
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
2187
+ [data-ui][data-mode] :where(pre code) {
1731
2188
  display: block;
1732
2189
  padding: 0;
1733
2190
  background: transparent;
1734
2191
  border: 0;
1735
2192
  }
1736
2193
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
2194
+ [data-ui][data-mode] :where(hr) {
1738
2195
  height: 1px;
1739
2196
  margin: 2rem 0;
1740
2197
  background: var(--usk-native-border);
1741
2198
  border: 0;
1742
2199
  }
1743
2200
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
2201
+ [data-ui][data-mode] :where(mark) {
1745
2202
  padding-inline: .15em;
1746
2203
  color: var(--usk-native-text);
1747
2204
  background: rgb(var(--usk-warning-rgb) / .32);
1748
2205
  border-radius: .2em;
1749
2206
  }
1750
2207
 
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; }
2208
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
2209
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
2210
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
2211
+ [data-ui][data-mode] :where(abbr[title]) {
1755
2212
  text-decoration: underline dotted var(--usk-native-primary);
1756
2213
  text-underline-offset: .18em;
1757
2214
  cursor: help;
1758
2215
  }
1759
2216
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
2217
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
2218
  max-width: 100%;
1762
2219
  }
1763
2220
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2221
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2222
+
2223
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
2224
+ [data-ui][data-mode] audio[controls] {
2225
+ display: block;
2226
+ box-sizing: border-box;
2227
+ inline-size: 100%;
2228
+ min-inline-size: 0;
2229
+ block-size: 60px;
2230
+ padding: 3px;
2231
+ background: var(--usk-native-control-bg);
2232
+ color: var(--usk-native-text);
2233
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2234
+ border-radius: var(--usk-native-radius);
2235
+ box-shadow: var(--usk-native-shadow);
2236
+ accent-color: var(--usk-native-primary);
2237
+ color-scheme: light;
2238
+ }
2239
+ [data-ui][data-mode="dark"] audio[controls],
2240
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
2241
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
2242
+ border-radius: var(--usk-native-radius);
2243
+ background: transparent;
2244
+ }
2245
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
2246
+ background: var(--usk-native-control-bg);
2247
+ color: var(--usk-native-text);
2248
+ }
2249
+ [data-ui][data-mode] audio[controls]:focus-visible {
2250
+ outline: 2px solid var(--usk-native-focus);
2251
+ outline-offset: 2px;
2252
+ }
1765
2253
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
2254
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
2255
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
2256
+ [data-ui][data-mode] :where(figcaption) {
1769
2257
  margin-top: .5rem;
1770
2258
  color: var(--usk-native-text-muted);
1771
2259
  font-size: .9rem;
1772
2260
  }
1773
2261
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
2262
+ [data-ui][data-mode] :where(form) {
1775
2263
  display: grid;
1776
2264
  gap: var(--usk-native-field-gap);
1777
2265
  min-inline-size: 0;
1778
2266
  }
1779
2267
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
2268
+ [data-ui][data-mode] :where(fieldset) {
1781
2269
  display: grid;
1782
2270
  gap: .9rem;
1783
2271
  min-inline-size: 0;
@@ -1788,30 +2276,30 @@
1788
2276
  border-radius: var(--usk-native-radius);
1789
2277
  }
1790
2278
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
2279
+ [data-ui][data-mode] :where(legend) {
1792
2280
  padding-inline: .35rem;
1793
2281
  color: var(--usk-native-text);
1794
2282
  font-weight: 900;
1795
2283
  }
1796
2284
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
2285
+ [data-ui][data-mode] :where(label) {
1798
2286
  color: var(--usk-native-text);
1799
2287
  font-weight: 750;
1800
2288
  }
1801
2289
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
2290
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
2291
  display: grid;
1804
2292
  gap: var(--usk-native-field-gap);
1805
2293
  align-content: start;
1806
2294
  }
1807
2295
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
2296
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
2297
  display: inline-flex;
1810
2298
  gap: var(--usk-native-field-gap);
1811
2299
  align-items: center;
1812
2300
  }
1813
2301
 
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) {
2302
+ [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
2303
  width: 100%;
1816
2304
  min-block-size: var(--usk-native-control-min-block-size);
1817
2305
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +2310,44 @@
1822
2310
  font: inherit;
1823
2311
  }
1824
2312
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
2313
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
2314
  color-scheme: inherit;
1827
2315
  accent-color: var(--usk-native-primary);
1828
2316
  }
1829
2317
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
2318
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
2319
  color: var(--usk-native-text-muted);
1832
2320
  opacity: .78;
1833
2321
  }
1834
2322
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
2323
+ [data-ui][data-mode] :where(textarea) {
1836
2324
  min-height: 7rem;
1837
2325
  resize: vertical;
1838
2326
  }
1839
2327
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
2328
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
2329
+
2330
+ [data-ui][data-mode] :where(select:not([multiple])) {
2331
+ -webkit-appearance: none;
2332
+ appearance: none;
2333
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
2334
+ background-image: var(--usk-native-select-indicator-image);
2335
+ background-repeat: no-repeat;
2336
+ background-position: var(--usk-native-select-indicator-position);
2337
+ background-size: var(--usk-native-select-indicator-size);
2338
+ }
2339
+
2340
+ [data-ui][data-mode] :where(select[multiple]) {
2341
+ padding-inline-end: var(--usk-native-control-padding-inline);
2342
+ background-image: none;
2343
+ }
2344
+
2345
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
2346
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
2347
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
2348
+ }
1841
2349
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
2350
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
2351
  -webkit-appearance: none;
1844
2352
  appearance: none;
1845
2353
  box-sizing: border-box;
@@ -1848,7 +2356,7 @@
1848
2356
  font: inherit;
1849
2357
  }
1850
2358
 
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])) {
2359
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
2360
  color: var(--usk-native-on-primary);
1853
2361
  background: var(--usk-native-primary);
1854
2362
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +2367,56 @@
1859
2367
  }
1860
2368
 
1861
2369
  /* 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"]) {
2370
+ [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
2371
  display: inline-flex;
1864
2372
  align-items: center;
1865
2373
  justify-content: center;
1866
2374
  gap: .55rem;
1867
2375
  }
1868
2376
 
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 {
2377
+ [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
2378
  flex: 0 0 1em;
1871
2379
  }
1872
2380
 
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) {
2381
+ [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
2382
  background: var(--usk-native-primary-hover);
1875
2383
  border-color: var(--usk-native-primary-hover);
1876
2384
  }
1877
2385
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
2386
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
2387
+ -webkit-appearance: none;
2388
+ appearance: none;
2389
+ inline-size: var(--usk-native-choice-size);
2390
+ block-size: var(--usk-native-choice-size);
2391
+ background: var(--usk-native-choice-background);
2392
+ border: var(--usk-native-choice-border);
2393
+ box-shadow: var(--usk-native-choice-shadow);
1881
2394
  accent-color: var(--usk-native-primary);
1882
2395
  }
1883
2396
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
2397
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
2398
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
2399
+
2400
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
2401
+ background-color: var(--usk-native-choice-checked-background);
2402
+ 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%);
2403
+ }
2404
+
2405
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
2406
+ border-color: var(--usk-native-primary);
2407
+ filter: brightness(1.04);
2408
+ }
2409
+
2410
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2411
+ filter: brightness(.94);
2412
+ transform: scale(.94);
2413
+ }
2414
+
2415
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2416
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2417
+ }
2418
+
2419
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2420
  -webkit-appearance: none;
1886
2421
  appearance: none;
1887
2422
  width: 100%;
@@ -1890,40 +2425,50 @@
1890
2425
  accent-color: var(--usk-native-primary);
1891
2426
  }
1892
2427
 
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;
2428
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2429
+ block-size: var(--usk-native-range-track-size);
2430
+ background: var(--usk-native-range-track-background);
2431
+ border: var(--usk-native-range-track-border);
2432
+ border-radius: var(--usk-native-range-track-radius);
2433
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2434
  }
1898
2435
 
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;
2436
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2437
+ block-size: var(--usk-native-range-track-size);
2438
+ background: var(--usk-native-range-track-background);
2439
+ border: var(--usk-native-range-track-border);
2440
+ border-radius: var(--usk-native-range-track-radius);
2441
+ box-shadow: var(--usk-native-range-track-shadow);
2442
+ }
2443
+
2444
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2445
+ block-size: var(--usk-native-range-track-size);
2446
+ background: var(--usk-native-range-progress-background);
2447
+ border-radius: var(--usk-native-range-track-radius);
1903
2448
  }
1904
2449
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2450
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2451
  -webkit-appearance: none;
1907
2452
  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);
2453
+ inline-size: var(--usk-native-range-thumb-size);
2454
+ block-size: var(--usk-native-range-thumb-size);
2455
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2456
+ background: var(--usk-native-range-thumb-background);
2457
+ border: var(--usk-native-range-thumb-border);
2458
+ border-radius: var(--usk-native-range-thumb-radius);
2459
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2460
  }
1916
2461
 
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);
2462
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2463
+ inline-size: var(--usk-native-range-thumb-size);
2464
+ block-size: var(--usk-native-range-thumb-size);
2465
+ background: var(--usk-native-range-thumb-background);
2466
+ border: var(--usk-native-range-thumb-border);
2467
+ border-radius: var(--usk-native-range-thumb-radius);
2468
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2469
  }
1925
2470
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2471
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2472
  inline-size: 3rem;
1928
2473
  block-size: 2.4rem;
1929
2474
  padding: .2rem;
@@ -1932,84 +2477,86 @@
1932
2477
  border-radius: var(--usk-native-radius-sm);
1933
2478
  }
1934
2479
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2480
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2481
  padding: 0;
1937
2482
  }
1938
2483
 
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);
2484
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2485
+ border: var(--usk-native-color-swatch-border);
2486
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2487
  }
1943
2488
 
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);
2489
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2490
+ border: var(--usk-native-color-swatch-border);
2491
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2492
  }
1948
2493
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2494
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2495
 
1951
2496
  /* 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 {
2497
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2498
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2499
  margin-inline-end: .75rem;
1955
2500
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2501
  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);
2502
+ background: var(--usk-native-file-button-background);
2503
+ border: var(--usk-native-file-button-border);
2504
+ border-radius: var(--usk-native-file-button-radius);
2505
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2506
  font-weight: 800;
1961
2507
  cursor: pointer;
1962
2508
  }
1963
2509
 
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 {
2510
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2511
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2512
  background: var(--usk-native-primary-hover);
1967
2513
  border-color: var(--usk-native-primary-hover);
1968
2514
  }
1969
2515
 
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 {
2516
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2517
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2518
  box-shadow: var(--usk-native-focus-ring);
1973
2519
  }
1974
2520
 
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 {
2521
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2522
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2523
  filter: brightness(.96);
1978
2524
  }
1979
2525
 
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 {
2526
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2527
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2528
  color: var(--usk-native-text-muted);
1983
2529
  background: var(--usk-native-surface-soft);
1984
2530
  border-color: var(--usk-native-border);
1985
2531
  cursor: not-allowed;
1986
2532
  }
1987
2533
 
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) {
2534
+ [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
2535
  background: var(--usk-native-surface-soft);
1990
2536
  }
1991
2537
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2538
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2539
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2540
  }
1995
2541
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2542
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2543
  border-color: var(--usk-native-success);
1998
2544
  }
1999
2545
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2546
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2547
  border-color: var(--usk-native-danger);
2002
2548
  }
2003
2549
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2550
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2551
+ 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
2552
  accent-color: var(--usk-native-warning);
2006
2553
  }
2007
2554
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2555
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2556
  filter: brightness(.96);
2010
2557
  }
2011
2558
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2559
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2560
  color: var(--usk-native-text-muted);
2014
2561
  background: var(--usk-native-surface-soft);
2015
2562
  border-color: var(--usk-native-border);
@@ -2018,37 +2565,36 @@
2018
2565
  cursor: not-allowed;
2019
2566
  }
2020
2567
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2568
+ [data-ui][data-mode] :where(table) {
2022
2569
  width: 100%;
2023
2570
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2571
  background: var(--usk-native-surface);
2026
2572
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2573
  border-radius: var(--usk-native-radius);
2028
2574
  border-collapse: collapse;
2029
2575
  }
2030
2576
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2577
+ [data-ui][data-mode] :where(caption) {
2032
2578
  caption-side: bottom;
2033
2579
  padding: .75rem;
2034
2580
  color: var(--usk-native-text-muted);
2035
2581
  font-size: .9rem;
2036
2582
  }
2037
2583
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2584
+ [data-ui][data-mode] :where(th, td) {
2039
2585
  padding: .8rem .9rem;
2040
2586
  text-align: left;
2041
2587
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2588
  }
2043
2589
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2590
+ [data-ui][data-mode] :where(th) {
2045
2591
  color: var(--usk-native-text);
2046
2592
  background: var(--usk-native-surface-soft);
2047
2593
  }
2048
2594
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2595
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2596
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2597
+ [data-ui][data-mode] :where(details) {
2052
2598
  margin: 1rem 0;
2053
2599
  padding: .9rem 1rem;
2054
2600
  color: var(--usk-native-text);
@@ -2057,13 +2603,13 @@
2057
2603
  border-radius: var(--usk-native-radius);
2058
2604
  }
2059
2605
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2606
+ [data-ui][data-mode] :where(summary) {
2061
2607
  color: var(--usk-native-text);
2062
2608
  font-weight: 900;
2063
2609
  cursor: pointer;
2064
2610
  }
2065
2611
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2612
+ [data-ui][data-mode] :where(dialog) {
2067
2613
  max-width: min(92vw, 42rem);
2068
2614
  padding: 0;
2069
2615
  color: var(--usk-native-text);
@@ -2073,47 +2619,68 @@
2073
2619
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2620
  }
2075
2621
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2622
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2623
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2624
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2625
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2626
+ [data-ui][data-mode] :where(progress, meter) {
2627
+ -webkit-appearance: none;
2628
+ appearance: none;
2081
2629
  width: 100%;
2082
- min-height: .9rem;
2630
+ min-height: var(--usk-native-progress-size);
2083
2631
  accent-color: var(--usk-native-primary);
2084
2632
  }
2085
2633
 
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;
2634
+ [data-ui][data-mode] :where(progress:not([value])) {
2635
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2636
+ background-size: 200% 100%;
2637
+ border: var(--usk-native-progress-track-border);
2638
+ border-radius: var(--usk-native-progress-track-radius);
2639
+ box-shadow: var(--usk-native-progress-track-shadow);
2640
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2641
  }
2091
2642
 
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;
2643
+ @keyframes usk-native-progress-indeterminate {
2644
+ to { background-position: -2rem 0; }
2096
2645
  }
2097
2646
 
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;
2647
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2648
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2649
+ background: var(--usk-native-progress-track-background);
2650
+ border: var(--usk-native-progress-track-border);
2651
+ border-radius: var(--usk-native-progress-track-radius);
2652
+ box-shadow: var(--usk-native-progress-track-shadow);
2653
+ }
2654
+
2655
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2656
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2657
+ background: var(--usk-native-progress-value-background);
2658
+ border-radius: var(--usk-native-progress-value-radius);
2659
+ box-shadow: var(--usk-native-progress-value-shadow);
2660
+ }
2661
+
2662
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2663
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2664
+ background: var(--usk-native-progress-value-background);
2665
+ border-radius: var(--usk-native-progress-value-radius);
2666
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2667
  }
2103
2668
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2669
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2670
+
2671
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2672
+ background: var(--usk-native-meter-suboptimum-background);
2106
2673
  }
2107
2674
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2675
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2676
+ background: var(--usk-native-meter-critical-background);
2110
2677
  }
2111
2678
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2679
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2680
  color: var(--usk-native-text);
2114
2681
  }
2115
2682
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2683
+ [data-ui][data-mode] :where(article, aside) {
2117
2684
  padding: var(--usk-native-panel-padding);
2118
2685
  color: var(--usk-native-text);
2119
2686
  background: var(--usk-native-card-bg);
@@ -2122,113 +2689,132 @@
2122
2689
  box-shadow: var(--usk-native-shadow);
2123
2690
  }
2124
2691
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2692
+ [data-ui][data-mode] :where(dl) {
2126
2693
  margin: 0 0 1rem;
2127
2694
  color: var(--usk-native-text-muted);
2128
2695
  }
2129
2696
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2697
+ [data-ui][data-mode] :where(dt) {
2131
2698
  color: var(--usk-native-text);
2132
2699
  font-weight: 900;
2133
2700
  }
2134
2701
 
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 {
2702
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2703
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2704
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2705
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2706
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2707
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2708
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2709
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2710
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2711
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2712
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2713
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2714
+ [data-ui][data-mode] :where(datalist) { display: none; }
2715
+
2716
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2717
  color: var(--usk-native-indicator);
2151
2718
  }
2152
2719
 
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;
2720
+ [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 {
2721
+ opacity: var(--usk-native-indicator-opacity);
2722
+ filter: var(--usk-native-indicator-filter);
2155
2723
  accent-color: var(--usk-native-indicator);
2156
2724
  }
2157
2725
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2726
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2727
  accent-color: var(--usk-native-indicator);
2160
2728
  }
2161
2729
 
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 {
2730
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2731
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2732
  opacity: .72;
2165
2733
  }
2166
2734
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2735
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2736
  color: var(--usk-native-indicator);
2737
+ opacity: var(--usk-native-indicator-opacity);
2738
+ filter: var(--usk-native-indicator-filter);
2169
2739
  }
2170
2740
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2741
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2742
  outline: 3px solid var(--usk-native-focus);
2173
2743
  outline-offset: 3px;
2174
2744
  box-shadow: var(--usk-native-focus-ring);
2175
2745
  }
2176
2746
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2747
+ [data-ui][data-mode] :where(:target) {
2178
2748
  scroll-margin-top: 6rem;
2179
2749
  outline: 3px solid var(--usk-native-focus);
2180
2750
  outline-offset: .35rem;
2181
2751
  }
2182
2752
 
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; }
2753
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2754
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2755
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2756
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2757
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2758
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2759
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2760
 
2191
2761
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2762
+ [data-ui][data-mode] {
2193
2763
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2764
  }
2195
2765
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2766
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2767
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2768
  }
2199
2769
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2770
+ [data-ui][data-mode] :where(mark) {
2201
2771
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2772
  }
2203
2773
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2774
+ [data-ui][data-mode] :where(fieldset) {
2205
2775
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2776
  }
2207
2777
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2778
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2779
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2780
  }
2211
2781
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2782
+ [data-ui][data-mode] :where(th) {
2213
2783
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2784
  }
2215
2785
  }
2216
2786
 
2217
2787
  @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 {
2788
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2789
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2790
  transition-duration: 1ms !important;
2221
2791
  }
2792
+
2793
+ [data-ui][data-mode] :where(progress:not([value])) {
2794
+ animation: none;
2795
+ }
2796
+ }
2797
+
2798
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2799
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2800
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2801
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2802
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2803
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2804
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2805
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2806
+ box-shadow: none;
2807
+ filter: none;
2222
2808
  }
2223
2809
 
2224
2810
  @media (forced-colors: active) {
2225
2811
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2812
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2813
  forced-color-adjust: auto;
2228
2814
  }
2229
2815
  }
2230
2816
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2817
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2818
  border-color: Mark;
2233
2819
  }
2234
2820
  }
@@ -2244,7 +2830,7 @@
2244
2830
  ========================================================= */
2245
2831
 
2246
2832
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2833
+ [data-ui][data-mode] :where(
2248
2834
  h1,
2249
2835
  h2,
2250
2836
  h3,
@@ -2261,6 +2847,9 @@
2261
2847
  label,
2262
2848
  legend,
2263
2849
  summary,
2850
+ strong,
2851
+ small,
2852
+ em,
2264
2853
  code,
2265
2854
  kbd,
2266
2855
  samp,
@@ -2270,10 +2859,11 @@
2270
2859
  ) {
2271
2860
  max-inline-size: 100%;
2272
2861
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2862
+ overflow-wrap: break-word;
2863
+ word-break: normal;
2274
2864
  }
2275
2865
 
2276
- [data-ui][data-theme][data-mode] :where(
2866
+ [data-ui][data-mode] :where(
2277
2867
  [class~="saas-surface"],
2278
2868
  [class~="saas-surface-sm"],
2279
2869
  [class~="saas-surface-lg"],
@@ -2395,13 +2985,12 @@
2395
2985
  [class~="rg-alert"],
2396
2986
  [class~="rg-table-wrap"],
2397
2987
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
2988
+ ), [data-ui]:where([data-ui="neumorphism"])[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
2989
  max-inline-size: 100%;
2400
2990
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2991
  }
2403
2992
 
2404
- [data-ui][data-theme][data-mode] :where(
2993
+ [data-ui][data-mode] :where(
2405
2994
  [class~="saas-button"],
2406
2995
  [class~="saas-icon-button"],
2407
2996
  [class~="saas-badge"],
@@ -2446,13 +3035,15 @@
2446
3035
  [class~="rg-icon-button"],
2447
3036
  [class~="rg-badge"],
2448
3037
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
3038
+ ), [data-ui]:where([data-ui="neumorphism"])[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
3039
  max-inline-size: 100%;
2451
3040
  min-inline-size: 0;
3041
+ overflow-wrap: break-word;
3042
+ word-break: normal;
2452
3043
  white-space: normal;
2453
3044
  }
2454
3045
 
2455
- [data-ui][data-theme][data-mode] :where(
3046
+ [data-ui][data-mode] :where(
2456
3047
  .saas-button,
2457
3048
  .saas-icon-button,
2458
3049
  .saas-button-pill,
@@ -2486,7 +3077,7 @@
2486
3077
  .rg-button,
2487
3078
  .rg-icon-button,
2488
3079
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
3080
+ ), [data-ui]:where([data-ui="neumorphism"])[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
3081
  box-sizing: border-box;
2491
3082
  display: inline-flex;
2492
3083
  align-items: center;
@@ -2498,7 +3089,7 @@
2498
3089
  vertical-align: middle;
2499
3090
  }
2500
3091
 
2501
- [data-ui][data-theme][data-mode] :where(
3092
+ [data-ui][data-mode] :where(
2502
3093
  .saas-button-pill,
2503
3094
  .bento-button-pill,
2504
3095
  .max-button-pill,
@@ -2521,7 +3112,8 @@
2521
3112
  font-weight: 850;
2522
3113
  text-align: center;
2523
3114
  text-decoration: none;
2524
- overflow-wrap: anywhere;
3115
+ overflow-wrap: break-word;
3116
+ word-break: normal;
2525
3117
  white-space: normal;
2526
3118
  cursor: pointer;
2527
3119
  transition:
@@ -2555,7 +3147,7 @@
2555
3147
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
3148
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
3149
 
2558
- [data-ui][data-theme][data-mode] :where(
3150
+ [data-ui][data-mode] :where(
2559
3151
  .saas-button-pill:active,
2560
3152
  .saas-button-pill[aria-pressed="true"],
2561
3153
  .bento-button-pill:active,
@@ -2594,7 +3186,7 @@
2594
3186
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
3187
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
3188
 
2597
- [data-ui][data-theme][data-mode] :where(
3189
+ [data-ui][data-mode] :where(
2598
3190
  .saas-button-pill:disabled,
2599
3191
  .saas-button-pill[aria-disabled="true"],
2600
3192
  .bento-button-pill:disabled,
@@ -2624,7 +3216,7 @@
2624
3216
  transform: none;
2625
3217
  }
2626
3218
 
2627
- [data-ui][data-theme][data-mode] :where(
3219
+ [data-ui][data-mode] :where(
2628
3220
  .saas-tooltip,
2629
3221
  .saas-tooltip-top,
2630
3222
  .saas-tooltip-right,
@@ -2683,16 +3275,17 @@
2683
3275
  ) {
2684
3276
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
3277
  text-align: start;
2686
- overflow-wrap: anywhere;
3278
+ overflow-wrap: break-word;
3279
+ word-break: normal;
2687
3280
  }
2688
3281
 
2689
3282
  /* 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]) {
3283
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
3284
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
3285
  position: relative;
2693
3286
  }
2694
3287
 
2695
- [data-ui][data-theme][data-mode] :where(
3288
+ [data-ui][data-mode] :where(
2696
3289
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
3290
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
3291
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +3335,10 @@
2742
3335
  z-index: 20;
2743
3336
  }
2744
3337
 
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%); }
3338
+ [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%); }
3339
+ [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%); }
3340
+ [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%); }
3341
+ [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
3342
 
2750
3343
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
3344
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2811,7 +3404,7 @@
2811
3404
  .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
3405
 
2813
3406
  .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
- color: var(--usk-native-primary);
3407
+ color: var(--usk-primary-ink, var(--usk-native-primary));
2815
3408
  background: transparent;
2816
3409
  border-color: var(--usk-native-border);
2817
3410
  }
@@ -2895,15 +3488,77 @@
2895
3488
  }
2896
3489
  }
2897
3490
 
2898
- /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
- /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
- @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
2902
- .luxe-surface,
2903
- .luxe-surface-sm,
2904
- .luxe-surface-lg,
2905
- .luxe-card,
2906
- .luxe-card-service,
3491
+ /**
3492
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3493
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3494
+ * The root attributes intentionally raise specificity within the preset layer
3495
+ * so later style-specific defaults cannot collapse the number and caption.
3496
+ */
3497
+ @layer ui-style-kit.presets {
3498
+ [data-ui][data-mode] :where(
3499
+ .saas-badge-seal,
3500
+ .bento-badge-seal,
3501
+ .max-badge-seal,
3502
+ .bau-badge-seal,
3503
+ .tactile-badge-seal,
3504
+ .neo-badge-seal,
3505
+ .retro-badge-seal,
3506
+ .brutal-badge-seal,
3507
+ .cyber-badge-seal,
3508
+ .y2k-badge-seal,
3509
+ .rg-badge-seal,
3510
+ .luxe-badge-seal,
3511
+ .organic-badge-seal,
3512
+ .utility-badge-seal,
3513
+ .blueprint-badge-seal,
3514
+ .deco-badge-seal,
3515
+ .clay-badge-seal,
3516
+ .terminal-badge-seal,
3517
+ .paper-badge-seal,
3518
+ .noir-badge-seal
3519
+ ) > strong {
3520
+ color: inherit;
3521
+ font-size: 1.5rem;
3522
+ line-height: .9;
3523
+ }
3524
+
3525
+ [data-ui][data-mode] :where(
3526
+ .saas-badge-seal,
3527
+ .bento-badge-seal,
3528
+ .max-badge-seal,
3529
+ .bau-badge-seal,
3530
+ .tactile-badge-seal,
3531
+ .neo-badge-seal,
3532
+ .retro-badge-seal,
3533
+ .brutal-badge-seal,
3534
+ .cyber-badge-seal,
3535
+ .y2k-badge-seal,
3536
+ .rg-badge-seal,
3537
+ .luxe-badge-seal,
3538
+ .organic-badge-seal,
3539
+ .utility-badge-seal,
3540
+ .blueprint-badge-seal,
3541
+ .deco-badge-seal,
3542
+ .clay-badge-seal,
3543
+ .terminal-badge-seal,
3544
+ .paper-badge-seal,
3545
+ .noir-badge-seal
3546
+ ) > small {
3547
+ color: inherit;
3548
+ font-size: .8125rem;
3549
+ line-height: 1;
3550
+ }
3551
+ }
3552
+
3553
+ /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
3554
+ /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
3555
+ @layer ui-style-kit.components {
3556
+ [data-ui][data-mode] :where(
3557
+ .luxe-surface,
3558
+ .luxe-surface-sm,
3559
+ .luxe-surface-lg,
3560
+ .luxe-card,
3561
+ .luxe-card-service,
2907
3562
  .luxe-card-feature,
2908
3563
  .luxe-panel,
2909
3564
  .luxe-toolbar,
@@ -3061,13 +3716,12 @@
3061
3716
  .noir-feature-item,
3062
3717
  .noir-callout-bar,
3063
3718
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
3719
+ ), [data-ui]:where([data-ui="neumorphism"])[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
3720
  max-inline-size: 100%;
3066
3721
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3722
  }
3069
3723
 
3070
- [data-ui][data-theme][data-mode] :where(
3724
+ [data-ui][data-mode] :where(
3071
3725
  .luxe-button,
3072
3726
  .luxe-icon-button,
3073
3727
  .luxe-button-cut,
@@ -3140,13 +3794,15 @@
3140
3794
  .noir-badge-seal,
3141
3795
  .noir-nav-link,
3142
3796
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
3797
+ ), [data-ui]:where([data-ui="neumorphism"])[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
3798
  max-inline-size: 100%;
3145
3799
  min-inline-size: 0;
3800
+ overflow-wrap: break-word;
3801
+ word-break: normal;
3146
3802
  white-space: normal;
3147
3803
  }
3148
3804
 
3149
- [data-ui][data-theme][data-mode] :where(
3805
+ [data-ui][data-mode] :where(
3150
3806
  .luxe-button,
3151
3807
  .luxe-icon-button,
3152
3808
  .luxe-button-pill,
@@ -3174,7 +3830,7 @@
3174
3830
  .noir-button,
3175
3831
  .noir-icon-button,
3176
3832
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="neumorphism"])[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) {
3833
+ ), [data-ui]:where([data-ui="neumorphism"])[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
3834
  box-sizing: border-box;
3179
3835
  display: inline-flex;
3180
3836
  align-items: center;
@@ -3186,7 +3842,7 @@
3186
3842
  vertical-align: middle;
3187
3843
  }
3188
3844
 
3189
- [data-ui][data-theme][data-mode] :where(
3845
+ [data-ui][data-mode] :where(
3190
3846
  .luxe-button-pill,
3191
3847
  .organic-button-pill,
3192
3848
  .utility-button-pill,
@@ -3207,7 +3863,8 @@
3207
3863
  font-weight: 850;
3208
3864
  text-align: center;
3209
3865
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3866
+ overflow-wrap: break-word;
3867
+ word-break: normal;
3211
3868
  white-space: normal;
3212
3869
  cursor: pointer;
3213
3870
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3951,7 @@
3294
3951
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3952
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3953
 
3297
- [data-ui][data-theme][data-mode] :where(
3954
+ [data-ui][data-mode] :where(
3298
3955
  .luxe-button-pill:active,
3299
3956
  .luxe-button-pill[aria-pressed="true"],
3300
3957
  .organic-button-pill:active,
@@ -3315,7 +3972,7 @@
3315
3972
  .noir-button-pill[aria-pressed="true"]
3316
3973
  ) { transform: translateY(1px); }
3317
3974
 
3318
- [data-ui][data-theme][data-mode] :where(
3975
+ [data-ui][data-mode] :where(
3319
3976
  .luxe-button-pill:disabled,
3320
3977
  .luxe-button-pill[aria-disabled="true"],
3321
3978
  .organic-button-pill:disabled,
@@ -3336,7 +3993,7 @@
3336
3993
  .noir-button-pill[aria-disabled="true"]
3337
3994
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3995
 
3339
- [data-ui][data-theme][data-mode] :where(
3996
+ [data-ui][data-mode] :where(
3340
3997
  .luxe-tooltip,
3341
3998
  .luxe-tooltip-top,
3342
3999
  .luxe-tooltip-right,
@@ -3382,9 +4039,9 @@
3382
4039
  .noir-tooltip-right,
3383
4040
  .noir-tooltip-bottom,
3384
4041
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
4042
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
4043
 
3387
- [data-ui][data-theme][data-mode] :where(
4044
+ [data-ui][data-mode] :where(
3388
4045
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
4046
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
4047
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +4080,10 @@
3423
4080
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
4081
  ) { position: absolute; z-index: 20; }
3425
4082
 
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%); }
4083
+ [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%); }
4084
+ [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%); }
4085
+ [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%); }
4086
+ [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
4087
 
3431
4088
  :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
4089
  :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); }
@@ -3434,7 +4091,7 @@
3434
4091
  :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
3435
4092
  :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
3436
4093
 
3437
- :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="neumorphism"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
4094
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="neumorphism"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
3438
4095
 
3439
4096
  :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="neumorphism"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
3440
4097
  display: inline-flex;
@@ -3512,12 +4169,14 @@
3512
4169
  --neo-font-heading: var(--neo-font-display);
3513
4170
  --neo-font-control: var(--neo-font-display);
3514
4171
  --neo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
3515
- --neo-radius-xs: .25rem;
3516
- --neo-radius-sm: .5rem;
3517
- --neo-radius-md: .9rem;
3518
- --neo-radius-lg: 1.4rem;
3519
- --neo-radius-xl: calc(1.4rem + .5rem);
4172
+ --neo-radius-xs: .52rem;
4173
+ --neo-radius-sm: .82rem;
4174
+ --neo-radius-md: 1.15rem;
4175
+ --neo-radius-lg: 1.55rem;
4176
+ --neo-radius-xl: 2.25rem;
3520
4177
  --neo-radius-pill: 999px;
4178
+ --neo-soft-edge: 1px solid rgb(var(--neo-border-rgb) / .28);
4179
+ --neo-sunken-edge: 1px solid rgb(var(--neo-border-rgb) / .18);
3521
4180
  --neo-space-1: .25rem;
3522
4181
  --neo-space-2: .5rem;
3523
4182
  --neo-space-3: .75rem;
@@ -3533,6 +4192,29 @@
3533
4192
  --lightningcss-light: initial;
3534
4193
  --lightningcss-dark: ;
3535
4194
  color-scheme: light;
4195
+ --neo-fallback-bg-rgb: 241 245 255;
4196
+ --neo-fallback-surface-rgb: 255 255 255;
4197
+ --neo-fallback-surface-strong-rgb: 248 251 255;
4198
+ --neo-fallback-surface-soft-rgb: 223 231 246;
4199
+ --neo-fallback-text-rgb: 20 27 46;
4200
+ --neo-fallback-text-muted-rgb: 88 100 122;
4201
+ --neo-fallback-border-rgb: 190 203 227;
4202
+ --neo-fallback-primary-rgb: 64 94 184;
4203
+ --neo-fallback-primary-hover-rgb: 49 72 148;
4204
+ --neo-fallback-primary-text-rgb: 255 255 255;
4205
+ --neo-fallback-secondary-rgb: 46 125 157;
4206
+ --neo-fallback-secondary-hover-rgb: 35 97 122;
4207
+ --neo-fallback-secondary-text-rgb: 255 255 255;
4208
+ --neo-fallback-accent-rgb: 123 147 232;
4209
+ --neo-fallback-accent-text-rgb: 0 0 0;
4210
+ --neo-fallback-success-rgb: 47 125 84;
4211
+ --neo-fallback-success-text-rgb: 255 255 255;
4212
+ --neo-fallback-warning-rgb: 166 106 0;
4213
+ --neo-fallback-warning-text-rgb: 0 0 0;
4214
+ --neo-fallback-danger-rgb: 182 64 82;
4215
+ --neo-fallback-danger-text-rgb: 255 255 255;
4216
+ --neo-fallback-link-rgb: 49 72 148;
4217
+ --neo-fallback-focus-rgb: 123 147 232;
3536
4218
  --neo-panel-alpha: .98;
3537
4219
  --neo-panel-soft-alpha: .78;
3538
4220
  --neo-border-alpha: .58;
@@ -3544,6 +4226,29 @@
3544
4226
  --lightningcss-light: ;
3545
4227
  --lightningcss-dark: initial;
3546
4228
  color-scheme: dark;
4229
+ --neo-fallback-bg-rgb: 6 10 22;
4230
+ --neo-fallback-surface-rgb: 16 24 43;
4231
+ --neo-fallback-surface-strong-rgb: 24 35 66;
4232
+ --neo-fallback-surface-soft-rgb: 10 16 32;
4233
+ --neo-fallback-text-rgb: 237 243 255;
4234
+ --neo-fallback-text-muted-rgb: 178 191 217;
4235
+ --neo-fallback-border-rgb: 58 75 120;
4236
+ --neo-fallback-primary-rgb: 145 168 255;
4237
+ --neo-fallback-primary-hover-rgb: 183 197 255;
4238
+ --neo-fallback-primary-text-rgb: 5 8 22;
4239
+ --neo-fallback-secondary-rgb: 118 216 243;
4240
+ --neo-fallback-secondary-hover-rgb: 165 234 255;
4241
+ --neo-fallback-secondary-text-rgb: 4 17 22;
4242
+ --neo-fallback-accent-rgb: 194 206 255;
4243
+ --neo-fallback-accent-text-rgb: 0 0 0;
4244
+ --neo-fallback-success-rgb: 114 219 166;
4245
+ --neo-fallback-success-text-rgb: 0 0 0;
4246
+ --neo-fallback-warning-rgb: 255 209 102;
4247
+ --neo-fallback-warning-text-rgb: 0 0 0;
4248
+ --neo-fallback-danger-rgb: 255 125 145;
4249
+ --neo-fallback-danger-text-rgb: 0 0 0;
4250
+ --neo-fallback-link-rgb: 183 197 255;
4251
+ --neo-fallback-focus-rgb: 145 168 255;
3547
4252
  --neo-panel-alpha: .92;
3548
4253
  --neo-panel-soft-alpha: .64;
3549
4254
  --neo-border-alpha: .52;
@@ -3555,6 +4260,29 @@
3555
4260
  --lightningcss-light: ;
3556
4261
  --lightningcss-dark: initial;
3557
4262
  color-scheme: dark;
4263
+ --neo-fallback-bg-rgb: 0 0 0;
4264
+ --neo-fallback-surface-rgb: 3 8 22;
4265
+ --neo-fallback-surface-strong-rgb: 8 18 42;
4266
+ --neo-fallback-surface-soft-rgb: 0 0 0;
4267
+ --neo-fallback-text-rgb: 255 255 255;
4268
+ --neo-fallback-text-muted-rgb: 238 244 255;
4269
+ --neo-fallback-border-rgb: 255 255 255;
4270
+ --neo-fallback-primary-rgb: 111 140 255;
4271
+ --neo-fallback-primary-hover-rgb: 255 255 255;
4272
+ --neo-fallback-primary-text-rgb: 0 0 0;
4273
+ --neo-fallback-secondary-rgb: 0 217 255;
4274
+ --neo-fallback-secondary-hover-rgb: 255 255 255;
4275
+ --neo-fallback-secondary-text-rgb: 0 0 0;
4276
+ --neo-fallback-accent-rgb: 184 196 255;
4277
+ --neo-fallback-accent-text-rgb: 0 0 0;
4278
+ --neo-fallback-success-rgb: 0 255 144;
4279
+ --neo-fallback-success-text-rgb: 0 0 0;
4280
+ --neo-fallback-warning-rgb: 255 225 0;
4281
+ --neo-fallback-warning-text-rgb: 0 0 0;
4282
+ --neo-fallback-danger-rgb: 255 63 95;
4283
+ --neo-fallback-danger-text-rgb: 0 0 0;
4284
+ --neo-fallback-link-rgb: 159 178 255;
4285
+ --neo-fallback-focus-rgb: 255 255 255;
3558
4286
  --neo-panel-alpha: 1;
3559
4287
  --neo-panel-soft-alpha: .92;
3560
4288
  --neo-border-alpha: 1;
@@ -3577,15 +4305,42 @@
3577
4305
  --neo-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4306
  --neo-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4307
  --neo-accent-rgb: var(--usk-accent-rgb);
3580
- --neo-success-rgb: var(--usk-success-rgb);
3581
- --neo-warning-rgb: var(--usk-warning-rgb);
3582
- --neo-danger-rgb: var(--usk-danger-rgb);
3583
- --neo-link-rgb: var(--usk-link-rgb);
3584
4308
  --neo-accent-text-rgb: var(--usk-accent-text-rgb);
4309
+ --neo-success-rgb: var(--usk-success-rgb);
3585
4310
  --neo-success-text-rgb: var(--usk-success-text-rgb);
4311
+ --neo-warning-rgb: var(--usk-warning-rgb);
3586
4312
  --neo-warning-text-rgb: var(--usk-warning-text-rgb);
4313
+ --neo-danger-rgb: var(--usk-danger-rgb);
3587
4314
  --neo-danger-text-rgb: var(--usk-danger-text-rgb);
4315
+ --neo-link-rgb: var(--usk-link-rgb);
3588
4316
  --neo-focus-rgb: var(--usk-focus-rgb);
4317
+ }
4318
+
4319
+ [data-ui="neumorphism"][data-mode] {
4320
+ --usk-native-bg: var(--neo-bg);
4321
+ --neo-bg-rgb: var(--usk-bg-rgb, var(--neo-fallback-bg-rgb));
4322
+ --neo-surface-rgb: var(--usk-surface-rgb, var(--neo-fallback-surface-rgb));
4323
+ --neo-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--neo-fallback-surface-strong-rgb));
4324
+ --neo-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--neo-fallback-surface-soft-rgb));
4325
+ --neo-text-rgb: var(--usk-text-rgb, var(--neo-fallback-text-rgb));
4326
+ --neo-text-muted-rgb: var(--usk-text-muted-rgb, var(--neo-fallback-text-muted-rgb));
4327
+ --neo-border-rgb: var(--usk-border-rgb, var(--neo-fallback-border-rgb));
4328
+ --neo-primary-rgb: var(--usk-primary-rgb, var(--neo-fallback-primary-rgb));
4329
+ --neo-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--neo-fallback-primary-hover-rgb));
4330
+ --neo-primary-text-rgb: var(--usk-primary-text-rgb, var(--neo-fallback-primary-text-rgb));
4331
+ --neo-secondary-rgb: var(--usk-secondary-rgb, var(--neo-fallback-secondary-rgb));
4332
+ --neo-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--neo-fallback-secondary-hover-rgb));
4333
+ --neo-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--neo-fallback-secondary-text-rgb));
4334
+ --neo-accent-rgb: var(--usk-accent-rgb, var(--neo-fallback-accent-rgb));
4335
+ --neo-accent-text-rgb: var(--usk-accent-text-rgb, var(--neo-fallback-accent-text-rgb));
4336
+ --neo-success-rgb: var(--usk-success-rgb, var(--neo-fallback-success-rgb));
4337
+ --neo-success-text-rgb: var(--usk-success-text-rgb, var(--neo-fallback-success-text-rgb));
4338
+ --neo-warning-rgb: var(--usk-warning-rgb, var(--neo-fallback-warning-rgb));
4339
+ --neo-warning-text-rgb: var(--usk-warning-text-rgb, var(--neo-fallback-warning-text-rgb));
4340
+ --neo-danger-rgb: var(--usk-danger-rgb, var(--neo-fallback-danger-rgb));
4341
+ --neo-danger-text-rgb: var(--usk-danger-text-rgb, var(--neo-fallback-danger-text-rgb));
4342
+ --neo-link-rgb: var(--usk-link-rgb, var(--neo-fallback-link-rgb));
4343
+ --neo-focus-rgb: var(--usk-focus-rgb, var(--neo-fallback-focus-rgb));
3589
4344
  --usk-native-surface: var(--neo-surface);
3590
4345
  --usk-native-surface-strong: var(--neo-surface-strong);
3591
4346
  --usk-native-surface-soft: var(--neo-surface-soft);
@@ -3615,6 +4370,57 @@
3615
4370
  --usk-native-border-width: 1px;
3616
4371
  --usk-native-field-gap: .5rem;
3617
4372
  --usk-native-panel-padding: var(--neo-space-5);
4373
+ --usk-native-control-min-block-size: 3rem;
4374
+ --usk-native-control-padding-block: .74rem;
4375
+ --usk-native-control-padding-inline: 1rem;
4376
+ --usk-native-subcontrol-padding-block: .58rem;
4377
+ --usk-native-subcontrol-padding-inline: .8rem;
4378
+ --usk-native-choice-size: 1.55rem;
4379
+ --usk-native-choice-background: var(--neo-control-bg);
4380
+ --usk-native-choice-border: 1px solid var(--neo-border);
4381
+ --usk-native-checkbox-radius: .45rem;
4382
+ --usk-native-radio-radius: 50%;
4383
+ --usk-native-choice-shadow: 4px 4px 8px #00000038;
4384
+ --usk-native-choice-checked-background: var(--neo-primary);
4385
+ --usk-native-choice-mark-color: var(--neo-on-primary);
4386
+ --usk-native-select-indicator-image: linear-gradient(42deg, transparent 50%, var(--neo-primary) 50%), linear-gradient(138deg, var(--neo-primary) 50%, transparent 50%);
4387
+ --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
4388
+ --usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .78rem) 50%;
4389
+ --usk-native-select-padding-inline-end: 2.4rem;
4390
+ --usk-native-range-track-size: .62rem;
4391
+ --usk-native-range-track-background: var(--neo-surface-soft);
4392
+ --usk-native-range-track-border: 1px solid var(--neo-border);
4393
+ --usk-native-range-track-radius: 999px;
4394
+ --usk-native-range-track-shadow: 4px 4px 8px #00000038;
4395
+ --usk-native-range-progress-background: var(--neo-primary);
4396
+ --usk-native-range-thumb-size: 1.45rem;
4397
+ --usk-native-range-thumb-background: var(--neo-surface-strong);
4398
+ --usk-native-range-thumb-border: 1px solid var(--neo-border);
4399
+ --usk-native-range-thumb-radius: 50%;
4400
+ --usk-native-range-thumb-shadow: 4px 4px 8px #00000038;
4401
+ --usk-native-progress-size: .82rem;
4402
+ --usk-native-progress-track-background: var(--neo-surface-soft);
4403
+ --usk-native-progress-track-border: 1px solid var(--neo-border);
4404
+ --usk-native-progress-track-radius: 999px;
4405
+ --usk-native-progress-track-shadow: 4px 4px 8px #00000038;
4406
+ --usk-native-progress-value-background: var(--neo-primary);
4407
+ --usk-native-progress-value-radius: 999px;
4408
+ --usk-native-progress-value-shadow: 4px 4px 8px #00000038;
4409
+ --usk-native-meter-optimum-background: var(--neo-success);
4410
+ --usk-native-meter-suboptimum-background: var(--neo-warning);
4411
+ --usk-native-meter-critical-background: var(--neo-danger);
4412
+ --usk-native-file-button-background: var(--neo-primary);
4413
+ --usk-native-file-button-border: 1px solid var(--neo-border);
4414
+ --usk-native-file-button-radius: .45rem;
4415
+ --usk-native-file-button-shadow: 4px 4px 8px #00000038;
4416
+ --usk-native-color-swatch-border: 1px solid var(--neo-border);
4417
+ --usk-native-color-swatch-radius: .45rem;
4418
+ --usk-native-indicator-opacity: .72;
4419
+ --usk-native-indicator-filter: none;
4420
+ --usk-native-scrollbar-size: .8rem;
4421
+ --usk-native-scrollbar-track: var(--neo-surface-soft);
4422
+ --usk-native-scrollbar-thumb: var(--neo-primary);
4423
+ --usk-native-scrollbar-radius: 999px;
3618
4424
  --neo-bg: rgb(var(--neo-bg-rgb));
3619
4425
  --neo-surface: rgb(var(--neo-surface-rgb) / var(--neo-panel-alpha));
3620
4426
  --neo-surface-strong: rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha));
@@ -3655,7 +4461,7 @@
3655
4461
  }
3656
4462
 
3657
4463
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="neumorphism"][data-theme][data-mode] {
4464
+ [data-ui="neumorphism"][data-mode] {
3659
4465
  --neo-border: color-mix(in srgb, rgb(var(--neo-border-rgb) / max(var(--neo-border-alpha), var(--usk-border-min-alpha))), var(--neo-text) var(--usk-border-text-mix));
3660
4466
  }
3661
4467
  }
@@ -3674,7 +4480,7 @@
3674
4480
  box-sizing: border-box;
3675
4481
  }
3676
4482
 
3677
- [data-ui="neumorphism"][data-theme][data-mode] {
4483
+ [data-ui="neumorphism"][data-mode] {
3678
4484
  background: var(--neo-theme-bg);
3679
4485
  background-size: var(--neo-theme-bg-size);
3680
4486
  }
@@ -3700,7 +4506,7 @@
3700
4506
  }
3701
4507
 
3702
4508
  .neo-kicker {
3703
- color: var(--neo-primary);
4509
+ color: var(--usk-primary-ink, var(--neo-primary));
3704
4510
  letter-spacing: .12em;
3705
4511
  text-transform: uppercase;
3706
4512
  margin: 0;
@@ -3735,10 +4541,6 @@
3735
4541
  position: relative;
3736
4542
  }
3737
4543
 
3738
- .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
3739
- padding: var(--neo-space-6);
3740
- }
3741
-
3742
4544
  .neo-toolbar, :where([data-ui="neumorphism"]) .ui-toolbar {
3743
4545
  justify-content: space-between;
3744
4546
  align-items: center;
@@ -3748,11 +4550,6 @@
3748
4550
  display: flex;
3749
4551
  }
3750
4552
 
3751
- .neo-surface-sm {
3752
- border-radius: var(--neo-radius-md);
3753
- box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--neo-shadow-alpha)*.72));
3754
- }
3755
-
3756
4553
  .neo-surface-lg {
3757
4554
  border-radius: var(--neo-radius-xl);
3758
4555
  box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--neo-shadow-alpha) + .08));
@@ -3855,7 +4652,7 @@
3855
4652
  background: var(--neo-card-bg);
3856
4653
  }
3857
4654
 
3858
- .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap, :where([data-ui="neumorphism"]) .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="neumorphism"]) .ui-icon-button {
4655
+ .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost), .neo-icon-button, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap, :where([data-ui="neumorphism"]) .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="neumorphism"]) .ui-icon-button {
3859
4656
  background: var(--neo-control-bg);
3860
4657
  }
3861
4658
 
@@ -3898,10 +4695,6 @@
3898
4695
  opacity: .82;
3899
4696
  }
3900
4697
 
3901
- .neo-input:hover, .neo-textarea:hover, .neo-select:hover, :where([data-ui="neumorphism"]) .ui-input:hover, :where([data-ui="neumorphism"]) .ui-textarea:hover, :where([data-ui="neumorphism"]) .ui-select:hover {
3902
- border-color: rgb(var(--neo-primary-rgb)/.58);
3903
- }
3904
-
3905
4698
  .neo-input:focus, .neo-textarea:focus, .neo-select:focus, :where([data-ui="neumorphism"]) .ui-input:focus, :where([data-ui="neumorphism"]) .ui-textarea:focus, :where([data-ui="neumorphism"]) .ui-select:focus {
3906
4699
  border-color: var(--neo-focus);
3907
4700
  box-shadow: var(--neo-focus-ring);
@@ -3937,20 +4730,10 @@
3937
4730
  display: inline-grid;
3938
4731
  }
3939
4732
 
3940
- .neo-check-control, :where([data-ui="neumorphism"]) .ui-check-control {
3941
- border-radius: var(--neo-radius-xs);
3942
- }
3943
-
3944
4733
  .neo-radio-control, :where([data-ui="neumorphism"]) .ui-radio-control {
3945
4734
  border-radius: 50%;
3946
4735
  }
3947
4736
 
3948
- .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control {
3949
- background: var(--neo-primary);
3950
- border-color: var(--neo-primary);
3951
- box-shadow: var(--neo-focus-ring);
3952
- }
3953
-
3954
4737
  .neo-check input:checked + .neo-check-control:after, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control:after {
3955
4738
  content: "✓";
3956
4739
  color: var(--neo-on-primary);
@@ -4201,7 +4984,7 @@
4201
4984
  }
4202
4985
 
4203
4986
  .neo-text-primary {
4204
- color: var(--neo-primary);
4987
+ color: var(--usk-primary-ink, var(--neo-primary));
4205
4988
  }
4206
4989
 
4207
4990
  .neo-text-secondary {
@@ -4209,7 +4992,7 @@
4209
4992
  }
4210
4993
 
4211
4994
  .neo-text-accent {
4212
- color: var(--neo-accent);
4995
+ color: var(--usk-accent-ink, var(--neo-accent));
4213
4996
  }
4214
4997
 
4215
4998
  .neo-text-success {
@@ -4283,54 +5066,533 @@
4283
5066
  transform: translateY(0);
4284
5067
  }
4285
5068
 
5069
+ :root {
5070
+ --neo-font-sans: "Trebuchet MS", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
5071
+ --neo-font-display: "Trebuchet MS", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
5072
+ --neo-radius-xs: .45rem;
5073
+ --neo-radius-sm: .65rem;
5074
+ --neo-radius-md: .85rem;
5075
+ --neo-radius-lg: 1.15rem;
5076
+ --neo-radius-xl: 1.45rem;
5077
+ }
5078
+
4286
5079
  [data-ui="neumorphism"][data-mode="light"] {
4287
- --neo-nm-light: #fffffff0;
4288
- --neo-nm-dark: #94a2b285;
5080
+ --neo-material-canvas: #f1eeec;
5081
+ --neo-material-raised: #f1eeec;
5082
+ --neo-material-inset: #eae7e5;
5083
+ --neo-material-top-light: #ffffff4d;
5084
+ --neo-material-hairline: #beb8b5;
5085
+ --neo-material-edge: #857f7c;
5086
+ --neo-nm-light: #ffffffeb;
5087
+ --neo-nm-dark: #a9a19d66;
5088
+ --neo-nm-primary-glow: rgb(var(--neo-primary-rgb) / .26);
4289
5089
  }
4290
5090
 
4291
5091
  [data-ui="neumorphism"][data-mode="dark"] {
4292
- --neo-nm-light: #2e3746bd;
4293
- --neo-nm-dark: #00000080;
5092
+ --neo-material-canvas: #1a2434;
5093
+ --neo-material-raised: #1a2434;
5094
+ --neo-material-inset: #151e2c;
5095
+ --neo-material-top-light: #ffffff12;
5096
+ --neo-material-hairline: #4b5b71;
5097
+ --neo-material-edge: #6d7e95;
5098
+ --neo-nm-light: #344257b8;
5099
+ --neo-nm-dark: #050910c7;
5100
+ --neo-nm-primary-glow: rgb(var(--neo-primary-rgb) / .34);
4294
5101
  }
4295
5102
 
4296
5103
  [data-ui="neumorphism"][data-mode="contrast"] {
4297
- --neo-nm-light: #404040;
5104
+ --neo-material-canvas: #0a0e16;
5105
+ --neo-material-raised: #0a0e16;
5106
+ --neo-material-inset: #03060b;
5107
+ --neo-material-top-light: #ffffff1f;
5108
+ --neo-material-hairline: #fff;
5109
+ --neo-material-edge: #fff;
5110
+ --neo-nm-light: #ffffff57;
4298
5111
  --neo-nm-dark: #000;
5112
+ --neo-nm-primary-glow: rgb(var(--neo-primary-rgb) / .5);
5113
+ }
5114
+
5115
+ [data-ui="neumorphism"][data-mode] {
5116
+ --neo-bg: var(--neo-material-canvas);
5117
+ --neo-surface: var(--neo-material-raised);
5118
+ --neo-surface-strong: var(--neo-material-raised);
5119
+ --neo-surface-soft: var(--neo-material-inset);
5120
+ --neo-theme-bg: var(--neo-material-canvas);
5121
+ --neo-theme-bg-size: auto;
5122
+ --neo-card-bg: var(--neo-material-raised);
5123
+ --neo-control-bg: var(--neo-material-inset);
5124
+ --neo-muted-divider: var(--neo-material-hairline);
5125
+ --neo-raised-shadow: -.72rem -.72rem 1.45rem var(--neo-nm-light), .76rem .76rem 1.5rem var(--neo-nm-dark);
5126
+ --neo-raised-shadow-sm: -.3rem -.3rem .68rem var(--neo-nm-light), .34rem .34rem .72rem var(--neo-nm-dark);
5127
+ --neo-raised-shadow-lg: -.92rem -.92rem 1.8rem var(--neo-nm-light), 1rem 1rem 1.95rem var(--neo-nm-dark);
5128
+ --neo-inset-shadow: inset .42rem .42rem .82rem var(--neo-nm-dark), inset -.42rem -.42rem .82rem var(--neo-nm-light);
5129
+ --neo-inset-shadow-sm: inset .22rem .22rem .46rem var(--neo-nm-dark), inset -.22rem -.22rem .46rem var(--neo-nm-light);
5130
+ --neo-button-shadow: -.28rem -.28rem .62rem var(--neo-nm-light), .32rem .32rem .68rem var(--neo-nm-dark);
5131
+ --neo-button-primary-shadow: -.24rem -.24rem .56rem var(--neo-nm-light), .34rem .34rem .72rem var(--neo-nm-primary-glow);
5132
+ --neo-control-shadow: var(--neo-inset-shadow-sm);
5133
+ --neo-focus-ring: 0 0 0 .2rem rgb(var(--neo-focus-rgb) / var(--neo-focus-alpha)), var(--neo-inset-shadow-sm);
5134
+ --usk-native-surface: var(--neo-material-raised);
5135
+ --usk-native-surface-strong: var(--neo-material-raised);
5136
+ --usk-native-surface-soft: var(--neo-material-inset);
5137
+ --usk-native-card-bg: var(--neo-material-raised);
5138
+ --usk-native-control-bg: var(--neo-material-inset);
5139
+ --usk-native-border: var(--neo-material-edge);
5140
+ --usk-native-radius-sm: var(--neo-radius-sm);
5141
+ --usk-native-radius: var(--neo-radius-md);
5142
+ --usk-native-radius-lg: var(--neo-radius-lg);
5143
+ --usk-native-border-width: 1px;
5144
+ --usk-native-panel-padding: 1.5rem;
5145
+ --usk-native-control-min-block-size: 3rem;
5146
+ --usk-native-control-padding-block: .8rem;
5147
+ --usk-native-control-padding-inline: 1rem;
5148
+ --usk-native-subcontrol-padding-block: .62rem;
5149
+ --usk-native-subcontrol-padding-inline: .85rem;
5150
+ --usk-native-choice-size: 1.5rem;
5151
+ --usk-native-choice-background: var(--neo-material-inset);
5152
+ --usk-native-choice-border: 1px solid var(--neo-material-edge);
5153
+ --usk-native-choice-shadow: var(--neo-inset-shadow-sm);
5154
+ --usk-native-checkbox-radius: var(--neo-radius-xs);
5155
+ --usk-native-range-track-size: .65rem;
5156
+ --usk-native-range-track-background: var(--neo-material-inset);
5157
+ --usk-native-range-track-border: 1px solid var(--neo-material-edge);
5158
+ --usk-native-range-track-radius: var(--neo-radius-pill);
5159
+ --usk-native-range-track-shadow: var(--neo-inset-shadow-sm);
5160
+ --usk-native-range-thumb-size: 1.65rem;
5161
+ --usk-native-range-thumb-background: var(--neo-material-raised);
5162
+ --usk-native-range-thumb-border: 1px solid var(--neo-material-edge);
5163
+ --usk-native-range-thumb-radius: 50%;
5164
+ --usk-native-range-thumb-shadow: var(--neo-button-shadow);
5165
+ --usk-native-progress-size: .95rem;
5166
+ --usk-native-progress-track-background: var(--neo-material-inset);
5167
+ --usk-native-progress-track-border: 1px solid var(--neo-material-edge);
5168
+ --usk-native-progress-track-radius: var(--neo-radius-pill);
5169
+ --usk-native-progress-track-shadow: var(--neo-inset-shadow-sm);
5170
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--neo-primary), var(--neo-primary-hover));
5171
+ --usk-native-progress-value-radius: var(--neo-radius-pill);
5172
+ --usk-native-progress-value-shadow: inset 0 1px 0 #ffffff6b, 0 .12rem .38rem rgb(var(--neo-primary-rgb) / .3);
5173
+ --usk-native-file-button-background: var(--neo-material-raised);
5174
+ --usk-native-file-button-border: 1px solid var(--neo-material-edge);
5175
+ --usk-native-file-button-radius: var(--neo-radius-md);
5176
+ --usk-native-file-button-shadow: var(--neo-button-shadow);
5177
+ --usk-native-color-swatch-border: 1px solid var(--neo-material-edge);
5178
+ --usk-native-color-swatch-radius: var(--neo-radius-md);
5179
+ --usk-native-scrollbar-size: .85rem;
5180
+ --usk-native-scrollbar-track: var(--neo-material-inset);
5181
+ --usk-native-scrollbar-thumb: var(--neo-primary);
5182
+ --usk-native-scrollbar-radius: var(--neo-radius-pill);
5183
+ --usk-native-shadow: var(--neo-raised-shadow-sm);
5184
+ --usk-native-shadow-md: var(--neo-raised-shadow);
4299
5185
  }
4300
5186
 
4301
5187
  [data-ui="neumorphism"] {
4302
- background: var(--neo-bg);
5188
+ background: var(--neo-material-canvas);
5189
+ }
5190
+
5191
+ .neo-title {
5192
+ letter-spacing: max(.016em, .5px);
5193
+ margin-block: .75rem;
5194
+ font-weight: 680;
5195
+ }
5196
+
5197
+ .neo-heading {
5198
+ letter-spacing: -.028em;
5199
+ font-weight: 680;
5200
+ }
5201
+
5202
+ .neo-label, :where([data-ui="neumorphism"]) .ui-label {
5203
+ letter-spacing: 0;
5204
+ font-size: .86rem;
5205
+ font-weight: 680;
5206
+ }
5207
+
5208
+ .neo-subtitle, .neo-copy, .neo-help-text, :where([data-ui="neumorphism"]) .ui-help-text {
5209
+ color: var(--neo-text-muted);
5210
+ }
5211
+
5212
+ .neo-divider {
5213
+ background: var(--neo-muted-divider);
4303
5214
  }
4304
5215
 
4305
5216
  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-card, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap {
4306
- border-color: rgb(var(--neo-border-rgb)/.14);
4307
- box-shadow: 10px 10px 22px var(--neo-nm-dark),-10px -10px 22px var(--neo-nm-light);
5217
+ background-color: var(--neo-material-raised);
5218
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 44%);
5219
+ color: var(--neo-text);
5220
+ border: 1px solid var(--neo-material-hairline);
5221
+ border-radius: var(--neo-radius-xl);
5222
+ box-shadow: var(--neo-raised-shadow);
5223
+ }
5224
+
5225
+ .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
5226
+ padding: clamp(1.25rem, 3vw, 2rem);
5227
+ }
5228
+
5229
+ .neo-toolbar, :where([data-ui="neumorphism"]) .ui-toolbar {
5230
+ padding: 1rem 1.25rem;
5231
+ }
5232
+
5233
+ .neo-surface-sm {
5234
+ border-radius: var(--neo-radius-lg);
5235
+ box-shadow: var(--neo-raised-shadow-sm);
4308
5236
  }
4309
5237
 
4310
5238
  .neo-surface-lg, .neo-hover-lift:hover {
4311
- box-shadow: 16px 16px 32px var(--neo-nm-dark),-16px -16px 32px var(--neo-nm-light);
5239
+ box-shadow: var(--neo-raised-shadow-lg);
5240
+ }
5241
+
5242
+ .neo-well, .neo-inset {
5243
+ background: var(--neo-material-inset);
5244
+ color: var(--neo-text);
5245
+ border: 1px solid var(--neo-material-edge);
5246
+ border-radius: var(--neo-radius-lg);
5247
+ box-shadow: var(--neo-inset-shadow);
5248
+ }
5249
+
5250
+ :where(.neo-well, .neo-inset).neo-surface-sm {
5251
+ padding: var(--neo-space-3);
5252
+ border-radius: var(--neo-radius-md);
5253
+ box-shadow: var(--neo-inset-shadow-sm);
5254
+ }
5255
+
5256
+ .neo-button, .neo-icon-button, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button {
5257
+ background-color: var(--neo-material-raised);
5258
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
5259
+ min-height: 3rem;
5260
+ color: var(--neo-text);
5261
+ border: 1px solid var(--neo-material-edge);
5262
+ border-radius: var(--neo-radius-md);
5263
+ box-shadow: var(--neo-button-shadow);
5264
+ padding: .8rem 1.2rem;
5265
+ font-weight: 680;
5266
+ }
5267
+
5268
+ .neo-icon-button, :where([data-ui="neumorphism"]) .ui-icon-button {
5269
+ border-radius: 50%;
5270
+ inline-size: 3rem;
5271
+ padding: 0;
5272
+ }
5273
+
5274
+ .neo-button:not(:disabled):hover, .neo-icon-button:not(:disabled):hover, :where([data-ui="neumorphism"]) .ui-button:not(:disabled):hover, :where([data-ui="neumorphism"]) .ui-icon-button:not(:disabled):hover {
5275
+ box-shadow: var(--neo-raised-shadow-sm);
5276
+ transform: translateY(-1px);
5277
+ }
5278
+
5279
+ .neo-button:focus-visible, .neo-icon-button:focus-visible, .neo-nav-link:focus-visible, :where([data-ui="neumorphism"]) .ui-button:focus-visible, :where([data-ui="neumorphism"]) .ui-icon-button:focus-visible, :where([data-ui="neumorphism"]) .ui-nav-link:focus-visible {
5280
+ outline: 2px solid var(--neo-focus);
5281
+ outline-offset: 3px;
5282
+ }
5283
+
5284
+ .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active {
5285
+ box-shadow: var(--neo-inset-shadow-sm);
5286
+ background-image: none;
5287
+ transform: translateY(1px);
5288
+ }
5289
+
5290
+ .neo-button-primary, .neo-button-secondary, .neo-button-danger, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"]) {
5291
+ background-image: linear-gradient(155deg, #ffffff47, #0000 52%, #00000014);
5292
+ }
5293
+
5294
+ .neo-button-primary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]) {
5295
+ background-color: var(--neo-primary);
5296
+ color: var(--neo-on-primary);
5297
+ border-color: var(--neo-primary);
5298
+ box-shadow: var(--neo-button-primary-shadow);
5299
+ }
5300
+
5301
+ .neo-button-primary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]):hover {
5302
+ background-color: var(--neo-primary-hover);
5303
+ }
5304
+
5305
+ .neo-button-secondary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]) {
5306
+ background-color: var(--neo-secondary);
5307
+ color: var(--neo-on-secondary);
5308
+ border-color: var(--neo-secondary);
5309
+ }
5310
+
5311
+ .neo-button-secondary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
5312
+ background-color: var(--neo-secondary-hover);
5313
+ }
5314
+
5315
+ .neo-button-danger, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"]) {
5316
+ background-color: var(--neo-danger);
5317
+ color: var(--neo-on-danger);
5318
+ border-color: var(--neo-danger);
5319
+ box-shadow: var(--neo-button-primary-shadow);
5320
+ }
5321
+
5322
+ .neo-button-primary:active, .neo-button-secondary:active, .neo-button-danger:active, .neo-button-primary[aria-pressed="true"], .neo-button-secondary[aria-pressed="true"], .neo-button-danger[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]):active, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]):active, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"]):active, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"])[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"])[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"])[aria-pressed="true"] {
5323
+ background-image: none;
5324
+ box-shadow: inset .28rem .28rem .58rem #00000057, inset -.22rem -.22rem .5rem #ffffff38;
5325
+ }
5326
+
5327
+ .neo-button-ghost, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost), .neo-icon-button, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]), :where([data-ui="neumorphism"]) .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="neumorphism"]) .ui-icon-button {
5328
+ background-color: var(--neo-material-raised);
5329
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
5330
+ color: var(--neo-text);
5331
+ }
5332
+
5333
+ .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
5334
+ border-radius: var(--neo-radius-md);
5335
+ justify-content: center;
5336
+ justify-self: center;
5337
+ min-inline-size: 6rem;
5338
+ max-inline-size: 100%;
5339
+ }
5340
+
5341
+ .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
5342
+ background-color: var(--neo-material-raised);
5343
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
5344
+ color: var(--usk-primary-ink, var(--neo-primary));
5345
+ border: 1px solid var(--neo-material-edge);
5346
+ border-radius: var(--neo-radius-md);
5347
+ box-shadow: var(--neo-button-shadow);
5348
+ }
5349
+
5350
+ .neo-button.neo-button-outline-heavy:hover, .neo-button-outline-heavy:hover, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy:hover {
5351
+ color: var(--usk-primary-ink, var(--neo-primary-hover));
5352
+ border-color: var(--neo-primary);
5353
+ }
5354
+
5355
+ .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled, :where([data-ui="neumorphism"]) .ui-button:disabled, :where([data-ui="neumorphism"]) .ui-icon-button:disabled {
5356
+ opacity: .5;
5357
+ cursor: not-allowed;
5358
+ box-shadow: -.14rem -.14rem .3rem var(--neo-nm-light),.16rem .16rem .34rem var(--neo-nm-dark);
5359
+ transform: none;
5360
+ }
5361
+
5362
+ .neo-input, .neo-textarea, .neo-select, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select {
5363
+ background: var(--neo-material-inset);
5364
+ min-height: 3rem;
5365
+ color: var(--neo-text);
5366
+ border: 1px solid var(--neo-material-edge);
5367
+ border-radius: var(--neo-radius-md);
5368
+ box-shadow: var(--neo-control-shadow);
5369
+ padding: .8rem 1rem;
5370
+ }
5371
+
5372
+ .neo-input:hover, .neo-textarea:hover, .neo-select:hover, :where([data-ui="neumorphism"]) .ui-input:hover, :where([data-ui="neumorphism"]) .ui-textarea:hover, :where([data-ui="neumorphism"]) .ui-select:hover {
5373
+ border-color: var(--neo-primary);
5374
+ }
5375
+
5376
+ .neo-input:focus, .neo-textarea:focus, .neo-select:focus, :where([data-ui="neumorphism"]) .ui-input:focus, :where([data-ui="neumorphism"]) .ui-textarea:focus, :where([data-ui="neumorphism"]) .ui-select:focus {
5377
+ background: var(--neo-material-inset);
5378
+ border-color: var(--neo-focus);
5379
+ box-shadow: var(--neo-focus-ring);
5380
+ }
5381
+
5382
+ .neo-input[aria-invalid="true"], .neo-textarea[aria-invalid="true"], .neo-select[aria-invalid="true"], :where([data-ui="neumorphism"]) .ui-input[aria-invalid="true"], :where([data-ui="neumorphism"]) .ui-textarea[aria-invalid="true"], :where([data-ui="neumorphism"]) .ui-select[aria-invalid="true"] {
5383
+ border-color: var(--neo-danger);
5384
+ box-shadow: 0 0 0 2px rgb(var(--neo-danger-rgb)/.2),var(--neo-inset-shadow-sm);
5385
+ }
5386
+
5387
+ .neo-input[readonly], .neo-textarea[readonly], :where([data-ui="neumorphism"]) .ui-input[readonly], :where([data-ui="neumorphism"]) .ui-textarea[readonly] {
5388
+ filter: saturate(.72);
5389
+ opacity: .78;
5390
+ }
5391
+
5392
+ .neo-check-control, .neo-radio-control, .neo-switch-track, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control, :where([data-ui="neumorphism"]) .ui-switch-track {
5393
+ background: var(--neo-material-inset);
5394
+ border: 1px solid var(--neo-material-edge);
5395
+ box-shadow: var(--neo-control-shadow);
5396
+ }
5397
+
5398
+ .neo-check-control, :where([data-ui="neumorphism"]) .ui-check-control {
5399
+ border-radius: var(--neo-radius-xs);
5400
+ }
5401
+
5402
+ .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control {
5403
+ background: var(--neo-primary);
5404
+ border-color: var(--neo-primary);
5405
+ box-shadow: var(--neo-button-primary-shadow);
5406
+ }
5407
+
5408
+ .neo-check input:checked + .neo-check-control:after, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control:after {
5409
+ content: "";
5410
+ border: solid var(--neo-on-primary);
5411
+ border-width: 0 .14rem .14rem 0;
5412
+ block-size: .72rem;
5413
+ inline-size: .42rem;
5414
+ transform: rotate(45deg) translateY(-.04rem);
5415
+ }
5416
+
5417
+ .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
5418
+ block-size: 1.9rem;
5419
+ inline-size: 3.6rem;
5420
+ }
5421
+
5422
+ .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
5423
+ background: var(--neo-material-raised);
5424
+ border: 1px solid var(--neo-material-edge);
5425
+ box-shadow: var(--neo-button-shadow);
5426
+ inset-block-start: .23rem;
5427
+ inset-inline-start: .23rem;
5428
+ }
5429
+
5430
+ .neo-switch input:checked + .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track {
5431
+ background: var(--neo-primary);
5432
+ border-color: var(--neo-primary);
5433
+ box-shadow: inset .2rem .2rem .45rem rgb(var(--neo-primary-hover-rgb)/.72),inset -.2rem -.2rem .45rem #ffffff42;
5434
+ }
5435
+
5436
+ .neo-switch input:checked + .neo-switch-track .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
5437
+ background: var(--neo-on-primary);
5438
+ }
5439
+
5440
+ .neo-badge, :where([data-ui="neumorphism"]) .ui-badge {
5441
+ background-color: var(--neo-material-raised);
5442
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
5443
+ min-height: 1.8rem;
5444
+ color: var(--neo-text);
5445
+ border: 1px solid var(--neo-material-edge);
5446
+ border-radius: var(--neo-radius-pill);
5447
+ box-shadow: var(--neo-raised-shadow-sm);
5448
+ padding: .38rem .78rem;
5449
+ font-size: .76rem;
5450
+ font-weight: 680;
5451
+ }
5452
+
5453
+ .neo-badge-primary, .neo-badge-secondary, .neo-badge-success, .neo-badge-warning, .neo-badge-danger, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="primary"]), :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="secondary"]), :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="success"]), :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="warning"]), :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="danger"]) {
5454
+ background-image: linear-gradient(145deg, #ffffff3d, #0000 52%, #0000000f);
5455
+ }
5456
+
5457
+ .neo-badge-primary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="primary"]) {
5458
+ background-color: var(--neo-primary);
5459
+ color: var(--neo-on-primary);
5460
+ border-color: var(--neo-primary);
5461
+ }
5462
+
5463
+ .neo-badge-secondary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="secondary"]) {
5464
+ background-color: var(--neo-secondary);
5465
+ color: var(--neo-on-secondary);
5466
+ border-color: var(--neo-secondary);
5467
+ }
5468
+
5469
+ .neo-badge-success, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="success"]) {
5470
+ background-color: var(--neo-success);
5471
+ color: var(--neo-on-success);
5472
+ border-color: var(--neo-success);
5473
+ }
5474
+
5475
+ .neo-badge-warning, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="warning"]) {
5476
+ background-color: var(--neo-warning);
5477
+ color: var(--neo-on-warning);
5478
+ border-color: var(--neo-warning);
5479
+ }
5480
+
5481
+ .neo-badge-danger, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="danger"]) {
5482
+ background-color: var(--neo-danger);
5483
+ color: var(--neo-on-danger);
5484
+ border-color: var(--neo-danger);
5485
+ }
5486
+
5487
+ .neo-nav, :where([data-ui="neumorphism"]) .ui-nav {
5488
+ background: var(--neo-material-raised);
5489
+ border: 1px solid var(--neo-material-hairline);
5490
+ border-radius: var(--neo-radius-xl);
5491
+ box-shadow: var(--neo-raised-shadow-sm);
5492
+ gap: .35rem;
5493
+ padding: .55rem;
5494
+ }
5495
+
5496
+ .neo-nav-link, :where([data-ui="neumorphism"]) .ui-nav-link {
5497
+ min-height: 2.7rem;
5498
+ color: var(--neo-text-muted);
5499
+ border-radius: var(--neo-radius-md);
5500
+ border: 1px solid #0000;
5501
+ padding: .68rem 1rem;
5502
+ font-weight: 680;
5503
+ }
5504
+
5505
+ .neo-nav-link:hover, :where([data-ui="neumorphism"]) .ui-nav-link:hover {
5506
+ color: var(--neo-text);
5507
+ background: var(--neo-material-inset);
5508
+ border-color: var(--neo-material-edge);
5509
+ box-shadow: var(--neo-inset-shadow-sm);
5510
+ }
5511
+
5512
+ .neo-nav-link[aria-current="page"], .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-nav-link[aria-current="page"], :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
5513
+ color: var(--neo-on-primary);
5514
+ background: var(--neo-primary);
5515
+ border-color: var(--neo-primary);
5516
+ box-shadow: inset .2rem .2rem .42rem rgb(var(--neo-primary-hover-rgb)/.62),inset -.16rem -.16rem .35rem #fff3;
5517
+ }
5518
+
5519
+ .neo-tooltip, [data-ui="neumorphism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5520
+ background: var(--neo-material-raised);
5521
+ color: var(--neo-text);
5522
+ border: 1px solid var(--neo-material-edge);
5523
+ border-radius: var(--neo-radius-md);
5524
+ box-shadow: var(--neo-raised-shadow-sm);
5525
+ }
5526
+
5527
+ .neo-tooltip-arrow {
5528
+ background: var(--neo-material-raised);
5529
+ border: 1px solid var(--neo-material-edge);
5530
+ box-shadow: var(--neo-inset-shadow-sm);
5531
+ }
5532
+
5533
+ .neo-progress, :where([data-ui="neumorphism"]) .ui-progress {
5534
+ background: var(--neo-material-inset);
5535
+ border: 1px solid var(--neo-material-edge);
5536
+ border-radius: var(--neo-radius-pill);
5537
+ height: 1rem;
5538
+ box-shadow: var(--neo-inset-shadow);
5539
+ padding: .14rem;
5540
+ }
5541
+
5542
+ .neo-progress-bar, :where([data-ui="neumorphism"]) .ui-progress-bar {
5543
+ background: linear-gradient(90deg,var(--neo-primary),var(--neo-primary-hover));
5544
+ border-radius: inherit;
5545
+ box-shadow: inset 0 1px 0 #ffffff61,0 .12rem .38rem rgb(var(--neo-primary-rgb)/.3);
5546
+ }
5547
+
5548
+ .neo-alert, :where([data-ui="neumorphism"]) .ui-alert {
5549
+ background: var(--neo-material-raised);
5550
+ border: 1px solid var(--neo-material-hairline);
5551
+ border-radius: var(--neo-radius-xl);
5552
+ box-shadow: var(--neo-raised-shadow);
5553
+ padding: 1.35rem 1.5rem;
4312
5554
  }
4313
5555
 
4314
- .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select, :where([data-ui="neumorphism"]) .ui-progress {
4315
- box-shadow: inset 5px 5px 11px var(--neo-nm-dark),inset -5px -5px 11px var(--neo-nm-light);
5556
+ .neo-alert-success, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="success"]) {
5557
+ box-shadow: var(--neo-raised-shadow),inset .3rem 0 0 var(--neo-success);
5558
+ }
5559
+
5560
+ .neo-alert-warning, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="warning"]) {
5561
+ box-shadow: var(--neo-raised-shadow),inset .3rem 0 0 var(--neo-warning);
5562
+ }
5563
+
5564
+ .neo-alert-danger, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="danger"]) {
5565
+ box-shadow: var(--neo-raised-shadow),inset .3rem 0 0 var(--neo-danger);
4316
5566
  }
4317
5567
 
4318
- .neo-button, .neo-icon-button, .neo-badge, .neo-nav, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav {
4319
- box-shadow: 5px 5px 11px var(--neo-nm-dark),-5px -5px 11px var(--neo-nm-light);
5568
+ .neo-table, :where([data-ui="neumorphism"]) .ui-table {
5569
+ border-collapse: separate;
5570
+ border-spacing: 0 .42rem;
5571
+ }
5572
+
5573
+ .neo-table th, .neo-table td, :where([data-ui="neumorphism"]) .ui-table th, :where([data-ui="neumorphism"]) .ui-table td {
5574
+ background: var(--neo-material-inset);
5575
+ box-shadow: var(--neo-inset-shadow-sm);
5576
+ border-block-end: 0;
5577
+ padding: .9rem 1rem;
4320
5578
  }
4321
5579
 
4322
- .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
4323
- box-shadow: inset 4px 4px 9px var(--neo-nm-dark),inset -4px -4px 9px var(--neo-nm-light);
5580
+ .neo-table th:first-child, .neo-table td:first-child, :where([data-ui="neumorphism"]) .ui-table th:first-child, :where([data-ui="neumorphism"]) .ui-table td:first-child {
5581
+ border-radius: var(--neo-radius-md)0 0 var(--neo-radius-md);
5582
+ }
5583
+
5584
+ .neo-table th:last-child, .neo-table td:last-child, :where([data-ui="neumorphism"]) .ui-table th:last-child, :where([data-ui="neumorphism"]) .ui-table td:last-child {
5585
+ border-radius: 0 var(--neo-radius-md) var(--neo-radius-md)0;
4324
5586
  }
4325
5587
 
4326
5588
  .neo-spinner, .neo-loading-spinner, [data-ui="neumorphism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
4327
- border: .2rem solid #0000;
5589
+ border: .18rem solid var(--neo-material-edge);
4328
5590
  border-block-start-color: var(--neo-spinner-stroke);
4329
5591
  border-inline-end-color: var(--neo-spinner-accent);
4330
- background: conic-gradient(from 45deg,var(--neo-spinner-stroke),transparent 34%,var(--neo-spinner-accent),var(--neo-spinner-track));
5592
+ background: var(--neo-material-raised);
4331
5593
  block-size: 2rem;
4332
5594
  inline-size: 2rem;
4333
- box-shadow: -.35rem -.35rem .8rem #ffffff52,.35rem .35rem .8rem #0000002e,inset 0 0 0 .38rem var(--neo-surface);
5595
+ box-shadow: var(--neo-button-shadow),inset 0 0 0 .28rem var(--neo-material-inset);
4334
5596
  vertical-align: -.2em;
4335
5597
  border-radius: 50%;
4336
5598
  animation: 1s linear infinite neo-spin;
@@ -4344,7 +5606,7 @@
4344
5606
  }
4345
5607
 
4346
5608
  .neo-spinner-lg {
4347
- border-width: .28rem;
5609
+ border-width: .26rem;
4348
5610
  block-size: 3rem;
4349
5611
  inline-size: 3rem;
4350
5612
  }
@@ -4356,13 +5618,14 @@
4356
5618
 
4357
5619
  .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
4358
5620
  content: "";
4359
- border: .16em solid rgb(var(--neo-primary-text-rgb)/.42);
4360
- border-block-start-color: currentColor;
5621
+ border: .12em solid;
5622
+ border-block-start-color: #0000;
4361
5623
  border-radius: 50%;
4362
5624
  block-size: 1em;
4363
5625
  inline-size: 1em;
4364
- animation: .75s linear infinite neo-spin;
5626
+ animation: .78s linear infinite neo-spin;
4365
5627
  display: inline-block;
5628
+ box-shadow: inset 0 0 0 .1em #ffffff29;
4366
5629
  }
4367
5630
 
4368
5631
  @keyframes neo-spin {
@@ -4374,32 +5637,28 @@
4374
5637
  .neo-card-media {
4375
5638
  aspect-ratio: 16 / 9;
4376
5639
  object-fit: cover;
4377
- border: 1px solid rgb(var(--neo-border-rgb)/.72);
5640
+ border: 1px solid var(--neo-material-edge);
4378
5641
  border-radius: var(--neo-radius-lg);
4379
5642
  inline-size: 100%;
5643
+ box-shadow: var(--neo-inset-shadow-sm);
4380
5644
  display: block;
4381
5645
  }
4382
5646
 
4383
5647
  .neo-card-service {
4384
5648
  gap: var(--neo-space-3);
4385
- text-align: center;
4386
5649
  align-content: start;
4387
5650
  display: grid;
4388
5651
  position: relative;
4389
5652
  overflow: visible;
4390
5653
  }
4391
5654
 
4392
- .neo-card-service > .neo-icon-medallion {
5655
+ .neo-card-service > .neo-icon-medallion, .neo-card-service > .neo-card-media + .neo-icon-medallion {
4393
5656
  z-index: 2;
4394
5657
  justify-self: center;
4395
- margin-block-start: -2.15rem;
5658
+ margin-block-start: -2.1rem;
4396
5659
  position: relative;
4397
5660
  }
4398
5661
 
4399
- .neo-card-service > .neo-card-media + .neo-icon-medallion {
4400
- margin-block-start: -2.15rem;
4401
- }
4402
-
4403
5662
  .neo-card-feature {
4404
5663
  gap: var(--neo-space-4);
4405
5664
  grid-template-columns: auto minmax(0, 1fr);
@@ -4408,16 +5667,28 @@
4408
5667
  }
4409
5668
 
4410
5669
  .neo-card-accent-edge {
4411
- border-inline-start: .35rem solid var(--neo-primary);
5670
+ border-inline-start: .3rem solid var(--neo-primary);
5671
+ }
5672
+
5673
+ .neo-card-service, .neo-card-feature, .neo-feature-strip, .neo-callout-bar {
5674
+ background-color: var(--neo-material-raised);
5675
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 44%);
5676
+ color: var(--neo-text);
5677
+ border: 1px solid var(--neo-material-hairline);
5678
+ border-radius: var(--neo-radius-xl);
5679
+ box-shadow: var(--neo-raised-shadow);
5680
+ padding: 1.4rem;
4412
5681
  }
4413
5682
 
4414
5683
  .neo-icon-medallion {
4415
- background: var(--neo-primary);
5684
+ background-color: var(--neo-material-raised);
5685
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
4416
5686
  block-size: 3.75rem;
4417
5687
  inline-size: 3.75rem;
4418
- color: var(--neo-on-primary);
4419
- border: 2px solid rgb(var(--neo-border-rgb)/.82);
4420
- border-radius: 50%;
5688
+ color: var(--usk-primary-ink, var(--neo-primary));
5689
+ border: 1px solid var(--neo-material-edge);
5690
+ border-radius: var(--neo-radius-lg);
5691
+ box-shadow: var(--neo-button-shadow);
4421
5692
  flex: none;
4422
5693
  place-items: center;
4423
5694
  padding: .7rem;
@@ -4431,37 +5702,15 @@
4431
5702
  inline-size: 100%;
4432
5703
  }
4433
5704
 
4434
- .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4435
- clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4436
- border-radius: 0;
4437
- }
4438
-
4439
- .neo-button.neo-button-cut:focus-visible, .neo-button-cut:focus-visible, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut:focus-visible {
4440
- outline-offset: -3px;
4441
- }
4442
-
4443
- .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4444
- color: var(--neo-primary);
4445
- border-style: solid;
4446
- border-width: 2px;
4447
- border-color: var(--neo-primary);
4448
- box-shadow: none;
4449
- background: none;
4450
- }
4451
-
4452
- .neo-button.neo-button-outline-heavy:hover, .neo-button-outline-heavy:hover, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy:hover {
4453
- background: var(--neo-primary);
4454
- color: var(--neo-on-primary);
4455
- border-color: var(--neo-primary-hover);
4456
- }
4457
-
4458
5705
  .neo-badge-seal {
4459
5706
  aspect-ratio: 1;
4460
- background: var(--neo-surface-strong);
5707
+ background-color: var(--neo-material-raised);
5708
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
4461
5709
  inline-size: 5rem;
4462
5710
  min-inline-size: 5rem;
4463
5711
  color: var(--neo-text);
4464
- border: 2px solid var(--neo-primary);
5712
+ border: 1px solid var(--neo-material-edge);
5713
+ box-shadow: var(--neo-button-shadow);
4465
5714
  text-align: center;
4466
5715
  font-family: var(--neo-font-heading);
4467
5716
  letter-spacing: .04em;
@@ -4475,30 +5724,28 @@
4475
5724
  display: inline-grid;
4476
5725
  }
4477
5726
 
5727
+ .neo-badge-seal :where(strong, small, span) {
5728
+ color: inherit;
5729
+ }
5730
+
4478
5731
  .neo-feature-strip {
4479
- background: var(--neo-card-bg);
4480
- color: var(--neo-text);
4481
- border: 1px solid var(--neo-border);
4482
- border-radius: var(--neo-radius-lg);
4483
5732
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4484
5733
  display: grid;
4485
- overflow: hidden;
4486
5734
  }
4487
5735
 
4488
5736
  .neo-feature-item {
4489
5737
  align-items: center;
4490
5738
  gap: var(--neo-space-3);
5739
+ background: var(--neo-material-inset);
5740
+ border: 1px solid var(--neo-material-edge);
5741
+ border-radius: var(--neo-radius-lg);
4491
5742
  min-inline-size: 0;
4492
- padding: var(--neo-space-4);
4493
- border-inline-end: 1px solid rgb(var(--neo-border-rgb)/.62);
5743
+ box-shadow: var(--neo-inset-shadow-sm);
4494
5744
  grid-template-columns: auto minmax(0, 1fr);
5745
+ padding: 1rem;
4495
5746
  display: grid;
4496
5747
  }
4497
5748
 
4498
- .neo-feature-item:last-child {
4499
- border-inline-end: 0;
4500
- }
4501
-
4502
5749
  .neo-feature-item > :where(p, small) {
4503
5750
  color: var(--neo-text-muted);
4504
5751
  margin: 0;
@@ -4507,15 +5754,20 @@
4507
5754
  .neo-callout-bar {
4508
5755
  align-items: center;
4509
5756
  gap: var(--neo-space-4);
4510
- padding: var(--neo-space-4) var(--neo-space-5);
4511
- background: var(--neo-card-bg);
4512
- color: var(--neo-text);
4513
- border: 1px solid var(--neo-border);
4514
- border-radius: var(--neo-radius-lg);
4515
5757
  grid-template-columns: auto minmax(0, 1fr) auto;
4516
5758
  display: grid;
4517
5759
  }
4518
5760
 
5761
+ .neo-callout-bar > .neo-icon-medallion {
5762
+ block-size: clamp(4.75rem, 8vw, 6rem);
5763
+ inline-size: clamp(4.75rem, 8vw, 6rem);
5764
+ text-shadow: 0 1px 0 var(--neo-material-highlight),0-1px 1px var(--neo-shadow-dark);
5765
+ justify-self: start;
5766
+ padding: 1rem;
5767
+ font-size: clamp(2rem, 3.2vw, 2.75rem);
5768
+ font-weight: 800;
5769
+ }
5770
+
4519
5771
  .neo-callout-bar > :where(p, div) {
4520
5772
  min-inline-size: 0;
4521
5773
  }
@@ -4525,7 +5777,7 @@
4525
5777
  }
4526
5778
 
4527
5779
  .neo-eyebrow {
4528
- color: var(--neo-primary);
5780
+ color: var(--usk-primary-ink, var(--neo-primary));
4529
5781
  font-family: var(--neo-font-heading);
4530
5782
  letter-spacing: .14em;
4531
5783
  text-transform: uppercase;
@@ -4537,10 +5789,11 @@
4537
5789
 
4538
5790
  .neo-media-scrim {
4539
5791
  isolation: isolate;
4540
- background: var(--neo-surface-soft);
4541
- border: 1px solid var(--neo-border);
4542
- border-radius: var(--neo-radius-lg);
5792
+ background: var(--neo-material-inset);
5793
+ border: 1px solid var(--neo-material-edge);
5794
+ border-radius: var(--neo-radius-xl);
4543
5795
  min-block-size: 12rem;
5796
+ box-shadow: var(--neo-inset-shadow);
4544
5797
  position: relative;
4545
5798
  overflow: hidden;
4546
5799
  }
@@ -4567,87 +5820,101 @@
4567
5820
  color: inherit;
4568
5821
  }
4569
5822
 
4570
- @media (max-width: 42rem) {
4571
- .neo-callout-bar {
4572
- grid-template-columns: 1fr;
4573
- align-items: start;
4574
- }
4575
-
4576
- .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
4577
- justify-self: stretch;
4578
- }
5823
+ [data-ui="neumorphism"][data-mode] :where(fieldset, article, aside, details, dialog) {
5824
+ background-color: var(--neo-material-raised);
5825
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 44%);
5826
+ color: var(--neo-text);
5827
+ border: 1px solid var(--neo-material-hairline);
5828
+ border-radius: var(--neo-radius-xl);
5829
+ box-shadow: var(--neo-raised-shadow);
5830
+ }
4579
5831
 
4580
- .neo-feature-item {
4581
- border-inline-end: 0;
4582
- border-block-end: 1px solid rgb(var(--neo-border-rgb)/.62);
4583
- }
5832
+ [data-ui="neumorphism"][data-mode] :where(legend) {
5833
+ background: var(--neo-material-raised);
5834
+ border: 1px solid var(--neo-material-edge);
5835
+ border-radius: var(--neo-radius-md);
5836
+ box-shadow: var(--neo-raised-shadow-sm);
5837
+ padding: .4rem .75rem;
5838
+ }
4584
5839
 
4585
- .neo-feature-item:last-child {
4586
- border-block-end: 0;
4587
- }
5840
+ [data-ui="neumorphism"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5841
+ background-color: var(--neo-material-raised);
5842
+ background-image: linear-gradient(145deg,var(--neo-material-top-light),transparent 52%);
5843
+ color: var(--neo-text);
5844
+ border: 1px solid var(--neo-material-edge);
5845
+ border-radius: var(--neo-radius-md);
5846
+ box-shadow: var(--neo-button-shadow);
4588
5847
  }
4589
5848
 
4590
- .neo-card-service, .neo-card-feature, .neo-feature-strip, .neo-callout-bar {
4591
- border-color: #0000;
4592
- box-shadow: .65rem .65rem 1.35rem #00000029, -.55rem -.55rem 1.25rem #ffffff14;
5849
+ [data-ui="neumorphism"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])):active {
5850
+ box-shadow: var(--neo-inset-shadow-sm);
5851
+ background-image: none;
5852
+ transform: translateY(1px);
4593
5853
  }
4594
5854
 
4595
- .neo-icon-medallion, .neo-badge-seal {
4596
- border-color: #0000;
4597
- box-shadow: .38rem .38rem .8rem #0000002e, -.3rem -.3rem .7rem #ffffff1a;
5855
+ [data-ui="neumorphism"][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) {
5856
+ background-color: var(--neo-material-inset);
5857
+ color: var(--neo-text);
5858
+ border: 1px solid var(--neo-material-edge);
5859
+ border-radius: var(--neo-radius-md);
5860
+ box-shadow: var(--neo-control-shadow);
4598
5861
  }
4599
5862
 
4600
- .neo-button-outline-heavy {
4601
- border-color: var(--neo-primary);
4602
- box-shadow: inset .18rem .18rem .45rem #0000001f;
5863
+ [data-ui="neumorphism"][data-mode] :where(.neo-input, .neo-textarea, .neo-select):focus, :where([data-ui="neumorphism"])[data-mode] :where(.ui-input,.ui-textarea,.ui-select):focus {
5864
+ border-color: var(--neo-focus);
5865
+ box-shadow: var(--neo-focus-ring);
4603
5866
  }
4604
5867
 
4605
- .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4606
- border-radius: var(--neo-radius-pill);
4607
- min-inline-size: 6rem;
4608
- max-inline-size: 100%;
4609
- clip-path: inset(0 round var(--neo-radius-pill));
4610
- justify-content: center;
4611
- justify-self: center;
5868
+ [data-ui="neumorphism"][data-mode] :where(.neo-input, .neo-textarea, .neo-select)[aria-invalid="true"], [data-ui="neumorphism"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]), :where([data-ui="neumorphism"])[data-mode] :where(.ui-input,.ui-textarea,.ui-select)[aria-invalid="true"] {
5869
+ border-color: var(--neo-danger);
5870
+ box-shadow: 0 0 0 2px rgb(var(--neo-danger-rgb)/.2),var(--neo-inset-shadow-sm);
4612
5871
  }
4613
5872
 
4614
- .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4615
- border-radius: var(--neo-radius-pill);
4616
- clip-path: inset(.08rem round var(--neo-radius-pill));
4617
- box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
4618
- border-width: 1px;
5873
+ [data-ui="neumorphism"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]) {
5874
+ filter: saturate(.72);
5875
+ opacity: .78;
4619
5876
  }
4620
5877
 
4621
- .neo-card-service, .neo-media-scrim, .neo-feature-strip, .neo-callout-bar, .neo-well {
4622
- border: 1px solid rgb(var(--neo-border-rgb)/.36);
4623
- border-radius: var(--neo-radius-xl);
4624
- box-shadow: -.55rem -.55rem 1.15rem rgb(var(--neo-surface-strong-rgb)/.74),.58rem .58rem 1.2rem rgb(var(--neo-text-rgb)/.14);
5878
+ [data-ui="neumorphism"][data-mode] :where(input[type="file"])::file-selector-button {
5879
+ color: var(--neo-text);
5880
+ background: var(--neo-material-raised);
5881
+ border: 1px solid var(--neo-material-edge);
5882
+ border-radius: var(--neo-radius-md);
5883
+ box-shadow: var(--neo-button-shadow);
4625
5884
  }
4626
5885
 
4627
- .neo-well {
4628
- box-shadow: inset .3rem .3rem .7rem rgb(var(--neo-text-rgb)/.12),inset -.3rem -.3rem .7rem rgb(var(--neo-surface-strong-rgb)/.68);
5886
+ [data-ui="neumorphism"][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
5887
+ color: var(--neo-text);
5888
+ background: var(--neo-material-raised);
5889
+ border: 1px solid var(--neo-material-edge);
5890
+ border-radius: var(--neo-radius-md);
5891
+ box-shadow: var(--neo-button-shadow);
4629
5892
  }
4630
5893
 
4631
- [data-ui="neumorphism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4632
- border: 1px solid rgb(var(--neo-border-rgb)/.42);
4633
- border-radius: var(--neo-radius-pill);
4634
- box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
5894
+ [data-ui="neumorphism"][data-mode] :where(dialog) {
5895
+ background-color: var(--neo-material-raised);
5896
+ color: var(--neo-text);
5897
+ border: 1px solid var(--neo-material-hairline);
5898
+ box-shadow: var(--neo-raised-shadow-lg);
4635
5899
  }
4636
5900
 
4637
- [data-ui="neumorphism"][data-theme][data-mode] :where(dialog) {
4638
- border: 1px solid rgb(var(--neo-border-rgb)/.38);
4639
- border-radius: var(--neo-radius-xl);
4640
- box-shadow: -.65rem -.65rem 1.3rem rgb(var(--neo-surface-strong-rgb)/.72),.72rem .72rem 1.45rem rgb(var(--neo-text-rgb)/.2);
5901
+ .neo-button, :where([data-ui="neumorphism"]) .ui-button {
5902
+ border-radius: var(--neo-radius-md);
4641
5903
  }
4642
5904
 
4643
- .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
4644
- border: .12em solid #0000;
4645
- box-shadow: -.09em -.09em .18em #ffffff61,.09em .09em .2em #00000038,inset 0 0 0 .18em rgb(var(--neo-surface-rgb)/.6);
4646
- clip-path: circle(50%);
4647
- background: conic-gradient(currentColor, #0000 42%, currentColor);
4648
- border-block-start-color: currentColor;
4649
- border-radius: 50%;
4650
- animation: 1.04s linear infinite neo-spin;
5905
+ @media (max-width: 42rem) {
5906
+ .neo-callout-bar {
5907
+ grid-template-columns: 1fr;
5908
+ align-items: start;
5909
+ }
5910
+
5911
+ .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
5912
+ justify-self: stretch;
5913
+ }
5914
+
5915
+ .neo-feature-strip {
5916
+ grid-template-columns: 1fr;
5917
+ }
4651
5918
  }
4652
5919
 
4653
5920
  @media (prefers-reduced-motion: reduce) {
@@ -4663,6 +5930,7 @@
4663
5930
  [data-ui="neumorphism"] {
4664
5931
  --neo-border-alpha: 1;
4665
5932
  --neo-focus-alpha: .75;
5933
+ --neo-material-edge: currentColor;
4666
5934
  }
4667
5935
  }
4668
5936
 
@@ -4694,4 +5962,24 @@
4694
5962
  color: #000 !important;
4695
5963
  }
4696
5964
  }
5965
+
5966
+ .neo-feature-item > .neo-icon-medallion {
5967
+ font-size: 1.5rem;
5968
+ line-height: 1;
5969
+ }
5970
+
5971
+ .neo-callout-bar > .neo-icon-medallion {
5972
+ min-block-size: 4.5rem;
5973
+ min-inline-size: 4.5rem;
5974
+ font-size: 2rem;
5975
+ font-weight: 800;
5976
+ line-height: 1;
5977
+ }
5978
+
5979
+ [data-ui="neumorphism"][data-mode] .neo-button.neo-button-warning, :where([data-ui="neumorphism"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
5980
+ background: var(--neo-warning);
5981
+ color: var(--neo-on-warning);
5982
+ border-color: var(--neo-warning);
5983
+ text-shadow: none;
5984
+ }
4697
5985
  }