daisyui 4.10.5 → 4.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/full.css +17 -20
  2. package/dist/styled.css +66 -68
  3. package/dist/styled.js +1 -1
  4. package/dist/unstyled.css +3 -4
  5. package/dist/unstyled.js +1 -1
  6. package/package.json +1 -1
package/dist/full.css CHANGED
@@ -2676,8 +2676,7 @@ html {
2676
2676
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)))}
2677
2677
  .tab:hover {
2678
2678
  --tw-text-opacity: 1}
2679
- .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
2680
- .tabs-boxed :is(input:checked):hover {
2679
+ .tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):hover, .tabs-boxed :is(input:checked):hover {
2681
2680
  --tw-text-opacity: 1;
2682
2681
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}
2683
2682
  .table tr.hover:hover,
@@ -2713,7 +2712,6 @@ html {
2713
2712
  transition-duration: 200ms;
2714
2713
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2715
2714
  border-width: var(--border-btn, 1px);
2716
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
2717
2715
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
2718
2716
  --tw-text-opacity: 1;
2719
2717
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -3943,8 +3941,7 @@ html {
3943
3941
  .tabs {
3944
3942
  display: grid;
3945
3943
  align-items: flex-end}
3946
- .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
3947
- .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
3944
+ .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
3948
3945
  border-bottom-color: transparent}
3949
3946
  .tab {
3950
3947
  position: relative;
@@ -3989,10 +3986,10 @@ html {
3989
3986
  border-color: transparent;
3990
3987
  border-width: var(--tab-border, 0)}
3991
3988
  :checked + .tab-content:nth-child(2),
3992
- .tab-active + .tab-content:nth-child(2) {
3989
+ :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) {
3993
3990
  border-start-start-radius: 0px}
3994
3991
  input.tab:checked + .tab-content,
3995
- .tab-active + .tab-content {
3992
+ :is(.tab-active, [aria-selected="true"]) + .tab-content {
3996
3993
  display: block}
3997
3994
  .table {
3998
3995
  position: relative;
@@ -4271,6 +4268,9 @@ input.tab:checked + .tab-content,
4271
4268
  [dir="rtl"] .breadcrumbs > ul > li + *:before,
4272
4269
  [dir="rtl"] .breadcrumbs > ol > li + *:before {
4273
4270
  --tw-rotate: -135deg}
4271
+ @media (prefers-reduced-motion: no-preference) {
4272
+ .btn {
4273
+ animation: button-pop var(--animation-btn, 0.25s) ease-out}}
4274
4274
  .btn:active:hover,
4275
4275
  .btn:active:focus {
4276
4276
  animation: button-pop 0s ease-out;
@@ -6056,8 +6056,7 @@ details.collapse summary::-webkit-details-marker {
6056
6056
  .tabs-lifted > .tab:focus-visible {
6057
6057
  border-end-end-radius: 0;
6058
6058
  border-end-start-radius: 0}
6059
- .tab.tab-active:not(.tab-disabled):not([disabled]),
6060
- .tab:is(input:checked) {
6059
+ .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
6061
6060
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
6062
6061
  --tw-border-opacity: 1;
6063
6062
  --tw-text-opacity: 1}
@@ -6086,8 +6085,7 @@ details.collapse summary::-webkit-details-marker {
6086
6085
  padding-inline-start: var(--tab-padding, 1rem);
6087
6086
  padding-inline-end: var(--tab-padding, 1rem);
6088
6087
  padding-top: var(--tab-border, 1px)}
6089
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
6090
- .tabs-lifted > .tab:is(input:checked) {
6088
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
6091
6089
  background-color: var(--tab-bg);
6092
6090
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
6093
6091
  border-inline-start-color: var(--tab-border-color);
@@ -6097,7 +6095,7 @@ details.collapse summary::-webkit-details-marker {
6097
6095
  padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
6098
6096
  padding-bottom: var(--tab-border, 1px);
6099
6097
  padding-top: 0}
6100
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
6098
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
6101
6099
  z-index: 1;
6102
6100
  content: "";
6103
6101
  display: block;
@@ -6125,22 +6123,22 @@ details.collapse summary::-webkit-details-marker {
6125
6123
  var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
6126
6124
  );
6127
6125
  background-image: var(--radius-start), var(--radius-end)}
6128
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
6126
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
6129
6127
  background-image: var(--radius-end);
6130
6128
  background-position: top right}
6131
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
6129
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
6132
6130
  background-image: var(--radius-start);
6133
6131
  background-position: top left}
6134
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
6132
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
6135
6133
  background-image: var(--radius-start);
6136
6134
  background-position: top left}
6137
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
6135
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
6138
6136
  background-image: var(--radius-end);
6139
6137
  background-position: top right}
6140
6138
  .tabs-lifted
6141
- > .tab-active:not(.tab-disabled):not([disabled])
6139
+ > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
6142
6140
  + .tabs-lifted
6143
- .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
6141
+ :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
6144
6142
  background-image: var(--radius-end);
6145
6143
  background-position: top right}
6146
6144
  .tabs-boxed {
@@ -6150,8 +6148,7 @@ details.collapse summary::-webkit-details-marker {
6150
6148
  padding: 0.25rem}
6151
6149
  .tabs-boxed .tab {
6152
6150
  border-radius: var(--rounded-btn, 0.5rem)}
6153
- .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
6154
- .tabs-boxed :is(input:checked) {
6151
+ .tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-boxed :is(input:checked) {
6155
6152
  --tw-bg-opacity: 1;
6156
6153
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
6157
6154
  --tw-text-opacity: 1;
package/dist/styled.css CHANGED
@@ -1166,8 +1166,7 @@
1166
1166
  display: grid;
1167
1167
  align-items: flex-end;
1168
1168
  }
1169
- .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
1170
- .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
1169
+ .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
1171
1170
  border-bottom-color: transparent;
1172
1171
  }
1173
1172
  .tab {
@@ -1210,11 +1209,11 @@
1210
1209
  border-width: var(--tab-border, 0);
1211
1210
  }
1212
1211
  :checked + .tab-content:nth-child(2),
1213
- .tab-active + .tab-content:nth-child(2) {
1212
+ :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) {
1214
1213
  border-start-start-radius: 0px;
1215
1214
  }
1216
1215
  input.tab:checked + .tab-content,
1217
- .tab-active + .tab-content {
1216
+ :is(.tab-active, [aria-selected="true"]) + .tab-content {
1218
1217
  display: block;
1219
1218
  }
1220
1219
  .table {
@@ -1569,9 +1568,12 @@ input.tab:checked + .tab-content,
1569
1568
  transition-duration: 200ms;
1570
1569
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1571
1570
  border-width: var(--border-btn, 1px);
1572
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
1573
- transition-property: color, background-color, border-color, opacity, box-shadow, transform;
1571
+ transition-property: color, background-color, border-color, opacity, box-shadow, transform
1574
1572
  }
1573
+ @media (prefers-reduced-motion: no-preference) {.btn {
1574
+ animation: button-pop var(--animation-btn, 0.25s) ease-out
1575
+ }
1576
+ }
1575
1577
  .btn:active:hover,
1576
1578
  .btn:active:focus {
1577
1579
  animation: button-pop 0s ease-out;
@@ -1589,7 +1591,7 @@ input.tab:checked + .tab-content,
1589
1591
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
1590
1592
  --tw-bg-opacity: 1;
1591
1593
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
1592
- --tw-border-opacity: 1;
1594
+ --tw-border-opacity: 1
1593
1595
  }
1594
1596
  @supports not (color: oklch(0% 0 0)) {
1595
1597
  .btn {
@@ -1602,7 +1604,7 @@ input.tab:checked + .tab-content,
1602
1604
  --tw-border-opacity: 1;
1603
1605
  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
1604
1606
  --tw-bg-opacity: 1;
1605
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
1607
+ background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)))
1606
1608
  }
1607
1609
  @supports (color: color-mix(in oklab, black, black)) {
1608
1610
  .btn:hover {
@@ -1642,13 +1644,13 @@ input.tab:checked + .tab-content,
1642
1644
  .btn:focus-visible {
1643
1645
  outline-style: solid;
1644
1646
  outline-width: 2px;
1645
- outline-offset: 2px;
1647
+ outline-offset: 2px
1646
1648
  }
1647
1649
  /* brand colors */
1648
1650
  .btn-primary {
1649
1651
  --tw-text-opacity: 1;
1650
1652
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1651
- outline-color: var(--fallback-p,oklch(var(--p)/1));
1653
+ outline-color: var(--fallback-p,oklch(var(--p)/1))
1652
1654
  }
1653
1655
  @supports (color: oklch(0% 0 0)) {
1654
1656
  .btn-primary {
@@ -1663,7 +1665,7 @@ input.tab:checked + .tab-content,
1663
1665
  .btn-secondary {
1664
1666
  --tw-text-opacity: 1;
1665
1667
  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1666
- outline-color: var(--fallback-s,oklch(var(--s)/1));
1668
+ outline-color: var(--fallback-s,oklch(var(--s)/1))
1667
1669
  }
1668
1670
  @supports (color: oklch(0% 0 0)) {
1669
1671
  .btn-secondary {
@@ -1678,7 +1680,7 @@ input.tab:checked + .tab-content,
1678
1680
  .btn-accent {
1679
1681
  --tw-text-opacity: 1;
1680
1682
  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1681
- outline-color: var(--fallback-a,oklch(var(--a)/1));
1683
+ outline-color: var(--fallback-a,oklch(var(--a)/1))
1682
1684
  }
1683
1685
  @supports (color: oklch(0% 0 0)) {
1684
1686
  .btn-accent {
@@ -1693,7 +1695,7 @@ input.tab:checked + .tab-content,
1693
1695
  .btn-neutral {
1694
1696
  --tw-text-opacity: 1;
1695
1697
  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
1696
- outline-color: var(--fallback-n,oklch(var(--n)/1));
1698
+ outline-color: var(--fallback-n,oklch(var(--n)/1))
1697
1699
  }
1698
1700
  @supports (color: oklch(0% 0 0)) {
1699
1701
  .btn-neutral {
@@ -1709,7 +1711,7 @@ input.tab:checked + .tab-content,
1709
1711
  .btn-info {
1710
1712
  --tw-text-opacity: 1;
1711
1713
  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1712
- outline-color: var(--fallback-in,oklch(var(--in)/1));
1714
+ outline-color: var(--fallback-in,oklch(var(--in)/1))
1713
1715
  }
1714
1716
  @supports (color: oklch(0% 0 0)) {
1715
1717
  .btn-info {
@@ -1724,7 +1726,7 @@ input.tab:checked + .tab-content,
1724
1726
  .btn-success {
1725
1727
  --tw-text-opacity: 1;
1726
1728
  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1727
- outline-color: var(--fallback-su,oklch(var(--su)/1));
1729
+ outline-color: var(--fallback-su,oklch(var(--su)/1))
1728
1730
  }
1729
1731
  @supports (color: oklch(0% 0 0)) {
1730
1732
  .btn-success {
@@ -1739,7 +1741,7 @@ input.tab:checked + .tab-content,
1739
1741
  .btn-warning {
1740
1742
  --tw-text-opacity: 1;
1741
1743
  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
1742
- outline-color: var(--fallback-wa,oklch(var(--wa)/1));
1744
+ outline-color: var(--fallback-wa,oklch(var(--wa)/1))
1743
1745
  }
1744
1746
  @supports (color: oklch(0% 0 0)) {
1745
1747
  .btn-warning {
@@ -1754,7 +1756,7 @@ input.tab:checked + .tab-content,
1754
1756
  .btn-error {
1755
1757
  --tw-text-opacity: 1;
1756
1758
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
1757
- outline-color: var(--fallback-er,oklch(var(--er)/1));
1759
+ outline-color: var(--fallback-er,oklch(var(--er)/1))
1758
1760
  }
1759
1761
  @supports (color: oklch(0% 0 0)) {
1760
1762
  .btn-error {
@@ -1771,7 +1773,7 @@ input.tab:checked + .tab-content,
1771
1773
  --tw-shadow: 0 0 #0000;
1772
1774
  --tw-shadow-colored: 0 0 #0000;
1773
1775
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1774
- outline-color: currentColor;
1776
+ outline-color: currentColor
1775
1777
  }
1776
1778
  @media (hover: hover) {
1777
1779
  .btn.glass:hover {
@@ -1792,21 +1794,21 @@ input.tab:checked + .tab-content,
1792
1794
  --tw-shadow: 0 0 #0000;
1793
1795
  --tw-shadow-colored: 0 0 #0000;
1794
1796
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1795
- outline-color: currentColor;
1797
+ outline-color: currentColor
1796
1798
  }
1797
1799
  @media (hover: hover) {
1798
1800
  .btn-ghost:hover {
1799
- border-color: transparent;
1801
+ border-color: transparent
1800
1802
  }
1801
1803
  @supports (color: oklch(0% 0 0)) {
1802
1804
  .btn-ghost:hover {
1803
- background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
1805
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2))
1804
1806
  }
1805
1807
  }
1806
1808
  }
1807
1809
  .btn-ghost.btn-active {
1808
1810
  border-color: transparent;
1809
- background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
1811
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2))
1810
1812
  }
1811
1813
  .btn-link {
1812
1814
  border-color: transparent;
@@ -1817,19 +1819,19 @@ input.tab:checked + .tab-content,
1817
1819
  --tw-shadow: 0 0 #0000;
1818
1820
  --tw-shadow-colored: 0 0 #0000;
1819
1821
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1820
- outline-color: currentColor;
1822
+ outline-color: currentColor
1821
1823
  }
1822
1824
  @media (hover: hover) {
1823
1825
  .btn-link:hover {
1824
1826
  border-color: transparent;
1825
1827
  background-color: transparent;
1826
- text-decoration-line: underline;
1828
+ text-decoration-line: underline
1827
1829
  }
1828
1830
  }
1829
1831
  .btn-link.btn-active {
1830
1832
  border-color: transparent;
1831
1833
  background-color: transparent;
1832
- text-decoration-line: underline;
1834
+ text-decoration-line: underline
1833
1835
  }
1834
1836
  /* outline */
1835
1837
  .btn-outline {
@@ -1839,7 +1841,7 @@ input.tab:checked + .tab-content,
1839
1841
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1840
1842
  --tw-shadow: 0 0 #0000;
1841
1843
  --tw-shadow-colored: 0 0 #0000;
1842
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1844
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
1843
1845
  }
1844
1846
  @media (hover: hover) {
1845
1847
  .btn-outline:hover {
@@ -1848,7 +1850,7 @@ input.tab:checked + .tab-content,
1848
1850
  --tw-bg-opacity: 1;
1849
1851
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1850
1852
  --tw-text-opacity: 1;
1851
- color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
1853
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)))
1852
1854
  }
1853
1855
  }
1854
1856
  .btn-outline.btn-active {
@@ -1857,16 +1859,16 @@ input.tab:checked + .tab-content,
1857
1859
  --tw-bg-opacity: 1;
1858
1860
  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1859
1861
  --tw-text-opacity: 1;
1860
- color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
1862
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)))
1861
1863
  }
1862
1864
  .btn-outline.btn-primary {
1863
1865
  --tw-text-opacity: 1;
1864
- color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1866
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)))
1865
1867
  }
1866
1868
  @media (hover: hover) {
1867
1869
  .btn-outline.btn-primary:hover {
1868
1870
  --tw-text-opacity: 1;
1869
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1871
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))
1870
1872
  }
1871
1873
  @supports (color: color-mix(in oklab, black, black)) {
1872
1874
  .btn-outline.btn-primary:hover {
@@ -1877,7 +1879,7 @@ input.tab:checked + .tab-content,
1877
1879
  }
1878
1880
  .btn-outline.btn-primary.btn-active {
1879
1881
  --tw-text-opacity: 1;
1880
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1882
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))
1881
1883
  }
1882
1884
  @supports (color: color-mix(in oklab, black, black)) {
1883
1885
  .btn-outline.btn-primary.btn-active {
@@ -1887,12 +1889,12 @@ input.tab:checked + .tab-content,
1887
1889
  }
1888
1890
  .btn-outline.btn-secondary {
1889
1891
  --tw-text-opacity: 1;
1890
- color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
1892
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)))
1891
1893
  }
1892
1894
  @media (hover: hover) {
1893
1895
  .btn-outline.btn-secondary:hover {
1894
1896
  --tw-text-opacity: 1;
1895
- color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1897
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)))
1896
1898
  }
