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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"]) .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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"])[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="editorial-luxe"]) :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="editorial-luxe"]) :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="editorial-luxe"]) :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;
@@ -3533,6 +4190,29 @@
3533
4190
  --lightningcss-light: initial;
3534
4191
  --lightningcss-dark: ;
3535
4192
  color-scheme: light;
4193
+ --luxe-fallback-bg-rgb: 250 244 234;
4194
+ --luxe-fallback-surface-rgb: 255 253 249;
4195
+ --luxe-fallback-surface-strong-rgb: 255 255 255;
4196
+ --luxe-fallback-surface-soft-rgb: 239 228 207;
4197
+ --luxe-fallback-text-rgb: 42 31 26;
4198
+ --luxe-fallback-text-muted-rgb: 109 92 84;
4199
+ --luxe-fallback-border-rgb: 212 192 166;
4200
+ --luxe-fallback-primary-rgb: 107 15 26;
4201
+ --luxe-fallback-primary-hover-rgb: 91 13 22;
4202
+ --luxe-fallback-primary-text-rgb: 255 255 255;
4203
+ --luxe-fallback-secondary-rgb: 17 17 17;
4204
+ --luxe-fallback-secondary-hover-rgb: 0 0 0;
4205
+ --luxe-fallback-secondary-text-rgb: 255 255 255;
4206
+ --luxe-fallback-accent-rgb: 201 154 70;
4207
+ --luxe-fallback-accent-text-rgb: 0 0 0;
4208
+ --luxe-fallback-success-rgb: 47 125 84;
4209
+ --luxe-fallback-success-text-rgb: 255 255 255;
4210
+ --luxe-fallback-warning-rgb: 160 107 19;
4211
+ --luxe-fallback-warning-text-rgb: 0 0 0;
4212
+ --luxe-fallback-danger-rgb: 178 60 60;
4213
+ --luxe-fallback-danger-text-rgb: 255 255 255;
4214
+ --luxe-fallback-link-rgb: 91 13 22;
4215
+ --luxe-fallback-focus-rgb: 201 154 70;
3536
4216
  --luxe-panel-alpha: .98;
3537
4217
  --luxe-panel-soft-alpha: .78;
3538
4218
  --luxe-border-alpha: .58;
@@ -3544,6 +4224,29 @@
3544
4224
  --lightningcss-light: ;
3545
4225
  --lightningcss-dark: initial;
3546
4226
  color-scheme: dark;
4227
+ --luxe-fallback-bg-rgb: 19 13 10;
4228
+ --luxe-fallback-surface-rgb: 33 24 20;
4229
+ --luxe-fallback-surface-strong-rgb: 50 36 30;
4230
+ --luxe-fallback-surface-soft-rgb: 25 18 15;
4231
+ --luxe-fallback-text-rgb: 251 245 236;
4232
+ --luxe-fallback-text-muted-rgb: 211 195 183;
4233
+ --luxe-fallback-border-rgb: 106 82 62;
4234
+ --luxe-fallback-primary-rgb: 201 138 93;
4235
+ --luxe-fallback-primary-hover-rgb: 224 169 126;
4236
+ --luxe-fallback-primary-text-rgb: 0 0 0;
4237
+ --luxe-fallback-secondary-rgb: 246 235 215;
4238
+ --luxe-fallback-secondary-hover-rgb: 255 248 235;
4239
+ --luxe-fallback-secondary-text-rgb: 0 0 0;
4240
+ --luxe-fallback-accent-rgb: 231 184 95;
4241
+ --luxe-fallback-accent-text-rgb: 0 0 0;
4242
+ --luxe-fallback-success-rgb: 152 224 182;
4243
+ --luxe-fallback-success-text-rgb: 0 0 0;
4244
+ --luxe-fallback-warning-rgb: 255 210 122;
4245
+ --luxe-fallback-warning-text-rgb: 0 0 0;
4246
+ --luxe-fallback-danger-rgb: 255 160 154;
4247
+ --luxe-fallback-danger-text-rgb: 0 0 0;
4248
+ --luxe-fallback-link-rgb: 240 200 125;
4249
+ --luxe-fallback-focus-rgb: 231 184 95;
3547
4250
  --luxe-panel-alpha: .92;
3548
4251
  --luxe-panel-soft-alpha: .64;
3549
4252
  --luxe-border-alpha: .52;
@@ -3555,6 +4258,29 @@
3555
4258
  --lightningcss-light: ;
3556
4259
  --lightningcss-dark: initial;
3557
4260
  color-scheme: dark;
4261
+ --luxe-fallback-bg-rgb: 0 0 0;
4262
+ --luxe-fallback-surface-rgb: 15 10 7;
4263
+ --luxe-fallback-surface-strong-rgb: 28 18 13;
4264
+ --luxe-fallback-surface-soft-rgb: 0 0 0;
4265
+ --luxe-fallback-text-rgb: 255 255 255;
4266
+ --luxe-fallback-text-muted-rgb: 255 245 232;
4267
+ --luxe-fallback-border-rgb: 255 255 255;
4268
+ --luxe-fallback-primary-rgb: 200 138 54;
4269
+ --luxe-fallback-primary-hover-rgb: 255 255 255;
4270
+ --luxe-fallback-primary-text-rgb: 0 0 0;
4271
+ --luxe-fallback-secondary-rgb: 255 243 217;
4272
+ --luxe-fallback-secondary-hover-rgb: 255 255 255;
4273
+ --luxe-fallback-secondary-text-rgb: 0 0 0;
4274
+ --luxe-fallback-accent-rgb: 255 211 107;
4275
+ --luxe-fallback-accent-text-rgb: 0 0 0;
4276
+ --luxe-fallback-success-rgb: 0 255 144;
4277
+ --luxe-fallback-success-text-rgb: 0 0 0;
4278
+ --luxe-fallback-warning-rgb: 255 212 0;
4279
+ --luxe-fallback-warning-text-rgb: 0 0 0;
4280
+ --luxe-fallback-danger-rgb: 255 107 107;
4281
+ --luxe-fallback-danger-text-rgb: 0 0 0;
4282
+ --luxe-fallback-link-rgb: 255 211 107;
4283
+ --luxe-fallback-focus-rgb: 255 255 255;
3558
4284
  --luxe-panel-alpha: 1;
3559
4285
  --luxe-panel-soft-alpha: .92;
3560
4286
  --luxe-border-alpha: 1;
@@ -3577,15 +4303,42 @@
3577
4303
  --luxe-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4304
  --luxe-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4305
  --luxe-accent-rgb: var(--usk-accent-rgb);
3580
- --luxe-success-rgb: var(--usk-success-rgb);
3581
- --luxe-warning-rgb: var(--usk-warning-rgb);
3582
- --luxe-danger-rgb: var(--usk-danger-rgb);
3583
- --luxe-link-rgb: var(--usk-link-rgb);
3584
4306
  --luxe-accent-text-rgb: var(--usk-accent-text-rgb);
4307
+ --luxe-success-rgb: var(--usk-success-rgb);
3585
4308
  --luxe-success-text-rgb: var(--usk-success-text-rgb);
4309
+ --luxe-warning-rgb: var(--usk-warning-rgb);
3586
4310
  --luxe-warning-text-rgb: var(--usk-warning-text-rgb);
4311
+ --luxe-danger-rgb: var(--usk-danger-rgb);
3587
4312
  --luxe-danger-text-rgb: var(--usk-danger-text-rgb);
4313
+ --luxe-link-rgb: var(--usk-link-rgb);
3588
4314
  --luxe-focus-rgb: var(--usk-focus-rgb);
4315
+ }
4316
+
4317
+ [data-ui="editorial-luxe"][data-mode] {
4318
+ --usk-native-bg: var(--luxe-bg);
4319
+ --luxe-bg-rgb: var(--usk-bg-rgb, var(--luxe-fallback-bg-rgb));
4320
+ --luxe-surface-rgb: var(--usk-surface-rgb, var(--luxe-fallback-surface-rgb));
4321
+ --luxe-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--luxe-fallback-surface-strong-rgb));
4322
+ --luxe-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--luxe-fallback-surface-soft-rgb));
4323
+ --luxe-text-rgb: var(--usk-text-rgb, var(--luxe-fallback-text-rgb));
4324
+ --luxe-text-muted-rgb: var(--usk-text-muted-rgb, var(--luxe-fallback-text-muted-rgb));
4325
+ --luxe-border-rgb: var(--usk-border-rgb, var(--luxe-fallback-border-rgb));
4326
+ --luxe-primary-rgb: var(--usk-primary-rgb, var(--luxe-fallback-primary-rgb));
4327
+ --luxe-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--luxe-fallback-primary-hover-rgb));
4328
+ --luxe-primary-text-rgb: var(--usk-primary-text-rgb, var(--luxe-fallback-primary-text-rgb));
4329
+ --luxe-secondary-rgb: var(--usk-secondary-rgb, var(--luxe-fallback-secondary-rgb));
4330
+ --luxe-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--luxe-fallback-secondary-hover-rgb));
4331
+ --luxe-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--luxe-fallback-secondary-text-rgb));
4332
+ --luxe-accent-rgb: var(--usk-accent-rgb, var(--luxe-fallback-accent-rgb));
4333
+ --luxe-accent-text-rgb: var(--usk-accent-text-rgb, var(--luxe-fallback-accent-text-rgb));
4334
+ --luxe-success-rgb: var(--usk-success-rgb, var(--luxe-fallback-success-rgb));
4335
+ --luxe-success-text-rgb: var(--usk-success-text-rgb, var(--luxe-fallback-success-text-rgb));
4336
+ --luxe-warning-rgb: var(--usk-warning-rgb, var(--luxe-fallback-warning-rgb));
4337
+ --luxe-warning-text-rgb: var(--usk-warning-text-rgb, var(--luxe-fallback-warning-text-rgb));
4338
+ --luxe-danger-rgb: var(--usk-danger-rgb, var(--luxe-fallback-danger-rgb));
4339
+ --luxe-danger-text-rgb: var(--usk-danger-text-rgb, var(--luxe-fallback-danger-text-rgb));
4340
+ --luxe-link-rgb: var(--usk-link-rgb, var(--luxe-fallback-link-rgb));
4341
+ --luxe-focus-rgb: var(--usk-focus-rgb, var(--luxe-fallback-focus-rgb));
3589
4342
  --usk-native-surface: var(--luxe-surface);
