ui-style-kit-css 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/CHANGELOG.md +40 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +91 -42
  4. package/STYLE-MAP.md +9 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47483 -15117
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47344 -15106
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47510 -15134
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +2821 -279
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +812 -224
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2238 -267
  37. package/dist/visual/data-terminal.css +1671 -293
  38. package/dist/visual/editorial-luxe.css +1889 -243
  39. package/dist/visual/industrial-utility.css +2717 -255
  40. package/dist/visual/maximalist.css +1768 -447
  41. package/dist/visual/minimal-saas.css +1076 -382
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1266 -388
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2551 -276
  46. package/dist/visual/retro-glass.css +2235 -319
  47. package/dist/visual/retrofuturism.css +1460 -382
  48. package/dist/visual/tactile.css +2251 -443
  49. package/dist/visual/technical-blueprint.css +2207 -285
  50. package/dist/visual/y2k.css +1481 -294
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +4 -4
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +31 -10
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +40 -25
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +80 -3
  70. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  71. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  72. package/manifest.json +618 -27
  73. package/package.json +18 -10
  74. package/styles/art-deco.css +1397 -12
  75. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  76. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  77. package/styles/assets/bauhaus-barlow.ttf +0 -0
  78. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  79. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  81. package/styles/assets/bento-manrope-OFL.txt +93 -0
  82. package/styles/assets/bento-manrope.ttf +0 -0
  83. package/styles/assets/clay-grain.png +0 -0
  84. package/styles/assets/clay-rounded-OFL.txt +93 -0
  85. package/styles/assets/clay-rounded.ttf +0 -0
  86. package/styles/assets/neo-noir-corner-dark.png +0 -0
  87. package/styles/assets/neo-noir-corner-light.png +0 -0
  88. package/styles/assets/neo-noir-texture-dark.png +0 -0
  89. package/styles/assets/neo-noir-texture-light.png +0 -0
  90. package/styles/assets/organic-display-OFL.txt +93 -0
  91. package/styles/assets/organic-display.ttf +0 -0
  92. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  93. package/styles/assets/organic-sans-OFL.txt +93 -0
  94. package/styles/assets/organic-sans.ttf +0 -0
  95. package/styles/bauhaus.css +878 -107
  96. package/styles/bento.css +1176 -108
  97. package/styles/brutalism.css +262 -11
  98. package/styles/clay.css +1303 -68
  99. package/styles/compat-layout.css +1 -2
  100. package/styles/components.css +105 -34
  101. package/styles/content-overflow.css +11 -5
  102. package/styles/cyberpunk.css +1852 -47
  103. package/styles/data-terminal.css +1116 -12
  104. package/styles/editorial-luxe.css +576 -12
  105. package/styles/industrial-utility.css +1771 -12
  106. package/styles/interactive-surface-bridge.css +30 -20
  107. package/styles/interactive-surface-theme.css +21 -11
  108. package/styles/maximalist.css +1214 -132
  109. package/styles/minimal-saas.css +459 -88
  110. package/styles/native-elements.css +347 -171
  111. package/styles/neo-noir.css +656 -14
  112. package/styles/neumorphism.css +1018 -146
  113. package/styles/organic-modern.css +688 -18
  114. package/styles/paper-editorial.css +1048 -12
  115. package/styles/retro-glass.css +635 -46
  116. package/styles/retrofuturism.css +944 -56
  117. package/styles/tactile.css +1810 -108
  118. package/styles/technical-blueprint.css +668 -17
  119. package/styles/theme-colors.css +2 -2
  120. package/styles/y2k.css +950 -42
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,12 +14,12 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
17
+ :where([data-ui][data-mode="light"]) {
18
18
  --usk-border-text-mix: 45%;
19
19
  --usk-border-min-alpha: 1;
20
20
  }
21
21
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
22
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
23
  --usk-border-text-mix: 0%;
24
24
  --usk-border-min-alpha: 0;
25
25
  }
@@ -1597,7 +1597,8 @@
1597
1597
  ========================================================= */
1598
1598
 
1599
1599
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
1600
+ [data-ui][data-mode] {
1601
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
1602
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
1603
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
1604
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +1635,52 @@
1634
1635
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
1636
  --usk-native-thumb-border: var(--usk-native-primary);
1636
1637
  --usk-native-indicator: var(--usk-native-primary);
1638
+ --usk-native-choice-size: 1.5rem;
1639
+ --usk-native-choice-background: var(--usk-native-control-bg);
1640
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
1641
+ --usk-native-checkbox-radius: .3rem;
1642
+ --usk-native-radio-radius: 50%;
1643
+ --usk-native-choice-shadow: none;
1644
+ --usk-native-choice-checked-background: var(--usk-native-primary);
1645
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
1646
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
1647
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
1648
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
1649
+ --usk-native-select-padding-inline-end: 2.5rem;
1650
+ --usk-native-range-track-size: .45rem;
1651
+ --usk-native-range-track-background: var(--usk-native-track);
1652
+ --usk-native-range-track-border: 0 solid transparent;
1653
+ --usk-native-range-track-radius: 999px;
1654
+ --usk-native-range-track-shadow: none;
1655
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
1656
+ --usk-native-range-thumb-size: 1.2rem;
1657
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
1658
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1659
+ --usk-native-range-thumb-radius: 50%;
1660
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
1661
+ --usk-native-progress-size: .9rem;
1662
+ --usk-native-progress-track-background: var(--usk-native-track);
1663
+ --usk-native-progress-track-border: 0 solid transparent;
1664
+ --usk-native-progress-track-radius: 999px;
1665
+ --usk-native-progress-track-shadow: none;
1666
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
1667
+ --usk-native-progress-value-radius: inherit;
1668
+ --usk-native-progress-value-shadow: none;
1669
+ --usk-native-meter-optimum-background: var(--usk-native-success);
1670
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
1671
+ --usk-native-meter-critical-background: var(--usk-native-danger);
1672
+ --usk-native-file-button-background: var(--usk-native-primary);
1673
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
1674
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
1675
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
1676
+ --usk-native-color-swatch-border: 0 solid transparent;
1677
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
1678
+ --usk-native-indicator-opacity: .78;
1679
+ --usk-native-indicator-filter: none;
1680
+ --usk-native-scrollbar-size: .75rem;
1681
+ --usk-native-scrollbar-track: var(--usk-native-track);
1682
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
1683
+ --usk-native-scrollbar-radius: 999px;
1637
1684
  --usk-native-shadow: none;
1638
1685
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
1686
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +1688,7 @@
1641
1688
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
1689
 
1643
1690
  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
- --ui-color-bg: rgb(var(--usk-bg-rgb));
1691
+ --ui-color-bg: var(--usk-native-bg);
1645
1692
  --ui-color-surface: var(--usk-native-surface-strong);
1646
1693
  --ui-color-text: var(--usk-native-text);
1647
1694
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +1702,7 @@
1655
1702
  --ui-motion-easing: var(--usk-motion-easing);
1656
1703
  }
1657
1704
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1705
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
1706
  color: var(--usk-native-text);
1660
1707
  font-family: var(--usk-native-font-heading);
1661
1708
  line-height: 1.15;
@@ -1663,42 +1710,42 @@
1663
1710
  }
1664
1711
 
1665
1712
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1713
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
1714
  }
1668
1715
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
1716
+ [data-ui][data-mode] :where(hgroup) {
1670
1717
  display: grid;
1671
1718
  gap: .35rem;
1672
1719
  margin-block: 0 1rem;
1673
1720
  }
1674
1721
 
1675
- [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1676
- [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1677
- [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1722
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1723
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1724
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
1725
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
1726
+ [data-ui][data-mode] :where(p) {
1680
1727
  margin: 0 0 1rem;
1681
1728
  color: var(--usk-native-text-muted);
1682
1729
  line-height: 1.7;
1683
1730
  }
1684
1731
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
1732
+ [data-ui][data-mode] :where(a) {
1686
1733
  color: var(--usk-native-link);
1687
1734
  text-decoration-thickness: .08em;
1688
1735
  text-underline-offset: .18em;
1689
1736
  }
1690
1737
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1738
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1692
1739
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
1740
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
1741
  margin: 0 0 1rem;
1695
1742
  padding-left: 1.35rem;
1696
1743
  color: var(--usk-native-text-muted);
1697
1744
  }
1698
1745
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
1746
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
1747
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
1748
+ [data-ui][data-mode] :where(blockquote) {
1702
1749
  margin: 1.25rem 0;
1703
1750
  padding: 1rem 1.25rem;
1704
1751
  color: var(--usk-native-text);
@@ -1707,7 +1754,7 @@
1707
1754
  border-radius: var(--usk-native-radius);
1708
1755
  }
1709
1756
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
1757
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
1758
  padding: .15em .35em;
1712
1759
  color: var(--usk-native-text);
1713
1760
  background: var(--usk-native-surface-soft);
@@ -1717,7 +1764,7 @@
1717
1764
  font-size: .92em;
1718
1765
  }
1719
1766
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
1767
+ [data-ui][data-mode] :where(pre) {
1721
1768
  overflow: auto;
1722
1769
  margin: 1rem 0;
1723
1770
  padding: 1rem;
@@ -1727,57 +1774,88 @@
1727
1774
  border-radius: var(--usk-native-radius);
1728
1775
  }
1729
1776
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
1777
+ [data-ui][data-mode] :where(pre code) {
1731
1778
  display: block;
1732
1779
  padding: 0;
1733
1780
  background: transparent;
1734
1781
  border: 0;
1735
1782
  }
1736
1783
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
1784
+ [data-ui][data-mode] :where(hr) {
1738
1785
  height: 1px;
1739
1786
  margin: 2rem 0;
1740
1787
  background: var(--usk-native-border);
1741
1788
  border: 0;
1742
1789
  }
1743
1790
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
1791
+ [data-ui][data-mode] :where(mark) {
1745
1792
  padding-inline: .15em;
1746
1793
  color: var(--usk-native-text);
1747
1794
  background: rgb(var(--usk-warning-rgb) / .32);
1748
1795
  border-radius: .2em;
1749
1796
  }
1750
1797
 
1751
- [data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1752
- [data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }
1798
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1799
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
1800
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
1801
+ [data-ui][data-mode] :where(abbr[title]) {
1755
1802
  text-decoration: underline dotted var(--usk-native-primary);
1756
1803
  text-underline-offset: .18em;
1757
1804
  cursor: help;
1758
1805
  }
1759
1806
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1807
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
1808
  max-width: 100%;
1762
1809
  }
1763
1810
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1811
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1765
1812
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
1813
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
1814
+ [data-ui][data-mode] audio[controls] {
1815
+ display: block;
1816
+ box-sizing: border-box;
1817
+ inline-size: 100%;
1818
+ min-inline-size: 0;
1819
+ block-size: 60px;
1820
+ padding: 3px;
1821
+ background: var(--usk-native-control-bg);
1822
+ color: var(--usk-native-text);
1823
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
1824
+ border-radius: var(--usk-native-radius);
1825
+ box-shadow: var(--usk-native-shadow);
1826
+ accent-color: var(--usk-native-primary);
1827
+ color-scheme: light;
1828
+ }
1829
+ [data-ui][data-mode="dark"] audio[controls],
1830
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
1831
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
1832
+ border-radius: var(--usk-native-radius);
1833
+ background: transparent;
1834
+ }
1835
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
1836
+ background: var(--usk-native-control-bg);
1837
+ color: var(--usk-native-text);
1838
+ }
1839
+ [data-ui][data-mode] audio[controls]:focus-visible {
1840
+ outline: 2px solid var(--usk-native-focus);
1841
+ outline-offset: 2px;
1842
+ }
1767
1843
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
1844
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1845
+
1846
+ [data-ui][data-mode] :where(figcaption) {
1769
1847
  margin-top: .5rem;
1770
1848
  color: var(--usk-native-text-muted);
1771
1849
  font-size: .9rem;
1772
1850
  }
1773
1851
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
1852
+ [data-ui][data-mode] :where(form) {
1775
1853
  display: grid;
1776
1854
  gap: var(--usk-native-field-gap);
1777
1855
  min-inline-size: 0;
1778
1856
  }
1779
1857
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
1858
+ [data-ui][data-mode] :where(fieldset) {
1781
1859
  display: grid;
1782
1860
  gap: .9rem;
1783
1861
  min-inline-size: 0;
@@ -1788,30 +1866,30 @@
1788
1866
  border-radius: var(--usk-native-radius);
1789
1867
  }
1790
1868
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
1869
+ [data-ui][data-mode] :where(legend) {
1792
1870
  padding-inline: .35rem;
1793
1871
  color: var(--usk-native-text);
1794
1872
  font-weight: 900;
1795
1873
  }
1796
1874
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
1875
+ [data-ui][data-mode] :where(label) {
1798
1876
  color: var(--usk-native-text);
1799
1877
  font-weight: 750;
1800
1878
  }
