@aortl/admin-css 0.18.2 → 0.18.4
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.
- package/CHANGELOG.md +17 -1
- package/dist/admin.css +47 -11
- package/dist/admin.min.css +1 -1
- package/dist/admin.scoped.css +50 -14
- package/dist/admin.scoped.min.css +22 -16
- package/package.json +1 -1
- package/src/components/button-group.css +36 -11
- package/src/components/tabs.css +37 -0
package/dist/admin.scoped.css
CHANGED
|
@@ -1934,11 +1934,11 @@
|
|
|
1934
1934
|
:scope._ao-btn-group, :scope ._ao-btn-group {
|
|
1935
1935
|
display: inline-flex;
|
|
1936
1936
|
}
|
|
1937
|
-
:scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
|
|
1937
|
+
:scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn, :scope._ao-btn-group > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group > ._ao-indicator > ._ao-btn {
|
|
1938
1938
|
position: relative;
|
|
1939
1939
|
border-radius: 0;
|
|
1940
1940
|
}
|
|
1941
|
-
:scope:is(._ao-btn-group > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn):focus-visible {
|
|
1941
|
+
:scope:is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible {
|
|
1942
1942
|
z-index: 10;
|
|
1943
1943
|
}
|
|
1944
1944
|
:scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
|
|
@@ -1953,22 +1953,22 @@
|
|
|
1953
1953
|
:scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
|
|
1954
1954
|
border-radius: 0;
|
|
1955
1955
|
}
|
|
1956
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) {
|
|
1956
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) {
|
|
1957
1957
|
margin-left: -1px;
|
|
1958
1958
|
}
|
|
1959
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger {
|
|
1959
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn {
|
|
1960
1960
|
border-top-left-radius: var(--radius-lg);
|
|
1961
1961
|
border-bottom-left-radius: var(--radius-lg);
|
|
1962
1962
|
}
|
|
1963
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger {
|
|
1963
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn {
|
|
1964
1964
|
border-top-right-radius: var(--radius-lg);
|
|
1965
1965
|
border-bottom-right-radius: var(--radius-lg);
|
|
1966
1966
|
}
|
|
1967
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
|
|
1967
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
|
|
1968
1968
|
border-left-color: currentColor;
|
|
1969
1969
|
}
|
|
1970
1970
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1971
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
|
|
1971
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
|
|
1972
1972
|
border-left-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
1973
1973
|
}
|
|
1974
1974
|
}
|
|
@@ -1976,25 +1976,31 @@
|
|
|
1976
1976
|
display: inline-flex;
|
|
1977
1977
|
flex-direction: column;
|
|
1978
1978
|
}
|
|
1979
|
-
:scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn {
|
|
1979
|
+
:scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn, :scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
|
|
1980
1980
|
justify-content: flex-start;
|
|
1981
1981
|
}
|
|
1982
|
-
:scope._ao-btn-group-vertical > ._ao-
|
|
1982
|
+
:scope._ao-btn-group-vertical > ._ao-indicator, :scope ._ao-btn-group-vertical > ._ao-indicator {
|
|
1983
|
+
width: auto;
|
|
1984
|
+
}
|
|
1985
|
+
:scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
|
|
1986
|
+
width: 100%;
|
|
1987
|
+
}
|
|
1988
|
+
:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) {
|
|
1983
1989
|
margin-top: -1px;
|
|
1984
1990
|
}
|
|
1985
|
-
:scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger {
|
|
1991
|
+
:scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn {
|
|
1986
1992
|
border-top-left-radius: var(--radius-lg);
|
|
1987
1993
|
border-top-right-radius: var(--radius-lg);
|
|
1988
1994
|
}
|
|
1989
|
-
:scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger {
|
|
1995
|
+
:scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn {
|
|
1990
1996
|
border-bottom-right-radius: var(--radius-lg);
|
|
1991
1997
|
border-bottom-left-radius: var(--radius-lg);
|
|
1992
1998
|
}
|
|
1993
|
-
:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
|
|
1999
|
+
:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
|
|
1994
2000
|
border-top-color: currentColor;
|
|
1995
2001
|
}
|
|
1996
2002
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1997
|
-
:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
|
|
2003
|
+
:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
|
|
1998
2004
|
border-top-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
1999
2005
|
}
|
|
2000
2006
|
}
|
|
@@ -2002,9 +2008,12 @@
|
|
|
2002
2008
|
display: flex;
|
|
2003
2009
|
width: 100%;
|
|
2004
2010
|
}
|
|
2005
|
-
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu {
|
|
2011
|
+
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator {
|
|
2006
2012
|
flex: 1;
|
|
2007
2013
|
}
|
|
2014
|
+
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn {
|
|
2015
|
+
width: 100%;
|
|
2016
|
+
}
|
|
2008
2017
|
:scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical {
|
|
2009
2018
|
width: 100%;
|
|
2010
2019
|
}
|
|
@@ -4751,6 +4760,10 @@
|
|
|
4751
4760
|
:scope._ao-tabs ._ao-tab > :is(i, svg), :scope ._ao-tabs ._ao-tab > :is(i, svg) {
|
|
4752
4761
|
flex-shrink: 0;
|
|
4753
4762
|
}
|
|
4763
|
+
:scope._ao-tabs ._ao-tab > svg, :scope ._ao-tabs ._ao-tab > svg {
|
|
4764
|
+
width: 1em;
|
|
4765
|
+
height: 1em;
|
|
4766
|
+
}
|
|
4754
4767
|
:scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input {
|
|
4755
4768
|
position: absolute;
|
|
4756
4769
|
width: 1px;
|
|
@@ -4806,6 +4819,12 @@
|
|
|
4806
4819
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
4807
4820
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4808
4821
|
}
|
|
4822
|
+
:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab {
|
|
4823
|
+
background-color: var(--color-primary);
|
|
4824
|
+
color: var(--color-primary-content);
|
|
4825
|
+
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
4826
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4827
|
+
}
|
|
4809
4828
|
@supports (anchor-scope: --x) {
|
|
4810
4829
|
:scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
|
|
4811
4830
|
anchor-scope: --tab-thumb;
|
|
@@ -4855,6 +4874,17 @@
|
|
|
4855
4874
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4856
4875
|
transition: top 180ms ease, right 180ms ease, bottom 180ms ease, left 180ms ease;
|
|
4857
4876
|
}
|
|
4877
|
+
:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab {
|
|
4878
|
+
background-color: transparent;
|
|
4879
|
+
color: var(--color-primary-content);
|
|
4880
|
+
--tw-shadow: 0 0 #0000;
|
|
4881
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4882
|
+
}
|
|
4883
|
+
:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list::before, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list::before {
|
|
4884
|
+
background-color: var(--color-primary);
|
|
4885
|
+
--tw-shadow: 0 0 #0000;
|
|
4886
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
4887
|
+
}
|
|
4858
4888
|
}
|
|
4859
4889
|
:scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
|
|
4860
4890
|
display: flex;
|
|
@@ -4864,6 +4894,12 @@
|
|
|
4864
4894
|
flex: 1;
|
|
4865
4895
|
justify-content: center;
|
|
4866
4896
|
}
|
|
4897
|
+
:scope._ao-tabs-wrap ._ao-tab-list, :scope ._ao-tabs-wrap ._ao-tab-list {
|
|
4898
|
+
flex-wrap: wrap;
|
|
4899
|
+
}
|
|
4900
|
+
:scope._ao-tabs-wrap ._ao-tab, :scope ._ao-tabs-wrap ._ao-tab {
|
|
4901
|
+
white-space: nowrap;
|
|
4902
|
+
}
|
|
4867
4903
|
:scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab {
|
|
4868
4904
|
height: calc(var(--spacing) * 7);
|
|
4869
4905
|
padding-inline: calc(var(--spacing) * 2);
|
|
@@ -339,27 +339,29 @@
|
|
|
339
339
|
:scope._ao-btn-loading>:is(i,svg):first-child, :scope ._ao-btn-loading>:is(i,svg):first-child{display:none}
|
|
340
340
|
@media (prefers-reduced-motion:reduce){:scope._ao-btn-loading:before, :scope ._ao-btn-loading:before{animation-duration:2s}}
|
|
341
341
|
:scope._ao-btn-group, :scope ._ao-btn-group{display:inline-flex}
|
|
342
|
-
:scope._ao-btn-group>._ao-btn, :scope ._ao-btn-group>._ao-btn{border-radius:0;position:relative}
|
|
343
|
-
:scope._ao-btn-group>._ao-btn:focus-visible, :scope ._ao-btn-group>._ao-btn:focus-visible{z-index:10}
|
|
342
|
+
:scope._ao-btn-group>._ao-btn, :scope ._ao-btn-group>._ao-btn, :scope._ao-btn-group>._ao-indicator>._ao-btn, :scope ._ao-btn-group>._ao-indicator>._ao-btn{border-radius:0;position:relative}
|
|
343
|
+
:scope:is(._ao-btn-group>._ao-btn,._ao-btn-group>._ao-indicator>._ao-btn):focus-visible, :scope :is(._ao-btn-group>._ao-btn,._ao-btn-group>._ao-indicator>._ao-btn):focus-visible{z-index:10}
|
|
344
344
|
:scope._ao-btn-group>._ao-menu, :scope ._ao-btn-group>._ao-menu{position:relative}
|
|
345
345
|
:scope._ao-btn-group>._ao-menu:focus-visible, :scope ._ao-btn-group>._ao-menu:focus-visible{z-index:10}
|
|
346
346
|
:scope._ao-btn-group>._ao-menu, :scope ._ao-btn-group>._ao-menu{display:inline-flex}
|
|
347
347
|
:scope._ao-btn-group>._ao-menu>._ao-menu-trigger, :scope ._ao-btn-group>._ao-menu>._ao-menu-trigger{border-radius:0}
|
|
348
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child){margin-left:-1px}
|
|
349
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
|
|
350
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
|
|
351
|
-
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:currentColor}
|
|
352
|
-
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:color-mix(in oklab, currentColor 25%, transparent)}}
|
|
348
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child){margin-left:-1px}
|
|
349
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:first-child>._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:first-child>._ao-btn{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
|
|
350
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:last-child>._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:last-child>._ao-btn{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
|
|
351
|
+
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child)>._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child)>._ao-btn{border-left-color:currentColor}
|
|
352
|
+
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child)>._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-indicator:not(:first-child)>._ao-btn{border-left-color:color-mix(in oklab, currentColor 25%, transparent)}}
|
|
353
353
|
:scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical{flex-direction:column;display:inline-flex}
|
|
354
|
-
:scope._ao-btn-group-vertical>._ao-btn, :scope ._ao-btn-group-vertical>._ao-btn{justify-content:flex-start}
|
|
355
|
-
:scope._ao-btn-group-vertical>._ao-
|
|
356
|
-
:scope._ao-btn-group-vertical>._ao-
|
|
357
|
-
:scope._ao-btn-group-vertical>._ao-btn:
|
|
358
|
-
:scope._ao-btn-group-vertical>._ao-btn:
|
|
359
|
-
|
|
354
|
+
:scope._ao-btn-group-vertical>._ao-btn, :scope ._ao-btn-group-vertical>._ao-btn, :scope._ao-btn-group-vertical>._ao-indicator>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator>._ao-btn{justify-content:flex-start}
|
|
355
|
+
:scope._ao-btn-group-vertical>._ao-indicator, :scope ._ao-btn-group-vertical>._ao-indicator{width:auto}
|
|
356
|
+
:scope._ao-btn-group-vertical>._ao-indicator>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator>._ao-btn{width:100%}
|
|
357
|
+
:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child), :scope._ao-btn-group-vertical>._ao-indicator:not(:first-child), :scope ._ao-btn-group-vertical>._ao-indicator:not(:first-child){margin-top:-1px}
|
|
358
|
+
:scope._ao-btn-group-vertical>._ao-btn:first-child, :scope ._ao-btn-group-vertical>._ao-btn:first-child, :scope._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger, :scope._ao-btn-group-vertical>._ao-indicator:first-child>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator:first-child>._ao-btn{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
|
|
359
|
+
:scope._ao-btn-group-vertical>._ao-btn:last-child, :scope ._ao-btn-group-vertical>._ao-btn:last-child, :scope._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger, :scope._ao-btn-group-vertical>._ao-indicator:last-child>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator:last-child>._ao-btn{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
|
|
360
|
+
:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope._ao-btn-group-vertical>._ao-indicator:not(:first-child)>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator:not(:first-child)>._ao-btn{border-top-color:currentColor}
|
|
361
|
+
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope._ao-btn-group-vertical>._ao-indicator:not(:first-child)>._ao-btn, :scope ._ao-btn-group-vertical>._ao-indicator:not(:first-child)>._ao-btn{border-top-color:color-mix(in oklab, currentColor 25%, transparent)}}
|
|
360
362
|
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical), :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical){width:100%;display:flex}
|
|
361
|
-
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu{flex:1}
|
|
362
|
-
:scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical{width:100%}
|
|
363
|
+
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-indicator, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-indicator{flex:1}
|
|
364
|
+
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-indicator>._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-indicator>._ao-btn, :scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical{width:100%}
|
|
363
365
|
:scope._ao-link, :scope ._ao-link{align-items:center;gap:calc(var(--spacing) * 1);border-radius:var(--radius-sm);color:var(--color-link);text-underline-offset:2px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;text-decoration-line:underline;transition-duration:.15s;display:inline-flex}
|
|
364
366
|
@media (hover:hover){:scope._ao-link:hover, :scope ._ao-link:hover{color:var(--color-link-hover)}}
|
|
365
367
|
:scope._ao-link:focus-visible, :scope ._ao-link:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
|
|
@@ -782,6 +784,7 @@
|
|
|
782
784
|
:scope._ao-tabs ._ao-tab:disabled, :scope ._ao-tabs ._ao-tab:disabled{cursor:not-allowed;opacity:.5}
|
|
783
785
|
:scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected=true], :scope ._ao-tabs ._ao-tab[aria-selected=true]{color:var(--color-text)}
|
|
784
786
|
:scope._ao-tabs ._ao-tab>:is(i,svg), :scope ._ao-tabs ._ao-tab>:is(i,svg){flex-shrink:0}
|
|
787
|
+
:scope._ao-tabs ._ao-tab>svg, :scope ._ao-tabs ._ao-tab>svg{width:1em;height:1em}
|
|
785
788
|
:scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input{opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute}
|
|
786
789
|
:scope._ao-tabs ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked+._ao-tab{color:var(--color-text)}
|
|
787
790
|
:scope._ao-tabs ._ao-tab-input:focus-visible+._ao-tab, :scope ._ao-tabs ._ao-tab-input:focus-visible+._ao-tab{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
|
|
@@ -791,9 +794,12 @@
|
|
|
791
794
|
:scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list{gap:calc(var(--spacing) * 0);border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding:calc(var(--spacing) * .5)}
|
|
792
795
|
:scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab{z-index:1;border-radius:.25rem;position:relative}
|
|
793
796
|
:scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{background-color:var(--color-surface);color:var(--color-text);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
|
|
794
|
-
|
|
797
|
+
:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked+._ao-tab{background-color:var(--color-primary);color:var(--color-primary-content);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
|
|
798
|
+
@supports (anchor-scope:--x){:scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list{anchor-scope:--tab-thumb}:scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected=true], :scope ._ao-tabs ._ao-tab[aria-selected=true], :scope._ao-tabs ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked+._ao-tab{anchor-name:--tab-thumb}:scope._ao-tabs ._ao-tab-list:before, :scope ._ao-tabs ._ao-tab-list:before{content:"";position-anchor:--tab-thumb;position:absolute}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{display:none}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before{background-color:var(--color-primary);left:anchor(left);right:anchor(right);block-size:2px;transition:left .18s,right .18s;inset-block-end:-1px}:scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before{inline-size:2px;inset-inline:auto -1px;top:anchor(top);bottom:anchor(bottom);block-size:auto;transition:top .18s,bottom .18s}:scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000}:scope._ao-tabs-boxed ._ao-tab-list:before, :scope ._ao-tabs-boxed ._ao-tab-list:before{top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);z-index:0;background-color:var(--color-surface);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-radius:.25rem;transition:top .18s,right .18s,bottom .18s,left .18s}:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked+._ao-tab{color:var(--color-primary-content);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000}:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list:before, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list:before{background-color:var(--color-primary);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}
|
|
795
799
|
:scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list{width:100%;display:flex}
|
|
796
800
|
:scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab{flex:1;justify-content:center}
|
|
801
|
+
:scope._ao-tabs-wrap ._ao-tab-list, :scope ._ao-tabs-wrap ._ao-tab-list{flex-wrap:wrap}
|
|
802
|
+
:scope._ao-tabs-wrap ._ao-tab, :scope ._ao-tabs-wrap ._ao-tab{white-space:nowrap}
|
|
797
803
|
:scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab{height:calc(var(--spacing) * 7);padding-inline:calc(var(--spacing) * 2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
|
|
798
804
|
:scope._ao-tabs-lg ._ao-tab, :scope ._ao-tabs-lg ._ao-tab{height:calc(var(--spacing) * 11);padding-inline:calc(var(--spacing) * 4);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
|
|
799
805
|
:scope._ao-tabs ._ao-tab-panel, :scope ._ao-tabs ._ao-tab-panel{padding-top:calc(var(--spacing) * 3);--tw-outline-style:none;outline-style:none;display:none}
|
package/package.json
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
@apply inline-flex;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.btn-group > .btn
|
|
6
|
+
.btn-group > .btn,
|
|
7
|
+
.btn-group > .indicator > .btn {
|
|
7
8
|
@apply rounded-none relative focus-visible:z-10;
|
|
8
9
|
}
|
|
9
10
|
|
|
@@ -20,24 +21,28 @@
|
|
|
20
21
|
|
|
21
22
|
/* Horizontal-only — vertical groups also carry .btn-group, hence the :not() scope. */
|
|
22
23
|
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
|
|
23
|
-
.btn-group:not(.btn-group-vertical) > .menu:not(:first-child)
|
|
24
|
+
.btn-group:not(.btn-group-vertical) > .menu:not(:first-child),
|
|
25
|
+
.btn-group:not(.btn-group-vertical) > .indicator:not(:first-child) {
|
|
24
26
|
@apply -ml-px;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
.btn-group:not(.btn-group-vertical) > .btn:first-child,
|
|
28
|
-
.btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger
|
|
30
|
+
.btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger,
|
|
31
|
+
.btn-group:not(.btn-group-vertical) > .indicator:first-child > .btn {
|
|
29
32
|
@apply rounded-l-lg;
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
.btn-group:not(.btn-group-vertical) > .btn:last-child,
|
|
33
|
-
.btn-group:not(.btn-group-vertical) > .menu:last-child > .menu-trigger
|
|
36
|
+
.btn-group:not(.btn-group-vertical) > .menu:last-child > .menu-trigger,
|
|
37
|
+
.btn-group:not(.btn-group-vertical) > .indicator:last-child > .btn {
|
|
34
38
|
@apply rounded-r-lg;
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
/* Seam divider — color-mix on currentColor adapts to every .btn variant
|
|
38
42
|
without per-variant rules. */
|
|
39
43
|
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
|
|
40
|
-
.btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger
|
|
44
|
+
.btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger,
|
|
45
|
+
.btn-group:not(.btn-group-vertical) > .indicator:not(:first-child) > .btn {
|
|
41
46
|
border-left-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
42
47
|
}
|
|
43
48
|
|
|
@@ -45,27 +50,42 @@
|
|
|
45
50
|
@apply inline-flex flex-col;
|
|
46
51
|
}
|
|
47
52
|
|
|
48
|
-
.btn-group-vertical > .btn
|
|
53
|
+
.btn-group-vertical > .btn,
|
|
54
|
+
.btn-group-vertical > .indicator > .btn {
|
|
49
55
|
@apply justify-start;
|
|
50
56
|
}
|
|
51
57
|
|
|
58
|
+
/* .indicator hugs its button (w-max) when horizontal; a vertical group
|
|
59
|
+
stretches every cell, so the wrapper and its button fill the width. */
|
|
60
|
+
.btn-group-vertical > .indicator {
|
|
61
|
+
@apply w-auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.btn-group-vertical > .indicator > .btn {
|
|
65
|
+
@apply w-full;
|
|
66
|
+
}
|
|
67
|
+
|
|
52
68
|
.btn-group-vertical > .btn:not(:first-child),
|
|
53
|
-
.btn-group-vertical > .menu:not(:first-child)
|
|
69
|
+
.btn-group-vertical > .menu:not(:first-child),
|
|
70
|
+
.btn-group-vertical > .indicator:not(:first-child) {
|
|
54
71
|
@apply -mt-px;
|
|
55
72
|
}
|
|
56
73
|
|
|
57
74
|
.btn-group-vertical > .btn:first-child,
|
|
58
|
-
.btn-group-vertical > .menu:first-child > .menu-trigger
|
|
75
|
+
.btn-group-vertical > .menu:first-child > .menu-trigger,
|
|
76
|
+
.btn-group-vertical > .indicator:first-child > .btn {
|
|
59
77
|
@apply rounded-t-lg;
|
|
60
78
|
}
|
|
61
79
|
|
|
62
80
|
.btn-group-vertical > .btn:last-child,
|
|
63
|
-
.btn-group-vertical > .menu:last-child > .menu-trigger
|
|
81
|
+
.btn-group-vertical > .menu:last-child > .menu-trigger,
|
|
82
|
+
.btn-group-vertical > .indicator:last-child > .btn {
|
|
64
83
|
@apply rounded-b-lg;
|
|
65
84
|
}
|
|
66
85
|
|
|
67
86
|
.btn-group-vertical > .btn:not(:first-child),
|
|
68
|
-
.btn-group-vertical > .menu:not(:first-child) > .menu-trigger
|
|
87
|
+
.btn-group-vertical > .menu:not(:first-child) > .menu-trigger,
|
|
88
|
+
.btn-group-vertical > .indicator:not(:first-child) > .btn {
|
|
69
89
|
border-top-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
70
90
|
}
|
|
71
91
|
|
|
@@ -76,10 +96,15 @@
|
|
|
76
96
|
}
|
|
77
97
|
|
|
78
98
|
.btn-group-full-width:not(.btn-group-vertical) > .btn,
|
|
79
|
-
.btn-group-full-width:not(.btn-group-vertical) > .menu
|
|
99
|
+
.btn-group-full-width:not(.btn-group-vertical) > .menu,
|
|
100
|
+
.btn-group-full-width:not(.btn-group-vertical) > .indicator {
|
|
80
101
|
@apply flex-1;
|
|
81
102
|
}
|
|
82
103
|
|
|
104
|
+
.btn-group-full-width:not(.btn-group-vertical) > .indicator > .btn {
|
|
105
|
+
@apply w-full;
|
|
106
|
+
}
|
|
107
|
+
|
|
83
108
|
.btn-group-full-width.btn-group-vertical {
|
|
84
109
|
@apply w-full;
|
|
85
110
|
}
|
package/src/components/tabs.css
CHANGED
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
flex-shrink: 0;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
/* Pin SVG icons to the label size so any icon set renders uniformly in the
|
|
36
|
+
segmented control — not just Tabler's `size="1em"` (e.g. Heroicons, which
|
|
37
|
+
carry no width/height). */
|
|
38
|
+
.tabs .tab > svg {
|
|
39
|
+
width: 1em;
|
|
40
|
+
height: 1em;
|
|
41
|
+
}
|
|
42
|
+
|
|
35
43
|
/* Vanilla radio pattern: hidden inputs; :checked styles the following label. */
|
|
36
44
|
.tabs .tab-input {
|
|
37
45
|
position: absolute;
|
|
@@ -90,6 +98,13 @@
|
|
|
90
98
|
@apply bg-surface text-text shadow-sm;
|
|
91
99
|
}
|
|
92
100
|
|
|
101
|
+
/* Primary-filled thumb — the active segment uses the primary color. */
|
|
102
|
+
.tabs-boxed.tabs-primary .tab[data-selected],
|
|
103
|
+
.tabs-boxed.tabs-primary .tab[aria-selected="true"],
|
|
104
|
+
.tabs-boxed.tabs-primary .tab-input:checked + .tab {
|
|
105
|
+
@apply bg-primary text-primary-content shadow-sm;
|
|
106
|
+
}
|
|
107
|
+
|
|
93
108
|
/* Sliding active marker, zero extra DOM: the selected tab becomes a CSS
|
|
94
109
|
anchor and a single .tab-list pseudo tracks it via anchor() insets, which
|
|
95
110
|
the browser interpolates between tabs — vanilla `:checked` and React both
|
|
@@ -161,6 +176,18 @@
|
|
|
161
176
|
bottom 180ms ease,
|
|
162
177
|
left 180ms ease;
|
|
163
178
|
}
|
|
179
|
+
|
|
180
|
+
/* Keep the label legible on the primary thumb; the bg-primary here overrides
|
|
181
|
+
the higher-specificity fallback above so the sliding thumb still shows. */
|
|
182
|
+
.tabs-boxed.tabs-primary .tab[data-selected],
|
|
183
|
+
.tabs-boxed.tabs-primary .tab[aria-selected="true"],
|
|
184
|
+
.tabs-boxed.tabs-primary .tab-input:checked + .tab {
|
|
185
|
+
@apply bg-transparent text-primary-content shadow-none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.tabs-boxed.tabs-primary .tab-list::before {
|
|
189
|
+
@apply bg-primary shadow-none;
|
|
190
|
+
}
|
|
164
191
|
}
|
|
165
192
|
|
|
166
193
|
.tabs-full-width:not([data-orientation="vertical"]) .tab-list {
|
|
@@ -171,6 +198,16 @@
|
|
|
171
198
|
@apply flex-1 justify-center;
|
|
172
199
|
}
|
|
173
200
|
|
|
201
|
+
/* Wrap long, free-text labels onto new rows instead of overflowing or
|
|
202
|
+
squishing them; each tab keeps its label on one line. */
|
|
203
|
+
.tabs-wrap .tab-list {
|
|
204
|
+
@apply flex-wrap;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.tabs-wrap .tab {
|
|
208
|
+
@apply whitespace-nowrap;
|
|
209
|
+
}
|
|
210
|
+
|
|
174
211
|
.tabs-sm .tab {
|
|
175
212
|
@apply px-2 h-7 text-xs;
|
|
176
213
|
}
|