3590
4343
  --usk-native-surface-strong: var(--luxe-surface-strong);
3591
4344
  --usk-native-surface-soft: var(--luxe-surface-soft);
@@ -3615,6 +4368,57 @@
3615
4368
  --usk-native-border-width: 1px;
3616
4369
  --usk-native-field-gap: .5rem;
3617
4370
  --usk-native-panel-padding: var(--luxe-space-5);
4371
+ --usk-native-control-min-block-size: 2.75rem;
4372
+ --usk-native-control-padding-block: .74rem;
4373
+ --usk-native-control-padding-inline: 1rem;
4374
+ --usk-native-subcontrol-padding-block: .58rem;
4375
+ --usk-native-subcontrol-padding-inline: .8rem;
4376
+ --usk-native-choice-size: 1.35rem;
4377
+ --usk-native-choice-background: var(--luxe-control-bg);
4378
+ --usk-native-choice-border: 1px solid var(--luxe-border);
4379
+ --usk-native-checkbox-radius: 0;
4380
+ --usk-native-radio-radius: 50%;
4381
+ --usk-native-choice-shadow: none;
4382
+ --usk-native-choice-checked-background: var(--luxe-primary);
4383
+ --usk-native-choice-mark-color: var(--luxe-on-primary);
4384
+ --usk-native-select-indicator-image: linear-gradient(60deg, transparent 50%, var(--luxe-primary) 50%), linear-gradient(120deg, var(--luxe-primary) 50%, transparent 50%);
4385
+ --usk-native-select-indicator-size: .38rem .38rem, .38rem .38rem;
4386
+ --usk-native-select-indicator-position: calc(100% - 1.24rem) 50%, calc(100% - .9rem) 50%;
4387
+ --usk-native-select-padding-inline-end: 2.7rem;
4388
+ --usk-native-range-track-size: 1px;
4389
+ --usk-native-range-track-background: var(--luxe-surface-soft);
4390
+ --usk-native-range-track-border: 1px solid var(--luxe-border);
4391
+ --usk-native-range-track-radius: 0;
4392
+ --usk-native-range-track-shadow: none;
4393
+ --usk-native-range-progress-background: var(--luxe-primary);
4394
+ --usk-native-range-thumb-size: .85rem;
4395
+ --usk-native-range-thumb-background: var(--luxe-surface-strong);
4396
+ --usk-native-range-thumb-border: 1px solid var(--luxe-border);
4397
+ --usk-native-range-thumb-radius: 50%;
4398
+ --usk-native-range-thumb-shadow: none;
4399
+ --usk-native-progress-size: .28rem;
4400
+ --usk-native-progress-track-background: var(--luxe-surface-soft);
4401
+ --usk-native-progress-track-border: 1px solid var(--luxe-border);
4402
+ --usk-native-progress-track-radius: 0;
4403
+ --usk-native-progress-track-shadow: none;
4404
+ --usk-native-progress-value-background: var(--luxe-primary);
4405
+ --usk-native-progress-value-radius: 0;
4406
+ --usk-native-progress-value-shadow: none;
4407
+ --usk-native-meter-optimum-background: var(--luxe-success);
4408
+ --usk-native-meter-suboptimum-background: var(--luxe-warning);
4409
+ --usk-native-meter-critical-background: var(--luxe-danger);
4410
+ --usk-native-file-button-background: var(--luxe-primary);
4411
+ --usk-native-file-button-border: 1px solid var(--luxe-border);
4412
+ --usk-native-file-button-radius: 0;
4413
+ --usk-native-file-button-shadow: none;
4414
+ --usk-native-color-swatch-border: 1px solid var(--luxe-border);
4415
+ --usk-native-color-swatch-radius: 0;
4416
+ --usk-native-indicator-opacity: .77;
4417
+ --usk-native-indicator-filter: none;
4418
+ --usk-native-scrollbar-size: .55rem;
4419
+ --usk-native-scrollbar-track: var(--luxe-surface-soft);
4420
+ --usk-native-scrollbar-thumb: var(--luxe-primary);
4421
+ --usk-native-scrollbar-radius: 0;
3618
4422
  --luxe-bg: rgb(var(--luxe-bg-rgb));
3619
4423
  --luxe-surface: rgb(var(--luxe-surface-rgb) / var(--luxe-panel-alpha));
3620
4424
  --luxe-surface-strong: rgb(var(--luxe-surface-strong-rgb) / var(--luxe-panel-alpha));
@@ -3655,7 +4459,7 @@
3655
4459
  }
3656
4460
 
3657
4461
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="editorial-luxe"][data-theme][data-mode] {
4462
+ [data-ui="editorial-luxe"][data-mode] {
3659
4463
  --luxe-border: color-mix(in srgb, rgb(var(--luxe-border-rgb) / max(var(--luxe-border-alpha), var(--usk-border-min-alpha))), var(--luxe-text) var(--usk-border-text-mix));
3660
4464
  }
3661
4465
  }
@@ -3674,7 +4478,7 @@
3674
4478
  box-sizing: border-box;
3675
4479
  }
3676
4480
 
3677
- [data-ui="editorial-luxe"][data-theme][data-mode] {
4481
+ [data-ui="editorial-luxe"][data-mode] {
3678
4482
  background: var(--luxe-theme-bg);
3679
4483
  background-size: var(--luxe-theme-bg-size);
3680
4484
  }
@@ -3700,7 +4504,7 @@
3700
4504
  }
3701
4505
 
3702
4506
  .luxe-kicker {
3703
- color: var(--luxe-primary);
4507
+ color: var(--usk-primary-ink, var(--luxe-primary));
3704
4508
  letter-spacing: .12em;
3705
4509
  text-transform: uppercase;
3706
4510
  margin: 0;
@@ -3801,34 +4605,16 @@
3801
4605
  box-shadow: inset 0 3px 10px #0000002e;
3802
4606
  }
3803
4607
 
3804
- .luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
3805
- background: var(--luxe-primary);
3806
- color: var(--luxe-on-primary);
3807
- border-color: var(--luxe-primary);
3808
- }
3809
-
3810
4608
  .luxe-button-primary:hover, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]):hover {
3811
4609
  background: var(--luxe-primary-hover);
3812
4610
  border-color: var(--luxe-primary-hover);
3813
4611
  }
3814
4612
 
3815
- .luxe-button-secondary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]) {
3816
- background: var(--luxe-secondary);
3817
- color: var(--luxe-on-secondary);
3818
- border-color: var(--luxe-secondary);
3819
- }
3820
-
3821
4613
  .luxe-button-secondary:hover, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3822
4614
  background: var(--luxe-secondary-hover);
3823
4615
  border-color: var(--luxe-secondary-hover);
3824
4616
  }
3825
4617
 
3826
- .luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
3827
- background: var(--luxe-danger);
3828
- color: var(--luxe-on-danger);
3829
- border-color: var(--luxe-danger);
3830
- }
3831
-
3832
4618
  .luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
3833
4619
  color: var(--luxe-text);
3834
4620
  box-shadow: none;
@@ -3851,7 +4637,7 @@
3851
4637
  background: var(--luxe-card-bg);
3852
4638
  }
3853
4639
 
3854
- .luxe-toolbar, .luxe-table-wrap, .luxe-button:not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-ghost), .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-toolbar, :where([data-ui="editorial-luxe"]) .ui-table-wrap, :where([data-ui="editorial-luxe"]) .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="editorial-luxe"]) .ui-icon-button {
4640
+ .luxe-toolbar, .luxe-table-wrap, .luxe-button:not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost), .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-toolbar, :where([data-ui="editorial-luxe"]) .ui-table-wrap, :where([data-ui="editorial-luxe"]) .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="editorial-luxe"]) .ui-icon-button {
3855
4641
  background: var(--luxe-control-bg);
3856
4642
  }
3857
4643
 
@@ -4198,7 +4984,7 @@
4198
4984
  }
4199
4985
 
4200
4986
  .luxe-text-primary {
4201
- color: var(--luxe-primary);
4987
+ color: var(--usk-primary-ink, var(--luxe-primary));
4202
4988
  }
4203
4989
 
4204
4990
  .luxe-text-secondary {
@@ -4206,7 +4992,7 @@
4206
4992
  }
4207
4993
 
4208
4994
  .luxe-text-accent {
4209
- color: var(--luxe-accent);
4995
+ color: var(--usk-accent-ink, var(--luxe-accent));
4210
4996
  }
4211
4997
 
4212
4998
  .luxe-text-success {
@@ -4431,7 +5217,7 @@
4431
5217
  }
4432
5218
 
4433
5219
  .luxe-button.luxe-button-outline-heavy, .luxe-button-outline-heavy, :where([data-ui="editorial-luxe"]) .ui-button.luxe-button-outline-heavy {
4434
- color: var(--luxe-primary);
5220
+ color: var(--usk-primary-ink, var(--luxe-primary));
4435
5221
  border-style: solid;
4436
5222
  border-width: 2px;
4437
5223
  border-color: var(--luxe-primary);
@@ -4472,7 +5258,6 @@
4472
5258
  border-radius: var(--luxe-radius-lg);
4473
5259
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4474
5260
  display: grid;
4475
- overflow: hidden;
4476
5261
  }
4477
5262
 
4478
5263
  .luxe-feature-item {
@@ -4515,7 +5300,7 @@
4515
5300
  }
4516
5301
 
4517
5302
  .luxe-eyebrow {
4518
- color: var(--luxe-primary);
5303
+ color: var(--usk-primary-ink, var(--luxe-primary));
4519
5304
  font-family: var(--luxe-font-heading);
4520
5305
  letter-spacing: .14em;
4521
5306
  text-transform: uppercase;
@@ -4605,7 +5390,7 @@
4605
5390
  font-family: var(--luxe-font-body);
4606
5391
  }
