@accelint/design-toolkit 2.4.0 → 2.4.2

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 (14) hide show
  1. package/dist/components/checkbox/styles.js +1 -1
  2. package/dist/components/checkbox/styles.js.map +1 -1
  3. package/dist/components/input/index.js +1 -1
  4. package/dist/components/input/index.js.map +1 -1
  5. package/dist/components/input/styles.d.ts +12 -0
  6. package/dist/components/input/styles.js +1 -1
  7. package/dist/components/input/styles.js.map +1 -1
  8. package/dist/index.css +13 -87
  9. package/dist/metafile-esm.json +1 -1
  10. package/dist/styles.css +416 -396
  11. package/dist/tokens/themes.css +60 -60
  12. package/dist/variants/variants.css +58 -0
  13. package/dist/variants/variants.d.ts +2 -0
  14. package/package.json +5 -4
package/dist/styles.css CHANGED
@@ -153,66 +153,66 @@
153
153
  --color-classification-secret: var(--colors-classification-secret, #c8102e);
154
154
  --color-classification-top-secret: var(--colors-classification-top-secret, #ff8c00);
155
155
  --color-classification-ts-sci: var(--colors-classification-ts-sci, #fce83a);
156
- --typography-header-xxl-size: var(--typography-header-xxl-size);
157
- --typography-header-xxl-height: var(--typography-header-xxl-height);
158
- --typography-header-xxl-spacing: var(--typography-header-xxl-spacing);
159
- --typography-header-xl-size: var(--typography-header-xl-size);
160
- --typography-header-xl-height: var(--typography-header-xl-height);
161
- --typography-header-xl-spacing: var(--typography-header-xl-spacing);
162
- --typography-header-l-size: var(--typography-header-l-size);
163
- --typography-header-l-height: var(--typography-header-l-height);
164
- --typography-header-l-spacing: var(--typography-header-l-spacing);
165
- --typography-header-m-size: var(--typography-header-m-size);
166
- --typography-header-m-height: var(--typography-header-m-height);
167
- --typography-header-m-spacing: var(--typography-header-m-spacing);
168
- --typography-header-s-size: var(--typography-header-s-size);
169
- --typography-header-s-height: var(--typography-header-s-height);
170
- --typography-header-s-spacing: var(--typography-header-s-spacing);
171
- --typography-header-xs-size: var(--typography-header-xs-size);
172
- --typography-header-xs-height: var(--typography-header-xs-height);
173
- --typography-header-xs-spacing: var(--typography-header-xs-spacing);
174
- --typography-body-l-size: var(--typography-body-l-size);
175
- --typography-body-l-height: var(--typography-body-l-height);
176
- --typography-body-l-spacing: var(--typography-body-l-spacing);
177
- --typography-body-m-size: var(--typography-body-m-size);
178
- --typography-body-m-height: var(--typography-body-m-height);
179
- --typography-body-m-spacing: var(--typography-body-m-spacing);
180
- --typography-body-s-size: var(--typography-body-s-size);
181
- --typography-body-s-height: var(--typography-body-s-height);
182
- --typography-body-s-spacing: var(--typography-body-s-spacing);
183
- --typography-body-xs-size: var(--typography-body-xs-size);
184
- --typography-body-xs-height: var(--typography-body-xs-height);
185
- --typography-body-xs-spacing: var(--typography-body-xs-spacing);
186
- --typography-body-xxs-size: var(--typography-body-xxs-size);
187
- --typography-body-xxs-height: var(--typography-body-xxs-height);
188
- --typography-body-xxs-spacing: var(--typography-body-xxs-spacing);
189
- --typography-button-l-size: var(--typography-button-l-size);
190
- --typography-button-l-height: var(--typography-button-l-height);
191
- --typography-button-l-spacing: var(--typography-button-l-spacing);
192
- --typography-button-m-size: var(--typography-button-m-size);
193
- --typography-button-m-height: var(--typography-button-m-height);
194
- --typography-button-m-spacing: var(--typography-button-m-spacing);
195
- --typography-button-s-size: var(--typography-button-s-size);
196
- --typography-button-s-height: var(--typography-button-s-height);
197
- --typography-button-s-spacing: var(--typography-button-s-spacing);
198
- --typography-button-xs-size: var(--typography-button-xs-size);
199
- --typography-button-xs-height: var(--typography-button-xs-height);
200
- --typography-button-xs-spacing: var(--typography-button-xs-spacing);
201
- --spacing-0: var(--spacing-0);
202
- --spacing-none: var(--spacing-none);
203
- --spacing-xxs: var(--spacing-xxs);
204
- --spacing-xs: var(--spacing-xs);
205
- --spacing-s: var(--spacing-s);
206
- --spacing-m: var(--spacing-m);
207
- --spacing-l: var(--spacing-l);
208
- --spacing-xl: var(--spacing-xl);
209
- --spacing-xxl: var(--spacing-xxl);
210
- --spacing-oversized: var(--spacing-oversized);
211
- --radius-none: var(--radius-none);
212
- --radius-small: var(--radius-small);
213
- --radius-medium: var(--radius-medium);
214
- --radius-large: var(--radius-large);
215
- --radius-round: var(--radius-round);
156
+ --typography-header-xxl-size: var(--typography-header-xxl-size, 32px);
157
+ --typography-header-xxl-height: var(--typography-header-xxl-height, 40px);
158
+ --typography-header-xxl-spacing: var(--typography-header-xxl-spacing, 0px);
159
+ --typography-header-xl-size: var(--typography-header-xl-size, 24px);
160
+ --typography-header-xl-height: var(--typography-header-xl-height, 28px);
161
+ --typography-header-xl-spacing: var(--typography-header-xl-spacing, 0.18px);
162
+ --typography-header-l-size: var(--typography-header-l-size, 20px);
163
+ --typography-header-l-height: var(--typography-header-l-height, 24px);
164
+ --typography-header-l-spacing: var(--typography-header-l-spacing, 0.18px);
165
+ --typography-header-m-size: var(--typography-header-m-size, 14px);
166
+ --typography-header-m-height: var(--typography-header-m-height, 20px);
167
+ --typography-header-m-spacing: var(--typography-header-m-spacing, 0.25px);
168
+ --typography-header-s-size: var(--typography-header-s-size, 12px);
169
+ --typography-header-s-height: var(--typography-header-s-height, 16px);
170
+ --typography-header-s-spacing: var(--typography-header-s-spacing, 0.4px);
171
+ --typography-header-xs-size: var(--typography-header-xs-size, 10px);
172
+ --typography-header-xs-height: var(--typography-header-xs-height, 12px);
173
+ --typography-header-xs-spacing: var(--typography-header-xs-spacing, 0.25px);
174
+ --typography-body-l-size: var(--typography-body-l-size, 16px);
175
+ --typography-body-l-height: var(--typography-body-l-height, 24px);
176
+ --typography-body-l-spacing: var(--typography-body-l-spacing, 0.5px);
177
+ --typography-body-m-size: var(--typography-body-m-size, 14px);
178
+ --typography-body-m-height: var(--typography-body-m-height, 20px);
179
+ --typography-body-m-spacing: var(--typography-body-m-spacing, 0.25px);
180
+ --typography-body-s-size: var(--typography-body-s-size, 12px);
181
+ --typography-body-s-height: var(--typography-body-s-height, 16px);
182
+ --typography-body-s-spacing: var(--typography-body-s-spacing, 0.4px);
183
+ --typography-body-xs-size: var(--typography-body-xs-size, 10px);
184
+ --typography-body-xs-height: var(--typography-body-xs-height, 12px);
185
+ --typography-body-xs-spacing: var(--typography-body-xs-spacing, 0.5px);
186
+ --typography-body-xxs-size: var(--typography-body-xxs-size, 9px);
187
+ --typography-body-xxs-height: var(--typography-body-xxs-height, 12px);
188
+ --typography-body-xxs-spacing: var(--typography-body-xxs-spacing, 0.25px);
189
+ --typography-button-l-size: var(--typography-button-l-size, 16px);
190
+ --typography-button-l-height: var(--typography-button-l-height, 24px);
191
+ --typography-button-l-spacing: var(--typography-button-l-spacing, 0.5px);
192
+ --typography-button-m-size: var(--typography-button-m-size, 14px);
193
+ --typography-button-m-height: var(--typography-button-m-height, 20px);
194
+ --typography-button-m-spacing: var(--typography-button-m-spacing, 0.25px);
195
+ --typography-button-s-size: var(--typography-button-s-size, 12px);
196
+ --typography-button-s-height: var(--typography-button-s-height, 16px);
197
+ --typography-button-s-spacing: var(--typography-button-s-spacing, 0.4px);
198
+ --typography-button-xs-size: var(--typography-button-xs-size, 10px);
199
+ --typography-button-xs-height: var(--typography-button-xs-height, 12px);
200
+ --typography-button-xs-spacing: var(--typography-button-xs-spacing, 0.5px);
201
+ --spacing-0: var(--spacing-0, 0px);
202
+ --spacing-none: var(--spacing-none, unset);
203
+ --spacing-xxs: var(--spacing-xxs, 2px);
204
+ --spacing-xs: var(--spacing-xs, 4px);
205
+ --spacing-s: var(--spacing-s, 8px);
206
+ --spacing-m: var(--spacing-m, 12px);
207
+ --spacing-l: var(--spacing-l, 16px);
208
+ --spacing-xl: var(--spacing-xl, 24px);
209
+ --spacing-xxl: var(--spacing-xxl, 40px);
210
+ --spacing-oversized: var(--spacing-oversized, 80px);
211
+ --radius-none: var(--radius-none, 0px);
212
+ --radius-small: var(--radius-small, 2px);
213
+ --radius-medium: var(--radius-medium, 4px);
214
+ --radius-large: var(--radius-large, 8px);
215
+ --radius-round: var(--radius-round, 80px);
216
216
  --shadow-elevation-default: var(--shadow-elevation-default);
217
217
  --shadow-elevation-overlay: var(--shadow-elevation-overlay);
218
218
  --shadow-elevation-raised: var(--shadow-elevation-raised);
@@ -1612,7 +1612,7 @@
1612
1612
  text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.15));
1613
1613
  }
1614
1614
  .group-not-focus-within\/input\:hidden {
1615
- &:is(:where(.group\/input):not(*[data-focus-within], *:focus-within) *) {
1615
+ &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
1616
1616
  display: none;
1617
1617
  }
1618
1618
  }
@@ -1622,186 +1622,201 @@
1622
1622
  }
