@planningcenter/tapestry 4.8.0 → 4.8.1-qa-1336.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1039,80 +1039,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
- .tds-checkbox-group{
1043
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1044
- --tds-checkbox-group-line-height:1.4;
1045
- --tds-checkbox-group-gap:var(--t-spacing-1);
1046
-
1047
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1048
- --tds-checkbox-group-description-line-height:1.35;
1049
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1050
- --tds-checkbox-group-description-invalid-icon-display:none;
1051
- display:flex;
1052
- flex-direction:column;
1053
- gap:0;
1054
- padding:0;
1055
- margin:0;
1056
-
1057
- font-size:var(--tds-checkbox-group-font-size);
1058
- line-height:var(--tds-checkbox-group-line-height);
1059
- border:0;
1060
- }
1061
-
1062
- .tds-checkbox-group legend{
1063
- float:left;
1064
- padding:0;
1065
- margin:0;
1066
- }
1067
-
1068
- .tds-checkbox-group[aria-invalid="true"]{
1069
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1070
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1071
- }
1072
-
1073
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1074
- margin-left:.25ch;
1075
- color:var(--t-text-color-status-error);
1076
- content:"*";
1077
- }
1078
-
1079
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1080
- content:none;
1081
- }
1082
-
1083
- .tds-checkbox-group-fields{
1084
- display:flex;
1085
- flex-direction:column;
1086
- gap:var(--tds-checkbox-group-gap);
1087
- align-items:flex-start;
1088
- margin-top:var(--t-spacing-1);
1089
- }
1090
-
1091
- .tds-checkbox-group-description{
1092
- display:flex;
1093
- gap:var(--t-spacing-half);
1094
- align-items:flex-start;
1095
- margin:var(--t-spacing-fourth) 0 0;
1096
- font-size:var(--tds-checkbox-group-description-font-size);
1097
- line-height:var(--tds-checkbox-group-description-line-height);
1098
- color:var(--tds-checkbox-group-description-color);
1099
- cursor:text;
1100
- }
1101
-
1102
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1103
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1104
- flex-shrink:0;
1105
- margin-top:calc(.5lh - .5em);
1106
- line-height:var(--tds-checkbox-group-description-line-height);
1107
- }
1108
-
1109
- .tds-checkbox-group--sm{
1110
- --tds-checkbox-group-line-height:1.35;
1111
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1112
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1113
- --tds-checkbox-group-description-line-height:1.3;
1114
- }
1115
-
1116
1042
  @layer t-critical{
1117
1043
  tds-page-header:not(.hydrated){
1118
1044
  display:none;
@@ -1390,48 +1316,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1390
1316
  }
1391
1317
  }
1392
1318
 
1393
- .tds-button-group{
1394
- display:inline-flex;
1395
- }
1396
- .tds-button-group > .tds-btn{
1397
- --tds-button-group-item-z-index:1;
1398
-
1399
- position:relative;
1400
- z-index:var(--tds-button-group-item-z-index);
1401
- border-radius:0;
1402
- }
1403
- :is(.tds-button-group > .tds-btn):not(:first-child){
1404
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1405
- }
1406
- :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{
1407
- position:absolute;
1408
- inset-block:calc(var(--tds-btn-border-width) * -1);
1409
- width:var(--tds-btn-border-width);
1410
- pointer-events:none;
1411
- content:"";
1412
- background-color:var(--t-border-color-white);
1413
- }
1414
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1415
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1416
- }
1417
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1418
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1419
- }
1420
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1421
- --tds-button-group-item-z-index:2;
1422
- }
1423
- :is(.tds-button-group > .tds-btn):focus-visible{
1424
- --tds-button-group-item-z-index:5;
1425
- }
1426
- .tds-button-group > .tds-btn:first-child{
1427
- border-start-start-radius:var(--tds-btn-border-radius);
1428
- border-end-start-radius:var(--tds-btn-border-radius);
1429
- }
1430
- .tds-button-group > .tds-btn:last-child{
1431
- border-start-end-radius:var(--tds-btn-border-radius);
1432
- border-end-end-radius:var(--tds-btn-border-radius);
1433
- }
1434
-
1435
1319
  .tds-checkbox{
1436
1320
  --tds-checkbox-font-size:var(--t-font-size-md);
1437
1321
  --tds-checkbox-cursor:pointer;
@@ -1627,72 +1511,47 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1627
1511
  --tds-checkbox-description-line-height:1.3;
1628
1512
  }
