ui-style-kit-css 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/CHANGELOG.md +40 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +91 -42
  4. package/STYLE-MAP.md +9 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47483 -15117
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47344 -15106
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47510 -15134
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +2821 -279
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +812 -224
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2238 -267
  37. package/dist/visual/data-terminal.css +1671 -293
  38. package/dist/visual/editorial-luxe.css +1889 -243
  39. package/dist/visual/industrial-utility.css +2717 -255
  40. package/dist/visual/maximalist.css +1768 -447
  41. package/dist/visual/minimal-saas.css +1076 -382
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1266 -388
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2551 -276
  46. package/dist/visual/retro-glass.css +2235 -319
  47. package/dist/visual/retrofuturism.css +1460 -382
  48. package/dist/visual/tactile.css +2251 -443
  49. package/dist/visual/technical-blueprint.css +2207 -285
  50. package/dist/visual/y2k.css +1481 -294
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +4 -4
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +31 -10
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +40 -25
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +80 -3
  70. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  71. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  72. package/manifest.json +618 -27
  73. package/package.json +18 -10
  74. package/styles/art-deco.css +1397 -12
  75. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  76. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  77. package/styles/assets/bauhaus-barlow.ttf +0 -0
  78. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  79. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  81. package/styles/assets/bento-manrope-OFL.txt +93 -0
  82. package/styles/assets/bento-manrope.ttf +0 -0
  83. package/styles/assets/clay-grain.png +0 -0
  84. package/styles/assets/clay-rounded-OFL.txt +93 -0
  85. package/styles/assets/clay-rounded.ttf +0 -0
  86. package/styles/assets/neo-noir-corner-dark.png +0 -0
  87. package/styles/assets/neo-noir-corner-light.png +0 -0
  88. package/styles/assets/neo-noir-texture-dark.png +0 -0
  89. package/styles/assets/neo-noir-texture-light.png +0 -0
  90. package/styles/assets/organic-display-OFL.txt +93 -0
  91. package/styles/assets/organic-display.ttf +0 -0
  92. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  93. package/styles/assets/organic-sans-OFL.txt +93 -0
  94. package/styles/assets/organic-sans.ttf +0 -0
  95. package/styles/bauhaus.css +878 -107
  96. package/styles/bento.css +1176 -108
  97. package/styles/brutalism.css +262 -11
  98. package/styles/clay.css +1303 -68
  99. package/styles/compat-layout.css +1 -2
  100. package/styles/components.css +105 -34
  101. package/styles/content-overflow.css +11 -5
  102. package/styles/cyberpunk.css +1852 -47
  103. package/styles/data-terminal.css +1116 -12
  104. package/styles/editorial-luxe.css +576 -12
  105. package/styles/industrial-utility.css +1771 -12
  106. package/styles/interactive-surface-bridge.css +30 -20
  107. package/styles/interactive-surface-theme.css +21 -11
  108. package/styles/maximalist.css +1214 -132
  109. package/styles/minimal-saas.css +459 -88
  110. package/styles/native-elements.css +347 -171
  111. package/styles/neo-noir.css +656 -14
  112. package/styles/neumorphism.css +1018 -146
  113. package/styles/organic-modern.css +688 -18
  114. package/styles/paper-editorial.css +1048 -12
  115. package/styles/retro-glass.css +635 -46
  116. package/styles/retrofuturism.css +944 -56
  117. package/styles/tactile.css +1810 -108
  118. package/styles/technical-blueprint.css +668 -17
  119. package/styles/theme-colors.css +2 -2
  120. package/styles/y2k.css +950 -42
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,12 +14,12 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
17
+ :where([data-ui][data-mode="light"]) {
18
18
  --usk-border-text-mix: 45%;
19
19
  --usk-border-min-alpha: 1;
20
20
  }
21
21
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
22
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
23
  --usk-border-text-mix: 0%;
24
24
  --usk-border-min-alpha: 0;
25
25
  }
@@ -1597,7 +1597,8 @@
1597
1597
  ========================================================= */
1598
1598
 
1599
1599
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
1600
+ [data-ui][data-mode] {
1601
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
1602
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
1603
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
1604
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +1635,52 @@
1634
1635
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
1636
  --usk-native-thumb-border: var(--usk-native-primary);
1636
1637
  --usk-native-indicator: var(--usk-native-primary);
1638
+ --usk-native-choice-size: 1.5rem;
1639
+ --usk-native-choice-background: var(--usk-native-control-bg);
1640
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
1641
+ --usk-native-checkbox-radius: .3rem;
1642
+ --usk-native-radio-radius: 50%;
1643
+ --usk-native-choice-shadow: none;
1644
+ --usk-native-choice-checked-background: var(--usk-native-primary);
1645
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
1646
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
1647
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
1648
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
1649
+ --usk-native-select-padding-inline-end: 2.5rem;
1650
+ --usk-native-range-track-size: .45rem;
1651
+ --usk-native-range-track-background: var(--usk-native-track);
1652
+ --usk-native-range-track-border: 0 solid transparent;
1653
+ --usk-native-range-track-radius: 999px;
1654
+ --usk-native-range-track-shadow: none;
1655
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
1656
+ --usk-native-range-thumb-size: 1.2rem;
1657
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
1658
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1659
+ --usk-native-range-thumb-radius: 50%;
1660
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
1661
+ --usk-native-progress-size: .9rem;
1662
+ --usk-native-progress-track-background: var(--usk-native-track);
1663
+ --usk-native-progress-track-border: 0 solid transparent;
1664
+ --usk-native-progress-track-radius: 999px;
1665
+ --usk-native-progress-track-shadow: none;
1666
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
1667
+ --usk-native-progress-value-radius: inherit;
1668
+ --usk-native-progress-value-shadow: none;
1669
+ --usk-native-meter-optimum-background: var(--usk-native-success);
1670
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
1671
+ --usk-native-meter-critical-background: var(--usk-native-danger);
1672
+ --usk-native-file-button-background: var(--usk-native-primary);
1673
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
1674
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
1675
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
1676
+ --usk-native-color-swatch-border: 0 solid transparent;
1677
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
1678
+ --usk-native-indicator-opacity: .78;
1679
+ --usk-native-indicator-filter: none;
1680
+ --usk-native-scrollbar-size: .75rem;
1681
+ --usk-native-scrollbar-track: var(--usk-native-track);
1682
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
1683
+ --usk-native-scrollbar-radius: 999px;
1637
1684
  --usk-native-shadow: none;
1638
1685
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
1686
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +1688,7 @@
1641
1688
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
1689
 
1643
1690
  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
- --ui-color-bg: rgb(var(--usk-bg-rgb));
1691
+ --ui-color-bg: var(--usk-native-bg);
1645
1692
  --ui-color-surface: var(--usk-native-surface-strong);
1646
1693
  --ui-color-text: var(--usk-native-text);
1647
1694
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +1702,7 @@
1655
1702
  --ui-motion-easing: var(--usk-motion-easing);
1656
1703
  }
1657
1704
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1705
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
1706
  color: var(--usk-native-text);
1660
1707
  font-family: var(--usk-native-font-heading);
1661
1708
  line-height: 1.15;
@@ -1663,42 +1710,42 @@
1663
1710
  }
1664
1711
 
1665
1712
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1713
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
1714
  }
1668
1715
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
1716
+ [data-ui][data-mode] :where(hgroup) {
1670
1717
  display: grid;
1671
1718
  gap: .35rem;
1672
1719
  margin-block: 0 1rem;
1673
1720
  }
1674
1721
 
1675
- [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1676
- [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1677
- [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1722
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1723
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1724
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
1725
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
1726
+ [data-ui][data-mode] :where(p) {
1680
1727
  margin: 0 0 1rem;
1681
1728
  color: var(--usk-native-text-muted);
1682
1729
  line-height: 1.7;
1683
1730
  }
1684
1731
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
1732
+ [data-ui][data-mode] :where(a) {
1686
1733
  color: var(--usk-native-link);
1687
1734
  text-decoration-thickness: .08em;
1688
1735
  text-underline-offset: .18em;
1689
1736
  }
1690
1737
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1738
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1692
1739
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
1740
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
1741
  margin: 0 0 1rem;
1695
1742
  padding-left: 1.35rem;
1696
1743
  color: var(--usk-native-text-muted);
1697
1744
  }
1698
1745
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
1746
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
1747
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
1748
+ [data-ui][data-mode] :where(blockquote) {
1702
1749
  margin: 1.25rem 0;
1703
1750
  padding: 1rem 1.25rem;
1704
1751
  color: var(--usk-native-text);
@@ -1707,7 +1754,7 @@
1707
1754
  border-radius: var(--usk-native-radius);
1708
1755
  }
1709
1756
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
1757
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
1758
  padding: .15em .35em;
1712
1759
  color: var(--usk-native-text);
1713
1760
  background: var(--usk-native-surface-soft);
@@ -1717,7 +1764,7 @@
1717
1764
  font-size: .92em;
1718
1765
  }
1719
1766
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
1767
+ [data-ui][data-mode] :where(pre) {
1721
1768
  overflow: auto;
1722
1769
  margin: 1rem 0;
1723
1770
  padding: 1rem;
@@ -1727,57 +1774,88 @@
1727
1774
  border-radius: var(--usk-native-radius);
1728
1775
  }
1729
1776
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
1777
+ [data-ui][data-mode] :where(pre code) {
1731
1778
  display: block;
1732
1779
  padding: 0;
1733
1780
  background: transparent;
1734
1781
  border: 0;
1735
1782
  }
1736
1783
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
1784
+ [data-ui][data-mode] :where(hr) {
1738
1785
  height: 1px;
1739
1786
  margin: 2rem 0;
1740
1787
  background: var(--usk-native-border);
1741
1788
  border: 0;
1742
1789
  }
1743
1790
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
1791
+ [data-ui][data-mode] :where(mark) {
1745
1792
  padding-inline: .15em;
1746
1793
  color: var(--usk-native-text);
1747
1794
  background: rgb(var(--usk-warning-rgb) / .32);
1748
1795
  border-radius: .2em;
1749
1796
  }
1750
1797
 
1751
- [data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1752
- [data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }
1798
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1799
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
1800
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
1801
+ [data-ui][data-mode] :where(abbr[title]) {
1755
1802
  text-decoration: underline dotted var(--usk-native-primary);
1756
1803
  text-underline-offset: .18em;
1757
1804
  cursor: help;
1758
1805
  }
1759
1806
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1807
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
1808
  max-width: 100%;
1762
1809
  }
1763
1810
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1811
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1765
1812
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
1813
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
1814
+ [data-ui][data-mode] audio[controls] {
1815
+ display: block;
1816
+ box-sizing: border-box;
1817
+ inline-size: 100%;
1818
+ min-inline-size: 0;
1819
+ block-size: 60px;
1820
+ padding: 3px;
1821
+ background: var(--usk-native-control-bg);
1822
+ color: var(--usk-native-text);
1823
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
1824
+ border-radius: var(--usk-native-radius);
1825
+ box-shadow: var(--usk-native-shadow);
1826
+ accent-color: var(--usk-native-primary);
1827
+ color-scheme: light;
1828
+ }
1829
+ [data-ui][data-mode="dark"] audio[controls],
1830
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
1831
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
1832
+ border-radius: var(--usk-native-radius);
1833
+ background: transparent;
1834
+ }
1835
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
1836
+ background: var(--usk-native-control-bg);
1837
+ color: var(--usk-native-text);
1838
+ }
1839
+ [data-ui][data-mode] audio[controls]:focus-visible {
1840
+ outline: 2px solid var(--usk-native-focus);
1841
+ outline-offset: 2px;
1842
+ }
1843
+
1844
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
1845
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
1846
+ [data-ui][data-mode] :where(figcaption) {
1769
1847
  margin-top: .5rem;
1770
1848
  color: var(--usk-native-text-muted);
1771
1849
  font-size: .9rem;
1772
1850
  }
1773
1851
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
1852
+ [data-ui][data-mode] :where(form) {
1775
1853
  display: grid;
1776
1854
  gap: var(--usk-native-field-gap);
1777
1855
  min-inline-size: 0;
1778
1856
  }
1779
1857
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
1858
+ [data-ui][data-mode] :where(fieldset) {
1781
1859
  display: grid;
1782
1860
  gap: .9rem;
1783
1861
  min-inline-size: 0;
@@ -1788,30 +1866,30 @@
1788
1866
  border-radius: var(--usk-native-radius);
1789
1867
  }
1790
1868
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
1869
+ [data-ui][data-mode] :where(legend) {
1792
1870
  padding-inline: .35rem;
1793
1871
  color: var(--usk-native-text);
1794
1872
  font-weight: 900;
1795
1873
  }
1796
1874
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
1875
+ [data-ui][data-mode] :where(label) {
1798
1876
  color: var(--usk-native-text);
1799
1877
  font-weight: 750;
1800
1878
  }
1801
1879
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1880
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
1881
  display: grid;
1804
1882
  gap: var(--usk-native-field-gap);
1805
1883
  align-content: start;
1806
1884
  }
1807
1885
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1886
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
1887
  display: inline-flex;
1810
1888
  gap: var(--usk-native-field-gap);
1811
1889
  align-items: center;
1812
1890
  }
1813
1891
 
1814
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1892
+ [data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1815
1893
  width: 100%;
1816
1894
  min-block-size: var(--usk-native-control-min-block-size);
1817
1895
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +1900,44 @@
1822
1900
  font: inherit;
1823
1901
  }
1824
1902
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
1903
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
1904
  color-scheme: inherit;
1827
1905
  accent-color: var(--usk-native-primary);
1828
1906
  }
1829
1907
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
1908
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
1909
  color: var(--usk-native-text-muted);
1832
1910
  opacity: .78;
1833
1911
  }
1834
1912
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
1913
+ [data-ui][data-mode] :where(textarea) {
1836
1914
  min-height: 7rem;
1837
1915
  resize: vertical;
1838
1916
  }
1839
1917
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1918
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
1919
+
1920
+ [data-ui][data-mode] :where(select:not([multiple])) {
1921
+ -webkit-appearance: none;
1922
+ appearance: none;
1923
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
1924
+ background-image: var(--usk-native-select-indicator-image);
1925
+ background-repeat: no-repeat;
1926
+ background-position: var(--usk-native-select-indicator-position);
1927
+ background-size: var(--usk-native-select-indicator-size);
1928
+ }
1929
+
1930
+ [data-ui][data-mode] :where(select[multiple]) {
1931
+ padding-inline-end: var(--usk-native-control-padding-inline);
1932
+ background-image: none;
1933
+ }
1934
+
1935
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
1936
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
1937
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
1938
+ }
1841
1939
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1940
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
1941
  -webkit-appearance: none;
1844
1942
  appearance: none;
1845
1943
  box-sizing: border-box;
@@ -1848,7 +1946,7 @@
1848
1946
  font: inherit;
1849
1947
  }
1850
1948
 
1851
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1949
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
1950
  color: var(--usk-native-on-primary);
1853
1951
  background: var(--usk-native-primary);
1854
1952
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +1957,56 @@
1859
1957
  }
1860
1958
 
1861
1959
  /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1960
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
1961
  display: inline-flex;
1864
1962
  align-items: center;
1865
1963
  justify-content: center;
1866
1964
  gap: .55rem;
1867
1965
  }
1868
1966
 
1869
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1967
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
1968
  flex: 0 0 1em;
1871
1969
  }
1872
1970
 
1873
- [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1971
+ [data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1874
1972
  background: var(--usk-native-primary-hover);
1875
1973
  border-color: var(--usk-native-primary-hover);
1876
1974
  }
1877
1975
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
1976
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1977
+ -webkit-appearance: none;
1978
+ appearance: none;
1979
+ inline-size: var(--usk-native-choice-size);
1980
+ block-size: var(--usk-native-choice-size);
1981
+ background: var(--usk-native-choice-background);
1982
+ border: var(--usk-native-choice-border);
1983
+ box-shadow: var(--usk-native-choice-shadow);
1881
1984
  accent-color: var(--usk-native-primary);
1882
1985
  }
1883
1986
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
1987
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
1988
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
1989
+
1990
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
1991
+ background-color: var(--usk-native-choice-checked-background);
1992
+ background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
1993
+ }
1994
+
1995
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
1996
+ border-color: var(--usk-native-primary);
1997
+ filter: brightness(1.04);
1998
+ }
1999
+
2000
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2001
+ filter: brightness(.94);
2002
+ transform: scale(.94);
2003
+ }
2004
+
2005
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2006
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2007
+ }
2008
+
2009
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2010
  -webkit-appearance: none;
1886
2011
  appearance: none;
1887
2012
  width: 100%;
@@ -1890,40 +2015,50 @@
1890
2015
  accent-color: var(--usk-native-primary);
1891
2016
  }
1892
2017
 
1893
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
1894
- block-size: .45rem;
1895
- background: var(--usk-native-track);
1896
- border-radius: 999px;
2018
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2019
+ block-size: var(--usk-native-range-track-size);
2020
+ background: var(--usk-native-range-track-background);
2021
+ border: var(--usk-native-range-track-border);
2022
+ border-radius: var(--usk-native-range-track-radius);
2023
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2024
  }
1898
2025
 
1899
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
1900
- block-size: .45rem;
1901
- background: var(--usk-native-track);
1902
- border-radius: 999px;
2026
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2027
+ block-size: var(--usk-native-range-track-size);
2028
+ background: var(--usk-native-range-track-background);
2029
+ border: var(--usk-native-range-track-border);
2030
+ border-radius: var(--usk-native-range-track-radius);
2031
+ box-shadow: var(--usk-native-range-track-shadow);
2032
+ }
2033
+
2034
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2035
+ block-size: var(--usk-native-range-track-size);
2036
+ background: var(--usk-native-range-progress-background);
2037
+ border-radius: var(--usk-native-range-track-radius);
1903
2038
  }
1904
2039
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2040
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2041
  -webkit-appearance: none;
1907
2042
  appearance: none;
