@planningcenter/tapestry 4.2.1-rc.5 → 4.2.1-rc.7

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.
@@ -954,122 +954,6 @@
954
954
  }
955
955
  }
956
956
 
957
- .tds-button-group{
958
- display:inline-flex;
959
- }
960
- .tds-button-group > .tds-btn{
961
- --tds-button-group-item-z-index:1;
962
-
963
- position:relative;
964
- z-index:var(--tds-button-group-item-z-index);
965
- border-radius:0;
966
- }
967
- :is(.tds-button-group > .tds-btn):not(:first-child){
968
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
- }
970
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
- position:absolute;
972
- inset-block:calc(var(--tds-btn-border-width) * -1);
973
- width:var(--tds-btn-border-width);
974
- pointer-events:none;
975
- content:"";
976
- background-color:var(--t-border-color-white);
977
- }
978
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
- }
981
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
- }
984
- :is(.tds-button-group > .tds-btn):hover{
985
- --tds-button-group-item-z-index:2;
986
- }
987
- :is(.tds-button-group > .tds-btn):focus-visible{
988
- --tds-button-group-item-z-index:5;
989
- }
990
- .tds-button-group > .tds-btn:first-child{
991
- border-start-start-radius:var(--tds-btn-border-radius);
992
- border-end-start-radius:var(--tds-btn-border-radius);
993
- }
994
- .tds-button-group > .tds-btn:last-child{
995
- border-start-end-radius:var(--tds-btn-border-radius);
996
- border-end-end-radius:var(--tds-btn-border-radius);
997
- }
998
-
999
- .tds-checkbox-group{
1000
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1001
- --tds-checkbox-group-line-height:1.4;
1002
- --tds-checkbox-group-gap:var(--t-spacing-1);
1003
-
1004
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1005
- --tds-checkbox-group-description-line-height:1.35;
1006
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1007
- --tds-checkbox-group-description-invalid-icon-display:none;
1008
- display:flex;
1009
- flex-direction:column;
1010
- gap:0;
1011
- padding:0;
1012
- margin:0;
1013
-
1014
- font-size:var(--tds-checkbox-group-font-size);
1015
- line-height:var(--tds-checkbox-group-line-height);
1016
- border:0;
1017
- }
1018
-
1019
- .tds-checkbox-group legend{
1020
- float:left;
1021
- padding:0;
1022
- margin:0;
1023
- }
1024
-
1025
- .tds-checkbox-group[aria-invalid="true"]{
1026
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1027
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1028
- }
1029
-
1030
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1031
- margin-left:.25ch;
1032
- color:var(--t-text-color-status-error);
1033
- content:"*";
1034
- }
1035
-
1036
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1037
- content:none;
1038
- }
1039
-
1040
- .tds-checkbox-group-fields{
1041
- display:flex;
1042
- flex-direction:column;
1043
- gap:var(--tds-checkbox-group-gap);
1044
- align-items:flex-start;
1045
- margin-top:var(--t-spacing-1);
1046
- }
1047
-
1048
- .tds-checkbox-group-description{
1049
- display:flex;
1050
- gap:var(--t-spacing-half);
1051
- align-items:flex-start;
1052
- margin:var(--t-spacing-fourth) 0 0;
1053
- font-size:var(--tds-checkbox-group-description-font-size);
1054
- line-height:var(--tds-checkbox-group-description-line-height);
1055
- color:var(--tds-checkbox-group-description-color);
1056
- cursor:text;
1057
- }
1058
-
1059
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1060
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1061
- flex-shrink:0;
1062
- margin-top:calc(.5lh - .5em);
1063
- line-height:var(--tds-checkbox-group-description-line-height);
1064
- }
1065
-
1066
- .tds-checkbox-group--sm{
1067
- --tds-checkbox-group-line-height:1.35;
1068
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1069
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1070
- --tds-checkbox-group-description-line-height:1.3;
1071
- }
1072
-
1073
957
 