1629
1513
 
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1516
+ }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1630
1519
 
1631
- :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{
1632
- -webkit-appearance:none;
1633
- appearance:none;
1634
- }
1635
-
1636
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
- inline-size:1em;
1638
- block-size:2em;
1639
- }
1640
-
1641
- [type="file"]:is(.tds-input input){
1642
- padding-block:var(--t-spacing-half);
1643
- padding-inline-start:var(--t-spacing-half);
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);
1644
1526
  }
1645
-
1646
- [type="file"]:is(.tds-input input):not(:disabled){
1647
- color:var(--t-text-color-secondary);
1648
- }
1649
-
1650
- [type="file"]:is(.tds-input input)::file-selector-button{
1651
- --_file-btn-padding-block:3px;
1652
-
1653
- padding-block:var(--_file-btn-padding-block);
1654
- padding-inline:12px;
1655
- margin-inline-end:12px;
1656
- font:inherit;
1657
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1658
- color:var(--t-text-color-status-neutral);
1659
- cursor:pointer;
1660
- background-color:var(--t-fill-color-button-neutral-solid);
1661
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1662
- border-radius:var(--t-border-radius-md);
1663
- transition-timing-function:var(--t-ease-in-out);
1664
- transition-duration:var(--t-duration-200);
1665
- transition-property:color, background-color, border-color;
1666
- }
1667
-
1668
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1669
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1670
- border-color:var(--t-fill-color-button-neutral-solid-hover);
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);
1671
1534
  }
1672
-
1673
- [type="file"]:is(.tds-input input):active::file-selector-button{
1674
- background-color:var(--t-fill-color-button-neutral-solid-active);
1675
- border-color:var(--t-fill-color-button-neutral-solid-active);
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);
1676
1537
  }
1677
-
1678
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1679
- color:var(--t-text-color-disabled);
1680
- pointer-events:none;
1681
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1682
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
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);
1683
1540
  }
1684
- @supports (field-sizing: content){
1685
- .tds-input--auto-width{
1686
- inline-size:-moz-fit-content;
1687
- inline-size:fit-content;
1688
- min-inline-size:min(100%, 122px);
1541
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
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);
1689
1550
  }
1690
-
1691
- .tds-input--auto-width input{
1692
- field-sizing:content;
1693
- inline-size:auto;
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);
1694
1554
  }
1695
- }
1696
1555
 
1697
1556
  .tds-modal-overlay{
1698
1557
  --tds-modal-min-margin-block:var(--t-spacing-3);
@@ -1857,129 +1716,78 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1716
  }
1858
1717
  }
1859
1718
 
1860
- .tds-radio-group{
1861
- --tds-radio-group-font-size:var(--t-font-size-md);
1862
- --tds-radio-group-line-height:1.4;
1863
- --tds-radio-group-gap:var(--t-spacing-1);
1719
+ .tds-checkbox-group{
1720
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1721
+ --tds-checkbox-group-line-height:1.4;
1722
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1864
1723
 
1865
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1866
- --tds-radio-group-description-line-height:1.35;
1867
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1868
- --tds-radio-group-description-invalid-icon-display:none;
1724
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1725
+ --tds-checkbox-group-description-line-height:1.35;
1726
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1727
+ --tds-checkbox-group-description-invalid-icon-display:none;
1869
1728
  display:flex;
1870
1729
  flex-direction:column;
1871
1730
  gap:0;
1872
1731
  padding:0;
1873
1732
  margin:0;
1874
1733
 
1875
- font-size:var(--tds-radio-group-font-size);
1876
- line-height:var(--tds-radio-group-line-height);
1734
+ font-size:var(--tds-checkbox-group-font-size);
1735
+ line-height:var(--tds-checkbox-group-line-height);
1877
1736
  border:0;
1878
1737
  }
1879
1738
 
1880
- .tds-radio-group legend{
1739
+ .tds-checkbox-group legend{
1881
1740
  float:left;
1882
1741
  padding:0;
1883
1742
  margin:0;
1884
1743
  }
1885
1744
 
1886
- .tds-radio-group[aria-invalid="true"]{
1887
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1888
- --tds-radio-group-description-invalid-icon-display:inline-block;
1745
+ .tds-checkbox-group[aria-invalid="true"]{
1746
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1747
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1889
1748
  }
1890
1749
 
1891
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1892
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1893
- }
1894
-
1895
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1896
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1897
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1898
- }
1899
-
1900
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1901
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1902
- }
1903
-
1904
- .tds-radio-group:has(input:required) legend::after{
1750
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1905
1751
  margin-left:.25ch;
1906
1752
  color:var(--t-text-color-status-error);
1907
1753
  content:"*";
1908
1754
  }