1801
1879
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1880
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
1881
  display: grid;
1804
1882
  gap: var(--usk-native-field-gap);
1805
1883
  align-content: start;
1806
1884
  }
1807
1885
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1886
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
1887
  display: inline-flex;
1810
1888
  gap: var(--usk-native-field-gap);
1811
1889
  align-items: center;
1812
1890
  }
1813
1891
 
1814
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1892
+ [data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1815
1893
  width: 100%;
1816
1894
  min-block-size: var(--usk-native-control-min-block-size);
1817
1895
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +1900,44 @@
1822
1900
  font: inherit;
1823
1901
  }
1824
1902
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
1903
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
1904
  color-scheme: inherit;
1827
1905
  accent-color: var(--usk-native-primary);
1828
1906
  }
1829
1907
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
1908
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
1909
  color: var(--usk-native-text-muted);
1832
1910
  opacity: .78;
1833
1911
  }
1834
1912
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
1913
+ [data-ui][data-mode] :where(textarea) {
1836
1914
  min-height: 7rem;
1837
1915
  resize: vertical;
1838
1916
  }
1839
1917
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1918
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
1919
+
1920
+ [data-ui][data-mode] :where(select:not([multiple])) {
1921
+ -webkit-appearance: none;
1922
+ appearance: none;
1923
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
1924
+ background-image: var(--usk-native-select-indicator-image);
1925
+ background-repeat: no-repeat;
1926
+ background-position: var(--usk-native-select-indicator-position);
1927
+ background-size: var(--usk-native-select-indicator-size);
1928
+ }
1929
+
1930
+ [data-ui][data-mode] :where(select[multiple]) {
1931
+ padding-inline-end: var(--usk-native-control-padding-inline);
1932
+ background-image: none;
1933
+ }
1934
+
1935
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
1936
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
1937
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
1938
+ }
1841
1939
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1940
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
1941
  -webkit-appearance: none;
1844
1942
  appearance: none;
1845
1943
  box-sizing: border-box;
@@ -1848,7 +1946,7 @@
1848
1946
  font: inherit;
1849
1947
  }
1850
1948
 
1851
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1949
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
1950
  color: var(--usk-native-on-primary);
1853
1951
  background: var(--usk-native-primary);
1854
1952
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +1957,56 @@
1859
1957
  }
1860
1958
 
1861
1959
  /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1960
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
1961
  display: inline-flex;
1864
1962
  align-items: center;
1865
1963
  justify-content: center;
1866
1964
  gap: .55rem;
1867
1965
  }
1868
1966
 
1869
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1967
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
1968
  flex: 0 0 1em;
1871
1969
  }
1872
1970
 
1873
- [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1971
+ [data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1874
1972
  background: var(--usk-native-primary-hover);
1875
1973
  border-color: var(--usk-native-primary-hover);
1876
1974
  }
1877
1975
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
1976
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1977
+ -webkit-appearance: none;
1978
+ appearance: none;
1979
+ inline-size: var(--usk-native-choice-size);
1980
+ block-size: var(--usk-native-choice-size);
1981
+ background: var(--usk-native-choice-background);
1982
+ border: var(--usk-native-choice-border);
1983
+ box-shadow: var(--usk-native-choice-shadow);
1881
1984
  accent-color: var(--usk-native-primary);
1882
1985
  }
1883
1986
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
1987
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
1988
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
1989
+
1990
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
1991
+ background-color: var(--usk-native-choice-checked-background);
1992
+ background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
1993
+ }
1994
+
1995
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
1996
+ border-color: var(--usk-native-primary);
1997
+ filter: brightness(1.04);
1998
+ }
1999
+
2000
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2001
+ filter: brightness(.94);
2002
+ transform: scale(.94);
2003
+ }
2004
+
2005
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2006
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2007
+ }
2008
+
2009
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2010
  -webkit-appearance: none;
1886
2011
  appearance: none;
1887
2012
  width: 100%;
@@ -1890,40 +2015,50 @@
1890
2015
  accent-color: var(--usk-native-primary);
1891
2016
  }
1892
2017
 
1893
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
1894
- block-size: .45rem;
1895
- background: var(--usk-native-track);
1896
- border-radius: 999px;
2018
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2019
+ block-size: var(--usk-native-range-track-size);
2020
+ background: var(--usk-native-range-track-background);
2021
+ border: var(--usk-native-range-track-border);
2022
+ border-radius: var(--usk-native-range-track-radius);
2023
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2024
  }
1898
2025
 
1899
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
1900
- block-size: .45rem;
1901
- background: var(--usk-native-track);
1902
- border-radius: 999px;
2026
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2027
+ block-size: var(--usk-native-range-track-size);
2028
+ background: var(--usk-native-range-track-background);
2029
+ border: var(--usk-native-range-track-border);
2030
+ border-radius: var(--usk-native-range-track-radius);
2031
+ box-shadow: var(--usk-native-range-track-shadow);
2032
+ }
2033
+
2034
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2035
+ block-size: var(--usk-native-range-track-size);
2036
+ background: var(--usk-native-range-progress-background);
2037
+ border-radius: var(--usk-native-range-track-radius);
1903
2038
  }
1904
2039
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2040
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2041
  -webkit-appearance: none;
1907
2042
  appearance: none;
1908
- inline-size: 1.2rem;
1909
- block-size: 1.2rem;
1910
- margin-block-start: -.38rem;
1911
- background: var(--usk-native-thumb);
1912
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1913
- border-radius: 999px;
1914
- box-shadow: var(--usk-native-shadow);
2043
+ inline-size: var(--usk-native-range-thumb-size);
2044
+ block-size: var(--usk-native-range-thumb-size);
2045
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2046
+ background: var(--usk-native-range-thumb-background);
2047
+ border: var(--usk-native-range-thumb-border);
2048
+ border-radius: var(--usk-native-range-thumb-radius);
2049
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2050
  }
1916
2051
 
1917
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
1918
- inline-size: 1.2rem;
1919
- block-size: 1.2rem;
1920
- background: var(--usk-native-thumb);
1921
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1922
- border-radius: 999px;
1923
- box-shadow: var(--usk-native-shadow);
2052
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2053
+ inline-size: var(--usk-native-range-thumb-size);
2054
+ block-size: var(--usk-native-range-thumb-size);
2055
+ background: var(--usk-native-range-thumb-background);
2056
+ border: var(--usk-native-range-thumb-border);
2057
+ border-radius: var(--usk-native-range-thumb-radius);
2058
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2059
  }
1925
2060
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2061
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2062
  inline-size: 3rem;
1928
2063
  block-size: 2.4rem;
1929
2064
  padding: .2rem;
@@ -1932,84 +2067,86 @@
1932
2067
  border-radius: var(--usk-native-radius-sm);
1933
2068
  }
1934
2069
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2070
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2071
  padding: 0;
1937
2072
  }
1938
2073
 
1939
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
1940
- border: 0;
1941
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2074
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2075
+ border: var(--usk-native-color-swatch-border);
2076
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2077
  }
1943
2078
 
1944
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
1945
- border: 0;
1946
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2079
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2080
+ border: var(--usk-native-color-swatch-border);
2081
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2082
  }
1948
2083
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2084
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2085
 
1951
2086
  /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
1952
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1953
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2087
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2088
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2089
  margin-inline-end: .75rem;
1955
2090
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2091
  color: var(--usk-native-on-primary);
1957
- background: var(--usk-native-primary);
1958
- border: var(--usk-native-border-width) solid var(--usk-native-primary);
1959
- border-radius: var(--usk-native-radius-sm);
2092
+ background: var(--usk-native-file-button-background);
2093
+ border: var(--usk-native-file-button-border);
2094
+ border-radius: var(--usk-native-file-button-radius);
2095
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2096
  font-weight: 800;
1961
2097
  cursor: pointer;
1962
2098
  }
1963
2099
 
1964
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
1965
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
2100
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2101
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2102
  background: var(--usk-native-primary-hover);
1967
2103
  border-color: var(--usk-native-primary-hover);
1968
2104
  }
1969
2105
 
1970
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
1971
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
2106
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2107
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2108
  box-shadow: var(--usk-native-focus-ring);
1973
2109
  }
1974
2110
 
1975
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
1976
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
2111
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2112
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2113
  filter: brightness(.96);
1978
2114
  }
1979
2115
 
1980
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
1981
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
2116
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2117
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2118
  color: var(--usk-native-text-muted);
1983
2119
  background: var(--usk-native-surface-soft);
1984
2120
  border-color: var(--usk-native-border);
1985
2121
  cursor: not-allowed;
1986
2122
  }
1987
2123
 
1988
- [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
2124
+ [data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1989
2125
  background: var(--usk-native-surface-soft);
1990
2126
  }
1991
2127
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2128
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2129
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2130
  }
1995
2131
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2132
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2133
  border-color: var(--usk-native-success);
1998
2134
  }
1999
2135
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2136
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2137
  border-color: var(--usk-native-danger);
2002
2138
  }
2003
2139
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2140
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2141
+ background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
2005
2142
  accent-color: var(--usk-native-warning);
2006
2143
  }
2007
2144
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2145
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2146
  filter: brightness(.96);
2010
2147
  }
2011
2148
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2149
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2150
  color: var(--usk-native-text-muted);
2014
2151
  background: var(--usk-native-surface-soft);
2015
2152
  border-color: var(--usk-native-border);
@@ -2018,37 +2155,36 @@
2018
2155
  cursor: not-allowed;
2019
2156
  }
2020
2157
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2158
+ [data-ui][data-mode] :where(table) {
2022
2159
  width: 100%;
2023
2160
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2161
  background: var(--usk-native-surface);
2026
2162
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2163
  border-radius: var(--usk-native-radius);
2028
2164
  border-collapse: collapse;
2029
2165
  }
2030
2166
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2167
+ [data-ui][data-mode] :where(caption) {
2032
2168
  caption-side: bottom;
2033
2169
  padding: .75rem;
2034
2170
  color: var(--usk-native-text-muted);
2035
2171
  font-size: .9rem;
2036
2172
  }
2037
2173
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2174
+ [data-ui][data-mode] :where(th, td) {
2039
2175
  padding: .8rem .9rem;
2040
2176
  text-align: left;
2041
2177
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2178
  }
2043
2179
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2180
+ [data-ui][data-mode] :where(th) {
2045
2181
  color: var(--usk-native-text);
2046
2182
  background: var(--usk-native-surface-soft);
2047
2183
  }
2048
2184
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2185
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2186
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2187
+ [data-ui][data-mode] :where(details) {
2052
2188
  margin: 1rem 0;
2053
2189
  padding: .9rem 1rem;
2054
2190
  color: var(--usk-native-text);
@@ -2057,13 +2193,13 @@
2057
2193
  border-radius: var(--usk-native-radius);
2058
2194
  }
2059
2195
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2196
+ [data-ui][data-mode] :where(summary) {
2061
2197
  color: var(--usk-native-text);
2062
2198
  font-weight: 900;
2063
2199
  cursor: pointer;
2064
2200
  }
2065
2201
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2202
+ [data-ui][data-mode] :where(dialog) {
2067
2203
  max-width: min(92vw, 42rem);
2068
2204
  padding: 0;
2069
2205
  color: var(--usk-native-text);
@@ -2073,47 +2209,68 @@
2073
2209
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2210
  }
2075
2211
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2212
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2213
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2214
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2215
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2216
+ [data-ui][data-mode] :where(progress, meter) {
2217
+ -webkit-appearance: none;
2218
+ appearance: none;
2081
2219
  width: 100%;
2082
- min-height: .9rem;
2220
+ min-height: var(--usk-native-progress-size);
2083
2221
  accent-color: var(--usk-native-primary);
2084
2222
  }
2085
2223
 
2086
- [data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
2087
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
2088
- background: var(--usk-native-track);
2089
- border-radius: 999px;
2224
+ [data-ui][data-mode] :where(progress:not([value])) {
2225
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2226
+ background-size: 200% 100%;
2227
+ border: var(--usk-native-progress-track-border);
2228
+ border-radius: var(--usk-native-progress-track-radius);
2229
+ box-shadow: var(--usk-native-progress-track-shadow);
2230
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2231
  }
2091
2232
 
2092
- [data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
2093
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
2094
- background: var(--usk-native-track-fill);
2095
- border-radius: inherit;
2233
+ @keyframes usk-native-progress-indeterminate {
2234
+ to { background-position: -2rem 0; }
2096
2235
  }
2097
2236
 
2098
- [data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
2099
- [data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
2100
- background: var(--usk-native-track-fill);
2101
- border-radius: 999px;
2237
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2238
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2239
+ background: var(--usk-native-progress-track-background);
2240
+ border: var(--usk-native-progress-track-border);
2241
+ border-radius: var(--usk-native-progress-track-radius);
2242
+ box-shadow: var(--usk-native-progress-track-shadow);
2243
+ }
2244
+
2245
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2246
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2247
+ background: var(--usk-native-progress-value-background);
2248
+ border-radius: var(--usk-native-progress-value-radius);
2249
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2250
  }
2103
2251
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2252
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2253
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2254
+ background: var(--usk-native-progress-value-background);
2255
+ border-radius: var(--usk-native-progress-value-radius);
2256
+ box-shadow: var(--usk-native-progress-value-shadow);
2106
2257
  }
2107
2258
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2259
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2260
+
2261
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2262
+ background: var(--usk-native-meter-suboptimum-background);
2110
2263
  }