1897
1899
  @supports (color: color-mix(in oklab, black, black)) {
1898
1900
  .btn-outline.btn-secondary:hover {
@@ -1903,7 +1905,7 @@ input.tab:checked + .tab-content,
1903
1905
  }
1904
1906
  .btn-outline.btn-secondary.btn-active {
1905
1907
  --tw-text-opacity: 1;
1906
- color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1908
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)))
1907
1909
  }
1908
1910
  @supports (color: color-mix(in oklab, black, black)) {
1909
1911
  .btn-outline.btn-secondary.btn-active {
@@ -1913,12 +1915,12 @@ input.tab:checked + .tab-content,
1913
1915
  }
1914
1916
  .btn-outline.btn-accent {
1915
1917
  --tw-text-opacity: 1;
1916
- color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
1918
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)))
1917
1919
  }
1918
1920
  @media (hover: hover) {
1919
1921
  .btn-outline.btn-accent:hover {
1920
1922
  --tw-text-opacity: 1;
1921
- color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1923
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)))
1922
1924
  }
1923
1925
  @supports (color: color-mix(in oklab, black, black)) {
1924
1926
  .btn-outline.btn-accent:hover {
@@ -1929,7 +1931,7 @@ input.tab:checked + .tab-content,
1929
1931
  }
1930
1932
  .btn-outline.btn-accent.btn-active {
1931
1933
  --tw-text-opacity: 1;
1932
- color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1934
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)))
1933
1935
  }