1909
1755
 
1910
- .tds-radio-group-fields{
1911
- display:flex;
1912
- flex-direction:column;
1913
- gap:var(--tds-radio-group-gap);
1756
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1757
+ content:none;
1758
+ }
1759
+
1760
+ .tds-checkbox-group-fields{
1761
+ display:flex;
1762
+ flex-direction:column;
1763
+ gap:var(--tds-checkbox-group-gap);
1914
1764
  align-items:flex-start;
1915
1765
  margin-top:var(--t-spacing-1);
1916
1766
  }
1917
1767
 
1918
- .tds-radio-group-description{
1768
+ .tds-checkbox-group-description{
1919
1769
  display:flex;
1920
1770
  gap:var(--t-spacing-half);
1921
1771
  align-items:flex-start;
1922
1772
  margin:var(--t-spacing-fourth) 0 0;
1923
- font-size:var(--tds-radio-group-description-font-size);
1924
- line-height:var(--tds-radio-group-description-line-height);
1925
- color:var(--tds-radio-group-description-color);
1773
+ font-size:var(--tds-checkbox-group-description-font-size);
1774
+ line-height:var(--tds-checkbox-group-description-line-height);
1775
+ color:var(--tds-checkbox-group-description-color);
1926
1776
  cursor:text;
1927
1777
  }
1928
1778
 
1929
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1930
- display:var(--tds-radio-group-description-invalid-icon-display);
1779
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1780
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1931
1781
  flex-shrink:0;
1932
1782
  margin-top:calc(.5lh - .5em);
1933
- line-height:var(--tds-radio-group-description-line-height);
1934
- }
1935
-
1936
- .tds-radio-group--sm{
1937
- --tds-radio-group-line-height:1.35;
1938
- --tds-radio-group-font-size:var(--t-font-size-sm);
1939
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1940
- --tds-radio-group-description-line-height:1.3;
1941
- }
1942
-
1943
- .tds-popover{
1944
- max-inline-size:24rem;
1945
- overflow:auto;
1946
- overscroll-behavior:none;
1947
- outline:0;
1948
- scrollbar-color:#0004 var(--t-surface-color-card);
1949
- scrollbar-width:thin;
1950
- background:var(--t-surface-color-card);
1951
- background-clip:padding-box;
1952
- border:1px solid var(--t-border-color);
1953
- border-radius:var(--t-border-radius);
1954
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1955
- }
1956
-
1957
- @media (prefers-reduced-motion: no-preference){
1958
- .tds-popover[data-entering]{
1959
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1960
- }
1961
-
1962
- .tds-popover[data-exiting]{
1963
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1964
- }
1965
-
1966
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1967
- will-change:opacity, transform;
1968
- }
1969
-
1970
- @keyframes tds-popover{
1971
- from{
1972
- opacity:0;
1973
- transform:translateY(-8px);
1974
- }
1783
+ line-height:var(--tds-checkbox-group-description-line-height);
1975
1784
  }
1976
- }
1977
1785
 
1978
- .tds-popover-content{
1979
- display:flex;
1980
- flex-direction:column;
1981
- padding:var(--t-spacing-1);
1982
- outline:0;
1786
+ .tds-checkbox-group--sm{
1787
+ --tds-checkbox-group-line-height:1.35;
1788
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1789
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1790
+ --tds-checkbox-group-description-line-height:1.3;
1983
1791
  }
1984
1792
 
1985
1793
  .tds-radio{
@@ -2220,6 +2028,156 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2220
2028
  }
2221
2029
  }
2222
2030
 