2111
2264
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2265
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2266
+ background: var(--usk-native-meter-critical-background);
2267
+ }
2268
+
2269
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2270
  color: var(--usk-native-text);
2114
2271
  }
2115
2272
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2273
+ [data-ui][data-mode] :where(article, aside) {
2117
2274
  padding: var(--usk-native-panel-padding);
2118
2275
  color: var(--usk-native-text);
2119
2276
  background: var(--usk-native-card-bg);
@@ -2122,113 +2279,132 @@
2122
2279
  box-shadow: var(--usk-native-shadow);
2123
2280
  }
2124
2281
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2282
+ [data-ui][data-mode] :where(dl) {
2126
2283
  margin: 0 0 1rem;
2127
2284
  color: var(--usk-native-text-muted);
2128
2285
  }
2129
2286
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2287
+ [data-ui][data-mode] :where(dt) {
2131
2288
  color: var(--usk-native-text);
2132
2289
  font-weight: 900;
2133
2290
  }
2134
2291
 
2135
- [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2136
- [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2137
- [data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2138
- [data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2139
- [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2140
- [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2141
- [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2142
- [data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2143
- [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2144
- [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2145
- [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2146
- [data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2147
- [data-ui][data-theme][data-mode] :where(datalist) { display: none; }
2148
-
2149
- [data-ui][data-theme][data-mode] :where(summary, li)::marker {
2292
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2293
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2294
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2295
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2296
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2297
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2298
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2299
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2300
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2301
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2302
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2303
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2304
+ [data-ui][data-mode] :where(datalist) { display: none; }
2305
+
2306
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2307
  color: var(--usk-native-indicator);
2151
2308
  }
2152
2309
 
2153
- [data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2154
- opacity: .78;
2310
+ [data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2311
+ opacity: var(--usk-native-indicator-opacity);
2312
+ filter: var(--usk-native-indicator-filter);
2155
2313
  accent-color: var(--usk-native-indicator);
2156
2314
  }
2157
2315
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2316
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2317
  accent-color: var(--usk-native-indicator);
2160
2318
  }
2161
2319
 
2162
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2163
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2320
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2321
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2322
  opacity: .72;
2165
2323
  }
2166
2324
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2325
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2326
  color: var(--usk-native-indicator);
2327
+ opacity: var(--usk-native-indicator-opacity);
2328
+ filter: var(--usk-native-indicator-filter);
2169
2329
  }
2170
2330
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2331
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2332
  outline: 3px solid var(--usk-native-focus);
2173
2333
  outline-offset: 3px;
2174
2334
  box-shadow: var(--usk-native-focus-ring);
2175
2335
  }
2176
2336
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2337
+ [data-ui][data-mode] :where(:target) {
2178
2338
  scroll-margin-top: 6rem;
2179
2339
  outline: 3px solid var(--usk-native-focus);
2180
2340
  outline-offset: .35rem;
2181
2341
  }
2182
2342
 
2183
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2343
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2344
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2345
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2346
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2347
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2348
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2349
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2350
 
2191
2351
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2352
+ [data-ui][data-mode] {
2193
2353
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2354
  }
2195
2355
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2356
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2357
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2358
  }
2199
2359
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2360
+ [data-ui][data-mode] :where(mark) {
2201
2361
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2362
  }
2203
2363
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2364
+ [data-ui][data-mode] :where(fieldset) {
2205
2365
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2366
  }
2207
2367
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2368
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2369
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2370
  }
2211
2371
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2372
+ [data-ui][data-mode] :where(th) {
2213
2373
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2374
  }
2215
2375
  }
2216
2376
 
2217
2377
  @media (prefers-reduced-motion: reduce) {
2218
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
2219
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2378
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2379
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2380
  transition-duration: 1ms !important;
2221
2381
  }
2382
+
2383
+ [data-ui][data-mode] :where(progress:not([value])) {
2384
+ animation: none;
2385
+ }
2386
+ }
2387
+
2388
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2389
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2390
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2391
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2392
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2393
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2394
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2395
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2396
+ box-shadow: none;
2397
+ filter: none;
2222
2398
  }
2223
2399
 
2224
2400
  @media (forced-colors: active) {
2225
2401
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2402
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2403
  forced-color-adjust: auto;
2228
2404
  }
2229
2405
  }
2230
2406
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2407
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2408
  border-color: Mark;
2233
2409
  }
2234
2410
  }
@@ -2244,7 +2420,7 @@
2244
2420
  ========================================================= */
2245
2421
 
2246
2422
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2423
+ [data-ui][data-mode] :where(
2248
2424
  h1,
2249
2425
  h2,
2250
2426
  h3,
@@ -2261,6 +2437,9 @@
2261
2437
  label,
2262
2438
  legend,
2263
2439
  summary,
2440
+ strong,
2441
+ small,
2442
+ em,
2264
2443
  code,
2265
2444
  kbd,
2266
2445
  samp,
@@ -2270,10 +2449,11 @@
2270
2449
  ) {
2271
2450
  max-inline-size: 100%;
2272
2451
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2452
+ overflow-wrap: break-word;
2453
+ word-break: normal;
2274
2454
  }
2275
2455
 
2276
- [data-ui][data-theme][data-mode] :where(
2456
+ [data-ui][data-mode] :where(
2277
2457
  [class~="saas-surface"],
2278
2458
  [class~="saas-surface-sm"],
2279
2459
  [class~="saas-surface-lg"],
@@ -2395,13 +2575,12 @@
2395
2575
  [class~="rg-alert"],
2396
2576
  [class~="rg-table-wrap"],
2397
2577
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2578
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2399
2579
  max-inline-size: 100%;
2400
2580
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2581
  }
2403
2582
 
2404
- [data-ui][data-theme][data-mode] :where(
2583
+ [data-ui][data-mode] :where(
2405
2584
  [class~="saas-button"],
2406
2585
  [class~="saas-icon-button"],
2407
2586
  [class~="saas-badge"],
@@ -2446,13 +2625,15 @@
2446
2625
  [class~="rg-icon-button"],
2447
2626
  [class~="rg-badge"],
2448
2627
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2628
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2450
2629
  max-inline-size: 100%;
2451
2630
  min-inline-size: 0;
2631
+ overflow-wrap: break-word;
2632
+ word-break: normal;
2452
2633
  white-space: normal;
2453
2634
  }
2454
2635
 
2455
- [data-ui][data-theme][data-mode] :where(
2636
+ [data-ui][data-mode] :where(
2456
2637
  .saas-button,
2457
2638
  .saas-icon-button,
2458
2639
  .saas-button-pill,
@@ -2486,7 +2667,7 @@
2486
2667
  .rg-button,
2487
2668
  .rg-icon-button,
2488
2669
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2670
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2490
2671
  box-sizing: border-box;
2491
2672
  display: inline-flex;
2492
2673
  align-items: center;
@@ -2498,7 +2679,7 @@
2498
2679
  vertical-align: middle;
2499
2680
  }
2500
2681
 
2501
- [data-ui][data-theme][data-mode] :where(
2682
+ [data-ui][data-mode] :where(
2502
2683
  .saas-button-pill,
2503
2684
  .bento-button-pill,
2504
2685
  .max-button-pill,
@@ -2521,7 +2702,8 @@
2521
2702
  font-weight: 850;
2522
2703
  text-align: center;
2523
2704
  text-decoration: none;
2524
- overflow-wrap: anywhere;
2705
+ overflow-wrap: break-word;
2706
+ word-break: normal;
2525
2707
  white-space: normal;
2526
2708
  cursor: pointer;
2527
2709
  transition:
@@ -2555,7 +2737,7 @@
2555
2737
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
2738
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
2739
 
2558
- [data-ui][data-theme][data-mode] :where(
2740
+ [data-ui][data-mode] :where(
2559
2741
  .saas-button-pill:active,
2560
2742
  .saas-button-pill[aria-pressed="true"],
2561
2743
  .bento-button-pill:active,
@@ -2594,7 +2776,7 @@
2594
2776
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
2777
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
2778
 
2597
- [data-ui][data-theme][data-mode] :where(
2779
+ [data-ui][data-mode] :where(
2598
2780
  .saas-button-pill:disabled,
2599
2781
  .saas-button-pill[aria-disabled="true"],
2600
2782
  .bento-button-pill:disabled,
@@ -2624,7 +2806,7 @@
2624
2806
  transform: none;
2625
2807
  }
2626
2808
 
2627
- [data-ui][data-theme][data-mode] :where(
2809
+ [data-ui][data-mode] :where(
2628
2810
  .saas-tooltip,
2629
2811
  .saas-tooltip-top,
2630
2812
  .saas-tooltip-right,
@@ -2683,16 +2865,17 @@
2683
2865
  ) {
2684
2866
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
2867
  text-align: start;
2686
- overflow-wrap: anywhere;
2868
+ overflow-wrap: break-word;
2869
+ word-break: normal;
2687
2870
  }
2688
2871
 
2689
2872
  /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
2690
- [data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
2691
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
2873
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
2874
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
2875
  position: relative;
2693
2876
  }
2694
2877
 
2695
- [data-ui][data-theme][data-mode] :where(
2878
+ [data-ui][data-mode] :where(
2696
2879
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
2880
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
2881
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +2925,10 @@
2742
2925
  z-index: 20;
2743
2926
  }
2744
2927
 
2745
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2746
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2747
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2748
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2928
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2929
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2930
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2931
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2749
2932
 
2750
2933
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
2934
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2895,10 +3078,72 @@
2895
3078
  }
2896
3079
  }
2897
3080
 
3081
+ /**
3082
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3083
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3084
+ * The root attributes intentionally raise specificity within the preset layer
3085
+ * so later style-specific defaults cannot collapse the number and caption.
3086
+ */
3087
+ @layer ui-style-kit.presets {
3088
+ [data-ui][data-mode] :where(
3089
+ .saas-badge-seal,
3090
+ .bento-badge-seal,
3091
+ .max-badge-seal,
3092
+ .bau-badge-seal,
3093
+ .tactile-badge-seal,
3094
+ .neo-badge-seal,
3095
+ .retro-badge-seal,
3096
+ .brutal-badge-seal,
3097
+ .cyber-badge-seal,
3098
+ .y2k-badge-seal,
3099
+ .rg-badge-seal,
3100
+ .luxe-badge-seal,
3101
+ .organic-badge-seal,
3102
+ .utility-badge-seal,
3103
+ .blueprint-badge-seal,
3104
+ .deco-badge-seal,
3105
+ .clay-badge-seal,
3106
+ .terminal-badge-seal,
3107
+ .paper-badge-seal,
3108
+ .noir-badge-seal
3109
+ ) > strong {
3110
+ color: inherit;
3111
+ font-size: 1.5rem;
3112
+ line-height: .9;
3113
+ }
3114
+
3115
+ [data-ui][data-mode] :where(
3116
+ .saas-badge-seal,
3117
+ .bento-badge-seal,
3118
+ .max-badge-seal,
3119
+ .bau-badge-seal,
3120
+ .tactile-badge-seal,
3121
+ .neo-badge-seal,
3122
+ .retro-badge-seal,
3123
+ .brutal-badge-seal,
3124
+ .cyber-badge-seal,
3125
+ .y2k-badge-seal,
3126
+ .rg-badge-seal,
3127
+ .luxe-badge-seal,
3128
+ .organic-badge-seal,
3129
+ .utility-badge-seal,
3130
+ .blueprint-badge-seal,
3131
+ .deco-badge-seal,
3132
+ .clay-badge-seal,
3133
+ .terminal-badge-seal,
3134
+ .paper-badge-seal,
3135
+ .noir-badge-seal
3136
+ ) > small {
3137
+ color: inherit;
3138
+ font-size: .8125rem;
3139
+ line-height: 1;
3140
+ }
3141
+ }
3142
+
2898
3143
  /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
3144
  /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
3145
  @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
3146
+ [data-ui][data-mode] :where(
2902
3147
  .luxe-surface,
2903
3148
  .luxe-surface-sm,
2904
3149
  .luxe-surface-lg,
@@ -3061,13 +3306,12 @@
3061
3306
  .noir-feature-item,
3062
3307
  .noir-callout-bar,
3063
3308
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3309
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
3310
  max-inline-size: 100%;
3066
3311
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3312
  }
3069
3313
 
3070
- [data-ui][data-theme][data-mode] :where(
3314
+ [data-ui][data-mode] :where(
3071
3315
  .luxe-button,
3072
3316
  .luxe-icon-button,
3073
3317
  .luxe-button-cut,
@@ -3140,13 +3384,15 @@
3140
3384
  .noir-badge-seal,
3141
3385
  .noir-nav-link,
3142
3386
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3387
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
3388
  max-inline-size: 100%;
3145
3389
  min-inline-size: 0;
3390
+ overflow-wrap: break-word;
3391
+ word-break: normal;
3146
3392
  white-space: normal;
3147
3393
  }
3148
3394
 
3149
- [data-ui][data-theme][data-mode] :where(
3395
+ [data-ui][data-mode] :where(
3150
3396
  .luxe-button,
3151
3397
  .luxe-icon-button,
3152
3398
  .luxe-button-pill,
@@ -3174,7 +3420,7 @@
3174
3420
  .noir-button,
3175
3421
  .noir-icon-button,
3176
3422
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="minimal-saas"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3423
+ ), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
3424
  box-sizing: border-box;
3179
3425
  display: inline-flex;
3180
3426
  align-items: center;
@@ -3186,7 +3432,7 @@
3186
3432
  vertical-align: middle;
3187
3433
  }
3188
3434
 
3189
- [data-ui][data-theme][data-mode] :where(
3435
+ [data-ui][data-mode] :where(
3190
3436
  .luxe-button-pill,
3191
3437
  .organic-button-pill,
3192
3438
  .utility-button-pill,
@@ -3207,7 +3453,8 @@
3207
3453
  font-weight: 850;
3208
3454
  text-align: center;
3209
3455
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3456
+ overflow-wrap: break-word;
3457
+ word-break: normal;
3211
3458
  white-space: normal;
3212
3459
  cursor: pointer;
3213
3460
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3541,7 @@
3294
3541
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3542
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3543
 
3297
- [data-ui][data-theme][data-mode] :where(
3544
+ [data-ui][data-mode] :where(
3298
3545
  .luxe-button-pill:active,
3299
3546
  .luxe-button-pill[aria-pressed="true"],
3300
3547
  .organic-button-pill:active,
@@ -3315,7 +3562,7 @@
3315
3562
  .noir-button-pill[aria-pressed="true"]
3316
3563
  ) { transform: translateY(1px); }
3317
3564
 
3318
- [data-ui][data-theme][data-mode] :where(
3565
+ [data-ui][data-mode] :where(
3319
3566
  .luxe-button-pill:disabled,
3320
3567
  .luxe-button-pill[aria-disabled="true"],
3321
3568
  .organic-button-pill:disabled,
@@ -3336,7 +3583,7 @@
3336
3583
  .noir-button-pill[aria-disabled="true"]
3337
3584
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3585
 
3339
- [data-ui][data-theme][data-mode] :where(
3586
+ [data-ui][data-mode] :where(
3340
3587
  .luxe-tooltip,
3341
3588
  .luxe-tooltip-top,
3342
3589
  .luxe-tooltip-right,
@@ -3382,9 +3629,9 @@
3382
3629
  .noir-tooltip-right,
3383
3630
  .noir-tooltip-bottom,
3384
3631
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
3632
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
3633
 
3387
- [data-ui][data-theme][data-mode] :where(
3634
+ [data-ui][data-mode] :where(
3388
3635
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
3636
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
3637
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +3670,10 @@
3423
3670
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
3671
  ) { position: absolute; z-index: 20; }
3425
3672
 
3426
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3427
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3428
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3429
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3673
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3674
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3675
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3676
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3430
3677
 
3431
3678
  :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
3432
3679
  :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
@@ -3512,11 +3759,11 @@
3512
3759
  --saas-font-heading: var(--saas-font-display);
3513
3760
  --saas-font-control: var(--saas-font-display);
3514
3761
  --saas-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
3515
- --saas-radius-xs: .25rem;
3516
- --saas-radius-sm: .5rem;
3517
- --saas-radius-md: .75rem;
3518
- --saas-radius-lg: 1.125rem;
3519
- --saas-radius-xl: calc(1.125rem + .5rem);
3762
+ --saas-radius-xs: .1875rem;
3763
+ --saas-radius-sm: .25rem;
3764
+ --saas-radius-md: .375rem;
3765
+ --saas-radius-lg: .5rem;
3766
+ --saas-radius-xl: .75rem;
3520
3767
  --saas-radius-pill: 999px;
3521
3768
  --saas-space-1: .25rem;
3522
3769
  --saas-space-2: .5rem;
@@ -3533,33 +3780,105 @@
3533
3780
  --lightningcss-light: initial;
3534
3781
  --lightningcss-dark: ;
3535
3782
  color-scheme: light;
3783
+ --saas-fallback-bg-rgb: 248 249 252;
3784
+ --saas-fallback-surface-rgb: 255 255 255;
3785
+ --saas-fallback-surface-strong-rgb: 255 255 255;
3786
+ --saas-fallback-surface-soft-rgb: 243 245 250;
3787
+ --saas-fallback-text-rgb: 19 26 53;
3788
+ --saas-fallback-text-muted-rgb: 97 105 131;
3789
+ --saas-fallback-border-rgb: 220 225 236;
3790
+ --saas-fallback-primary-rgb: 85 78 232;
3791
+ --saas-fallback-primary-hover-rgb: 103 88 244;
3792
+ --saas-fallback-primary-text-rgb: 255 255 255;
3793
+ --saas-fallback-secondary-rgb: 49 110 219;
3794
+ --saas-fallback-secondary-hover-rgb: 43 95 190;
3795
+ --saas-fallback-secondary-text-rgb: 255 255 255;
3796
+ --saas-fallback-accent-rgb: 103 88 244;
3797
+ --saas-fallback-accent-text-rgb: 255 255 255;
3798
+ --saas-fallback-success-rgb: 36 155 112;
3799
+ --saas-fallback-success-text-rgb: 19 26 53;
3800
+ --saas-fallback-warning-rgb: 215 146 31;
3801
+ --saas-fallback-warning-text-rgb: 19 26 53;
3802
+ --saas-fallback-danger-rgb: 214 30 70;
3803
+ --saas-fallback-danger-text-rgb: 255 255 255;
3804
+ --saas-fallback-link-rgb: 85 78 232;
3805
+ --saas-fallback-focus-rgb: 85 78 232;
3536
3806
  --saas-panel-alpha: .98;
3537
- --saas-panel-soft-alpha: .78;
3538
- --saas-border-alpha: .58;
3539
- --saas-shadow-alpha: .12;
3540
- --saas-focus-alpha: .34;
3807
+ --saas-panel-soft-alpha: .74;
3808
+ --saas-border-alpha: .44;
3809
+ --saas-shadow-alpha: .08;
3810
+ --saas-focus-alpha: .3;
3811
+ --saas-reference-shadow: 0 .5rem 1.5rem #282f530b;
3541
3812
  }
3542
3813
 
3543
3814
  [data-ui="minimal-saas"][data-mode="dark"] {
3544
3815
  --lightningcss-light: ;
3545
3816
  --lightningcss-dark: initial;
3546
3817
  color-scheme: dark;
3818
+ --saas-fallback-bg-rgb: 7 17 31;
3819
+ --saas-fallback-surface-rgb: 13 25 42;
3820
+ --saas-fallback-surface-strong-rgb: 27 36 80;
3821
+ --saas-fallback-surface-soft-rgb: 17 31 51;
3822
+ --saas-fallback-text-rgb: 241 243 251;
3823
+ --saas-fallback-text-muted-rgb: 180 187 205;
3824
+ --saas-fallback-border-rgb: 43 58 80;
3825
+ --saas-fallback-primary-rgb: 112 104 255;
3826
+ --saas-fallback-primary-hover-rgb: 135 128 255;
3827
+ --saas-fallback-primary-text-rgb: 7 17 31;
3828
+ --saas-fallback-secondary-rgb: 85 145 255;
3829
+ --saas-fallback-secondary-hover-rgb: 112 166 255;
3830
+ --saas-fallback-secondary-text-rgb: 7 17 31;
3831
+ --saas-fallback-accent-rgb: 87 73 239;
3832
+ --saas-fallback-accent-text-rgb: 255 255 255;
3833
+ --saas-fallback-success-rgb: 67 190 139;
3834
+ --saas-fallback-success-text-rgb: 7 17 31;
3835
+ --saas-fallback-warning-rgb: 239 173 49;
3836
+ --saas-fallback-warning-text-rgb: 7 17 31;
3837
+ --saas-fallback-danger-rgb: 255 61 104;
3838
+ --saas-fallback-danger-text-rgb: 7 17 31;
3839
+ --saas-fallback-link-rgb: 135 128 255;
3840
+ --saas-fallback-focus-rgb: 112 104 255;
3547
3841
  --saas-panel-alpha: .92;
3548
3842
  --saas-panel-soft-alpha: .64;
3549
3843
  --saas-border-alpha: .52;
3550
3844
  --saas-shadow-alpha: .34;
3551
3845
  --saas-focus-alpha: .42;
3846
+ --saas-reference-shadow: 0 .75rem 2.125rem #00000029;
3552
3847
  }
3553
3848
 
3554
3849
  [data-ui="minimal-saas"][data-mode="contrast"] {
3555
3850
  --lightningcss-light: ;
3556
3851
  --lightningcss-dark: initial;
3557
3852
  color-scheme: dark;
3853
+ --saas-fallback-bg-rgb: 0 0 0;
3854
+ --saas-fallback-surface-rgb: 3 8 22;
3855
+ --saas-fallback-surface-strong-rgb: 8 18 42;
3856
+ --saas-fallback-surface-soft-rgb: 0 0 0;
3857
+ --saas-fallback-text-rgb: 255 255 255;
3858
+ --saas-fallback-text-muted-rgb: 238 244 255;
3859
+ --saas-fallback-border-rgb: 255 255 255;
3860
+ --saas-fallback-primary-rgb: 111 140 255;
3861
+ --saas-fallback-primary-hover-rgb: 255 255 255;
3862
+ --saas-fallback-primary-text-rgb: 0 0 0;
3863
+ --saas-fallback-secondary-rgb: 0 217 255;
3864
+ --saas-fallback-secondary-hover-rgb: 255 255 255;
3865
+ --saas-fallback-secondary-text-rgb: 0 0 0;
3866
+ --saas-fallback-accent-rgb: 184 196 255;
3867
+ --saas-fallback-accent-text-rgb: 0 0 0;
3868
+ --saas-fallback-success-rgb: 0 255 144;
3869
+ --saas-fallback-success-text-rgb: 0 0 0;
3870
+ --saas-fallback-warning-rgb: 255 225 0;
3871
+ --saas-fallback-warning-text-rgb: 0 0 0;
3872
+ --saas-fallback-danger-rgb: 255 63 95;
3873
+ --saas-fallback-danger-text-rgb: 0 0 0;
3874
+ --saas-fallback-link-rgb: 159 178 255;
3875
+ --saas-fallback-focus-rgb: 255 255 255;
3558
3876
  --saas-panel-alpha: 1;
3559
3877
  --saas-panel-soft-alpha: .92;
3560
3878
  --saas-border-alpha: 1;
3561
3879
  --saas-shadow-alpha: .5;
3562
3880
  --saas-focus-alpha: .72;
3881
+ --saas-reference-shadow: none;
3563
3882
  }
3564
3883
 
3565
3884
  [data-ui="minimal-saas"][data-theme][data-mode] {
@@ -3577,15 +3896,42 @@
3577
3896
  --saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
3897
  --saas-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
3898
  --saas-accent-rgb: var(--usk-accent-rgb);
3580
- --saas-success-rgb: var(--usk-success-rgb);
3581
- --saas-warning-rgb: var(--usk-warning-rgb);
3582
- --saas-danger-rgb: var(--usk-danger-rgb);
3583
- --saas-link-rgb: var(--usk-link-rgb);
3584
3899
  --saas-accent-text-rgb: var(--usk-accent-text-rgb);
3900
+ --saas-success-rgb: var(--usk-success-rgb);
3585
3901
  --saas-success-text-rgb: var(--usk-success-text-rgb);
3902
+ --saas-warning-rgb: var(--usk-warning-rgb);
3586
3903
  --saas-warning-text-rgb: var(--usk-warning-text-rgb);
3904
+ --saas-danger-rgb: var(--usk-danger-rgb);
3587
3905
  --saas-danger-text-rgb: var(--usk-danger-text-rgb);
3906
+ --saas-link-rgb: var(--usk-link-rgb);
3588
3907
  --saas-focus-rgb: var(--usk-focus-rgb);
3908
+ }
3909
+
3910
+ [data-ui="minimal-saas"][data-mode] {
3911
+ --usk-native-bg: var(--saas-bg);
3912
+ --saas-bg-rgb: var(--usk-bg-rgb, var(--saas-fallback-bg-rgb));
3913
+ --saas-surface-rgb: var(--usk-surface-rgb, var(--saas-fallback-surface-rgb));
3914
+ --saas-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--saas-fallback-surface-strong-rgb));
3915
+ --saas-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--saas-fallback-surface-soft-rgb));
3916
+ --saas-text-rgb: var(--usk-text-rgb, var(--saas-fallback-text-rgb));
3917
+ --saas-text-muted-rgb: var(--usk-text-muted-rgb, var(--saas-fallback-text-muted-rgb));
3918
+ --saas-border-rgb: var(--usk-border-rgb, var(--saas-fallback-border-rgb));
3919
+ --saas-primary-rgb: var(--usk-primary-rgb, var(--saas-fallback-primary-rgb));
3920
+ --saas-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--saas-fallback-primary-hover-rgb));
3921
+ --saas-primary-text-rgb: var(--usk-primary-text-rgb, var(--saas-fallback-primary-text-rgb));
3922
+ --saas-secondary-rgb: var(--usk-secondary-rgb, var(--saas-fallback-secondary-rgb));
3923
+ --saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--saas-fallback-secondary-hover-rgb));
3924
+ --saas-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--saas-fallback-secondary-text-rgb));
3925
+ --saas-accent-rgb: var(--usk-accent-rgb, var(--saas-fallback-accent-rgb));
3926
+ --saas-accent-text-rgb: var(--usk-accent-text-rgb, var(--saas-fallback-accent-text-rgb));
3927
+ --saas-success-rgb: var(--usk-success-rgb, var(--saas-fallback-success-rgb));
3928
+ --saas-success-text-rgb: var(--usk-success-text-rgb, var(--saas-fallback-success-text-rgb));
3929
+ --saas-warning-rgb: var(--usk-warning-rgb, var(--saas-fallback-warning-rgb));
3930
+ --saas-warning-text-rgb: var(--usk-warning-text-rgb, var(--saas-fallback-warning-text-rgb));
3931
+ --saas-danger-rgb: var(--usk-danger-rgb, var(--saas-fallback-danger-rgb));
3932
+ --saas-danger-text-rgb: var(--usk-danger-text-rgb, var(--saas-fallback-danger-text-rgb));
3933
+ --saas-link-rgb: var(--usk-link-rgb, var(--saas-fallback-link-rgb));
3934
+ --saas-focus-rgb: var(--usk-focus-rgb, var(--saas-fallback-focus-rgb));
3589
3935
  --usk-native-surface: var(--saas-surface);
3590
3936
  --usk-native-surface-strong: var(--saas-surface-strong);
3591
3937
  --usk-native-surface-soft: var(--saas-surface-soft);
@@ -3614,7 +3960,58 @@
3614
3960
  --usk-native-focus-ring: var(--saas-focus-ring, 0 0 0 3px rgb(var(--saas-focus-rgb) / .28));
3615
3961
  --usk-native-border-width: 1px;
3616
3962
  --usk-native-field-gap: .5rem;
3617
- --usk-native-panel-padding: var(--saas-space-5);
3963
+ --usk-native-panel-padding: var(--saas-space-4);
3964
+ --usk-native-control-min-block-size: 2.375rem;
3965
+ --usk-native-control-padding-block: .5rem;
3966
+ --usk-native-control-padding-inline: .75rem;
3967
+ --usk-native-subcontrol-padding-block: .38rem;
3968
+ --usk-native-subcontrol-padding-inline: .6rem;
3969
+ --usk-native-choice-size: 1rem;
3970
+ --usk-native-choice-background: var(--saas-control-bg);
3971
+ --usk-native-choice-border: 1px solid var(--saas-border);
3972
+ --usk-native-checkbox-radius: .25rem;
3973
+ --usk-native-radio-radius: 50%;
3974
+ --usk-native-choice-shadow: none;
3975
+ --usk-native-choice-checked-background: var(--saas-primary);
3976
+ --usk-native-choice-mark-color: var(--saas-on-primary);
3977
+ --usk-native-select-indicator-image: linear-gradient(27deg, transparent 50%, var(--saas-primary) 50%), linear-gradient(153deg, var(--saas-primary) 50%, transparent 50%);
3978
+ --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
3979
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
3980
+ --usk-native-select-padding-inline-end: 2.25rem;
3981
+ --usk-native-range-track-size: .32rem;
3982
+ --usk-native-range-track-background: var(--saas-surface-soft);
3983
+ --usk-native-range-track-border: 0 solid transparent;
3984
+ --usk-native-range-track-radius: 999px;
3985
+ --usk-native-range-track-shadow: none;
3986
+ --usk-native-range-progress-background: var(--saas-primary);
3987
+ --usk-native-range-thumb-size: .95rem;
3988
+ --usk-native-range-thumb-background: var(--saas-primary);
3989
+ --usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
3990
+ --usk-native-range-thumb-radius: 50%;
3991
+ --usk-native-range-thumb-shadow: 0 .2rem .5rem rgb(var(--saas-text-rgb) / .12);
3992
+ --usk-native-progress-size: .35rem;
3993
+ --usk-native-progress-track-background: var(--saas-surface-soft);
3994
+ --usk-native-progress-track-border: 0 solid transparent;
3995
+ --usk-native-progress-track-radius: 999px;
3996
+ --usk-native-progress-track-shadow: none;
3997
+ --usk-native-progress-value-background: var(--saas-primary);
3998
+ --usk-native-progress-value-radius: inherit;
3999
+ --usk-native-progress-value-shadow: none;
4000
+ --usk-native-meter-optimum-background: var(--saas-success);
4001
+ --usk-native-meter-suboptimum-background: var(--saas-warning);
4002
+ --usk-native-meter-critical-background: var(--saas-danger);
4003
+ --usk-native-file-button-background: var(--saas-primary);
4004
+ --usk-native-file-button-border: 1px solid var(--saas-border);
4005
+ --usk-native-file-button-radius: .2rem;
4006
+ --usk-native-file-button-shadow: none;
4007
+ --usk-native-color-swatch-border: 1px solid var(--saas-border);
4008
+ --usk-native-color-swatch-radius: .2rem;
4009
+ --usk-native-indicator-opacity: .72;
4010
+ --usk-native-indicator-filter: none;
4011
+ --usk-native-scrollbar-size: .65rem;
4012
+ --usk-native-scrollbar-track: var(--saas-surface-soft);
4013
+ --usk-native-scrollbar-thumb: var(--saas-primary);
4014
+ --usk-native-scrollbar-radius: 2px;
3618
4015
  --saas-bg: rgb(var(--saas-bg-rgb));
3619
4016
  --saas-surface: rgb(var(--saas-surface-rgb) / var(--saas-panel-alpha));
3620
4017
  --saas-surface-strong: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
@@ -3628,6 +4025,7 @@
3628
4025
  --saas-control-fg: var(--saas-text);
3629
4026
  --saas-primary: rgb(var(--saas-primary-rgb));
3630
4027
  --saas-primary-hover: rgb(var(--saas-primary-hover-rgb));
4028
+ --saas-brand-2: rgb(var(--saas-primary-hover-rgb));
3631
4029
  --saas-primary-text: rgb(var(--saas-primary-text-rgb));
3632
4030
  --saas-secondary: rgb(var(--saas-secondary-rgb));
3633
4031
  --saas-secondary-hover: rgb(var(--saas-secondary-hover-rgb));
@@ -3645,23 +4043,26 @@
3645
4043
  --saas-link: rgb(var(--saas-link-rgb));
3646
4044
  --saas-focus: rgb(var(--saas-focus-rgb));
3647
4045
  --saas-focus-ring: 0 0 0 3px rgb(var(--saas-focus-rgb) / var(--saas-focus-alpha));
4046
+ --saas-shadow-sm: 0 1px 2px rgb(var(--saas-text-rgb) / calc(var(--saas-shadow-alpha) * .65));
4047
+ --saas-shadow-md: var(--saas-reference-shadow);
3648
4048
  --saas-theme-bg-size: auto;
3649
- --saas-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--saas-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--saas-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--saas-secondary-rgb) / .1), transparent 34rem), var(--saas-bg);
3650
- --saas-card-bg: linear-gradient(135deg, rgb(var(--saas-primary-rgb) / .1), rgb(var(--saas-accent-rgb) / .055) 42%, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)) 100%), var(--saas-surface);
3651
- --saas-control-bg: linear-gradient(180deg, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)), rgb(var(--saas-surface-soft-rgb) / var(--saas-panel-soft-alpha)));
4049
+ --saas-theme-bg: var(--saas-bg);
4050
+ --saas-card-bg: var(--saas-surface);
4051
+ --saas-control-bg: var(--saas-surface);
4052
+ --saas-hover-bg: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
3652
4053
  --saas-spinner-track: rgb(var(--saas-border-rgb) / max(.28, calc(var(--saas-border-alpha) * .7)));
3653
4054
  --saas-spinner-stroke: var(--saas-primary);
3654
4055
  --saas-spinner-accent: var(--saas-accent);
3655
4056
  }