1623
1623
  }
1624
1624
  .group-empty\:hidden {
1625
- &:is(:is(:where(.group)[data-empty], :where(.group):empty) *) {
1625
+ &:is(:where(.group):where([data-empty], :empty) *) {
1626
1626
  display: none;
1627
1627
  }
1628
1628
  }
1629
1629
  .group-hover\/item\:fg-inverse-light {
1630
- &:is(:is(:where(.group\/item)[data-hovered], :where(.group\/item):hover) *) {
1630
+ &:is(:where(.group\/item):where([data-hovered], :hover) *) {
1631
1631
  color: var(--color-inverse-light);
1632
1632
  --icon-color: var(--color-inverse-light);
1633
1633
  }
1634
1634
  }
1635
1635
  .group-enabled\/checkbox\:fg-info-subtle {
1636
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1636
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1637
1637
  color: var(--color-info-subtle);
1638
1638
  --icon-color: var(--color-info-subtle);
1639
1639
  }
1640
1640
  }
1641
1641
  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:bg-highlight {
1642
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1643
- &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
1642
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1643
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1644
1644
  background-color: var(--color-highlight);
1645
1645
  }
1646
1646
  }
1647
1647
  }
1648
1648
  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:outline-highlight {
1649
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1650
- &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
1649
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1650
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1651
1651
  outline-color: var(--color-highlight);
1652
1652
  }
1653
1653
  }
1654
1654
  }
1655
1655
  .group-enabled\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
1656
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1657
- &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
1656
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1657
+ &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
1658
1658
  outline-color: var(--color-interactive-hover);
1659
1659
  }
1660
1660
  }
1661
1661
  }
1662
1662
  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
1663
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1664
- &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
1665
- &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
1663
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1664
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1665
+ &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
1666
1666
  outline-color: var(--color-interactive-hover);
1667
1667
  }
1668
1668
  }
1669
1669
  }
1670
1670
  }
1671
1671
  .group-enabled\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
1672
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1673
- &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
1672
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1673
+ &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
1674
1674
  outline-color: var(--color-interactive-hover);
1675
1675
  }
1676
1676
  }
1677
1677
  }
1678
1678
  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
1679
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
1680
- &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
1681
- &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
1679
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
1680
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1681
+ &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
1682
1682
  outline-color: var(--color-interactive-hover);
1683
1683
  }
1684
1684
  }
1685
1685
  }
1686
1686
  }
1687
1687
  .group-enabled\/radio\:group-hover\/radio\:outline-interactive-hover {
1688
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
1689
- &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
1688
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
1689
+ &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
1690
1690
  outline-color: var(--color-interactive-hover);
1691
1691
  }
1692
1692
  }
1693
1693
  }
1694
1694
  .group-enabled\/radio\:group-focus\/radio\:outline-interactive-hover {
1695
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
1696
- &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
1695
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
1696
+ &:is(:where(.group\/radio):where([data-focused], :focus) *) {
1697
1697
  outline-color: var(--color-interactive-hover);
1698
1698
  }
1699
1699
  }
1700
1700
  }
1701
1701
  .group-enabled\/switch\:group-hover\/switch\:bg-interactive-hover-dark {
1702
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
1703
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
1702
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
1703
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
1704
1704
  background-color: var(--color-interactive-hover-dark);
1705
1705
  }
1706
1706
  }
1707
1707
  }
1708
1708
  .group-enabled\/switch\:group-hover\/switch\:outline-interactive-hover {
1709
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
1710
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
1709
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
1710
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
1711
1711
  outline-color: var(--color-interactive-hover);
1712
1712
  }
1713
1713
  }
1714
1714
  }
1715
1715
  .group-enabled\/switch\:group-focus\/switch\:bg-interactive-hover-dark {
1716
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
1717
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
1716
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
1717
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
1718
1718
  background-color: var(--color-interactive-hover-dark);
1719
1719
  }
1720
1720
  }
1721
1721
  }
1722
1722
  .group-enabled\/switch\:group-focus\/switch\:outline-interactive-hover {
1723
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
1724
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
1723
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
1724
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
1725
1725
  outline-color: var(--color-interactive-hover);
1726
1726
  }
1727
1727
  }
1728
1728
  }
1729
1729
  .group-enabled\/text-area-field\:group-invalid\/text-area-field\:outline-serious {
1730
- &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
1731
- &:is(:is(:where(.group\/text-area-field):is([invalid], [data-invalid]), :where(.group\/text-area-field):invalid) *) {
1730
+ &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
1731
+ &:is(:where(.group\/text-area-field):where([invalid], [data-invalid], :invalid) *) {
1732
1732
  outline-color: var(--color-serious);
1733
1733
  }
1734
1734
  }
1735
1735
  }
1736
1736
  .group-disabled\:hidden {
1737
- &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
1737
+ &:is(:where(.group):where([disabled], [data-disabled], :disabled) *) {
1738
1738
  display: none;
1739
1739
  }
1740
1740
  }
1741
1741
  .group-disabled\/accordion\:cursor-not-allowed {
1742
- &:is(:is(:where(.group\/accordion):is([disabled], [data-disabled]), :where(.group\/accordion):disabled) *) {
1742
+ &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
1743
1743
  cursor: not-allowed;
1744
1744
  }
1745
1745
  }
1746
1746
  .group-disabled\/accordion\:fg-disabled {
1747
- &:is(:is(:where(.group\/accordion):is([disabled], [data-disabled]), :where(.group\/accordion):disabled) *) {
1747
+ &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
1748
1748
  color: var(--color-disabled);
1749
1749
  --icon-color: var(--color-disabled);
1750
1750
  }
1751
1751
  }
1752
1752
  .group-disabled\/checkbox\:text-interactive-disabled {
1753
- &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
1753
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
1754
1754
  color: var(--color-interactive-disabled);
1755
1755
  }
1756
1756
  }
1757
1757
  .group-disabled\/checkbox\:outline-interactive-disabled {
1758
- &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
1758
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
1759
1759
  outline-color: var(--color-interactive-disabled);
1760
1760
  }
1761
1761
  }
1762
+ .group-disabled\/checkbox\:group-indeterminate\/checkbox\:bg-interactive-disabled {
1763
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
1764
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1765
+ background-color: var(--color-interactive-disabled);
1766
+ }
1767
+ }
1768
+ }
1769
+ .group-disabled\/checkbox\:group-indeterminate\/checkbox\:fg-inverse-light {
1770
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
1771
+ &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
1772
+ color: var(--color-inverse-light);
1773
+ --icon-color: var(--color-inverse-light);
1774
+ }
1775
+ }
1776
+ }
1762
1777
  .group-disabled\/radio\:text-interactive-disabled {
1763
- &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
1778
+ &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
1764
1779
  color: var(--color-interactive-disabled);
1765
1780
  }
1766
1781
  }
1767
1782
  .group-disabled\/radio\:outline-interactive-disabled {
1768
- &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
1783
+ &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
1769
1784
  outline-color: var(--color-interactive-disabled);
1770
1785
  }
1771
1786
  }
1772
1787
  .group-disabled\/switch\:bg-interactive-disabled {
1773
- &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
1788
+ &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
1774
1789
  background-color: var(--color-interactive-disabled);
1775
1790
  }
1776
1791
  }
1777
1792
  .group-disabled\/switch\:text-interactive-disabled {
1778
- &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
1793
+ &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
1779
1794
  color: var(--color-interactive-disabled);
1780
1795
  }
1781
1796
  }
1782
1797
  .group-disabled\/switch\:outline-interactive-disabled {
1783
- &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
1798
+ &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
1784
1799
  outline-color: var(--color-interactive-disabled);
1785
1800
  }
1786
1801
  }
1787
1802
  .group-disabled\/text-area-field\:fg-disabled {
1788
- &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
1803
+ &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
1789
1804
  color: var(--color-disabled);
1790
1805
  --icon-color: var(--color-disabled);
1791
1806
  }
1792
1807
  }
1793
1808
  .group-disabled\/text-area-field\:text-disabled {
1794
- &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
1809
+ &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
1795
1810
  color: var(--color-disabled);
1796
1811
  }
1797
1812
  }
1798
1813
  .group-disabled\/text-area-field\:outline-interactive-disabled {
1799
- &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
1814
+ &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
1800
1815
  outline-color: var(--color-interactive-disabled);
1801
1816
  }
1802
1817
  }
1803
1818
  .group-disabled\/text-field\:fg-disabled {
1804
- &:is(:is(:where(.group\/text-field):is([disabled], [data-disabled]), :where(.group\/text-field):disabled) *) {
1819
+ &:is(:where(.group\/text-field):where([disabled], [data-disabled], :disabled) *) {
1805
1820
  color: var(--color-disabled);
1806
1821
  --icon-color: var(--color-disabled);
1807
1822
  }
@@ -1819,32 +1834,37 @@
1819
1834
  }
1820
1835
  }
1821
1836
  .group-size-medium\/input\:mr-xs {
1822
- &:is(:where(.group\/input)[data-size="medium"] *) {
1837
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1823
1838
  margin-right: var(--spacing-xs);
1824
1839
  }
1825
1840
  }
1826
1841
  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
1827
- &:is(:where(.group\/input)[data-size="medium"] *) {
1842
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1828
1843
  width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
1829
1844
  }
1830
1845
  }
1831
1846
  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
1832
- &:is(:where(.group\/input)[data-size="medium"] *) {
1847
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1833
1848
  width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
1834
1849
  }
1835
1850
  }
1836
1851
  .group-size-medium\/input\:max-w-\[400px\] {
1837
- &:is(:where(.group\/input)[data-size="medium"] *) {
1852
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1838
1853
  max-width: 400px;
1839
1854
  }
1840
1855
  }
1856
+ .group-size-medium\/input\:min-w-\[80px\] {
1857
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1858
+ min-width: 80px;
1859
+ }
1860
+ }
1841
1861
  .group-size-medium\/input\:min-w-\[160px\] {
1842
- &:is(:where(.group\/input)[data-size="medium"] *) {
1862
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1843
1863
  min-width: 160px;
1844
1864
  }
1845
1865
  }