2031
+ .tds-radio-group{
2032
+ --tds-radio-group-font-size:var(--t-font-size-md);
2033
+ --tds-radio-group-line-height:1.4;
2034
+ --tds-radio-group-gap:var(--t-spacing-1);
2035
+
2036
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2037
+ --tds-radio-group-description-line-height:1.35;
2038
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2039
+ --tds-radio-group-description-invalid-icon-display:none;
2040
+ display:flex;
2041
+ flex-direction:column;
2042
+ gap:0;
2043
+ padding:0;
2044
+ margin:0;
2045
+
2046
+ font-size:var(--tds-radio-group-font-size);
2047
+ line-height:var(--tds-radio-group-line-height);
2048
+ border:0;
2049
+ }
2050
+
2051
+ .tds-radio-group legend{
2052
+ float:left;
2053
+ padding:0;
2054
+ margin:0;
2055
+ }
2056
+
2057
+ .tds-radio-group[aria-invalid="true"]{
2058
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2059
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2060
+ }
2061
+
2062
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2063
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2064
+ }
2065
+
2066
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2067
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2068
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2069
+ }
2070
+
2071
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2072
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2073
+ }
2074
+
2075
+ .tds-radio-group:has(input:required) legend::after{
2076
+ margin-left:.25ch;
2077
+ color:var(--t-text-color-status-error);
2078
+ content:"*";
2079
+ }
2080
+
2081
+ .tds-radio-group-fields{
2082
+ display:flex;
2083
+ flex-direction:column;
2084
+ gap:var(--tds-radio-group-gap);
2085
+ align-items:flex-start;
2086
+ margin-top:var(--t-spacing-1);
2087
+ }
2088
+
2089
+ .tds-radio-group-description{
2090
+ display:flex;
2091
+ gap:var(--t-spacing-half);
2092
+ align-items:flex-start;
2093
+ margin:var(--t-spacing-fourth) 0 0;
2094
+ font-size:var(--tds-radio-group-description-font-size);
2095
+ line-height:var(--tds-radio-group-description-line-height);
2096
+ color:var(--tds-radio-group-description-color);
2097
+ cursor:text;
2098
+ }
2099
+
2100
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2101
+ display:var(--tds-radio-group-description-invalid-icon-display);
2102
+ flex-shrink:0;
2103
+ margin-top:calc(.5lh - .5em);
2104
+ line-height:var(--tds-radio-group-description-line-height);
2105
+ }
2106
+
2107
+ .tds-radio-group--sm{
2108
+ --tds-radio-group-line-height:1.35;
2109
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2110
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2111
+ --tds-radio-group-description-line-height:1.3;
2112
+ }
2113
+
2114
+
2115
+ :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{
2116
+ -webkit-appearance:none;
2117
+ appearance:none;
2118
+ }
2119
+
2120
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2121
+ inline-size:1em;
2122
+ block-size:2em;
2123
+ }
2124
+
2125
+ [type="file"]:is(.tds-input input){
2126
+ padding-block:var(--t-spacing-half);
2127
+ padding-inline-start:var(--t-spacing-half);
2128
+ }
2129
+
2130
+ [type="file"]:is(.tds-input input):not(:disabled){
2131
+ color:var(--t-text-color-secondary);
2132
+ }
2133
+
2134
+ [type="file"]:is(.tds-input input)::file-selector-button{
2135
+ --_file-btn-padding-block:3px;
2136
+
2137
+ padding-block:var(--_file-btn-padding-block);
2138
+ padding-inline:12px;
2139
+ margin-inline-end:12px;
2140
+ font:inherit;
2141
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
2142
+ color:var(--t-text-color-status-neutral);
2143
+ cursor:pointer;
2144
+ background-color:var(--t-fill-color-button-neutral-solid);
2145
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
2146
+ border-radius:var(--t-border-radius-md);
2147
+ transition-timing-function:var(--t-ease-in-out);
2148
+ transition-duration:var(--t-duration-200);
2149
+ transition-property:color, background-color, border-color;
2150
+ }
2151
+
2152
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
2153
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
2154
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
2155
+ }
2156
+
2157
+ [type="file"]:is(.tds-input input):active::file-selector-button{
2158
+ background-color:var(--t-fill-color-button-neutral-solid-active);
2159
+ border-color:var(--t-fill-color-button-neutral-solid-active);
2160
+ }
2161
+
2162
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
2163
+ color:var(--t-text-color-disabled);
2164
+ pointer-events:none;
2165
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
2166
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
2167
+ }
2168
+ @supports (field-sizing: content){
2169
+ .tds-input--auto-width{
2170
+ inline-size:-moz-fit-content;
2171
+ inline-size:fit-content;
2172
+ min-inline-size:min(100%, 122px);
2173
+ }
2174
+
2175
+ .tds-input--auto-width input{
2176
+ field-sizing:content;
2177
+ inline-size:auto;
2178
+ }
2179
+ }
2180
+
2223
2181
  .tds-toggle-switch{
2224
2182
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2225
2183
  --tds-toggle-switch-cursor:pointer;
@@ -2327,37 +2285,79 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2327
2285
  transition:var(--tds-toggle-switch-thumb-transition);
2328
2286
  }