1074
958
  @media (prefers-reduced-motion: no-preference){
1075
959
 
@@ -1432,29 +1316,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1432
1316
  flex-direction:column;
1433
1317
  }
1434
1318
 
1435
-
1436
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1437
- -webkit-appearance:none;
1438
- appearance:none;
1439
- }
1440
-
1441
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1442
- inline-size:1em;
1443
- block-size:2em;
1444
- }
1445
- @supports (field-sizing: content){
1446
- .tds-input--auto-width{
1447
- inline-size:-moz-fit-content;
1448
- inline-size:fit-content;
1449
- min-inline-size:min(100%, 122px);
1450
- }
1451
-
1452
- .tds-input--auto-width input{
1453
- field-sizing:content;
1454
- inline-size:auto;
1455
- }
1456
- }
1457
-
1458
1319
  .tds-checkbox{
1459
1320
  --tds-checkbox-font-size:var(--t-font-size-md);
1460
1321
  --tds-checkbox-cursor:pointer;
@@ -1650,6 +1511,122 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1650
1511
  --tds-checkbox-description-line-height:1.3;
1651
1512
  }
1652
1513
 
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1516
+ }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1519
+
1520
+ position:relative;
1521
+ z-index:var(--tds-button-group-item-z-index);
1522
+ border-radius:0;
1523
+ }
1524
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1525
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
+ }
1527
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1528
+ position:absolute;
1529
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1530
+ width:var(--tds-btn-border-width);
1531
+ pointer-events:none;
1532
+ content:"";
1533
+ background-color:var(--t-border-color-white);
1534
+ }
1535
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1537
+ }
1538
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1540
+ }
1541
+ :is(.tds-button-group > .tds-btn):hover{
1542
+ --tds-button-group-item-z-index:2;
1543
+ }
1544
+ :is(.tds-button-group > .tds-btn):focus-visible{
1545
+ --tds-button-group-item-z-index:5;
1546
+ }
1547
+ .tds-button-group > .tds-btn:first-child{
1548
+ border-start-start-radius:var(--tds-btn-border-radius);
1549
+ border-end-start-radius:var(--tds-btn-border-radius);
1550
+ }
1551
+ .tds-button-group > .tds-btn:last-child{
1552
+ border-start-end-radius:var(--tds-btn-border-radius);
1553
+ border-end-end-radius:var(--tds-btn-border-radius);
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1565
+ display:flex;
1566
+ flex-direction:column;
1567
+ gap:0;
1568
+ padding:0;
1569
+ margin:0;
1570
+
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1573
+ border:0;
1574
+ }
1575
+
1576
+ .tds-checkbox-group legend{
1577
+ float:left;
1578
+ padding:0;
1579
+ margin:0;
1580
+ }
1581
+
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
+ }
1586
+
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1591
+ }
1592
+
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1595
+ }
1596
+
1597
+ .tds-checkbox-group-fields{
1598
+ display:flex;
1599
+ flex-direction:column;
1600
+ gap:var(--tds-checkbox-group-gap);
1601
+ align-items:flex-start;
1602
+ margin-top:var(--t-spacing-1);
1603
+ }
1604
+
1605
+ .tds-checkbox-group-description{
1606
+ display:flex;
1607
+ gap:var(--t-spacing-half);
1608
+ align-items:flex-start;
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1614
+ }
1615
+
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1621
+ }
1622
+
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1628
+ }
1629
+
1653
1630
  .tds-modal-overlay{
1654
1631
  --tds-modal-min-margin-block:var(--t-spacing-3);
1655
1632
 
@@ -1813,6 +1790,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1813
1790
  }
1814
1791
  }
1815
1792
 