1908
- inline-size: 1.2rem;
1909
- block-size: 1.2rem;
1910
- margin-block-start: -.38rem;
1911
- background: var(--usk-native-thumb);
1912
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1913
- border-radius: 999px;
1914
- box-shadow: var(--usk-native-shadow);
2043
+ inline-size: var(--usk-native-range-thumb-size);
2044
+ block-size: var(--usk-native-range-thumb-size);
2045
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2046
+ background: var(--usk-native-range-thumb-background);
2047
+ border: var(--usk-native-range-thumb-border);
2048
+ border-radius: var(--usk-native-range-thumb-radius);
2049
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2050
  }
1916
2051
 
1917
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
1918
- inline-size: 1.2rem;
1919
- block-size: 1.2rem;
1920
- background: var(--usk-native-thumb);
1921
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1922
- border-radius: 999px;
1923
- box-shadow: var(--usk-native-shadow);
2052
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2053
+ inline-size: var(--usk-native-range-thumb-size);
2054
+ block-size: var(--usk-native-range-thumb-size);
2055
+ background: var(--usk-native-range-thumb-background);
2056
+ border: var(--usk-native-range-thumb-border);
2057
+ border-radius: var(--usk-native-range-thumb-radius);
2058
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2059
  }
1925
2060
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2061
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2062
  inline-size: 3rem;
1928
2063
  block-size: 2.4rem;
1929
2064
  padding: .2rem;
@@ -1932,84 +2067,86 @@
1932
2067
  border-radius: var(--usk-native-radius-sm);
1933
2068
  }
1934
2069
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2070
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2071
  padding: 0;
1937
2072
  }
1938
2073
 
1939
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
1940
- border: 0;
1941
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2074
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2075
+ border: var(--usk-native-color-swatch-border);
2076
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2077
  }
1943
2078
 
1944
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
1945
- border: 0;
1946
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2079
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2080
+ border: var(--usk-native-color-swatch-border);
2081
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2082
  }
1948
2083
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2084
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2085
 
1951
2086
  /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
1952
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1953
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2087
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2088
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2089
  margin-inline-end: .75rem;
1955
2090
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2091
  color: var(--usk-native-on-primary);
1957
- background: var(--usk-native-primary);
1958
- border: var(--usk-native-border-width) solid var(--usk-native-primary);
1959
- border-radius: var(--usk-native-radius-sm);
2092
+ background: var(--usk-native-file-button-background);
2093
+ border: var(--usk-native-file-button-border);
2094
+ border-radius: var(--usk-native-file-button-radius);
2095
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2096
  font-weight: 800;
1961
2097
  cursor: pointer;
1962
2098
  }
1963
2099
 
1964
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
1965
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
2100
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2101
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2102
  background: var(--usk-native-primary-hover);
1967
2103
  border-color: var(--usk-native-primary-hover);
1968
2104
  }
1969
2105
 
1970
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
1971
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
2106
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2107
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2108
  box-shadow: var(--usk-native-focus-ring);
1973
2109
  }
1974
2110
 
1975
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
1976
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
2111
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2112
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2113
  filter: brightness(.96);
1978
2114
  }
1979
2115
 
1980
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
1981
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
2116
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2117
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2118
  color: var(--usk-native-text-muted);
1983
2119
  background: var(--usk-native-surface-soft);
1984
2120
  border-color: var(--usk-native-border);
1985
2121
  cursor: not-allowed;
1986
2122
  }
1987
2123
 
1988
- [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
2124
+ [data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1989
2125
  background: var(--usk-native-surface-soft);
1990
2126
  }
1991
2127
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2128
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2129
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2130
  }
1995
2131
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2132
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2133
  border-color: var(--usk-native-success);
1998
2134
  }
1999
2135
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2136
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2137
  border-color: var(--usk-native-danger);
2002
2138
  }
2003
2139
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2140
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2141
+ background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
2005
2142
  accent-color: var(--usk-native-warning);
2006
2143
  }
2007
2144
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2145
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2146
  filter: brightness(.96);
2010
2147
  }
2011
2148
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2149
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2150
  color: var(--usk-native-text-muted);
2014
2151
  background: var(--usk-native-surface-soft);
2015
2152
  border-color: var(--usk-native-border);
@@ -2018,37 +2155,36 @@
2018
2155
  cursor: not-allowed;
2019
2156
  }
2020
2157
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2158
+ [data-ui][data-mode] :where(table) {
2022
2159
  width: 100%;
2023
2160
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2161
  background: var(--usk-native-surface);
2026
2162
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2163
  border-radius: var(--usk-native-radius);
2028
2164
  border-collapse: collapse;
2029
2165
  }
2030
2166
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2167
+ [data-ui][data-mode] :where(caption) {
2032
2168
  caption-side: bottom;
2033
2169
  padding: .75rem;
2034
2170
  color: var(--usk-native-text-muted);
2035
2171
  font-size: .9rem;
2036
2172
  }
2037
2173
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2174
+ [data-ui][data-mode] :where(th, td) {
2039
2175
  padding: .8rem .9rem;
2040
2176
  text-align: left;
2041
2177
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2178
  }
2043
2179
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2180
+ [data-ui][data-mode] :where(th) {
2045
2181
  color: var(--usk-native-text);
2046
2182
  background: var(--usk-native-surface-soft);
2047
2183
  }
2048
2184
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2185
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2186
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2187
+ [data-ui][data-mode] :where(details) {
2052
2188
  margin: 1rem 0;
2053
2189
  padding: .9rem 1rem;
2054
2190
  color: var(--usk-native-text);
@@ -2057,13 +2193,13 @@
2057
2193
  border-radius: var(--usk-native-radius);
2058
2194
  }
2059
2195
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2196
+ [data-ui][data-mode] :where(summary) {
2061
2197
  color: var(--usk-native-text);
2062
2198
  font-weight: 900;
2063
2199
  cursor: pointer;
2064
2200
  }
2065
2201
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2202
+ [data-ui][data-mode] :where(dialog) {
2067
2203
  max-width: min(92vw, 42rem);
2068
2204
  padding: 0;
2069
2205
  color: var(--usk-native-text);
@@ -2073,47 +2209,68 @@
2073
2209
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2210
  }
2075
2211
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2212
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2213
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2214
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2215
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2216
+ [data-ui][data-mode] :where(progress, meter) {
2217
+ -webkit-appearance: none;
2218
+ appearance: none;
2081
2219
  width: 100%;
2082
- min-height: .9rem;
2220
+ min-height: var(--usk-native-progress-size);
2083
2221
  accent-color: var(--usk-native-primary);
2084
2222
  }
2085
2223
 
2086
- [data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
2087
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
2088
- background: var(--usk-native-track);
2089
- border-radius: 999px;
2224
+ [data-ui][data-mode] :where(progress:not([value])) {
2225
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2226
+ background-size: 200% 100%;
2227
+ border: var(--usk-native-progress-track-border);
2228
+ border-radius: var(--usk-native-progress-track-radius);
2229
+ box-shadow: var(--usk-native-progress-track-shadow);
2230
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2231
  }
2091
2232
 
2092
- [data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
2093
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
2094
- background: var(--usk-native-track-fill);
2095
- border-radius: inherit;
2233
+ @keyframes usk-native-progress-indeterminate {
2234
+ to { background-position: -2rem 0; }
2096
2235
  }
2097
2236
 
2098
- [data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
2099
- [data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
2100
- background: var(--usk-native-track-fill);
2101
- border-radius: 999px;
2237
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2238
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2239
+ background: var(--usk-native-progress-track-background);
2240
+ border: var(--usk-native-progress-track-border);
2241
+ border-radius: var(--usk-native-progress-track-radius);
2242
+ box-shadow: var(--usk-native-progress-track-shadow);
2243
+ }
2244
+
2245
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2246
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2247
+ background: var(--usk-native-progress-value-background);
2248
+ border-radius: var(--usk-native-progress-value-radius);
2249
+ box-shadow: var(--usk-native-progress-value-shadow);
2250
+ }
2251
+
2252
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2253
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2254
+ background: var(--usk-native-progress-value-background);
2255
+ border-radius: var(--usk-native-progress-value-radius);
2256
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2257
  }
2103
2258
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2259
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2260
+
2261
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2262
+ background: var(--usk-native-meter-suboptimum-background);
2106
2263
  }
2107
2264
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2265
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2266
+ background: var(--usk-native-meter-critical-background);
2110
2267
  }
2111
2268
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2269
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2270
  color: var(--usk-native-text);
2114
2271
  }
2115
2272
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2273
+ [data-ui][data-mode] :where(article, aside) {
2117
2274
  padding: var(--usk-native-panel-padding);
2118
2275
  color: var(--usk-native-text);
2119
2276
  background: var(--usk-native-card-bg);
@@ -2122,113 +2279,132 @@
2122
2279
  box-shadow: var(--usk-native-shadow);
2123
2280
  }
2124
2281
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2282
+ [data-ui][data-mode] :where(dl) {
2126
2283
  margin: 0 0 1rem;
2127
2284
  color: var(--usk-native-text-muted);
2128
2285
  }
2129
2286
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2287
+ [data-ui][data-mode] :where(dt) {
2131
2288
  color: var(--usk-native-text);
2132
2289
  font-weight: 900;
2133
2290
  }
2134
2291
 
2135
- [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2136
- [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2137
- [data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2138
- [data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2139
- [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2140
- [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2141
- [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2142
- [data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2143
- [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2144
- [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2145
- [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2146
- [data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2147
- [data-ui][data-theme][data-mode] :where(datalist) { display: none; }
2148
-
2149
- [data-ui][data-theme][data-mode] :where(summary, li)::marker {
2292
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2293
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2294
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2295
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2296
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2297
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2298
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2299
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2300
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2301
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2302
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2303
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2304
+ [data-ui][data-mode] :where(datalist) { display: none; }
2305
+
2306
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2307
  color: var(--usk-native-indicator);
2151
2308
  }
2152
2309
 
2153
- [data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2154
- opacity: .78;
2310
+ [data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2311
+ opacity: var(--usk-native-indicator-opacity);
2312
+ filter: var(--usk-native-indicator-filter);
2155
2313
  accent-color: var(--usk-native-indicator);
2156
2314
  }
2157
2315
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2316
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2317
  accent-color: var(--usk-native-indicator);
2160
2318
  }
2161
2319
 
2162
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2163
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2320
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2321
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2322
  opacity: .72;
2165
2323
  }
2166
2324
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2325
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2326
  color: var(--usk-native-indicator);
2327
+ opacity: var(--usk-native-indicator-opacity);
2328
+ filter: var(--usk-native-indicator-filter);
2169
2329
  }
2170
2330
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2331
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2332
  outline: 3px solid var(--usk-native-focus);
2173
2333
  outline-offset: 3px;
2174
2334
  box-shadow: var(--usk-native-focus-ring);
2175
2335
  }
2176
2336
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2337
+ [data-ui][data-mode] :where(:target) {
2178
2338
  scroll-margin-top: 6rem;
2179
2339
  outline: 3px solid var(--usk-native-focus);
2180
2340
  outline-offset: .35rem;
2181
2341
  }
2182
2342
 
2183
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2343
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2344
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2345
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2346
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2347
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2348
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2349
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2350
 
2191
2351
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2352
+ [data-ui][data-mode] {
2193
2353
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2354
  }
2195
2355
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2356
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2357
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2358
  }
2199
2359
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2360
+ [data-ui][data-mode] :where(mark) {
2201
2361
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2362
  }
2203
2363
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2364
+ [data-ui][data-mode] :where(fieldset) {
2205
2365
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2366
  }
2207
2367
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2368
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2369
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2370
  }
2211
2371
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2372
+ [data-ui][data-mode] :where(th) {
2213
2373
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2374
  }
2215
2375
  }
2216
2376
 
2217
2377
  @media (prefers-reduced-motion: reduce) {
2218
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
2219
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2378
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2379
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2380
  transition-duration: 1ms !important;
2221
2381
  }
2382
+
2383
+ [data-ui][data-mode] :where(progress:not([value])) {
2384
+ animation: none;
2385
+ }
2386
+ }
2387
+
2388
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2389
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2390
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2391
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2392
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2393
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2394
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2395
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2396
+ box-shadow: none;
2397
+ filter: none;
2222
2398
  }
2223
2399
 
2224
2400
  @media (forced-colors: active) {
2225
2401
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2402
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2403
  forced-color-adjust: auto;
2228
2404
  }
2229
2405
  }
2230
2406
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2407
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2408
  border-color: Mark;
2233
2409
  }
2234
2410
  }
@@ -2244,7 +2420,7 @@
2244
2420
  ========================================================= */
2245
2421
 
2246
2422
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2423
+ [data-ui][data-mode] :where(
2248
2424
  h1,
2249
2425
  h2,
2250
2426
  h3,
@@ -2261,6 +2437,9 @@
2261
2437
  label,
2262
2438
  legend,
2263
2439
  summary,
2440
+ strong,
2441
+ small,
2442
+ em,
2264
2443
  code,
2265
2444
  kbd,
2266
2445
  samp,
@@ -2270,10 +2449,11 @@
2270
2449
  ) {
2271
2450
  max-inline-size: 100%;
2272
2451
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2452
+ overflow-wrap: break-word;
2453
+ word-break: normal;
2274
2454
  }
2275
2455
 
2276
- [data-ui][data-theme][data-mode] :where(
2456
+ [data-ui][data-mode] :where(
2277
2457
  [class~="saas-surface"],
2278
2458
  [class~="saas-surface-sm"],
2279
2459
  [class~="saas-surface-lg"],
@@ -2395,13 +2575,12 @@
2395
2575
  [class~="rg-alert"],
2396
2576
  [class~="rg-table-wrap"],
2397
2577
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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="industrial-utility"])[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); }
@@ -3533,6 +3780,29 @@
3533
3780
  --lightningcss-light: initial;
3534
3781
  --lightningcss-dark: ;
3535
3782
  color-scheme: light;
3783
+ --utility-fallback-bg-rgb: 245 243 239;
3784
+ --utility-fallback-surface-rgb: 255 255 255;
3785
+ --utility-fallback-surface-strong-rgb: 251 250 248;
3786
+ --utility-fallback-surface-soft-rgb: 228 224 218;
3787
+ --utility-fallback-text-rgb: 24 21 18;
3788
+ --utility-fallback-text-muted-rgb: 98 91 84;
3789
+ --utility-fallback-border-rgb: 184 178 169;
3790
+ --utility-fallback-primary-rgb: 183 78 22;
3791
+ --utility-fallback-primary-hover-rgb: 142 63 18;
3792
+ --utility-fallback-primary-text-rgb: 255 255 255;
3793
+ --utility-fallback-secondary-rgb: 43 43 43;
3794
+ --utility-fallback-secondary-hover-rgb: 27 27 27;
3795
+ --utility-fallback-secondary-text-rgb: 255 255 255;
3796
+ --utility-fallback-accent-rgb: 225 139 61;
3797
+ --utility-fallback-accent-text-rgb: 0 0 0;
3798
+ --utility-fallback-success-rgb: 47 125 84;
3799
+ --utility-fallback-success-text-rgb: 255 255 255;
3800
+ --utility-fallback-warning-rgb: 164 106 0;
3801
+ --utility-fallback-warning-text-rgb: 0 0 0;
3802
+ --utility-fallback-danger-rgb: 178 60 60;
3803
+ --utility-fallback-danger-text-rgb: 255 255 255;
3804
+ --utility-fallback-link-rgb: 142 63 18;
3805
+ --utility-fallback-focus-rgb: 225 139 61;
3536
3806
  --utility-panel-alpha: .98;
3537
3807
  --utility-panel-soft-alpha: .78;
3538
3808
  --utility-border-alpha: .58;
@@ -3544,6 +3814,29 @@
3544
3814
  --lightningcss-light: ;
3545
3815
  --lightningcss-dark: initial;
3546
3816
  color-scheme: dark;
3817
+ --utility-fallback-bg-rgb: 13 12 11;
3818
+ --utility-fallback-surface-rgb: 26 26 26;
3819
+ --utility-fallback-surface-strong-rgb: 43 43 43;
3820
+ --utility-fallback-surface-soft-rgb: 18 17 16;
3821
+ --utility-fallback-text-rgb: 247 242 235;
3822
+ --utility-fallback-text-muted-rgb: 197 188 177;
3823
+ --utility-fallback-border-rgb: 89 81 73;
3824
+ --utility-fallback-primary-rgb: 255 138 61;
3825
+ --utility-fallback-primary-hover-rgb: 255 174 113;
3826
+ --utility-fallback-primary-text-rgb: 0 0 0;
3827
+ --utility-fallback-secondary-rgb: 198 191 182;
3828
+ --utility-fallback-secondary-hover-rgb: 227 222 215;
3829
+ --utility-fallback-secondary-text-rgb: 0 0 0;
3830
+ --utility-fallback-accent-rgb: 255 179 107;
3831
+ --utility-fallback-accent-text-rgb: 0 0 0;
3832
+ --utility-fallback-success-rgb: 139 223 178;
3833
+ --utility-fallback-success-text-rgb: 0 0 0;
3834
+ --utility-fallback-warning-rgb: 255 210 122;
3835
+ --utility-fallback-warning-text-rgb: 0 0 0;
3836
+ --utility-fallback-danger-rgb: 255 152 152;
3837
+ --utility-fallback-danger-text-rgb: 0 0 0;
3838
+ --utility-fallback-link-rgb: 255 179 107;
3839
+ --utility-fallback-focus-rgb: 255 154 66;
3547
3840
  --utility-panel-alpha: .92;
3548
3841
  --utility-panel-soft-alpha: .64;
3549
3842
  --utility-border-alpha: .52;
@@ -3555,6 +3848,29 @@
3555
3848
  --lightningcss-light: ;
3556
3849
  --lightningcss-dark: initial;
3557
3850
  color-scheme: dark;