2329
2287
 
2330
- @media (prefers-reduced-motion: reduce){
2288
+ @media (prefers-reduced-motion: reduce){
2289
+
2290
+ .tds-toggle-switch-track{
2291
+ --tds-toggle-switch-track-transition:none;
2292
+ --tds-toggle-switch-thumb-transition:none;
2293
+ }
2294
+ }
2295
+
2296
+ .tds-toggle-switch-description{
2297
+ display:flex;
2298
+ grid-area:2 / 2;
2299
+ align-items:flex-start;
2300
+ padding-inline-start:var(--t-spacing-1);
2301
+ margin:0;
2302
+ font-size:var(--tds-toggle-switch-description-font-size);
2303
+ line-height:var(--tds-toggle-switch-description-line-height);
2304
+ color:var(--tds-toggle-switch-description-color);
2305
+ cursor:text;
2306
+ }
2307
+
2308
+ .tds-toggle-switch--sm{
2309
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2310
+ --tds-toggle-switch-line-height:1.35;
2311
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2312
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2313
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2314
+ --tds-toggle-switch-description-line-height:1.3;
2315
+ }
2316
+
2317
+ .tds-toggle-switch--hide-label{
2318
+ --tds-toggle-switch-display:inline-flex;
2319
+ }
2320
+
2321
+ .tds-popover{
2322
+ max-inline-size:24rem;
2323
+ overflow:auto;
2324
+ overscroll-behavior:none;
2325
+ outline:0;
2326
+ scrollbar-color:#0004 var(--t-surface-color-card);
2327
+ scrollbar-width:thin;
2328
+ background:var(--t-surface-color-card);
2329
+ background-clip:padding-box;
2330
+ border:1px solid var(--t-border-color);
2331
+ border-radius:var(--t-border-radius);
2332
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2333
+ }
2334
+
2335
+ @media (prefers-reduced-motion: no-preference){
2336
+ .tds-popover[data-entering]{
2337
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2338
+ }
2339
+
2340
+ .tds-popover[data-exiting]{
2341
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2342
+ }
2343
+
2344
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2345
+ will-change:opacity, transform;
2346
+ }
2331
2347
 
2332
- .tds-toggle-switch-track{
2333
- --tds-toggle-switch-track-transition:none;
2334
- --tds-toggle-switch-thumb-transition:none;
2335
- }
2348
+ @keyframes tds-popover{
2349
+ from{
2350
+ opacity:0;
2351
+ transform:translateY(-8px);
2352
+ }
2336
2353
  }
2337
-
2338
- .tds-toggle-switch-description{
2339
- display:flex;
2340
- grid-area:2 / 2;
2341
- align-items:flex-start;
2342
- padding-inline-start:var(--t-spacing-1);
2343
- margin:0;
2344
- font-size:var(--tds-toggle-switch-description-font-size);
2345
- line-height:var(--tds-toggle-switch-description-line-height);
2346
- color:var(--tds-toggle-switch-description-color);
2347
- cursor:text;
2348
- }
2349
-
2350
- .tds-toggle-switch--sm{
2351
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2352
- --tds-toggle-switch-line-height:1.35;
2353
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2354
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2355
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2356
- --tds-toggle-switch-description-line-height:1.3;
2357
2354
  }
2358
2355
 
2359
- .tds-toggle-switch--hide-label{
2360
- --tds-toggle-switch-display:inline-flex;
2356
+ .tds-popover-content{
2357
+ display:flex;
2358
+ flex-direction:column;
2359
+ padding:var(--t-spacing-1);
2360
+ outline:0;
2361
2361
  }
2362
2362
 
2363
2363
  .tds-input{
@@ -4260,6 +4260,109 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4260
4260
  border-radius:var(--t-border-radius-round);
4261
4261
  }
4262
4262
 
4263
+ .tds-currency-input-control{
4264
+ display:flex;
4265
+ gap:var(--t-spacing-half);
4266
+ align-items:center;
4267
+ inline-size:100%;
4268
+ min-block-size:var(--tds-field-min-height);
4269
+ padding-inline:var(--tds-field-padding-inline);
4270
+ font-size:var(--tds-field-font-size);
4271
+ color:var(--tds-field-color);
4272
+ cursor:text;
4273
+ outline:var(--t-focus-ring-width) solid transparent;
4274
+ background-color:var(--tds-field-background-color);
4275
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
4276
+ border-radius:var(--t-form-border-radius);
4277
+ transition-timing-function:var(--t-ease-in-out);
4278
+ transition-duration:var(--t-duration-200);
4279
+ transition-property:background-color, border-color, outline-color, outline-offset;
4280
+ }
4281
+
4282
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4283
+ border-color:var(--tds-field-border-color-hover);
4284
+ }
4285
+
4286
+ .tds-currency-input-control:has(input:focus){
4287
+ outline-color:var(--t-focus-ring-color);
4288
+ outline-offset:var(--t-focus-ring-offset);
4289
+ border-color:var(--tds-field-border-color-active);
4290
+ }
4291
+
4292
+ .tds-currency-input-control input{
4293
+ flex:1;
4294
+ min-inline-size:0;
4295
+ padding:0;
4296
+ font-family:inherit;
4297
+ font-size:inherit;
4298
+ color:inherit;
4299
+ -webkit-appearance:none;
4300
+ -moz-appearance:none;
4301
+ appearance:none;
4302
+ outline:0;
4303
+ background-color:transparent;
4304
+ border:0;
4305
+ }
4306
+
4307
+ :is(.tds-currency-input-control input)::-moz-placeholder{
4308
+ color:var(--tds-field-placeholder-color);
4309
+ -moz-user-select:none;
4310
+ user-select:none;
4311
+ }
4312
+
4313
+ :is(.tds-currency-input-control input)::placeholder{
4314
+ color:var(--tds-field-placeholder-color);
4315
+ -webkit-user-select:none;
4316
+ -moz-user-select:none;
4317
+ user-select:none;
4318
+ }
4319
+
4320
+ .tds-currency-input-control .tds-currency-input-prefix{
4321
+ flex-shrink:0;
4322
+ color:var(--t-text-color-secondary);
4323
+ pointer-events:none;
4324
+ -webkit-user-select:none;
4325
+ -moz-user-select:none;
4326
+ user-select:none;
4327
+ }
4328
+
4329
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4330
+ --tds-field-background-color:var(--t-form-background-color-error);
4331
+ --tds-field-border-color:var(--t-form-border-color-error);
4332
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4333
+ }
4334
+
4335
+ .tds-currency-input-control:has(:disabled){
4336
+ --tds-field-border-color:var(--t-form-border-color-disabled);
4337
+ --tds-field-background-color:var(--t-form-background-color-disabled);
4338
+ --tds-field-color:var(--t-form-color-disabled);
4339
+
4340
+ cursor:not-allowed;
4341
+ }
4342
+
4343
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
4344
+ color:var(--tds-field-color);
4345
+ }
4346
+
4347
+ .tds-currency-input-control:has([readonly]){
4348
+ --tds-field-border-color:var(--t-form-border-color-readonly);
4349
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4350
+ --tds-field-background-color:var(--t-form-background-color-readonly);
4351
+ --tds-field-color:var(--t-form-color-readonly);
4352
+ }
4353
+
4354
+ .tds-currency-input-control:has([readonly]):has(input:focus){
4355
+ border-color:var(--t-form-border-color-hover);
4356
+ }
4357
+ .tds-currency-input-currency-name--hidden{
4358
+ position:absolute;
4359
+ width:1px;
4360
+ height:1px;
4361
+ overflow:hidden;
4362
+ white-space:nowrap;
4363
+ clip-path:inset(50%);
4364
+ }
4365
+
4263
4366
  .tds-data-table{
4264
4367
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4265
4368
  --tds-data-table-border-color:var(--t-border-color);
@@ -4857,109 +4960,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4857
4960
  }