1934
1936
  @supports (color: color-mix(in oklab, black, black)) {
1935
1937
  .btn-outline.btn-accent.btn-active {
@@ -1939,12 +1941,12 @@ input.tab:checked + .tab-content,
1939
1941
  }
1940
1942
  .btn-outline.btn-success {
1941
1943
  --tw-text-opacity: 1;
1942
- color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
1944
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)))
1943
1945
  }
1944
1946
  @media (hover: hover) {
1945
1947
  .btn-outline.btn-success:hover {
1946
1948
  --tw-text-opacity: 1;
1947
- color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1949
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)))
1948
1950
  }
1949
1951
  @supports (color: color-mix(in oklab, black, black)) {
1950
1952
  .btn-outline.btn-success:hover {
@@ -1955,7 +1957,7 @@ input.tab:checked + .tab-content,
1955
1957
  }
1956
1958
  .btn-outline.btn-success.btn-active {
1957
1959
  --tw-text-opacity: 1;
1958
- color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1960
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)))
1959
1961
  }
1960
1962
  @supports (color: color-mix(in oklab, black, black)) {
1961
1963
  .btn-outline.btn-success.btn-active {
@@ -1965,12 +1967,12 @@ input.tab:checked + .tab-content,
1965
1967
  }
1966
1968
  .btn-outline.btn-info {
1967
1969
  --tw-text-opacity: 1;
1968
- color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
1970
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)))
1969
1971
  }