4607
5392
 
4608
- [data-ui="editorial-luxe"][data-theme][data-mode] {
5393
+ [data-ui="editorial-luxe"][data-mode] {
4609
5394
  --luxe-theme-bg: linear-gradient(90deg, rgb(var(--luxe-border-rgb) / .09) 1px, transparent 1px) 0 0 / 22rem 100%, linear-gradient(180deg, rgb(var(--luxe-primary-rgb) / .035), transparent 22rem), var(--luxe-bg);
4610
5395
  --luxe-card-bg: linear-gradient(180deg, rgb(var(--luxe-surface-strong-rgb) / var(--luxe-panel-alpha)), rgb(var(--luxe-surface-rgb) / var(--luxe-panel-alpha)));
4611
5396
  }
@@ -4685,7 +5470,7 @@
4685
5470
 
4686
5471
  .luxe-icon-medallion {
4687
5472
  background: var(--luxe-surface-strong);
4688
- color: var(--luxe-primary);
5473
+ color: var(--usk-primary-ink, var(--luxe-primary));
4689
5474
  border: 1px solid var(--luxe-primary);
4690
5475
  box-shadow: none;
4691
5476
  }
@@ -4710,6 +5495,7 @@
4710
5495
  clip-path: polygon(.45rem 0, calc(100% - .45rem) 0, 100% .45rem, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, .45rem 100%, 0 calc(100% - .45rem), 0 .45rem);
4711
5496
  justify-content: center;
4712
5497
  justify-self: start;
5498
+ min-block-size: 2.75rem;
4713
5499
  min-inline-size: 6rem;
4714
5500
  max-inline-size: 100%;
4715
5501
  }
@@ -4727,13 +5513,13 @@
4727
5513
  border-radius: 0;
4728
5514
  }
4729
5515
 