3851
+ --utility-fallback-bg-rgb: 0 0 0;
3852
+ --utility-fallback-surface-rgb: 10 9 8;
3853
+ --utility-fallback-surface-strong-rgb: 23 19 17;
3854
+ --utility-fallback-surface-soft-rgb: 0 0 0;
3855
+ --utility-fallback-text-rgb: 255 255 255;
3856
+ --utility-fallback-text-muted-rgb: 247 241 234;
3857
+ --utility-fallback-border-rgb: 255 255 255;
3858
+ --utility-fallback-primary-rgb: 255 154 66;
3859
+ --utility-fallback-primary-hover-rgb: 255 255 255;
3860
+ --utility-fallback-primary-text-rgb: 0 0 0;
3861
+ --utility-fallback-secondary-rgb: 244 241 236;
3862
+ --utility-fallback-secondary-hover-rgb: 255 255 255;
3863
+ --utility-fallback-secondary-text-rgb: 0 0 0;
3864
+ --utility-fallback-accent-rgb: 255 195 111;
3865
+ --utility-fallback-accent-text-rgb: 0 0 0;
3866
+ --utility-fallback-success-rgb: 0 255 144;
3867
+ --utility-fallback-success-text-rgb: 0 0 0;
3868
+ --utility-fallback-warning-rgb: 255 212 0;
3869
+ --utility-fallback-warning-text-rgb: 0 0 0;
3870
+ --utility-fallback-danger-rgb: 255 92 92;
3871
+ --utility-fallback-danger-text-rgb: 0 0 0;
3872
+ --utility-fallback-link-rgb: 255 179 107;
3873
+ --utility-fallback-focus-rgb: 255 255 255;
3558
3874
  --utility-panel-alpha: 1;
3559
3875
  --utility-panel-soft-alpha: .92;
3560
3876
  --utility-border-alpha: 1;
@@ -3577,15 +3893,42 @@
3577
3893
  --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
3894
  --utility-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
3895
  --utility-accent-rgb: var(--usk-accent-rgb);
3580
- --utility-success-rgb: var(--usk-success-rgb);
3581
- --utility-warning-rgb: var(--usk-warning-rgb);
3582
- --utility-danger-rgb: var(--usk-danger-rgb);
3583
- --utility-link-rgb: var(--usk-link-rgb);
3584
3896
  --utility-accent-text-rgb: var(--usk-accent-text-rgb);
3897
+ --utility-success-rgb: var(--usk-success-rgb);
3585
3898
  --utility-success-text-rgb: var(--usk-success-text-rgb);
3899
+ --utility-warning-rgb: var(--usk-warning-rgb);
3586
3900
  --utility-warning-text-rgb: var(--usk-warning-text-rgb);
3901
+ --utility-danger-rgb: var(--usk-danger-rgb);
3587
3902
  --utility-danger-text-rgb: var(--usk-danger-text-rgb);
3903
+ --utility-link-rgb: var(--usk-link-rgb);
3588
3904
  --utility-focus-rgb: var(--usk-focus-rgb);
3905
+ }
3906
+
3907
+ [data-ui="industrial-utility"][data-mode] {
3908
+ --usk-native-bg: var(--utility-bg);
3909
+ --utility-bg-rgb: var(--usk-bg-rgb, var(--utility-fallback-bg-rgb));
3910
+ --utility-surface-rgb: var(--usk-surface-rgb, var(--utility-fallback-surface-rgb));
3911
+ --utility-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--utility-fallback-surface-strong-rgb));
3912
+ --utility-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--utility-fallback-surface-soft-rgb));
3913
+ --utility-text-rgb: var(--usk-text-rgb, var(--utility-fallback-text-rgb));
3914
+ --utility-text-muted-rgb: var(--usk-text-muted-rgb, var(--utility-fallback-text-muted-rgb));
3915
+ --utility-border-rgb: var(--usk-border-rgb, var(--utility-fallback-border-rgb));
3916
+ --utility-primary-rgb: var(--usk-primary-rgb, var(--utility-fallback-primary-rgb));
3917
+ --utility-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--utility-fallback-primary-hover-rgb));
3918
+ --utility-primary-text-rgb: var(--usk-primary-text-rgb, var(--utility-fallback-primary-text-rgb));
3919
+ --utility-secondary-rgb: var(--usk-secondary-rgb, var(--utility-fallback-secondary-rgb));
3920
+ --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--utility-fallback-secondary-hover-rgb));
3921
+ --utility-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--utility-fallback-secondary-text-rgb));
3922
+ --utility-accent-rgb: var(--usk-accent-rgb, var(--utility-fallback-accent-rgb));
3923
+ --utility-accent-text-rgb: var(--usk-accent-text-rgb, var(--utility-fallback-accent-text-rgb));
3924
+ --utility-success-rgb: var(--usk-success-rgb, var(--utility-fallback-success-rgb));
3925
+ --utility-success-text-rgb: var(--usk-success-text-rgb, var(--utility-fallback-success-text-rgb));
3926
+ --utility-warning-rgb: var(--usk-warning-rgb, var(--utility-fallback-warning-rgb));
3927
+ --utility-warning-text-rgb: var(--usk-warning-text-rgb, var(--utility-fallback-warning-text-rgb));
3928
+ --utility-danger-rgb: var(--usk-danger-rgb, var(--utility-fallback-danger-rgb));
3929
+ --utility-danger-text-rgb: var(--usk-danger-text-rgb, var(--utility-fallback-danger-text-rgb));
3930
+ --utility-link-rgb: var(--usk-link-rgb, var(--utility-fallback-link-rgb));
3931
+ --utility-focus-rgb: var(--usk-focus-rgb, var(--utility-fallback-focus-rgb));
3589
3932
  --usk-native-surface: var(--utility-surface);
3590
3933
  --usk-native-surface-strong: var(--utility-surface-strong);
3591
3934
  --usk-native-surface-soft: var(--utility-surface-soft);
@@ -3615,6 +3958,57 @@
3615
3958
  --usk-native-border-width: 1px;
3616
3959
  --usk-native-field-gap: .5rem;
3617
3960
  --usk-native-panel-padding: var(--utility-space-5);
3961
+ --usk-native-control-min-block-size: 2.75rem;
3962
+ --usk-native-control-padding-block: .74rem;
3963
+ --usk-native-control-padding-inline: 1rem;
3964
+ --usk-native-subcontrol-padding-block: .58rem;
3965
+ --usk-native-subcontrol-padding-inline: .8rem;
3966
+ --usk-native-choice-size: 1.35rem;
3967
+ --usk-native-choice-background: var(--utility-control-bg);
3968
+ --usk-native-choice-border: 2px solid var(--utility-border);
3969
+ --usk-native-checkbox-radius: .08rem;
3970
+ --usk-native-radio-radius: .08rem;
3971
+ --usk-native-choice-shadow: 2px 2px 0 #0000004d;
3972
+ --usk-native-choice-checked-background: var(--utility-primary);
3973
+ --usk-native-choice-mark-color: var(--utility-on-primary);
3974
+ --usk-native-select-indicator-image: linear-gradient(66deg, transparent 50%, var(--utility-primary) 50%), linear-gradient(114deg, var(--utility-primary) 50%, transparent 50%);
3975
+ --usk-native-select-indicator-size: .46rem .46rem, .46rem .46rem;
3976
+ --usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .78rem) 50%;
3977
+ --usk-native-select-padding-inline-end: 2.4rem;
3978
+ --usk-native-range-track-size: .7rem;
3979
+ --usk-native-range-track-background: var(--utility-surface-soft);
3980
+ --usk-native-range-track-border: 2px solid var(--utility-border);
3981
+ --usk-native-range-track-radius: .06rem;
3982
+ --usk-native-range-track-shadow: 2px 2px 0 #0000004d;
3983
+ --usk-native-range-progress-background: var(--utility-primary);
3984
+ --usk-native-range-thumb-size: 1.25rem;
3985
+ --usk-native-range-thumb-background: var(--utility-surface-strong);
3986
+ --usk-native-range-thumb-border: 2px solid var(--utility-border);
3987
+ --usk-native-range-thumb-radius: .08rem;
3988
+ --usk-native-range-thumb-shadow: 2px 2px 0 #0000004d;
3989
+ --usk-native-progress-size: .76rem;
3990
+ --usk-native-progress-track-background: var(--utility-surface-soft);
3991
+ --usk-native-progress-track-border: 2px solid var(--utility-border);
3992
+ --usk-native-progress-track-radius: .06rem;
3993
+ --usk-native-progress-track-shadow: 2px 2px 0 #0000004d;
3994
+ --usk-native-progress-value-background: var(--utility-primary);
3995
+ --usk-native-progress-value-radius: .06rem;
3996
+ --usk-native-progress-value-shadow: 2px 2px 0 #0000004d;
3997
+ --usk-native-meter-optimum-background: var(--utility-success);
3998
+ --usk-native-meter-suboptimum-background: var(--utility-warning);
3999
+ --usk-native-meter-critical-background: var(--utility-danger);
4000
+ --usk-native-file-button-background: var(--utility-primary);
4001
+ --usk-native-file-button-border: 2px solid var(--utility-border);
4002
+ --usk-native-file-button-radius: .08rem;
4003
+ --usk-native-file-button-shadow: 2px 2px 0 #0000004d;
4004
+ --usk-native-color-swatch-border: 2px solid var(--utility-border);
4005
+ --usk-native-color-swatch-radius: .08rem;
4006
+ --usk-native-indicator-opacity: .87;
4007
+ --usk-native-indicator-filter: none;
4008
+ --usk-native-scrollbar-size: .85rem;
4009
+ --usk-native-scrollbar-track: var(--utility-surface-soft);
4010
+ --usk-native-scrollbar-thumb: var(--utility-primary);
4011
+ --usk-native-scrollbar-radius: .06rem;
3618
4012
  --utility-bg: rgb(var(--utility-bg-rgb));
3619
4013
  --utility-surface: rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha));
3620
4014
  --utility-surface-strong: rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha));
@@ -3655,7 +4049,7 @@
3655
4049
  }
3656
4050
 
3657
4051
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="industrial-utility"][data-theme][data-mode] {
4052
+ [data-ui="industrial-utility"][data-mode] {
3659
4053
  --utility-border: color-mix(in srgb, rgb(var(--utility-border-rgb) / max(var(--utility-border-alpha), var(--usk-border-min-alpha))), var(--utility-text) var(--usk-border-text-mix));
3660
4054
  }
3661
4055
  }
@@ -3670,11 +4064,7 @@
3670
4064
  line-height: 1.5;
3671
4065
  }
3672
4066
 
3673
- [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
3674
- box-sizing: border-box;
3675
- }
3676
-
3677
- [data-ui="industrial-utility"][data-theme][data-mode] {
4067
+ [data-ui="industrial-utility"][data-mode] {
3678
4068
  background: var(--utility-theme-bg);
3679
4069
  background-size: var(--utility-theme-bg-size);
3680
4070
  }
@@ -3801,34 +4191,16 @@
3801
4191
  box-shadow: inset 0 3px 10px #0000002e;
3802
4192
  }
3803
4193
 
3804
- .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
3805
- background: var(--utility-primary);
3806
- color: var(--utility-on-primary);
3807
- border-color: var(--utility-primary);
3808
- }
3809
-
3810
4194
  .utility-button-primary:hover, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]):hover {
3811
4195
  background: var(--utility-primary-hover);
3812
4196
  border-color: var(--utility-primary-hover);
3813
4197
  }
3814
4198
 
3815
- .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
3816
- background: var(--utility-secondary);
3817
- color: var(--utility-on-secondary);
3818
- border-color: var(--utility-secondary);
3819
- }
3820
-
3821
4199
  .utility-button-secondary:hover, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3822
4200
  background: var(--utility-secondary-hover);
3823
4201
  border-color: var(--utility-secondary-hover);
3824
4202
  }
3825
4203
 
3826
- .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
3827
- background: var(--utility-danger);
3828
- color: var(--utility-on-danger);
3829
- border-color: var(--utility-danger);
3830
- }
3831
-
3832
4204
  .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
3833
4205
  color: var(--utility-text);
3834
4206
  box-shadow: none;
@@ -3851,7 +4223,7 @@
3851
4223
  background: var(--utility-card-bg);
3852
4224
  }
3853
4225
 
3854
- .utility-toolbar, .utility-table-wrap, .utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-ghost), .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-toolbar, :where([data-ui="industrial-utility"]) .ui-table-wrap, :where([data-ui="industrial-utility"]) .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="industrial-utility"]) .ui-icon-button {
4226
+ .utility-toolbar, .utility-table-wrap, .utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-guarded), .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-toolbar, :where([data-ui="industrial-utility"]) .ui-table-wrap, :where([data-ui="industrial-utility"]) .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"])):not(.utility-button-guarded), :where([data-ui="industrial-utility"]) .ui-icon-button {
3855
4227
  background: var(--utility-control-bg);
3856
4228
  }
3857
4229
 
@@ -4142,18 +4514,10 @@
4142
4514
  display: grid;
4143
4515
  }
4144
4516
 
4145
- .utility-alert-success, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="success"]) {
4146
- border-left-color: var(--utility-success);
4147
- }
4148
-
4149
4517
  .utility-alert-warning, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="warning"]) {
4150
4518
  border-left-color: var(--utility-warning);
4151
4519
  }
4152
4520
 
4153
- .utility-alert-danger, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
4154
- border-left-color: var(--utility-danger);
4155
- }
4156
-
4157
4521
  .utility-alert-title, :where([data-ui="industrial-utility"]) .ui-alert-title {
4158
4522
  margin: 0;
4159
4523
  font-weight: 900;
@@ -4472,7 +4836,6 @@
4472
4836
  border-radius: var(--utility-radius-lg);
4473
4837
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4474
4838
  display: grid;
4475
- overflow: hidden;
4476
4839
  }
4477
4840
 
4478
4841
  .utility-feature-item {
@@ -4601,7 +4964,7 @@
4601
4964
  letter-spacing: .01em;
4602
4965
  }
4603
4966
 
4604
- [data-ui="industrial-utility"][data-theme][data-mode] {
4967
+ [data-ui="industrial-utility"][data-mode] {
4605
4968
  --utility-theme-bg: linear-gradient(90deg, rgb(var(--utility-border-rgb) / .1) 1px, transparent 1px), linear-gradient(rgb(var(--utility-border-rgb) / .08) 1px, transparent 1px), var(--utility-bg);
4606
4969
  --utility-theme-bg-size: 3rem 3rem;
4607
4970
  --utility-card-bg: linear-gradient(180deg, rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha)), rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha)));
@@ -4704,6 +5067,7 @@
4704
5067
  clip-path: polygon(.62rem 0, calc(100% - .62rem) 0, 100% .62rem, 100% calc(100% - .62rem), calc(100% - .62rem) 100%, .62rem 100%, 0 calc(100% - .62rem), 0 .62rem);
4705
5068
  justify-content: center;
4706
5069
  justify-self: start;
5070
+ min-block-size: 2.75rem;
4707
5071
  min-inline-size: 6rem;
4708
5072
  max-inline-size: 100%;
4709
5073
  }
@@ -4721,13 +5085,13 @@
4721
5085
  box-shadow: inset .34rem 0 0 rgb(var(--utility-primary-rgb)/.24);
4722
5086
  }
4723
5087
 