1970
1972
  @media (hover: hover) {
1971
1973
  .btn-outline.btn-info:hover {
1972
1974
  --tw-text-opacity: 1;
1973
- color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1975
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)))
1974
1976
  }
1975
1977
  @supports (color: color-mix(in oklab, black, black)) {
1976
1978
  .btn-outline.btn-info:hover {
@@ -1981,7 +1983,7 @@ input.tab:checked + .tab-content,
1981
1983
  }
1982
1984
  .btn-outline.btn-info.btn-active {
1983
1985
  --tw-text-opacity: 1;
1984
- color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1986
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)))
1985
1987
  }
1986
1988
  @supports (color: color-mix(in oklab, black, black)) {
1987
1989
  .btn-outline.btn-info.btn-active {
@@ -1991,12 +1993,12 @@ input.tab:checked + .tab-content,
1991
1993
  }
1992
1994
  .btn-outline.btn-warning {
1993
1995
  --tw-text-opacity: 1;
1994
- color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
1996
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)))
1995
1997
  }
1996
1998
  @media (hover: hover) {
1997
1999
  .btn-outline.btn-warning:hover {
1998
2000
  --tw-text-opacity: 1;
1999
- color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
2001
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)))
2000
2002
  }
2001
2003
  @supports (color: color-mix(in oklab, black, black)) {
2002
2004
  .btn-outline.btn-warning:hover {
@@ -2007,7 +2009,7 @@ input.tab:checked + .tab-content,
2007
2009
  }
2008
2010
  .btn-outline.btn-warning.btn-active {
2009
2011
  --tw-text-opacity: 1;
2010
- color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
2012
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)))
2011
2013
  }