1846
1866
  .group-size-medium\/input\:text-body-s {
1847
- &:is(:where(.group\/input)[data-size="medium"] *) {
1867
+ &:is(:where(.group\/input):where([data-size="medium"]) *) {
1848
1868
  font-size: var(--typography-body-s-size);
1849
1869
  font-weight: 400;
1850
1870
  letter-spacing: var(--typography-body-s-spacing);
@@ -1852,7 +1872,7 @@
1852
1872
  }
1853
1873
  }
1854
1874
  .group-size-medium\/text-area-field\:text-body-s {
1855
- &:is(:where(.group\/text-area-field)[data-size="medium"] *) {
1875
+ &:is(:where(.group\/text-area-field):where([data-size="medium"]) *) {
1856
1876
  font-size: var(--typography-body-s-size);
1857
1877
  font-weight: 400;
1858
1878
  letter-spacing: var(--typography-body-s-spacing);
@@ -1860,32 +1880,32 @@
1860
1880
  }
1861
1881
  }
1862
1882
  .group-size-small\/input\:mr-xxs {
1863
- &:is(:where(.group\/input)[data-size="small"] *) {
1883
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1864
1884
  margin-right: var(--spacing-xxs);
1865
1885
  }
1866
1886
  }
1867
1887
  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
1868
- &:is(:where(.group\/input)[data-size="small"] *) {
1888
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1869
1889
  width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
1870
1890
  }
1871
1891
  }
1872
1892
  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
1873
- &:is(:where(.group\/input)[data-size="small"] *) {
1893
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1874
1894
  width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
1875
1895
  }
1876
1896
  }
1877
1897
  .group-size-small\/input\:max-w-\[200px\] {
1878
- &:is(:where(.group\/input)[data-size="small"] *) {
1898
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1879
1899
  max-width: 200px;
1880
1900
  }
1881
1901
  }
1882
1902
  .group-size-small\/input\:min-w-\[calc\(2ch\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
1883
- &:is(:where(.group\/input)[data-size="small"] *) {
1903
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1884
1904
  min-width: calc(2ch + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
1885
1905
  }
1886
1906
  }
1887
1907
  .group-size-small\/input\:text-body-xs {
1888
- &:is(:where(.group\/input)[data-size="small"] *) {
1908
+ &:is(:where(.group\/input):where([data-size="small"]) *) {
1889
1909
  font-size: var(--typography-body-xs-size);
1890
1910
  font-weight: 400;
1891
1911
  letter-spacing: var(--typography-body-xs-spacing);
@@ -1893,7 +1913,7 @@
1893
1913
  }
1894
1914
  }
1895
1915
  .group-size-small\/text-area-field\:text-body-xs {
1896
- &:is(:where(.group\/text-area-field)[data-size="small"] *) {
1916
+ &:is(:where(.group\/text-area-field):where([data-size="small"]) *) {
1897
1917
  font-size: var(--typography-body-xs-size);
1898
1918
  font-weight: 400;
1899
1919
  letter-spacing: var(--typography-body-xs-spacing);
@@ -1901,214 +1921,214 @@
1901
1921
  }
1902
1922
  }
1903
1923
  .group-orientation-horizontal\:rounded-small {
1904
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1924
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1905
1925
  border-radius: var(--radius-small);
1906
1926
  }
1907
1927
  }
1908
1928
  .group-orientation-horizontal\:rounded-b-none {
1909
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1929
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1910
1930
  border-bottom-right-radius: 0;
1911
1931
  border-bottom-left-radius: 0;
1912
1932
  }
1913
1933
  }
1914
1934
  .group-orientation-horizontal\:rounded-b-none {
1915
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1935
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1916
1936
  border-bottom-right-radius: var(--radius-none);
1917
1937
  border-bottom-left-radius: var(--radius-none);
1918
1938
  }
1919
1939
  }
1920
1940
  .group-orientation-horizontal\:border-b {
1921
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1941
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1922
1942
  border-bottom-style: var(--tw-border-style);
1923
1943
  border-bottom-width: 1px;
1924
1944
  }
1925
1945
  }
1926
1946
  .group-orientation-horizontal\:border-highlight {
1927
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1947
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1928
1948
  border-color: var(--color-highlight);
1929
1949
  }
1930
1950
  }
1931
1951
  .group-orientation-horizontal\:border-interactive-disabled {
1932
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1952
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1933
1953
  border-color: var(--color-interactive-disabled);
1934
1954
  }
1935
1955
  }
1936
1956
  .group-orientation-horizontal\:border-interactive-hover {
1937
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1957
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1938
1958
  border-color: var(--color-interactive-hover);
1939
1959
  }
1940
1960
  }
1941
1961
  .group-orientation-horizontal\:border-static-light {
1942
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1962
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1943
1963
  border-color: var(--color-static-light);
1944
1964
  }
1945
1965
  }
1946
1966
  .group-orientation-horizontal\:pl-0 {
1947
- &:is(:where(.group)[data-orientation="horizontal"] *) {
1967
+ &:is(:where(.group):where([data-orientation="horizontal"]) *) {
1948
1968
  padding-left: var(--spacing-0);
1949
1969
  }
1950
1970
  }
1951
1971
  .group-orientation-horizontal\/checkbox-group\:grow {
1952
- &:is(:where(.group\/checkbox-group)[data-orientation="horizontal"] *) {
1972
+ &:is(:where(.group\/checkbox-group):where([data-orientation="horizontal"]) *) {
1953
1973
  flex-grow: 1;
1954
1974
  }
1955
1975
  }
1956
1976
  .group-orientation-horizontal\/checkbox-group\:basis-1\/3 {
1957
- &:is(:where(.group\/checkbox-group)[data-orientation="horizontal"] *) {
1977
+ &:is(:where(.group\/checkbox-group):where([data-orientation="horizontal"]) *) {
1958
1978
  flex-basis: calc(1/3 * 100%);
1959
1979
  }
1960
1980
  }
1961
1981
  .group-orientation-horizontal\/radio-group\:grow {
1962
- &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
1982
+ &:is(:where(.group\/radio-group):where([data-orientation="horizontal"]) *) {
1963
1983
  flex-grow: 1;
1964
1984
  }
1965
1985
  }
1966
1986
  .group-orientation-horizontal\/radio-group\:basis-1\/3 {
1967
- &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
1987
+ &:is(:where(.group\/radio-group):where([data-orientation="horizontal"]) *) {
1968
1988
  flex-basis: calc(1/3 * 100%);
1969
1989
  }
1970
1990
  }
1971
1991
  .group-orientation-vertical\:border {
1972
- &:is(:where(.group)[data-orientation="vertical"] *) {
1992
+ &:is(:where(.group):where([data-orientation="vertical"]) *) {
1973
1993
  border-style: var(--tw-border-style);
1974
1994
  border-width: 1px;
1975
1995
  }
1976
1996
  }
1977
1997
  .group-orientation-vertical\:border-interactive-hover {
1978
- &:is(:where(.group)[data-orientation="vertical"] *) {
1998
+ &:is(:where(.group):where([data-orientation="vertical"]) *) {
1979
1999
  border-color: var(--color-interactive-hover);
1980
2000
  }
1981
2001
  }
1982
2002
  .group-orientation-vertical\:border-transparent {
1983
- &:is(:where(.group)[data-orientation="vertical"] *) {
2003
+ &:is(:where(.group):where([data-orientation="vertical"]) *) {
1984
2004
  border-color: transparent;
1985
2005
  }
1986
2006
  }
1987
2007
  .group-orientation-vertical\:pt-0 {
1988
- &:is(:where(.group)[data-orientation="vertical"] *) {
2008
+ &:is(:where(.group):where([data-orientation="vertical"]) *) {
1989
2009
  padding-top: var(--spacing-0);
1990
2010
  }
1991
2011
  }
1992
2012
  .group-expanded\/accordion\:rotate-180 {
1993
- &:is(:where(.group\/accordion):is([expanded], [data-expanded]) *) {
2013
+ &:is(:where(.group\/accordion):where([expanded], [data-expanded]) *) {
1994
2014
  rotate: 180deg;
1995
2015
  }
1996
2016
  }
1997
2017
  .group-selected\:rotate-180 {
1998
- &:is(:is(:where(.group)[data-selected], :where(.group):checked) *) {
2018
+ &:is(:where(.group):where([data-selected], :checked) *) {
1999
2019
  rotate: 180deg;
2000
2020
  }
2001
2021
  }
2002
2022
  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
2003
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
2004
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2023
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
2024
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2005
2025
  background-color: var(--color-highlight);
2006
2026
  }
2007
2027
  }
2008
2028
  }
2009
2029
  .group-enabled\/checkbox\:group-selected\/checkbox\:outline-highlight {
2010
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
2011
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2030
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
2031
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2012
2032
  outline-color: var(--color-highlight);
2013
2033
  }
2014
2034
  }
2015
2035
  }
2016
2036
  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
2017
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
2018
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2019
- &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
2037
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
2038
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2039
+ &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
2020
2040
  outline-color: var(--color-interactive-hover);
2021
2041
  }
2022
2042
  }
2023
2043
  }
2024
2044
  }
2025
2045
  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
2026
- &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
2027
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2028
- &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
2046
+ &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
2047
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2048
+ &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
2029
2049
  outline-color: var(--color-interactive-hover);
2030
2050
  }
2031
2051
  }
2032
2052
  }
2033
2053
  }
2034
2054
  .group-disabled\/checkbox\:group-selected\/checkbox\:bg-interactive-disabled {
2035
- &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
2036
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2055
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
2056
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2037
2057
  background-color: var(--color-interactive-disabled);
2038
2058
  }
2039
2059
  }
2040
2060
  }
2041
2061
  .group-disabled\/checkbox\:group-selected\/checkbox\:fg-inverse-light {
2042
- &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
2043
- &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
2062
+ &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
2063
+ &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
2044
2064
  color: var(--color-inverse-light);
2045
2065
  --icon-color: var(--color-inverse-light);
2046
2066
  }
2047
2067
  }
2048
2068
  }
2049
2069
  .group-enabled\/radio\:group-selected\/radio\:outline-highlight {
2050
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
2051
- &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
2070
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
2071
+ &:is(:where(.group\/radio):where([data-selected], :checked) *) {
2052
2072
  outline-color: var(--color-highlight);
2053
2073
  }
2054
2074
  }
2055
2075
  }
2056
2076
  .group-enabled\/radio\:group-selected\/radio\:group-hover\/radio\:outline-interactive-hover {
2057
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
2058
- &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
2059
- &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
2077
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
2078
+ &:is(:where(.group\/radio):where([data-selected], :checked) *) {
2079
+ &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
2060
2080
  outline-color: var(--color-interactive-hover);
2061
2081
  }
2062
2082
  }
2063
2083
  }
2064
2084
  }