1793
+
1794
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1795
+ -webkit-appearance:none;
1796
+ appearance:none;
1797
+ }
1798
+
1799
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1800
+ inline-size:1em;
1801
+ block-size:2em;
1802
+ }
1803
+ @supports (field-sizing: content){
1804
+ .tds-input--auto-width{
1805
+ inline-size:-moz-fit-content;
1806
+ inline-size:fit-content;
1807
+ min-inline-size:min(100%, 122px);
1808
+ }
1809
+
1810
+ .tds-input--auto-width input{
1811
+ field-sizing:content;
1812
+ inline-size:auto;
1813
+ }
1814
+ }
1815
+
1816
1816
  .tds-radio{
1817
1817
  --tds-radio-font-size:var(--t-font-size-md);
1818
1818
  --tds-radio-cursor:pointer;
@@ -1902,49 +1902,237 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1902
1902
  --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1903
1903
  }
1904
1904
 
1905
- .tds-radio:has(input:user-invalid){
1906
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1907
- }
1905
+ .tds-radio:has(input:user-invalid){
1906
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1907
+ }
1908
+
1909
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1910
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1911
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1912
+ }
1913
+
1914
+ .tds-radio:has(input:disabled){
1915
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1916
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1917
+
1918
+ --tds-radio-label-color:var(--t-form-color-disabled);
1919
+ --tds-radio-description-color:var(--t-form-color-disabled);
1920
+ --tds-radio-cursor:not-allowed;
1921
+ }
1922
+
1923
+ .tds-radio:has(input:disabled) input:checked{
1924
+ --tds-radio-input-background-color:var(--t-form-background-color);
1925
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1926
+ }
1927
+
1928
+ .tds-radio-description{
1929
+ display:flex;
1930
+ grid-area:2 / 2;
1931
+ gap:var(--t-spacing-half);
1932
+ align-items:flex-start;
1933
+ padding-inline-start:var(--t-spacing-1);
1934
+ margin:0;
1935
+ font-size:var(--tds-radio-description-font-size);
1936
+ line-height:var(--tds-radio-description-line-height);
1937
+ color:var(--tds-radio-description-color);
1938
+ cursor:text;
1939
+ }
1940
+
1941
+ .tds-radio--sm{
1942
+ --tds-radio-line-height:1.35;
1943
+ --tds-radio-input-size:var(--t-element-size-sm);
1944
+ --tds-radio-font-size:var(--t-font-size-sm);
1945
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1946
+ --tds-radio-description-line-height:1.3;
1947
+ }
1948
+
1949
+ .tds-radio-group{
1950
+ --tds-radio-group-font-size:var(--t-font-size-md);
1951
+ --tds-radio-group-line-height:1.4;
1952
+ --tds-radio-group-gap:var(--t-spacing-1);
1953
+
1954
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1955
+ --tds-radio-group-description-line-height:1.35;
1956
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1957
+ --tds-radio-group-description-invalid-icon-display:none;
1958
+ display:flex;
1959
+ flex-direction:column;
1960
+ gap:0;
1961
+ padding:0;
1962
+ margin:0;
1963
+
1964
+ font-size:var(--tds-radio-group-font-size);
1965
+ line-height:var(--tds-radio-group-line-height);
1966
+ border:0;
1967
+ }
1968
+
1969
+ .tds-radio-group legend{
1970
+ float:left;
1971
+ padding:0;
1972
+ margin:0;
1973
+ }
1974
+
1975
+ .tds-radio-group[aria-invalid="true"]{
1976
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1977
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1978
+ }
1979
+
1980
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1981
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1982
+ }
1983
+
1984
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1985
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1986
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1987
+ }
1988
+
1989
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1990
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1991
+ }
1992
+
1993
+ .tds-radio-group:has(input:required) legend::after{
1994
+ margin-left:.25ch;
1995
+ color:var(--t-text-color-status-error);
1996
+ content:"*";
1997
+ }
1998
+
1999
+ .tds-radio-group-fields{
2000
+ display:flex;
2001
+ flex-direction:column;
2002
+ gap:var(--tds-radio-group-gap);
2003
+ align-items:flex-start;
2004
+ margin-top:var(--t-spacing-1);
2005
+ }
2006
+
2007
+ .tds-radio-group-description{
2008
+ display:flex;
2009
+ gap:var(--t-spacing-half);
2010
+ align-items:flex-start;
2011
+ margin:var(--t-spacing-fourth) 0 0;
2012
+ font-size:var(--tds-radio-group-description-font-size);
2013
+ line-height:var(--tds-radio-group-description-line-height);
2014
+ color:var(--tds-radio-group-description-color);
2015
+ cursor:text;
2016
+ }
2017
+
2018
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2019
+ display:var(--tds-radio-group-description-invalid-icon-display);
2020
+ flex-shrink:0;
2021
+ margin-top:calc(.5lh - .5em);
2022
+ line-height:var(--tds-radio-group-description-line-height);
2023
+ }
2024
+
2025
+ .tds-radio-group--sm{
2026
+ --tds-radio-group-line-height:1.35;
2027
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2028
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2029
+ --tds-radio-group-description-line-height:1.3;
2030
+ }
2031
+
2032
+ .tds-input:has(textarea){
2033
+ --tds-input-padding-block:6px;
2034
+ --tds-input-resizer-size:var(--t-element-size-sm);
2035
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2036
+ }
2037
+
2038
+ @supports (x: attr(x type(*))){
2039
+
2040
+ .tds-input textarea{
2041
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2042
+ }
2043
+ }
2044
+
2045
+ .tds-input.tds-textarea--resize-vertical textarea{
2046
+ resize:vertical;
2047
+ }
2048
+
2049
+ .tds-input.tds-textarea--resize-none textarea{
2050
+ resize:none;
2051
+ }
2052
+
2053
+ .tds-input.tds-textarea--resize-auto textarea{
2054
+ resize:vertical;
2055
+ }
2056
+
2057
+ @supports (field-sizing: content){
2058
+ .tds-input.tds-textarea--resize-auto textarea{
2059
+ field-sizing:content;
2060
+ resize:none;
2061
+ }
2062
+ }
2063
+
2064
+ .tds-input textarea{
2065
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2066
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2067
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2068
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2069
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2070
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2071
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2072
+ --tds-input-scrollbar-thumb-border-radius:999px;
2073
+ --tds-input-scrollbar-thumb-border-width:3px;
2074
+ --tds-input-scrollbar-track-margin-block:.125rem;
2075
+ scrollbar-color:initial;
2076
+ transition-timing-function:var(--t-ease-in-out);
2077
+ transition-duration:var(--t-duration-200);
2078
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2079
+ }
2080
+
2081
+ @media (pointer: fine){
2082
+ :is(.tds-input textarea)::-webkit-scrollbar{
2083
+ width:12px;
2084
+ height:12px;
2085
+ cursor:default;
2086
+ }
2087
+
2088
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2089
+ cursor:default;
2090
+ background:var(--tds-input-scrollbar-thumb-color);
2091
+ background-clip:content-box;
2092
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2093
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2094
+ }
2095
+
2096
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2097
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2098
+ }
2099
+
2100
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2101
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2102
+ }
1908
2103
 