2012
2014
  @supports (color: color-mix(in oklab, black, black)) {
2013
2015
  .btn-outline.btn-warning.btn-active {
@@ -2017,12 +2019,12 @@ input.tab:checked + .tab-content,
2017
2019
  }
2018
2020
  .btn-outline.btn-error {
2019
2021
  --tw-text-opacity: 1;
2020
- color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
2022
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)))
2021
2023
  }
2022
2024
  @media (hover: hover) {
2023
2025
  .btn-outline.btn-error:hover {
2024
2026
  --tw-text-opacity: 1;
2025
- color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2027
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)))
2026
2028
  }
2027
2029
  @supports (color: color-mix(in oklab, black, black)) {
2028
2030
  .btn-outline.btn-error:hover {
@@ -2033,7 +2035,7 @@ input.tab:checked + .tab-content,
2033
2035
  }
2034
2036
  .btn-outline.btn-error.btn-active {
2035
2037
  --tw-text-opacity: 1;
2036
- color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2038
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)))
2037
2039
  }
2038
2040
  @supports (color: color-mix(in oklab, black, black)) {
2039
2041
  .btn-outline.btn-error.btn-active {
@@ -2049,7 +2051,7 @@ input.tab:checked + .tab-content,
2049
2051
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2050
2052
  --tw-bg-opacity: 0.2;
2051
2053
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2052
- --tw-text-opacity: 0.2;
2054
+ --tw-text-opacity: 0.2
2053
2055
  }
2054
2056
  @media (hover: hover) {
2055
2057
  .btn-disabled:hover,
@@ -2059,7 +2061,7 @@ input.tab:checked + .tab-content,
2059
2061
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2060
2062
  --tw-bg-opacity: 0.2;
2061
2063
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2062
- --tw-text-opacity: 0.2;
2064
+ --tw-text-opacity: 0.2
2063
2065
  }
2064
2066
  }