4730
- [data-ui="editorial-luxe"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5516
+ [data-ui="editorial-luxe"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4731
5517
  border: 3px double var(--luxe-primary);
4732
5518
  box-shadow: 0 .18rem 0 rgb(var(--luxe-text-rgb)/.14);
4733
5519
  border-radius: 0;
4734
5520
  }
4735
5521
 
4736
- [data-ui="editorial-luxe"][data-theme][data-mode] :where(dialog) {
5522
+ [data-ui="editorial-luxe"][data-mode] :where(dialog) {
4737
5523
  border: 3px double var(--luxe-border);
4738
5524
  box-shadow: 0 .28rem 0 rgb(var(--luxe-text-rgb)/.16),0 1rem 2rem rgb(var(--luxe-text-rgb)/.16);
4739
5525
  border-radius: 0;
@@ -4757,6 +5543,185 @@
4757
5543
  box-shadow: inset 0 0 0 .05em;
4758
5544
  }
4759
5545
 
5546
+ [data-ui="editorial-luxe"][data-mode] {
5547
+ --usk-native-font-control: var(--luxe-font-heading);
5548
+ --usk-native-control-min-block-size: 2.5rem;
5549
+ --usk-native-control-padding-block: .62rem;
5550
+ --usk-native-control-padding-inline: 1.45rem;
5551
+ --usk-native-border-width: 1px;
5552
+ --usk-native-radius-sm: .02rem;
5553
+ --usk-native-radius: .03rem;
5554
+ --usk-native-radius-lg: .04rem;
5555
+ --usk-native-shadow: inset 0 -1px 0 rgb(var(--luxe-border-rgb) / .54);
5556
+ --usk-native-shadow-md: inset 0 0 0 1px rgb(var(--luxe-border-rgb) / .38), inset 0 0 0 4px var(--luxe-surface-strong);
5557
+ --usk-native-focus-ring: 0 0 0 1px var(--luxe-warning), 0 0 0 4px rgb(var(--luxe-primary-rgb) / .34);
5558
+ --usk-native-subcontrol-padding-block: .39rem;
5559
+ --usk-native-subcontrol-padding-inline: .92rem;
5560
+ --usk-native-choice-size: 1.08rem;
5561
+ --usk-native-choice-background: var(--luxe-control-bg);
5562
+ --usk-native-choice-border: 1px solid var(--luxe-border);
5563
+ --usk-native-checkbox-radius: 0;
5564
+ --usk-native-radio-radius: 50%;
5565
+ --usk-native-choice-shadow: inset 0 0 0 2px var(--luxe-surface-strong);
5566
+ --usk-native-choice-checked-background: var(--luxe-success);
5567
+ --usk-native-choice-mark-color: var(--luxe-on-primary);
5568
+ --usk-native-select-indicator-image: linear-gradient(55deg, transparent 48%, var(--luxe-warning) 49% 51%, transparent 52%), linear-gradient(125deg, transparent 48%, var(--luxe-warning) 49% 51%, transparent 52%);
5569
+ --usk-native-select-indicator-size: .4rem .5rem, .4rem .5rem;
5570
+ --usk-native-select-indicator-position: calc(100% - 1.28rem) 50%, calc(100% - .96rem) 50%;
5571
+ --usk-native-select-padding-inline-end: 2.82rem;
5572
+ --usk-native-range-track-size: 1px;
5573
+ --usk-native-range-track-background: linear-gradient(90deg, var(--luxe-border), rgb(var(--luxe-warning-rgb) / .62), var(--luxe-border));
5574
+ --usk-native-range-track-border: 0 solid transparent;
5575
+ --usk-native-range-track-radius: 0;
5576
+ --usk-native-range-track-shadow: 0 1px 0 var(--luxe-surface-strong);
5577
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--luxe-success), var(--luxe-warning));
5578
+ --usk-native-range-thumb-size: .82rem;
5579
+ --usk-native-range-thumb-background: var(--luxe-warning);
5580
+ --usk-native-range-thumb-border: 1px solid var(--luxe-border);
5581
+ --usk-native-range-thumb-radius: 50%;
5582
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--luxe-surface-strong);
5583
+ --usk-native-progress-size: .22rem;
5584
+ --usk-native-progress-track-background: rgb(var(--luxe-border-rgb) / .24);
5585
+ --usk-native-progress-track-border: 0 solid transparent;
5586
+ --usk-native-progress-track-radius: 0;
5587
+ --usk-native-progress-track-shadow: inset 0 1px 0 rgb(var(--luxe-surface-strong-rgb) / .68);
5588
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--luxe-success), var(--luxe-warning));
5589
+ --usk-native-progress-value-radius: 0;
5590
+ --usk-native-progress-value-shadow: 1px 0 0 var(--luxe-border);
5591
+ --usk-native-scrollbar-size: .42rem;
5592
+ --usk-native-scrollbar-track: var(--luxe-surface-soft);
5593
+ --usk-native-scrollbar-thumb: linear-gradient(180deg, var(--luxe-warning), var(--luxe-border));
5594
+ --usk-native-scrollbar-radius: 0;
5595
+ --usk-native-card-bg: var(--luxe-surface);
5596
+ --usk-native-control-bg: var(--luxe-surface-soft);
5597
+ }
5598
+
5599
+ @supports (color: color-mix(in srgb,black,white)) {
5600
+ [data-ui="editorial-luxe"][data-mode] {
5601
+ --usk-native-card-bg: linear-gradient(90deg, var(--luxe-surface) 0 48%, color-mix(in srgb, var(--luxe-surface) 48%, var(--luxe-primary)) 48% 100%);
5602
+ --usk-native-control-bg: linear-gradient(180deg, color-mix(in srgb, var(--luxe-surface-soft) 55%, var(--luxe-primary)), var(--luxe-surface-soft));
5603
+ }
5604
+ }
5605
+
5606
+ .luxe-title {
5607
+ letter-spacing: max(.02em, .5px);
5608
+ margin-block: .75rem;
5609
+ font-weight: 500;
5610
+ }
5611
+
5612
+ .luxe-label, :where([data-ui="editorial-luxe"]) .ui-label {
5613
+ font-size: .64rem;
5614
+ font-weight: 600;
5615
+ }
5616
+
5617
+ .luxe-button, :where([data-ui="editorial-luxe"]) .ui-button {
5618
+ background: var(--luxe-primary);
5619
+ min-height: 2.5rem;
5620
+ box-shadow: inset 0-1px 0 rgb(var(--luxe-border-rgb)/.54);
5621
+ border-radius: .02rem;
5622
+ padding: .62rem 1.45rem;
5623
+ font-weight: 600;
5624
+ }
5625
+
5626
+ .luxe-input, :where([data-ui="editorial-luxe"]) .ui-input {
5627
+ border-radius: 0;
5628
+ min-height: 2.45rem;
5629
+ padding: .55rem .95rem;
5630
+ }
5631
+
5632
+ .luxe-card, :where([data-ui="editorial-luxe"]) .ui-card {
5633
+ background: linear-gradient(180deg,rgb(var(--luxe-surface-strong-rgb)/.66),transparent),var(--luxe-card-bg);
5634
+ border: 1px solid var(--luxe-border);
5635
+ box-shadow: inset 0 0 0 1px rgb(var(--luxe-border-rgb)/.28),inset 0 0 0 4px var(--luxe-surface-strong);
5636
+ border-radius: .02rem;
5637
+ padding: 1.75rem;
5638
+ }
5639
+
5640
+ .luxe-well {
5641
+ background: linear-gradient(90deg,transparent 0 49.8%,rgb(var(--luxe-border-rgb)/.22) 49.8% 50.2%,transparent 50.2%),var(--luxe-surface-soft);
5642
+ border: 1px solid var(--luxe-border);
5643
+ box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
5644
+ }
5645
+
5646
+ .luxe-badge, :where([data-ui="editorial-luxe"]) .ui-badge {
5647
+ border-radius: 50%;
5648
+ min-height: 1.42rem;
5649
+ padding: .16rem .74rem;
5650
+ }
5651
+
5652
+ .luxe-alert, :where([data-ui="editorial-luxe"]) .ui-alert {
5653
+ background: linear-gradient(90deg,rgb(var(--luxe-primary-rgb)/.08),transparent 36%),var(--luxe-card-bg);
5654
+ border: 1px solid var(--luxe-border);
5655
+ box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
5656
+ border-radius: 0;
5657
+ }
5658
+
5659
+ .luxe-progress, :where([data-ui="editorial-luxe"]) .ui-progress {
5660
+ background: rgb(var(--luxe-border-rgb)/.24);
5661
+ height: .22rem;
5662
+ }
5663
+
5664
+ .luxe-table-wrap, :where([data-ui="editorial-luxe"]) .ui-table-wrap {
5665
+ background: linear-gradient(180deg,rgb(var(--luxe-surface-strong-rgb)/.62),transparent),var(--luxe-card-bg);
5666
+ box-shadow: inset 0 0 0 1px rgb(var(--luxe-border-rgb)/.3);
5667
+ border-radius: 0;
5668
+ }
5669
+
5670
+ .luxe-table th, :where([data-ui="editorial-luxe"]) .ui-table th {
5671
+ background: none;
5672
+ padding: .56rem 1rem;
5673
+ font-weight: 600;
5674
+ }
5675
+
5676
+ .luxe-table td, :where([data-ui="editorial-luxe"]) .ui-table td {
5677
+ padding: .58rem 1rem;
5678
+ }
5679
+
5680
+ .luxe-nav, .luxe-panel, .luxe-toolbar, .luxe-tooltip, [data-ui="editorial-luxe"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar, :where([data-ui="editorial-luxe"]) .ui-nav, :where([data-ui="editorial-luxe"]) .ui-toolbar {
5681
+ border: 1px solid var(--luxe-border);
5682
+ box-shadow: inset 0 0 0 4px var(--luxe-surface-strong);
5683
+ border-radius: 0;
5684
+ }
5685
+
5686
+ .luxe-nav, :where([data-ui="editorial-luxe"]) .ui-nav {
5687
+ border-block-style: solid double;
5688
+ border-block-width: 1px 3px;
5689
+ border-inline: 0;
5690
+ }
5691
+
5692
+ .luxe-card-service, .luxe-feature-item {
5693
+ border-block-start: 3px double var(--luxe-border);
5694
+ }
5695
+
5696
+ .luxe-callout-bar {
5697
+ border-block: 3px double var(--luxe-border);
5698
+ border-inline: 0;
5699
+ }
5700
+
5701
+ .luxe-tooltip-arrow {
5702
+ transform: rotate(45deg);
5703
+ }
5704
+
5705
+ .luxe-progress-bar, :where([data-ui="editorial-luxe"]) .ui-progress-bar {
5706
+ background: linear-gradient(90deg,var(--luxe-success),var(--luxe-warning));
5707
+ }
5708
+
5709
+ .luxe-card, :where([data-ui="editorial-luxe"]) .ui-card {
5710
+ border-radius: .02rem;
5711
+ }
5712
+
5713
+ [data-ui="editorial-luxe"][data-mode] {
5714
+ --usk-native-card-bg: linear-gradient(rgb(var(--luxe-text-rgb) / .12), rgb(var(--luxe-text-rgb) / .12)), var(--luxe-surface);
5715
+ }
5716
+
5717
+ .luxe-panel, .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar {
5718
+ background: linear-gradient(90deg,transparent 0 58%,rgb(var(--luxe-border-rgb)/.32) 58% calc(58% + 1px),transparent calc(58% + 1px)),linear-gradient(rgb(var(--luxe-text-rgb)/.12),rgb(var(--luxe-text-rgb)/.12)),var(--luxe-card-bg);
5719
+ }
5720
+
5721
+ .luxe-feature-strip {
5722
+ background: linear-gradient(90deg,transparent 0 33.333%,rgb(var(--luxe-border-rgb)/.32) 33.333% calc(33.333% + 1px),transparent calc(33.333% + 1px) 66.666%,rgb(var(--luxe-border-rgb)/.32) 66.666% calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(rgb(var(--luxe-text-rgb)/.12),rgb(var(--luxe-text-rgb)/.12)),var(--luxe-card-bg);
5723
+ }
5724
+
4760
5725
  @media (prefers-reduced-motion: reduce) {
4761
5726
  [data-ui="editorial-luxe"] *, [data-ui="editorial-luxe"] :before, [data-ui="editorial-luxe"] :after {
4762
5727
  scroll-behavior: auto !important;
@@ -4801,4 +5766,1095 @@
4801
5766
  color: #000 !important;
4802
5767
  }
4803
5768
  }
5769
+
5770
+ .luxe-input[aria-invalid="true"], .luxe-textarea[aria-invalid="true"], .luxe-select[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-input[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-textarea[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-select[aria-invalid="true"] {
5771
+ border-color: var(--luxe-danger);
5772
+ box-shadow: 0 0 0 2px rgb(var(--luxe-danger-rgb)/.18);
5773
+ }
5774
+
5775
+ .luxe-input[readonly], .luxe-textarea[readonly], :where([data-ui="editorial-luxe"]) .ui-input[readonly], :where([data-ui="editorial-luxe"]) .ui-textarea[readonly] {
5776
+ filter: saturate(.72);
5777
+ opacity: .78;
5778
+ border-style: dashed;
5779
+ }
5780
+
5781
+ .luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
5782
+ background: var(--luxe-primary);
5783
+ color: var(--luxe-on-primary);
5784
+ border-color: var(--luxe-primary);
5785
+ }
5786
+
5787
+ .luxe-button-secondary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]) {
5788
+ background: var(--luxe-surface);
5789
+ color: var(--luxe-text);
5790
+ border-color: var(--luxe-border);
5791
+ }
5792
+
5793
+ .luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
5794
+ background: var(--luxe-danger);
5795
+ color: var(--luxe-on-danger);
5796
+ border-color: var(--luxe-danger);
5797
+ }
5798
+
5799
+ .luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
5800
+ color: var(--usk-primary-ink, var(--luxe-primary));
5801
+ background: none;
5802
+ border-color: #0000;
5803
+ }
5804
+
5805
+ .luxe-feature-item > .luxe-icon-medallion {
5806
+ font-size: 1.5rem;
5807
+ line-height: 1;
5808
+ }
5809
+
5810
+ .luxe-callout-bar > .luxe-icon-medallion {
5811
+ min-block-size: 4.5rem;
5812
+ min-inline-size: 4.5rem;
5813
+ font-size: 2rem;
5814
+ font-weight: 800;
5815
+ line-height: 1;
5816
+ }
5817
+
5818
+ [data-ui="editorial-luxe"][data-mode="light"] {
5819
+ --luxe-fallback-bg-rgb: 248 245 239;
5820
+ --luxe-fallback-surface-rgb: 248 245 239;
5821
+ --luxe-fallback-surface-strong-rgb: 255 253 250;
5822
+ --luxe-fallback-surface-soft-rgb: 222 219 212;
5823
+ --luxe-fallback-text-rgb: 17 20 19;
5824
+ --luxe-fallback-text-muted-rgb: 99 96 90;
5825
+ --luxe-fallback-border-rgb: 112 109 101;
5826
+ --luxe-fallback-primary-rgb: 18 50 41;
5827
+ --luxe-fallback-primary-hover-rgb: 39 72 61;
5828
+ --luxe-fallback-primary-text-rgb: 244 240 232;
5829
+ --luxe-fallback-secondary-rgb: 17 20 19;
5830
+ --luxe-fallback-secondary-text-rgb: 244 240 232;
5831
+ --luxe-fallback-accent-rgb: 165 130 70;
5832
+ --luxe-fallback-accent-text-rgb: 17 20 19;
5833
+ --luxe-fallback-success-rgb: 18 50 41;
5834
+ --luxe-fallback-success-text-rgb: 244 240 232;
5835
+ --luxe-fallback-warning-rgb: 130 94 35;
5836
+ --luxe-fallback-warning-text-rgb: 255 255 255;
5837
+ --luxe-fallback-danger-rgb: 125 17 19;
5838
+ --luxe-fallback-danger-text-rgb: 255 255 255;
5839
+ --luxe-fallback-link-rgb: 125 17 19;
5840
+ --luxe-fallback-focus-rgb: 130 94 35;
5841
+ --luxe-status-success: rgb(var(--usk-success-rgb, 18 50 41));
5842
+ --luxe-status-danger: rgb(var(--usk-danger-rgb, 125 17 19));
5843
+ }
5844
+
5845
+ [data-ui="editorial-luxe"][data-mode="dark"] {
5846
+ --luxe-fallback-bg-rgb: 14 17 16;
5847
+ --luxe-fallback-surface-rgb: 14 17 16;
5848
+ --luxe-fallback-surface-strong-rgb: 18 22 21;
5849
+ --luxe-fallback-surface-soft-rgb: 48 50 48;
5850
+ --luxe-fallback-text-rgb: 232 223 210;
5851
+ --luxe-fallback-text-muted-rgb: 172 163 151;
5852
+ --luxe-fallback-border-rgb: 149 130 92;
5853
+ --luxe-fallback-primary-rgb: 24 56 46;
5854
+ --luxe-fallback-primary-hover-rgb: 40 73 62;
5855
+ --luxe-fallback-primary-text-rgb: 232 223 210;
5856
+ --luxe-fallback-secondary-rgb: 232 223 210;
5857
+ --luxe-fallback-secondary-text-rgb: 17 20 19;
5858
+ --luxe-fallback-accent-rgb: 195 164 106;
5859
+ --luxe-fallback-accent-text-rgb: 17 20 19;
5860
+ --luxe-fallback-success-rgb: 24 56 46;
5861
+ --luxe-fallback-success-text-rgb: 232 223 210;
5862
+ --luxe-fallback-warning-rgb: 195 164 106;
5863
+ --luxe-fallback-warning-text-rgb: 17 20 19;
5864
+ --luxe-fallback-danger-rgb: 141 27 28;
5865
+ --luxe-fallback-danger-text-rgb: 255 255 255;
5866
+ --luxe-fallback-link-rgb: 232 223 210;
5867
+ --luxe-fallback-focus-rgb: 195 164 106;
5868
+ --luxe-status-success: rgb(var(--usk-success-rgb, 151 196 172));
5869
+ --luxe-status-danger: rgb(var(--usk-danger-rgb, 239 151 152));
5870
+ }
5871
+
5872
+ [data-ui="editorial-luxe"][data-mode="contrast"] {
5873
+ --luxe-status-success: var(--luxe-success);
5874
+ --luxe-status-danger: var(--luxe-danger);
5875
+ }
5876
+
5877
+ [data-ui="editorial-luxe"][data-mode] {
5878
+ --luxe-font-display: Didot, "Bodoni MT", "Times New Roman", serif;
5879
+ --luxe-font-heading: var(--luxe-font-display);
5880
+ --luxe-font-body: "Iowan Old Style", Georgia, serif;
5881
+ --luxe-font-control: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
5882
+ --luxe-brass: rgb(var(--usk-accent-rgb, 165 130 70));
5883
+ --luxe-brass-light: rgb(var(--usk-accent-rgb, 196 166 109));
5884
+ --luxe-on-brass: rgb(var(--usk-accent-text-rgb, 17 20 19));
5885
+ --luxe-rule-soft: rgb(var(--luxe-border-rgb) / .35);
5886
+ --luxe-card-bg: var(--luxe-surface);
5887
+ --luxe-control-bg: transparent;
5888
+ --luxe-radius-xs: 0;
5889
+ --luxe-radius-sm: 0;
5890
+ --luxe-radius-md: 0;
5891
+ --luxe-radius-lg: 0;
5892
+ --usk-native-font-control: var(--luxe-font-control);
5893
+ --usk-native-card-bg: var(--luxe-surface);
5894
+ --usk-native-control-bg: transparent;
5895
+ --usk-native-shadow: none;
5896
+ --usk-native-shadow-md: none;
5897
+ --usk-native-control-min-block-size: 2.125rem;
5898
+ --usk-native-control-padding-block: .375rem;
5899
+ --usk-native-control-padding-inline: .75rem;
5900
+ --usk-native-range-track-background: var(--luxe-border);
5901
+ --usk-native-range-progress-background: var(--luxe-border);
5902
+ --usk-native-range-thumb-background: var(--luxe-brass-light);
5903
+ --usk-native-range-thumb-border: 1px solid var(--luxe-brass);
5904
+ --usk-native-progress-value-background: var(--luxe-primary);
5905
+ --usk-native-choice-checked-background: var(--luxe-primary);
5906
+ }
5907
+
5908
+ .luxe-sheet {
5909
+ border: 4px double var(--luxe-border);
5910
+ outline: 1px solid var(--luxe-rule-soft);
5911
+ outline-offset: -12px;
5912
+ color: var(--luxe-text);
5913
+ background: var(--luxe-surface);
5914
+ font-family: var(--luxe-font-body);
5915
+ padding: 32px;
5916
+ position: relative;
5917
+ }
5918
+
5919
+ .luxe-sheet *, .luxe-sheet :before, .luxe-sheet :after {
5920
+ box-sizing: border-box;
5921
+ letter-spacing: 0;
5922
+ }
5923
+
5924
+ [data-ui="editorial-luxe"][data-mode] .luxe-sheet :where(article, aside, section, figure, fieldset) {
5925
+ box-shadow: none;
5926
+ background: none;
5927
+ border: 0;
5928
+ border-radius: 0;
5929
+ padding: 0;
5930
+ }
5931
+
5932
+ .luxe-masthead {
5933
+ border-bottom: 1px solid var(--luxe-border);
5934
+ justify-content: space-between;
5935
+ align-items: start;
5936
+ gap: 24px;
5937
+ padding-bottom: 16px;
5938
+ display: flex;
5939
+ }
5940
+
5941
+ .luxe-masthead .luxe-kicker {
5942
+ color: var(--luxe-text-muted);
5943
+ }
5944
+
5945
+ .luxe-badge-seal > strong {
5946
+ font-size: 28px;
5947
+ line-height: 1;
5948
+ }
5949
+
5950
+ .luxe-badge-seal > small {
5951
+ font-size: 12px;
5952
+ line-height: 1.25;
5953
+ }
5954
+
5955
+ [data-ui="editorial-luxe"][data-mode] .luxe-masthead-title {
5956
+ font-family: var(--luxe-font-display);
5957
+ text-transform: uppercase;
5958
+ letter-spacing: 0;
5959
+ margin: 0;
5960
+ font-size: 76px;
5961
+ font-weight: 400;
5962
+ line-height: 1;
5963
+ }
5964
+
5965
+ .luxe-collection-rail {
5966
+ align-content: start;
5967
+ gap: 24px;
5968
+ display: grid;
5969
+ }
5970
+
5971
+ .luxe-collection-rail ol {
5972
+ counter-reset: collection;
5973
+ margin: 0;
5974
+ padding: 0;
5975
+ list-style: none;
5976
+ }
5977
+
5978
+ .luxe-collection-rail li {
5979
+ counter-increment: collection;
5980
+ font-family: var(--luxe-font-control);
5981
+ align-items: center;
5982
+ gap: 16px;
5983
+ margin-bottom: 12px;
5984
+ display: flex;
5985
+ }
5986
+
5987
+ .luxe-collection-rail li:before {
5988
+ content: counter(collection,decimal-leading-zero);
5989
+ font: 10px var(--luxe-font-mono);
5990
+ color: var(--luxe-text-muted);
5991
+ }
5992
+
5993
+ .luxe-portrait {
5994
+ aspect-ratio: 388 / 434;
5995
+ border: 1px solid var(--luxe-border);
5996
+ overflow: hidden;
5997
+ }
5998
+
5999
+ .luxe-portrait img {
6000
+ object-fit: cover;
6001
+ width: 100%;
6002
+ height: 100%;
6003
+ display: block;
6004
+ }
6005
+
6006
+ .luxe-story {
6007
+ flex-direction: column;
6008
+ align-items: start;
6009
+ gap: 20px;
6010
+ display: flex;
6011
+ }
6012
+
6013
+ [data-ui="editorial-luxe"][data-mode] .luxe-story-title {
6014
+ font: 400 62px/.96 var(--luxe-font-display);
6015
+ letter-spacing: 0;
6016
+ text-transform: uppercase;
6017
+ margin: 0;
6018
+ }
6019
+
6020
+ .luxe-byline {
6021
+ font: 10px/1.5 var(--luxe-font-control);
6022
+ text-transform: uppercase;
6023
+ margin: auto 0 0;
6024
+ }
6025
+
6026
+ .luxe-deck {
6027
+ max-width: 34ch;
6028
+ font: 15px/1.5 var(--luxe-font-body);
6029
+ margin: 0;
6030
+ }
6031
+
6032
+ .luxe-colophon {
6033
+ border-top: 1px solid var(--luxe-border);
6034
+ flex-wrap: wrap;
6035
+ justify-content: space-between;
6036
+ gap: 16px;
6037
+ padding-top: 20px;
6038
+ font-size: 11px;
6039
+ display: flex;
6040
+ }
6041
+
6042
+ [data-ui="editorial-luxe"][data-mode] .luxe-section-title {
6043
+ font: 12px/1.4 var(--luxe-font-control);
6044
+ text-transform: uppercase;
6045
+ align-items: center;
6046
+ gap: 16px;
6047
+ margin: 0 0 20px;
6048
+ display: flex;
6049
+ }
6050
+
6051
+ .luxe-section-title:after {
6052
+ content: "";
6053
+ background: var(--luxe-border);
6054
+ flex: 1;
6055
+ height: 1px;
6056
+ }
6057
+
6058
+ .luxe-section-number {
6059
+ font: 10px var(--luxe-font-mono);
6060
+ color: var(--luxe-status-danger);
6061
+ }
6062
+
6063
+ .luxe-sheet .luxe-label, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-label {
6064
+ color: var(--luxe-text-muted);
6065
+ font: 10px/1.4 var(--luxe-font-control);
6066
+ text-transform: uppercase;
6067
+ margin: 0;
6068
+ }
6069
+
6070
+ .luxe-button, .luxe-icon-button, :where([data-ui="editorial-luxe"]) .ui-button, :where([data-ui="editorial-luxe"]) .ui-icon-button {
6071
+ border: 1px solid var(--luxe-border);
6072
+ clip-path: none;
6073
+ min-height: 34px;
6074
+ box-shadow: none;
6075
+ font-family: var(--luxe-font-control);
6076
+ border-radius: 0;
6077
+ padding: 8px 16px;
6078
+ font-weight: 400;
6079
+ }
6080
+
6081
+ .luxe-sheet .luxe-button, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-button {
6082
+ text-transform: uppercase;
6083
+ white-space: nowrap;
6084
+ justify-content: center;
6085
+ align-items: center;
6086
+ gap: 8px;
6087
+ font-size: 11px;
6088
+ line-height: 1.35;
6089
+ display: inline-flex;
6090
+ }
6091
+
6092
+ .luxe-button-primary, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="primary"]) {
6093
+ color: var(--luxe-on-primary);
6094
+ background: var(--luxe-primary);
6095
+ border-color: var(--luxe-primary);
6096
+ }
6097
+
6098
+ .luxe-button-secondary, .luxe-button-ghost, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="ghost"]) {
6099
+ color: var(--luxe-text);
6100
+ border-color: var(--luxe-border);
6101
+ background: none;
6102
+ }
6103
+
6104
+ .luxe-button-danger, :where([data-ui="editorial-luxe"]) .ui-button:where([data-ui-variant="danger"]) {
6105
+ color: var(--luxe-on-danger);
6106
+ background: var(--luxe-danger);
6107
+ border-color: var(--luxe-danger);
6108
+ }
6109
+
6110
+ .luxe-button:before, :where([data-ui="editorial-luxe"]) .ui-button:before {
6111
+ content: none;
6112
+ }
6113
+
6114
+ .luxe-button:hover:not(:disabled), :where([data-ui="editorial-luxe"]) .ui-button:hover:not(:disabled) {
6115
+ box-shadow: inset 0 0 0 1px var(--luxe-brass);
6116
+ }
6117
+
6118
+ .luxe-button:active, .luxe-button.is-pressed, :where([data-ui="editorial-luxe"]) .ui-button:active, :where([data-ui="editorial-luxe"]) .ui-button.is-pressed {
6119
+ box-shadow: inset 0 0 0 1px var(--luxe-brass);
6120
+ transform: none;
6121
+ }
6122
+
6123
+ .luxe-button:disabled, :where([data-ui="editorial-luxe"]) .ui-button:disabled {
6124
+ color: var(--luxe-text-muted);
6125
+ background: var(--luxe-surface-soft);
6126
+ border-color: var(--luxe-rule-soft);
6127
+ box-shadow: none;
6128
+ opacity: .65;
6129
+ }
6130
+
6131
+ .luxe-input, .luxe-select, .luxe-textarea, :where([data-ui="editorial-luxe"]) .ui-input, :where([data-ui="editorial-luxe"]) .ui-select, :where([data-ui="editorial-luxe"]) .ui-textarea {
6132
+ min-height: 34px;
6133
+ color: var(--luxe-text);
6134
+ border: 1px solid var(--luxe-border);
6135
+ box-shadow: none;
6136
+ background-color: #0000;
6137
+ border-radius: 0;
6138
+ padding: 8px 10px;
6139
+ }
6140
+
6141
+ .luxe-sheet :is(.luxe-input, .luxe-select, .luxe-textarea), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(.ui-input,.ui-select,.ui-textarea) {
6142
+ width: 100%;
6143
+ min-width: 0;
6144
+ font: 12px/1.4 var(--luxe-font-body);
6145
+ }
6146
+
6147
+ .luxe-textarea, :where([data-ui="editorial-luxe"]) .ui-textarea {
6148
+ resize: vertical;
6149
+ }
6150
+
6151
+ .luxe-input.luxe-input-valid, :where([data-ui="editorial-luxe"]) .ui-input.luxe-input-valid {
6152
+ border-color: var(--luxe-status-success);
6153
+ box-shadow: inset 2px 0 var(--luxe-status-success);
6154
+ }
6155
+
6156
+ .luxe-input[aria-invalid="true"], :where([data-ui="editorial-luxe"]) .ui-input[aria-invalid="true"] {
6157
+ border-color: var(--luxe-status-danger);
6158
+ box-shadow: inset 2px 0 var(--luxe-status-danger);
6159
+ }
6160
+
6161
+ .luxe-help-error {
6162
+ color: var(--luxe-status-danger);
6163
+ font-size: 12px;
6164
+ }
6165
+
6166
+ .luxe-file-upload {
6167
+ display: grid;
6168
+ position: relative;
6169
+ }
6170
+
6171
+ .luxe-file-upload input {
6172
+ opacity: 0;
6173
+ cursor: pointer;
6174
+ width: 100%;
6175
+ position: absolute;
6176
+ inset: 0;
6177
+ }
6178
+
6179
+ .luxe-file-drop {
6180
+ border: 1px solid var(--luxe-border);
6181
+ min-height: 160px;
6182
+ color: var(--luxe-text);
6183
+ text-align: center;
6184
+ font: 11px/1.5 var(--luxe-font-control);
6185
+ text-transform: uppercase;
6186
+ align-content: center;
6187
+ justify-items: center;
6188
+ gap: 16px;
6189
+ padding: 16px;
6190
+ display: grid;
6191
+ }
6192
+
6193
+ .luxe-file-drop svg {
6194
+ stroke-width: 1px;
6195
+ width: 36px;
6196
+ height: 36px;
6197
+ }
6198
+
6199
+ .luxe-file-upload:focus-within, .luxe-switch-segment:focus-within {
6200
+ outline: 2px solid var(--luxe-focus);
6201
+ outline-offset: 3px;
6202
+ }
6203
+
6204
+ .luxe-select-panel {
6205
+ border: 1px solid var(--luxe-border);
6206
+ padding: 4px;
6207
+ }
6208
+
6209
+ .luxe-option {
6210
+ width: 100%;
6211
+ min-height: 34px;
6212
+ box-shadow: none;
6213
+ color: var(--luxe-text);
6214
+ font: 11px var(--luxe-font-control);
6215
+ text-align: left;
6216
+ text-transform: uppercase;
6217
+ background: none;
6218
+ border: 0;
6219
+ border-radius: 0;
6220
+ padding: 8px 10px;
6221
+ display: block;
6222
+ }
6223
+
6224
+ .luxe-option[aria-selected="true"] {
6225
+ color: var(--luxe-on-danger);
6226
+ background: var(--luxe-danger);
6227
+ }
6228
+
6229
+ .luxe-check, .luxe-radio, :where([data-ui="editorial-luxe"]) .ui-check, :where([data-ui="editorial-luxe"]) .ui-radio {
6230
+ min-height: 32px;
6231
+ font: 11px var(--luxe-font-control);
6232
+ gap: 8px;
6233
+ }
6234
+
6235
+ .luxe-sheet :is(.luxe-check, .luxe-radio), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(.ui-check,.ui-radio) {
6236
+ margin: 0;
6237
+ display: flex;
6238
+ }
6239
+
6240
+ .luxe-check-control, .luxe-radio-control, :where([data-ui="editorial-luxe"]) .ui-check-control, :where([data-ui="editorial-luxe"]) .ui-radio-control {
6241
+ border: 1px solid var(--luxe-border);
6242
+ width: 16px;
6243
+ min-width: 16px;
6244
+ height: 16px;
6245
+ box-shadow: none;
6246
+ background: none;
6247
+ }
6248
+
6249
+ .luxe-check input:checked + .luxe-check-control, .luxe-radio input:checked + .luxe-radio-control, :where([data-ui="editorial-luxe"]) .ui-check input:checked+.ui-check-control, :where([data-ui="editorial-luxe"]) .ui-radio input:checked+.ui-radio-control {
6250
+ background: var(--luxe-primary);
6251
+ color: var(--luxe-on-primary);
6252
+ border-color: var(--luxe-border);
6253
+ }
6254
+
6255
+ .luxe-check input:checked + .luxe-check-control:after, :where([data-ui="editorial-luxe"]) .ui-check input:checked+.ui-check-control:after {
6256
+ content: "";
6257
+ border: 2px solid;
6258
+ border-width: 0 2px 2px 0;
6259
+ width: 4px;
6260
+ height: 8px;
6261
+ display: block;
6262
+ transform: translateY(-1px) rotate(45deg);
6263
+ }
6264
+
6265
+ .luxe-switch-segment {
6266
+ border: 1px solid var(--luxe-border);
6267
+ cursor: pointer;
6268
+ grid-template-columns: repeat(2, 1fr);
6269
+ width: 140px;
6270
+ min-height: 36px;
6271
+ display: inline-grid;
6272
+ position: relative;
6273
+ }
6274
+
6275
+ .luxe-switch-segment input {
6276
+ opacity: 0;
6277
+ width: 100%;
6278
+ height: 100%;
6279
+ margin: 0;
6280
+ position: absolute;
6281
+ }
6282
+
6283
+ .luxe-switch-segment span {
6284
+ min-height: 34px;
6285
+ font: 11px var(--luxe-font-control);
6286
+ text-transform: uppercase;
6287
+ place-items: center;
6288
+ display: grid;
6289
+ }
6290
+
6291
+ .luxe-switch-segment input:not(:checked) ~ span:first-of-type, .luxe-switch-segment input:checked ~ span:last-of-type {
6292
+ color: var(--luxe-on-primary);
6293
+ background: var(--luxe-primary);
6294
+ }
6295
+
6296
+ .luxe-range {
6297
+ appearance: none;
6298
+ background: none;
6299
+ border: 0;
6300
+ width: 100%;
6301
+ height: 28px;
6302
+ margin: 0;
6303
+ padding: 0;
6304
+ }
6305
+
6306
+ .luxe-range::-webkit-slider-runnable-track {
6307
+ background: var(--luxe-border);
6308
+ height: 1px;
6309
+ }
6310
+
6311
+ .luxe-range::-webkit-slider-thumb {
6312
+ appearance: none;
6313
+ border: 1px solid var(--luxe-brass);
6314
+ background: var(--luxe-brass-light);
6315
+ border-radius: 50%;
6316
+ width: 16px;
6317
+ height: 16px;
6318
+ margin-top: -7px;
6319
+ }
6320
+
6321
+ .luxe-range::-moz-range-track {
6322
+ background: var(--luxe-border);
6323
+ height: 1px;
6324
+ }
6325
+
6326
+ .luxe-range::-moz-range-thumb {
6327
+ border: 1px solid var(--luxe-brass);
6328
+ background: var(--luxe-brass-light);
6329
+ border-radius: 50%;
6330
+ width: 14px;
6331
+ height: 14px;
6332
+ }
6333
+
6334
+ .luxe-range-scale {
6335
+ color: var(--luxe-text-muted);
6336
+ font: 10px var(--luxe-font-mono);
6337
+ justify-content: space-between;
6338
+ display: flex;
6339
+ position: relative;
6340
+ }
6341
+
6342
+ .luxe-range-scale:before {
6343
+ content: "";
6344
+ background: repeating-linear-gradient(90deg,var(--luxe-rule-soft)0 1px,transparent 1px 12.5%);
6345
+ pointer-events: none;
6346
+ height: 6px;
6347
+ position: absolute;
6348
+ inset: -18px 0 auto;
6349
+ }
6350
+
6351
+ .luxe-progress, :where([data-ui="editorial-luxe"]) .ui-progress {
6352
+ background: var(--luxe-surface-soft);
6353
+ border: 0;
6354
+ border-radius: 0;
6355
+ height: 8px;
6356
+ }
6357
+
6358
+ .luxe-progress-bar, :where([data-ui="editorial-luxe"]) .ui-progress-bar {
6359
+ background: var(--luxe-primary);
6360
+ height: 100%;
6361
+ display: block;
6362
+ }
6363
+
6364
+ .luxe-segmented-progress {
6365
+ grid-template-columns: repeat(4, 1fr);
6366
+ gap: 5px;
6367
+ height: 5px;
6368
+ display: grid;
6369
+ }
6370
+
6371
+ .luxe-segmented-progress i {
6372
+ background: var(--luxe-surface-soft);
6373
+ }
6374
+
6375
+ .luxe-segmented-progress .is-done {
6376
+ background: var(--luxe-brass);
6377
+ }
6378
+
6379
+ .luxe-meter {
6380
+ background: linear-gradient(90deg,var(--luxe-danger)0 25%,var(--luxe-brass) 25% 66%,var(--luxe-surface-soft) 66%);
6381
+ height: 8px;
6382
+ position: relative;
6383
+ }
6384
+
6385
+ .luxe-meter:after {
6386
+ content: "";
6387
+ left: clamp(0%,calc(var(--luxe-value, 80)*1%),100%);
6388
+ background: var(--luxe-status-success);
6389
+ width: 3px;
6390
+ height: 18px;
6391
+ position: absolute;
6392
+ top: -5px;
6393
+ }
6394
+
6395
+ .luxe-alert, :where([data-ui="editorial-luxe"]) .ui-alert {
6396
+ border: 1px solid var(--luxe-status-success);
6397
+ box-shadow: none;
6398
+ font: 12px/1.45 var(--luxe-font-body);
6399
+ background: none;
6400
+ align-items: center;
6401
+ gap: 8px;
6402
+ padding: 8px;
6403
+ display: flex;
6404
+ }
6405
+
6406
+ .luxe-alert > div, :where([data-ui="editorial-luxe"]) .ui-alert>div {
6407
+ flex: 1;
6408
+ min-width: 0;
6409
+ }
6410
+
6411
+ .luxe-alert-mark, .luxe-alert-close {
6412
+ flex-shrink: 0;
6413
+ }
6414
+
6415
+ .luxe-alert-success, :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="success"]) {
6416
+ --luxe-alert-color: var(--luxe-status-success);
6417
+ --luxe-alert-fill: var(--luxe-success);
6418
+ --luxe-alert-ink: var(--luxe-on-success);
6419
+ }
6420
+
6421
+ .luxe-sheet .luxe-alert-warning, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-alert:where([data-ui-variant="warning"]) {
6422
+ --luxe-alert-color: var(--luxe-warning);
6423
+ --luxe-alert-fill: var(--luxe-warning);
6424
+ --luxe-alert-ink: var(--luxe-on-warning);
6425
+ border-color: var(--luxe-warning);
6426
+ }
6427
+
6428
+ .luxe-sheet .luxe-alert-danger, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-alert:where([data-ui-variant="danger"]) {
6429
+ --luxe-alert-color: var(--luxe-status-danger);
6430
+ --luxe-alert-fill: var(--luxe-danger);
6431
+ --luxe-alert-ink: var(--luxe-on-danger);
6432
+ border-color: var(--luxe-status-danger);
6433
+ }
6434
+
6435
+ .luxe-alert strong, :where([data-ui="editorial-luxe"]) .ui-alert strong {
6436
+ color: var(--luxe-alert-color);
6437
+ font: 600 10px/1.4 var(--luxe-font-control);
6438
+ text-transform: uppercase;
6439
+ display: block;
6440
+ }
6441
+
6442
+ .luxe-alert-mark {
6443
+ width: 24px;
6444
+ height: 24px;
6445
+ color: var(--luxe-alert-ink);
6446
+ background: var(--luxe-alert-fill);
6447
+ border-radius: 50%;
6448
+ place-items: center;
6449
+ display: grid;
6450
+ }
6451
+
6452
+ .luxe-alert-mark svg {
6453
+ width: 16px;
6454
+ height: 16px;
6455
+ }
6456
+
6457
+ .luxe-alert-mark > span {
6458
+ place-items: center;
6459
+ width: 100%;
6460
+ height: 100%;
6461
+ line-height: 1;
6462
+ display: grid;
6463
+ }
6464
+
6465
+ .luxe-alert-mark svg {
6466
+ display: block;
6467
+ }
6468
+
6469
+ .luxe-badge-warning, .luxe-alert-warning .luxe-alert-mark, :where([data-ui="editorial-luxe"]) .ui-badge:where([data-ui-variant="warning"]), :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="warning"]) .luxe-alert-mark {
6470
+ color: #fff;
6471
+ background: #624315;
6472
+ }
6473
+
6474
+ @supports (color: color-mix(in srgb,#fff,#000)) {
6475
+ .luxe-badge-warning, .luxe-alert-warning .luxe-alert-mark, :where([data-ui="editorial-luxe"]) .ui-badge:where([data-ui-variant="warning"]), :where([data-ui="editorial-luxe"]) .ui-alert:where([data-ui-variant="warning"]) .luxe-alert-mark {
6476
+ background: color-mix(in srgb,var(--luxe-warning) 45%,#000);
6477
+ }
6478
+ }
6479
+
6480
+ .luxe-alert-close {
6481
+ width: 24px;
6482
+ min-height: 24px;
6483
+ box-shadow: none;
6484
+ color: var(--luxe-text-muted);
6485
+ background: none;
6486
+ border: 0;
6487
+ place-items: center;
6488
+ padding: 0;
6489
+ display: grid;
6490
+ }
6491
+
6492
+ .luxe-alert-close svg {
6493
+ width: 16px;
6494
+ height: 16px;
6495
+ }
6496
+
6497
+ .luxe-tabs {
6498
+ border: 0;
6499
+ }
6500
+
6501
+ .luxe-tab-list {
6502
+ border-bottom: 1px solid var(--luxe-border);
6503
+ display: flex;
6504
+ }
6505
+
6506
+ .luxe-tab {
6507
+ min-width: 0;
6508
+ min-height: 34px;
6509
+ box-shadow: none;
6510
+ color: var(--luxe-text);
6511
+ font: 11px var(--luxe-font-control);
6512
+ text-transform: uppercase;
6513
+ background: none;
6514
+ border: 1px solid #0000;
6515
+ border-radius: 0;
6516
+ flex: 1;
6517
+ padding: 8px;
6518
+ }
6519
+
6520
+ .luxe-tab[aria-selected="true"] {
6521
+ border-color: var(--luxe-border);
6522
+ border-bottom-color: var(--luxe-surface);
6523
+ }
6524
+
6525
+ .luxe-tab-panel {
6526
+ padding: 20px 0;
6527
+ font-size: 13px;
6528
+ line-height: 1.5;
6529
+ }
6530
+
6531
+ .luxe-table-wrap, :where([data-ui="editorial-luxe"]) .ui-table-wrap {
6532
+ box-shadow: none;
6533
+ background: none;
6534
+ border: 0;
6535
+ overflow-x: auto;
6536
+ }
6537
+
6538
+ .luxe-sheet .luxe-table, :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-table {
6539
+ font: 12px/1.4 var(--luxe-font-body);
6540
+ border: 0;
6541
+ }
6542
+
6543
+ .luxe-table th, :where([data-ui="editorial-luxe"]) .ui-table th {
6544
+ border-block: 1px solid var(--luxe-border);
6545
+ color: var(--luxe-text);
6546
+ font: 10px var(--luxe-font-control);
6547
+ text-transform: uppercase;
6548
+ background: none;
6549
+ }
6550
+
6551
+ .luxe-table td, :where([data-ui="editorial-luxe"]) .ui-table td {
6552
+ border-bottom: 1px solid var(--luxe-rule-soft);
6553
+ }
6554
+
6555
+ .luxe-sheet .luxe-table :is(th, td), :where([data-ui="editorial-luxe"]) .luxe-sheet .ui-table :is(th,td) {
6556
+ white-space: nowrap;
6557
+ padding: 8px 6px;
6558
+ }
6559
+
6560
+ .luxe-badge-medallion {
6561
+ border: 4px double var(--luxe-brass-light);
6562
+ width: 48px;
6563
+ height: 48px;
6564
+ color: var(--luxe-on-primary);
6565
+ background: var(--luxe-primary);
6566
+ font: 10px var(--luxe-font-control);
6567
+ text-transform: uppercase;
6568
+ border-radius: 50%;
6569
+ place-items: center;
6570
+ padding: 4px;
6571
+ display: inline-grid;
6572
+ }
6573
+
6574
+ .luxe-badge-medallion.luxe-badge-danger, :where([data-ui="editorial-luxe"]) .luxe-badge-medallion.ui-badge:where([data-ui-variant="danger"]) {
6575
+ color: var(--luxe-on-danger);
6576
+ background: var(--luxe-danger);
6577
+ }
6578
+
6579
+ .luxe-badge-brass {
6580
+ color: var(--luxe-on-brass);
6581
+ background: var(--luxe-brass-light);
6582
+ }
6583
+
6584
+ .luxe-pagination {
6585
+ display: inline-flex;
6586
+ }
6587
+
6588
+ .luxe-pagination button {
6589
+ border: 1px solid var(--luxe-rule-soft);
6590
+ width: 32px;
6591
+ min-height: 34px;
6592
+ box-shadow: none;
6593
+ color: var(--luxe-text);
6594
+ font: 11px var(--luxe-font-mono);
6595
+ background: none;
6596
+ border-radius: 0;
6597
+ padding: 4px;
6598
+ }
6599
+
6600
+ .luxe-pagination button[aria-current="page"] {
6601
+ color: var(--luxe-on-primary);
6602
+ background: var(--luxe-primary);
6603
+ }
6604
+
6605
+ .luxe-stepper {
6606
+ border: 1px solid var(--luxe-border);
6607
+ grid-template-columns: 36px 64px 36px;
6608
+ display: inline-grid;
6609
+ }
6610
+
6611
+ .luxe-stepper :is(button, output) {
6612
+ min-height: 34px;
6613
+ box-shadow: none;
6614
+ color: var(--luxe-text);
6615
+ font: 12px var(--luxe-font-mono);
6616
+ background: none;
6617
+ border: 0;
6618
+ border-radius: 0;
6619
+ place-items: center;
6620
+ padding: 0;
6621
+ display: grid;
6622
+ }
6623
+
6624
+ .luxe-stepper output {
6625
+ border-inline: 1px solid var(--luxe-rule-soft);
6626
+ }
6627
+
6628
+ .luxe-stepper svg, .luxe-pagination svg {
6629
+ width: 16px;
6630
+ height: 16px;
6631
+ }
6632
+
6633
+ .luxe-tooltip, [data-ui="editorial-luxe"] :where(.ui-tooltip, [role="tooltip"]) {
6634
+ color: var(--luxe-on-primary);
6635
+ background: var(--luxe-primary);
6636
+ box-shadow: none;
6637
+ font: 12px/1.5 var(--luxe-font-body);
6638
+ border: 0;
6639
+ padding: 16px;
6640
+ position: relative;
6641
+ }
6642
+
6643
+ .luxe-tooltip:after {
6644
+ content: "";
6645
+ background: var(--luxe-primary);
6646
+ width: 14px;
6647
+ height: 14px;
6648
+ position: absolute;
6649
+ bottom: -7px;
6650
+ left: 24px;
6651
+ rotate: 45deg;
6652
+ }
6653
+
6654
+ .luxe-dialog {
6655
+ border: 3px double var(--luxe-border);
6656
+ max-width: 520px;
6657
+ color: var(--luxe-text);
6658
+ background: var(--luxe-surface-strong);
6659
+ box-shadow: none;
6660
+ text-align: center;
6661
+ border-radius: 0;
6662
+ padding: 16px;
6663
+ }
6664
+
6665
+ .luxe-sheet .luxe-dialog {
6666
+ border: 3px double var(--luxe-border);
6667
+ background: var(--luxe-surface-strong);
6668
+ padding: 12px;
6669
+ }
6670
+
6671
+ dialog.luxe-dialog:not([open]) {
6672
+ display: none;
6673
+ }
6674
+
6675
+ dialog.luxe-dialog[open] {
6676
+ width: min(520px, 100% - 32px);
6677
+ margin: auto;
6678
+ position: fixed;
6679
+ inset: 0;
6680
+ }
6681
+
6682
+ .luxe-dialog::backdrop {
6683
+ background: #0009;
6684
+ }
6685
+
6686
+ .luxe-dialog-actions {
6687
+ flex-wrap: wrap;
6688
+ justify-content: center;
6689
+ gap: 12px;
6690
+ margin-top: 12px;
6691
+ display: flex;
6692
+ }
6693
+
6694
+ .luxe-details {
6695
+ border-top: 1px solid var(--luxe-border);
6696
+ font-size: 12px;
6697
+ }
6698
+
6699
+ .luxe-details summary {
6700
+ font-family: var(--luxe-font-control);
6701
+ padding: 12px 0;
6702
+ }
6703
+
6704
+ [data-ui="editorial-luxe"][data-mode] details.luxe-details {
6705
+ border: 0;
6706
+ border-top: 1px solid var(--luxe-border);
6707
+ box-shadow: none;
6708
+ background: none;
6709
+ padding: 0;
6710
+ }
6711
+
6712
+ .luxe-skeleton {
6713
+ gap: 8px;
6714
+ display: grid;
6715
+ }
6716
+
6717
+ .luxe-skeleton i {
6718
+ background: var(--luxe-surface-soft);
6719
+ height: 6px;
6720
+ animation: 1.7s ease-in-out infinite luxe-pulse;
6721
+ }
6722
+
6723
+ .luxe-skeleton i:nth-child(2) {
6724
+ width: 76%;
6725
+ }
6726
+
6727
+ .luxe-spinner, .luxe-loading-spinner, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
6728
+ width: 28px;
6729
+ height: 28px;
6730
+ border: 2px solid var(--luxe-rule-soft);
6731
+ border-top-color: var(--luxe-brass);
6732
+ border-bottom-color: var(--luxe-brass);
6733
+ block-size: 28px;
6734
+ inline-size: 28px;
6735
+ box-shadow: none;
6736
+ clip-path: none;
6737
+ background: none;
6738
+ border-radius: 50%;
6739
+ flex-shrink: 0;
6740
+ animation: 1.8s linear infinite luxe-spin;
6741
+ position: relative;
6742
+ }
6743
+
6744
+ .luxe-spinner:before, .luxe-loading-spinner:before, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):before {
6745
+ content: "";
6746
+ border: 1px solid #0000;
6747
+ border-inline-color: var(--luxe-text);
6748
+ border-radius: 50%;
6749
+ animation: 1.2s linear infinite luxe-counter-spin;
6750
+ position: absolute;
6751
+ inset: 4px;
6752
+ }
6753
+
6754
+ .luxe-spinner-sm {
6755
+ width: 18px;
6756
+ height: 18px;
6757
+ block-size: 18px;
6758
+ inline-size: 18px;
6759
+ }
6760
+
6761
+ .luxe-spinner-lg {
6762
+ width: 40px;
6763
+ height: 40px;
6764
+ block-size: 40px;
6765
+ inline-size: 40px;
6766
+ }
6767
+
6768
+ .luxe-spinner-sm:before {
6769
+ inset: 2px;
6770
+ }
6771
+
6772
+ .luxe-button[aria-busy="true"]:after, [data-ui="editorial-luxe"] :where(button[aria-busy="true"]):after, :where([data-ui="editorial-luxe"]) .ui-button[aria-busy="true"]:after {
6773
+ width: 12px;
6774
+ height: 12px;
6775
+ box-shadow: none;
6776
+ clip-path: none;
6777
+ background: none;
6778
+ border: 2px solid;
6779
+ border-right-color: #0000;
6780
+ border-radius: 50%;
6781
+ flex: 0 0 12px;
6782
+ animation: .9s linear infinite luxe-spin;
6783
+ }
6784
+
6785
+ .luxe-sheet [hidden] {
6786
+ display: none !important;
6787
+ }
6788
+
6789
+ .luxe-sheet :is(button, a, input, select, textarea, [tabindex]):focus-visible {
6790
+ outline: 2px solid var(--luxe-focus);
6791
+ outline-offset: 3px;
6792
+ }
6793
+
6794
+ .luxe-card, .luxe-panel, .luxe-toolbar, .luxe-well, .luxe-card-service, .luxe-feature-strip, .luxe-callout-bar, :where([data-ui="editorial-luxe"]) .ui-card, :where([data-ui="editorial-luxe"]) .ui-toolbar {
6795
+ background: var(--luxe-surface);
6796
+ border: 1px solid var(--luxe-border);
6797
+ box-shadow: none;
6798
+ border-radius: 0;
6799
+ }
6800
+
6801
+ [data-ui="editorial-luxe"][data-mode] :where(fieldset, article, aside) {
6802
+ background: var(--luxe-surface);
6803
+ }
6804
+
6805
+ @keyframes luxe-pulse {
6806
+ 50% {
6807
+ opacity: .45;
6808
+ }
6809
+ }
6810
+
6811
+ @keyframes luxe-counter-spin {
6812
+ to {
6813
+ transform: rotate(-360deg);
6814
+ }
6815
+ }
6816
+
6817
+ @media (prefers-reduced-motion: reduce) {
6818
+ .luxe-spinner, .luxe-loading-spinner, .luxe-spinner:before, .luxe-loading-spinner:before, [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), [data-ui="editorial-luxe"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):before, .luxe-spinner, .luxe-skeleton i, .luxe-button[aria-busy="true"]:after, [data-ui="editorial-luxe"] :where(.ui-spinner, button[aria-busy="true"]):after, :where([data-ui="editorial-luxe"]) .ui-button[aria-busy="true"]:after {
6819
+ animation: none !important;
6820
+ }
6821
+ }
6822
+
6823
+ @media (pointer: coarse) {
6824
+ .luxe-sheet :is(button, .luxe-input, .luxe-select, .luxe-check, .luxe-radio, .luxe-switch-segment, .luxe-range, .luxe-file-drop), :where([data-ui="editorial-luxe"]) .luxe-sheet :is(button,.ui-input,.ui-select,.ui-check,.ui-radio,.luxe-switch-segment,.luxe-range,.luxe-file-drop) {
6825
+ min-height: 44px;
6826
+ }
6827
+
6828
+ .luxe-sheet .luxe-alert-close, .luxe-sheet .luxe-pagination button {
6829
+ width: 44px;
6830
+ }
6831
+
6832
+ .luxe-sheet .luxe-stepper {
6833
+ grid-template-columns: 44px 64px 44px;
6834
+ }
6835
+ }
6836
+
6837
+ [data-ui="editorial-luxe"][data-mode] .luxe-button.luxe-button-warning, :where([data-ui="editorial-luxe"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
6838
+ background: var(--luxe-warning);
6839
+ color: var(--luxe-on-warning);
6840
+ border-color: var(--luxe-warning);
6841
+ text-shadow: none;
6842
+ }
6843
+
6844
+ [data-ui="editorial-luxe"][data-theme][data-mode="contrast"] .luxe-button.luxe-button-danger, :where([data-ui="editorial-luxe"])[data-theme][data-mode="contrast"] .ui-button.ui-button:where([data-ui-variant="danger"]) {
6845
+ color: rgb(var(--usk-danger-text-rgb, 0 0 0));
6846
+ text-shadow: none;
6847
+ background: #ff5270;
6848
+ border-color: #ff5270;
6849
+ }
6850
+
6851
+ [data-ui="editorial-luxe"][data-mode] .luxe-badge-seal > strong {
6852
+ font-size: 28px;
6853
+ line-height: 1;
6854
+ }
6855
+
6856
+ [data-ui="editorial-luxe"][data-mode] .luxe-badge-seal > small {
6857
+ font-size: 12px;
6858
+ line-height: 1.25;
6859
+ }
4804
6860
  }