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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"]) .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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"])[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="art-deco"]) :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="art-deco"]) :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="art-deco"]) :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
+ --deco-fallback-bg-rgb: 250 244 234;
4194
+ --deco-fallback-surface-rgb: 255 253 249;
4195
+ --deco-fallback-surface-strong-rgb: 255 255 255;
4196
+ --deco-fallback-surface-soft-rgb: 239 228 207;
4197
+ --deco-fallback-text-rgb: 42 31 26;
4198
+ --deco-fallback-text-muted-rgb: 109 92 84;
4199
+ --deco-fallback-border-rgb: 212 192 166;
4200
+ --deco-fallback-primary-rgb: 107 15 26;
4201
+ --deco-fallback-primary-hover-rgb: 91 13 22;
4202
+ --deco-fallback-primary-text-rgb: 255 255 255;
4203
+ --deco-fallback-secondary-rgb: 17 17 17;
4204
+ --deco-fallback-secondary-hover-rgb: 0 0 0;
4205
+ --deco-fallback-secondary-text-rgb: 255 255 255;
4206
+ --deco-fallback-accent-rgb: 201 154 70;
4207
+ --deco-fallback-accent-text-rgb: 0 0 0;
4208
+ --deco-fallback-success-rgb: 47 125 84;
4209
+ --deco-fallback-success-text-rgb: 255 255 255;
4210
+ --deco-fallback-warning-rgb: 160 107 19;
4211
+ --deco-fallback-warning-text-rgb: 0 0 0;
4212
+ --deco-fallback-danger-rgb: 178 60 60;
4213
+ --deco-fallback-danger-text-rgb: 255 255 255;
4214
+ --deco-fallback-link-rgb: 91 13 22;
4215
+ --deco-fallback-focus-rgb: 201 154 70;
3536
4216
  --deco-panel-alpha: .98;
3537
4217
  --deco-panel-soft-alpha: .78;
3538
4218
  --deco-border-alpha: .58;
@@ -3544,6 +4224,29 @@
3544
4224
  --lightningcss-light: ;
3545
4225
  --lightningcss-dark: initial;
3546
4226
  color-scheme: dark;
4227
+ --deco-fallback-bg-rgb: 19 13 10;
4228
+ --deco-fallback-surface-rgb: 33 24 20;
4229
+ --deco-fallback-surface-strong-rgb: 50 36 30;
4230
+ --deco-fallback-surface-soft-rgb: 25 18 15;
4231
+ --deco-fallback-text-rgb: 251 245 236;
4232
+ --deco-fallback-text-muted-rgb: 211 195 183;
4233
+ --deco-fallback-border-rgb: 106 82 62;
4234
+ --deco-fallback-primary-rgb: 201 138 93;
4235
+ --deco-fallback-primary-hover-rgb: 224 169 126;
4236
+ --deco-fallback-primary-text-rgb: 0 0 0;
4237
+ --deco-fallback-secondary-rgb: 246 235 215;
4238
+ --deco-fallback-secondary-hover-rgb: 255 248 235;
4239
+ --deco-fallback-secondary-text-rgb: 0 0 0;
4240
+ --deco-fallback-accent-rgb: 231 184 95;
4241
+ --deco-fallback-accent-text-rgb: 0 0 0;
4242
+ --deco-fallback-success-rgb: 152 224 182;
4243
+ --deco-fallback-success-text-rgb: 0 0 0;
4244
+ --deco-fallback-warning-rgb: 255 210 122;
4245
+ --deco-fallback-warning-text-rgb: 0 0 0;
4246
+ --deco-fallback-danger-rgb: 255 160 154;
4247
+ --deco-fallback-danger-text-rgb: 0 0 0;
4248
+ --deco-fallback-link-rgb: 240 200 125;
4249
+ --deco-fallback-focus-rgb: 231 184 95;
3547
4250
  --deco-panel-alpha: .92;
3548
4251
  --deco-panel-soft-alpha: .64;
3549
4252
  --deco-border-alpha: .52;
@@ -3555,6 +4258,29 @@
3555
4258
  --lightningcss-light: ;
3556
4259
  --lightningcss-dark: initial;
3557
4260
  color-scheme: dark;
4261
+ --deco-fallback-bg-rgb: 0 0 0;
4262
+ --deco-fallback-surface-rgb: 15 10 7;
4263
+ --deco-fallback-surface-strong-rgb: 28 18 13;
4264
+ --deco-fallback-surface-soft-rgb: 0 0 0;
4265
+ --deco-fallback-text-rgb: 255 255 255;
4266
+ --deco-fallback-text-muted-rgb: 255 245 232;
4267
+ --deco-fallback-border-rgb: 255 255 255;
4268
+ --deco-fallback-primary-rgb: 200 138 54;
4269
+ --deco-fallback-primary-hover-rgb: 255 255 255;
4270
+ --deco-fallback-primary-text-rgb: 0 0 0;
4271
+ --deco-fallback-secondary-rgb: 255 243 217;
4272
+ --deco-fallback-secondary-hover-rgb: 255 255 255;
4273
+ --deco-fallback-secondary-text-rgb: 0 0 0;
4274
+ --deco-fallback-accent-rgb: 255 211 107;
4275
+ --deco-fallback-accent-text-rgb: 0 0 0;
4276
+ --deco-fallback-success-rgb: 0 255 144;
4277
+ --deco-fallback-success-text-rgb: 0 0 0;
4278
+ --deco-fallback-warning-rgb: 255 212 0;
4279
+ --deco-fallback-warning-text-rgb: 0 0 0;
4280
+ --deco-fallback-danger-rgb: 255 107 107;
4281
+ --deco-fallback-danger-text-rgb: 0 0 0;
4282
+ --deco-fallback-link-rgb: 255 211 107;
4283
+ --deco-fallback-focus-rgb: 255 255 255;
3558
4284
  --deco-panel-alpha: 1;
3559
4285
  --deco-panel-soft-alpha: .92;
3560
4286
  --deco-border-alpha: 1;
@@ -3577,15 +4303,42 @@
3577
4303
  --deco-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4304
  --deco-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4305
  --deco-accent-rgb: var(--usk-accent-rgb);
3580
- --deco-success-rgb: var(--usk-success-rgb);
3581
- --deco-warning-rgb: var(--usk-warning-rgb);
3582
- --deco-danger-rgb: var(--usk-danger-rgb);
3583
- --deco-link-rgb: var(--usk-link-rgb);
3584
4306
  --deco-accent-text-rgb: var(--usk-accent-text-rgb);
4307
+ --deco-success-rgb: var(--usk-success-rgb);
3585
4308
  --deco-success-text-rgb: var(--usk-success-text-rgb);
4309
+ --deco-warning-rgb: var(--usk-warning-rgb);
3586
4310
  --deco-warning-text-rgb: var(--usk-warning-text-rgb);
4311
+ --deco-danger-rgb: var(--usk-danger-rgb);
3587
4312
  --deco-danger-text-rgb: var(--usk-danger-text-rgb);
4313
+ --deco-link-rgb: var(--usk-link-rgb);
3588
4314
  --deco-focus-rgb: var(--usk-focus-rgb);
4315
+ }
4316
+
4317
+ [data-ui="art-deco"][data-mode] {
4318
+ --usk-native-bg: var(--deco-bg);
4319
+ --deco-bg-rgb: var(--usk-bg-rgb, var(--deco-fallback-bg-rgb));
4320
+ --deco-surface-rgb: var(--usk-surface-rgb, var(--deco-fallback-surface-rgb));
4321
+ --deco-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--deco-fallback-surface-strong-rgb));
4322
+ --deco-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--deco-fallback-surface-soft-rgb));
4323
+ --deco-text-rgb: var(--usk-text-rgb, var(--deco-fallback-text-rgb));
4324
+ --deco-text-muted-rgb: var(--usk-text-muted-rgb, var(--deco-fallback-text-muted-rgb));
4325
+ --deco-border-rgb: var(--usk-border-rgb, var(--deco-fallback-border-rgb));
4326
+ --deco-primary-rgb: var(--usk-primary-rgb, var(--deco-fallback-primary-rgb));
4327
+ --deco-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--deco-fallback-primary-hover-rgb));
4328
+ --deco-primary-text-rgb: var(--usk-primary-text-rgb, var(--deco-fallback-primary-text-rgb));
4329
+ --deco-secondary-rgb: var(--usk-secondary-rgb, var(--deco-fallback-secondary-rgb));
4330
+ --deco-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--deco-fallback-secondary-hover-rgb));
4331
+ --deco-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--deco-fallback-secondary-text-rgb));
4332
+ --deco-accent-rgb: var(--usk-accent-rgb, var(--deco-fallback-accent-rgb));
4333
+ --deco-accent-text-rgb: var(--usk-accent-text-rgb, var(--deco-fallback-accent-text-rgb));
4334
+ --deco-success-rgb: var(--usk-success-rgb, var(--deco-fallback-success-rgb));
4335
+ --deco-success-text-rgb: var(--usk-success-text-rgb, var(--deco-fallback-success-text-rgb));
4336
+ --deco-warning-rgb: var(--usk-warning-rgb, var(--deco-fallback-warning-rgb));
4337
+ --deco-warning-text-rgb: var(--usk-warning-text-rgb, var(--deco-fallback-warning-text-rgb));
4338
+ --deco-danger-rgb: var(--usk-danger-rgb, var(--deco-fallback-danger-rgb));
4339
+ --deco-danger-text-rgb: var(--usk-danger-text-rgb, var(--deco-fallback-danger-text-rgb));
4340
+ --deco-link-rgb: var(--usk-link-rgb, var(--deco-fallback-link-rgb));
4341
+ --deco-focus-rgb: var(--usk-focus-rgb, var(--deco-fallback-focus-rgb));
3589
4342
  --usk-native-surface: var(--deco-surface);
3590
4343
  --usk-native-surface-strong: var(--deco-surface-strong);
3591
4344
  --usk-native-surface-soft: var(--deco-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(--deco-space-5);
4371
+ --usk-native-control-min-block-size: 2.125rem;
4372
+ --usk-native-control-padding-block: .35rem;
4373
+ --usk-native-control-padding-inline: .7rem;
4374
+ --usk-native-subcontrol-padding-block: .3rem;
4375
+ --usk-native-subcontrol-padding-inline: .6rem;
4376
+ --usk-native-choice-size: 1rem;
4377
+ --usk-native-choice-background: var(--deco-control-bg);
4378
+ --usk-native-choice-border: 1px solid var(--deco-border);
4379
+ --usk-native-checkbox-radius: .12rem;
4380
+ --usk-native-radio-radius: 50%;
4381
+ --usk-native-choice-shadow: 0 0 0 2px var(--deco-surface-strong);
4382
+ --usk-native-choice-checked-background: var(--deco-primary);
4383
+ --usk-native-choice-mark-color: var(--deco-on-primary);
4384
+ --usk-native-select-indicator-image: linear-gradient(72deg, transparent 50%, var(--deco-primary) 50%), linear-gradient(108deg, var(--deco-primary) 50%, transparent 50%);
4385
+ --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
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: .48rem;
4389
+ --usk-native-range-track-background: var(--deco-surface-soft);
4390
+ --usk-native-range-track-border: 1px solid var(--deco-border);
4391
+ --usk-native-range-track-radius: .08rem;
4392
+ --usk-native-range-track-shadow: 0 0 0 2px var(--deco-surface-strong);
4393
+ --usk-native-range-progress-background: var(--deco-primary);
4394
+ --usk-native-range-thumb-size: 1.35rem;
4395
+ --usk-native-range-thumb-background: var(--deco-surface-strong);
4396
+ --usk-native-range-thumb-border: 1px solid var(--deco-border);
4397
+ --usk-native-range-thumb-radius: 50%;
4398
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--deco-surface-strong);
4399
+ --usk-native-progress-size: .7rem;
4400
+ --usk-native-progress-track-background: var(--deco-surface-soft);
4401
+ --usk-native-progress-track-border: 1px solid var(--deco-border);
4402
+ --usk-native-progress-track-radius: .08rem;
4403
+ --usk-native-progress-track-shadow: 0 0 0 2px var(--deco-surface-strong);
4404
+ --usk-native-progress-value-background: var(--deco-primary);
4405
+ --usk-native-progress-value-radius: .08rem;
4406
+ --usk-native-progress-value-shadow: 0 0 0 2px var(--deco-surface-strong);
4407
+ --usk-native-meter-optimum-background: var(--deco-success);
4408
+ --usk-native-meter-suboptimum-background: var(--deco-warning);
4409
+ --usk-native-meter-critical-background: var(--deco-danger);
4410
+ --usk-native-file-button-background: var(--deco-primary);
4411
+ --usk-native-file-button-border: 1px solid var(--deco-border);
4412
+ --usk-native-file-button-radius: .12rem;
4413
+ --usk-native-file-button-shadow: 0 0 0 2px var(--deco-surface-strong);
4414
+ --usk-native-color-swatch-border: 1px solid var(--deco-border);
4415
+ --usk-native-color-swatch-radius: .12rem;
4416
+ --usk-native-indicator-opacity: .72;
4417
+ --usk-native-indicator-filter: none;
4418
+ --usk-native-scrollbar-size: .7rem;
4419
+ --usk-native-scrollbar-track: var(--deco-surface-soft);
4420
+ --usk-native-scrollbar-thumb: var(--deco-primary);
4421
+ --usk-native-scrollbar-radius: .08rem;
3618
4422
  --deco-bg: rgb(var(--deco-bg-rgb));
3619
4423
  --deco-surface: rgb(var(--deco-surface-rgb) / var(--deco-panel-alpha));
3620
4424
  --deco-surface-strong: rgb(var(--deco-surface-strong-rgb) / var(--deco-panel-alpha));
@@ -3655,7 +4459,7 @@
3655
4459
  }
3656
4460
 
3657
4461
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="art-deco"][data-theme][data-mode] {
4462
+ [data-ui="art-deco"][data-mode] {
3659
4463
  --deco-border: color-mix(in srgb, rgb(var(--deco-border-rgb) / max(var(--deco-border-alpha), var(--usk-border-min-alpha))), var(--deco-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="art-deco"][data-theme][data-mode] {
4481
+ [data-ui="art-deco"][data-mode] {
3678
4482
  background: var(--deco-theme-bg);
3679
4483
  background-size: var(--deco-theme-bg-size);
3680
4484
  }
@@ -3700,7 +4504,7 @@
3700
4504
  }
3701
4505
 
3702
4506
  .deco-kicker {
3703
- color: var(--deco-primary);
4507
+ color: var(--usk-primary-ink, var(--deco-primary));
3704
4508
  letter-spacing: .12em;
3705
4509
  text-transform: uppercase;
3706
4510
  margin: 0;
@@ -3735,10 +4539,6 @@
3735
4539
  position: relative;
3736
4540
  }
3737
4541
 
3738
- .deco-card, .deco-panel, :where([data-ui="art-deco"]) .ui-card {
3739
- padding: var(--deco-space-6);
3740
- }
3741
-
3742
4542
  .deco-toolbar, :where([data-ui="art-deco"]) .ui-toolbar {
3743
4543
  justify-content: space-between;
3744
4544
  align-items: center;
@@ -3805,34 +4605,16 @@
3805
4605
  box-shadow: inset 0 3px 10px #0000002e;
3806
4606
  }
3807
4607
 
3808
- .deco-button-primary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]) {
3809
- background: var(--deco-primary);
3810
- color: var(--deco-on-primary);
3811
- border-color: var(--deco-primary);
3812
- }
3813
-
3814
4608
  .deco-button-primary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]):hover {
3815
4609
  background: var(--deco-primary-hover);
3816
4610
  border-color: var(--deco-primary-hover);
3817
4611
  }
3818
4612
 
3819
- .deco-button-secondary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]) {
3820
- background: var(--deco-secondary);
3821
- color: var(--deco-on-secondary);
3822
- border-color: var(--deco-secondary);
3823
- }
3824
-
3825
4613
  .deco-button-secondary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3826