2065
2067
 
@@ -2072,7 +2074,7 @@ input.tab:checked + .tab-content,
2072
2074
  --tw-bg-opacity: 1;
2073
2075
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
2074
2076
  --tw-text-opacity: 1;
2075
- color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
2077
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))
2076
2078
  }
2077
2079
 
2078
2080
  @media (hover: hover) {
@@ -2085,7 +2087,7 @@ input.tab:checked + .tab-content,
2085
2087
  }
2086
2088
 
2087
2089
  .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
2088
- outline-color: var(--fallback-p,oklch(var(--p)/1));
2090
+ outline-color: var(--fallback-p,oklch(var(--p)/1))
2089
2091
  }
2090
2092
 
2091
2093
  @keyframes button-pop {
@@ -4620,8 +4622,7 @@ details.collapse summary {
4620
4622
  padding-inline-start: var(--tab-padding, 1rem);
4621
4623
  padding-inline-end: var(--tab-padding, 1rem);
4622
4624
  }
4623
- .tab.tab-active:not(.tab-disabled):not([disabled]),
4624
- .tab:is(input:checked) {
4625
+ .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
4625
4626
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
4626
4627
  --tw-border-opacity: 1;
4627
4628
  --tw-text-opacity: 1;
@@ -4665,8 +4666,7 @@ details.collapse summary {
4665
4666
  padding-inline-end: var(--tab-padding, 1rem);
4666
4667
  padding-top: var(--tab-border, 1px);
4667
4668
  }
4668
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
4669
- .tabs-lifted > .tab:is(input:checked) {
4669
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
4670
4670
  background-color: var(--tab-bg);
4671
4671
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
4672
4672
  border-inline-start-color: var(--tab-border-color);
@@ -4677,7 +4677,7 @@ details.collapse summary {
4677
4677
  padding-bottom: var(--tab-border, 1px);
4678
4678
  padding-top: 0;
4679
4679
  }
4680
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
4680
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
4681
4681
  z-index: 1;
4682
4682
  content: "";
4683
4683
  display: block;
@@ -4707,26 +4707,26 @@ details.collapse summary {
4707
4707
  );
4708
4708
  background-image: var(--radius-start), var(--radius-end);
4709
4709
  }
4710
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
4710
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
4711
4711
  background-image: var(--radius-end);
4712
4712
  background-position: top right;
4713
4713
  }
4714
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
4714
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
4715
4715
  background-image: var(--radius-start);
4716
4716
  background-position: top left;
4717
4717
  }