2065
2085
  .group-enabled\/radio\:group-selected\/radio\:group-focus\/radio\:outline-interactive-hover {
2066
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
2067
- &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
2068
- &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
2086
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
2087
+ &:is(:where(.group\/radio):where([data-selected], :checked) *) {
2088
+ &:is(:where(.group\/radio):where([data-focused], :focus) *) {
2069
2089
  outline-color: var(--color-interactive-hover);
2070
2090
  }
2071
2091
  }
2072
2092
  }
2073
2093
  }
2074
2094
  .group-enabled\/switch\:group-selected\/switch\:outline-highlight {
2075
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2076
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2095
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2096
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2077
2097
  outline-color: var(--color-highlight);
2078
2098
  }
2079
2099
  }
2080
2100
  }
2081
2101
  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:bg-highlight-subtle {
2082
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2083
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2084
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
2102
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2103
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2104
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
2085
2105
  background-color: var(--color-highlight-subtle);
2086
2106
  }
2087
2107
  }
2088
2108
  }
2089
2109
  }
2090
2110
  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:outline-highlight {
2091
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2092
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2093
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
2111
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2112
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2113
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
2094
2114
  outline-color: var(--color-highlight);
2095
2115
  }
2096
2116
  }
2097
2117
  }
2098
2118
  }
2099
2119
  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:bg-highlight-subtle {
2100
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2101
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2102
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
2120
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2121
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2122
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
2103
2123
  background-color: var(--color-highlight-subtle);
2104
2124
  }
2105
2125
  }
2106
2126
  }
2107
2127
  }
2108
2128
  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:outline-interactive-hover {
2109
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2110
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2111
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
2129
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2130
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2131
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
2112
2132
  outline-color: var(--color-interactive-hover);
2113
2133
  }
2114
2134
  }
@@ -2125,7 +2145,7 @@
2125
2145
  }
2126
2146
  }
2127
2147
  .group-disabled\/text-area-field\:placeholder\:text-disabled {
2128
- &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
2148
+ &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
2129
2149
  &::placeholder {
2130
2150
  color: var(--color-disabled);
2131
2151
  }
@@ -2170,8 +2190,8 @@
2170
2190
  }
2171
2191
  }
2172
2192
  .group-enabled\/switch\:group-hover\/switch\:before\:bg-interactive-hover {
2173
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2174
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
2193
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2194
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
2175
2195
  &::before {
2176
2196
  content: var(--tw-content);
2177
2197
  background-color: var(--color-interactive-hover);
@@ -2180,8 +2200,8 @@
2180
2200
  }
2181
2201
  }
2182
2202
  .group-enabled\/switch\:group-focus\/switch\:before\:bg-interactive-hover {
2183
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2184
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
2203
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2204
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
2185
2205
  &::before {
2186
2206
  content: var(--tw-content);
2187
2207
  background-color: var(--color-interactive-hover);
@@ -2190,7 +2210,7 @@
2190
2210
  }
2191
2211
  }
2192
2212
  .group-disabled\/switch\:before\:bg-disabled {
2193
- &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
2213
+ &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
2194
2214
  &::before {
2195
2215
  content: var(--tw-content);
2196
2216
  background-color: var(--color-disabled);
@@ -2198,8 +2218,8 @@
2198
2218
  }
2199
2219
  }