4614
  background: var(--deco-secondary-hover);
3827
4615
  border-color: var(--deco-secondary-hover);
3828
4616
  }
3829
4617
 
3830
- .deco-button-danger, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="danger"]) {
3831
- background: var(--deco-danger);
3832
- color: var(--deco-on-danger);
3833
- border-color: var(--deco-danger);
3834
- }
3835
-
3836
4618
  .deco-button-ghost, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="ghost"]) {
3837
4619
  color: var(--deco-text);
3838
4620
  box-shadow: none;
@@ -3855,7 +4637,7 @@
3855
4637
  background: var(--deco-card-bg);
3856
4638
  }
3857
4639
 
3858
- .deco-toolbar, .deco-table-wrap, .deco-button:not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-ghost), .deco-icon-button, :where([data-ui="art-deco"]) .ui-toolbar, :where([data-ui="art-deco"]) .ui-table-wrap, :where([data-ui="art-deco"]) .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="art-deco"]) .ui-icon-button {
4640
+ .deco-toolbar, .deco-table-wrap, .deco-button:not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost), .deco-icon-button, :where([data-ui="art-deco"]) .ui-toolbar, :where([data-ui="art-deco"]) .ui-table-wrap, :where([data-ui="art-deco"]) .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="art-deco"]) .ui-icon-button {
3859
4641
  background: var(--deco-control-bg);
3860
4642
  }
3861
4643
 
@@ -4034,30 +4816,6 @@
4034
4816
  border-color: var(--deco-primary);
4035
4817
  }
4036
4818
 
4037
- .deco-badge-secondary, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="secondary"]) {
4038
- background: var(--deco-secondary);
4039
- color: var(--deco-on-secondary);
4040
- border-color: var(--deco-secondary);
4041
- }
4042
-
4043
- .deco-badge-success, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="success"]) {
4044
- background: var(--deco-success);
4045
- color: var(--deco-on-success);
4046
- border-color: var(--deco-success);
4047
- }
4048
-
4049
- .deco-badge-warning, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="warning"]) {
4050
- background: var(--deco-warning);
4051
- color: var(--deco-on-warning);
4052
- border-color: var(--deco-warning);
4053
- }
4054
-
4055
- .deco-badge-danger, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="danger"]) {
4056
- background: var(--deco-danger);
4057
- color: var(--deco-on-danger);
4058
- border-color: var(--deco-danger);
4059
- }
4060
-
4061
4819
  .deco-nav, :where([data-ui="art-deco"]) .ui-nav {
4062
4820
  align-items: center;
4063
4821
  gap: var(--deco-space-2);
@@ -4202,7 +4960,7 @@
4202
4960
  }
4203
4961
 
4204
4962
  .deco-text-primary {
4205
- color: var(--deco-primary);
4963
+ color: var(--usk-primary-ink, var(--deco-primary));
4206
4964
  }
4207
4965
 
4208
4966
  .deco-text-secondary {
@@ -4210,7 +4968,7 @@
4210
4968
  }
4211
4969
 
4212
4970
  .deco-text-accent {
4213
- color: var(--deco-accent);
4971
+ color: var(--usk-accent-ink, var(--deco-accent));
4214
4972
  }
4215
4973
 
4216
4974
  .deco-text-success {
@@ -4239,10 +4997,6 @@
4239
4997
  border: 1px solid var(--deco-border);
4240
4998
  }
4241
4999
 
4242
- .deco-rounded {
4243
- border-radius: var(--deco-radius-md);
4244
- }
4245
-
4246
5000
  .deco-rounded-lg {
4247
5001
  border-radius: var(--deco-radius-lg);
4248
5002
  }
@@ -4435,7 +5189,7 @@
4435
5189
  }
4436
5190
 
4437
5191
  .deco-button.deco-button-outline-heavy, .deco-button-outline-heavy, :where([data-ui="art-deco"]) .ui-button.deco-button-outline-heavy {
4438
- color: var(--deco-primary);
5192
+ color: var(--usk-primary-ink, var(--deco-primary));
4439
5193
  border-style: solid;
4440
5194
  border-width: 2px;
4441
5195
  border-color: var(--deco-primary);
@@ -4476,7 +5230,6 @@
4476
5230
  border-radius: var(--deco-radius-lg);
4477
5231
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4478
5232
  display: grid;
4479
- overflow: hidden;
4480
5233
  }
4481
5234
 
4482
5235
  .deco-feature-item {
@@ -4489,10 +5242,6 @@
4489
5242
  display: grid;
4490
5243
  }
4491
5244
 
4492
- .deco-feature-item:last-child {
4493
- border-inline-end: 0;
4494
- }
4495
-
4496
5245
  .deco-feature-item > :where(p, small) {
4497
5246
  color: var(--deco-text-muted);
4498
5247
  margin: 0;
@@ -4519,7 +5268,7 @@
4519
5268
  }
4520
5269
 
4521
5270
  .deco-eyebrow {
4522
- color: var(--deco-primary);
5271
+ color: var(--usk-primary-ink, var(--deco-primary));
4523
5272
  font-family: var(--deco-font-heading);
4524
5273
  letter-spacing: .14em;
4525
5274
  text-transform: uppercase;
@@ -4601,7 +5350,7 @@
4601
5350
  --deco-radius-xl: .2rem;
4602
5351
  }
4603
5352
 
4604
- [data-ui="art-deco"][data-theme][data-mode] {
5353
+ [data-ui="art-deco"][data-mode] {
4605
5354
  --deco-theme-bg: radial-gradient(circle at 50% -8%, rgb(var(--deco-primary-rgb) / .16), transparent 28rem), linear-gradient(90deg, transparent 49.8%, rgb(var(--deco-border-rgb) / .14) 50%, transparent 50.2%), var(--deco-bg);
4606
5355
  --deco-card-bg: linear-gradient(135deg, rgb(var(--deco-primary-rgb) / .06), rgb(var(--deco-surface-rgb) / var(--deco-panel-alpha)) 35%, rgb(var(--deco-secondary-rgb) / .05));
4607
5356
  }
@@ -4660,7 +5409,7 @@
4660
5409
  }
4661
5410
 
4662
5411
  .deco-icon-medallion, .deco-badge-seal {
4663
- color: var(--deco-primary);
5412
+ color: var(--usk-primary-ink, var(--deco-primary));
4664
5413
  box-shadow: 0 0 0 .25rem rgb(var(--deco-primary-rgb)/.07);
4665
5414
  background: none;
4666
5415
  border-style: double;
@@ -4681,6 +5430,7 @@
4681
5430
  clip-path: polygon(.72rem 0, calc(100% - .72rem) 0, 100% 50%, calc(100% - .72rem) 100%, .72rem 100%, 0 50%);
4682
5431
  justify-content: center;
4683
5432
  justify-self: center;
5433
+ min-block-size: 2.75rem;
4684
5434
  inline-size: min(100%, 15rem);
4685
5435
  min-inline-size: 6rem;
4686
5436
  max-inline-size: 100%;
@@ -4699,13 +5449,13 @@
4699
5449
  box-shadow: inset 0 0 0 1px rgb(var(--deco-surface-strong-rgb)/.72);
4700
5450
  }
4701
5451
 
4702
- [data-ui="art-deco"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5452
+ [data-ui="art-deco"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4703
5453
  border: 3px double var(--deco-primary);
4704
5454
  box-shadow: inset 0 0 0 1px rgb(var(--deco-surface-strong-rgb)/.74);
4705
5455
  border-radius: 0;
4706
5456
  }
4707
5457
 
4708
- [data-ui="art-deco"][data-theme][data-mode] :where(dialog) {
5458
+ [data-ui="art-deco"][data-mode] :where(dialog) {
4709
5459
  border: 3px double var(--deco-border);
4710
5460
  border-radius: var(--deco-radius-sm);
4711
5461
  box-shadow: inset 0 0 0 1px rgb(var(--deco-surface-strong-rgb)/.74),0 1rem 2rem rgb(var(--deco-text-rgb)/.18);
@@ -4729,6 +5479,164 @@
4729
5479
  box-shadow: 0 0 0 .06em;
4730
5480
  }
4731
5481
 
5482
+ [data-ui="art-deco"][data-mode] {
5483
+ --usk-native-font-control: var(--deco-font-control);
5484
+ --usk-native-control-min-block-size: 2.125rem;
5485
+ --usk-native-control-padding-block: .35rem;
5486
+ --usk-native-control-padding-inline: .7rem;
5487
+ --usk-native-border-width: 3px;
5488
+ --usk-native-radius-sm: .08rem;
5489
+ --usk-native-radius: .14rem;
5490
+ --usk-native-radius-lg: .2rem;
5491
+ --usk-native-shadow: inset 0 0 0 1px var(--deco-surface-strong), inset 0 0 0 3px var(--deco-border);
5492
+ --usk-native-shadow-md: inset 0 0 0 1px var(--deco-surface-strong), inset 0 0 0 4px var(--deco-border), 0 .72rem 1.4rem rgb(var(--deco-text-rgb) / .14);
5493
+ --usk-native-focus-ring: 0 0 0 1px var(--deco-surface-strong), 0 0 0 3px var(--deco-warning), 0 0 0 5px var(--deco-primary);
5494
+ --usk-native-subcontrol-padding-block: .3rem;
5495
+ --usk-native-subcontrol-padding-inline: .6rem;
5496
+ --usk-native-choice-size: 1rem;
5497
+ --usk-native-choice-background: linear-gradient(145deg, var(--deco-surface-strong), var(--deco-control-bg));
5498
+ --usk-native-choice-border: 3px double var(--deco-border);
5499
+ --usk-native-checkbox-radius: .06rem;
5500
+ --usk-native-radio-radius: 50%;
5501
+ --usk-native-choice-shadow: inset 0 0 0 1px rgb(var(--deco-warning-rgb) / .46);
5502
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--deco-primary), var(--deco-success));
5503
+ --usk-native-choice-mark-color: var(--deco-on-primary);
5504
+ --usk-native-select-indicator-image: linear-gradient(60deg, transparent 46%, var(--deco-warning) 47% 53%, transparent 54%), linear-gradient(120deg, transparent 46%, var(--deco-warning) 47% 53%, transparent 54%);
5505
+ --usk-native-select-indicator-size: .48rem .64rem, .48rem .64rem;
5506
+ --usk-native-select-indicator-position: calc(100% - 1.34rem) 50%, calc(100% - .98rem) 50%;
5507
+ --usk-native-select-padding-inline-end: 3rem;
5508
+ --usk-native-range-track-size: .36rem;
5509
+ --usk-native-range-track-background: linear-gradient(90deg, var(--deco-success), var(--deco-warning), var(--deco-danger));
5510
+ --usk-native-range-track-border: 3px double var(--deco-border);
5511
+ --usk-native-range-track-radius: .08rem;
5512
+ --usk-native-range-track-shadow: inset 0 0 0 1px rgb(var(--deco-surface-strong-rgb) / .72);
5513
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--deco-primary), var(--deco-warning));
5514
+ --usk-native-range-thumb-size: 1.18rem;
5515
+ --usk-native-range-thumb-background: linear-gradient(135deg, var(--deco-warning), var(--deco-primary));
5516
+ --usk-native-range-thumb-border: 3px double var(--deco-border);
5517
+ --usk-native-range-thumb-radius: 0;
5518
+ --usk-native-range-thumb-shadow: 0 0 0 2px rgb(var(--deco-surface-strong-rgb) / .72);
5519
+ --usk-native-progress-size: .52rem;
5520
+ --usk-native-progress-track-background: linear-gradient(90deg, rgb(var(--deco-border-rgb) / .16), rgb(var(--deco-border-rgb) / .36), rgb(var(--deco-border-rgb) / .16));
5521
+ --usk-native-progress-track-border: 3px double var(--deco-border);
5522
+ --usk-native-progress-track-radius: .08rem;
5523
+ --usk-native-progress-track-shadow: inset 0 0 0 1px var(--deco-surface-strong);
5524
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--deco-success), var(--deco-primary), var(--deco-warning));
5525
+ --usk-native-progress-value-radius: .04rem;
5526
+ --usk-native-progress-value-shadow: inset -1px 0 0 var(--deco-surface-strong);
5527
+ --usk-native-scrollbar-size: .72rem;
5528
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--deco-surface-soft), var(--deco-surface-strong), var(--deco-surface-soft));
5529
+ --usk-native-scrollbar-thumb: linear-gradient(180deg, var(--deco-warning), var(--deco-primary));
5530
+ --usk-native-scrollbar-radius: .06rem;
5531
+ }
5532
+
5533
+ .deco-title {
5534
+ letter-spacing: max(.08em, .5px);
5535
+ margin-block: .75rem;
5536
+ font-weight: 500;
5537
+ }
5538
+
5539
+ .deco-label, :where([data-ui="art-deco"]) .ui-label {
5540
+ font-size: .67rem;
5541
+ font-weight: 700;
5542
+ }
5543
+
5544
+ .deco-button, :where([data-ui="art-deco"]) .ui-button {
5545
+ background: linear-gradient(135deg,var(--deco-primary),var(--deco-success));
5546
+ min-height: 2.85rem;
5547
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong),inset 0 0 0 3px var(--deco-border);
5548
+ border-radius: .08rem;
5549
+ padding: .68rem 1.3rem;
5550
+ font-weight: 700;
5551
+ }
5552
+
5553
+ .deco-input, :where([data-ui="art-deco"]) .ui-input {
5554
+ border-radius: 0;
5555
+ min-height: 2.75rem;
5556
+ padding: .62rem 1.05rem;
5557
+ }
5558
+
5559
+ .deco-card, :where([data-ui="art-deco"]) .ui-card {
5560
+ background: linear-gradient(145deg,rgb(var(--deco-warning-rgb)/.1),transparent 42%),var(--deco-card-bg);
5561
+ border: 3px double var(--deco-border);
5562
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong),0 .72rem 1.4rem rgb(var(--deco-text-rgb)/.14);
5563
+ border-radius: .16rem;
5564
+ padding: 1.6rem;
5565
+ }
5566
+
5567
+ .deco-well {
5568
+ background: linear-gradient(135deg,transparent 0 42%,rgb(var(--deco-warning-rgb)/.12) 42% 58%,transparent 58%),var(--deco-surface-soft);
5569
+ border: 3px double var(--deco-border);
5570
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong);
5571
+ }
5572
+
5573
+ .deco-badge, :where([data-ui="art-deco"]) .ui-badge {
5574
+ border-radius: .08rem;
5575
+ min-height: 1.6rem;
5576
+ padding: .2rem .6rem;
5577
+ }
5578
+
5579
+ .deco-alert, :where([data-ui="art-deco"]) .ui-alert {
5580
+ background: linear-gradient(90deg,rgb(var(--deco-warning-rgb)/.12),transparent 28%),var(--deco-card-bg);
5581
+ border: 3px double var(--deco-border);
5582
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong);
5583
+ border-radius: .1rem;
5584
+ }
5585
+
5586
+ .deco-progress, :where([data-ui="art-deco"]) .ui-progress {
5587
+ background: linear-gradient(90deg,rgb(var(--deco-border-rgb)/.16),rgb(var(--deco-border-rgb)/.36),rgb(var(--deco-border-rgb)/.16));
5588
+ height: .52rem;
5589
+ }
5590
+
5591
+ .deco-table-wrap, :where([data-ui="art-deco"]) .ui-table-wrap {
5592
+ background: linear-gradient(135deg,rgb(var(--deco-warning-rgb)/.08),transparent),var(--deco-card-bg);
5593
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong),inset 0 0 0 4px var(--deco-border);
5594
+ border-radius: .12rem;
5595
+ }
5596
+
5597
+ .deco-table th, :where([data-ui="art-deco"]) .ui-table th {
5598
+ background: linear-gradient(180deg,var(--deco-primary),var(--deco-surface-strong));
5599
+ padding: .68rem .9rem;
5600
+ font-weight: 700;
5601
+ }
5602
+
5603
+ .deco-table td, :where([data-ui="art-deco"]) .ui-table td {
5604
+ padding: .64rem .88rem;
5605
+ }
5606
+
5607
+ .deco-nav, .deco-panel, .deco-toolbar, .deco-tooltip, [data-ui="art-deco"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .deco-card-service, .deco-feature-strip, .deco-callout-bar, :where([data-ui="art-deco"]) .ui-nav, :where([data-ui="art-deco"]) .ui-toolbar {
5608
+ border: 3px double var(--deco-border);
5609
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong);
5610
+ border-radius: .12rem;
5611
+ }
5612
+
5613
+ .deco-feature-item {
5614
+ border-inline-end: 3px double var(--deco-border);
5615
+ background: linear-gradient(135deg,transparent 0 46%,rgb(var(--deco-warning-rgb)/.08) 46% 54%,transparent 54%);
5616
+ }
5617
+
5618
+ .deco-feature-item:last-child {
5619
+ border-inline-end: 0;
5620
+ }
5621
+
5622
+ .deco-icon-medallion, .deco-badge-seal {
5623
+ background: conic-gradient(from 22.5deg,var(--deco-primary),var(--deco-warning),var(--deco-success),var(--deco-primary));
5624
+ }
5625
+
5626
+ .deco-progress-bar, :where([data-ui="art-deco"]) .ui-progress-bar {
5627
+ background: linear-gradient(90deg,var(--deco-success),var(--deco-primary),var(--deco-warning));
5628
+ }
5629
+
5630
+ @supports (color: color-mix(in srgb,black,white)) {
5631
+ .deco-panel, .deco-card-service, .deco-feature-strip, .deco-callout-bar {
5632
+ background: linear-gradient(90deg,color-mix(in srgb,var(--deco-surface) 72%,var(--deco-primary))0 18%,transparent 36% 64%,color-mix(in srgb,var(--deco-surface) 72%,var(--deco-warning)) 82% 100%),var(--deco-card-bg);
5633
+ }
5634
+
5635
+ [data-ui="art-deco"][data-mode] :where(fieldset, article, aside) {
5636
+ background: linear-gradient(90deg,color-mix(in srgb,var(--deco-surface) 72%,var(--deco-primary))0 18%,transparent 36% 64%,color-mix(in srgb,var(--deco-surface) 72%,var(--deco-warning)) 82%),var(--deco-surface);
5637
+ }
5638
+ }
5639
+
4732
5640
  @media (prefers-reduced-motion: reduce) {
4733
5641
  [data-ui="art-deco"] *, [data-ui="art-deco"] :before, [data-ui="art-deco"] :after {
4734
5642
  scroll-behavior: auto !important;
@@ -4773,4 +5681,2048 @@
4773
5681
  color: #000 !important;
4774
5682
  }
4775
5683
  }