3656
4057
 
3657
4058
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="minimal-saas"][data-theme][data-mode] {
4059
+ [data-ui="minimal-saas"][data-mode] {
3659
4060
  --saas-border: color-mix(in srgb, rgb(var(--saas-border-rgb) / max(var(--saas-border-alpha), var(--usk-border-min-alpha))), var(--saas-text) var(--usk-border-text-mix));
3660
4061
  }
3661
4062
  }
3662
4063
 
3663
4064
  [data-ui="minimal-saas"] {
3664
- background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.04),transparent 22rem),var(--saas-bg);
4065
+ background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.03),transparent 18rem),var(--saas-bg);
3665
4066
  color: var(--saas-text);
3666
4067
  font-family: var(--saas-font-body);
3667
4068
  text-rendering: optimizelegibility;
@@ -3674,7 +4075,7 @@
3674
4075
  box-sizing: border-box;
3675
4076
  }
3676
4077
 
3677
- [data-ui="minimal-saas"][data-theme][data-mode] {
4078
+ [data-ui="minimal-saas"][data-mode] {
3678
4079
  background: var(--saas-theme-bg);
3679
4080
  background-size: var(--saas-theme-bg-size);
3680
4081
  }
@@ -3685,33 +4086,35 @@
3685
4086
 
3686
4087
  .saas-title {
3687
4088
  color: var(--saas-text);
3688
- letter-spacing: -.045em;
4089
+ letter-spacing: -.02em;
3689
4090
  margin: 0;
3690
- font-size: clamp(2rem, 5vw, 3.7rem);
3691
- line-height: 1.02;
4091
+ font-size: 1.5rem;
4092
+ font-weight: 700;
4093
+ line-height: 1.05;
3692
4094
  }
3693
4095
 
3694
4096
  .saas-heading {
3695
4097
  color: var(--saas-text);
3696
- letter-spacing: -.03em;
4098
+ letter-spacing: 0;
3697
4099
  margin: 0;
3698
- font-size: clamp(1.2rem, 2.5vw, 2rem);
3699
- line-height: 1.15;
4100
+ font-size: 1rem;
4101
+ font-weight: 700;
4102
+ line-height: 1.2;
3700
4103
  }
3701
4104
 
3702
4105
  .saas-kicker {
3703
4106
  color: var(--saas-primary);
3704
- letter-spacing: .12em;
4107
+ letter-spacing: .1em;
3705
4108
  text-transform: uppercase;
3706
4109
  margin: 0;
3707
- font-size: .82rem;
3708
- font-weight: 850;
4110
+ font-size: .78rem;
4111
+ font-weight: 750;
3709
4112
  }
3710
4113
 
3711
4114
  .saas-subtitle, .saas-copy {
3712
4115
  color: var(--saas-text-muted);
3713
4116
  margin: 0;
3714
- line-height: 1.65;
4117
+ line-height: 1.55;
3715
4118
  }
3716
4119
 
3717
4120
  .saas-text-muted {
@@ -3726,19 +4129,15 @@
3726
4129
  }
3727
4130
 
3728
4131
  .saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-card, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap {
3729
- background: linear-gradient(180deg,#ffffff0d,#fff0),var(--saas-surface);
4132
+ background: var(--saas-card-bg);
3730
4133
  color: var(--saas-text);
3731
4134
  border: 1px solid var(--saas-border);
3732
4135
  border-radius: var(--saas-radius-lg);
3733
- box-shadow: 0 10px 30px rgb(15 23 42 / var(--saas-shadow-alpha));
4136
+ box-shadow: var(--saas-shadow-md);
3734
4137
  transition: transform var(--saas-transition-base),box-shadow var(--saas-transition-base),border-color var(--saas-transition-base),background var(--saas-transition-base);
3735
4138
  position: relative;
3736
4139
  }
3737
4140
 
3738
- .saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
3739
- padding: var(--saas-space-6);
3740
- }
3741
-
3742
4141
  .saas-toolbar, :where([data-ui="minimal-saas"]) .ui-toolbar {
3743
4142
  justify-content: space-between;
3744
4143
  align-items: center;
@@ -3750,26 +4149,27 @@
3750
4149
 
3751
4150
  .saas-surface-sm {
3752
4151
  border-radius: var(--saas-radius-md);
3753
- box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--saas-shadow-alpha)*.72));
4152
+ box-shadow: var(--saas-shadow-sm);
3754
4153
  }