1909
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1910
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1911
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2104
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2105
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1912
2106
  }
1913
2107
 
1914
- .tds-radio:has(input:disabled){
1915
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1916
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2108
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2109
+ background:var(--tds-input-scrollbar-surface-color);
2110
+ }
1917
2111
 
1918
- --tds-radio-label-color:var(--t-form-color-disabled);
1919
- --tds-radio-description-color:var(--t-form-color-disabled);
1920
- --tds-radio-cursor:not-allowed;
1921
- }
2112
+ :is(.tds-input textarea)::-webkit-resizer{
2113
+ background:var(--tds-input-resizer-icon) no-repeat;
2114
+ background-position:right bottom;
2115
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2116
+ }
1922
2117
 
1923
- .tds-radio:has(input:disabled) input:checked{
1924
- --tds-radio-input-background-color:var(--t-form-background-color);
1925
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2118
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2119
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2120
+ cursor:default;
1926
2121
  }
1927
2122
 
1928
- .tds-radio-description{
1929
- display:flex;
1930
- grid-area:2 / 2;
1931
- gap:var(--t-spacing-half);
1932
- align-items:flex-start;
1933
- padding-inline-start:var(--t-spacing-1);
1934
- margin:0;
1935
- font-size:var(--tds-radio-description-font-size);
1936
- line-height:var(--tds-radio-description-line-height);
1937
- color:var(--tds-radio-description-color);
1938
- cursor:text;
1939
- }
2123
+ @supports (-moz-appearance: none){
2124
+ :is(.tds-input textarea){
2125
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2126
+ scrollbar-width:thin;
2127
+ }
1940
2128
 
1941
- .tds-radio--sm{
1942
- --tds-radio-line-height:1.35;
1943
- --tds-radio-input-size:var(--t-element-size-sm);
1944
- --tds-radio-font-size:var(--t-font-size-sm);
1945
- --tds-radio-description-font-size:var(--t-font-size-xs);
1946
- --tds-radio-description-line-height:1.3;
1947
- }
2129
+ @media (hover){
2130
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2131
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2132
+ }
2133
+ }
2134
+ }
2135
+ }
1948
2136
 