4724
- [data-ui="industrial-utility"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5088
+ [data-ui="industrial-utility"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4725
5089
  border: 2px solid var(--utility-primary);
4726
5090
  border-radius: var(--utility-radius-sm);
4727
5091
  box-shadow: inset .28rem 0 0 rgb(var(--utility-primary-rgb)/.24);
4728
5092
  }
4729
5093
 
4730
- [data-ui="industrial-utility"][data-theme][data-mode] :where(dialog) {
5094
+ [data-ui="industrial-utility"][data-mode] :where(dialog) {
4731
5095
  border: 2px solid var(--utility-border);
4732
5096
  border-radius: var(--utility-radius-sm);
4733
5097
  box-shadow: inset .4rem 0 0 rgb(var(--utility-primary-rgb)/.26),0 1rem 2rem rgb(var(--utility-text-rgb)/.2);
@@ -4750,6 +5114,204 @@
4750
5114
  box-shadow: inset 0 0 0 .12em #00000029;
4751
5115
  }
4752
5116
 
5117
+ [data-ui="industrial-utility"][data-mode] {
5118
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, "Segoe UI", sans-serif;
5119
+ --usk-native-control-min-block-size: 2.72rem;
5120
+ --usk-native-control-padding-block: .6rem;
5121
+ --usk-native-control-padding-inline: .9rem;
5122
+ --usk-native-border-width: 2px;
5123
+ --usk-native-radius-sm: .12rem;
5124
+ --usk-native-radius: .2rem;
5125
+ --usk-native-radius-lg: .3rem;
5126
+ --usk-native-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .72), 0 2px 0 rgb(var(--utility-text-rgb) / .28);
5127
+ --usk-native-shadow-md: inset 0 0 0 1px rgb(var(--utility-surface-strong-rgb) / .5), 0 .55rem 1rem rgb(var(--utility-text-rgb) / .2);
5128
+ --usk-native-focus-ring: 0 0 0 2px var(--utility-surface), 0 0 0 4px var(--utility-focus);
5129
+ --usk-native-subcontrol-padding-block: .46rem;
5130
+ --usk-native-subcontrol-padding-inline: .66rem;
5131
+ --usk-native-choice-size: 1.22rem;
5132
+ --usk-native-choice-background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-control-bg));
5133
+ --usk-native-choice-border: 2px solid var(--utility-border);
5134
+ --usk-native-checkbox-radius: .08rem;
5135
+ --usk-native-radio-radius: 50%;
5136
+ --usk-native-choice-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .22);
5137
+ --usk-native-choice-checked-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
5138
+ --usk-native-choice-mark-color: var(--utility-on-primary);
5139
+ --usk-native-select-indicator-image: linear-gradient(60deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%), linear-gradient(120deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%);
5140
+ --usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
5141
+ --usk-native-select-indicator-position: calc(100% - 1.06rem) 50%, calc(100% - .7rem) 50%;
5142
+ --usk-native-select-padding-inline-end: 2.3rem;
5143
+ --usk-native-range-track-size: .64rem;
5144
+ --usk-native-range-track-background: linear-gradient(90deg, var(--utility-success) 0 58%, var(--utility-warning) 58% 78%, var(--utility-danger) 78%);
5145
+ --usk-native-range-track-border: 2px inset var(--utility-border);
5146
+ --usk-native-range-track-radius: .06rem;
5147
+ --usk-native-range-track-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .3);
5148
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--utility-success), var(--utility-primary));
5149
+ --usk-native-range-thumb-size: 1.26rem;
5150
+ --usk-native-range-thumb-background: linear-gradient(90deg, var(--utility-surface), var(--utility-surface-strong), var(--utility-surface));
5151
+ --usk-native-range-thumb-border: 2px outset var(--utility-border);
5152
+ --usk-native-range-thumb-radius: .1rem;
5153
+ --usk-native-range-thumb-shadow: 1px 2px 0 rgb(var(--utility-text-rgb) / .3);
5154
+ --usk-native-progress-size: .82rem;
5155
+ --usk-native-progress-track-background: var(--utility-control-bg);
5156
+ --usk-native-progress-track-border: 2px inset var(--utility-border);
5157
+ --usk-native-progress-track-radius: .06rem;
5158
+ --usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb) / .32);
5159
+ --usk-native-progress-value-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
5160
+ --usk-native-progress-value-radius: .03rem;
5161
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .42);
5162
+ --usk-native-scrollbar-size: .86rem;
5163
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--utility-control-bg), var(--utility-surface));
5164
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, var(--utility-surface), var(--utility-primary), var(--utility-surface));
5165
+ --usk-native-scrollbar-radius: .08rem;
5166
+ }
5167
+
5168
+ .utility-title {
5169
+ letter-spacing: max(.04em, .5px);
5170
+ margin-block: .75rem;
5171
+ font-weight: 950;
5172
+ }
5173
+
5174
+ .utility-label, :where([data-ui="industrial-utility"]) .ui-label {
5175
+ font-size: .74rem;
5176
+ font-weight: 900;
5177
+ }
5178
+
5179
+ .utility-card, .utility-panel, :where([data-ui="industrial-utility"]) .ui-card {
5180
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-card-bg));
5181
+ border: 3px double var(--utility-border);
5182
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.8),0 .45rem .9rem rgb(var(--utility-text-rgb)/.2);
5183
+ border-radius: .28rem;
5184
+ padding: 1rem;
5185
+ }
5186
+
5187
+ .utility-well, .utility-inset {
5188
+ background: var(--utility-control-bg);
5189
+ border: 2px inset var(--utility-border);
5190
+ box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb)/.25);
5191
+ border-radius: .12rem;
5192
+ padding: .76rem;
5193
+ }
5194
+
5195
+ .utility-button, .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button {
5196
+ background: linear-gradient(180deg,var(--utility-surface-strong),transparent),var(--utility-control-bg);
5197
+ border: 2px outset var(--utility-border);
5198
+ min-height: 2.72rem;
5199
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.82),0 2px 0 rgb(var(--utility-text-rgb)/.3);
5200
+ border-radius: .12rem;
5201
+ padding: .6rem .9rem;
5202
+ font-weight: 900;
5203
+ }
5204
+
5205
+ .utility-button:active, .utility-button[aria-pressed="true"], .utility-button.is-active, :where([data-ui="industrial-utility"]) .ui-button:active, :where([data-ui="industrial-utility"]) .ui-button[aria-pressed="true"], :where([data-ui="industrial-utility"]) .ui-button.is-active {
5206
+ box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb)/.3);
5207
+ border-style: inset;
5208
+ transform: translateY(2px);
5209
+ }
5210
+
5211
+ .utility-input, .utility-textarea, .utility-select, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-textarea, :where([data-ui="industrial-utility"]) .ui-select {
5212
+ background: var(--utility-control-bg);
5213
+ border: 2px inset var(--utility-border);
5214
+ min-height: 2.45rem;
5215
+ box-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb)/.2);
5216
+ border-radius: .1rem;
5217
+ padding: .5rem .68rem;
5218
+ }
5219
+
5220
+ .utility-nav, .utility-toolbar, :where([data-ui="industrial-utility"]) .ui-nav, :where([data-ui="industrial-utility"]) .ui-toolbar {
5221
+ border: 3px double var(--utility-border);
5222
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.7);
5223
+ border-radius: .22rem;
5224
+ }
5225
+
5226
+ .utility-nav-link, :where([data-ui="industrial-utility"]) .ui-nav-link {
5227
+ border-block-end: 2px solid #0000;
5228
+ border-radius: .08rem;
5229
+ }
5230
+
5231
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
5232
+ border: 2px outset var(--utility-border);
5233
+ min-height: 1.58rem;
5234
+ box-shadow: 1px 2px 0 rgb(var(--utility-text-rgb)/.24);
5235
+ border-radius: .08rem;
5236
+ padding: .28rem .5rem;
5237
+ }
5238
+
5239
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
5240
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-surface));
5241
+ border: 2px solid var(--utility-border);
5242
+ box-shadow: inset .35rem 0 0 currentColor,0 3px 0 rgb(var(--utility-text-rgb)/.2);
5243
+ border-radius: .18rem;
5244
+ padding: .72rem .84rem;
5245
+ }
5246
+
5247
+ .utility-progress, :where([data-ui="industrial-utility"]) .ui-progress {
5248
+ background: var(--utility-control-bg);
5249
+ border: 2px inset var(--utility-border);
5250
+ border-radius: .06rem;
5251
+ height: .82rem;
5252
+ }
5253
+
5254
+ .utility-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress-bar {
5255
+ background: linear-gradient(180deg,var(--utility-primary-hover),var(--utility-primary));
5256
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.42);
5257
+ border-radius: .03rem;
5258
+ }
5259
+
5260
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
5261
+ background: var(--utility-card-bg);
5262
+ border: 3px double var(--utility-border);
5263
+ box-shadow: 0 .45rem .9rem rgb(var(--utility-text-rgb)/.18);
5264
+ border-radius: .24rem;
5265
+ }
5266
+
5267
+ .utility-table, :where([data-ui="industrial-utility"]) .ui-table {
5268
+ border-collapse: collapse;
5269
+ font-variant-numeric: tabular-nums;
5270
+ }
5271
+
5272
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
5273
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-surface-soft));
5274
+ border: 1px solid var(--utility-border);
5275
+ padding: .58rem .66rem;
5276
+ font-weight: 900;
5277
+ }
5278
+
5279
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
5280
+ border: 1px solid var(--utility-border);
5281
+ padding: .54rem .66rem;
5282
+ }
5283
+
5284
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5285
+ border: 2px outset var(--utility-border);
5286
+ box-shadow: 0 3px 0 rgb(var(--utility-text-rgb)/.26);
5287
+ border-radius: .12rem;
5288
+ }
5289
+
5290
+ .utility-card-service, .utility-card-feature, .utility-media-scrim, .utility-feature-strip, .utility-callout-bar {
5291
+ border: 3px double var(--utility-border);
5292
+ box-shadow: inset .32rem 0 0 rgb(var(--utility-primary-rgb)/.3),0 .45rem .9rem rgb(var(--utility-text-rgb)/.18);
5293
+ border-radius: .24rem;
5294
+ }
5295
+
5296
+ [data-ui="industrial-utility"][data-mode] {
5297
+ --usk-native-card-bg: repeating-linear-gradient(90deg, rgb(var(--utility-text-rgb) / .035) 0 1px, transparent 1px 6px), linear-gradient(rgb(var(--utility-success-rgb) / .12), rgb(var(--utility-success-rgb) / .12)), var(--utility-surface);
5298
+ --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, var(--utility-surface-soft) 45% 100%);
5299
+ }
5300
+
5301
+ @supports (color: color-mix(in srgb,black,white)) {
5302
+ [data-ui="industrial-utility"][data-mode] {
5303
+ --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, color-mix(in srgb, var(--utility-surface-soft) 82%, var(--utility-text)) 45% 100%);
5304
+ }
5305
+ }
5306
+
5307
+ .utility-panel, .utility-card-service, .utility-feature-strip, .utility-callout-bar {
5308
+ background: repeating-linear-gradient(90deg,rgb(var(--utility-text-rgb)/.035)0 1px,transparent 1px 6px),linear-gradient(rgb(var(--utility-success-rgb)/.12),rgb(var(--utility-success-rgb)/.12)),var(--utility-card-bg);
5309
+ }
5310
+
5311
+ [data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) {
5312
+ background: repeating-linear-gradient(90deg,rgb(var(--utility-text-rgb)/.035)0 1px,transparent 1px 6px),linear-gradient(rgb(var(--utility-success-rgb)/.12),rgb(var(--utility-success-rgb)/.12)),var(--utility-surface);
5313
+ }
5314
+
4753
5315
  @media (prefers-reduced-motion: reduce) {
4754
5316
  [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
4755
5317
  scroll-behavior: auto !important;
@@ -4794,4 +5356,1904 @@
4794
5356
  color: #000 !important;
4795
5357
  }
4796
5358
  }