5684
+
5685
+ .deco-input[aria-invalid="true"], .deco-textarea[aria-invalid="true"], .deco-select[aria-invalid="true"], :where([data-ui="art-deco"]) .ui-input[aria-invalid="true"], :where([data-ui="art-deco"]) .ui-textarea[aria-invalid="true"], :where([data-ui="art-deco"]) .ui-select[aria-invalid="true"] {
5686
+ border-color: var(--deco-danger);
5687
+ box-shadow: 0 0 0 2px rgb(var(--deco-danger-rgb)/.18);
5688
+ }
5689
+
5690
+ .deco-input[readonly], .deco-textarea[readonly], :where([data-ui="art-deco"]) .ui-input[readonly], :where([data-ui="art-deco"]) .ui-textarea[readonly] {
5691
+ filter: saturate(.72);
5692
+ opacity: .78;
5693
+ border-style: dashed;
5694
+ }
5695
+
5696
+ .deco-button-primary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]) {
5697
+ background: linear-gradient(135deg,var(--deco-primary),var(--deco-success));
5698
+ color: var(--deco-on-primary);
5699
+ border-color: var(--deco-border);
5700
+ }
5701
+
5702
+ .deco-button-secondary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]) {
5703
+ background: linear-gradient(135deg,var(--deco-secondary),var(--deco-warning));
5704
+ color: var(--deco-on-secondary);
5705
+ border-color: var(--deco-border);
5706
+ }
5707
+
5708
+ .deco-button-danger, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="danger"]) {
5709
+ background: linear-gradient(135deg,var(--deco-danger),rgb(var(--deco-danger-rgb)/.72));
5710
+ color: var(--deco-on-danger);
5711
+ border-color: var(--deco-border);
5712
+ }
5713
+
5714
+ .deco-button-ghost, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="ghost"]) {
5715
+ color: var(--usk-primary-ink, var(--deco-primary));
5716
+ background: none;
5717
+ border-color: #0000;
5718
+ }
5719
+
5720
+ .deco-feature-item > .deco-icon-medallion {
5721
+ font-size: 1.5rem;
5722
+ line-height: 1;
5723
+ }
5724
+
5725
+ .deco-callout-bar > .deco-icon-medallion {
5726
+ min-block-size: 4.5rem;
5727
+ min-inline-size: 4.5rem;
5728
+ font-size: 2rem;
5729
+ font-weight: 800;
5730
+ line-height: 1;
5731
+ }
5732
+
5733
+ :root {
5734
+ --deco-font-display: "Bodoni MT", Didot, "Times New Roman", serif;
5735
+ --deco-font-body: "Arial Narrow", "Bahnschrift Condensed", "Aptos Narrow", sans-serif;
5736
+ --deco-font-control: "Arial Narrow", "Bahnschrift Condensed", "Aptos Narrow", sans-serif;
5737
+ --deco-font-heading: var(--deco-font-control);
5738
+ }
5739
+
5740
+ [data-ui="art-deco"][data-mode="light"] {
5741
+ --deco-enamel-rgb: 246 242 231;
5742
+ --deco-enamel-strong-rgb: 255 252 244;
5743
+ --deco-enamel-soft-rgb: 232 224 201;
5744
+ --deco-metal-rgb: 140 111 62;
5745
+ --deco-metal-bright-rgb: 174 132 49;
5746
+ --deco-label-accent: #705222;
5747
+ --deco-tooltip-bg-rgb: 10 26 31;
5748
+ --deco-tooltip-text-rgb: 255 247 220;
5749
+ }
5750
+
5751
+ [data-ui="art-deco"][data-mode="dark"] {
5752
+ --deco-enamel-rgb: 10 26 31;
5753
+ --deco-enamel-strong-rgb: 13 30 32;
5754
+ --deco-enamel-soft-rgb: 19 37 38;
5755
+ --deco-metal-rgb: 140 111 62;
5756
+ --deco-metal-bright-rgb: 212 175 55;
5757
+ --deco-label-accent: #d4af37;
5758
+ --deco-tooltip-bg-rgb: 10 26 31;
5759
+ --deco-tooltip-text-rgb: 255 247 220;
5760
+ }
5761
+
5762
+ [data-ui="art-deco"][data-mode="contrast"] {
5763
+ --deco-enamel-rgb: 0 0 0;
5764
+ --deco-enamel-strong-rgb: 10 10 10;
5765
+ --deco-enamel-soft-rgb: 22 22 22;
5766
+ --deco-metal-rgb: 255 255 255;
5767
+ --deco-metal-bright-rgb: 255 224 95;
5768
+ --deco-label-accent: #fff;
5769
+ --deco-tooltip-bg-rgb: 0 0 0;
5770
+ --deco-tooltip-text-rgb: 255 255 255;
5771
+ }
5772
+
5773
+ [data-ui="art-deco"][data-mode] {
5774
+ --deco-metal: rgb(var(--deco-metal-rgb));
5775
+ --deco-metal-bright: rgb(var(--deco-metal-bright-rgb));
5776
+ --deco-bg: rgb(var(--deco-enamel-rgb));
5777
+ --deco-surface: rgb(var(--deco-enamel-rgb) / var(--deco-panel-alpha));
5778
+ --deco-surface-strong: rgb(var(--deco-enamel-strong-rgb) / var(--deco-panel-alpha));
5779
+ --deco-surface-soft: rgb(var(--deco-enamel-soft-rgb) / var(--deco-panel-soft-alpha));
5780
+ --deco-border: var(--deco-metal);
5781
+ --deco-theme-bg: linear-gradient(90deg, transparent 49.92%, rgb(var(--deco-metal-rgb) / .12) 50%, transparent 50.08%),
5782
+ linear-gradient(180deg, rgb(var(--deco-enamel-strong-rgb) / .28), transparent 11rem),
5783
+ var(--deco-bg);
5784
+ --deco-card-bg: linear-gradient(135deg, rgb(var(--deco-metal-bright-rgb) / .055), transparent 34%),
5785
+ var(--deco-surface);
5786
+ --deco-control-bg: linear-gradient(180deg, rgb(var(--deco-enamel-strong-rgb) / .98), rgb(var(--deco-enamel-rgb) / .98));
5787
+ --deco-jewel-on: #f6f2e7;
5788
+ --deco-jewel-primary: rgb(var(--deco-primary-rgb));
5789
+ --deco-jewel-secondary: rgb(var(--deco-secondary-rgb));
5790
+ --deco-jewel-success: rgb(var(--deco-success-rgb));
5791
+ --deco-jewel-warning: rgb(var(--deco-warning-rgb));
5792
+ --deco-jewel-danger: rgb(var(--deco-danger-rgb));
5793
+ --deco-spinner-segmented-background: repeating-conic-gradient(from 0deg, var(--deco-metal-bright) 0 8deg, var(--deco-primary) 8deg 16deg, transparent 16deg 30deg);
5794
+ --usk-native-choice-checked-background: var(--deco-jewel-primary);
5795
+ --usk-native-choice-mark-color: var(--deco-jewel-on);
5796
+ --usk-native-range-track-background: linear-gradient(90deg, var(--deco-surface-soft), rgb(var(--deco-metal-rgb) / .52), var(--deco-surface-soft));
5797
+ --usk-native-range-progress-background: var(--deco-jewel-primary);
5798
+ --usk-native-range-thumb-background: linear-gradient(135deg, var(--deco-jewel-warning), var(--deco-jewel-primary));
5799
+ --usk-native-progress-size: .625rem;
5800
+ --usk-native-progress-value-background: var(--deco-jewel-primary);
5801
+ --usk-native-meter-optimum-background: var(--deco-jewel-success);
5802
+ --usk-native-meter-suboptimum-background: var(--deco-jewel-warning);
5803
+ --usk-native-meter-critical-background: var(--deco-jewel-danger);
5804
+ }
5805
+
5806
+ @supports (color: color-mix(in srgb,black,white)) {
5807
+ [data-ui="art-deco"][data-mode] {
5808
+ --deco-jewel-primary: color-mix(in srgb, rgb(var(--deco-primary-rgb)) 34%, #0f4642);
5809
+ --deco-jewel-secondary: color-mix(in srgb, rgb(var(--deco-secondary-rgb)) 30%, #15414b);
5810
+ --deco-jewel-success: color-mix(in srgb, rgb(var(--deco-success-rgb)) 30%, #164339);
5811
+ --deco-jewel-warning: color-mix(in srgb, rgb(var(--deco-warning-rgb)) 20%, #5e3b0e);
5812
+ --deco-jewel-danger: color-mix(in srgb, rgb(var(--deco-danger-rgb)) 35%, #5a1717);
5813
+ }
5814
+ }
5815
+
5816
+ [data-ui="art-deco"][data-mode][style*="--usk-primary-rgb"] {
5817
+ --deco-jewel-primary: rgb(var(--deco-primary-rgb));
5818
+ --deco-jewel-on: var(--deco-on-primary);
5819
+ }
5820
+
5821
+ .deco-title, .deco-heading, .deco-kicker, .deco-eyebrow, .deco-label, .deco-button, .deco-badge, .deco-tooltip, .deco-table th, :where([data-ui="art-deco"]) .ui-label, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-badge, :where([data-ui="art-deco"]) .ui-table th {
5822
+ text-transform: uppercase;
5823
+ font-stretch: condensed;
5824
+ }
5825
+
5826
+ .deco-kicker, .deco-eyebrow {
5827
+ color: var(--deco-label-accent);
5828
+ font-weight: 600;
5829
+ }
5830
+
5831
+ [data-ui="art-deco"][data-mode] .deco-media-scrim > :where(figcaption, [data-media-caption]) * {
5832
+ color: inherit;
5833
+ }
5834
+
5835
+ [data-ui="art-deco"][data-mode] :where(h2, h3, h4, h5, h6) {
5836
+ font-family: var(--deco-font-control);
5837
+ font-weight: 600;
5838
+ }
5839
+
5840
+ .deco-label, :where([data-ui="art-deco"]) .ui-label {
5841
+ font-size: .72rem;
5842
+ }
5843
+
5844
+ .deco-title {
5845
+ font-family: var(--deco-font-display);
5846
+ }
5847
+
5848
+ .deco-heading {
5849
+ --demo-component-heading-size: .875rem;
5850
+ font-family: var(--deco-font-control);
5851
+ letter-spacing: .08em;
5852
+ font-size: .875rem;
5853
+ font-weight: 500;
5854
+ }
5855
+
5856
+ .deco-nav, :where([data-ui="art-deco"]) .ui-nav {
5857
+ gap: 0;
5858
+ padding: .2rem;
5859
+ }
5860
+
5861
+ .deco-nav-link, :where([data-ui="art-deco"]) .ui-nav-link {
5862
+ border-inline-start: 1px solid rgb(var(--deco-metal-rgb)/.56);
5863
+ letter-spacing: .08em;
5864
+ min-height: 1.875rem;
5865
+ padding: .35rem .7rem;
5866
+ font-size: .75rem;
5867
+ font-weight: 500;
5868
+ line-height: 1;
5869
+ }
5870
+
5871
+ .deco-nav-link:first-child, :where([data-ui="art-deco"]) .ui-nav-link:first-child {
5872
+ border-inline-start: 0;
5873
+ }
5874
+
5875
+ .deco-surface, .deco-card, .deco-panel, .deco-toolbar, .deco-table-wrap, :where([data-ui="art-deco"]) .ui-card, :where([data-ui="art-deco"]) .ui-toolbar, :where([data-ui="art-deco"]) .ui-table-wrap {
5876
+ background: var(--deco-card-bg);
5877
+ border: 3px double var(--deco-metal);
5878
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-strong-rgb)/.94),inset 0 0 0 4px rgb(var(--deco-metal-rgb)/.2),0 .65rem 1.35rem rgb(0 0 0 / calc(var(--deco-shadow-alpha)*.72));
5879
+ border-radius: .125rem;
5880
+ }
5881
+
5882
+ .deco-button, .deco-icon-button, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button {
5883
+ border: 3px double var(--deco-metal);
5884
+ clip-path: polygon(0 .65rem, .28rem .65rem, .28rem .3rem, .62rem .3rem, .62rem 0, calc(100% - .62rem) 0, calc(100% - .62rem) .3rem, calc(100% - .28rem) .3rem, calc(100% - .28rem) .65rem, 100% .65rem, 100% calc(100% - .65rem), calc(100% - .28rem) calc(100% - .65rem), calc(100% - .28rem) calc(100% - .3rem), calc(100% - .62rem) calc(100% - .3rem), calc(100% - .62rem) 100%, .62rem 100%, .62rem calc(100% - .3rem), .28rem calc(100% - .3rem), .28rem calc(100% - .65rem), 0 calc(100% - .65rem));
5885
+ letter-spacing: .115em;
5886
+ border-radius: 0;
5887
+ }
5888
+
5889
+ .deco-badge, :where([data-ui="art-deco"]) .ui-badge {
5890
+ border: 3px double var(--deco-metal);
5891
+ clip-path: polygon(0 .34rem, .34rem .34rem, .34rem 0, calc(100% - .34rem) 0, calc(100% - .34rem) .34rem, 100% .34rem, 100% calc(100% - .34rem), calc(100% - .34rem) calc(100% - .34rem), calc(100% - .34rem) 100%, .34rem 100%, .34rem calc(100% - .34rem), 0 calc(100% - .34rem));
5892
+ letter-spacing: .07em;
5893
+ font-weight: 700;
5894
+ }
5895
+
5896
+ .deco-tooltip, [data-ui="art-deco"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5897
+ background: rgb(var(--deco-tooltip-bg-rgb));
5898
+ min-inline-size: 8rem;
5899
+ color: rgb(var(--deco-tooltip-text-rgb));
5900
+ border: 3px double var(--deco-metal);
5901
+ clip-path: polygon(.35rem 0, calc(100% - .35rem) 0, 100% .35rem, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, .35rem 100%, 0 calc(100% - .35rem), 0 .35rem);
5902
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-metal-rgb)/.34),0 .65rem 1.25rem #00000057;
5903
+ letter-spacing: .055em;
5904
+ border-radius: 0;
5905
+ justify-content: center;
5906
+ font-size: .75rem;
5907
+ font-weight: 500;
5908
+ }
5909
+
5910
+ .deco-tooltip-arrow {
5911
+ background: var(--deco-metal-bright);
5912
+ }
5913
+
5914
+ .deco-spinner, .deco-loading-spinner, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
5915
+ background: var(--deco-spinner-segmented-background);
5916
+ border: .18rem double var(--deco-metal);
5917
+ clip-path: none;
5918
+ box-shadow: inset 0 0 0 .28rem var(--deco-surface-strong),0 0 0 .1rem rgb(var(--deco-metal-rgb)/.34);
5919
+ border-radius: 50%;
5920
+ }
5921
+
5922
+ .deco-table th, .deco-table td, :where([data-ui="art-deco"]) .ui-table th, :where([data-ui="art-deco"]) .ui-table td {
5923
+ border-block-end: 1px solid rgb(var(--deco-metal-rgb)/.72);
5924
+ border-inline-start: 1px solid rgb(var(--deco-metal-rgb)/.72);
5925
+ }
5926
+
5927
+ .deco-table tr > :first-child, :where([data-ui="art-deco"]) .ui-table tr>:first-child {
5928
+ border-inline-start: 0;
5929
+ }
5930
+
5931
+ [data-ui="art-deco"][data-mode] {
5932
+ --usk-native-choice-mark-color: rgb(var(--deco-enamel-strong-rgb));
5933
+ }
5934
+
5935
+ [data-ui="art-deco"][data-mode] :where(input[type="checkbox"]:checked) {
5936
+ background-color: var(--deco-jewel-primary);
5937
+ background-image: linear-gradient(45deg,transparent 42%,var(--usk-native-choice-mark-color) 43% 58%,transparent 59%),linear-gradient(-45deg,transparent 42%,var(--usk-native-choice-mark-color) 43% 58%,transparent 59%);
5938
+ background-position: 24% 62%, 67% 42%;
5939
+ background-repeat: no-repeat;
5940
+ background-size: 42% 58%, 64% 58%;
5941
+ }
5942
+
5943
+ [data-ui="art-deco"][data-mode] :where(input[type="range"]) {
5944
+ vertical-align: middle;
5945
+ block-size: 2rem;
5946
+ display: block;
5947
+ }
5948
+
5949
+ [data-ui="art-deco"][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
5950
+ box-sizing: border-box;
5951
+ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
5952
+ }
5953
+
5954
+ [data-ui="art-deco"][data-mode] :where(input[type="range"])::-moz-range-thumb {
5955
+ box-sizing: border-box;
5956
+ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
5957
+ }
5958
+
5959
+ [data-ui="art-deco"][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
5960
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size))/2 - .1875rem);
5961
+ }
5962
+
5963
+ .deco-card-service > .deco-icon-medallion {
5964
+ background: var(--deco-jewel-primary);
5965
+ color: var(--deco-jewel-on);
5966
+ }
5967
+
5968
+ .deco-feature-item:first-child > .deco-icon-medallion {
5969
+ background: var(--deco-jewel-success);
5970
+ color: var(--deco-jewel-on);
5971
+ }
5972
+
5973
+ .deco-feature-item:nth-child(2) > .deco-icon-medallion {
5974
+ background: var(--deco-jewel-secondary);
5975
+ color: var(--deco-jewel-on);
5976
+ }
5977
+
5978
+ .deco-badge-seal {
5979
+ background: var(--deco-jewel-warning);
5980
+ color: var(--deco-jewel-on);
5981
+ }
5982
+
5983
+ .deco-badge-seal > :where(strong, small) {
5984
+ color: inherit;
5985
+ }
5986
+
5987
+ .deco-rounded {
5988
+ border-radius: .625rem;
5989
+ }
5990
+
5991
+ .deco-icon-medallion, .deco-badge-seal {
5992
+ border-color: var(--deco-metal-bright);
5993
+ box-shadow: inset 0 0 0 1px var(--deco-surface-strong),0 0 0 .2rem rgb(var(--deco-metal-rgb)/.22);
5994
+ }
5995
+
5996
+ .deco-input, .deco-textarea, .deco-select, :where([data-ui="art-deco"]) .ui-input, :where([data-ui="art-deco"]) .ui-textarea, :where([data-ui="art-deco"]) .ui-select {
5997
+ background-color: var(--deco-surface-strong);
5998
+ border: 3px double var(--deco-metal);
5999
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.88);
6000
+ font-family: var(--deco-font-control);
6001
+ letter-spacing: .035em;
6002
+ border-radius: .1rem;
6003
+ }
6004
+
6005
+ .deco-input, .deco-select, :where([data-ui="art-deco"]) .ui-input, :where([data-ui="art-deco"]) .ui-select {
6006
+ min-height: 2.125rem;
6007
+ padding: .35rem .7rem;
6008
+ font-size: .8125rem;
6009
+ font-weight: 500;
6010
+ }
6011
+
6012
+ .deco-textarea, :where([data-ui="art-deco"]) .ui-textarea {
6013
+ min-height: 4.75rem;
6014
+ padding: .5rem .7rem;
6015
+ font-size: .8125rem;
6016
+ font-weight: 500;
6017
+ line-height: 1.35;
6018
+ }
6019
+
6020
+ .deco-check-control, .deco-radio-control, :where([data-ui="art-deco"]) .ui-check-control, :where([data-ui="art-deco"]) .ui-radio-control {
6021
+ box-sizing: border-box;
6022
+ block-size: 1rem;
6023
+ inline-size: 1rem;
6024
+ }
6025
+
6026
+ [data-ui="art-deco"][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
6027
+ font-size: .8125rem;
6028
+ font-weight: 500;
6029
+ }
6030
+
6031
+ .deco-select, [data-ui="art-deco"][data-mode] :where(select:not([multiple])), :where([data-ui="art-deco"]) .ui-select {
6032
+ appearance: none;
6033
+ background-image: var(--usk-native-select-indicator-image);
6034
+ background-position: var(--usk-native-select-indicator-position);
6035
+ background-size: var(--usk-native-select-indicator-size);
6036
+ background-repeat: no-repeat;
6037
+ }
6038
+
6039
+ .deco-check-control, .deco-radio-control, :where([data-ui="art-deco"]) .ui-check-control, :where([data-ui="art-deco"]) .ui-radio-control {
6040
+ background: var(--deco-surface-strong);
6041
+ border: 3px double var(--deco-metal);
6042
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.86);
6043
+ }
6044
+
6045
+ .deco-check-control, :where([data-ui="art-deco"]) .ui-check-control {
6046
+ border-radius: .05rem;
6047
+ position: relative;
6048
+ }
6049
+
6050
+ .deco-switch-track, :where([data-ui="art-deco"]) .ui-switch-track {
6051
+ box-sizing: border-box;
6052
+ background: var(--deco-surface-soft);
6053
+ border: 3px double var(--deco-metal);
6054
+ clip-path: polygon(.45rem 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, .45rem 100%, 0 50%);
6055
+ block-size: 1.35rem;
6056
+ inline-size: 2.5rem;
6057
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.8);
6058
+ border-radius: 0;
6059
+ }
6060
+
6061
+ .deco-switch-thumb, :where([data-ui="art-deco"]) .ui-switch-thumb {
6062
+ box-sizing: border-box;
6063
+ background: var(--deco-text);
6064
+ border: 2px solid var(--deco-metal-bright);
6065
+ block-size: .85rem;
6066
+ inline-size: .85rem;
6067
+ box-shadow: 0 0 0 1px var(--deco-surface-strong);
6068
+ inset-block-start: .16rem;
6069
+ inset-inline-start: .24rem;
6070
+ }
6071
+
6072
+ .deco-check input:checked + .deco-check-control, .deco-radio input:checked + .deco-radio-control, .deco-switch input:checked + .deco-switch-track, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control, :where([data-ui="art-deco"]) .ui-radio input:checked+.ui-radio-control, :where([data-ui="art-deco"]) .ui-switch input:checked+.ui-switch-track {
6073
+ background: var(--deco-jewel-primary);
6074
+ border-color: var(--deco-metal);
6075
+ }
6076
+
6077
+ .deco-check input:checked + .deco-check-control:after, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control:after {
6078
+ content: "";
6079
+ block-size: .3rem;
6080
+ inline-size: .5rem;
6081
+ color: var(--deco-jewel-on);
6082
+ transform-origin: center;
6083
+ border-block-end: 2px solid;
6084
+ border-inline-start: 2px solid;
6085
+ display: block;
6086
+ position: absolute;
6087
+ inset-block-start: 50%;
6088
+ inset-inline-start: 50%;
6089
+ transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
6090
+ }
6091
+
6092
+ .deco-progress, :where([data-ui="art-deco"]) .ui-progress {
6093
+ background: var(--deco-surface-soft);
6094
+ border: 3px double var(--deco-metal);
6095
+ block-size: .55rem;
6096
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.9);
6097
+ border-radius: .1rem;
6098
+ }
6099
+
6100
+ .deco-progress-bar, :where([data-ui="art-deco"]) .ui-progress-bar {
6101
+ background: linear-gradient(90deg,var(--deco-jewel-success),var(--deco-secondary),var(--deco-jewel-primary));
6102
+ clip-path: polygon(0 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, 0 100%);
6103
+ border-radius: 0;
6104
+ }
6105
+
6106
+ .deco-alert, :where([data-ui="art-deco"]) .ui-alert {
6107
+ background: var(--deco-surface-strong);
6108
+ border: 3px double var(--deco-metal);
6109
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.9);
6110
+ border-radius: .1rem;
6111
+ flex-wrap: wrap;
6112
+ align-items: center;
6113
+ gap: .65rem;
6114
+ padding: .72rem .9rem;
6115
+ display: flex;
6116
+ }
6117
+
6118
+ .deco-alert-success, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="success"]) {
6119
+ border-inline-start-color: var(--deco-success);
6120
+ }
6121
+
6122
+ .deco-alert-warning, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="warning"]) {
6123
+ border-inline-start-color: var(--deco-warning);
6124
+ }
6125
+
6126
+ .deco-alert-danger, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="danger"]) {
6127
+ border-inline-start-color: var(--deco-danger);
6128
+ }
6129
+
6130
+ .deco-alert-title, :where([data-ui="art-deco"]) .ui-alert-title {
6131
+ letter-spacing: .045em;
6132
+ text-transform: uppercase;
6133
+ }
6134
+
6135
+ [data-ui="art-deco"][data-mode] :where(fieldset) {
6136
+ background: var(--deco-surface);
6137
+ border: 3px double var(--deco-metal);
6138
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-strong-rgb)/.92);
6139
+ border-radius: .125rem;
6140
+ }
6141
+
6142
+ [data-ui="art-deco"][data-mode] :where(dialog) {
6143
+ background: var(--deco-surface-strong);
6144
+ border-color: var(--deco-metal);
6145
+ clip-path: polygon(0 .7rem, .35rem .7rem, .35rem .35rem, .7rem .35rem, .7rem 0, calc(100% - .7rem) 0, calc(100% - .7rem) .35rem, calc(100% - .35rem) .35rem, calc(100% - .35rem) .7rem, 100% .7rem, 100% calc(100% - .7rem), calc(100% - .35rem) calc(100% - .7rem), calc(100% - .35rem) calc(100% - .35rem), calc(100% - .7rem) calc(100% - .35rem), calc(100% - .7rem) 100%, .7rem 100%, .7rem calc(100% - .35rem), .35rem calc(100% - .35rem), .35rem calc(100% - .7rem), 0 calc(100% - .7rem));
6146
+ }
6147
+
6148
+ .deco-card, .deco-panel, .deco-card-service, .deco-feature-strip, .deco-callout-bar, .deco-table-wrap, .deco-metric, [data-ui="art-deco"][data-mode] :where(article, aside, fieldset), :where([data-ui="art-deco"]) .ui-card, :where([data-ui="art-deco"]) .ui-table-wrap {
6149
+ background-color: var(--deco-surface);
6150
+ background-image: none;
6151
+ }
6152
+
6153
+ .deco-card, .deco-panel, :where([data-ui="art-deco"]) .ui-card {
6154
+ padding: 1.2rem;
6155
+ }
6156
+
6157
+ .deco-callout-bar > .deco-icon-medallion {
6158
+ background-color: var(--deco-jewel-primary);
6159
+ color: var(--deco-jewel-on);
6160
+ background-image: none;
6161
+ }
6162
+
6163
+ .deco-table th, :where([data-ui="art-deco"]) .ui-table th {
6164
+ background-color: var(--deco-surface-strong);
6165
+ color: var(--deco-text);
6166
+ background-image: none;
6167
+ }
6168
+
6169
+ .deco-button, .deco-icon-button, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button {
6170
+ background-color: var(--deco-surface-strong);
6171
+ background-image: none;
6172
+ }
6173
+
6174
+ .deco-button, :where([data-ui="art-deco"]) .ui-button {
6175
+ min-block-size: 2.125rem;
6176
+ min-inline-size: min(100%, 12rem);
6177
+ min-height: 2.125rem;
6178
+ padding: .38rem .9rem;
6179
+ font-size: .75rem;
6180
+ font-weight: 500;
6181
+ line-height: 1;
6182
+ }
6183
+
6184
+ .deco-icon-button, :where([data-ui="art-deco"]) .ui-icon-button {
6185
+ min-block-size: 2.25rem;
6186
+ inline-size: 2.25rem;
6187
+ min-inline-size: 2.25rem;
6188
+ text-align: center;
6189
+ text-indent: 0;
6190
+ place-items: center;
6191
+ min-height: 2.25rem;
6192
+ padding: 0;
6193
+ font-size: 1rem;
6194
+ font-weight: 600;
6195
+ line-height: 1;
6196
+ display: inline-grid;
6197
+ }
6198
+
6199
+ .deco-button:not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost), .deco-icon-button, :where([data-ui="art-deco"]) .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="art-deco"]) .ui-icon-button {
6200
+ background-color: var(--deco-surface-strong);
6201
+ background-image: none;
6202
+ }
6203
+
6204
+ .deco-button-primary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]) {
6205
+ background-color: var(--deco-jewel-primary);
6206
+ color: var(--deco-jewel-on);
6207
+ background-image: none;
6208
+ }
6209
+
6210
+ .deco-button-secondary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]) {
6211
+ background-color: var(--deco-jewel-secondary);
6212
+ color: var(--deco-jewel-on);
6213
+ background-image: none;
6214
+ }
6215
+
6216
+ .deco-button-danger, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="danger"]) {
6217
+ background-color: var(--deco-jewel-danger);
6218
+ color: var(--deco-jewel-on);
6219
+ background-image: none;
6220
+ }
6221
+
6222
+ .deco-button-ghost, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="ghost"]) {
6223
+ color: var(--deco-text);
6224
+ border-color: var(--deco-metal);
6225
+ background-color: #0000;
6226
+ background-image: none;
6227
+ }
6228
+
6229
+ .deco-button-primary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]):hover {
6230
+ background-color: var(--deco-jewel-primary);
6231
+ filter: brightness(1.08);
6232
+ }
6233
+
6234
+ .deco-button-secondary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]):hover {
6235
+ background-color: var(--deco-jewel-secondary);
6236
+ filter: brightness(1.08);
6237
+ }
6238
+
6239
+ .deco-button-danger:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="danger"]):hover {
6240
+ filter: brightness(1.08);
6241
+ }
6242
+
6243
+ .deco-button.deco-button-cut, .deco-button-cut, .deco-button.deco-button-outline-heavy, .deco-button-outline-heavy, :where([data-ui="art-deco"]) .ui-button.deco-button-cut, :where([data-ui="art-deco"]) .ui-button.deco-button-outline-heavy {
6244
+ clip-path: polygon(0 .65rem, .28rem .65rem, .28rem .3rem, .62rem .3rem, .62rem 0, calc(100% - .62rem) 0, calc(100% - .62rem) .3rem, calc(100% - .28rem) .3rem, calc(100% - .28rem) .65rem, 100% .65rem, 100% calc(100% - .65rem), calc(100% - .28rem) calc(100% - .65rem), calc(100% - .28rem) calc(100% - .3rem), calc(100% - .62rem) calc(100% - .3rem), calc(100% - .62rem) 100%, .62rem 100%, .62rem calc(100% - .3rem), .28rem calc(100% - .3rem), .28rem calc(100% - .65rem), 0 calc(100% - .65rem));
6245
+ }
6246
+
6247
+ .deco-button.deco-button-outline-heavy, .deco-button-outline-heavy, :where([data-ui="art-deco"]) .ui-button.deco-button-outline-heavy {
6248
+ color: var(--deco-text);
6249
+ border-color: var(--deco-metal);
6250
+ background-color: #0000;
6251
+ background-image: none;
6252
+ border-style: double;
6253
+ }
6254
+
6255
+ .deco-button[aria-busy="true"]:after, .deco-icon-button[aria-busy="true"]:after, [data-ui="art-deco"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="art-deco"]) .ui-button[aria-busy="true"]:after, :where([data-ui="art-deco"]) .ui-icon-button[aria-busy="true"]:after {
6256
+ background: var(--deco-spinner-segmented-background);
6257
+ border: .1em double var(--deco-metal-bright);
6258
+ box-shadow: inset 0 0 0 .18em var(--deco-surface-strong);
6259
+ clip-path: none;
6260
+ border-radius: 50%;
6261
+ }
6262
+
6263
+ .deco-button, :where([data-ui="art-deco"]) .ui-button {
6264
+ border-radius: .08rem;
6265
+ }
6266
+
6267
+ .deco-alert, :where([data-ui="art-deco"]) .ui-alert {
6268
+ gap: .4rem;
6269
+ padding: .3rem .65rem;
6270
+ }
6271
+
6272
+ .deco-alert-title, .deco-alert-body, :where([data-ui="art-deco"]) .ui-alert-title, :where([data-ui="art-deco"]) .ui-alert-body {
6273
+ font-size: .76rem;
6274
+ line-height: 1.25;
6275
+ }
6276
+
6277
+ .deco-badge, :where([data-ui="art-deco"]) .ui-badge {
6278
+ min-height: 1.35rem;
6279
+ padding: .1rem .5rem;
6280
+ font-size: .6875rem;
6281
+ font-weight: 500;
6282
+ line-height: 1;
6283
+ }
6284
+
6285
+ .deco-badge-primary, .deco-nav-link[aria-current="page"], .deco-nav-link.is-active, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="primary"]), :where([data-ui="art-deco"]) .ui-nav-link[aria-current="page"], :where([data-ui="art-deco"]) .ui-nav-link.is-active {
6286
+ background: var(--deco-jewel-primary);
6287
+ color: var(--deco-jewel-on);
6288
+ border-color: var(--deco-metal);
6289
+ }
6290
+
6291
+ .deco-badge-secondary, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="secondary"]) {
6292
+ background: var(--deco-jewel-secondary);
6293
+ color: var(--deco-jewel-on);
6294
+ border-color: var(--deco-metal);
6295
+ }
6296
+
6297
+ .deco-badge-success, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="success"]) {
6298
+ background: var(--deco-jewel-success);
6299
+ color: var(--deco-jewel-on);
6300
+ border-color: var(--deco-metal);
6301
+ }
6302
+
6303
+ .deco-badge-warning, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="warning"]) {
6304
+ background: var(--deco-jewel-warning);
6305
+ color: var(--deco-jewel-on);
6306
+ border-color: var(--deco-metal);
6307
+ }
6308
+
6309
+ .deco-badge-danger, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="danger"]) {
6310
+ background: var(--deco-jewel-danger);
6311
+ color: var(--deco-jewel-on);
6312
+ border-color: var(--deco-metal);
6313
+ }
6314
+
6315
+ .deco-table th, .deco-table td, :where([data-ui="art-deco"]) .ui-table th, :where([data-ui="art-deco"]) .ui-table td {
6316
+ padding: .37rem .65rem;
6317
+ font-size: .75rem;
6318
+ line-height: 1.27;
6319
+ }
6320
+
6321
+ .deco-table th, :where([data-ui="art-deco"]) .ui-table th {
6322
+ font-weight: 600;
6323
+ }
6324
+
6325
+ [data-ui="art-deco"][data-mode] .deco-table, :where([data-ui="art-deco"])[data-mode] .ui-table {
6326
+ margin: 0;
6327
+ }
6328
+
6329
+ [data-ui="art-deco"][data-mode] .deco-table caption, :where([data-ui="art-deco"])[data-mode] .ui-table caption {
6330
+ padding: .45rem .65rem;
6331
+ font-size: .7rem;
6332
+ line-height: 1.2;
6333
+ }
6334
+
6335
+ [data-ui="art-deco"][data-mode] :where(progress, meter) {
6336
+ block-size: var(--usk-native-progress-size);
6337
+ min-height: var(--usk-native-progress-size);
6338
+ }
6339
+
6340
+ .deco-feature-item > .deco-icon-medallion {
6341
+ block-size: 2.5rem;
6342
+ inline-size: 2.5rem;
6343
+ padding: .35rem;
6344
+ font-size: .95rem;
6345
+ }
6346
+
6347
+ .deco-card-service > .deco-icon-medallion {
6348
+ block-size: 3.25rem;
6349
+ inline-size: 3.25rem;
6350
+ padding: .45rem;
6351
+ }
6352
+
6353
+ .deco-badge-seal {
6354
+ block-size: 3.5rem;
6355
+ inline-size: 3.5rem;
6356
+ min-inline-size: 3.5rem;
6357
+ padding: .35rem;
6358
+ font-size: .65rem;
6359
+ }
6360
+
6361
+ .deco-callout-bar > .deco-icon-medallion {
6362
+ block-size: 2.75rem;
6363
+ min-block-size: 2.75rem;
6364
+ inline-size: 2.75rem;
6365
+ min-inline-size: 2.75rem;
6366
+ padding: .4rem;
6367
+ font-size: 1rem;
6368
+ }
6369
+
6370
+ @media (pointer: coarse) {
6371
+ [data-ui="art-deco"][data-mode] {
6372
+ --usk-native-control-min-block-size: 2.75rem;
6373
+ --usk-native-choice-size: 1.5rem;
6374
+ }
6375
+
6376
+ .deco-button, .deco-icon-button, .deco-input, .deco-select, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button, :where([data-ui="art-deco"]) .ui-input, :where([data-ui="art-deco"]) .ui-select {
6377
+ min-block-size: 2.75rem;
6378
+ }
6379
+
6380
+ .deco-check-control, .deco-radio-control, :where([data-ui="art-deco"]) .ui-check-control, :where([data-ui="art-deco"]) .ui-radio-control {
6381
+ block-size: 1.5rem;
6382
+ inline-size: 1.5rem;
6383
+ }
6384
+ }
6385
+
6386
+ [data-ui="art-deco"][data-mode="light"] {
6387
+ --deco-fallback-bg-rgb: 246 242 231;
6388
+ --deco-fallback-surface-rgb: 255 250 240;
6389
+ --deco-fallback-surface-strong-rgb: 255 250 240;
6390
+ --deco-fallback-surface-soft-rgb: 238 230 216;
6391
+ --deco-fallback-text-rgb: 10 26 31;
6392
+ --deco-fallback-text-muted-rgb: 92 92 86;
6393
+ --deco-fallback-primary-rgb: 13 35 61;
6394
+ --deco-fallback-primary-hover-rgb: 20 48 78;
6395
+ --deco-fallback-primary-text-rgb: 246 242 231;
6396
+ --deco-fallback-secondary-rgb: 15 101 88;
6397
+ --deco-fallback-secondary-hover-rgb: 12 77 71;
6398
+ --deco-fallback-secondary-text-rgb: 255 255 255;
6399
+ --deco-fallback-accent-rgb: 184 135 47;
6400
+ --deco-fallback-accent-text-rgb: 10 26 31;
6401
+ --deco-fallback-success-rgb: 15 101 88;
6402
+ --deco-fallback-success-text-rgb: 255 255 255;
6403
+ --deco-fallback-warning-rgb: 212 175 55;
6404
+ --deco-fallback-warning-text-rgb: 10 26 31;
6405
+ --deco-fallback-danger-rgb: 139 50 58;
6406
+ --deco-fallback-danger-text-rgb: 255 255 255;
6407
+ --deco-fallback-link-rgb: 15 101 88;
6408
+ --deco-fallback-focus-rgb: 15 101 88;
6409
+ --deco-reference-metal-rgb: 184 135 47;
6410
+ --deco-status-success: rgb(var(--usk-success-rgb, 15 101 88));
6411
+ --deco-status-warning: rgb(var(--usk-warning-strong-rgb, 133 79 14));
6412
+ --deco-status-danger: rgb(var(--usk-danger-rgb, 139 50 58));
6413
+ --deco-info-rgb: var(--usk-info-rgb, 36 89 120);
6414
+ }
6415
+
6416
+ [data-ui="art-deco"][data-mode="dark"] {
6417
+ --deco-fallback-bg-rgb: 10 26 31;
6418
+ --deco-fallback-surface-rgb: 10 26 31;
6419
+ --deco-fallback-surface-strong-rgb: 13 32 38;
6420
+ --deco-fallback-surface-soft-rgb: 21 37 42;
6421
+ --deco-fallback-text-rgb: 246 242 231;
6422
+ --deco-fallback-text-muted-rgb: 169 163 151;
6423
+ --deco-fallback-primary-rgb: 8 26 47;
6424
+ --deco-fallback-primary-hover-rgb: 18 43 66;
6425
+ --deco-fallback-primary-text-rgb: 246 242 231;
6426
+ --deco-fallback-secondary-rgb: 20 118 107;
6427
+ --deco-fallback-secondary-hover-rgb: 15 79 75;
6428
+ --deco-fallback-secondary-text-rgb: 255 255 255;
6429
+ --deco-fallback-accent-rgb: 200 150 56;
6430
+ --deco-fallback-accent-text-rgb: 10 26 31;
6431
+ --deco-fallback-success-rgb: 20 118 107;
6432
+ --deco-fallback-success-text-rgb: 255 255 255;
6433
+ --deco-fallback-warning-rgb: 224 185 76;
6434
+ --deco-fallback-warning-text-rgb: 10 26 31;
6435
+ --deco-fallback-danger-rgb: 156 52 59;
6436
+ --deco-fallback-danger-text-rgb: 255 255 255;
6437
+ --deco-fallback-link-rgb: 110 210 188;
6438
+ --deco-fallback-focus-rgb: 224 185 76;
6439
+ --deco-reference-metal-rgb: 200 150 56;
6440
+ --deco-status-success: rgb(var(--usk-success-rgb, 110 210 188));
6441
+ --deco-status-warning: rgb(var(--usk-warning-rgb, 224 185 76));
6442
+ --deco-status-danger: rgb(var(--usk-danger-rgb, 255 145 154));
6443
+ --deco-info-rgb: var(--usk-info-rgb, 60 119 146);
6444
+ }
6445
+
6446
+ [data-ui="art-deco"][data-mode="contrast"] {
6447
+ --deco-reference-metal-rgb: 255 255 255;
6448
+ --deco-status-success: var(--deco-text);
6449
+ --deco-status-warning: var(--deco-text);
6450
+ --deco-status-danger: var(--deco-text);
6451
+ --deco-info-rgb: var(--usk-primary-rgb, 0 80 150);
6452
+ }
6453
+
6454
+ [data-ui="art-deco"][data-mode] {
6455
+ --deco-bg: rgb(var(--deco-bg-rgb));
6456
+ --deco-surface: rgb(var(--deco-surface-rgb));
6457
+ --deco-surface-strong: rgb(var(--deco-surface-strong-rgb));
6458
+ --deco-surface-soft: rgb(var(--deco-surface-soft-rgb));
6459
+ --deco-metal-rgb: var(--usk-accent-rgb, var(--deco-reference-metal-rgb));
6460
+ --deco-metal: rgb(var(--deco-metal-rgb));
6461
+ --deco-metal-bright: var(--deco-warning);
6462
+ --deco-border: var(--deco-metal);
6463
+ --deco-card-bg: var(--deco-surface);
6464
+ --deco-control-bg: var(--deco-surface);
6465
+ --deco-theme-bg: var(--deco-bg);
6466
+ --deco-font-display: "DejaVu Serif Condensed", "Bodoni MT", Didot, Georgia, serif;
6467
+ --deco-font-control: "Liberation Sans Narrow", "Arial Narrow", Arial, sans-serif;
6468
+ --deco-font-body: var(--deco-font-control);
6469
+ --deco-info: rgb(var(--deco-info-rgb));
6470
+ --deco-on-info: rgb(var(--usk-info-text-rgb, 255 255 255));
6471
+ --deco-step-sm: polygon(7px 0, calc(100% - 7px) 0, calc(100% - 7px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 7px) 100%, 7px 100%, 7px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 7px 3px);
6472
+ --deco-step-lg: polygon(13px 0, calc(100% - 13px) 0, calc(100% - 13px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 13px, 100% 13px, 100% calc(100% - 13px), calc(100% - 5px) calc(100% - 13px), calc(100% - 5px) calc(100% - 5px), calc(100% - 13px) calc(100% - 5px), calc(100% - 13px) 100%, 13px 100%, 13px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 13px), 0 calc(100% - 13px), 0 13px, 5px 13px, 5px 5px, 13px 5px);
6473
+ --usk-native-choice-checked-background: var(--deco-secondary);
6474
+ --usk-native-choice-mark-color: var(--deco-on-secondary);
6475
+ --usk-native-range-progress-background: var(--deco-secondary);
6476
+ --usk-native-range-thumb-background: var(--deco-secondary);
6477
+ --usk-native-progress-value-background: var(--deco-secondary);
6478
+ }
6479
+
6480
+ .deco-sheet {
6481
+ isolation: isolate;
6482
+ color: var(--deco-text);
6483
+ background: var(--deco-bg);
6484
+ border: 4px double var(--deco-metal);
6485
+ box-shadow: inset 0 0 0 4px var(--deco-bg),inset 0 0 0 5px var(--deco-metal);
6486
+ padding: 28px 32px;
6487
+ position: relative;
6488
+ }
6489
+
6490
+ .deco-sheet:before {
6491
+ content: "";
6492
+ pointer-events: none;
6493
+ z-index: -1;
6494
+ background: linear-gradient(rgb(var(--deco-metal-rgb)/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--deco-metal-rgb)/.035) 1px,transparent 1px);
6495
+ background-size: 80px 80px;
6496
+ position: absolute;
6497
+ inset: 12px;
6498
+ }
6499
+
6500
+ .deco-fan {
6501
+ background: repeating-conic-gradient(from 90deg at 0 0,var(--deco-metal) 0deg 1deg,transparent 1deg 10deg);
6502
+ clip-path: polygon(0 0, 100% 0, 0 100%);
6503
+ width: 76px;
6504
+ height: 36px;
6505
+ display: block;
6506
+ }
6507
+
6508
+ [data-ui="art-deco"][data-mode] :is(.deco-masthead-title, .deco-dialog h3, .deco-dialog h4) {
6509
+ font-family: var(--deco-font-display);
6510
+ font-weight: 400;
6511
+ }
6512
+
6513
+ [data-ui="art-deco"][data-mode] :is(.deco-section-title, .deco-label, .deco-stat-label, .deco-meta), :where([data-ui="art-deco"])[data-mode] :is(.deco-section-title,.ui-label,.deco-stat-label,.deco-meta) {
6514
+ font-family: Arial, sans-serif;
6515
+ }
6516
+
6517
+ [data-ui="art-deco"][data-mode] :is(.deco-option, .deco-tab, .deco-segment, .deco-chip button, .deco-alert-close, .deco-pagination button, .deco-stepper button) {
6518
+ min-inline-size: 0;
6519
+ box-shadow: none;
6520
+ border-radius: 0;
6521
+ font-weight: 400;
6522
+ line-height: 1.3;
6523
+ }
6524
+
6525
+ [data-ui="art-deco"][data-mode] :is(.deco-chip button, .deco-alert-close) {
6526
+ min-height: 28px;
6527
+ background: none;
6528
+ border: 0;
6529
+ min-block-size: 28px;
6530
+ padding: 0;
6531
+ }
6532
+
6533
+ [data-ui="art-deco"][data-mode] :is(.deco-tab, .deco-segment, .deco-option, .deco-pagination button, .deco-stepper button) {
6534
+ padding: 6px;
6535
+ }
6536
+
6537
+ [data-ui="art-deco"][data-mode] :is(.deco-check, .deco-radio, .deco-switch), :where([data-ui="art-deco"])[data-mode] :is(.ui-check,.ui-radio,.ui-switch) {
6538
+ font-weight: 400;
6539
+ display: flex;
6540
+ }
6541
+
6542
+ .deco-progress-bar, :where([data-ui="art-deco"]) .ui-progress-bar {
6543
+ background: linear-gradient(90deg,var(--deco-jewel-success),var(--deco-secondary),var(--deco-jewel-primary));
6544
+ clip-path: none;
6545
+ border-radius: 0;
6546
+ display: block;
6547
+ }
6548
+
6549
+ .deco-progress, :where([data-ui="art-deco"]) .ui-progress {
6550
+ height: 10px;
6551
+ border: 3px double var(--deco-metal);
6552
+ block-size: 10px;
6553
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.9);
6554
+ border-radius: .1rem;
6555
+ padding: 0;
6556
+ }
6557
+
6558
+ [data-ui="art-deco"][data-mode] .deco-empty-state {
6559
+ min-height: 0;
6560
+ text-align: start;
6561
+ min-block-size: 0;
6562
+ display: block;
6563
+ }
6564
+
6565
+ .deco-check input:checked + .deco-check-control, .deco-radio input:checked + .deco-radio-control, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control, :where([data-ui="art-deco"]) .ui-radio input:checked+.ui-radio-control {
6566
+ box-shadow: none;
6567
+ }
6568
+
6569
+ .deco-frame, .deco-dialog {
6570
+ background: var(--deco-surface);
6571
+ color: var(--deco-text);
6572
+ isolation: isolate;
6573
+ clip-path: var(--deco-step-lg);
6574
+ border: 0;
6575
+ padding: 16px 20px;
6576
+ position: relative;
6577
+ }
6578
+
6579
+ .deco-frame:before, .deco-dialog:before {
6580
+ content: "";
6581
+ z-index: -1;
6582
+ pointer-events: none;
6583
+ background: var(--deco-metal);
6584
+ clip-path: var(--deco-step-lg);
6585
+ position: absolute;
6586
+ inset: 0;
6587
+ }
6588
+
6589
+ .deco-frame:after, .deco-dialog:after {
6590
+ content: "";
6591
+ z-index: -1;
6592
+ pointer-events: none;
6593
+ background: var(--deco-surface);
6594
+ border: 1px solid var(--deco-metal);
6595
+ clip-path: var(--deco-step-lg);
6596
+ position: absolute;
6597
+ inset: 3px;
6598
+ }
6599
+
6600
+ .deco-frame-navy, .deco-frame-navy:after {
6601
+ background: var(--deco-primary);
6602
+ color: var(--deco-on-primary);
6603
+ }
6604
+
6605
+ [data-ui="art-deco"][data-mode] .deco-frame-navy .deco-section-title {
6606
+ color: var(--deco-on-primary);
6607
+ }
6608
+
6609
+ .deco-masthead {
6610
+ text-align: center;
6611
+ grid-template-columns: 1fr auto 1fr;
6612
+ align-items: center;
6613
+ gap: 20px;
6614
+ padding: 0 24px 20px;
6615
+ display: grid;
6616
+ }
6617
+
6618
+ .deco-masthead:before, .deco-masthead:after {
6619
+ content: "";
6620
+ background: var(--deco-metal);
6621
+ height: 1px;
6622
+ }
6623
+
6624
+ .deco-masthead-title {
6625
+ color: var(--deco-text);
6626
+ font: 400 48px/1.05 var(--deco-font-display);
6627
+ text-transform: uppercase;
6628
+ text-shadow: none;
6629
+ letter-spacing: 0;
6630
+ margin: 0;
6631
+ }
6632
+
6633
+ .deco-monogram {
6634
+ border: 1px solid var(--deco-metal);
6635
+ width: 40px;
6636
+ height: 40px;
6637
+ margin: 16px;
6638
+ display: block;
6639
+ position: relative;
6640
+ transform: rotate(45deg);
6641
+ }
6642
+
6643
+ .deco-monogram:before {
6644
+ content: "";
6645
+ border: 1px solid var(--deco-metal);
6646
+ position: absolute;
6647
+ inset: -8px 10px;
6648
+ transform: rotate(-45deg);
6649
+ }
6650
+
6651
+ .deco-stat {
6652
+ text-align: center;
6653
+ border-inline-start: 1px solid var(--deco-metal);
6654
+ padding: 4px 12px;
6655
+ }
6656
+
6657
+ .deco-stat-value {
6658
+ font: 28px/1.2 var(--deco-font-display);
6659
+ display: block;
6660
+ }
6661
+
6662
+ .deco-stat-label {
6663
+ text-transform: uppercase;
6664
+ margin-top: 8px;
6665
+ font-size: 11px;
6666
+ display: block;
6667
+ }
6668
+
6669
+ .deco-health {
6670
+ width: 150px;
6671
+ height: 82px;
6672
+ font: 26px var(--deco-font-display);
6673
+ align-content: end;
6674
+ justify-items: center;
6675
+ display: grid;
6676
+ position: relative;
6677
+ }
6678
+
6679
+ .deco-health:before {
6680
+ content: "";
6681
+ border: 1px solid var(--deco-metal);
6682
+ background: conic-gradient(from 270deg at 50% 100%,var(--deco-secondary) 0deg calc(var(--deco-value, 72)*1.8deg),var(--deco-metal) 0deg 180deg,transparent 0);
6683
+ border-radius: 100px 100px 0 0;
6684
+ position: absolute;
6685
+ inset: 0;
6686
+ mask: radial-gradient(at bottom, #0000 60%, #000 62%);
6687
+ }
6688
+
6689
+ .deco-health small {
6690
+ font: 10px var(--deco-font-control);
6691
+ text-transform: uppercase;
6692
+ }
6693
+
6694
+ .deco-meta-grid {
6695
+ grid-template-columns: repeat(4, minmax(0, 1fr));
6696
+ padding: 4px;
6697
+ display: grid;
6698
+ }
6699
+
6700
+ .deco-meta {
6701
+ text-align: center;
6702
+ border-inline-end: 1px solid var(--deco-metal);
6703
+ align-content: center;
6704
+ justify-items: center;
6705
+ gap: 12px;
6706
+ padding: 12px;
6707
+ font-size: 12px;
6708
+ display: grid;
6709
+ }
6710
+
6711
+ .deco-meta:last-child {
6712
+ border: 0;
6713
+ }
6714
+
6715
+ .deco-status-dot {
6716
+ background: var(--deco-secondary);
6717
+ border: 1px solid var(--deco-metal);
6718
+ border-radius: 50%;
6719
+ width: 10px;
6720
+ height: 10px;
6721
+ margin-inline-end: 6px;
6722
+ display: inline-block;
6723
+ }
6724
+
6725
+ .deco-performance {
6726
+ align-items: end;
6727
+ gap: 4px;
6728
+ height: 32px;
6729
+ display: flex;
6730
+ }
6731
+
6732
+ .deco-performance i {
6733
+ width: 10px;
6734
+ height: var(--deco-bar, 10px);
6735
+ background: var(--deco-secondary);
6736
+ border: 1px solid var(--deco-metal);
6737
+ display: block;
6738
+ }
6739
+
6740
+ .deco-performance i:nth-last-child(-n+2) {
6741
+ background: var(--deco-warning);
6742
+ }
6743
+
6744
+ .deco-section-title {
6745
+ font: 700 13px/1.3 var(--deco-font-control);
6746
+ text-transform: uppercase;
6747
+ letter-spacing: 0;
6748
+ align-items: center;
6749
+ gap: 12px;
6750
+ margin: 0 0 16px;
6751
+ display: flex;
6752
+ }
6753
+
6754
+ .deco-section-title:after {
6755
+ content: "";
6756
+ background: var(--deco-metal);
6757
+ flex: 1;
6758
+ min-width: 12px;
6759
+ height: 1px;
6760
+ }
6761
+
6762
+ .deco-number {
6763
+ font: 11px var(--deco-font-mono);
6764
+ color: var(--deco-text-muted);
6765
+ }
6766
+
6767
+ .deco-label, .deco-kicker, :where([data-ui="art-deco"]) .ui-label {
6768
+ font-family: var(--deco-font-control);
6769
+ letter-spacing: 0;
6770
+ text-transform: uppercase;
6771
+ font-size: 11px;
6772
+ font-weight: 600;
6773
+ }
6774
+
6775
+ .deco-button, .deco-icon-button, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button {
6776
+ isolation: isolate;
6777
+ min-height: 36px;
6778
+ clip-path: none;
6779
+ background: var(--deco-surface);
6780
+ min-block-size: 36px;
6781
+ min-inline-size: 0;
6782
+ color: var(--deco-text);
6783
+ box-shadow: none;
6784
+ font: 500 12px/1.2 var(--deco-font-control);
6785
+ letter-spacing: 0;
6786
+ text-transform: uppercase;
6787
+ border: 0;
6788
+ border-radius: 0;
6789
+ gap: 8px;
6790
+ padding: 8px 14px;
6791
+ position: relative;
6792
+ }
6793
+
6794
+ .deco-button:before, .deco-icon-button:before, :where([data-ui="art-deco"]) .ui-button:before, :where([data-ui="art-deco"]) .ui-icon-button:before {
6795
+ content: "";
6796
+ z-index: 0;
6797
+ background: var(--deco-metal);
6798
+ pointer-events: none;
6799
+ clip-path: polygon(evenodd, 7px 0, calc(100% - 7px) 0, calc(100% - 7px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 7px) 100%, 7px 100%, 7px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 7px 3px, 7px 0, 8px 1px, 8px 4px, 1px 4px, 1px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 8px) calc(100% - 4px), calc(100% - 1px) calc(100% - 4px), calc(100% - 1px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 1px, 8px 1px, 7px 0);
6800
+ border: 0;
6801
+ position: absolute;
6802
+ inset: 0;
6803
+ }
6804
+
6805
+ .deco-button, .deco-icon-button, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button {
6806
+ clip-path: var(--deco-step-sm);
6807
+ background-color: #0000;
6808
+ }
6809
+
6810
+ .deco-button, :where([data-ui="art-deco"]) .ui-button {
6811
+ min-inline-size: 12rem;
6812
+ }
6813
+
6814
+ .deco-button:focus-visible, .deco-icon-button:focus-visible, :where([data-ui="art-deco"]) .ui-button:focus-visible, :where([data-ui="art-deco"]) .ui-icon-button:focus-visible {
6815
+ outline-offset: -6px;
6816
+ }
6817
+
6818
+ .deco-button-primary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]) {
6819
+ background-color: var(--deco-jewel-primary);
6820
+ color: var(--deco-jewel-on);
6821
+ }
6822
+
6823
+ .deco-button-secondary, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]) {
6824
+ background-color: var(--deco-jewel-secondary);
6825
+ color: var(--deco-jewel-on);
6826
+ }
6827
+
6828
+ .deco-button-danger, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="danger"]) {
6829
+ background-color: var(--deco-jewel-danger);
6830
+ color: var(--deco-jewel-on);
6831
+ }
6832
+
6833
+ [data-ui="art-deco"][data-mode] :is(.deco-button, .deco-icon-button)[aria-busy="true"], :where([data-ui="art-deco"])[data-mode] :is(.ui-button,.ui-icon-button)[aria-busy="true"] {
6834
+ opacity: 1;
6835
+ filter: none;
6836
+ cursor: progress;
6837
+ }
6838
+
6839
+ .deco-button-primary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="primary"]):hover {
6840
+ background-color: var(--deco-jewel-primary);
6841
+ }
6842
+
6843
+ .deco-button-secondary:hover, :where([data-ui="art-deco"]) .ui-button:where([data-ui-variant="secondary"]):hover {
6844
+ background-color: var(--deco-jewel-secondary);
6845
+ }
6846
+
6847
+ .deco-button:is(.is-pressed, :active), :where([data-ui="art-deco"]) .ui-button:is(.is-pressed,:active) {
6848
+ transform: translateY(2px);
6849
+ }
6850
+
6851
+ .deco-button:disabled, .deco-icon-button:disabled, :where([data-ui="art-deco"]) .ui-button:disabled, :where([data-ui="art-deco"]) .ui-icon-button:disabled {
6852
+ color: var(--deco-text-muted);
6853
+ background: var(--deco-surface-soft);
6854
+ opacity: .55;
6855
+ filter: grayscale();
6856
+ cursor: not-allowed;
6857
+ }
6858
+
6859
+ .deco-icon-button, :where([data-ui="art-deco"]) .ui-icon-button {
6860
+ width: 36px;
6861
+ min-width: 36px;
6862
+ padding: 0;
6863
+ font-family: Segoe UI Symbol, Arial, sans-serif;
6864
+ font-size: 16px;
6865
+ line-height: 1;
6866
+ }
6867
+
6868
+ .deco-button-loading {
6869
+ justify-content: center;
6870
+ align-items: center;
6871
+ min-inline-size: 152px;
6872
+ display: inline-flex;
6873
+ }
6874
+
6875
+ .deco-button[aria-busy="true"]:after, .deco-icon-button[aria-busy="true"]:after, [data-ui="art-deco"] :where(button[aria-busy="true"]):after, :where([data-ui="art-deco"]) .ui-button[aria-busy="true"]:after, :where([data-ui="art-deco"]) .ui-icon-button[aria-busy="true"]:after {
6876
+ content: "";
6877
+ box-sizing: border-box;
6878
+ background: var(--deco-spinner-segmented-background);
6879
+ border: 3px double var(--deco-metal);
6880
+ width: 16px;
6881
+ height: 16px;
6882
+ box-shadow: none;
6883
+ border-radius: 50%;
6884
+ flex: 0 0 16px;
6885
+ margin: 0;
6886
+ animation: 1.4s linear infinite deco-spin;
6887
+ display: inline-block;
6888
+ position: static;
6889
+ mask: none;
6890
+ }
6891
+
6892
+ .deco-spinner, .deco-loading-spinner, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
6893
+ border: 3px double var(--deco-metal);
6894
+ background: var(--deco-spinner-segmented-background);
6895
+ width: 48px;
6896
+ height: 48px;
6897
+ box-shadow: none;
6898
+ clip-path: none;
6899
+ border-radius: 50%;
6900
+ flex: 0 0 48px;
6901
+ animation: 1.4s linear infinite deco-spin;
6902
+ display: inline-block;
6903
+ position: relative;
6904
+ }
6905
+
6906
+ .deco-spinner:before, .deco-loading-spinner:before, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):before {
6907
+ content: "";
6908
+ background: repeating-conic-gradient(var(--deco-metal) 0deg 22deg,transparent 22deg 36deg);
6909
+ border-radius: 50%;
6910
+ position: absolute;
6911
+ inset: 0;
6912
+ mask: radial-gradient(#0000 49%, #000 51%);
6913
+ }
6914
+
6915
+ .deco-spinner:after, .deco-loading-spinner:after, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):after {
6916
+ content: "";
6917
+ background: var(--deco-warning);
6918
+ border: 1px solid var(--deco-secondary);
6919
+ position: absolute;
6920
+ inset: 35%;
6921
+ transform: rotate(45deg);
6922
+ }
6923
+
6924
+ .deco-spinner-sm {
6925
+ flex-basis: 28px;
6926
+ width: 28px;
6927
+ height: 28px;
6928
+ }
6929
+
6930
+ .deco-spinner-lg {
6931
+ flex-basis: 64px;
6932
+ width: 64px;
6933
+ height: 64px;
6934
+ }
6935
+
6936
+ .deco-input, .deco-select, .deco-textarea, :where([data-ui="art-deco"]) .ui-input, :where([data-ui="art-deco"]) .ui-select, :where([data-ui="art-deco"]) .ui-textarea {
6937
+ border: 3px double var(--deco-metal);
6938
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.88);
6939
+ min-height: 32px;
6940
+ color: var(--deco-text);
6941
+ background-color: var(--deco-surface);
6942
+ letter-spacing: 0;
6943
+ border-radius: .1rem;
6944
+ padding: 5px 10px;
6945
+ font-size: 12px;
6946
+ }
6947
+
6948
+ .deco-textarea, :where([data-ui="art-deco"]) .ui-textarea {
6949
+ min-height: 88px;
6950
+ }
6951
+
6952
+ .deco-input-valid {
6953
+ border-inline-start: 3px double var(--deco-success);
6954
+ }
6955
+
6956
+ .deco-input[aria-invalid="true"], :where([data-ui="art-deco"]) .ui-input[aria-invalid="true"] {
6957
+ border-color: var(--deco-status-danger);
6958
+ box-shadow: none;
6959
+ border-inline-start-style: double;
6960
+ border-inline-start-width: 3px;
6961
+ }
6962
+
6963
+ .deco-help-error {
6964
+ color: var(--deco-status-danger);
6965
+ font-size: 11px;
6966
+ }
6967
+
6968
+ .deco-file-upload {
6969
+ border: 1px solid var(--deco-metal);
6970
+ min-height: 92px;
6971
+ color: var(--deco-text);
6972
+ background: var(--deco-surface);
6973
+ cursor: pointer;
6974
+ text-align: center;
6975
+ align-content: center;
6976
+ justify-items: center;
6977
+ gap: 8px;
6978
+ padding: 16px;
6979
+ font-size: 12px;
6980
+ display: grid;
6981
+ position: relative;
6982
+ }
6983
+
6984
+ .deco-file {
6985
+ opacity: 0;
6986
+ cursor: pointer;
6987
+ width: 100%;
6988
+ height: 100%;
6989
+ position: absolute;
6990
+ inset: 0;
6991
+ }
6992
+
6993
+ .deco-file-upload:focus-within {
6994
+ outline: 2px solid var(--deco-focus);
6995
+ outline-offset: 3px;
6996
+ }
6997
+
6998
+ .deco-select-panel {
6999
+ border: 1px solid var(--deco-metal);
7000
+ background: var(--deco-surface);
7001
+ padding: 4px 0;
7002
+ }
7003
+
7004
+ .deco-option {
7005
+ width: 100%;
7006
+ min-height: 32px;
7007
+ color: var(--deco-text);
7008
+ text-align: start;
7009
+ cursor: pointer;
7010
+ background: none;
7011
+ border: 0;
7012
+ justify-content: space-between;
7013
+ gap: 8px;
7014
+ padding: 6px 12px;
7015
+ font-size: 12px;
7016
+ display: flex;
7017
+ }
7018
+
7019
+ .deco-option[aria-selected="true"] {
7020
+ background: var(--deco-secondary);
7021
+ color: var(--deco-on-secondary);
7022
+ }
7023
+
7024
+ .deco-group-label {
7025
+ text-transform: uppercase;
7026
+ color: var(--deco-text-muted);
7027
+ padding: 8px 12px;
7028
+ font-size: 11px;
7029
+ font-weight: 600;
7030
+ display: block;
7031
+ }
7032
+
7033
+ .deco-multi {
7034
+ border: 1px solid var(--deco-metal);
7035
+ background: var(--deco-surface);
7036
+ flex-wrap: wrap;
7037
+ gap: 4px;
7038
+ min-height: 60px;
7039
+ padding: 8px;
7040
+ display: flex;
7041
+ }
7042
+
7043
+ .deco-chip {
7044
+ background: var(--deco-secondary);
7045
+ color: var(--deco-on-secondary);
7046
+ border: 1px solid var(--deco-metal);
7047
+ align-items: center;
7048
+ gap: 4px;
7049
+ padding: 0 8px;
7050
+ font-size: 11px;
7051
+ display: inline-flex;
7052
+ }
7053
+
7054
+ .deco-chip button {
7055
+ width: 28px;
7056
+ height: 28px;
7057
+ color: inherit;
7058
+ cursor: pointer;
7059
+ background: none;
7060
+ border: 0;
7061
+ padding: 4px;
7062
+ }
7063
+
7064
+ .deco-check, .deco-radio, :where([data-ui="art-deco"]) .ui-check, :where([data-ui="art-deco"]) .ui-radio {
7065
+ gap: 8px;
7066
+ min-height: 32px;
7067
+ font-size: 12px;
7068
+ }
7069
+
7070
+ .deco-check input:checked + .deco-check-control, .deco-radio input:checked + .deco-radio-control, .deco-switch input:checked + .deco-switch-track, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control, :where([data-ui="art-deco"]) .ui-radio input:checked+.ui-radio-control, :where([data-ui="art-deco"]) .ui-switch input:checked+.ui-switch-track {
7071
+ background: var(--deco-secondary);
7072
+ }
7073
+
7074
+ .deco-check input:checked + .deco-check-control:after, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control:after {
7075
+ color: var(--deco-on-secondary);
7076
+ }
7077
+
7078
+ :is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"]):after {
7079
+ transform: translate(calc(-50% - 5px), calc(4px - 62%)) rotate(-45deg);
7080
+ }
7081
+
7082
+ @supports ((-moz-appearance: none)) {
7083
+ :is([class="deco-check"], [class^="deco-check "], [class*=" deco-check "], [class$=" deco-check"]) input:checked + :is([class="deco-check-control"], [class^="deco-check-control "], [class*=" deco-check-control "], [class$=" deco-check-control"]):after {
7084
+ transform: translate(calc(-50% - 5px), calc(-62% - 5px)) rotate(-45deg);
7085
+ }
7086
+ }
7087
+
7088
+ @supports ((-webkit-hyphens: none)) {
7089
+ .deco-check input:checked + .deco-check-control:after, :where([data-ui="art-deco"]) .ui-check input:checked+.ui-check-control:after {
7090
+ transform: translate(calc(-50% - 5px), calc(3px - 62%)) rotate(-45deg);
7091
+ }
7092
+ }
7093
+
7094
+ .deco-radio input:checked + .deco-radio-control:after, :where([data-ui="art-deco"]) .ui-radio input:checked+.ui-radio-control:after {
7095
+ background: var(--deco-on-secondary);
7096
+ }
7097
+
7098
+ .deco-switch, :where([data-ui="art-deco"]) .ui-switch {
7099
+ min-height: 32px;
7100
+ }
7101
+
7102
+ .deco-switch-track, :where([data-ui="art-deco"]) .ui-switch-track {
7103
+ width: 40px;
7104
+ height: 22px;
7105
+ border-width: 3px;
7106
+ block-size: 22px;
7107
+ inline-size: 40px;
7108
+ }
7109
+
7110
+ .deco-switch-thumb, :where([data-ui="art-deco"]) .ui-switch-thumb {
7111
+ width: 16px;
7112
+ height: 16px;
7113
+ background: var(--deco-warning);
7114
+ border: 1px solid var(--deco-metal);
7115
+ block-size: 16px;
7116
+ inline-size: 16px;
7117
+ inset-block-start: 3px;
7118
+ }
7119
+
7120
+ .deco-switch input:checked + .deco-switch-track .deco-switch-thumb, :where([data-ui="art-deco"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
7121
+ inset-inline-start: calc(100% - 21px);
7122
+ }
7123
+
7124
+ .deco-check:has(input:disabled), .deco-radio:has(input:disabled), .deco-switch:has(input:disabled), :where([data-ui="art-deco"]) .ui-check:has(input:disabled), :where([data-ui="art-deco"]) .ui-radio:has(input:disabled), :where([data-ui="art-deco"]) .ui-switch:has(input:disabled) {
7125
+ opacity: .72;
7126
+ }
7127
+
7128
+ .deco-check:focus-within, .deco-radio:focus-within, .deco-switch:focus-within, :where([data-ui="art-deco"]) .ui-check:focus-within, :where([data-ui="art-deco"]) .ui-radio:focus-within, :where([data-ui="art-deco"]) .ui-switch:focus-within {
7129
+ outline: 2px solid var(--deco-focus);
7130
+ outline-offset: 2px;
7131
+ }
7132
+
7133
+ .deco-breadcrumb {
7134
+ flex-wrap: wrap;
7135
+ gap: 8px;
7136
+ margin-block: 12px;
7137
+ font-size: 12px;
7138
+ display: flex;
7139
+ }
7140
+
7141
+ .deco-breadcrumb a {
7142
+ color: var(--deco-link);
7143
+ }
7144
+
7145
+ .deco-pagination {
7146
+ gap: 4px;
7147
+ margin-block: 12px;
7148
+ display: flex;
7149
+ }
7150
+
7151
+ .deco-pagination button {
7152
+ background: var(--deco-surface);
7153
+ width: 32px;
7154
+ min-height: 32px;
7155
+ color: var(--deco-text);
7156
+ border: 1px solid var(--deco-metal);
7157
+ cursor: pointer;
7158
+ }
7159
+
7160
+ .deco-pagination [aria-current="page"] {
7161
+ background: var(--deco-secondary);
7162
+ color: var(--deco-on-secondary);
7163
+ }
7164
+
7165
+ .deco-slider-wrap {
7166
+ padding-top: 28px;
7167
+ position: relative;
7168
+ }
7169
+
7170
+ .deco-slider-wrap:before {
7171
+ content: "";
7172
+ pointer-events: none;
7173
+ background: repeating-linear-gradient(90deg,var(--deco-metal)0 1px,transparent 1px 25%);
7174
+ border-inline-end: 1px solid var(--deco-metal);
7175
+ height: 20px;
7176
+ position: absolute;
7177
+ inset: auto 0 6px;
7178
+ }
7179
+
7180
+ .deco-slider-output {
7181
+ top: 0;
7182
+ left: clamp(22px,calc(var(--deco-value, 68)*1%),calc(100% - 22px));
7183
+ text-align: center;
7184
+ width: 44px;
7185
+ font: 11px var(--deco-font-mono);
7186
+ color: var(--deco-on-primary);
7187
+ background: var(--deco-primary);
7188
+ border: 1px solid var(--deco-metal);
7189
+ clip-path: var(--deco-step-sm);
7190
+ padding: 5px;
7191
+ position: absolute;
7192
+ transform: translateX(-50%);
7193
+ }
7194
+
7195
+ [data-ui="art-deco"][data-mode] .deco-slider {
7196
+ appearance: none;
7197
+ width: 100%;
7198
+ height: 32px;
7199
+ box-shadow: none;
7200
+ background: none;
7201
+ border: 0;
7202
+ margin: 0;
7203
+ padding: 0;
7204
+ }
7205
+
7206
+ .deco-slider::-webkit-slider-runnable-track {
7207
+ background: linear-gradient(90deg,var(--deco-secondary) calc(var(--deco-value, 68)*1%),var(--deco-metal)0);
7208
+ border: 0;
7209
+ height: 6px;
7210
+ }
7211
+
7212
+ [data-ui="art-deco"][data-mode] .deco-slider::-webkit-slider-thumb {
7213
+ appearance: none;
7214
+ border: 2px solid var(--deco-metal);
7215
+ clip-path: none;
7216
+ background: var(--deco-secondary);
7217
+ border-radius: 0;
7218
+ width: 18px;
7219
+ height: 18px;
7220
+ margin-top: -6px;
7221
+ transform: rotate(45deg);
7222
+ }
7223
+
7224
+ .deco-slider::-moz-range-track {
7225
+ background: var(--deco-metal);
7226
+ border: 0;
7227
+ height: 6px;
7228
+ }
7229
+
7230
+ .deco-slider::-moz-range-progress {
7231
+ background: var(--deco-secondary);
7232
+ height: 6px;
7233
+ }
7234
+
7235
+ [data-ui="art-deco"][data-mode] .deco-slider::-moz-range-thumb {
7236
+ border: 2px solid var(--deco-metal);
7237
+ clip-path: none;
7238
+ background: var(--deco-secondary);
7239
+ border-radius: 0;
7240
+ width: 14px;
7241
+ height: 14px;
7242
+ transform: rotate(45deg);
7243
+ }
7244
+
7245
+ .deco-meter {
7246
+ border: 1px solid var(--deco-metal);
7247
+ background: var(--deco-surface);
7248
+ height: 16px;
7249
+ padding: 3px;
7250
+ position: relative;
7251
+ }
7252
+
7253
+ .deco-meter:before {
7254
+ content: "";
7255
+ background: linear-gradient(90deg,var(--deco-success)0 42%,var(--deco-warning) 42% 70%,var(--deco-danger) 70%);
7256
+ height: 100%;
7257
+ display: block;
7258
+ }
7259
+
7260
+ .deco-meter:after {
7261
+ content: "";
7262
+ top: 0;
7263
+ left: clamp(0px,calc(var(--deco-value, 55)*1%),calc(100% - 14px));
7264
+ border: 2px solid var(--deco-metal);
7265
+ background: var(--deco-secondary);
7266
+ width: 14px;
7267
+ height: 14px;
7268
+ position: absolute;
7269
+ transform: rotate(45deg);
7270
+ }
7271
+
7272
+ .deco-step-progress {
7273
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7274
+ gap: 4px;
7275
+ display: grid;
7276
+ }
7277
+
7278
+ .deco-step-progress i {
7279
+ background: var(--deco-surface-soft);
7280
+ border: 1px solid var(--deco-metal);
7281
+ height: 12px;
7282
+ clip-path: var(--deco-step-sm);
7283
+ display: block;
7284
+ }
7285
+
7286
+ .deco-step-progress .is-done {
7287
+ background: var(--deco-secondary);
7288
+ }
7289
+
7290
+ .deco-stage-list {
7291
+ margin: 0;
7292
+ padding: 8px 0;
7293
+ list-style: none;
7294
+ }
7295
+
7296
+ .deco-stage {
7297
+ grid-template-columns: 38px 1fr;
7298
+ align-items: center;
7299
+ gap: 12px;
7300
+ min-height: 92px;
7301
+ font-size: 12px;
7302
+ display: grid;
7303
+ position: relative;
7304
+ }
7305
+
7306
+ .deco-stage:not(:last-child):after {
7307
+ content: "";
7308
+ background: var(--deco-metal);
7309
+ width: 1px;
7310
+ height: calc(100% - 38px);
7311
+ position: absolute;
7312
+ top: calc(50% + 19px);
7313
+ left: 18px;
7314
+ }
7315
+
7316
+ .deco-stage-number {
7317
+ border: 1px solid var(--deco-metal);
7318
+ background: var(--deco-surface);
7319
+ place-items: center;
7320
+ width: 30px;
7321
+ height: 30px;
7322
+ margin-left: 4px;
7323
+ display: grid;
7324
+ transform: rotate(45deg);
7325
+ }
7326
+
7327
+ .deco-stage-number span {
7328
+ font: 10px var(--deco-font-mono);
7329
+ transform: rotate(-45deg);
7330
+ }
7331
+
7332
+ .deco-stage small {
7333
+ color: var(--deco-text-muted);
7334
+ margin-top: 6px;
7335
+ font-size: 10px;
7336
+ display: block;
7337
+ }
7338
+
7339
+ .deco-stage.is-done .deco-stage-number {
7340
+ background: var(--deco-secondary);
7341
+ color: var(--deco-on-secondary);
7342
+ }
7343
+
7344
+ .deco-stage[aria-current="step"] .deco-stage-number {
7345
+ background: var(--deco-warning);
7346
+ color: var(--deco-on-warning);
7347
+ }
7348
+
7349
+ .deco-tabs {
7350
+ border: 3px double var(--deco-metal);
7351
+ background: var(--deco-surface);
7352
+ }
7353
+
7354
+ .deco-tab-list, .deco-segmented {
7355
+ border: 1px solid var(--deco-metal);
7356
+ display: flex;
7357
+ }
7358
+
7359
+ .deco-tab, .deco-segment {
7360
+ background: var(--deco-surface);
7361
+ min-width: 0;
7362
+ min-height: 36px;
7363
+ color: var(--deco-text);
7364
+ border: 0;
7365
+ border-inline-end: 1px solid var(--deco-metal);
7366
+ text-transform: uppercase;
7367
+ cursor: pointer;
7368
+ flex: 1;
7369
+ padding: 6px;
7370
+ font-size: 11px;
7371
+ }
7372
+
7373
+ .deco-tab:last-child, .deco-segment:last-child {
7374
+ border-inline-end: 0;
7375
+ }
7376
+
7377
+ .deco-tab[aria-selected="true"], .deco-segment[aria-pressed="true"] {
7378
+ background: var(--deco-secondary);
7379
+ color: var(--deco-on-secondary);
7380
+ }
7381
+
7382
+ .deco-tab-panel {
7383
+ min-height: 70px;
7384
+ padding: 12px;
7385
+ font-size: 12px;
7386
+ }
7387
+
7388
+ .deco-stepper {
7389
+ border: 1px solid var(--deco-metal);
7390
+ grid-template-columns: 40px minmax(64px, 1fr) 40px;
7391
+ display: inline-grid;
7392
+ }
7393
+
7394
+ .deco-stepper button, .deco-stepper output {
7395
+ background: var(--deco-surface);
7396
+ min-height: 36px;
7397
+ color: var(--deco-text);
7398
+ border: 0;
7399
+ border-inline-end: 1px solid var(--deco-metal);
7400
+ font: 14px var(--deco-font-mono);
7401
+ place-items: center;
7402
+ padding: 4px;
7403
+ display: grid;
7404
+ }
7405
+
7406
+ .deco-stepper button {
7407
+ cursor: pointer;
7408
+ }
7409
+
7410
+ .deco-stepper button:last-child {
7411
+ border: 0;
7412
+ }
7413
+
7414
+ .deco-badge, :where([data-ui="art-deco"]) .ui-badge {
7415
+ border: 1px solid var(--deco-metal);
7416
+ clip-path: var(--deco-step-sm);
7417
+ box-shadow: none;
7418
+ font: 600 10px/1.2 var(--deco-font-control);
7419
+ letter-spacing: 0;
7420
+ border-radius: 0;
7421
+ padding: 5px 12px;
7422
+ }
7423
+
7424
+ .deco-badge-primary, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="primary"]) {
7425
+ background: var(--deco-primary);
7426
+ color: var(--deco-on-primary);
7427
+ }
7428
+
7429
+ .deco-badge-secondary, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="secondary"]) {
7430
+ background: var(--deco-secondary);
7431
+ color: var(--deco-on-secondary);
7432
+ }
7433
+
7434
+ .deco-badge-success, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="success"]) {
7435
+ background: var(--deco-success);
7436
+ color: var(--deco-on-success);
7437
+ }
7438
+
7439
+ .deco-badge-warning, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="warning"]) {
7440
+ background: var(--deco-warning);
7441
+ color: var(--deco-on-warning);
7442
+ }
7443
+
7444
+ .deco-badge-danger, :where([data-ui="art-deco"]) .ui-badge:where([data-ui-variant="danger"]) {
7445
+ background: var(--deco-danger);
7446
+ color: var(--deco-on-danger);
7447
+ }
7448
+
7449
+ .deco-badge-info {
7450
+ background: var(--deco-info);
7451
+ color: var(--deco-on-info);
7452
+ }
7453
+
7454
+ .deco-badge-outline {
7455
+ color: var(--deco-text);
7456
+ background: none;
7457
+ }
7458
+
7459
+ .deco-alert, :where([data-ui="art-deco"]) .ui-alert {
7460
+ border: 3px double var(--deco-metal);
7461
+ box-shadow: inset 0 0 0 1px rgb(var(--deco-enamel-rgb)/.9);
7462
+ background: var(--deco-surface);
7463
+ border-radius: .1rem;
7464
+ flex-wrap: nowrap;
7465
+ gap: 8px;
7466
+ padding: 6px 10px;
7467
+ display: flex;
7468
+ }
7469
+
7470
+ .deco-alert-success, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="success"]) {
7471
+ border-color: var(--deco-status-success);
7472
+ }
7473
+
7474
+ .deco-alert-warning, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="warning"]) {
7475
+ border-color: var(--deco-status-warning);
7476
+ }
7477
+
7478
+ .deco-alert-danger, :where([data-ui="art-deco"]) .ui-alert:where([data-ui-variant="danger"]) {
7479
+ border-color: var(--deco-status-danger);
7480
+ }
7481
+
7482
+ .deco-alert-info {
7483
+ border-color: var(--deco-info);
7484
+ }
7485
+
7486
+ .deco-alert-icon {
7487
+ background: currentColor;
7488
+ flex: 0 0 10px;
7489
+ height: 10px;
7490
+ transform: rotate(45deg);
7491
+ }
7492
+
7493
+ .deco-alert-body, :where([data-ui="art-deco"]) .ui-alert-body {
7494
+ min-width: 0;
7495
+ color: var(--deco-text);
7496
+ flex: 1;
7497
+ }
7498
+
7499
+ .deco-alert-title, :where([data-ui="art-deco"]) .ui-alert-title {
7500
+ letter-spacing: 0;
7501
+ color: var(--deco-text);
7502
+ margin-right: 6px;
7503
+ font-size: 11px;
7504
+ }
7505
+
7506
+ .deco-alert-close {
7507
+ height: 28px;
7508
+ color: var(--deco-text);
7509
+ cursor: pointer;
7510
+ background: none;
7511
+ border: 0;
7512
+ flex: 0 0 28px;
7513
+ place-items: center;
7514
+ display: grid;
7515
+ }
7516
+
7517
+ .deco-table-wrap, :where([data-ui="art-deco"]) .ui-table-wrap {
7518
+ border: 3px double var(--deco-metal);
7519
+ clip-path: none;
7520
+ border-radius: 0;
7521
+ overflow-x: auto;
7522
+ }
7523
+
7524
+ .deco-table th, :where([data-ui="art-deco"]) .ui-table th {
7525
+ background: var(--deco-primary);
7526
+ color: var(--deco-on-primary);
7527
+ letter-spacing: 0;
7528
+ font-size: 11px;
7529
+ }
7530
+
7531
+ .deco-table td, :where([data-ui="art-deco"]) .ui-table td {
7532
+ font-size: 12px;
7533
+ }
7534
+
7535
+ .deco-tooltip, [data-ui="art-deco"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
7536
+ clip-path: polygon(.35rem 0, calc(100% - .35rem) 0, 100% .35rem, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, .35rem 100%, 0 calc(100% - .35rem), 0 .35rem);
7537
+ border: 3px double var(--deco-metal);
7538
+ color: rgb(var(--deco-tooltip-text-rgb));
7539
+ background: rgb(var(--deco-tooltip-bg-rgb));
7540
+ box-shadow: none;
7541
+ font: 12px/1.4 var(--deco-font-body);
7542
+ letter-spacing: 0;
7543
+ text-transform: none;
7544
+ border-radius: 0;
7545
+ padding: 12px;
7546
+ position: relative;
7547
+ }
7548
+
7549
+ .deco-tooltip:after {
7550
+ content: "";
7551
+ background: rgb(var(--deco-tooltip-bg-rgb));
7552
+ border-right: 1px solid var(--deco-metal);
7553
+ border-bottom: 1px solid var(--deco-metal);
7554
+ width: 10px;
7555
+ height: 10px;
7556
+ position: absolute;
7557
+ bottom: -6px;
7558
+ left: 20px;
7559
+ transform: rotate(45deg);
7560
+ }
7561
+
7562
+ [data-ui="art-deco"][data-mode] dialog.deco-dialog {
7563
+ clip-path: none;
7564
+ width: min(480px, 100% - 32px);
7565
+ max-height: calc(100% - 32px);
7566
+ margin: auto;
7567
+ position: fixed;
7568
+ overflow: auto;
7569
+ }
7570
+
7571
+ dialog.deco-dialog:not([open]) {
7572
+ display: none;
7573
+ }
7574
+
7575
+ .deco-dialog h3, .deco-dialog h4 {
7576
+ font: 24px var(--deco-font-display);
7577
+ text-align: center;
7578
+ text-transform: uppercase;
7579
+ margin: 16px 0 8px;
7580
+ }
7581
+
7582
+ .deco-dialog p {
7583
+ text-align: center;
7584
+ font-size: 12px;
7585
+ }
7586
+
7587
+ .deco-dialog-actions {
7588
+ flex-wrap: wrap;
7589
+ justify-content: center;
7590
+ gap: 8px;
7591
+ margin-top: 20px;
7592
+ display: flex;
7593
+ }
7594
+
7595
+ .deco-details {
7596
+ border: 1px solid var(--deco-metal);
7597
+ padding: 8px 12px;
7598
+ font-size: 12px;
7599
+ }
7600
+
7601
+ .deco-details summary {
7602
+ cursor: pointer;
7603
+ }
7604
+
7605
+ .deco-skeleton {
7606
+ background: var(--deco-surface-soft);
7607
+ border-inline-start: 3px solid var(--deco-metal);
7608
+ width: 100%;
7609
+ height: 8px;
7610
+ }
7611
+
7612
+ .deco-palette {
7613
+ border: 3px double var(--deco-metal);
7614
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7615
+ gap: 8px;
7616
+ padding: 12px;
7617
+ display: grid;
7618
+ }
7619
+
7620
+ .deco-swatch {
7621
+ text-align: center;
7622
+ font: 9px var(--deco-font-mono);
7623
+ gap: 6px;
7624
+ display: grid;
7625
+ }
7626
+
7627
+ .deco-swatch i {
7628
+ border: 1px solid var(--deco-metal);
7629
+ background: var(--deco-swatch-color, var(--deco-primary));
7630
+ height: 28px;
7631
+ }
7632
+
7633
+ .deco-divider {
7634
+ border-block: 1px solid var(--deco-metal);
7635
+ background: none;
7636
+ height: 16px;
7637
+ position: relative;
7638
+ }
7639
+
7640
+ .deco-divider:after {
7641
+ content: "";
7642
+ border: 1px solid var(--deco-metal);
7643
+ background: var(--deco-bg);
7644
+ width: 22px;
7645
+ height: 22px;
7646
+ position: absolute;
7647
+ top: -4px;
7648
+ left: calc(85% - 12px);
7649
+ transform: rotate(45deg);
7650
+ }
7651
+
7652
+ .deco-empty-state {
7653
+ color: var(--deco-text-muted);
7654
+ background: none;
7655
+ border: 0;
7656
+ padding: 8px 0;
7657
+ font-size: 12px;
7658
+ }
7659
+
7660
+ [data-ui="art-deco"] :where(button, a, input, select, textarea, summary):focus-visible {
7661
+ outline: 2px solid var(--deco-focus);
7662
+ outline-offset: 3px;
7663
+ }
7664
+
7665
+ @media (prefers-reduced-motion: reduce) {
7666
+ .deco-spinner, .deco-loading-spinner, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .deco-button[aria-busy="true"]:after, .deco-icon-button[aria-busy="true"]:after, [data-ui="art-deco"] :where(button[aria-busy="true"]):after, :where([data-ui="art-deco"]) .ui-button[aria-busy="true"]:after, :where([data-ui="art-deco"]) .ui-icon-button[aria-busy="true"]:after {
7667
+ animation: none;
7668
+ }
7669
+ }
7670
+
7671
+ @media (pointer: coarse) {
7672
+ .deco-button, .deco-icon-button, .deco-option, .deco-tab, .deco-segment, .deco-input, .deco-select, .deco-stepper button, .deco-pagination button, .deco-alert-close, .deco-chip button, :where([data-ui="art-deco"]) .ui-button, :where([data-ui="art-deco"]) .ui-icon-button, :where([data-ui="art-deco"]) .ui-input, :where([data-ui="art-deco"]) .ui-select {
7673
+ min-height: 44px;
7674
+ min-block-size: 44px;
7675
+ }
7676
+
7677
+ .deco-icon-button, .deco-pagination button, .deco-alert-close, .deco-chip button, :where([data-ui="art-deco"]) .ui-icon-button {
7678
+ min-width: 44px;
7679
+ }
7680
+
7681
+ .deco-check, .deco-radio, .deco-switch, :where([data-ui="art-deco"]) .ui-check, :where([data-ui="art-deco"]) .ui-radio, :where([data-ui="art-deco"]) .ui-switch {
7682
+ min-height: 44px;
7683
+ }
7684
+
7685
+ [data-ui="art-deco"][data-mode] :is(.deco-chip button, .deco-alert-close) {
7686
+ min-width: 44px;
7687
+ min-inline-size: 44px;
7688
+ min-height: 44px;
7689
+ min-block-size: 44px;
7690
+ }
7691
+
7692
+ .deco-stepper {
7693
+ grid-template-columns: 44px minmax(64px, 1fr) 44px;
7694
+ }
7695
+ }
7696
+
7697
+ [data-ui="art-deco"][data-mode] .deco-button.deco-button-warning, :where([data-ui="art-deco"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
7698
+ background: var(--deco-warning);
7699
+ color: var(--deco-on-warning);
7700
+ border-color: var(--deco-warning);
7701
+ text-shadow: none;
7702
+ }
7703
+ }
7704
+
7705
+ [data-ui="art-deco"][data-mode] .deco-title {
7706
+ letter-spacing: max(.08em, .5px);
7707
+ margin-block: max(.75rem, 12px);
7708
+ }
7709
+
7710
+ [data-ui="art-deco"][data-mode] .deco-feature-item > .deco-icon-medallion {
7711
+ justify-content: center;
7712
+ align-items: center;
7713
+ font-family: Segoe UI Symbol, Arial, sans-serif;
7714
+ font-size: 1.5rem;
7715
+ line-height: 1;
7716
+ display: inline-flex;
7717
+ }
7718
+
7719
+ [data-ui="art-deco"][data-mode] .deco-callout-bar > .deco-icon-medallion {
7720
+ justify-content: center;
7721
+ align-items: center;
7722
+ min-block-size: 4.5rem;
7723
+ min-inline-size: 4.5rem;
7724
+ font-size: 2rem;
7725
+ font-weight: 800;
7726
+ line-height: 1;
7727
+ display: inline-flex;
4776
7728
  }