1949
2137
  .tds-toggle-switch{
1950
2138
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -2086,194 +2274,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2086
2274
  --tds-toggle-switch-display:inline-flex;
2087
2275
  }
2088
2276
 
2089
- .tds-input:has(textarea){
2090
- --tds-input-padding-block:6px;
2091
- --tds-input-resizer-size:var(--t-element-size-sm);
2092
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2093
- }
2094
-
2095
- @supports (x: attr(x type(*))){
2096
-
2097
- .tds-input textarea{
2098
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2099
- }
2100
- }
2101
-
2102
- .tds-input.tds-textarea--resize-vertical textarea{
2103
- resize:vertical;
2104
- }
2105
-
2106
- .tds-input.tds-textarea--resize-none textarea{
2107
- resize:none;
2108
- }
2109
-
2110
- .tds-input.tds-textarea--resize-auto textarea{
2111
- resize:vertical;
2112
- }
2113
-
2114
- @supports (field-sizing: content){
2115
- .tds-input.tds-textarea--resize-auto textarea{
2116
- field-sizing:content;
2117
- resize:none;
2118
- }
2119
- }
2120
-
2121
- .tds-input textarea{
2122
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2123
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2124
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2125
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2126
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2127
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2128
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2129
- --tds-input-scrollbar-thumb-border-radius:999px;
2130
- --tds-input-scrollbar-thumb-border-width:3px;
2131
- --tds-input-scrollbar-track-margin-block:.125rem;
2132
- scrollbar-color:initial;
2133
- transition-timing-function:var(--t-ease-in-out);
2134
- transition-duration:var(--t-duration-200);
2135
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2136
- }
2137
-
2138
- @media (pointer: fine){
2139
- :is(.tds-input textarea)::-webkit-scrollbar{
2140
- width:12px;
2141
- height:12px;
2142
- cursor:default;
2143
- }
2144
-
2145
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2146
- cursor:default;
2147
- background:var(--tds-input-scrollbar-thumb-color);
2148
- background-clip:content-box;
2149
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2150
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2151
- }
2152
-
2153
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2154
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2155
- }
2156
-
2157
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2158
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2159
- }
2160
-
2161
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2162
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2163
- }
2164
-
2165
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2166
- background:var(--tds-input-scrollbar-surface-color);
2167
- }
2168
-
2169
- :is(.tds-input textarea)::-webkit-resizer{
2170
- background:var(--tds-input-resizer-icon) no-repeat;
2171
- background-position:right bottom;
2172
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2173
- }
2174
-
2175
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2176
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2177
- cursor:default;
2178
- }
2179
-
2180
- @supports (-moz-appearance: none){
2181
- :is(.tds-input textarea){
2182
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2183
- scrollbar-width:thin;
2184
- }
2185
-
2186
- @media (hover){
2187
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2188
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2189
- }
2190
- }
2191
- }
2192
- }
2193
-
2194
- .tds-radio-group{
2195
- --tds-radio-group-font-size:var(--t-font-size-md);
2196
- --tds-radio-group-line-height:1.4;
2197
- --tds-radio-group-gap:var(--t-spacing-1);
2198
-
2199
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2200
- --tds-radio-group-description-line-height:1.35;
2201
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2202
- --tds-radio-group-description-invalid-icon-display:none;
2203
- display:flex;
2204
- flex-direction:column;
2205
- gap:0;
2206
- padding:0;
2207
- margin:0;
2208
-
2209
- font-size:var(--tds-radio-group-font-size);
2210
- line-height:var(--tds-radio-group-line-height);
2211
- border:0;
2212
- }
2213
-
2214
- .tds-radio-group legend{
2215
- float:left;
2216
- padding:0;
2217
- margin:0;
2218
- }
2219
-
2220
- .tds-radio-group[aria-invalid="true"]{
2221
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2222
- --tds-radio-group-description-invalid-icon-display:inline-block;
2223
- }
2224
-
2225
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2226
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2227
- }
2228
-
2229
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2230
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2231
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2232
- }
2233
-
2234
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2235
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2236
- }
2237
-
2238
- .tds-radio-group:has(input:required) legend::after{
2239
- margin-left:.25ch;
2240
- color:var(--t-text-color-status-error);
2241
- content:"*";
2242
- }
2243
-
2244
- .tds-radio-group-fields{
2245
- display:flex;
2246
- flex-direction:column;
2247
- gap:var(--tds-radio-group-gap);
2248
- align-items:flex-start;
2249
- margin-top:var(--t-spacing-1);
2250
- }
2251
-
2252
- .tds-radio-group-description{
2253
- display:flex;
2254
- gap:var(--t-spacing-half);
2255
- align-items:flex-start;
2256
- margin:var(--t-spacing-fourth) 0 0;
2257
- font-size:var(--tds-radio-group-description-font-size);
2258
- line-height:var(--tds-radio-group-description-line-height);
2259
- color:var(--tds-radio-group-description-color);
2260
- cursor:text;
2261
- }
2262
-
2263
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2264
- display:var(--tds-radio-group-description-invalid-icon-display);
2265
- flex-shrink:0;
2266
- margin-top:calc(.5lh - .5em);
2267
- line-height:var(--tds-radio-group-description-line-height);
2268
- }
2269
-
2270
- .tds-radio-group--sm{
2271
- --tds-radio-group-line-height:1.35;
2272
- --tds-radio-group-font-size:var(--t-font-size-sm);
2273
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2274
- --tds-radio-group-description-line-height:1.3;
2275
- }
2276
-
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
2279
2279
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3997,7 +3997,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3997
3997
  .tds-data-table{
3998
3998
  --tds-data-table-background-color:var(--t-surface-color-canvas);
3999
3999
  --tds-data-table-border-color:var(--t-border-color);
4000
- --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
4000
+ --tds-data-table-column-background-color:var(--t-fill-color-neutral-080);
4001
4001
  --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4002
4002
  --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4003
4003
  }
@@ -4192,6 +4192,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4192
4192
  .tds-data-table-row--interactive{
4193
4193
  --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4194
4194
  cursor:default;
4195
+ transition:background-color var(--t-duration-100) var(--t-ease-in-out);
4195
4196
  }
4196
4197
  .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4197
4198
  background-color:var(--tds-data-table-row-background-hover);
@@ -4312,7 +4313,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4312
4313
  border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4313
4314
  border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4314
4315
  transition-timing-function:var(--t-ease-in-out);
4315
- transition-duration:var(--t-duration-200);
4316
+ transition-duration:var(--t-duration-100);
4316
4317
  transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4317
4318
  }
4318
4319
  .tds-data-table-selectable-checkbox::after{