4858
4961
  }
4859
4962
 
4860
- .tds-currency-input-control{
4861
- display:flex;
4862
- gap:var(--t-spacing-half);
4863
- align-items:center;
4864
- inline-size:100%;
4865
- min-block-size:var(--tds-field-min-height);
4866
- padding-inline:var(--tds-field-padding-inline);
4867
- font-size:var(--tds-field-font-size);
4868
- color:var(--tds-field-color);
4869
- cursor:text;
4870
- outline:var(--t-focus-ring-width) solid transparent;
4871
- background-color:var(--tds-field-background-color);
4872
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
4873
- border-radius:var(--t-form-border-radius);
4874
- transition-timing-function:var(--t-ease-in-out);
4875
- transition-duration:var(--t-duration-200);
4876
- transition-property:background-color, border-color, outline-color, outline-offset;
4877
- }
4878
-
4879
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4880
- border-color:var(--tds-field-border-color-hover);
4881
- }
4882
-
4883
- .tds-currency-input-control:has(input:focus){
4884
- outline-color:var(--t-focus-ring-color);
4885
- outline-offset:var(--t-focus-ring-offset);
4886
- border-color:var(--tds-field-border-color-active);
4887
- }
4888
-
4889
- .tds-currency-input-control input{
4890
- flex:1;
4891
- min-inline-size:0;
4892
- padding:0;
4893
- font-family:inherit;
4894
- font-size:inherit;
4895
- color:inherit;
4896
- -webkit-appearance:none;
4897
- -moz-appearance:none;
4898
- appearance:none;
4899
- outline:0;
4900
- background-color:transparent;
4901
- border:0;
4902
- }
4903
-
4904
- :is(.tds-currency-input-control input)::-moz-placeholder{
4905
- color:var(--tds-field-placeholder-color);
4906
- -moz-user-select:none;
4907
- user-select:none;
4908
- }
4909
-
4910
- :is(.tds-currency-input-control input)::placeholder{
4911
- color:var(--tds-field-placeholder-color);
4912
- -webkit-user-select:none;
4913
- -moz-user-select:none;
4914
- user-select:none;
4915
- }
4916
-
4917
- .tds-currency-input-control .tds-currency-input-prefix{
4918
- flex-shrink:0;
4919
- color:var(--t-text-color-secondary);
4920
- pointer-events:none;
4921
- -webkit-user-select:none;
4922
- -moz-user-select:none;
4923
- user-select:none;
4924
- }
4925
-
4926
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4927
- --tds-field-background-color:var(--t-form-background-color-error);
4928
- --tds-field-border-color:var(--t-form-border-color-error);
4929
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4930
- }
4931
-
4932
- .tds-currency-input-control:has(:disabled){
4933
- --tds-field-border-color:var(--t-form-border-color-disabled);
4934
- --tds-field-background-color:var(--t-form-background-color-disabled);
4935
- --tds-field-color:var(--t-form-color-disabled);
4936
-
4937
- cursor:not-allowed;
4938
- }
4939
-
4940
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
4941
- color:var(--tds-field-color);
4942
- }
4943
-
4944
- .tds-currency-input-control:has([readonly]){
4945
- --tds-field-border-color:var(--t-form-border-color-readonly);
4946
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4947
- --tds-field-background-color:var(--t-form-background-color-readonly);
4948
- --tds-field-color:var(--t-form-color-readonly);
4949
- }
4950
-
4951
- .tds-currency-input-control:has([readonly]):has(input:focus){
4952
- border-color:var(--t-form-border-color-hover);
4953
- }
4954
- .tds-currency-input-currency-name--hidden{
4955
- position:absolute;
4956
- width:1px;
4957
- height:1px;
4958
- overflow:hidden;
4959
- white-space:nowrap;
4960
- clip-path:inset(50%);
4961
- }
4962
-
4963
4963
  .tds-segmented-control{
4964
4964
  --tds-segmented-control-font-size:var(--t-font-size-md);
4965
4965
  --tds-segmented-control-padding:var(--t-spacing-half);
@@ -5101,6 +5101,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5101
5101
  clip-path:inset(50%);
5102
5102
  }
5103
5103
 
5104
+ .truncation-tooltip-q6xkT{
5105
+ max-inline-size:15rem;
5106
+ padding:var(--t-spacing-half) var(--t-spacing-1);
5107
+ font-size:var(--t-font-size-sm);
5108
+ color:var(--t-text-color-inverted);
5109
+ pointer-events:none;
5110
+ background:var(--t-fill-color-tooltip);
5111
+ border-radius:var(--t-border-radius-md);
5112
+ box-shadow:0 2px 4px 0 rgba(0, 0, 0, .15);
5113
+ }
5114
+
5104
5115
  .tds-pagination{
5105
5116
  --tds-pagination-background-color:var(--t-surface-color-canvas);
5106
5117
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);