3755
4154
 
3756
4155
  .saas-surface-lg {
3757
- border-radius: var(--saas-radius-xl);
3758
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .08));
4156
+ border-radius: var(--saas-radius-lg);
4157
+ box-shadow: var(--saas-shadow-md);
3759
4158
  }
3760
4159
 
3761
4160
  .saas-well, .saas-inset {
3762
4161
  background: var(--saas-surface-soft);
3763
4162
  color: var(--saas-text);
3764
- border: 1px solid rgb(var(--saas-border-rgb)/calc(var(--saas-border-alpha)*.7));
4163
+ border: 1px solid var(--saas-border);
3765
4164
  border-radius: var(--saas-radius-md);
3766
- padding: var(--saas-space-5);
3767
- box-shadow: inset 0 1px 3px #00000014;
4165
+ padding: var(--saas-space-4);
4166
+ box-shadow: none;
3768
4167
  }
3769
4168
 
3770
4169
  .saas-hover-lift:hover {
3771
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .12));
3772
- transform: translateY(-2px);
4170
+ border-color: rgb(var(--saas-primary-rgb)/.42);
4171
+ box-shadow: var(--saas-shadow-md);
4172
+ transform: none;
3773
4173
  }
3774
4174
 
3775
4175
  .saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
@@ -3777,71 +4177,62 @@
3777
4177
  justify-content: center;