2200
2220
  .group-enabled\/radio\:group-selected\/radio\:before\:bg-highlight {
2201
- &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
2202
- &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
2221
+ &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
2222
+ &:is(:where(.group\/radio):where([data-selected], :checked) *) {
2203
2223
  &::before {
2204
2224
  content: var(--tw-content);
2205
2225
  background-color: var(--color-highlight);
@@ -2208,8 +2228,8 @@
2208
2228
  }
2209
2229
  }
2210
2230
  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
2211
- &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
2212
- &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
2231
+ &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
2232
+ &:is(:where(.group\/radio):where([data-selected], :checked) *) {
2213
2233
  &::before {
2214
2234
  content: var(--tw-content);
2215
2235
  background-color: var(--color-interactive-disabled);
@@ -2218,7 +2238,7 @@
2218
2238
  }
2219
2239
  }
2220
2240
  .group-selected\/switch\:before\:mr-0 {
2221
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2241
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2222
2242
  &::before {
2223
2243
  content: var(--tw-content);
2224
2244
  margin-right: var(--spacing-0);
@@ -2226,7 +2246,7 @@
2226
2246
  }
2227
2247
  }
2228
2248
  .group-selected\/switch\:before\:ml-l {
2229
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2249
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2230
2250
  &::before {
2231
2251
  content: var(--tw-content);
2232
2252
  margin-left: var(--spacing-l);
@@ -2234,8 +2254,8 @@
2234
2254
  }
2235
2255
  }
2236
2256
  .group-enabled\/switch\:group-selected\/switch\:before\:bg-highlight {
2237
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2238
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2257
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2258
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2239
2259
  &::before {
2240
2260
  content: var(--tw-content);
2241
2261
  background-color: var(--color-highlight);
@@ -2244,9 +2264,9 @@
2244
2264
  }
2245
2265
  }
2246
2266
  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:before\:bg-highlight {
2247
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2248
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2249
- &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
2267
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2268
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2269
+ &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
2250
2270
  &::before {
2251
2271
  content: var(--tw-content);
2252
2272
  background-color: var(--color-highlight);
@@ -2256,9 +2276,9 @@
2256
2276
  }
2257
2277
  }
2258
2278
  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:before\:bg-highlight {
2259
- &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
2260
- &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
2261
- &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
2279
+ &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
2280
+ &:is(:where(.group\/switch):where([data-selected], :checked) *) {
2281
+ &:is(:where(.group\/switch):where([data-focused], :focus) *) {
2262
2282
  &::before {
2263
2283
  content: var(--tw-content);
2264
2284
  background-color: var(--color-highlight);
@@ -2274,437 +2294,437 @@
2274
2294
  }
2275
2295
  }
2276
2296
  .open\:bg-highlight-bold {
2277
- &:is([open], [data-open]), &:open {
2297
+ &:where([open], [data-open], :open) {
2278
2298
  background-color: var(--color-highlight-bold);
2279
2299
  }
2280
2300
  }
2281
2301
  .open\:bg-serious-bold {
2282
- &:is([open], [data-open]), &:open {
2302
+ &:where([open], [data-open], :open) {
2283
2303
  background-color: var(--color-serious-bold);
2284
2304
  }
2285
2305
  }
2286
2306
  .open\:fg-inverse-light {
2287
- &:is([open], [data-open]), &:open {
2307
+ &:where([open], [data-open], :open) {
2288
2308
  color: var(--color-inverse-light);
2289
2309
  --icon-color: var(--color-inverse-light);
2290
2310
  }
2291
2311
  }
2292
2312
  .not-disabled\:read-only\:rounded-none {
2293
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2294
- &:is([readonly], [data-readonly]), &:read-only {
2313
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2314
+ &:where([readonly], [data-readonly], :read-only) {
2295
2315
  border-radius: 0;
2296
2316
  }
2297
2317
  }
2298
2318
  }
2299
2319
  .not-disabled\:read-only\:rounded-none {
2300
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2301
- &:is([readonly], [data-readonly]), &:read-only {
2320
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2321
+ &:where([readonly], [data-readonly], :read-only) {
2302
2322
  border-radius: var(--radius-none);
2303
2323
  }
2304
2324
  }
2305
2325
  }
2306
2326
  .not-disabled\:read-only\:p-0 {
2307
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2308
- &:is([readonly], [data-readonly]), &:read-only {
2327
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2328
+ &:where([readonly], [data-readonly], :read-only) {
2309
2329
  padding: var(--spacing-0);
2310
2330
  }
2311
2331
  }
2312
2332
  }
2313
2333
  .not-disabled\:read-only\:outline-transparent {
2314
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2315
- &:is([readonly], [data-readonly]), &:read-only {
2334
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2335
+ &:where([readonly], [data-readonly], :read-only) {
2316
2336
  outline-color: transparent;
2317
2337
  }
2318
2338
  }
2319
2339
  }
2320
2340
  .empty\:hidden {
2321
- &[data-empty], &:empty {
2341
+ &:where([data-empty], :empty) {
2322
2342
  display: none;
2323
2343
  }
2324
2344
  }
2325
2345
  .empty\:size-s {
2326
- &[data-empty], &:empty {
2346
+ &:where([data-empty], :empty) {
2327
2347
  width: var(--spacing-s);
2328
2348
  height: var(--spacing-s);
2329
2349
  }
2330
2350
  }
2331
2351
  .empty\:px-none {
2332
- &[data-empty], &:empty {
2352
+ &:where([data-empty], :empty) {
2333
2353
  padding-inline: var(--spacing-none);
2334
2354
  }
2335
2355
  }
2336
2356
  .focus-within\:outline-highlight {
2337
- &[data-focus-within], &:focus-within {
2357
+ &:where([data-focus-within], :focus-within) {
2338
2358
  outline-color: var(--color-highlight);
2339
2359
  }
2340
2360
  }
2341
2361
  .group-enabled\/accordion\:focus-within\:bg-interactive-hover-dark {
2342
- &:is(:is(:where(.group\/accordion):not([disabled], [data-disabled]), :where(.group\/accordion):enabled) *) {
2343
- &[data-focus-within], &:focus-within {
2362
+ &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
2363
+ &:where([data-focus-within], :focus-within) {
2344
2364
  background-color: var(--color-interactive-hover-dark);
2345
2365
  }
2346
2366
  }
2347
2367
  }
2348
2368
  .hover\:bg-highlight-bold {
2349
- &[data-hovered], &:hover {
2369
+ &:where([data-hovered], :hover) {
2350
2370
  background-color: var(--color-highlight-bold);
2351
2371
  }
2352
2372
  }
2353
2373
  .hover\:bg-serious-bold {
2354
- &[data-hovered], &:hover {
2374
+ &:where([data-hovered], :hover) {
2355
2375
  background-color: var(--color-serious-bold);
2356
2376
  }
2357
2377
  }
2358
2378
  .hover\:fg-interactive-hover {
2359
- &[data-hovered], &:hover {
2379
+ &:where([data-hovered], :hover) {
2360
2380
  color: var(--color-interactive-hover);
2361
2381
  --icon-color: var(--color-interactive-hover);
2362
2382
  }
2363
2383
  }
2364
2384
  .hover\:fg-inverse-light {
2365
- &[data-hovered], &:hover {
2385
+ &:where([data-hovered], :hover) {
2366
2386
  color: var(--color-inverse-light);
2367
2387
  --icon-color: var(--color-inverse-light);
2368
2388
  }
2369
2389
  }
2370
2390
  .hover\:outline-4 {
2371
- &[data-hovered], &:hover {
2391
+ &:where([data-hovered], :hover) {
2372
2392
  outline-style: var(--tw-outline-style);
2373
2393
  outline-width: 4px;
2374
2394
  }
2375
2395
  }
2376
2396
  .hover\:outline-interactive-hover {
2377
- &[data-hovered], &:hover {
2397
+ &:where([data-hovered], :hover) {
2378
2398
  outline-color: var(--color-interactive-hover);
2379
2399
  }
2380
2400
  }
2381
2401
  .hover\:outline-solid {
2382
- &[data-hovered], &:hover {
2402
+ &:where([data-hovered], :hover) {
2383
2403
  --tw-outline-style: solid;
2384
2404
  outline-style: solid;
2385
2405
  }
2386
2406
  }
2387
2407
  .group-enabled\/accordion\:hover\:bg-interactive-hover-dark {
2388
- &:is(:is(:where(.group\/accordion):not([disabled], [data-disabled]), :where(.group\/accordion):enabled) *) {
2389
- &[data-hovered], &:hover {
2408
+ &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
2409
+ &:where([data-hovered], :hover) {
2390
2410
  background-color: var(--color-interactive-hover-dark);
2391
2411
  }
2392
2412
  }
2393
2413
  }
2394
2414
  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
2395
- &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
2396
- &[data-hovered], &:hover {
2415
+ &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
2416
+ &:where([data-hovered], :hover) {
2397
2417
  outline-color: var(--color-interactive-hover);
2398
2418
  }
2399
2419
  }
2400
2420
  }
2401
2421
  .not-disabled\:read-only\:hover\:outline-transparent {
2402
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2403
- &:is([readonly], [data-readonly]), &:read-only {
2404
- &[data-hovered], &:hover {
2422
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2423
+ &:where([readonly], [data-readonly], :read-only) {
2424
+ &:where([data-hovered], :hover) {
2405
2425
  outline-color: transparent;
2406
2426
  }
2407
2427
  }
2408
2428
  }
2409
2429
  }
2410
2430
  .focus\:bg-highlight {
2411
- &[data-focused], &:focus {
2431
+ &:where([data-focused], :focus) {
2412
2432
  background-color: var(--color-highlight);
2413
2433
  }
2414
2434
  }
2415
2435
  .focus\:bg-highlight-bold {
2416
- &[data-focused], &:focus {
2436
+ &:where([data-focused], :focus) {
2417
2437
  background-color: var(--color-highlight-bold);
2418
2438
  }
2419
2439
  }
2420
2440
  .focus\:bg-serious-bold {
2421
- &[data-focused], &:focus {
2441
+ &:where([data-focused], :focus) {
2422
2442
  background-color: var(--color-serious-bold);
2423
2443
  }
2424
2444
  }
2425
2445
  .focus\:fg-inverse-light {
2426
- &[data-focused], &:focus {
2446
+ &:where([data-focused], :focus) {
2427
2447
  color: var(--color-inverse-light);
2428
2448
  --icon-color: var(--color-inverse-light);
2429
2449
  }
2430
2450
  }
2431
2451
  .focus\:text-inverse-light {
2432
- &[data-focused], &:focus {
2452
+ &:where([data-focused], :focus) {
2433
2453
  color: var(--color-inverse-light);
2434
2454
  }
2435
2455
  }
2436
2456
  .focus\:outline-4 {
2437
- &[data-focused], &:focus {
2457
+ &:where([data-focused], :focus) {
2438
2458
  outline-style: var(--tw-outline-style);
2439
2459
  outline-width: 4px;
2440
2460
  }
2441
2461
  }
2442
2462
  .focus\:outline-highlight {
2443
- &[data-focused], &:focus {
2463
+ &:where([data-focused], :focus) {
2444
2464
  outline-color: var(--color-highlight);
2445
2465
  }
2446
2466
  }
2447
2467
  .focus\:outline-interactive-hover {
2448
- &[data-focused], &:focus {
2468
+ &:where([data-focused], :focus) {
2449
2469
  outline-color: var(--color-interactive-hover);
2450
2470
  }
2451
2471
  }
2452
2472
  .focus\:outline-none {
2453
- &[data-focused], &:focus {
2473
+ &:where([data-focused], :focus) {
2454
2474
  --tw-outline-style: none;
2455
2475
  outline-style: none;
2456
2476
  }
2457
2477
  }
2458
2478
  .focus\:outline-solid {
2459
- &[data-focused], &:focus {
2479
+ &:where([data-focused], :focus) {
2460
2480
  --tw-outline-style: solid;
2461
2481
  outline-style: solid;
2462
2482
  }
2463
2483
  }
2464
2484
  .group-enabled\/text-area-field\:focus\:outline-highlight {
2465
- &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
2466
- &[data-focused], &:focus {
2485
+ &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
2486
+ &:where([data-focused], :focus) {
2467
2487
  outline-color: var(--color-highlight);
2468
2488
  }
2469
2489
  }
2470
2490
  }
2471
2491
  .not-disabled\:read-only\:focus\:outline-transparent {
2472
- &:not(*:is([disabled], [data-disabled]), *:disabled) {
2473
- &:is([readonly], [data-readonly]), &:read-only {
2474
- &[data-focused], &:focus {
2492
+ &:not(*:where([disabled], [data-disabled], :disabled)) {
2493
+ &:where([readonly], [data-readonly], :read-only) {
2494
+ &:where([data-focused], :focus) {
2475
2495
  outline-color: transparent;
2476
2496
  }
2477
2497
  }
2478
2498
  }
2479
2499
  }
2480
2500
  .enabled\:bg-critical {
2481
- &:not([disabled], [data-disabled]), &:enabled {
2501
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2482
2502
  background-color: var(--color-critical);
2483
2503
  }
2484
2504
  }
2485
2505
  .enabled\:bg-critical-subtle {
2486
- &:not([disabled], [data-disabled]), &:enabled {
2506
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2487
2507
  background-color: var(--color-critical-subtle);
2488
2508
  }
2489
2509
  }
2490
2510
  .enabled\:bg-interactive-default {
2491
- &:not([disabled], [data-disabled]), &:enabled {
2511
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2492
2512
  background-color: var(--color-interactive-default);
2493
2513
  }
2494
2514
  }
2495
2515
  .enabled\:bg-serious {
2496
- &:not([disabled], [data-disabled]), &:enabled {
2516
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2497
2517
  background-color: var(--color-serious);
2498
2518
  }
2499
2519
  }
2500
2520
  .enabled\:bg-serious-subtle {
2501
- &:not([disabled], [data-disabled]), &:enabled {
2521
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2502
2522
  background-color: var(--color-serious-subtle);
2503
2523
  }
2504
2524
  }
2505
2525
  .enabled\:bg-surface-default {
2506
- &:not([disabled], [data-disabled]), &:enabled {
2526
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2507
2527
  background-color: var(--color-surface-default);
2508
2528
  }
2509
2529
  }
2510
2530
  .enabled\:bg-transparent {
2511
- &:not([disabled], [data-disabled]), &:enabled {
2531
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2512
2532
  background-color: transparent;
2513
2533
  }
2514
2534
  }
2515
2535
  .enabled\:fg-critical {
2516
- &:not([disabled], [data-disabled]), &:enabled {
2536
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2517
2537
  color: var(--color-critical);
2518
2538
  --icon-color: var(--color-critical);
2519
2539
  }
2520
2540
  }
2521
2541
  .enabled\:fg-default-light {
2522
- &:not([disabled], [data-disabled]), &:enabled {
2542
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2523
2543
  color: var(--color-default-light);
2524
2544
  --icon-color: var(--color-default-light);
2525
2545
  }
2526
2546
  }
2527
2547
  .enabled\:fg-interactive {
2528
- &:not([disabled], [data-disabled]), &:enabled {
2548
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2529
2549
  color: var(--color-interactive);
2530
2550
  --icon-color: var(--color-interactive);
2531
2551
  }
2532
2552
  }
2533
2553
  .enabled\:fg-serious {
2534
- &:not([disabled], [data-disabled]), &:enabled {
2554
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2535
2555
  color: var(--color-serious);
2536
2556
  --icon-color: var(--color-serious);
2537
2557
  }
2538
2558
  }
2539
2559
  .enabled\:outline-critical {
2540
- &:not([disabled], [data-disabled]), &:enabled {
2560
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2541
2561
  outline-color: var(--color-critical);
2542
2562
  }
2543
2563
  }
2544
2564
  .enabled\:outline-interactive {
2545
- &:not([disabled], [data-disabled]), &:enabled {
2565
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2546
2566
  outline-color: var(--color-interactive);
2547
2567
  }
2548
2568
  }
2549
2569
  .enabled\:outline-serious {
2550
- &:not([disabled], [data-disabled]), &:enabled {
2570
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2551
2571
  outline-color: var(--color-serious);
2552
2572
  }
2553
2573
  }
2554
2574
  .enabled\:group-invalid\/input\:outline-serious {
2555
- &:not([disabled], [data-disabled]), &:enabled {
2556
- &:is(:is(:where(.group\/input):is([invalid], [data-invalid]), :where(.group\/input):invalid) *) {
2575
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2576
+ &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
2557
2577
  outline-color: var(--color-serious);
2558
2578
  }
2559
2579
  }
2560
2580
  }
2561
2581
  .enabled\:group-hover\/input\:outline-interactive-hover {
2562
- &:not([disabled], [data-disabled]), &:enabled {
2563
- &:is(:is(:where(.group\/input)[data-hovered], :where(.group\/input):hover) *) {
2582
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2583
+ &:is(:where(.group\/input):where([data-hovered], :hover) *) {
2564
2584
  outline-color: var(--color-interactive-hover);
2565
2585
  }
2566
2586
  }
2567
2587
  }
2568
2588
  .enabled\:group-focus\/input\:outline-highlight {
2569
- &:not([disabled], [data-disabled]), &:enabled {
2570
- &:is(:is(:where(.group\/input)[data-focused], :where(.group\/input):focus) *) {
2589
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2590
+ &:is(:where(.group\/input):where([data-focused], :focus) *) {
2571
2591
  outline-color: var(--color-highlight);
2572
2592
  }
2573
2593
  }
2574
2594
  }
2575
2595
  .enabled\:hover\:bg-critical-hover {
2576
- &:not([disabled], [data-disabled]), &:enabled {
2577
- &[data-hovered], &:hover {
2596
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2597
+ &:where([data-hovered], :hover) {
2578
2598
  background-color: var(--color-critical-hover);
2579
2599
  }
2580
2600
  }
2581
2601
  }
2582
2602
  .enabled\:hover\:bg-interactive-hover-dark {
2583
- &:not([disabled], [data-disabled]), &:enabled {
2584
- &[data-hovered], &:hover {
2603
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2604
+ &:where([data-hovered], :hover) {
2585
2605
  background-color: var(--color-interactive-hover-dark);
2586
2606
  }
2587
2607
  }
2588
2608
  }
2589
2609
  .enabled\:hover\:bg-interactive-hover-light {
2590
- &:not([disabled], [data-disabled]), &:enabled {
2591
- &[data-hovered], &:hover {
2610
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2611
+ &:where([data-hovered], :hover) {
2592
2612
  background-color: var(--color-interactive-hover-light);
2593
2613
  }
2594
2614
  }
2595
2615
  }
2596
2616
  .enabled\:hover\:bg-serious-hover {
2597
- &:not([disabled], [data-disabled]), &:enabled {
2598
- &[data-hovered], &:hover {
2617
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2618
+ &:where([data-hovered], :hover) {
2599
2619
  background-color: var(--color-serious-hover);
2600
2620
  }
2601
2621
  }
2602
2622
  }
2603
2623
  .enabled\:hover\:bg-transparent {
2604
- &:not([disabled], [data-disabled]), &:enabled {
2605
- &[data-hovered], &:hover {
2624
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2625
+ &:where([data-hovered], :hover) {
2606
2626
  background-color: transparent;
2607
2627
  }
2608
2628
  }
2609
2629
  }
2610
2630
  .enabled\:hover\:fg-interactive-hover {
2611
- &:not([disabled], [data-disabled]), &:enabled {
2612
- &[data-hovered], &:hover {
2631
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2632
+ &:where([data-hovered], :hover) {
2613
2633
  color: var(--color-interactive-hover);
2614
2634
  --icon-color: var(--color-interactive-hover);
2615
2635
  }
2616
2636
  }
2617
2637
  }
2618
2638
  .enabled\:hover\:outline-interactive-hover {
2619
- &:not([disabled], [data-disabled]), &:enabled {
2620
- &[data-hovered], &:hover {
2639
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2640
+ &:where([data-hovered], :hover) {
2621
2641
  outline-color: var(--color-interactive-hover);
2622
2642
  }
2623
2643
  }
2624
2644
  }
2625
2645
  .enabled\:focus\:bg-critical-hover {
2626
- &:not([disabled], [data-disabled]), &:enabled {
2627
- &[data-focused], &:focus {
2646
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2647
+ &:where([data-focused], :focus) {
2628
2648
  background-color: var(--color-critical-hover);
2629
2649
  }
2630
2650
  }
2631
2651
  }
2632
2652
  .enabled\:focus\:bg-interactive-hover-dark {
2633
- &:not([disabled], [data-disabled]), &:enabled {
2634
- &[data-focused], &:focus {
2653
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2654
+ &:where([data-focused], :focus) {
2635
2655
  background-color: var(--color-interactive-hover-dark);
2636
2656
  }
2637
2657
  }
2638
2658
  }
2639
2659
  .enabled\:focus\:bg-interactive-hover-light {
2640
- &:not([disabled], [data-disabled]), &:enabled {
2641
- &[data-focused], &:focus {
2660
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2661
+ &:where([data-focused], :focus) {
2642
2662
  background-color: var(--color-interactive-hover-light);
2643
2663
  }
2644
2664
  }
2645
2665
  }
2646
2666
  .enabled\:focus\:bg-serious-hover {
2647
- &:not([disabled], [data-disabled]), &:enabled {
2648
- &[data-focused], &:focus {
2667
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2668
+ &:where([data-focused], :focus) {
2649
2669
  background-color: var(--color-serious-hover);
2650
2670
  }
2651
2671
  }
2652
2672
  }
2653
2673
  .enabled\:focus\:bg-transparent {
2654
- &:not([disabled], [data-disabled]), &:enabled {
2655
- &[data-focused], &:focus {
2674
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2675
+ &:where([data-focused], :focus) {
2656
2676
  background-color: transparent;
2657
2677
  }
2658
2678
  }
2659
2679
  }
2660
2680
  .enabled\:focus\:fg-interactive-hover {
2661
- &:not([disabled], [data-disabled]), &:enabled {
2662
- &[data-focused], &:focus {
2681
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2682
+ &:where([data-focused], :focus) {
2663
2683
  color: var(--color-interactive-hover);
2664
2684
  --icon-color: var(--color-interactive-hover);
2665
2685
  }
2666
2686
  }
2667
2687
  }
2668
2688
  .enabled\:focus\:outline-interactive-hover {
2669
- &:not([disabled], [data-disabled]), &:enabled {
2670
- &[data-focused], &:focus {
2689
+ &:where(:not([disabled], [data-disabled]), :enabled) {
2690
+ &:where([data-focused], :focus) {
2671
2691
  outline-color: var(--color-interactive-hover);
2672
2692
  }
2673
2693
  }
2674
2694
  }
2675
2695
  .disabled\:cursor-not-allowed {
2676
- &:is([disabled], [data-disabled]), &:disabled {
2696
+ &:where([disabled], [data-disabled], :disabled) {
2677
2697
  cursor: not-allowed;
2678
2698
  }
2679
2699
  }
2680
2700
  .disabled\:bg-interactive-disabled {
2681
- &:is([disabled], [data-disabled]), &:disabled {
2701
+ &:where([disabled], [data-disabled], :disabled) {
2682
2702
  background-color: var(--color-interactive-disabled);
2683
2703
  }
2684
2704
  }
2685
2705
  .disabled\:bg-transparent {
2686
- &:is([disabled], [data-disabled]), &:disabled {
2706
+ &:where([disabled], [data-disabled], :disabled) {
2687
2707
  background-color: transparent;
2688
2708
  }
2689
2709
  }
2690
2710
  .disabled\:fg-disabled {
2691
- &:is([disabled], [data-disabled]), &:disabled {
2711
+ &:where([disabled], [data-disabled], :disabled) {
2692
2712
  color: var(--color-disabled);
2693
2713
  --icon-color: var(--color-disabled);
2694
2714
  }
2695
2715
  }
2696
2716
  .disabled\:text-disabled {
2697
- &:is([disabled], [data-disabled]), &:disabled {
2717
+ &:where([disabled], [data-disabled], :disabled) {
2698
2718
  color: var(--color-disabled);
2699
2719
  }
2700
2720
  }
2701
2721
  .disabled\:outline-interactive-disabled {
2702
- &:is([disabled], [data-disabled]), &:disabled {
2722
+ &:where([disabled], [data-disabled], :disabled) {
2703
2723
  outline-color: var(--color-interactive-disabled);
2704
2724
  }
2705
2725
  }
2706
2726
  .disabled\:placeholder\:text-disabled {
2707
- &:is([disabled], [data-disabled]), &:disabled {
2727
+ &:where([disabled], [data-disabled], :disabled) {
2708
2728
  &::placeholder {
2709
2729
  color: var(--color-disabled);
2710
2730
  }
@@ -2740,7 +2760,7 @@
2740
2760
  }
2741
2761
  }
2742
2762
  .hover\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
2743
- &[data-hovered], &:hover {
2763
+ &:where([data-hovered], :hover) {
2744
2764
  :is(& *) {
2745
2765
  &[data-slot="description"] {
2746
2766
  color: var(--color-inverse-light);
@@ -2750,7 +2770,7 @@
2750
2770
  }
2751
2771
  }
2752
2772
  .focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
2753
- &[data-focused], &:focus {
2773
+ &:where([data-focused], :focus) {
2754
2774
  :is(& *) {
2755
2775
  &[data-slot="description"] {
2756
2776
  color: var(--color-inverse-light);
@@ -2760,7 +2780,7 @@
2760
2780
  }
2761
2781
  }
2762
2782
  .disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
2763
- &:is([disabled], [data-disabled]), &:disabled {
2783
+ &:where([disabled], [data-disabled], :disabled) {
2764
2784
  :is(& *) {
2765
2785
  &[data-slot="description"] {
2766
2786
  color: var(--color-disabled);
@@ -2780,71 +2800,71 @@
2780
2800
  }
2781
2801
  }
2782
2802
  .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
2783
- &[data-placement~="left"] {
2803
+ &:where([data-placement~="left"]) {
2784
2804
  left: attr(data-offset-x px,0px);
2785
2805
  }
2786
2806
  }
2787
2807
  .placement-left\:-translate-x-1\/2 {
2788
- &[data-placement~="left"] {
2808
+ &:where([data-placement~="left"]) {
2789
2809
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
2790
2810
  translate: var(--tw-translate-x) var(--tw-translate-y);
2791
2811
  }
2792
2812
  }
2793
2813
  .placement-right\:right-\[attr\(data-offset-x_px\,0px\)\] {
2794
- &[data-placement~="right"] {
2814
+ &:where([data-placement~="right"]) {
2795
2815
  right: attr(data-offset-x px,0px);
2796
2816
  }
2797
2817
  }
2798
2818
  .placement-right\:translate-x-1\/2 {
2799
- &[data-placement~="right"] {
2819
+ &:where([data-placement~="right"]) {
2800
2820
  --tw-translate-x: calc(1/2 * 100%);
2801
2821
  translate: var(--tw-translate-x) var(--tw-translate-y);
2802
2822
  }
2803
2823
  }
2804
2824
  .placement-top\:top-\[attr\(data-offset-y_px\,0px\)\] {
2805
- &[data-placement~="top"] {
2825
+ &:where([data-placement~="top"]) {
2806
2826
  top: attr(data-offset-y px,0px);
2807
2827
  }
2808
2828
  }
2809
2829
  .placement-top\:-translate-y-1\/2 {
2810
- &[data-placement~="top"] {
2830
+ &:where([data-placement~="top"]) {
2811
2831
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
2812
2832
  translate: var(--tw-translate-x) var(--tw-translate-y);
2813
2833
  }
2814
2834
  }
2815
2835
  .placement-bottom\:bottom-\[attr\(data-offset-y_px\,0px\)\] {
2816
- &[data-placement~="bottom"] {
2836
+ &:where([data-placement~="bottom"]) {
2817
2837
  bottom: attr(data-offset-y px,0px);
2818
2838
  }
2819
2839
  }
2820
2840
  .placement-bottom\:translate-y-1\/2 {
2821
- &[data-placement~="bottom"] {
2841
+ &:where([data-placement~="bottom"]) {
2822
2842
  --tw-translate-y: calc(1/2 * 100%);
2823
2843
  translate: var(--tw-translate-x) var(--tw-translate-y);
2824
2844
  }
2825
2845
  }
2826
2846
  .size-large\:gap-xs {
2827
- &[data-size="large"] {
2847
+ &:where([data-size="large"]) {
2828
2848
  gap: var(--spacing-xs);
2829
2849
  }
2830
2850
  }
2831
2851
  .size-large\:p-xs {
2832
- &[data-size="large"] {
2852
+ &:where([data-size="large"]) {
2833
2853
  padding: var(--spacing-xs);
2834
2854
  }
2835
2855
  }
2836
2856
  .size-large\:px-m {
2837
- &[data-size="large"] {
2857
+ &:where([data-size="large"]) {
2838
2858
  padding-inline: var(--spacing-m);
2839
2859
  }
2840
2860
  }
2841
2861
  .size-large\:py-s {
2842
- &[data-size="large"] {
2862
+ &:where([data-size="large"]) {
2843
2863
  padding-block: var(--spacing-s);
2844
2864
  }
2845
2865
  }
2846
2866
  .size-large\:text-button-l {
2847
- &[data-size="large"] {
2867
+ &:where([data-size="large"]) {
2848
2868
  font-size: var(--typography-button-l-size);
2849
2869
  font-weight: bold;
2850
2870
  letter-spacing: var(--typography-button-l-spacing);
@@ -2852,48 +2872,48 @@
2852
2872
  }
2853
2873
  }
2854
2874
  .size-large\:\[--icon-size\:var\(--icon-size-l\)\] {
2855
- &[data-size="large"] {
2875
+ &:where([data-size="large"]) {
2856
2876
  --icon-size: var(--icon-size-l);
2857
2877
  }
2858
2878
  }
2859
2879
  .size-medium\:size-\[32px\] {
2860
- &[data-size="medium"] {
2880
+ &:where([data-size="medium"]) {
2861
2881
  width: 32px;
2862
2882
  height: 32px;
2863
2883
  }
2864
2884
  }
2865
2885
  .size-medium\:gap-xs {
2866
- &[data-size="medium"] {
2886
+ &:where([data-size="medium"]) {
2867
2887
  gap: var(--spacing-xs);
2868
2888
  }
2869
2889
  }
2870
2890
  .size-medium\:p-xs {
2871
- &[data-size="medium"] {
2891
+ &:where([data-size="medium"]) {
2872
2892
  padding: var(--spacing-xs);
2873
2893
  }
2874
2894
  }
2875
2895
  .size-medium\:px-m {
2876
- &[data-size="medium"] {
2896
+ &:where([data-size="medium"]) {
2877
2897
  padding-inline: var(--spacing-m);
2878
2898
  }
2879
2899
  }
2880
2900
  .size-medium\:px-s {
2881
- &[data-size="medium"] {
2901
+ &:where([data-size="medium"]) {
2882
2902
  padding-inline: var(--spacing-s);
2883
2903
  }
2884
2904
  }
2885
2905
  .size-medium\:py-s {
2886
- &[data-size="medium"] {
2906
+ &:where([data-size="medium"]) {
2887
2907
  padding-block: var(--spacing-s);
2888
2908
  }
2889
2909
  }
2890
2910
  .size-medium\:py-xs {
2891
- &[data-size="medium"] {
2911
+ &:where([data-size="medium"]) {
2892
2912
  padding-block: var(--spacing-xs);
2893
2913
  }
2894
2914
  }
2895
2915
  .size-medium\:text-body-s {
2896
- &[data-size="medium"] {
2916
+ &:where([data-size="medium"]) {
2897
2917
  font-size: var(--typography-body-s-size);
2898
2918
  font-weight: 400;
2899
2919
  letter-spacing: var(--typography-body-s-spacing);
@@ -2901,7 +2921,7 @@
2901
2921
  }
2902
2922
  }
2903
2923
  .size-medium\:text-button-m {
2904
- &[data-size="medium"] {
2924
+ &:where([data-size="medium"]) {
2905
2925
  font-size: var(--typography-button-m-size);
2906
2926
  font-weight: bold;
2907
2927
  letter-spacing: var(--typography-button-m-spacing);
@@ -2909,7 +2929,7 @@
2909
2929
  }
2910
2930
  }
2911
2931
  .size-medium\:text-header-m {
2912
- &[data-size="medium"] {
2932
+ &:where([data-size="medium"]) {
2913
2933
  font-size: var(--typography-header-m-size);
2914
2934
  font-weight: 500;
2915
2935
  letter-spacing: var(--typography-header-m-spacing);
@@ -2917,7 +2937,7 @@
2917
2937
  }
2918
2938
  }
2919
2939
  .size-medium\:text-header-s {
2920
- &[data-size="medium"] {
2940
+ &:where([data-size="medium"]) {
2921
2941
  font-size: var(--typography-header-s-size);
2922
2942
  font-weight: 500;
2923
2943
  letter-spacing: var(--typography-header-s-spacing);
@@ -2925,43 +2945,43 @@
2925
2945
  }
2926
2946
  }
2927
2947
  .size-medium\:\[--icon-size\:var\(--icon-size-m\)\] {
2928
- &[data-size="medium"] {
2948
+ &:where([data-size="medium"]) {
2929
2949
  --icon-size: var(--icon-size-m);
2930
2950
  }
2931
2951
  }
2932
2952
  .size-small\:size-xl {
2933
- &[data-size="small"] {
2953
+ &:where([data-size="small"]) {
2934
2954
  width: var(--spacing-xl);
2935
2955
  height: var(--spacing-xl);
2936
2956
  }
2937
2957
  }
2938
2958
  .size-small\:gap-xxs {
2939
- &[data-size="small"] {
2959
+ &:where([data-size="small"]) {
2940
2960
  gap: var(--spacing-xxs);
2941
2961
  }
2942
2962
  }
2943
2963
  .size-small\:rounded-small {
2944
- &[data-size="small"] {
2964
+ &:where([data-size="small"]) {
2945
2965
  border-radius: var(--radius-small);
2946
2966
  }
2947
2967
  }
2948
2968
  .size-small\:p-xxs {
2949
- &[data-size="small"] {
2969
+ &:where([data-size="small"]) {
2950
2970
  padding: var(--spacing-xxs);
2951
2971
  }
2952
2972
  }
2953
2973
  .size-small\:px-s {
2954
- &[data-size="small"] {
2974
+ &:where([data-size="small"]) {
2955
2975
  padding-inline: var(--spacing-s);
2956
2976
  }
2957
2977
  }
2958
2978
  .size-small\:py-xs {
2959
- &[data-size="small"] {
2979
+ &:where([data-size="small"]) {
2960
2980
  padding-block: var(--spacing-xs);
2961
2981
  }
2962
2982
  }
2963
2983
  .size-small\:text-body-xs {
2964
- &[data-size="small"] {
2984
+ &:where([data-size="small"]) {
2965
2985
  font-size: var(--typography-body-xs-size);
2966
2986
  font-weight: 400;
2967
2987
  letter-spacing: var(--typography-body-xs-spacing);
@@ -2969,7 +2989,7 @@
2969
2989
  }
2970
2990
  }
2971
2991
  .size-small\:text-button-s {
2972
- &[data-size="small"] {
2992
+ &:where([data-size="small"]) {
2973
2993
  font-size: var(--typography-button-s-size);
2974
2994
  font-weight: bold;
2975
2995
  letter-spacing: var(--typography-button-s-spacing);
@@ -2977,7 +2997,7 @@
2977
2997
  }
2978
2998
  }
2979
2999
  .size-small\:text-header-xs {
2980
- &[data-size="small"] {
3000
+ &:where([data-size="small"]) {
2981
3001
  font-size: var(--typography-header-xs-size);
2982
3002
  font-weight: 500;
2983
3003
  letter-spacing: var(--typography-header-xs-spacing);
@@ -2985,37 +3005,37 @@
2985
3005
  }
2986
3006
  }
2987
3007
  .size-small\:\[--icon-size\:var\(--icon-size-s\)\] {
2988
- &[data-size="small"] {
3008
+ &:where([data-size="small"]) {
2989
3009
  --icon-size: var(--icon-size-s);
2990
3010
  }
2991
3011
  }
2992
3012
  .size-xsmall\:gap-xxs {
2993
- &[data-size="xsmall"] {
3013
+ &:where([data-size="xsmall"]) {
2994
3014
  gap: var(--spacing-xxs);
2995
3015
  }
2996
3016
  }
2997
3017
  .size-xsmall\:rounded-small {
2998
- &[data-size="xsmall"] {
3018
+ &:where([data-size="xsmall"]) {
2999
3019
  border-radius: var(--radius-small);
3000
3020
  }
3001
3021
  }
3002
3022
  .size-xsmall\:p-xxs {
3003
- &[data-size="xsmall"] {
3023
+ &:where([data-size="xsmall"]) {
3004
3024
  padding: var(--spacing-xxs);
3005
3025
  }
3006
3026
  }
3007
3027
  .size-xsmall\:px-s {
3008
- &[data-size="xsmall"] {
3028
+ &:where([data-size="xsmall"]) {
3009
3029
  padding-inline: var(--spacing-s);
3010
3030
  }
3011
3031
  }
3012
3032
  .size-xsmall\:py-xs {
3013
- &[data-size="xsmall"] {
3033
+ &:where([data-size="xsmall"]) {
3014
3034
  padding-block: var(--spacing-xs);
3015
3035
  }
3016
3036
  }
3017
3037
  .size-xsmall\:text-button-xs {
3018
- &[data-size="xsmall"] {
3038
+ &:where([data-size="xsmall"]) {
3019
3039
  font-size: var(--typography-button-xs-size);
3020
3040
  font-weight: bold;
3021
3041
  letter-spacing: var(--typography-button-xs-spacing);
@@ -3023,125 +3043,125 @@
3023
3043
  }
3024
3044
  }
3025
3045
  .size-xsmall\:\[--icon-size\:var\(--icon-size-xs\)\] {
3026
- &[data-size="xsmall"] {
3046
+ &:where([data-size="xsmall"]) {
3027
3047
  --icon-size: var(--icon-size-xs);
3028
3048
  }
3029
3049
  }
3030
3050
  .orientation-horizontal\:flex-col {
3031
- &[data-orientation="horizontal"] {
3051
+ &:where([data-orientation="horizontal"]) {
3032
3052
  flex-direction: column;
3033
3053
  }
3034
3054
  }
3035
3055
  .orientation-horizontal\:flex-row {
3036
- &[data-orientation="horizontal"] {
3056
+ &:where([data-orientation="horizontal"]) {
3037
3057
  flex-direction: row;
3038
3058
  }
3039
3059
  }
3040
3060
  .orientation-horizontal\:flex-wrap {
3041
- &[data-orientation="horizontal"] {
3061
+ &:where([data-orientation="horizontal"]) {
3042
3062
  flex-wrap: wrap;
3043
3063
  }
3044
3064
  }
3045
3065
  .orientation-vertical\:flex-col {
3046
- &[data-orientation="vertical"] {
3066
+ &:where([data-orientation="vertical"]) {
3047
3067
  flex-direction: column;
3048
3068
  }
3049
3069
  }
3050
3070
  .orientation-vertical\:gap-xs {
3051
- &[data-orientation="vertical"] {
3071
+ &:where([data-orientation="vertical"]) {
3052
3072
  gap: var(--spacing-xs);
3053
3073
  }
3054
3074
  }
3055
3075
  .selected\:bg-highlight-bold {
3056
- &[data-selected], &:checked {
3076
+ &:where([data-selected], :checked) {
3057
3077
  background-color: var(--color-highlight-bold);
3058
3078
  }
3059
3079
  }
3060
3080
  .selected\:bg-serious-bold {
3061
- &[data-selected], &:checked {
3081
+ &:where([data-selected], :checked) {
3062
3082
  background-color: var(--color-serious-bold);
3063
3083
  }
3064
3084
  }
3065
3085
  .selected\:fg-inverse-light {
3066
- &[data-selected], &:checked {
3086
+ &:where([data-selected], :checked) {
3067
3087
  color: var(--color-inverse-light);
3068
3088
  --icon-color: var(--color-inverse-light);
3069
3089
  }
3070
3090
  }
3071
3091
  .enabled\:selected\:bg-critical-subtle {
3072
- &:not([disabled], [data-disabled]), &:enabled {
3073
- &[data-selected], &:checked {
3092
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3093
+ &:where([data-selected], :checked) {
3074
3094
  background-color: var(--color-critical-subtle);
3075
3095
  }
3076
3096
  }
3077
3097
  }
3078
3098
  .enabled\:selected\:bg-highlight-subtle {
3079
- &:not([disabled], [data-disabled]), &:enabled {
3080
- &[data-selected], &:checked {
3099
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3100
+ &:where([data-selected], :checked) {
3081
3101
  background-color: var(--color-highlight-subtle);
3082
3102
  }
3083
3103
  }
3084
3104
  }
3085
3105
  .enabled\:selected\:bg-info-subtle {
3086
- &:not([disabled], [data-disabled]), &:enabled {
3087
- &[data-selected], &:checked {
3106
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3107
+ &:where([data-selected], :checked) {
3088
3108
  background-color: var(--color-info-subtle);
3089
3109
  }
3090
3110
  }
3091
3111
  }
3092
3112
  .enabled\:selected\:bg-serious-subtle {
3093
- &:not([disabled], [data-disabled]), &:enabled {
3094
- &[data-selected], &:checked {
3113
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3114
+ &:where([data-selected], :checked) {
3095
3115
  background-color: var(--color-serious-subtle);
3096
3116
  }
3097
3117
  }
3098
3118
  }
3099
3119
  .enabled\:selected\:fg-highlight {
3100
- &:not([disabled], [data-disabled]), &:enabled {
3101
- &[data-selected], &:checked {
3120
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3121
+ &:where([data-selected], :checked) {
3102
3122
  color: var(--color-highlight);
3103
3123
  --icon-color: var(--color-highlight);
3104
3124
  }
3105
3125
  }
3106
3126
  }
3107
3127
  .enabled\:selected\:outline-highlight {
3108
- &:not([disabled], [data-disabled]), &:enabled {
3109
- &[data-selected], &:checked {
3128
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3129
+ &:where([data-selected], :checked) {
3110
3130
  outline-color: var(--color-highlight);
3111
3131
  }
3112
3132
  }
3113
3133
  }
3114
3134
  .enabled\:selected\:hover\:bg-critical-hover {
3115
- &:not([disabled], [data-disabled]), &:enabled {
3116
- &[data-selected], &:checked {
3117
- &[data-hovered], &:hover {
3135
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3136
+ &:where([data-selected], :checked) {
3137
+ &:where([data-hovered], :hover) {
3118
3138
  background-color: var(--color-critical-hover);
3119
3139
  }
3120
3140
  }
3121
3141
  }
3122
3142
  }
3123
3143
  .enabled\:selected\:hover\:bg-interactive-hover-light {
3124
- &:not([disabled], [data-disabled]), &:enabled {
3125
- &[data-selected], &:checked {
3126
- &[data-hovered], &:hover {
3144
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3145
+ &:where([data-selected], :checked) {
3146
+ &:where([data-hovered], :hover) {
3127
3147
  background-color: var(--color-interactive-hover-light);
3128
3148
  }
3129
3149
  }
3130
3150
  }
3131
3151
  }
3132
3152
  .enabled\:selected\:hover\:bg-serious-hover {
3133
- &:not([disabled], [data-disabled]), &:enabled {
3134
- &[data-selected], &:checked {
3135
- &[data-hovered], &:hover {
3153
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3154
+ &:where([data-selected], :checked) {
3155
+ &:where([data-hovered], :hover) {
3136
3156
  background-color: var(--color-serious-hover);
3137
3157
  }
3138
3158
  }
3139
3159
  }
3140
3160
  }
3141
3161
  .enabled\:selected\:hover\:fg-highlight {
3142
- &:not([disabled], [data-disabled]), &:enabled {
3143
- &[data-selected], &:checked {
3144
- &[data-hovered], &:hover {
3162
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3163
+ &:where([data-selected], :checked) {
3164
+ &:where([data-hovered], :hover) {
3145
3165
  color: var(--color-highlight);
3146
3166
  --icon-color: var(--color-highlight);
3147
3167
  }
@@ -3149,45 +3169,45 @@
3149
3169
  }
3150
3170
  }
3151
3171
  .enabled\:selected\:hover\:outline-interactive-hover {
3152
- &:not([disabled], [data-disabled]), &:enabled {
3153
- &[data-selected], &:checked {
3154
- &[data-hovered], &:hover {
3172
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3173
+ &:where([data-selected], :checked) {
3174
+ &:where([data-hovered], :hover) {
3155
3175
  outline-color: var(--color-interactive-hover);
3156
3176
  }
3157
3177
  }
3158
3178
  }
3159
3179
  }
3160
3180
  .enabled\:selected\:focus\:bg-critical-hover {
3161
- &:not([disabled], [data-disabled]), &:enabled {
3162
- &[data-selected], &:checked {
3163
- &[data-focused], &:focus {
3181
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3182
+ &:where([data-selected], :checked) {
3183
+ &:where([data-focused], :focus) {
3164
3184
  background-color: var(--color-critical-hover);
3165
3185
  }
3166
3186
  }
3167
3187
  }
3168
3188
  }
3169
3189
  .enabled\:selected\:focus\:bg-interactive-hover-light {
3170
- &:not([disabled], [data-disabled]), &:enabled {
3171
- &[data-selected], &:checked {
3172
- &[data-focused], &:focus {
3190
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3191
+ &:where([data-selected], :checked) {
3192
+ &:where([data-focused], :focus) {
3173
3193
  background-color: var(--color-interactive-hover-light);
3174
3194
  }
3175
3195
  }
3176
3196
  }
3177
3197
  }
3178
3198
  .enabled\:selected\:focus\:bg-serious-hover {
3179
- &:not([disabled], [data-disabled]), &:enabled {
3180
- &[data-selected], &:checked {
3181
- &[data-focused], &:focus {
3199
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3200
+ &:where([data-selected], :checked) {
3201
+ &:where([data-focused], :focus) {
3182
3202
  background-color: var(--color-serious-hover);
3183
3203
  }
3184
3204
  }
3185
3205
  }
3186
3206
  }
3187
3207
  .enabled\:selected\:focus\:fg-highlight {
3188
- &:not([disabled], [data-disabled]), &:enabled {
3189
- &[data-selected], &:checked {
3190
- &[data-focused], &:focus {
3208
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3209
+ &:where([data-selected], :checked) {
3210
+ &:where([data-focused], :focus) {
3191
3211
  color: var(--color-highlight);
3192
3212
  --icon-color: var(--color-highlight);
3193
3213
  }
@@ -3195,17 +3215,17 @@
3195
3215
  }
3196
3216
  }
3197
3217
  .enabled\:selected\:focus\:outline-interactive-hover {
3198
- &:not([disabled], [data-disabled]), &:enabled {
3199
- &[data-selected], &:checked {
3200
- &[data-focused], &:focus {
3218
+ &:where(:not([disabled], [data-disabled]), :enabled) {
3219
+ &:where([data-selected], :checked) {
3220
+ &:where([data-focused], :focus) {
3201
3221
  outline-color: var(--color-interactive-hover);
3202
3222
  }
3203
3223
  }
3204
3224
  }
3205
3225
  }
3206
3226
  .disabled\:selected\:bg-interactive-disabled {
3207
- &:is([disabled], [data-disabled]), &:disabled {
3208
- &[data-selected], &:checked {
3227
+ &:where([disabled], [data-disabled], :disabled) {
3228
+ &:where([data-selected], :checked) {
3209
3229
  background-color: var(--color-interactive-disabled);
3210
3230
  }
3211
3231
  }
@@ -3327,14 +3347,14 @@
3327
3347
  }
3328
3348
  }
3329
3349
  .orientation-horizontal\:\[\&\>\*\]\:pr-s {
3330
- &[data-orientation="horizontal"] {
3350
+ &:where([data-orientation="horizontal"]) {
3331
3351
  &>* {
3332
3352
  padding-right: var(--spacing-s);
3333
3353
  }
3334
3354
  }
3335
3355
  }
3336
3356
  .orientation-horizontal\:\[\&\>\*\]\:pl-s {
3337
- &[data-orientation="horizontal"] {
3357
+ &:where([data-orientation="horizontal"]) {
3338
3358
  &>* {
3339
3359
  padding-left: var(--spacing-s);
3340
3360
  }