4718
- .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
4718
+ .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
4719
4719
  background-image: var(--radius-start);
4720
4720
  background-position: top left;
4721
4721
  }
4722
- [dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
4722
+ [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
4723
4723
  background-image: var(--radius-end);
4724
4724
  background-position: top right;
4725
4725
  }
4726
4726
  .tabs-lifted
4727
- > .tab-active:not(.tab-disabled):not([disabled])
4727
+ > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
4728
4728
  + .tabs-lifted
4729
- .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
4729
+ :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
4730
4730
  background-image: var(--radius-end);
4731
4731
  background-position: top right;
4732
4732
  }
@@ -4739,16 +4739,14 @@ details.collapse summary {
4739
4739
  .tabs-boxed .tab {
4740
4740
  border-radius: var(--rounded-btn, 0.5rem);
4741
4741
  }
4742
- .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
4743
- .tabs-boxed :is(input:checked) {
4742
+ .tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-boxed :is(input:checked) {
4744
4743
  --tw-bg-opacity: 1;
4745
4744
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
4746
4745
  --tw-text-opacity: 1;
4747
4746
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
4748
4747
  }
4749
4748
  @media(hover:hover) {
4750
- .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
4751
- .tabs-boxed :is(input:checked):hover {
4749
+ .tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):hover, .tabs-boxed :is(input:checked):hover {
4752
4750
  --tw-text-opacity: 1;
4753
4751
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
4754
4752
  }