3778
4178
  align-items: center;
3779
4179
  gap: var(--saas-space-2);
3780
- background: var(--saas-surface);
3781
- min-height: 2.75rem;
4180
+ background: var(--saas-control-bg);
4181
+ min-height: 2.125rem;
3782
4182
  color: var(--saas-text);
3783
4183
  border: 1px solid var(--saas-border);
3784
4184
  border-radius: var(--saas-radius-md);
3785
- box-shadow: 0 6px 18px rgb(0 0 0 / var(--saas-shadow-alpha));
4185
+ box-shadow: var(--saas-shadow-sm);
3786
4186
  font: inherit;
3787
4187
  cursor: pointer;
3788
4188
  -webkit-user-select: none;
3789
4189
  user-select: none;
3790
4190
  transition: color var(--saas-transition-fast),background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast),transform var(--saas-transition-fast);
3791
- padding: .75rem 1.1rem;
3792
- font-weight: 800;
4191
+ padding: .45rem .75rem;
4192
+ font-weight: 700;
3793
4193
  line-height: 1;
3794
4194
  text-decoration: none;
3795
4195
  display: inline-flex;
3796
4196
  }
3797
4197
 
3798
4198
  .saas-button:hover, .saas-icon-button:hover, :where([data-ui="minimal-saas"]) .ui-button:hover, :where([data-ui="minimal-saas"]) .ui-icon-button:hover {
3799
- border-color: var(--saas-primary);
3800
- transform: translateY(-1px);
4199
+ border-color: rgb(var(--saas-primary-rgb)/.48);
4200
+ background: var(--saas-surface-soft);
4201
+ transform: none;
3801
4202
  }
3802
4203
 
3803
4204
  .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active, :where([data-ui="minimal-saas"]) .ui-button:active, :where([data-ui="minimal-saas"]) .ui-icon-button:active, :where([data-ui="minimal-saas"]) .ui-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-button.is-active, :where([data-ui="minimal-saas"]) .ui-icon-button.is-active {
4205
+ box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb)/.12);
3804
4206
  transform: translateY(1px);
3805
- box-shadow: inset 0 3px 10px #0000002e;
3806
- }
3807
-
3808
- .saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
3809
- background: var(--saas-primary);
3810
- color: var(--saas-on-primary);
3811
- border-color: var(--saas-primary);
3812
4207
  }
3813
4208
 
3814
4209
  .saas-button-primary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]):hover {
3815
- background: var(--saas-primary-hover);
4210
+ background: linear-gradient(135deg,var(--saas-brand-2),var(--saas-primary));
3816
4211
  border-color: var(--saas-primary-hover);
3817
4212
  }
3818
4213
 
3819
4214
  .saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
3820
- background: var(--saas-secondary);
3821
- color: var(--saas-on-secondary);
3822
- border-color: var(--saas-secondary);
4215
+ background: rgb(var(--saas-surface-strong-rgb)/var(--saas-panel-alpha));
4216
+ color: var(--saas-primary);
4217
+ border-color: rgb(var(--saas-primary-rgb)/.32);
4218
+ box-shadow: none;
3823
4219
  }
3824
4220
 
3825
4221
  .saas-button-secondary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3826
- background: var(--saas-secondary-hover);
3827
- border-color: var(--saas-secondary-hover);
3828
- }
3829
-
3830
- .saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
3831
- background: var(--saas-danger);
3832
- color: var(--saas-on-danger);
3833
- border-color: var(--saas-danger);
4222
+ background: rgb(var(--saas-primary-rgb)/.06);
4223
+ border-color: rgb(var(--saas-primary-rgb)/.52);
3834
4224
  }
3835
4225
 
3836
4226
  .saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
3837
- color: var(--saas-text);
4227
+ color: var(--saas-primary);
3838
4228
  box-shadow: none;
3839
4229
  background: none;
4230
+ border-color: #0000;
3840
4231
  }
3841
4232
 
3842
4233
  .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
3843
- border-radius: var(--saas-radius-pill);
3844
- width: 2.75rem;
4234
+ border-radius: var(--saas-radius-md);
4235
+ width: 2.375rem;
3845
4236
  padding: 0;
3846
4237
  }
3847
4238
 
@@ -3855,7 +4246,7 @@
3855
4246
  background: var(--saas-card-bg);
3856
4247
  }
3857
4248
 
3858
- .saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap, :where([data-ui="minimal-saas"]) .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="minimal-saas"]) .ui-icon-button {
4249
+ .saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost), .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap, :where([data-ui="minimal-saas"]) .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="minimal-saas"]) .ui-icon-button {
3859
4250
  background: var(--saas-control-bg);
3860
4251
  }
3861
4252
 
@@ -3871,26 +4262,26 @@
3871
4262
 
3872
4263
  .saas-label, :where([data-ui="minimal-saas"]) .ui-label {
3873
4264
  color: var(--saas-text);
3874
- font-size: .925rem;
3875
- font-weight: 800;
4265
+ font-size: .875rem;
4266
+ font-weight: 700;
3876
4267
  }
3877
4268
 
3878
4269
  .saas-input, .saas-textarea, .saas-select, :where([data-ui="minimal-saas"]) .ui-input, :where([data-ui="minimal-saas"]) .ui-textarea, :where([data-ui="minimal-saas"]) .ui-select {
3879
- background: var(--saas-surface-soft);
4270
+ background: var(--saas-control-bg);
3880
4271
  width: 100%;
3881
- min-height: 2.875rem;
4272
+ min-height: 2rem;
3882
4273
  color: var(--saas-text);
3883
4274
  border: 1px solid var(--saas-border);
3884
4275
  border-radius: var(--saas-radius-md);
3885
4276
  font: inherit;
3886
4277
  transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
3887
4278
  outline: none;
3888
- padding: .75rem 1rem;
4279
+ padding: .38rem .65rem;
3889
4280
  }
3890
4281
 
3891
4282
  .saas-textarea, :where([data-ui="minimal-saas"]) .ui-textarea {
3892
4283
  resize: vertical;
3893
- min-height: 8rem;
4284
+ min-height: 7rem;
3894
4285
  }
3895
4286
 
3896
4287
  .saas-input::placeholder, .saas-textarea::placeholder, :where([data-ui="minimal-saas"]) .ui-input::placeholder, :where([data-ui="minimal-saas"]) .ui-textarea::placeholder {
@@ -3899,7 +4290,7 @@
3899
4290
  }
3900
4291
 
3901
4292
  .saas-input:hover, .saas-textarea:hover, .saas-select:hover, :where([data-ui="minimal-saas"]) .ui-input:hover, :where([data-ui="minimal-saas"]) .ui-textarea:hover, :where([data-ui="minimal-saas"]) .ui-select:hover {
3902
- border-color: rgb(var(--saas-primary-rgb)/.58);
4293
+ border-color: rgb(var(--saas-primary-rgb)/.42);
3903
4294
  }
3904
4295
 
3905
4296
  .saas-input:focus, .saas-textarea:focus, .saas-select:focus, :where([data-ui="minimal-saas"]) .ui-input:focus, :where([data-ui="minimal-saas"]) .ui-textarea:focus, :where([data-ui="minimal-saas"]) .ui-select:focus {
@@ -3907,6 +4298,11 @@
3907
4298
  box-shadow: var(--saas-focus-ring);
3908
4299
  }
3909
4300
 
4301
+ [data-ui="minimal-saas"][data-mode] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
4302
+ outline: 2px solid var(--saas-focus);
4303
+ outline-offset: 2px;
4304
+ }
4305
+
3910
4306
  .saas-help-text, :where([data-ui="minimal-saas"]) .ui-help-text {
3911
4307
  color: var(--saas-text-muted);
3912
4308
  font-size: .875rem;
@@ -3928,11 +4324,11 @@
3928
4324
  }
3929
4325
 
3930
4326
  .saas-check-control, .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio-control {
3931
- background: var(--saas-surface-soft);
4327
+ background: var(--saas-control-bg);
3932
4328
  border: 1px solid var(--saas-border);
3933
- width: 1.35rem;
3934
- height: 1.35rem;
3935
- transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
4329
+ width: 1rem;
4330
+ height: 1rem;
4331
+ transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
3936
4332
  place-items: center;
3937
4333
  display: inline-grid;
3938
4334
  }
@@ -3948,22 +4344,23 @@
3948
4344
  .saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control {
3949
4345
  background: var(--saas-primary);
3950
4346
  border-color: var(--saas-primary);
3951
- box-shadow: var(--saas-focus-ring);
4347
+ box-shadow: 0 0 0 .16rem rgb(var(--saas-primary-rgb)/.18);
3952
4348
  }
3953
4349
 
3954
4350
  .saas-check input:checked + .saas-check-control:after, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control:after {
3955
4351
  content: "✓";
3956
4352
  color: var(--saas-on-primary);
3957
- font-size: .9rem;
4353
+ font-size: .78rem;
3958
4354
  font-weight: 900;
4355
+ line-height: 1;
3959
4356
  }
3960
4357
 
3961
4358
  .saas-radio input:checked + .saas-radio-control:after, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control:after {
3962
4359
  content: "";
3963
4360
  background: var(--saas-on-primary);
3964
4361
  border-radius: 50%;
3965
- width: .55rem;
3966
- height: .55rem;
4362
+ width: .48rem;
4363
+ height: .48rem;
3967
4364
  }
3968
4365
 
3969
4366
  .saas-switch, :where([data-ui="minimal-saas"]) .ui-switch {
@@ -3984,8 +4381,8 @@
3984
4381
  background: var(--saas-surface-soft);
3985
4382
  border: 1px solid var(--saas-border);
3986
4383
  border-radius: var(--saas-radius-pill);
3987
- width: 3.5rem;
3988
- height: 1.9rem;
4384
+ width: 2.6rem;
4385
+ height: 1.3rem;
3989
4386
  transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
3990
4387
  position: relative;
3991
4388
  }
@@ -3993,14 +4390,14 @@
3993
4390
  .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
3994
4391
  background: var(--saas-surface-strong);
3995
4392
  border: 1px solid var(--saas-border);
3996
- width: 1.34rem;
3997
- height: 1.34rem;
3998
- box-shadow: 0 4px 12px rgb(0 0 0 / var(--saas-shadow-alpha));
4393
+ width: .9rem;
4394
+ height: .9rem;
4395
+ box-shadow: 0 1px 2px rgb(var(--saas-text-rgb)/.12);
3999
4396
  transition: left var(--saas-transition-fast),background var(--saas-transition-fast);
4000
4397
  border-radius: 50%;
4001
4398
  position: absolute;