5359
+
5360
+ .utility-input[aria-invalid="true"], .utility-textarea[aria-invalid="true"], .utility-select[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-input[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-textarea[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-select[aria-invalid="true"] {
5361
+ border-color: var(--utility-danger);
5362
+ box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb)/.2);
5363
+ }
5364
+
5365
+ .utility-input[readonly], .utility-textarea[readonly], :where([data-ui="industrial-utility"]) .ui-input[readonly], :where([data-ui="industrial-utility"]) .ui-textarea[readonly] {
5366
+ filter: saturate(.72);
5367
+ opacity: .78;
5368
+ border-style: dashed;
5369
+ }
5370
+
5371
+ .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
5372
+ background: var(--utility-primary);
5373
+ color: var(--utility-on-primary);
5374
+ border-color: var(--utility-primary);
5375
+ }
5376
+
5377
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
5378
+ background: var(--utility-secondary);
5379
+ color: var(--utility-on-secondary);
5380
+ border-color: var(--utility-secondary);
5381
+ }
5382
+
5383
+ .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
5384
+ background: var(--utility-danger);
5385
+ color: var(--utility-on-danger);
5386
+ border-color: var(--utility-danger);
5387
+ }
5388
+
5389
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
5390
+ color: var(--utility-primary);
5391
+ background: none;
5392
+ border-color: #0000;
5393
+ }
5394
+
5395
+ .utility-feature-item > .utility-icon-medallion {
5396
+ font-size: 1.5rem;
5397
+ line-height: 1;
5398
+ }
5399
+
5400
+ .utility-callout-bar > .utility-icon-medallion {
5401
+ min-block-size: 4.5rem;
5402
+ min-inline-size: 4.5rem;
5403
+ font-size: 2rem;
5404
+ font-weight: 800;
5405
+ line-height: 1;
5406
+ }
5407
+
5408
+ [data-ui="industrial-utility"][data-mode="dark"] {
5409
+ --utility-fallback-bg-rgb: 11 17 19;
5410
+ --utility-fallback-surface-rgb: 24 33 36;
5411
+ --utility-fallback-surface-strong-rgb: 34 44 47;
5412
+ --utility-fallback-surface-soft-rgb: 14 21 23;
5413
+ --utility-fallback-text-rgb: 214 217 213;
5414
+ --utility-fallback-text-muted-rgb: 169 176 174;
5415
+ --utility-fallback-border-rgb: 96 106 109;
5416
+ --utility-fallback-primary-rgb: 244 194 13;
5417
+ --utility-fallback-primary-hover-rgb: 255 213 47;
5418
+ --utility-fallback-primary-text-rgb: 17 20 22;
5419
+ --utility-fallback-secondary-rgb: 104 113 116;
5420
+ --utility-fallback-secondary-text-rgb: 255 255 255;
5421
+ --utility-fallback-accent-rgb: 95 157 204;
5422
+ --utility-fallback-accent-text-rgb: 0 0 0;
5423
+ --utility-fallback-success-rgb: 117 196 71;
5424
+ --utility-fallback-success-text-rgb: 0 0 0;
5425
+ --utility-fallback-warning-rgb: 244 194 13;
5426
+ --utility-fallback-warning-text-rgb: 17 20 22;
5427
+ --utility-fallback-danger-rgb: 199 58 35;
5428
+ --utility-fallback-danger-text-rgb: 255 244 236;
5429
+ --utility-fallback-link-rgb: 95 157 204;
5430
+ --utility-fallback-focus-rgb: 244 194 13;
5431
+ --utility-material-steel: rgb(var(--usk-border-rgb, 104 113 116));
5432
+ --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 161 168 167));
5433
+ --utility-material-input: rgb(var(--usk-surface-rgb, 17 25 27));
5434
+ --utility-material-header: rgb(var(--usk-industrial-header-rgb, 12 18 20));
5435
+ --utility-material-shadow-opacity: .48;
5436
+ }
5437
+
5438
+ [data-ui="industrial-utility"][data-mode="light"] {
5439
+ --utility-fallback-bg-rgb: 201 198 189;
5440
+ --utility-fallback-surface-rgb: 231 227 217;
5441
+ --utility-fallback-surface-strong-rgb: 242 239 231;
5442
+ --utility-fallback-surface-soft-rgb: 195 193 186;
5443
+ --utility-fallback-text-rgb: 30 35 37;
5444
+ --utility-fallback-text-muted-rgb: 69 75 76;
5445
+ --utility-fallback-border-rgb: 104 108 107;
5446
+ --utility-fallback-primary-rgb: 242 183 5;
5447
+ --utility-fallback-primary-hover-rgb: 255 213 47;
5448
+ --utility-fallback-primary-text-rgb: 18 23 25;
5449
+ --utility-fallback-secondary-rgb: 119 123 122;
5450
+ --utility-fallback-secondary-text-rgb: 0 0 0;
5451
+ --utility-fallback-accent-rgb: 60 112 151;
5452
+ --utility-fallback-accent-text-rgb: 255 255 255;
5453
+ --utility-fallback-success-rgb: 77 143 45;
5454
+ --utility-fallback-success-text-rgb: 0 0 0;
5455
+ --utility-fallback-warning-rgb: 242 183 5;
5456
+ --utility-fallback-warning-text-rgb: 18 23 25;
5457
+ --utility-fallback-danger-rgb: 185 39 23;
5458
+ --utility-fallback-danger-text-rgb: 255 249 245;
5459
+ --utility-fallback-link-rgb: 60 112 151;
5460
+ --utility-fallback-focus-rgb: 155 101 0;
5461
+ --utility-material-steel: rgb(var(--usk-border-rgb, 119 123 122));
5462
+ --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 252 250 244));
5463
+ --utility-material-input: rgb(var(--usk-surface-rgb, 239 237 230));
5464
+ --utility-material-header: rgb(var(--usk-industrial-header-rgb, 23 32 35));
5465
+ --utility-material-shadow-opacity: .28;
5466
+ }
5467
+
5468
+ [data-ui="industrial-utility"][data-mode] {
5469
+ --utility-font-display: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
5470
+ --utility-font-body: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
5471
+ --utility-font-mono: "DejaVu Sans Mono", Consolas, monospace;
5472
+ --utility-material-font-display: var(--utility-font-display);
5473
+ --utility-material-font-body: var(--utility-font-body);
5474
+ --utility-material-font-mono: var(--utility-font-mono);
5475
+ --utility-material-radius: 2px;
5476
+ --utility-material-control-height: 34px;
5477
+ --utility-material-speed: .11s;
5478
+ --utility-material-ease: cubic-bezier(.2, .8, .2, 1);
5479
+ --utility-material-canvas: var(--utility-bg);
5480
+ --utility-material-shell: var(--utility-surface);
5481
+ --utility-material-surface: var(--utility-surface);
5482
+ --utility-material-surface-raised: var(--utility-surface-strong);
5483
+ --utility-material-surface-low: var(--utility-surface-soft);
5484
+ --utility-material-text: var(--utility-text);
5485
+ --utility-material-text-soft: var(--utility-text-muted);
5486
+ --utility-material-muted: var(--utility-text-muted);
5487
+ --utility-material-line: rgb(var(--utility-border-rgb) / .6);
5488
+ --utility-material-line-strong: var(--utility-border);
5489
+ --utility-material-steel-dark: rgb(var(--usk-industrial-bezel-rgb, 52 57 58));
5490
+ --utility-material-header-ink: rgb(var(--usk-industrial-header-text-rgb, 234 238 235));
5491
+ --utility-material-header-muted: rgb(var(--usk-industrial-header-text-rgb, 177 190 187));
5492
+ --utility-material-safety-amber: var(--utility-primary);
5493
+ --utility-material-safety-ink: var(--utility-on-primary);
5494
+ --utility-material-warning: var(--utility-warning);
5495
+ --utility-material-hazard-red: var(--utility-danger);
5496
+ --utility-material-hazard-ink: var(--utility-on-danger);
5497
+ --utility-material-lamp-green: var(--utility-success);
5498
+ --utility-material-lamp-blue: var(--utility-accent);
5499
+ --utility-material-off: var(--utility-border);
5500
+ --utility-material-focus: var(--utility-focus);
5501
+ --utility-material-bevel: 0 1px 0 #ffffff2b, 0 3px 6px rgb(0 0 0 / var(--utility-material-shadow-opacity, .48)), inset 0 1px 0 #ffffff40, inset 0 -2px 0 #00000040;
5502
+ --utility-material-inset-shadow: inset 0 2px 4px #00000047, 0 1px 0 #ffffff1a;
5503
+ --utility-material-panel-shadow: 0 3px 8px #0003, inset 0 1px 0 #ffffff26;
5504
+ --utility-material-lamp-glow: 0 0 8px rgb(var(--utility-success-rgb) / .45);
5505
+ --utility-material-primary-top: var(--utility-primary);
5506
+ --utility-material-danger-top: var(--utility-danger);
5507
+ --utility-material-readout-ink: rgb(var(--usk-industrial-readout-text-rgb, 156 232 121));
5508
+ --utility-material-badge-success: rgb(var(--usk-success-rgb, 52 95 38));
5509
+ --utility-material-badge-success-ink: rgb(var(--usk-success-text-rgb, 223 245 211));
5510
+ --utility-material-badge-info: rgb(var(--usk-accent-rgb, 49 85 113));
5511
+ --utility-material-badge-info-ink: rgb(var(--usk-accent-text-rgb, 229 244 255));
5512
+ --utility-material-badge-warning: rgb(var(--usk-warning-rgb, 133 95 6));
5513
+ --utility-material-badge-warning-ink: rgb(var(--usk-warning-text-rgb, 255 242 192));
5514
+ --utility-material-badge-danger: rgb(var(--usk-danger-rgb, 132 32 19));
5515
+ --utility-material-badge-danger-ink: rgb(var(--usk-danger-text-rgb, 255 240 235));
5516
+ --utility-theme-bg: var(--utility-bg);
5517
+ --utility-radius-xs: 1px;
5518
+ --utility-radius-sm: 2px;
5519
+ --utility-radius-md: 2px;
5520
+ --usk-native-card-bg: var(--utility-material-surface);
5521
+ --usk-native-control-bg: var(--utility-material-input);
5522
+ --usk-native-control-border: 1px solid var(--utility-material-line-strong);
5523
+ --usk-native-control-radius: 1px;
5524
+ --usk-native-control-shadow: var(--utility-material-inset-shadow);
5525
+ --usk-native-font-body: var(--utility-font-body);
5526
+ --usk-native-font-heading: var(--utility-font-display);
5527
+ --usk-native-font-control: var(--utility-font-display);
5528
+ }
5529
+
5530
+ [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
5531
+ box-sizing: border-box;
5532
+ }
5533
+
5534
+ [data-ui="industrial-utility"] :focus-visible {
5535
+ outline: 2px solid var(--utility-material-focus);
5536
+ outline-offset: 2px;
5537
+ }
5538
+
5539
+ [data-ui="industrial-utility"] a {
5540
+ color: var(--utility-material-lamp-blue);
5541
+ text-underline-offset: 3px;
5542
+ font-weight: 700;
5543
+ text-decoration-thickness: 1px;
5544
+ }
5545
+
5546
+ [data-ui="industrial-utility"] a:hover, [data-ui="industrial-utility"] a.is-hover {
5547
+ color: var(--utility-material-warning);
5548
+ }
5549
+
5550
+ .utility-panel, .utility-card, .utility-dialog, .utility-popover, .utility-toast, :where([data-ui="industrial-utility"]) .ui-card {
5551
+ background: var(--utility-material-surface);
5552
+ border: 1px solid var(--utility-material-line-strong);
5553
+ border-radius: var(--utility-material-radius);
5554
+ box-shadow: var(--utility-material-panel-shadow);
5555
+ position: relative;
5556
+ }
5557
+
5558
+ .utility-panel:before, .utility-card:before, .utility-dialog:before, :where([data-ui="industrial-utility"]) .ui-card:before {
5559
+ border: 1px solid rgb(var(--utility-border-rgb)/.25);
5560
+ content: "";
5561
+ pointer-events: none;
5562
+ border-radius: 1px;
5563
+ position: absolute;
5564
+ inset: 3px;
5565
+ }
5566
+
5567
+ .utility-panel-header {
5568
+ background: var(--utility-material-header);
5569
+ border-bottom: 1px solid var(--utility-material-steel-dark);
5570
+ color: var(--utility-material-header-ink);
5571
+ font: 800 12px/1 var(--utility-material-font-display);
5572
+ letter-spacing: 0;
5573
+ text-transform: uppercase;
5574
+ align-items: center;
5575
+ gap: 8px;
5576
+ height: 31px;
5577
+ padding: 0 10px;
5578
+ display: flex;
5579
+ position: relative;
5580
+ }
5581
+
5582
+ .utility-panel-header:before {
5583
+ background: var(--utility-material-safety-amber);
5584
+ content: "";
5585
+ width: 4px;
5586
+ height: 13px;
5587
+ box-shadow: inset 0 -2px #00000038;
5588
+ }
5589
+
5590
+ .utility-panel-header small {
5591
+ color: var(--utility-material-header-muted);
5592
+ font: 600 8px var(--utility-material-font-mono);
5593
+ letter-spacing: 0;
5594
+ margin-left: auto;
5595
+ }
5596
+
5597
+ .utility-panel-body {
5598
+ padding: 10px;
5599
+ position: relative;
5600
+ }
5601
+
5602
+ .utility-rivet {
5603
+ z-index: 1;
5604
+ pointer-events: none;
5605
+ background: radial-gradient(circle at 38% 35%,var(--utility-material-steel-light)0 12%,var(--utility-material-steel) 35%,var(--utility-material-steel-dark) 72%);
5606
+ border: 1px solid var(--utility-material-steel-dark);
5607
+ border-radius: 50%;
5608
+ width: 7px;
5609
+ height: 7px;
5610
+ position: absolute;
5611
+ box-shadow: 0 1px 1px #0006;
5612
+ }
5613
+
5614
+ .utility-rivet.is-tl {
5615
+ top: 5px;
5616
+ left: 5px;
5617
+ }
5618
+
5619
+ .utility-rivet.is-tr {
5620
+ top: 5px;
5621
+ right: 5px;
5622
+ }
5623
+
5624
+ .utility-rivet.is-bl {
5625
+ bottom: 5px;
5626
+ left: 5px;
5627
+ }
5628
+
5629
+ .utility-rivet.is-br {
5630
+ bottom: 5px;
5631
+ right: 5px;
5632
+ }
5633
+
5634
+ .utility-label, .utility-overline, .utility-readout-label, :where([data-ui="industrial-utility"]) .ui-label {
5635
+ color: var(--utility-material-muted);
5636
+ font: 700 9px/1 var(--utility-material-font-display);
5637
+ letter-spacing: 0;
5638
+ text-transform: uppercase;
5639
+ margin-bottom: 5px;
5640
+ display: block;
5641
+ }
5642
+
5643
+ [data-ui="industrial-utility"][data-mode] .utility-media-scrim > :where(figcaption, [data-media-caption]) * {
5644
+ color: inherit;
5645
+ }
5646
+
5647
+ .utility-overline {
5648
+ color: var(--utility-material-warning);
5649
+ font-family: var(--utility-material-font-mono);
5650
+ letter-spacing: 0;
5651
+ font-size: 8px;
5652
+ }
5653
+
5654
+ .utility-help {
5655
+ color: var(--utility-material-muted);
5656
+ font: 8px/1.3 var(--utility-material-font-body);
5657
+ margin: 4px 0 0;
5658
+ }
5659
+
5660
+ .utility-help.is-error {
5661
+ color: var(--utility-material-hazard-red);
5662
+ }
5663
+
5664
+ .utility-field, :where([data-ui="industrial-utility"]) .ui-field {
5665
+ gap: 4px;
5666
+ min-width: 0;
5667
+ display: grid;
5668
+ }
5669
+
5670
+ .utility-input, .utility-select, .utility-textarea, [data-ui="industrial-utility"] input[type="text"], [data-ui="industrial-utility"] input[type="password"], [data-ui="industrial-utility"] input[type="search"], [data-ui="industrial-utility"] input[type="number"], [data-ui="industrial-utility"] input[type="date"], [data-ui="industrial-utility"] input[type="time"], :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-select, :where([data-ui="industrial-utility"]) .ui-textarea {
5671
+ appearance: none;
5672
+ background: var(--utility-material-input);
5673
+ border: 1px solid var(--utility-material-line-strong);
5674
+ box-shadow: var(--utility-material-inset-shadow);
5675
+ color: var(--utility-material-text);
5676
+ font: 11px var(--utility-material-font-body);
5677
+ height: var(--utility-material-control-height);
5678
+ border-radius: 1px;
5679
+ width: 100%;
5680
+ min-width: 0;
5681
+ padding: 0 10px;
5682
+ }
5683
+
5684
+ .utility-input::placeholder, .utility-textarea::placeholder, [data-ui="industrial-utility"] input::placeholder, :where([data-ui="industrial-utility"]) .ui-input::placeholder, :where([data-ui="industrial-utility"]) .ui-textarea::placeholder {
5685
+ color: var(--utility-material-muted);
5686
+ opacity: .75;
5687
+ }
5688
+
5689
+ .utility-input:hover, .utility-select:hover, .utility-textarea:hover, [data-ui="industrial-utility"] input:hover, :where([data-ui="industrial-utility"]) .ui-input:hover, :where([data-ui="industrial-utility"]) .ui-select:hover, :where([data-ui="industrial-utility"]) .ui-textarea:hover {
5690
+ border-color: var(--utility-material-steel-light);
5691
+ }
5692
+
5693
+ .utility-input:focus, .utility-select:focus, .utility-textarea:focus, [data-ui="industrial-utility"] input:focus, :where([data-ui="industrial-utility"]) .ui-input:focus, :where([data-ui="industrial-utility"]) .ui-select:focus, :where([data-ui="industrial-utility"]) .ui-textarea:focus {
5694
+ border-color: var(--utility-material-focus);
5695
+ box-shadow: var(--utility-material-inset-shadow),0 0 0 1px var(--utility-material-focus);
5696
+ outline: 2px solid var(--utility-material-focus);
5697
+ }
5698
+
5699
+ .utility-input.is-error, .utility-textarea.is-error, :where([data-ui="industrial-utility"]) .ui-input.is-error, :where([data-ui="industrial-utility"]) .ui-textarea.is-error {
5700
+ border-color: var(--utility-material-hazard-red);
5701
+ box-shadow: var(--utility-material-inset-shadow),0 0 0 1px var(--utility-material-hazard-red);
5702
+ }
5703
+
5704
+ .utility-input:disabled, .utility-select:disabled, .utility-textarea:disabled, [data-ui="industrial-utility"] input:disabled, :where([data-ui="industrial-utility"]) .ui-input:disabled, :where([data-ui="industrial-utility"]) .ui-select:disabled, :where([data-ui="industrial-utility"]) .ui-textarea:disabled {
5705
+ cursor: not-allowed;
5706
+ opacity: .47;
5707
+ }
5708
+
5709
+ .utility-textarea, [data-ui="industrial-utility"] textarea, :where([data-ui="industrial-utility"]) .ui-textarea {
5710
+ resize: vertical;
5711
+ min-height: 68px;
5712
+ padding: 8px 10px;
5713
+ }
5714
+
5715
+ .utility-select, [data-ui="industrial-utility"] select, :where([data-ui="industrial-utility"]) .ui-select {
5716
+ appearance: none;
5717
+ background-color: var(--utility-material-input);
5718
+ background-image: linear-gradient(45deg,transparent 50%,var(--utility-material-text-soft) 50%),linear-gradient(135deg,var(--utility-material-text-soft) 50%,transparent 50%);
5719
+ border: 1px solid var(--utility-material-line-strong);
5720
+ box-shadow: var(--utility-material-inset-shadow);
5721
+ color: var(--utility-material-text);
5722
+ font: 11px var(--utility-material-font-body);
5723
+ height: var(--utility-material-control-height);
5724
+ background-position: calc(100% - 13px) 48%, calc(100% - 9px) 48%;
5725
+ background-repeat: no-repeat;
5726
+ background-size: 4px 4px, 4px 4px;
5727
+ border-radius: 1px;
5728
+ width: 100%;
5729
+ padding: 0 28px 0 10px;
5730
+ }
5731
+
5732
+ .utility-file {
5733
+ color: var(--utility-material-text-soft);
5734
+ font: 10px var(--utility-material-font-body);
5735
+ width: 100%;
5736
+ }
5737
+
5738
+ .utility-file::file-selector-button {
5739
+ background: var(--utility-material-surface-raised);
5740
+ border: 1px solid var(--utility-material-line-strong);
5741
+ box-shadow: var(--utility-material-bevel);
5742
+ color: var(--utility-material-text);
5743
+ cursor: pointer;
5744
+ font: 800 9px var(--utility-material-font-display);
5745
+ text-transform: uppercase;
5746
+ border-radius: 1px;
5747
+ height: 30px;
5748
+ margin-right: 9px;
5749
+ padding: 0 12px;
5750
+ }
5751
+
5752
+ .utility-button, :where([data-ui="industrial-utility"]) .ui-button {
5753
+ appearance: none;
5754
+ background: linear-gradient(var(--utility-material-surface-raised),var(--utility-material-surface-low));
5755
+ border: 1px solid var(--utility-material-steel-dark);
5756
+ box-shadow: var(--utility-material-bevel);
5757
+ color: var(--utility-material-text);
5758
+ cursor: pointer;
5759
+ font: 900 11px/1 var(--utility-material-font-display);
5760
+ height: var(--utility-material-control-height);
5761
+ letter-spacing: 0;
5762
+ text-transform: uppercase;
5763
+ min-width: 84px;
5764
+ transition: filter var(--utility-material-speed) var(--utility-material-ease),transform 70ms linear,box-shadow 70ms linear;
5765
+ border-radius: 2px;
5766
+ justify-content: center;
5767
+ align-items: center;
5768
+ gap: 7px;
5769
+ padding: 0 14px;
5770
+ display: inline-flex;
5771
+ }
5772
+
5773
+ .utility-button:hover, .utility-button.is-hover, :where([data-ui="industrial-utility"]) .ui-button:hover, :where([data-ui="industrial-utility"]) .ui-button.is-hover {
5774
+ filter: brightness(1.1);
5775
+ }
5776
+
5777
+ .utility-button:active, .utility-button.is-pressed, :where([data-ui="industrial-utility"]) .ui-button:active, :where([data-ui="industrial-utility"]) .ui-button.is-pressed {
5778
+ transform: translateY(2px);
5779
+ box-shadow: inset 0 3px 5px #00000085, 0 1px #ffffff1f;
5780
+ }
5781
+
5782
+ .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
5783
+ background: linear-gradient(var(--utility-material-primary-top),var(--utility-material-safety-amber));
5784
+ border-color: var(--utility-material-safety-amber);
5785
+ color: var(--utility-material-safety-ink);
5786
+ }
5787
+
5788
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
5789
+ background: linear-gradient(var(--utility-material-steel-light),var(--utility-material-steel));
5790
+ border-color: var(--utility-material-steel-dark);
5791
+ color: #131719;
5792
+ }
5793
+
5794
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
5795
+ border-color: var(--utility-material-line-strong);
5796
+ box-shadow: inset 0 0 0 1px rgb(var(--utility-border-rgb)/.15);
5797
+ background: none;
5798
+ }
5799
+
5800
+ .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
5801
+ background: linear-gradient(var(--utility-material-danger-top),var(--utility-material-hazard-red));
5802
+ border-color: var(--utility-material-hazard-red);
5803
+ color: var(--utility-material-hazard-ink);
5804
+ }
5805
+
5806
+ .utility-button-guarded {
5807
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,#201f19 7px 14px);
5808
+ color: #fff;
5809
+ text-shadow: 0 1px 2px #000;
5810
+ border-color: #5b4b05;
5811
+ }
5812
+
5813
+ .utility-button-guarded > span {
5814
+ background: #141615eb;
5815
+ padding: 5px 9px;
5816
+ }
5817
+
5818
+ .utility-button:disabled, .utility-button.is-disabled, :where([data-ui="industrial-utility"]) .ui-button:disabled, :where([data-ui="industrial-utility"]) .ui-button.is-disabled {
5819
+ cursor: not-allowed;
5820
+ filter: grayscale(.7);
5821
+ opacity: .42;
5822
+ }
5823
+
5824
+ .utility-button.is-loading:before, .utility-spinner, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before {
5825
+ border: 2px solid rgb(var(--utility-text-rgb)/.28);
5826
+ content: "";
5827
+ border-top-color: currentColor;
5828
+ border-radius: 50%;
5829
+ width: 14px;
5830
+ height: 14px;
5831
+ animation: .85s linear infinite utility-material-spin;
5832
+ }
5833
+
5834
+ @keyframes utility-material-spin {
5835
+ to {
5836
+ transform: rotate(360deg);
5837
+ }
5838
+ }
5839
+
5840
+ .utility-control-grid {
5841
+ grid-template-columns: repeat(4, minmax(0, 1fr));
5842
+ gap: 10px;
5843
+ display: grid;
5844
+ }
5845
+
5846
+ .utility-control-cell {
5847
+ background: rgb(var(--utility-surface-soft-rgb)/.72);
5848
+ border: 1px solid var(--utility-material-line);
5849
+ box-shadow: var(--utility-material-inset-shadow);
5850
+ flex-direction: column;
5851
+ justify-content: center;
5852
+ align-items: center;
5853
+ gap: 7px;
5854
+ min-height: 76px;
5855
+ padding: 8px;
5856
+ display: flex;
5857
+ }
5858
+
5859
+ .utility-control-cell > label, .utility-control-name {
5860
+ color: var(--utility-material-muted);
5861
+ font: 700 8px var(--utility-material-font-display);
5862
+ letter-spacing: 0;
5863
+ text-align: center;
5864
+ text-transform: uppercase;
5865
+ }
5866
+
5867
+ .utility-emergency-stop {
5868
+ appearance: none;
5869
+ background: radial-gradient(circle at 40% 30%,var(--utility-material-danger-top),var(--utility-material-hazard-red) 56%,var(--utility-material-hazard-red) 100%);
5870
+ color: var(--utility-material-hazard-ink);
5871
+ cursor: pointer;
5872
+ font: 900 9px/1 var(--utility-material-font-display);
5873
+ letter-spacing: 0;
5874
+ text-shadow: 0 1px 1px #4c0802;
5875
+ border: 4px solid #5d6464;
5876
+ border-radius: 50%;
5877
+ justify-content: center;
5878
+ align-items: center;
5879
+ width: 48px;
5880
+ height: 48px;
5881
+ display: inline-flex;
5882
+ box-shadow: 0 0 0 3px #171c1d, 0 5px 7px #00000073, inset 0 2px 2px #ffffff52;
5883
+ }
5884
+
5885
+ .utility-emergency-stop:active, .utility-emergency-stop.is-pressed {
5886
+ transform: translateY(2px);
5887
+ box-shadow: 0 0 0 3px #171c1d, 0 2px 2px #00000080, inset 0 4px 5px #4b0000b8;
5888
+ }
5889
+
5890
+ .utility-key-switch {
5891
+ appearance: none;
5892
+ cursor: pointer;
5893
+ background: radial-gradient(circle, #9ba1a0 0 12%, #3f4748 13% 36%, #a8aeac 37% 47%, #2a3031 48% 68%, #111617 69%);
5894
+ border: 0;
5895
+ border-radius: 50%;
5896
+ width: 48px;
5897
+ height: 48px;
5898
+ position: relative;
5899
+ box-shadow: 0 3px 6px #0000007a, inset 0 1px 2px #ffffff73;
5900
+ }
5901
+
5902
+ .utility-key-switch:after {
5903
+ content: "";
5904
+ transform-origin: 4px 14px;
5905
+ background: #151b1c;
5906
+ border: 1px solid #aab0ae;
5907
+ border-radius: 2px;
5908
+ width: 8px;
5909
+ height: 8px;
5910
+ position: absolute;
5911
+ top: 10px;
5912
+ left: 20px;
5913
+ transform: rotate(-28deg);
5914
+ }
5915
+
5916
+ .utility-pilot-light {
5917
+ background: radial-gradient(circle at 40% 32%,#e7ffdc 0 7%,var(--utility-material-lamp-green) 28%,#183f11 78%);
5918
+ border: 2px solid var(--utility-material-steel-dark);
5919
+ box-shadow: var(--utility-material-lamp-glow),inset 0 1px 2px #ffffff6b;
5920
+ border-radius: 50%;
5921
+ justify-content: center;
5922
+ align-items: center;
5923
+ width: 17px;
5924
+ height: 17px;
5925
+ display: inline-flex;
5926
+ }
5927
+
5928
+ .utility-pilot-light.is-blue {
5929
+ background: radial-gradient(circle at 40% 32%,#e7f7ff 0 7%,var(--utility-material-lamp-blue) 28%,#14324a 78%);
5930
+ box-shadow: 0 0 0 1px #5f9dcc33, 0 0 8px #5f9dcc8c;
5931
+ }
5932
+
5933
+ .utility-pilot-light.is-red {
5934
+ background: radial-gradient(circle at 40% 32%,#ffe9df 0 7%,var(--utility-material-hazard-red) 28%,#541208 78%);
5935
+ box-shadow: 0 0 0 1px #c73a2333, 0 0 8px #c73a238c;
5936
+ }
5937
+
5938
+ .utility-pilot-light.is-off {
5939
+ background: radial-gradient(circle at 40% 32%,#a7aeaa,var(--utility-material-off) 38%,#262d2e 78%);
5940
+ box-shadow: inset 0 1px 2px #fff3;
5941
+ }
5942
+
5943
+ .utility-check, .utility-radio, :where([data-ui="industrial-utility"]) .ui-check, :where([data-ui="industrial-utility"]) .ui-radio {
5944
+ color: var(--utility-material-text-soft);
5945
+ cursor: pointer;
5946
+ font: 10px var(--utility-material-font-body);
5947
+ align-items: center;
5948
+ gap: 7px;
5949
+ display: inline-flex;
5950
+ }
5951
+
5952
+ .utility-check input, .utility-radio input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
5953
+ appearance: none;
5954
+ background: var(--utility-material-input);
5955
+ border: 1px solid var(--utility-material-line-strong);
5956
+ box-shadow: var(--utility-material-inset-shadow);
5957
+ width: 15px;
5958
+ height: 15px;
5959
+ margin: 0;
5960
+ }
5961
+
5962
+ .utility-radio input, :where([data-ui="industrial-utility"]) .ui-radio input {
5963
+ border-radius: 50%;
5964
+ }
5965
+
5966
+ .utility-check input:checked, :where([data-ui="industrial-utility"]) .ui-check input:checked {
5967
+ background: var(--utility-material-lamp-green);
5968
+ box-shadow: inset 0 0 0 3px var(--utility-material-input),var(--utility-material-lamp-glow);
5969
+ }
5970
+
5971
+ .utility-radio input:checked, :where([data-ui="industrial-utility"]) .ui-radio input:checked {
5972
+ background: var(--utility-material-lamp-green);
5973
+ box-shadow: inset 0 0 0 4px var(--utility-material-input),var(--utility-material-lamp-glow);
5974
+ }
5975
+
5976
+ .utility-check input:indeterminate, :where([data-ui="industrial-utility"]) .ui-check input:indeterminate {
5977
+ background: linear-gradient(var(--utility-material-input) 40%,var(--utility-material-safety-amber) 40% 60%,var(--utility-material-input) 60%);
5978
+ }
5979
+
5980
+ .utility-check input:disabled, .utility-radio input:disabled, .utility-check.is-disabled, .utility-radio.is-disabled, :where([data-ui="industrial-utility"]) .ui-check input:disabled, :where([data-ui="industrial-utility"]) .ui-radio input:disabled, :where([data-ui="industrial-utility"]) .ui-check.is-disabled, :where([data-ui="industrial-utility"]) .ui-radio.is-disabled {
5981
+ cursor: not-allowed;
5982
+ opacity: .42;
5983
+ }
5984
+
5985
+ .utility-toggle {
5986
+ align-items: center;
5987
+ gap: 8px;
5988
+ display: inline-flex;
5989
+ }
5990
+
5991
+ .utility-toggle input {
5992
+ appearance: none;
5993
+ box-shadow: var(--utility-material-inset-shadow);
5994
+ cursor: pointer;
5995
+ background: linear-gradient(#303738, #777d7b);
5996
+ border: 1px solid #262b2c;
5997
+ border-radius: 18px;
5998
+ width: 48px;
5999
+ height: 24px;
6000
+ margin: 0;
6001
+ position: relative;
6002
+ }
6003
+
6004
+ .utility-toggle input:after {
6005
+ content: "";
6006
+ height: 20px;
6007
+ transition: left var(--utility-material-speed) var(--utility-material-ease);
6008
+ background: radial-gradient(circle at 36% 28%, #fff, #aaaead 57%, #535a5a 100%);
6009
+ border: 1px solid #323839;
6010
+ border-radius: 50%;
6011
+ width: 20px;
6012
+ position: absolute;
6013
+ top: 1px;
6014
+ left: 1px;
6015
+ box-shadow: 0 2px 3px #00000073;
6016
+ }
6017
+
6018
+ .utility-toggle input:checked {
6019
+ background: linear-gradient(#ffffff59,transparent),var(--utility-material-lamp-green);
6020
+ }
6021
+
6022
+ .utility-toggle input:checked:after {
6023
+ left: 25px;
6024
+ }
6025
+
6026
+ .utility-toggle input:disabled {
6027
+ opacity: .42;
6028
+ }
6029
+
6030
+ .utility-toggle span {
6031
+ color: var(--utility-material-text-soft);
6032
+ font: 800 9px var(--utility-material-font-display);
6033
+ text-transform: uppercase;
6034
+ }
6035
+
6036
+ .utility-three-position {
6037
+ background: var(--utility-material-surface-low);
6038
+ border: 1px solid var(--utility-material-line-strong);
6039
+ box-shadow: var(--utility-material-inset-shadow);
6040
+ grid-template-columns: repeat(3, 1fr);
6041
+ padding: 3px;
6042
+ display: inline-grid;
6043
+ }
6044
+
6045
+ .utility-three-position button {
6046
+ color: var(--utility-material-muted);
6047
+ cursor: pointer;
6048
+ font: 800 8px var(--utility-material-font-display);
6049
+ text-transform: uppercase;
6050
+ background: none;
6051
+ border: 0;
6052
+ min-width: 42px;
6053
+ padding: 7px 8px;
6054
+ }
6055
+
6056
+ .utility-three-position button.is-active {
6057
+ background: var(--utility-material-safety-amber);
6058
+ box-shadow: var(--utility-material-bevel);
6059
+ color: var(--utility-material-safety-ink);
6060
+ }
6061
+
6062
+ .utility-slider, [data-ui="industrial-utility"] input[type="range"] {
6063
+ appearance: none;
6064
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
6065
+ border: 1px solid var(--utility-material-steel-dark);
6066
+ box-shadow: var(--utility-material-inset-shadow);
6067
+ width: 100%;
6068
+ height: 8px;
6069
+ }
6070
+
6071
+ .utility-slider::-webkit-slider-thumb {
6072
+ appearance: none;
6073
+ background: linear-gradient(90deg,var(--utility-material-steel),var(--utility-material-steel-light),var(--utility-material-steel));
6074
+ border: 1px solid var(--utility-material-steel-dark);
6075
+ box-shadow: var(--utility-material-bevel);
6076
+ cursor: ew-resize;
6077
+ border-radius: 1px;
6078
+ width: 12px;
6079
+ height: 24px;
6080
+ }
6081
+
6082
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb {
6083
+ appearance: none;
6084
+ background: linear-gradient(90deg,var(--utility-material-steel),var(--utility-material-steel-light),var(--utility-material-steel));
6085
+ border: 1px solid var(--utility-material-steel-dark);
6086
+ box-shadow: var(--utility-material-bevel);
6087
+ cursor: ew-resize;
6088
+ border-radius: 1px;
6089
+ width: 12px;
6090
+ height: 24px;
6091
+ }
6092
+
6093
+ .utility-slider::-moz-range-thumb {
6094
+ background: var(--utility-material-steel);
6095
+ border: 1px solid var(--utility-material-steel-dark);
6096
+ box-shadow: var(--utility-material-bevel);
6097
+ border-radius: 1px;
6098
+ width: 10px;
6099
+ height: 22px;
6100
+ }
6101
+
6102
+ [data-ui="industrial-utility"] input[type="range"]::-moz-range-thumb {
6103
+ background: var(--utility-material-steel);
6104
+ border: 1px solid var(--utility-material-steel-dark);
6105
+ box-shadow: var(--utility-material-bevel);
6106
+ border-radius: 1px;
6107
+ width: 10px;
6108
+ height: 22px;
6109
+ }
6110
+
6111
+ .utility-ticks {
6112
+ color: var(--utility-material-muted);
6113
+ font: 7px var(--utility-material-font-mono);
6114
+ justify-content: space-between;
6115
+ margin-bottom: 4px;
6116
+ display: flex;
6117
+ }
6118
+
6119
+ .utility-readout {
6120
+ border: 1px solid var(--utility-material-steel-dark);
6121
+ box-shadow: var(--utility-material-inset-shadow);
6122
+ color: var(--utility-material-readout-ink);
6123
+ font: 700 15px/1 var(--utility-material-font-mono);
6124
+ text-shadow: 0 0 6px #89e26285;
6125
+ background: #08100c;
6126
+ min-width: 74px;
6127
+ padding: 8px 10px;
6128
+ display: inline-flex;
6129
+ }
6130
+
6131
+ .utility-readout small {
6132
+ color: var(--utility-material-readout-ink);
6133
+ margin-left: auto;
6134
+ padding-left: 8px;
6135
+ font-size: 8px;
6136
+ }
6137
+
6138
+ .utility-meter {
6139
+ background: var(--utility-material-surface-low);
6140
+ border: 1px solid var(--utility-material-line-strong);
6141
+ box-shadow: var(--utility-material-inset-shadow);
6142
+ height: 14px;
6143
+ position: relative;
6144
+ overflow: hidden;
6145
+ }
6146
+
6147
+ .utility-meter > span {
6148
+ background: repeating-linear-gradient(90deg,transparent 0 16px,#00000059 16px 18px),var(--utility-material-lamp-green);
6149
+ height: 100%;
6150
+ display: block;
6151
+ }
6152
+
6153
+ .utility-meter.is-warning > span {
6154
+ background: var(--utility-material-safety-amber);
6155
+ }
6156
+
6157
+ .utility-meter.is-danger > span {
6158
+ background: var(--utility-material-hazard-red);
6159
+ }
6160
+
6161
+ .utility-meter:after {
6162
+ content: "";
6163
+ background: repeating-linear-gradient(90deg, #0000 0 9.2%, #00000073 9.2% 10%);
6164
+ position: absolute;
6165
+ inset: 0;
6166
+ }
6167
+
6168
+ .utility-progress, [data-ui="industrial-utility"] progress, :where([data-ui="industrial-utility"]) .ui-progress {
6169
+ appearance: none;
6170
+ background: var(--utility-material-surface-low);
6171
+ border: 1px solid var(--utility-material-line-strong);
6172
+ box-shadow: var(--utility-material-inset-shadow);
6173
+ border-radius: 0;
6174
+ width: 100%;
6175
+ height: 13px;
6176
+ overflow: hidden;
6177
+ }
6178
+
6179
+ .utility-progress::-webkit-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress::-webkit-progress-bar {
6180
+ background: var(--utility-material-surface-low);
6181
+ }
6182
+
6183
+ [data-ui="industrial-utility"] progress::-webkit-progress-bar {
6184
+ background: var(--utility-material-surface-low);
6185
+ }
6186
+
6187
+ .utility-progress::-webkit-progress-value, :where([data-ui="industrial-utility"]) .ui-progress::-webkit-progress-value {
6188
+ background: var(--utility-material-lamp-green);
6189
+ }
6190
+
6191
+ [data-ui="industrial-utility"] progress::-webkit-progress-value {
6192
+ background: var(--utility-material-lamp-green);
6193
+ }
6194
+
6195
+ .utility-progress::-moz-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress::-moz-progress-bar {
6196
+ background: var(--utility-material-lamp-green);
6197
+ }
6198
+
6199
+ [data-ui="industrial-utility"] progress::-moz-progress-bar {
6200
+ background: var(--utility-material-lamp-green);
6201
+ }
6202
+
6203
+ .utility-stage-track {
6204
+ grid-template-columns: repeat(4, 1fr);
6205
+ margin-top: 9px;
6206
+ display: grid;
6207
+ position: relative;
6208
+ }
6209
+
6210
+ .utility-stage-track:before {
6211
+ background: var(--utility-material-line-strong);
6212
+ content: "";
6213
+ height: 2px;
6214
+ position: absolute;
6215
+ top: 8px;
6216
+ left: 12%;
6217
+ right: 12%;
6218
+ }
6219
+
6220
+ .utility-stage {
6221
+ color: var(--utility-material-muted);
6222
+ font: 7px var(--utility-material-font-display);
6223
+ text-align: center;
6224
+ text-transform: uppercase;
6225
+ z-index: 1;
6226
+ position: relative;
6227
+ }
6228
+
6229
+ .utility-stage b {
6230
+ background: var(--utility-material-surface-low);
6231
+ border: 1px solid var(--utility-material-line-strong);
6232
+ border-radius: 50%;
6233
+ justify-content: center;
6234
+ align-items: center;
6235
+ width: 18px;
6236
+ height: 18px;
6237
+ margin: 0 auto 4px;
6238
+ display: flex;
6239
+ }
6240
+
6241
+ .utility-stage.is-complete b, .utility-stage.is-current b {
6242
+ background: var(--utility-material-lamp-green);
6243
+ color: #0c1707;
6244
+ box-shadow: var(--utility-material-lamp-glow);
6245
+ border-color: #2f5b1e;
6246
+ }
6247
+
6248
+ .utility-stage.is-current b {
6249
+ background: var(--utility-material-safety-amber);
6250
+ box-shadow: none;
6251
+ }
6252
+
6253
+ .utility-tabs {
6254
+ border-bottom: 1px solid var(--utility-material-line-strong);
6255
+ align-items: stretch;
6256
+ gap: 1px;
6257
+ display: flex;
6258
+ }
6259
+
6260
+ .utility-tab {
6261
+ background: var(--utility-material-surface-low);
6262
+ border: 1px solid var(--utility-material-line);
6263
+ color: var(--utility-material-muted);
6264
+ cursor: pointer;
6265
+ font: 800 9px var(--utility-material-font-display);
6266
+ text-transform: uppercase;
6267
+ border-bottom: 0;
6268
+ min-height: 30px;
6269
+ padding: 0 13px;
6270
+ }
6271
+
6272
+ .utility-tab.is-active, .utility-tab[aria-selected="true"] {
6273
+ background: var(--utility-material-surface-raised);
6274
+ color: var(--utility-material-text);
6275
+ position: relative;
6276
+ }
6277
+
6278
+ .utility-tab.is-active:before, .utility-tab[aria-selected="true"]:before {
6279
+ background: var(--utility-material-safety-amber);
6280
+ content: "";
6281
+ height: 3px;
6282
+ position: absolute;
6283
+ top: -1px;
6284
+ left: -1px;
6285
+ right: -1px;
6286
+ }
6287
+
6288
+ .utility-breadcrumb {
6289
+ color: var(--utility-material-muted);
6290
+ font: 8px var(--utility-material-font-mono);
6291
+ text-transform: uppercase;
6292
+ align-items: center;
6293
+ gap: 7px;
6294
+ display: flex;
6295
+ }
6296
+
6297
+ .utility-breadcrumb b {
6298
+ color: var(--utility-material-text);
6299
+ }
6300
+
6301
+ .utility-breadcrumb i {
6302
+ color: var(--utility-material-warning);
6303
+ font-style: normal;
6304
+ }
6305
+
6306
+ .utility-pagination, .utility-segmented {
6307
+ display: inline-flex;
6308
+ }
6309
+
6310
+ .utility-pagination button, .utility-segmented button {
6311
+ background: var(--utility-material-surface-low);
6312
+ border: 1px solid var(--utility-material-line-strong);
6313
+ color: var(--utility-material-text-soft);
6314
+ cursor: pointer;
6315
+ font: 800 9px var(--utility-material-font-display);
6316
+ min-width: 29px;
6317
+ height: 29px;
6318
+ padding: 0 8px;
6319
+ }
6320
+
6321
+ .utility-pagination button + button, .utility-segmented button + button {
6322
+ border-left: 0;
6323
+ }
6324
+
6325
+ .utility-pagination button.is-active, .utility-segmented button.is-active {
6326
+ background: var(--utility-material-safety-amber);
6327
+ color: var(--utility-material-safety-ink);
6328
+ }
6329
+
6330
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
6331
+ background: var(--utility-material-surface-low);
6332
+ border: 1px solid var(--utility-material-line-strong);
6333
+ color: var(--utility-material-text-soft);
6334
+ font: 900 8px var(--utility-material-font-display);
6335
+ letter-spacing: 0;
6336
+ text-transform: uppercase;
6337
+ border-radius: 1px;
6338
+ align-items: center;
6339
+ height: 22px;
6340
+ padding: 0 7px;
6341
+ display: inline-flex;
6342
+ }
6343
+
6344
+ .utility-badge-success, .utility-badge-success, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="success"]) {
6345
+ background: var(--utility-material-badge-success);
6346
+ border-color: var(--utility-material-lamp-green);
6347
+ color: var(--utility-material-badge-success-ink);
6348
+ }
6349
+
6350
+ .utility-badge-primary, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="primary"]) {
6351
+ background: var(--utility-material-badge-info);
6352
+ border-color: var(--utility-material-lamp-blue);
6353
+ color: var(--utility-material-badge-info-ink);
6354
+ }
6355
+
6356
+ .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
6357
+ background: var(--utility-material-badge-warning);
6358
+ border-color: var(--utility-material-safety-amber);
6359
+ color: var(--utility-material-badge-warning-ink);
6360
+ }
6361
+
6362
+ .utility-badge-danger, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]) {
6363
+ background: var(--utility-material-badge-danger);
6364
+ border-color: var(--utility-material-hazard-red);
6365
+ color: var(--utility-material-badge-danger-ink);
6366
+ }
6367
+
6368
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
6369
+ border: 1px solid var(--utility-material-line-strong);
6370
+ box-shadow: var(--utility-material-inset-shadow);
6371
+ overflow: auto;
6372
+ }
6373
+
6374
+ .utility-table, :where([data-ui="industrial-utility"]) .ui-table {
6375
+ border-collapse: collapse;
6376
+ font: 9px var(--utility-material-font-body);
6377
+ width: 100%;
6378
+ }
6379
+
6380
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
6381
+ background: var(--utility-material-header);
6382
+ border-bottom: 1px solid var(--utility-material-line-strong);
6383
+ color: var(--utility-material-header-ink);
6384
+ font: 800 8px var(--utility-material-font-display);
6385
+ letter-spacing: 0;
6386
+ text-align: left;
6387
+ text-transform: uppercase;
6388
+ padding: 7px 8px;
6389
+ }
6390
+
6391
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
6392
+ border-bottom: 1px solid var(--utility-material-line);
6393
+ color: var(--utility-material-text-soft);
6394
+ padding: 6px 8px;
6395
+ }
6396
+
6397
+ .utility-table tr:last-child td, :where([data-ui="industrial-utility"]) .ui-table tr:last-child td {
6398
+ border-bottom: 0;
6399
+ }
6400
+
6401
+ .utility-table tbody tr:nth-child(2n), :where([data-ui="industrial-utility"]) .ui-table tbody tr:nth-child(2n) {
6402
+ background: rgb(var(--utility-surface-soft-rgb)/.48);
6403
+ }
6404
+
6405
+ .utility-table tbody tr:hover, :where([data-ui="industrial-utility"]) .ui-table tbody tr:hover {
6406
+ background: rgb(var(--utility-primary-rgb)/.12);
6407
+ }
6408
+
6409
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
6410
+ background: var(--utility-material-surface-low);
6411
+ border: 1px solid var(--utility-material-line-strong);
6412
+ border-left: 5px solid var(--utility-material-lamp-blue);
6413
+ box-shadow: var(--utility-material-bevel);
6414
+ color: var(--utility-material-text-soft);
6415
+ font: 10px var(--utility-material-font-body);
6416
+ align-items: center;
6417
+ gap: 8px;
6418
+ min-height: 38px;
6419
+ padding: 7px 9px;
6420
+ display: flex;
6421
+ }
6422
+
6423
+ .utility-alert strong, :where([data-ui="industrial-utility"]) .ui-alert strong {
6424
+ color: var(--utility-material-text);
6425
+ font: 900 9px var(--utility-material-font-display);
6426
+ letter-spacing: 0;
6427
+ text-transform: uppercase;
6428
+ display: block;
6429
+ }
6430
+
6431
+ .utility-alert > div, :where([data-ui="industrial-utility"]) .ui-alert>div {
6432
+ flex: 1;
6433
+ min-width: 0;
6434
+ }
6435
+
6436
+ .utility-alert .utility-pilot-light, :where([data-ui="industrial-utility"]) .ui-alert .utility-pilot-light {
6437
+ width: 13px;
6438
+ height: 13px;
6439
+ }
6440
+
6441
+ .utility-alert-success, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="success"]) {
6442
+ border-left-color: var(--utility-material-lamp-green);
6443
+ }
6444
+
6445
+ .utility-alert-warning, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="warning"]) {
6446
+ border-left-color: var(--utility-material-warning);
6447
+ background: linear-gradient(rgb(var(--utility-warning-rgb)/.12),rgb(var(--utility-warning-rgb)/.12)),var(--utility-material-surface);
6448
+ }
6449
+
6450
+ .utility-alert-info {
6451
+ border-left-color: var(--utility-material-lamp-blue);
6452
+ }
6453
+
6454
+ .utility-alert-danger, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
6455
+ border-left-color: var(--utility-material-hazard-red);
6456
+ }
6457
+
6458
+ .utility-toast-stack {
6459
+ gap: 7px;
6460
+ display: grid;
6461
+ }
6462
+
6463
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6464
+ color: #dde0db;
6465
+ font: 9px/1.35 var(--utility-material-font-body);
6466
+ background: #111718;
6467
+ border: 1px solid #697173;
6468
+ max-width: 180px;
6469
+ padding: 8px 10px;
6470
+ position: relative;
6471
+ box-shadow: 0 5px 12px #00000073;
6472
+ }
6473
+
6474
+ .utility-tooltip:before {
6475
+ content: "";
6476
+ background: #111718;
6477
+ border-top: 1px solid #697173;
6478
+ border-left: 1px solid #697173;
6479
+ width: 9px;
6480
+ height: 9px;
6481
+ position: absolute;
6482
+ top: -6px;
6483
+ left: 18px;
6484
+ transform: rotate(45deg);
6485
+ }
6486
+
6487
+ .utility-popover {
6488
+ max-width: 240px;
6489
+ padding: 11px;
6490
+ }
6491
+
6492
+ .utility-dialog {
6493
+ padding: 11px;
6494
+ }
6495
+
6496
+ .utility-dialog header {
6497
+ border-bottom: 1px solid var(--utility-material-line);
6498
+ font: 900 11px var(--utility-material-font-display);
6499
+ letter-spacing: 0;
6500
+ text-transform: uppercase;
6501
+ align-items: center;
6502
+ padding-bottom: 8px;
6503
+ display: flex;
6504
+ }
6505
+
6506
+ .utility-dialog header:before {
6507
+ background: var(--utility-material-hazard-red);
6508
+ content: "";
6509
+ width: 4px;
6510
+ height: 11px;
6511
+ margin-right: 7px;
6512
+ }
6513
+
6514
+ .utility-dialog p {
6515
+ color: var(--utility-material-text-soft);
6516
+ margin: 11px 0;
6517
+ font-size: 10px;
6518
+ }
6519
+
6520
+ .utility-dialog footer {
6521
+ justify-content: flex-end;
6522
+ gap: 8px;
6523
+ display: flex;
6524
+ }
6525
+
6526
+ .utility-card, :where([data-ui="industrial-utility"]) .ui-card {
6527
+ padding: 11px;
6528
+ }
6529
+
6530
+ .utility-card h4, :where([data-ui="industrial-utility"]) .ui-card h4 {
6531
+ font: 900 11px var(--utility-material-font-display);
6532
+ letter-spacing: 0;
6533
+ text-transform: uppercase;
6534
+ margin: 0 0 7px;
6535
+ }
6536
+
6537
+ .utility-card p, :where([data-ui="industrial-utility"]) .ui-card p {
6538
+ color: var(--utility-material-text-soft);
6539
+ margin: 0;
6540
+ font-size: 10px;
6541
+ line-height: 1.35;
6542
+ }
6543
+
6544
+ .utility-details, [data-ui="industrial-utility"] details {
6545
+ background: var(--utility-material-surface-low);
6546
+ border: 1px solid var(--utility-material-line-strong);
6547
+ box-shadow: var(--utility-material-inset-shadow);
6548
+ color: var(--utility-material-text-soft);
6549
+ padding: 8px 10px;
6550
+ font-size: 10px;
6551
+ }
6552
+
6553
+ .utility-details summary, [data-ui="industrial-utility"] summary {
6554
+ color: var(--utility-material-text);
6555
+ cursor: pointer;
6556
+ font: 900 9px var(--utility-material-font-display);
6557
+ letter-spacing: 0;
6558
+ text-transform: uppercase;
6559
+ }
6560
+
6561
+ .utility-token-row {
6562
+ grid-template-columns: repeat(6, minmax(0, 1fr));
6563
+ gap: 6px;
6564
+ display: grid;
6565
+ }
6566
+
6567
+ .utility-token {
6568
+ min-width: 0;
6569
+ }
6570
+
6571
+ .utility-token i {
6572
+ border: 1px solid var(--utility-material-line-strong);
6573
+ box-shadow: var(--utility-material-bevel);
6574
+ height: 24px;
6575
+ display: block;
6576
+ }
6577
+
6578
+ .utility-token span {
6579
+ color: var(--utility-material-muted);
6580
+ font: 6px var(--utility-material-font-mono);
6581
+ text-align: center;
6582
+ text-overflow: ellipsis;
6583
+ white-space: nowrap;
6584
+ margin-top: 4px;
6585
+ display: block;
6586
+ overflow: hidden;
6587
+ }
6588
+
6589
+ .utility-skeleton {
6590
+ background: linear-gradient(90deg,var(--utility-material-surface-low),var(--utility-material-surface-raised),var(--utility-material-surface-low));
6591
+ border: 1px solid var(--utility-material-line);
6592
+ height: 11px;
6593
+ animation: 1.2s ease-in-out infinite alternate utility-material-pulse;
6594
+ }
6595
+
6596
+ @keyframes utility-material-pulse {
6597
+ to {
6598
+ opacity: .45;
6599
+ }
6600
+ }
6601
+
6602
+ .utility-empty-state {
6603
+ color: var(--utility-material-muted);
6604
+ font: 700 9px var(--utility-material-font-display);
6605
+ text-align: center;
6606
+ text-transform: uppercase;
6607
+ flex-direction: column;
6608
+ justify-content: center;
6609
+ align-items: center;
6610
+ gap: 7px;
6611
+ min-height: 74px;
6612
+ display: flex;
6613
+ }
6614
+
6615
+ .utility-empty-state .utility-pilot-light {
6616
+ width: 18px;
6617
+ height: 18px;
6618
+ }
6619
+
6620
+ .utility-sr-only {
6621
+ clip: rect(0,0,0,0);
6622
+ clip-path: inset(50%);
6623
+ white-space: nowrap;
6624
+ width: 1px;
6625
+ height: 1px;
6626
+ position: absolute;
6627
+ overflow: hidden;
6628
+ }
6629
+
6630
+ @media (prefers-reduced-motion: reduce) {
6631
+ [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
6632
+ scroll-behavior: auto !important;
6633
+ transition-duration: .001ms !important;
6634
+ animation-duration: .001ms !important;
6635
+ animation-iteration-count: 1 !important;
6636
+ }
6637
+ }
6638
+
6639
+ @media (max-width: 760px) {
6640
+ .utility-control-grid {
6641
+ grid-template-columns: repeat(2, minmax(0, 1fr));
6642
+ }
6643
+
6644
+ .utility-token-row {
6645
+ grid-template-columns: repeat(3, minmax(0, 1fr));
6646
+ }
6647
+
6648
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
6649
+ overflow-x: auto;
6650
+ }
6651
+
6652
+ .utility-button, :where([data-ui="industrial-utility"]) .ui-button {
6653
+ min-width: 72px;
6654
+ padding-inline: 10px;
6655
+ }
6656
+ }
6657
+
6658
+ .utility-panel {
6659
+ background: var(--utility-material-surface);
6660
+ padding: 0;
6661
+ }
6662
+
6663
+ .utility-card, .utility-panel, :where([data-ui="industrial-utility"]) .ui-card {
6664
+ clip-path: none;
6665
+ }
6666
+
6667
+ .utility-panel:after, .utility-card:after, :where([data-ui="industrial-utility"]) .ui-card:after {
6668
+ content: none;
6669
+ }
6670
+
6671
+ .utility-button, .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button {
6672
+ min-height: 34px;
6673
+ min-block-size: 34px;
6674
+ line-height: 1;
6675
+ }
6676
+
6677
+ .utility-button-primary, .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
6678
+ text-shadow: none;
6679
+ }
6680
+
6681
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
6682
+ color: rgb(var(--usk-secondary-text-rgb, 19 23 25));
6683
+ background: linear-gradient(rgb(var(--usk-secondary-rgb, 231 233 230)),rgb(var(--usk-secondary-rgb, 146 154 152)));
6684
+ }
6685
+
6686
+ [data-ui="industrial-utility"][data-mode="dark"] .utility-button-secondary, :where([data-ui="industrial-utility"])[data-mode="dark"] .ui-button:where([data-ui-variant="secondary"]) {
6687
+ color: rgb(var(--usk-secondary-text-rgb, 255 255 255));
6688
+ background: linear-gradient(rgb(var(--usk-secondary-rgb, 104 114 116)),rgb(var(--usk-secondary-rgb, 66 76 79)));
6689
+ }
6690
+
6691
+ .utility-button.utility-button-guarded, :where([data-ui="industrial-utility"]) .ui-button.utility-button-guarded {
6692
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,#201f19 7px 14px);
6693
+ }
6694
+
6695
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
6696
+ color: var(--utility-material-text);
6697
+ }
6698
+
6699
+ .utility-button[aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:after {
6700
+ content: none;
6701
+ }
6702
+
6703
+ .utility-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before {
6704
+ flex: 0 0 14px;
6705
+ padding: 0;
6706
+ }
6707
+
6708
+ .utility-input, .utility-select, .utility-textarea, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-select, :where([data-ui="industrial-utility"]) .ui-textarea {
6709
+ min-height: 34px;
6710
+ min-block-size: 34px;
6711
+ font-size: 14px;
6712
+ }
6713
+
6714
+ .utility-label, .utility-help, .utility-control-name, :where([data-ui="industrial-utility"]) .ui-label {
6715
+ font-size: 12px;
6716
+ line-height: 1.3;
6717
+ }
6718
+
6719
+ .utility-button, .utility-tab, :where([data-ui="industrial-utility"]) .ui-button {
6720
+ font-size: 12px;
6721
+ }
6722
+
6723
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
6724
+ min-height: 22px;
6725
+ box-shadow: none;
6726
+ line-height: 1;
6727
+ }
6728
+
6729
+ .utility-table th, .utility-table td, :where([data-ui="industrial-utility"]) .ui-table th, :where([data-ui="industrial-utility"]) .ui-table td {
6730
+ border-inline: 1px solid var(--utility-material-line);
6731
+ }
6732
+
6733
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
6734
+ background: var(--utility-material-header);
6735
+ color: var(--utility-material-header-ink);
6736
+ }
6737
+
6738
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
6739
+ background: none;
6740
+ }
6741
+
6742
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
6743
+ border-radius: 1px;
6744
+ overflow-x: auto;
6745
+ }
6746
+
6747
+ .utility-check input, .utility-radio input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
6748
+ flex: 0 0 15px;
6749
+ min-inline-size: 15px;
6750
+ }
6751
+
6752
+ .utility-check input:not(:has( + .utility-check-control)), .utility-radio input:not(:has( + .utility-radio-control)), :where([data-ui="industrial-utility"]) .ui-check input:not(:has(+.ui-check-control)), :where([data-ui="industrial-utility"]) .ui-radio input:not(:has(+.ui-radio-control)) {
6753
+ opacity: 1;
6754
+ pointer-events: auto;
6755
+ position: static;
6756
+ }
6757
+
6758
+ [data-ui="industrial-utility"] input[type="range"] {
6759
+ min-block-size: 24px;
6760
+ height: 24px;
6761
+ box-shadow: none;
6762
+ background: none;
6763
+ border: 0;
6764
+ padding: 0;
6765
+ }
6766
+
6767
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-runnable-track {
6768
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
6769
+ border: 1px solid var(--utility-material-steel-dark);
6770
+ height: 8px;
6771
+ box-shadow: var(--utility-material-inset-shadow);
6772
+ }
6773
+
6774
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb {
6775
+ margin-top: -8px;
6776
+ }
6777
+
6778
+ [data-ui="industrial-utility"] input[type="range"]::-moz-range-track {
6779
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
6780
+ border: 1px solid var(--utility-material-steel-dark);
6781
+ height: 8px;
6782
+ box-shadow: var(--utility-material-inset-shadow);
6783
+ }
6784
+
6785
+ [data-ui="industrial-utility"] :is(.utility-pagination, .utility-segmented) button {
6786
+ border-color: var(--utility-material-line-strong);
6787
+ }
6788
+
6789
+ .utility-nameplate {
6790
+ white-space: nowrap;
6791
+ flex-shrink: 0;
6792
+ }
6793
+
6794
+ .utility-popover h3 {
6795
+ font: 800 12px var(--utility-material-font-display);
6796
+ text-transform: uppercase;
6797
+ margin: 0 0 8px;
6798
+ }
6799
+
6800
+ .utility-toggle input {
6801
+ flex: 0 0 48px;
6802
+ min-block-size: 24px;
6803
+ min-inline-size: 48px;
6804
+ }
6805
+
6806
+ .utility-toggle input:after {
6807
+ box-sizing: border-box;
6808
+ }
6809
+
6810
+ .utility-stage {
6811
+ margin: 0;
6812
+ }
6813
+
6814
+ .utility-stage b {
6815
+ color: var(--utility-material-text);
6816
+ }
6817
+
6818
+ .utility-stage.is-complete b {
6819
+ color: var(--utility-on-success);
6820
+ }
6821
+
6822
+ .utility-stage.is-current b {
6823
+ color: var(--utility-on-primary);
6824
+ }
6825
+
6826
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
6827
+ box-shadow: var(--utility-material-bevel);
6828
+ }
6829
+
6830
+ .utility-alert, .utility-alert strong, .utility-dialog p, .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), :where([data-ui="industrial-utility"]) .ui-alert, :where([data-ui="industrial-utility"]) .ui-alert strong {
6831
+ font-size: 14px;
6832
+ line-height: 1.4;
6833
+ }
6834
+
6835
+ .utility-spinner {
6836
+ clip-path: none;
6837
+ width: 20px;
6838
+ height: 20px;
6839
+ box-shadow: none;
6840
+ background: none;
6841
+ flex: 0 0 20px;
6842
+ display: inline-block;
6843
+ }
6844
+
6845
+ .utility-dropdown {
6846
+ background: var(--utility-material-input);
6847
+ border: 1px solid var(--utility-material-line-strong);
6848
+ box-shadow: var(--utility-material-inset-shadow);
6849
+ padding: 0;
6850
+ }
6851
+
6852
+ .utility-option {
6853
+ width: 100%;
6854
+ color: var(--utility-material-text);
6855
+ text-align: left;
6856
+ font: 14px var(--utility-font-body);
6857
+ background: none;
6858
+ border: 0;
6859
+ border-radius: 0;
6860
+ padding: 8px;
6861
+ display: block;
6862
+ }
6863
+
6864
+ .utility-option[aria-selected="true"] {
6865
+ background: var(--utility-material-badge-info);
6866
+ color: var(--utility-material-badge-info-ink);
6867
+ }
6868
+
6869
+ .utility-nameplate {
6870
+ min-block-size: 50px;
6871
+ min-inline-size: 92px;
6872
+ color: var(--utility-material-header-ink);
6873
+ border: 1px solid var(--utility-material-safety-amber);
6874
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,var(--utility-material-header) 7px 14px);
6875
+ font: 900 14px var(--utility-font-display);
6876
+ justify-content: center;
6877
+ align-items: center;
6878
+ padding: 8px;
6879
+ display: inline-flex;
6880
+ }
6881
+
6882
+ .utility-nameplate > span {
6883
+ background: var(--utility-material-header);
6884
+ padding: 7px;
6885
+ }
6886
+
6887
+ .utility-key-switch {
6888
+ --utility-key-angle: -28deg;
6889
+ min-height: 48px;
6890
+ padding: 0;
6891
+ }
6892
+
6893
+ .utility-key-switch:after {
6894
+ height: 28px;
6895
+ transform: rotate(var(--utility-key-angle));
6896
+ }
6897
+
6898
+ .utility-key-switch[data-position="on"] {
6899
+ --utility-key-angle: 28deg;
6900
+ }
6901
+
6902
+ .utility-key-switch[data-position="off"] {
6903
+ --utility-key-angle: -60deg;
6904
+ }
6905
+
6906
+ .utility-emergency-stop {
6907
+ flex: 0 0 48px;
6908
+ min-height: 48px;
6909
+ padding: 0;
6910
+ }
6911
+
6912
+ .utility-readout {
6913
+ text-shadow: none;
6914
+ background-color: #08100c;
6915
+ }
6916
+
6917
+ .utility-readout output {
6918
+ color: var(--utility-material-readout-ink);
6919
+ }
6920
+
6921
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
6922
+ padding: 0;
6923
+ }
6924
+
6925
+ [data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button {
6926
+ background: var(--utility-material-surface-low);
6927
+ border: 1px solid var(--utility-material-line-strong);
6928
+ color: var(--utility-material-text-soft);
6929
+ box-shadow: none;
6930
+ }
6931
+
6932
+ [data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button.is-active {
6933
+ background: var(--utility-material-safety-amber);
6934
+ color: var(--utility-material-safety-ink);
6935
+ }
6936
+
6937
+ [data-ui="industrial-utility"] .utility-input[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-input[aria-invalid="true"] {
6938
+ border: 2px solid var(--utility-material-hazard-red);
6939
+ }
6940
+
6941
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6942
+ opacity: 1;
6943
+ visibility: visible;
6944
+ inset: auto;
6945
+ transform: none;
6946
+ }
6947
+
6948
+ .utility-toast {
6949
+ align-items: center;
6950
+ gap: 8px;
6951
+ padding: 12px;
6952
+ display: flex;
6953
+ }
6954
+
6955
+ .utility-dialog::backdrop {
6956
+ background: #000000a6;
6957
+ }
6958
+
6959
+ dialog.utility-dialog:not([open]) {
6960
+ display: none;
6961
+ }
6962
+
6963
+ div.utility-dialog {
6964
+ display: block;
6965
+ }
6966
+
6967
+ [data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) {
6968
+ background-image: none;
6969
+ }
6970
+
6971
+ .utility-callout-bar > .utility-button.utility-button-outline-heavy, :where([data-ui="industrial-utility"]) .utility-callout-bar>.ui-button.utility-button-outline-heavy {
6972
+ background: linear-gradient(180deg,var(--utility-material-surface-raised),var(--utility-material-surface-low));
6973
+ color: var(--utility-material-text);
6974
+ border: 1px solid var(--utility-material-line-strong);
6975
+ border-radius: var(--utility-material-radius);
6976
+ clip-path: none;
6977
+ box-shadow: var(--utility-material-bevel);
6978
+ }
6979
+
6980
+ .utility-callout-bar > .utility-button.utility-button-outline-heavy:is(:hover, :focus-visible), :where([data-ui="industrial-utility"]) .utility-callout-bar>.ui-button.utility-button-outline-heavy:is(:hover,:focus-visible) {
6981
+ background: linear-gradient(180deg,var(--utility-primary-hover),var(--utility-primary));
6982
+ color: var(--utility-on-primary);
6983
+ border-color: var(--utility-primary);
6984
+ }
6985
+
6986
+ .utility-callout-bar > .utility-icon-medallion {
6987
+ justify-content: center;
6988
+ align-items: center;
6989
+ display: flex;
6990
+ }
6991
+
6992
+ .utility-badge-seal > strong {
6993
+ font-size: 13px;
6994
+ }
6995
+
6996
+ .utility-badge-seal > small {
6997
+ font-size: 11px;
6998
+ }
6999
+
7000
+ .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
7001
+ border-color: var(--utility-warning);
7002
+ box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb)/.28);
7003
+ font-size: 10px;
7004
+ animation: 1.1s steps(2, end) infinite utility-warning-signal;
7005
+ }
7006
+
7007
+ @keyframes utility-warning-signal {
7008
+ 50% {
7009
+ box-shadow: 0 0 0 2px rgb(var(--utility-warning-rgb)/.6),0 0 8px rgb(var(--utility-warning-rgb)/.42);
7010
+ filter: brightness(1.25);
7011
+ }
7012
+ }
7013
+
7014
+ .utility-tooltip-top:before {
7015
+ inset: auto auto -5px 50%;
7016
+ transform: translateX(-50%) rotate(45deg);
7017
+ }
7018
+
7019
+ .utility-tooltip-right:before {
7020
+ inset: 50% auto auto -5px;
7021
+ transform: translateY(-50%) rotate(45deg);
7022
+ }
7023
+
7024
+ .utility-tooltip-bottom:before {
7025
+ inset: -5px auto auto 50%;
7026
+ transform: translateX(-50%) rotate(45deg);
7027
+ }
7028
+
7029
+ .utility-tooltip-left:before {
7030
+ inset: 50% -5px auto auto;
7031
+ transform: translateY(-50%) rotate(45deg);
7032
+ }
7033
+
7034
+ [data-ui="industrial-utility"][data-mode] input[type="time"] {
7035
+ background-image: linear-gradient(180deg,var(--utility-material-surface-raised),var(--utility-material-input));
7036
+ }
7037
+
7038
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked {
7039
+ background-color: var(--utility-material-lamp-green);
7040
+ border-color: var(--utility-material-steel-dark);
7041
+ }
7042
+
7043
+ @media (prefers-reduced-motion: reduce) {
7044
+ .utility-spinner, .utility-skeleton, .utility-button.is-loading:before, .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
7045
+ animation: none !important;
7046
+ }
7047
+ }
7048
+
7049
+ .utility-button.is-alarm, .utility-badge-danger, .utility-alert-danger, .utility-pilot-light.is-red:not(.is-off), :where([data-ui="industrial-utility"]) .ui-button.is-alarm, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
7050
+ animation: 1.1s steps(2, end) infinite utility-danger-signal;
7051
+ }
7052
+
7053
+ @keyframes utility-danger-signal {
7054
+ 50% {
7055
+ box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb)/.6),0 0 8px rgb(var(--utility-danger-rgb)/.42);
7056
+ filter: brightness(1.25);
7057
+ }
7058
+ }
7059
+
7060
+ .utility-spinner, .utility-loading-spinner, [data-ui="industrial-utility"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .utility-button.is-loading:before, .utility-button[aria-busy="true"]:not(.is-loading):after, [data-ui="industrial-utility"] button:not([class])[aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:not(.is-loading):after {
7061
+ content: "";
7062
+ background: conic-gradient(currentColor 0 12.5%,transparent 0 25%,currentColor 0 37.5%,transparent 0 50%,currentColor 0 62.5%,transparent 0 75%,currentColor 0 87.5%,transparent 0);
7063
+ clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
7064
+ box-shadow: none;
7065
+ border: 0;
7066
+ border-radius: 0;
7067
+ flex-shrink: 0;
7068
+ animation: .8s steps(8, end) infinite utility-spin;
7069
+ display: inline-block;
7070
+ }
7071
+
7072
+ .utility-button.is-loading:before, .utility-button[aria-busy="true"]:not(.is-loading):after, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:not(.is-loading):after {
7073
+ flex-basis: 14px;
7074
+ block-size: 14px;
7075
+ inline-size: 14px;
7076
+ }
7077
+
7078
+ .utility-panel {
7079
+ padding: 16px;
7080
+ }
7081
+
7082
+ .utility-panel:has( > .utility-panel-body) {
7083
+ padding: 0;
7084
+ }
7085
+
7086
+ .utility-textarea, [data-ui="industrial-utility"] textarea, :where([data-ui="industrial-utility"]) .ui-textarea {
7087
+ line-height: 18px;
7088
+ }
7089
+
7090
+ .utility-textarea[rows="1"], [data-ui="industrial-utility"] textarea[rows="1"], :where([data-ui="industrial-utility"]) .ui-textarea[rows="1"] {
7091
+ box-sizing: border-box;
7092
+ height: 34px;
7093
+ min-height: 34px;
7094
+ padding-block: 7px;
7095
+ }
7096
+
7097
+ .utility-file, [data-ui="industrial-utility"][data-mode] input[type="file"] {
7098
+ box-sizing: border-box;
7099
+ height: 34px;
7100
+ background: var(--utility-material-input);
7101
+ border: 1px solid var(--utility-material-line-strong);
7102
+ min-block-size: 34px;
7103
+ box-shadow: var(--utility-material-inset-shadow);
7104
+ color: var(--utility-material-text);
7105
+ padding: 2px;
7106
+ line-height: 28px;
7107
+ }
7108
+
7109
+ .utility-file::file-selector-button {
7110
+ box-sizing: border-box;
7111
+ vertical-align: top;
7112
+ height: 28px;
7113
+ margin-block: 0;
7114
+ padding-block: 0;
7115
+ line-height: 26px;
7116
+ }
7117
+
7118
+ [data-ui="industrial-utility"][data-mode] input[type="file"]::file-selector-button {
7119
+ box-sizing: border-box;
7120
+ vertical-align: top;
7121
+ height: 28px;
7122
+ margin-block: 0;
7123
+ padding-block: 0;
7124
+ line-height: 26px;
7125
+ }
7126
+
7127
+ .utility-select[multiple], [data-ui="industrial-utility"][data-mode] select[multiple], :where([data-ui="industrial-utility"]) .ui-select[multiple] {
7128
+ background: var(--utility-material-input);
7129
+ height: auto;
7130
+ min-height: 88px;
7131
+ box-shadow: var(--utility-material-inset-shadow);
7132
+ padding: 6px;
7133
+ }
7134
+
7135
+ [data-ui="industrial-utility"][data-mode] select[multiple] option {
7136
+ background: none;
7137
+ padding: 3px 8px;
7138
+ line-height: 1.4;
7139
+ }
7140
+
7141
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"]) {
7142
+ background: var(--utility-material-lamp-green);
7143
+ box-shadow: inset 0 0 0 4px var(--utility-material-input),var(--utility-material-inset-shadow);
7144
+ }
7145
+
7146
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"]):after {
7147
+ content: none;
7148
+ }
7149
+
7150
+ .utility-check input:checked + .utility-check-control:after, :where([data-ui="industrial-utility"]) .ui-check input:checked+.ui-check-control:after {
7151
+ content: "";
7152
+ background: var(--utility-on-primary);
7153
+ width: 50%;
7154
+ height: 50%;
7155
+ }
7156
+
7157
+ .utility-card-service > .utility-icon-medallion {
7158
+ font-size: 36px;
7159
+ line-height: 1;
7160
+ }
7161
+
7162
+ .utility-button.utility-button-primary, [data-ui="industrial-utility"][data-mode] a.utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button.ui-button:where([data-ui-variant="primary"]), :where([data-ui="industrial-utility"])[data-mode] a.ui-button:where([data-ui-variant="primary"]) {
7163
+ color: var(--utility-on-primary);
7164
+ }
7165
+
7166
+ .utility-icon-button:has( > svg:only-child), [data-ui="industrial-utility"] button:has( > svg:only-child), :where([data-ui="industrial-utility"]) .ui-icon-button:has(>svg:only-child) {
7167
+ min-block-size: 38px;
7168
+ min-inline-size: 38px;
7169
+ padding: 0;
7170
+ }
7171
+
7172
+ [data-ui="industrial-utility"] button > svg:only-child {
7173
+ flex: 0 0 20px;
7174
+ min-block-size: 20px;
7175
+ min-inline-size: 20px;
7176
+ }
7177
+
7178
+ .utility-table, [data-ui="industrial-utility"][data-mode] table, :where([data-ui="industrial-utility"]) .ui-table {
7179
+ border-collapse: collapse;
7180
+ border: 1px solid var(--utility-material-line-strong);
7181
+ font: 14px/1.4 var(--utility-material-font-body);
7182
+ border-radius: 1px;
7183
+ }
7184
+
7185
+ .utility-table th, [data-ui="industrial-utility"][data-mode] th, :where([data-ui="industrial-utility"]) .ui-table th {
7186
+ background: var(--utility-material-header);
7187
+ color: var(--utility-material-header-ink);
7188
+ font: 800 12px/1.4 var(--utility-material-font-display);
7189
+ text-transform: uppercase;
7190
+ letter-spacing: 0;
7191
+ border: 1px solid var(--utility-material-line);
7192
+ padding: 10px 12px;
7193
+ }
7194
+
7195
+ .utility-table td, [data-ui="industrial-utility"][data-mode] td, :where([data-ui="industrial-utility"]) .ui-table td {
7196
+ border: 1px solid var(--utility-material-line);
7197
+ color: var(--utility-material-text);
7198
+ padding: 10px 12px;
7199
+ }
7200
+
7201
+ [data-ui="industrial-utility"][data-mode] tbody tr:nth-child(2n) {
7202
+ background: var(--utility-material-surface-low);
7203
+ }
7204
+
7205
+ [data-ui="industrial-utility"][data-mode] caption {
7206
+ border: 1px solid var(--utility-material-line);
7207
+ text-align: left;
7208
+ font: 12px/1.4 var(--utility-material-font-body);
7209
+ color: var(--utility-material-text-soft);
7210
+ border-top: 0;
7211
+ padding: 10px 12px;
7212
+ }
7213
+
7214
+ @media (prefers-reduced-motion: reduce) {
7215
+ .utility-button.is-alarm, .utility-badge-danger, .utility-alert-danger, .utility-pilot-light.is-red, .utility-spinner, .utility-loading-spinner, .utility-button.is-loading:before, .utility-button[aria-busy="true"]:after, [data-ui="industrial-utility"] [aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button.is-alarm, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:after {
7216
+ animation: none !important;
7217
+ }
7218
+ }
7219
+
7220
+ @media (pointer: coarse) {
7221
+ .utility-button, .utility-icon-button, .utility-tab, .utility-option, .utility-pagination button, .utility-segmented button, .utility-three-position button, .utility-check, .utility-radio, .utility-toggle, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button, :where([data-ui="industrial-utility"]) .ui-check, :where([data-ui="industrial-utility"]) .ui-radio {
7222
+ min-block-size: 44px;
7223
+ }
7224
+ }
7225
+
7226
+ @media (forced-colors: active) {
7227
+ .utility-button, .utility-input, .utility-panel, .utility-check input, .utility-radio input, .utility-toggle input, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
7228
+ border: 1px solid buttontext;
7229
+ }
7230
+
7231
+ .utility-check input:checked, .utility-radio input:checked, :where([data-ui="industrial-utility"]) .ui-check input:checked, :where([data-ui="industrial-utility"]) .ui-radio input:checked {
7232
+ background: highlight;
7233
+ }
7234
+ }
7235
+
7236
+ .utility-pilot-light.is-warning {
7237
+ background: radial-gradient(circle at 40% 32%,#fff9cf 0 7%,var(--utility-warning) 28%,rgb(var(--utility-warning-rgb)/.5) 78%);
7238
+ box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb)/.2),0 0 8px rgb(var(--utility-warning-rgb)/.55);
7239
+ animation: 1.1s steps(2, end) infinite utility-warning-signal;
7240
+ }
7241
+
7242
+ .utility-feature-item:first-child > .utility-icon-medallion {
7243
+ font-size: 36px;
7244
+ line-height: 1;
7245
+ }
7246
+
7247
+ @media (prefers-reduced-motion: reduce) {
7248
+ .utility-pilot-light.is-warning {
7249
+ animation: none !important;
7250
+ }
7251
+ }
7252
+
7253
+ [data-ui="industrial-utility"][data-mode] .utility-button.utility-button-warning, :where([data-ui="industrial-utility"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
7254
+ background: var(--utility-warning);
7255
+ color: var(--utility-on-warning);
7256
+ border-color: var(--utility-warning);
7257
+ text-shadow: none;
7258
+ }
4797
7259
  }