4002
- top: .22rem;
4003
- left: .22rem;
4399
+ top: .14rem;
4400
+ left: .14rem;
4004
4401
  }
4005
4402
 
4006
4403
  .saas-switch input:checked + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track {
@@ -4010,20 +4407,25 @@
4010
4407
 
4011
4408
  .saas-switch input:checked + .saas-switch-track .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
4012
4409
  background: var(--saas-on-primary);
4013
- left: calc(100% - 1.56rem);
4410
+ left: calc(100% - 1.04rem);
4411
+ }
4412
+
4413
+ .saas-check input:focus-visible + .saas-check-control, .saas-radio input:focus-visible + .saas-radio-control, .saas-switch input:focus-visible + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-check input:focus-visible+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:focus-visible+.ui-radio-control, :where([data-ui="minimal-saas"]) .ui-switch input:focus-visible+.ui-switch-track {
4414
+ outline: 2px solid var(--saas-focus);
4415
+ outline-offset: 2px;
4014
4416
  }
4015
4417
 
4016
4418
  .saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
4017
4419
  align-items: center;
4018
4420
  gap: var(--saas-space-1);
4019
4421
  background: var(--saas-surface-soft);
4020
- min-height: 1.75rem;
4422
+ min-height: 1.4rem;
4021
4423
  color: var(--saas-text);
4022
- border: 1px solid var(--saas-border);
4023
- border-radius: var(--saas-radius-pill);
4024
- padding: .35rem .7rem;
4025
- font-size: .8125rem;
4026
- font-weight: 850;
4424
+ border-radius: var(--saas-radius-sm);
4425
+ border: 1px solid #0000;
4426
+ padding: .25rem .5rem;
4427
+ font-size: .75rem;
4428
+ font-weight: 700;
4027
4429
  line-height: 1;
4028
4430
  display: inline-flex;
4029
4431
  }
@@ -4035,50 +4437,51 @@
4035
4437
  }
4036
4438
 
4037
4439
  .saas-badge-secondary, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="secondary"]) {
4038
- background: var(--saas-secondary);
4039
- color: var(--saas-on-secondary);
4040
- border-color: var(--saas-secondary);
4440
+ background: rgb(var(--saas-primary-rgb)/.1);
4441
+ color: var(--saas-primary);
4442
+ border-color: #0000;
4041
4443
  }
4042
4444
 
4043
4445
  .saas-badge-success, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="success"]) {
4044
- background: var(--saas-success);
4045
- color: var(--saas-on-success);
4046
- border-color: var(--saas-success);
4446
+ background: rgb(var(--saas-success-rgb)/.14);
4447
+ color: var(--saas-text);
4448
+ border-color: rgb(var(--saas-success-rgb)/.38);
4047
4449
  }
4048
4450
 
4049
4451
  .saas-badge-warning, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="warning"]) {
4050
- background: var(--saas-warning);
4051
- color: var(--saas-on-warning);
4052
- border-color: var(--saas-warning);
4452
+ background: rgb(var(--saas-warning-rgb)/.14);
4453
+ color: var(--saas-text);
4454
+ border-color: rgb(var(--saas-warning-rgb)/.38);
4053
4455
  }
4054
4456
 
4055
4457
  .saas-badge-danger, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="danger"]) {
4056
- background: var(--saas-danger);
4057
- color: var(--saas-on-danger);
4058
- border-color: var(--saas-danger);
4458
+ background: rgb(var(--saas-danger-rgb)/.14);
4459
+ color: var(--saas-text);
4460
+ border-color: rgb(var(--saas-danger-rgb)/.38);
4059
4461
  }
4060
4462
 
4061
4463
  .saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
4062
4464
  align-items: center;
4063
- gap: var(--saas-space-2);
4064
- padding: var(--saas-space-2);
4065
- background: var(--saas-surface);
4066
- border: 1px solid var(--saas-border);
4067
- border-radius: var(--saas-radius-xl);
4068
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha));
4465
+ gap: var(--saas-space-1);
4466
+ border: 0;
4467
+ border-bottom: 1px solid var(--saas-border);
4468
+ box-shadow: none;
4469
+ background: none;
4470
+ border-radius: 0;
4069
4471
  flex-wrap: wrap;
4472
+ padding: 0;
4070
4473
  display: flex;
4071
4474
  }
4072
4475
 
4073
4476
  .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
4074
- min-height: 2.5rem;
4477
+ min-height: 2.125rem;
4075
4478
  color: var(--saas-text-muted);
4076
- border-radius: var(--saas-radius-pill);
4479
+ border-radius: var(--saas-radius-md);
4077
4480
  transition: color var(--saas-transition-fast),background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
4078
4481
  justify-content: center;
4079
4482
  align-items: center;
4080
- padding: .65rem 1rem;
4081
- font-weight: 850;
4483
+ padding: .4rem .7rem;
4484
+ font-weight: 700;
4082
4485
  text-decoration: none;
4083
4486
  display: inline-flex;
4084
4487
  }
@@ -4089,8 +4492,9 @@
4089
4492
  }
4090
4493
 
4091
4494
  .saas-nav-link[aria-current="page"], .saas-nav-link.is-active, :where([data-ui="minimal-saas"]) .ui-nav-link[aria-current="page"], :where([data-ui="minimal-saas"]) .ui-nav-link.is-active {
4092
- color: var(--saas-on-primary);
4093
- background: var(--saas-primary);
4495
+ color: var(--saas-text);
4496
+ box-shadow: inset 0-2px 0 var(--saas-primary);
4497
+ background: none;
4094
4498
  }
4095
4499
 
4096
4500
  .saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
@@ -4121,43 +4525,31 @@
4121
4525
 
4122
4526
  .saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
4123
4527
  background: var(--saas-surface-soft);
4124
- border: 1px solid var(--saas-border);
4125
4528
  border-radius: var(--saas-radius-pill);
4529
+ border: 0 solid #0000;
4126
4530
  width: 100%;
4127
- height: .9rem;
4531
+ height: .3rem;
4128
4532
  overflow: hidden;
4129
4533
  }
4130
4534
 
4131
4535
  .saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
4132
4536
  height: 100%;
4133
4537
  width: var(--saas-progress-value, 50%);
4134
- background: linear-gradient(90deg,var(--saas-primary),var(--saas-accent));
4538
+ background: var(--saas-primary);
4135
4539
  border-radius: inherit;
4136
4540
  }
4137
4541
 
4138
4542
  .saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
4139
4543
  gap: var(--saas-space-2);
4140
- padding: var(--saas-space-4);
4141
- background: var(--saas-surface);
4544
+ padding: var(--saas-space-3);
4545
+ background: rgb(var(--saas-primary-rgb)/.065);
4142
4546
  color: var(--saas-text);
4143
- border: 1px solid var(--saas-border);
4547
+ border: 1px solid rgb(var(--saas-primary-rgb)/.28);
4144
4548
  border-radius: var(--saas-radius-lg);
4145
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha));
4549
+ box-shadow: none;
4146
4550
  display: grid;
4147
4551
  }
4148
4552
 
4149
- .saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
4150
- border-left-color: var(--saas-success);
4151
- }
4152
-
4153
- .saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
4154
- border-left-color: var(--saas-warning);
4155
- }
4156
-
4157
- .saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
4158
- border-left-color: var(--saas-danger);
4159
- }
4160
-
4161
4553
  .saas-alert-title, :where([data-ui="minimal-saas"]) .ui-alert-title {
4162
4554
  margin: 0;
4163
4555
  font-weight: 900;
@@ -4181,16 +4573,16 @@
4181
4573
  .saas-table th, .saas-table td, :where([data-ui="minimal-saas"]) .ui-table th, :where([data-ui="minimal-saas"]) .ui-table td {
4182
4574
  text-align: left;
4183
4575
  border-bottom: 1px solid var(--saas-border);
4184
- padding: .95rem 1rem;
4576
+ padding: .68rem .75rem;
4185
4577
  }
4186
4578
 
4187
4579
  .saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
4188
4580
  color: var(--saas-text);
4189
- text-transform: uppercase;
4190
- letter-spacing: .08em;
4191
- background: rgb(var(--saas-primary-rgb)/.08);
4192
- font-size: .82rem;
4193
- font-weight: 900;
4581
+ text-transform: none;
4582
+ letter-spacing: 0;
4583
+ background: rgb(var(--saas-surface-soft-rgb)/.52);
4584
+ font-size: .78rem;
4585
+ font-weight: 700;
4194
4586
  }
4195
4587
 
4196
4588
  .saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
@@ -4476,7 +4868,6 @@
4476
4868
  border-radius: var(--saas-radius-lg);
4477
4869
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4478
4870
  display: grid;
4479
- overflow: hidden;
4480
4871
  }
4481
4872
 
4482
4873
  .saas-feature-item {
@@ -4582,19 +4973,24 @@
4582
4973
  }
4583
4974
 
4584
4975
  .saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
4585
- box-shadow: 0 .9rem 2rem rgb(15 23 42 / calc(var(--saas-shadow-alpha) + .03));
4976
+ box-shadow: var(--saas-shadow-md);
4586
4977
  }
4587
4978
 
4588
4979
  .saas-card-accent-edge {
4589
- border-inline-start-width: .3rem;
4980
+ border-inline-start-width: .16rem;
4590
4981
  }
4591
4982
 
4592
4983
  .saas-icon-medallion {
4593
- box-shadow: 0 .55rem 1.2rem rgb(15 23 42 / calc(var(--saas-shadow-alpha) + .05));
4984
+ background: var(--saas-surface-soft);
4985
+ color: var(--saas-primary);
4986
+ border: 1px solid var(--saas-border);
4987
+ border-radius: var(--saas-radius-lg);
4988
+ box-shadow: var(--saas-shadow-sm);
4594
4989
  }
4595
4990
 
4596
4991
  .saas-button.saas-button-cut, .saas-button-cut, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut {
4597
- clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% .55rem, 100% 100%, 0 100%);
4992
+ min-height: 2.75rem;
4993
+ clip-path: polygon(0 0, calc(100% - .25rem) 0, 100% .25rem, 100% 100%, 0 100%);
4598
4994
  justify-content: center;
4599
4995
  justify-self: start;
4600
4996
  min-inline-size: 6rem;
@@ -4602,30 +4998,48 @@
4602
4998
  }
4603
4999
 
4604
5000
  .saas-button.saas-button-outline-heavy, .saas-button-outline-heavy, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy {
4605
- clip-path: polygon(0 0, calc(100% - .42rem) 0, 100% .42rem, 100% 100%, 0 100%);
4606
- box-shadow: 0 .25rem .6rem rgb(var(--saas-text-rgb)/.08);
5001
+ clip-path: polygon(0 0, calc(100% - .2rem) 0, 100% .2rem, 100% 100%, 0 100%);
5002
+ box-shadow: var(--saas-shadow-sm);
4607
5003
  border-width: 1px;
4608
5004
  border-radius: 0;
4609
5005
  }
4610
5006
 
4611
5007
  .saas-card-service, .saas-media-scrim, .saas-feature-strip, .saas-callout-bar, .saas-metric {
4612
5008
  border: 1px solid var(--saas-border);
4613
- border-inline-start-width: .22rem;
4614
- border-inline-start-color: var(--saas-primary);
4615
- box-shadow: 0 .6rem 1.4rem rgb(var(--saas-text-rgb)/.1);
5009
+ box-shadow: var(--saas-shadow-md);
5010
+ }
5011
+
5012
+ [data-ui="minimal-saas"][data-mode] :where(fieldset, article, aside) {
5013
+ background: var(--saas-surface);
5014
+ border: 1px solid var(--saas-border);
5015
+ border-radius: var(--saas-radius-lg);
5016
+ box-shadow: none;
4616
5017
  }
4617
5018
 
4618
- [data-ui="minimal-saas"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4619
- border: 1px solid var(--saas-primary);
5019
+ [data-ui="minimal-saas"][data-mode] :where(legend) {
5020
+ font-weight: 750;
5021
+ }
5022
+
5023
+ [data-ui="minimal-saas"][data-mode] :where(label) {
5024
+ font-weight: 700;
5025
+ }
5026
+
5027
+ [data-ui="minimal-saas"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5028
+ min-block-size: var(--usk-native-control-min-block-size);
5029
+ background: var(--saas-control-bg);
5030
+ color: var(--saas-text);
5031
+ border: 1px solid var(--saas-border);
4620
5032
  border-radius: var(--saas-radius-md);
4621
- box-shadow: 0 .25rem .6rem rgb(var(--saas-text-rgb)/.1);
5033
+ box-shadow: var(--saas-shadow-sm);
5034
+ font-family: var(--saas-font-control);
5035
+ padding: .5rem .78rem;
5036
+ font-weight: 700;
4622
5037
  }
4623
5038
 
4624
- [data-ui="minimal-saas"][data-theme][data-mode] :where(dialog) {
5039
+ [data-ui="minimal-saas"][data-mode] :where(dialog) {
4625
5040
  border: 1px solid var(--saas-border);
4626
5041
  border-radius: var(--saas-radius-lg);
4627
- box-shadow: 0 1rem 2.2rem rgb(var(--saas-text-rgb)/.18);
4628
- border-inline-start-width: .22rem;
5042
+ box-shadow: 0 .75rem 2rem rgb(var(--saas-text-rgb)/.14);
4629
5043
  }
4630
5044
 
4631
5045
  .saas-button[aria-busy="true"]:after, .saas-icon-button[aria-busy="true"]:after, [data-ui="minimal-saas"] :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="minimal-saas"]) .ui-button[aria-busy="true"]:after, :where([data-ui="minimal-saas"]) .ui-icon-button[aria-busy="true"]:after {
@@ -4682,4 +5096,284 @@
4682
5096
  color: #000 !important;
4683
5097
  }
4684
5098
  }
5099
+
5100
+ .saas-input[aria-invalid="true"], .saas-textarea[aria-invalid="true"], .saas-select[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-input[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-textarea[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-select[aria-invalid="true"] {
5101
+ border-color: var(--saas-danger);
5102
+ box-shadow: 0 0 0 2px rgb(var(--saas-danger-rgb)/.18);
5103
+ }
5104
+
5105
+ .saas-input[readonly], .saas-textarea[readonly], :where([data-ui="minimal-saas"]) .ui-input[readonly], :where([data-ui="minimal-saas"]) .ui-textarea[readonly] {
5106
+ filter: saturate(.72);
5107
+ opacity: .78;
5108
+ border-style: dashed;
5109
+ }
5110
+
5111
+ [data-ui="minimal-saas"][data-mode] {
5112
+ --usk-native-control-min-block-size: 2rem;
5113
+ --usk-native-control-padding-block: .38rem;
5114
+ --usk-native-control-padding-inline: .65rem;
5115
+ --usk-native-radius-sm: .1875rem;
5116
+ --usk-native-radius: .375rem;
5117
+ --usk-native-radius-lg: .5rem;
5118
+ --usk-native-shadow: 0 1px 2px rgb(var(--saas-text-rgb) / .06);
5119
+ --usk-native-shadow-md: 0 2px 6px rgb(var(--saas-text-rgb) / .08);
5120
+ --usk-native-focus-ring: 0 0 0 2px rgb(var(--saas-focus-rgb) / .3);
5121
+ --usk-native-subcontrol-padding-block: .32rem;
5122
+ --usk-native-subcontrol-padding-inline: .52rem;
5123
+ --usk-native-choice-size: .95rem;
5124
+ --usk-native-choice-background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
5125
+ --usk-native-choice-border: 1px solid rgb(var(--saas-border-rgb) / .9);
5126
+ --usk-native-checkbox-radius: .1875rem;
5127
+ --usk-native-choice-shadow: none;
5128
+ --usk-native-select-indicator-size: .31rem .31rem, .31rem .31rem;
5129
+ --usk-native-select-indicator-position: calc(100% - .92rem) 50%, calc(100% - .68rem) 50%;
5130
+ --usk-native-select-padding-inline-end: 2.1rem;
5131
+ --usk-native-range-track-size: .28rem;
5132
+ --usk-native-range-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
5133
+ --usk-native-range-track-border: 1px solid rgb(var(--saas-border-rgb) / .55);
5134
+ --usk-native-range-track-shadow: none;
5135
+ --usk-native-range-thumb-size: .9rem;
5136
+ --usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
5137
+ --usk-native-range-thumb-shadow: 0 1px 3px rgb(var(--saas-text-rgb) / .14);
5138
+ --usk-native-progress-size: .28rem;
5139
+ --usk-native-progress-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
5140
+ --usk-native-progress-track-border: 1px solid rgb(var(--saas-border-rgb) / .5);
5141
+ --usk-native-progress-track-shadow: none;
5142
+ --usk-native-progress-value-shadow: none;
5143
+ --usk-native-scrollbar-size: .55rem;
5144
+ --usk-native-scrollbar-track: rgb(var(--saas-surface-soft-rgb) / .72);
5145
+ --usk-native-scrollbar-thumb: rgb(var(--saas-primary-rgb) / .72);
5146
+ --usk-native-scrollbar-radius: .125rem;
5147
+ }
5148
+
5149
+ [data-ui="minimal-saas"][data-mode] :where(select:not([multiple])) {
5150
+ appearance: none;
5151
+ }
5152
+
5153
+ [data-ui="minimal-saas"][data-mode] :where(select:not([multiple]))::picker-icon {
5154
+ display: none;
5155
+ }
5156
+
5157
+ .saas-title {
5158
+ letter-spacing: -.02em;
5159
+ margin: 0;
5160
+ font-size: 1.5rem;
5161
+ font-weight: 700;
5162
+ line-height: 1.05;
5163
+ }
5164
+
5165
+ .saas-label, :where([data-ui="minimal-saas"]) .ui-label {
5166
+ font-size: .8125rem;
5167
+ font-weight: 650;
5168
+ }
5169
+
5170
+ .saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
5171
+ background: var(--saas-control-bg);
5172
+ min-height: 2.125rem;
5173
+ box-shadow: none;
5174
+ border-radius: .375rem;
5175
+ padding: .45rem .75rem;
5176
+ font-weight: 650;
5177
+ }
5178
+
5179
+ .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
5180
+ padding: 0;
5181
+ }
5182
+
5183
+ .saas-input, .saas-textarea, .saas-select, :where([data-ui="minimal-saas"]) .ui-input, :where([data-ui="minimal-saas"]) .ui-textarea, :where([data-ui="minimal-saas"]) .ui-select {
5184
+ min-height: 2rem;
5185
+ box-shadow: none;
5186
+ border-radius: .375rem;
5187
+ padding: .38rem .65rem;
5188
+ }
5189
+
5190
+ .saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-card, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap {
5191
+ background: var(--saas-surface);
5192
+ border: 1px solid var(--saas-border);
5193
+ box-shadow: var(--saas-shadow-md);
5194
+ border-radius: .5rem;
5195
+ }
5196
+
5197
+ .saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
5198
+ padding: 1rem;
5199
+ }
5200
+
5201
+ .saas-well, .saas-inset {
5202
+ background: rgb(var(--saas-surface-soft-rgb)/.72);
5203
+ border: 1px solid var(--saas-border);
5204
+ box-shadow: none;
5205
+ border-radius: .375rem;
5206
+ padding: .75rem;
5207
+ }
5208
+
5209
+ .saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
5210
+ border-radius: .25rem;
5211
+ min-height: 1.35rem;
5212
+ padding: .18rem .45rem;
5213
+ }
5214
+
5215
+ .saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
5216
+ background: var(--saas-surface);
5217
+ border: 1px solid var(--saas-border);
5218
+ border-inline-start: 1px solid var(--saas-primary);
5219
+ box-shadow: none;
5220
+ border-radius: .375rem;
5221
+ }
5222
+
5223
+ .saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
5224
+ background: rgb(var(--saas-surface-soft-rgb)/.82);
5225
+ height: .3rem;
5226
+ }
5227
+
5228
+ .saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
5229
+ background: var(--saas-primary);
5230
+ box-shadow: none;
5231
+ }
5232
+
5233
+ .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
5234
+ background: var(--saas-surface);
5235
+ box-shadow: none;
5236
+ border-radius: .5rem;
5237
+ }
5238
+
5239
+ .saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
5240
+ background: rgb(var(--saas-surface-soft-rgb)/.58);
5241
+ padding: .6rem .7rem;
5242
+ font-weight: 650;
5243
+ }
5244
+
5245
+ .saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
5246
+ padding: .6rem .7rem;
5247
+ }
5248
+
5249
+ .saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
5250
+ border: 0;
5251
+ border-bottom: 1px solid var(--saas-border);
5252
+ box-shadow: none;
5253
+ background: none;
5254
+ border-radius: 0;
5255
+ padding: 0;
5256
+ }
5257
+
5258
+ .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
5259
+ border-radius: .25rem;
5260
+ min-height: 2.125rem;
5261
+ padding: .4rem .62rem;
5262
+ }
5263
+
5264
+ .saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5265
+ box-shadow: 0 2px 6px rgb(var(--saas-text-rgb)/.12);
5266
+ border-radius: .25rem;
5267
+ }
5268
+
5269
+ .saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
5270
+ background: var(--saas-surface);
5271
+ box-shadow: none;
5272
+ border-radius: .5rem;
5273
+ padding: 1rem;
5274
+ }
5275
+
5276
+ .saas-feature-item {
5277
+ padding: .75rem;
5278
+ }
5279
+
5280
+ [data-ui="minimal-saas"][data-mode] :where(dialog) {
5281
+ background: var(--saas-surface);
5282
+ box-shadow: 0 .5rem 1.25rem rgb(var(--saas-text-rgb)/.12);
5283
+ border-radius: .5rem;
5284
+ }
5285
+
5286
+ .saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
5287
+ background: rgb(var(--saas-success-rgb)/.12);
5288
+ border-color: rgb(var(--saas-success-rgb)/.58);
5289
+ }
5290
+
5291
+ .saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
5292
+ background: rgb(var(--saas-warning-rgb)/.12);
5293
+ border-color: rgb(var(--saas-warning-rgb)/.58);
5294
+ }
5295
+
5296
+ .saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
5297
+ background: rgb(var(--saas-danger-rgb)/.12);
5298
+ border-color: rgb(var(--saas-danger-rgb)/.58);
5299
+ }
5300
+
5301
+ .saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
5302
+ background: linear-gradient(135deg,var(--saas-primary),var(--saas-brand-2));
5303
+ color: var(--saas-on-primary);
5304
+ border-color: var(--saas-primary);
5305
+ }
5306
+
5307
+ .saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
5308
+ background: var(--saas-surface);
5309
+ color: var(--saas-primary);
5310
+ border-color: var(--saas-primary);
5311
+ }
5312
+
5313
+ .saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
5314
+ background: var(--saas-danger);
5315
+ color: var(--saas-on-danger);
5316
+ border-color: var(--saas-danger);
5317
+ }
5318
+
5319
+ .saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
5320
+ color: var(--saas-primary);
5321
+ background: none;
5322
+ border-color: #0000;
5323
+ }
5324
+
5325
+ @media (pointer: coarse) {
5326
+ [data-ui="minimal-saas"] :where(.saas-button, .saas-icon-button, .saas-input, .saas-select, .saas-nav-link), :where([data-ui="minimal-saas"]) :where(.ui-button,.ui-icon-button,.ui-input,.ui-select,.ui-nav-link) {
5327
+ min-block-size: 2.75rem;
5328
+ }
5329
+ }
5330
+
5331
+ .saas-card-service > .saas-icon-medallion, .saas-feature-item > .saas-icon-medallion {
5332
+ font-size: 1.5rem;
5333
+ line-height: 1;
5334
+ }
5335
+
5336
+ .saas-callout-bar > .saas-icon-medallion {
5337
+ min-block-size: 4.5rem;
5338
+ min-inline-size: 4.5rem;
5339
+ padding-block: .55rem .85rem;
5340
+ font-size: 2rem;
5341
+ font-weight: 800;
5342
+ line-height: 1;
5343
+ }
5344
+
5345
+ .saas-badge-seal > strong {
5346
+ font-size: 1.125rem;
5347
+ line-height: .9;
5348
+ }
5349
+
5350
+ .saas-badge-seal > small {
5351
+ font-size: .78rem;
5352
+ line-height: 1;
5353
+ }
5354
+
5355
+ [data-ui="minimal-saas"][data-mode] .saas-button.saas-button-warning, :where([data-ui="minimal-saas"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
5356
+ background: var(--saas-warning);
5357
+ color: var(--saas-on-warning);
5358
+ border-color: var(--saas-warning);
5359
+ text-shadow: none;
5360
+ }
5361
+ }
5362
+
5363
+ [data-ui="minimal-saas"][data-mode] .saas-title {
5364
+ letter-spacing: max(.03em, .5px);
5365
+ margin-block: max(.75rem, 12px);
5366
+ }
5367
+
5368
+ [data-ui="minimal-saas"][data-mode] .saas-feature-item > .saas-icon-medallion {
5369
+ font-size: 1.5rem;
5370
+ line-height: 1;
5371
+ }
5372
+
5373
+ [data-ui="minimal-saas"][data-mode] .saas-callout-bar > .saas-icon-medallion {
5374
+ min-block-size: 4.5rem;
5375
+ min-inline-size: 4.5rem;
5376
+ font-size: 2rem;
5377
+ font-weight: 800;
5378
+ line-height: 1;
4685
5379
  }