@planningcenter/tapestry 3.8.0 → 3.8.1-qa-1046.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.
@@ -1406,33 +1406,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1406
1406
  }
1407
1407
  }
1408
1408
 
1409
- .tds-button-group{
1410
- display:inline-flex;
1411
- }
1412
- .tds-button-group > .tds-btn{
1413
- --tds-button-group-item-z-index:1;
1414
-
1415
- z-index:var(--tds-button-group-item-z-index);
1416
- border-radius:0;
1417
- }
1418
- :is(.tds-button-group > .tds-btn):not(:first-child){
1419
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1420
- }
1421
- :is(.tds-button-group > .tds-btn):hover{
1422
- --tds-button-group-item-z-index:2;
1423
- }
1424
- :is(.tds-button-group > .tds-btn):focus-visible{
1425
- --tds-button-group-item-z-index:5;
1426
- }
1427
- .tds-button-group > .tds-btn:first-child{
1428
- border-start-start-radius:var(--tds-btn-border-radius);
1429
- border-end-start-radius:var(--tds-btn-border-radius);
1430
- }
1431
- .tds-button-group > .tds-btn:last-child{
1432
- border-start-end-radius:var(--tds-btn-border-radius);
1433
- border-end-end-radius:var(--tds-btn-border-radius);
1434
- }
1435
-
1436
1409
  .tds-checkbox{
1437
1410
  --tds-checkbox-font-size:var(--t-font-size-md);
1438
1411
  --tds-checkbox-cursor:pointer;
@@ -1628,6 +1601,107 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1628
1601
  --tds-checkbox-description-line-height:1.3;
1629
1602
  }
1630
1603
 
1604
+ .tds-checkbox-group{
1605
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1606
+ --tds-checkbox-group-line-height:1.4;
1607
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1608
+
1609
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1610
+ --tds-checkbox-group-description-line-height:1.35;
1611
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1612
+ --tds-checkbox-group-description-invalid-icon-display:none;
1613
+ display:flex;
1614
+ flex-direction:column;
1615
+ gap:0;
1616
+ padding:0;
1617
+ margin:0;
1618
+
1619
+ font-size:var(--tds-checkbox-group-font-size);
1620
+ line-height:var(--tds-checkbox-group-line-height);
1621
+ border:0;
1622
+ }
1623
+
1624
+ .tds-checkbox-group legend{
1625
+ float:left;
1626
+ padding:0;
1627
+ margin:0;
1628
+ }
1629
+
1630
+ .tds-checkbox-group[aria-invalid="true"]{
1631
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1632
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1633
+ }
1634
+
1635
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1636
+ margin-left:.25ch;
1637
+ color:var(--t-text-color-status-error);
1638
+ content:"*";
1639
+ }
1640
+
1641
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1642
+ content:none;
1643
+ }
1644
+
1645
+ .tds-checkbox-group-fields{
1646
+ display:flex;
1647
+ flex-direction:column;
1648
+ gap:var(--tds-checkbox-group-gap);
1649
+ align-items:flex-start;
1650
+ margin-top:var(--t-spacing-1);
1651
+ }
1652
+
1653
+ .tds-checkbox-group-description{
1654
+ display:flex;
1655
+ gap:var(--t-spacing-half);
1656
+ align-items:flex-start;
1657
+ margin:var(--t-spacing-fourth) 0 0;
1658
+ font-size:var(--tds-checkbox-group-description-font-size);
1659
+ line-height:var(--tds-checkbox-group-description-line-height);
1660
+ color:var(--tds-checkbox-group-description-color);
1661
+ cursor:text;
1662
+ }
1663
+
1664
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1665
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1666
+ flex-shrink:0;
1667
+ margin-top:calc(.5lh - .5em);
1668
+ line-height:var(--tds-checkbox-group-description-line-height);
1669
+ }
1670
+
1671
+ .tds-checkbox-group--sm{
1672
+ --tds-checkbox-group-line-height:1.35;
1673
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1674
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1675
+ --tds-checkbox-group-description-line-height:1.3;
1676
+ }
1677
+
1678
+ .tds-button-group{
1679
+ display:inline-flex;
1680
+ }
1681
+ .tds-button-group > .tds-btn{
1682
+ --tds-button-group-item-z-index:1;
1683
+
1684
+ z-index:var(--tds-button-group-item-z-index);
1685
+ border-radius:0;
1686
+ }
1687
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1688
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1689
+ }
1690
+ :is(.tds-button-group > .tds-btn):hover{
1691
+ --tds-button-group-item-z-index:2;
1692
+ }
1693
+ :is(.tds-button-group > .tds-btn):focus-visible{
1694
+ --tds-button-group-item-z-index:5;
1695
+ }
1696
+ .tds-button-group > .tds-btn:first-child{
1697
+ border-start-start-radius:var(--tds-btn-border-radius);
1698
+ border-end-start-radius:var(--tds-btn-border-radius);
1699
+ }
1700
+ .tds-button-group > .tds-btn:last-child{
1701
+ border-start-end-radius:var(--tds-btn-border-radius);
1702
+ border-end-end-radius:var(--tds-btn-border-radius);
1703
+ }
1704
+
1631
1705
  .tds-combo-box{
1632
1706
  --tds-combo-box-button-offset:4px;
1633
1707
  }
@@ -1810,80 +1884,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1810
1884
  color:var(--t-text-color-secondary);
1811
1885
  }
1812
1886
 
1813
- .tds-checkbox-group{
1814
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1815
- --tds-checkbox-group-line-height:1.4;
1816
- --tds-checkbox-group-gap:var(--t-spacing-1);
1817
-
1818
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1819
- --tds-checkbox-group-description-line-height:1.35;
1820
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1821
- --tds-checkbox-group-description-invalid-icon-display:none;
1822
- display:flex;
1823
- flex-direction:column;
1824
- gap:0;
1825
- padding:0;
1826
- margin:0;
1827
-
1828
- font-size:var(--tds-checkbox-group-font-size);
1829
- line-height:var(--tds-checkbox-group-line-height);
1830
- border:0;
1831
- }
1832
-
1833
- .tds-checkbox-group legend{
1834
- float:left;
1835
- padding:0;
1836
- margin:0;
1837
- }
1838
-
1839
- .tds-checkbox-group[aria-invalid="true"]{
1840
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1841
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1842
- }
1843
-
1844
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1845
- margin-left:.25ch;
1846
- color:var(--t-text-color-status-error);
1847
- content:"*";
1848
- }
1849
-
1850
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1851
- content:none;
1852
- }
1853
-
1854
- .tds-checkbox-group-fields{
1855
- display:flex;
1856
- flex-direction:column;
1857
- gap:var(--tds-checkbox-group-gap);
1858
- align-items:flex-start;
1859
- margin-top:var(--t-spacing-1);
1860
- }
1861
-
1862
- .tds-checkbox-group-description{
1863
- display:flex;
1864
- gap:var(--t-spacing-half);
1865
- align-items:flex-start;
1866
- margin:var(--t-spacing-fourth) 0 0;
1867
- font-size:var(--tds-checkbox-group-description-font-size);
1868
- line-height:var(--tds-checkbox-group-description-line-height);
1869
- color:var(--tds-checkbox-group-description-color);
1870
- cursor:text;
1871
- }
1872
-
1873
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1874
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1875
- flex-shrink:0;
1876
- margin-top:calc(.5lh - .5em);
1877
- line-height:var(--tds-checkbox-group-description-line-height);
1878
- }
1879
-
1880
- .tds-checkbox-group--sm{
1881
- --tds-checkbox-group-line-height:1.35;
1882
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1883
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1884
- --tds-checkbox-group-description-line-height:1.3;
1885
- }
1886
-
1887
1887
  .tds-dropdown-popover{
1888
1888
  min-inline-size:10rem;
1889
1889
  max-inline-size:24rem;
@@ -2009,43 +2009,152 @@ a.tds-dropdown-item:is(:hover, :active){
2009
2009
  border-top:1px solid var(--t-border-color);
2010
2010
  }
2011
2011
 
2012
+ .tds-radio{
2013
+ --tds-radio-font-size:var(--t-font-size-md);
2014
+ --tds-radio-cursor:pointer;
2015
+ --tds-radio-line-height:1.4;
2016
+ --tds-radio-transition-property:border-width;
2012
2017
 
2013
- :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{
2014
- -webkit-appearance:none;
2015
- appearance:none;
2016
- }
2018
+ --tds-radio-input-size:var(--t-element-size-md);
2019
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2020
+ --tds-radio-input-border-color:var(--t-form-border-color);
2021
+ --tds-radio-input-border-width:var(--t-form-border-width);
2022
+ --tds-radio-input-background-color:var(--t-form-background-color);
2017
2023
 
2018
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2019
- inline-size:1em;
2020
- block-size:2em;
2021
- }
2024
+ --tds-radio-label-color:var(--t-form-color);
2022
2025
 
2023
- @supports (field-sizing: content){
2024
- .tds-input--auto-width{
2025
- inline-size:-moz-fit-content;
2026
- inline-size:fit-content;
2027
- min-inline-size:min(100%, 122px);
2028
- }
2026
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2027
+ --tds-radio-description-line-height:1.35;
2028
+ --tds-radio-description-color:var(--t-text-color-secondary);
2029
2029
 
2030
- .tds-input--auto-width input{
2031
- field-sizing:content;
2032
- inline-size:auto;
2033
- }
2030
+ position:relative;
2031
+ display:inline-grid;
2032
+ grid-template-columns:auto;
2033
+ grid-auto-columns:1fr;
2034
+ gap:var(--t-spacing-fourth) 0;
2035
+ line-height:var(--tds-radio-line-height);
2036
+ -webkit-user-select:none;
2037
+ -moz-user-select:none;
2038
+ user-select:none;
2034
2039
  }
2035
2040
 
2036
- .tds-modal{
2037
- --tds-modal-width:600px;
2038
- --tds-modal-opacity:0;
2039
- --tds-modal-backdrop-opacity:0;
2040
- --tds-modal-scale:.96;
2041
- --tds-modal-transition-duration:var(--t-duration-200);
2042
- --tds-modal-transition-timing-function:var(--t-ease-in);
2043
- --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2044
- --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2045
-
2046
- flex-direction:column;
2047
- width:min(var(--tds-modal-width), calc(100% - 48px));
2048
- padding-block:var(--t-spacing-3);
2041
+ .tds-radio label{
2042
+ grid-area:1 / 2;
2043
+ padding-inline-start:var(--t-spacing-1);
2044
+ font-size:var(--tds-radio-font-size);
2045
+ font-weight:var(--t-font-weight-normal);
2046
+ color:var(--tds-radio-label-color);
2047
+ cursor:var(--tds-radio-cursor);
2048
+ }
2049
+
2050
+ .tds-radio input[type="radio"]{
2051
+ position:relative;
2052
+ width:1em;
2053
+ height:1em;
2054
+ margin:calc((1lh - 1em) / 2) 0 0;
2055
+ font-size:var(--tds-radio-font-size);
2056
+ line-height:inherit;
2057
+ -webkit-appearance:none;
2058
+ -moz-appearance:none;
2059
+ appearance:none;
2060
+ cursor:var(--tds-radio-cursor);
2061
+ background-color:var(--tds-radio-input-background-color);
2062
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2063
+ border-radius:var(--tds-radio-input-border-radius);
2064
+ transition-timing-function:var(--t-ease-in-out);
2065
+ transition-duration:var(--t-duration-200);
2066
+ transition-property:var(--tds-radio-transition-property);
2067
+ }
2068
+
2069
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2070
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2071
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2072
+ }
2073
+
2074
+ :is(.tds-radio input[type="radio"]):focus-visible{
2075
+ outline:var(--t-focus-ring-outline);
2076
+ outline-offset:var(--t-focus-ring-offset);
2077
+ }
2078
+
2079
+ :is(.tds-radio input[type="radio"]):disabled{
2080
+ pointer-events:none;
2081
+ }
2082
+
2083
+ @media (prefers-reduced-motion: reduce){
2084
+
2085
+ .tds-radio input[type="radio"]{
2086
+ --tds-radio-transition-property:none;
2087
+ }
2088
+ }
2089
+
2090
+ .tds-radio:has(input:checked){
2091
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2092
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2093
+ --tds-radio-input-border-width:4px;
2094
+ }
2095
+
2096
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2097
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2098
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2099
+ }
2100
+
2101
+ .tds-radio:has(input:user-invalid){
2102
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2103
+ }
2104
+
2105
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2106
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2107
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2108
+ }
2109
+
2110
+ .tds-radio:has(input:disabled){
2111
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2112
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2113
+
2114
+ --tds-radio-label-color:var(--t-form-color-disabled);
2115
+ --tds-radio-description-color:var(--t-form-color-disabled);
2116
+ --tds-radio-cursor:not-allowed;
2117
+ }
2118
+
2119
+ .tds-radio:has(input:disabled) input:checked{
2120
+ --tds-radio-input-background-color:var(--t-form-background-color);
2121
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2122
+ }
2123
+
2124
+ .tds-radio-description{
2125
+ display:flex;
2126
+ grid-area:2 / 2;
2127
+ gap:var(--t-spacing-half);
2128
+ align-items:flex-start;
2129
+ padding-inline-start:var(--t-spacing-1);
2130
+ margin:0;
2131
+ font-size:var(--tds-radio-description-font-size);
2132
+ line-height:var(--tds-radio-description-line-height);
2133
+ color:var(--tds-radio-description-color);
2134
+ cursor:text;
2135
+ }
2136
+
2137
+ .tds-radio--sm{
2138
+ --tds-radio-line-height:1.35;
2139
+ --tds-radio-input-size:var(--t-element-size-sm);
2140
+ --tds-radio-font-size:var(--t-font-size-sm);
2141
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2142
+ --tds-radio-description-line-height:1.3;
2143
+ }
2144
+
2145
+ .tds-modal{
2146
+ --tds-modal-width:600px;
2147
+ --tds-modal-opacity:0;
2148
+ --tds-modal-backdrop-opacity:0;
2149
+ --tds-modal-scale:.96;
2150
+ --tds-modal-transition-duration:var(--t-duration-200);
2151
+ --tds-modal-transition-timing-function:var(--t-ease-in);
2152
+ --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2153
+ --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2154
+
2155
+ flex-direction:column;
2156
+ width:min(var(--tds-modal-width), calc(100% - 48px));
2157
+ padding-block:var(--t-spacing-3);
2049
2158
  padding-inline:0;
2050
2159
  background:var(--t-surface-color-card);
2051
2160
 
@@ -2163,151 +2272,118 @@ a.tds-dropdown-item:is(:hover, :active){
2163
2272
  margin-inline-end:auto;
2164
2273
  }
2165
2274
 
2166
- .tds-time-field-input{
2167
- --tds-field-date-segment-padding-inline:1px;
2168
- padding-block:var(--tds-field-padding-block);
2169
- padding-inline:var(--tds-field-padding-inline);
2170
- font-variant-numeric:tabular-nums;
2171
- }
2172
2275
 
2173
- .tds-toggle-switch{
2174
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2175
- --tds-toggle-switch-cursor:pointer;
2176
- --tds-toggle-switch-display:inline-grid;
2177
- --tds-toggle-switch-line-height:1.4;
2276
+ :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{
2277
+ -webkit-appearance:none;
2278
+ appearance:none;
2279
+ }
2178
2280
 
2179
- --tds-toggle-switch-label-color:var(--t-form-color);
2281
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2282
+ inline-size:1em;
2283
+ block-size:2em;
2284
+ }
2180
2285
 
2181
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2182
- --tds-toggle-switch-track-outline:none;
2183
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2184
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2185
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2286
+ @supports (field-sizing: content){
2287
+ .tds-input--auto-width{
2288
+ inline-size:-moz-fit-content;
2289
+ inline-size:fit-content;
2290
+ min-inline-size:min(100%, 122px);
2291
+ }
2186
2292
 
2187
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2188
- --tds-toggle-switch-thumb-transform:translateX(0);
2189
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2293
+ .tds-input--auto-width input{
2294
+ field-sizing:content;
2295
+ inline-size:auto;
2296
+ }
2297
+ }
2190
2298
 
2191
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2192
- --tds-toggle-switch-description-line-height:1.35;
2193
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2194
- position:relative;
2299
+ .tds-radio-group{
2300
+ --tds-radio-group-font-size:var(--t-font-size-md);
2301
+ --tds-radio-group-line-height:1.4;
2302
+ --tds-radio-group-gap:var(--t-spacing-1);
2195
2303
 
2196
- display:var(--tds-toggle-switch-display);
2197
- grid-template-columns:auto;
2198
- grid-auto-columns:1fr;
2199
- gap:var(--t-spacing-fourth) 0;
2200
- -webkit-user-select:none;
2201
- -moz-user-select:none;
2202
- user-select:none;
2304
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2305
+ --tds-radio-group-description-line-height:1.35;
2306
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2307
+ --tds-radio-group-description-invalid-icon-display:none;
2308
+ display:flex;
2309
+ flex-direction:column;
2310
+ gap:0;
2311
+ padding:0;
2312
+ margin:0;
2313
+
2314
+ font-size:var(--tds-radio-group-font-size);
2315
+ line-height:var(--tds-radio-group-line-height);
2316
+ border:0;
2203
2317
  }
2204
2318
 
2205
- .tds-toggle-switch input[type="checkbox"]{
2206
- position:absolute;
2207
- width:var(--tds-toggle-switch-track-width);
2208
- height:var(--tds-toggle-switch-track-height);
2319
+ .tds-radio-group legend{
2320
+ float:left;
2321
+ padding:0;
2209
2322
  margin:0;
2210
- -webkit-appearance:none;
2211
- -moz-appearance:none;
2212
- appearance:none;
2213
- cursor:var(--tds-toggle-switch-cursor);
2214
- outline:var(--tds-toggle-switch-track-outline);
2215
- outline-offset:var(--t-focus-ring-offset);
2216
- background-color:transparent;
2217
- border:0;
2218
- border-radius:var(--t-border-radius-round);
2219
2323
  }
2220
2324
 
2221
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2222
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2223
- }
2224
-
2225
- .tds-toggle-switch label{
2226
- display:inline-flex;
2227
- grid-area:1 / 2;
2228
- padding-inline-start:var(--t-spacing-1);
2229
- margin-top:-.09375em;
2230
- font-size:var(--tds-toggle-switch-font-size);
2231
- font-weight:var(--t-font-weight-normal);
2232
- line-height:var(--tds-toggle-switch-line-height);
2233
- color:var(--tds-toggle-switch-label-color);
2234
- cursor:var(--tds-toggle-switch-cursor);
2325
+ .tds-radio-group[aria-invalid="true"]{
2326
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2327
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2235
2328
  }
2236
2329
 
2237
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2238
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2239
- }
2330
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2331
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2332
+ }
2240
2333
 
2241
- .tds-toggle-switch:has(input:checked){
2242
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2243
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2244
- }
2334
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2335
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2336
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2337
+ }
2245
2338
 
2246
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2247
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2339
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2340
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2341
+ }
2342
+
2343
+ .tds-radio-group:has(input:required) legend::after{
2344
+ margin-left:.25ch;
2345
+ color:var(--t-text-color-status-error);
2346
+ content:"*";
2248
2347
  }
2249
2348
 
2250
- .tds-toggle-switch:has(input:disabled){
2251
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2252
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2253
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2254
- --tds-toggle-switch-cursor:not-allowed;
2255
- }
2349
+ .tds-radio-group-fields{
2350
+ display:flex;
2351
+ flex-direction:column;
2352
+ gap:var(--tds-radio-group-gap);
2353
+ align-items:flex-start;
2354
+ margin-top:var(--t-spacing-1);
2355
+ }
2256
2356
 
2257
- .tds-toggle-switch-track{
2258
- position:relative;
2259
- flex-shrink:0;
2260
- width:var(--tds-toggle-switch-track-width);
2261
- height:var(--tds-toggle-switch-track-height);
2262
- background-color:var(--tds-toggle-switch-track-background-color);
2263
- border-radius:var(--t-border-radius-round);
2264
- transition:var(--tds-toggle-switch-track-transition);
2265
- }
2266
-
2267
- .tds-toggle-switch-track::before{
2268
- position:absolute;
2269
- top:var(--t-spacing-fourth);
2270
- left:var(--t-spacing-fourth);
2271
- width:var(--tds-toggle-switch-thumb-size);
2272
- height:var(--tds-toggle-switch-thumb-size);
2273
- content:"";
2274
- background-color:#fff;
2275
- border-radius:var(--t-border-radius-round);
2276
- transform:var(--tds-toggle-switch-thumb-transform);
2277
- transition:var(--tds-toggle-switch-thumb-transition);
2278
- }
2279
-
2280
- @media (prefers-reduced-motion: reduce){
2281
-
2282
- .tds-toggle-switch-track{
2283
- --tds-toggle-switch-track-transition:none;
2284
- --tds-toggle-switch-thumb-transition:none;
2285
- }
2286
- }
2287
-
2288
- .tds-toggle-switch-description{
2357
+ .tds-radio-group-description{
2289
2358
  display:flex;
2290
- grid-area:2 / 2;
2359
+ gap:var(--t-spacing-half);
2291
2360
  align-items:flex-start;
2292
- padding-inline-start:var(--t-spacing-1);
2293
- margin:0;
2294
- font-size:var(--tds-toggle-switch-description-font-size);
2295
- line-height:var(--tds-toggle-switch-description-line-height);
2296
- color:var(--tds-toggle-switch-description-color);
2361
+ margin:var(--t-spacing-fourth) 0 0;
2362
+ font-size:var(--tds-radio-group-description-font-size);
2363
+ line-height:var(--tds-radio-group-description-line-height);
2364
+ color:var(--tds-radio-group-description-color);
2297
2365
  cursor:text;
2298
2366
  }
2299
2367
 
2300
- .tds-toggle-switch--sm{
2301
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2302
- --tds-toggle-switch-line-height:1.35;
2303
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2304
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2305
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2306
- --tds-toggle-switch-description-line-height:1.3;
2368
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2369
+ display:var(--tds-radio-group-description-invalid-icon-display);
2370
+ flex-shrink:0;
2371
+ margin-top:calc(.5lh - .5em);
2372
+ line-height:var(--tds-radio-group-description-line-height);
2373
+ }
2374
+
2375
+ .tds-radio-group--sm{
2376
+ --tds-radio-group-line-height:1.35;
2377
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2378
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2379
+ --tds-radio-group-description-line-height:1.3;
2307
2380
  }
2308
2381
 
2309
- .tds-toggle-switch--hide-label{
2310
- --tds-toggle-switch-display:inline-flex;
2382
+ .tds-time-field-input{
2383
+ --tds-field-date-segment-padding-inline:1px;
2384
+ padding-block:var(--tds-field-padding-block);
2385
+ padding-inline:var(--tds-field-padding-inline);
2386
+ font-variant-numeric:tabular-nums;
2311
2387
  }
2312
2388
 
2313
2389
  .tds-input:has(textarea){
@@ -2415,220 +2491,144 @@ a.tds-dropdown-item:is(:hover, :active){
2415
2491
  }
2416
2492
  }
2417
2493
 
2418
- .tds-radio{
2419
- --tds-radio-font-size:var(--t-font-size-md);
2420
- --tds-radio-cursor:pointer;
2421
- --tds-radio-line-height:1.4;
2422
- --tds-radio-transition-property:border-width;
2494
+ .tds-toggle-switch{
2495
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2496
+ --tds-toggle-switch-cursor:pointer;
2497
+ --tds-toggle-switch-display:inline-grid;
2498
+ --tds-toggle-switch-line-height:1.4;
2423
2499
 
2424
- --tds-radio-input-size:var(--t-element-size-md);
2425
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2426
- --tds-radio-input-border-color:var(--t-form-border-color);
2427
- --tds-radio-input-border-width:var(--t-form-border-width);
2428
- --tds-radio-input-background-color:var(--t-form-background-color);
2500
+ --tds-toggle-switch-label-color:var(--t-form-color);
2429
2501
 
2430
- --tds-radio-label-color:var(--t-form-color);
2502
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2503
+ --tds-toggle-switch-track-outline:none;
2504
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2505
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2506
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2431
2507
 
2432
- --tds-radio-description-font-size:var(--t-font-size-sm);
2433
- --tds-radio-description-line-height:1.35;
2434
- --tds-radio-description-color:var(--t-text-color-secondary);
2508
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2509
+ --tds-toggle-switch-thumb-transform:translateX(0);
2510
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2435
2511
 
2512
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2513
+ --tds-toggle-switch-description-line-height:1.35;
2514
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2436
2515
  position:relative;
2437
- display:inline-grid;
2516
+
2517
+ display:var(--tds-toggle-switch-display);
2438
2518
  grid-template-columns:auto;
2439
2519
  grid-auto-columns:1fr;
2440
2520
  gap:var(--t-spacing-fourth) 0;
2441
- line-height:var(--tds-radio-line-height);
2442
2521
  -webkit-user-select:none;
2443
2522
  -moz-user-select:none;
2444
2523
  user-select:none;
2445
2524
  }
2446
2525
 
2447
- .tds-radio label{
2448
- grid-area:1 / 2;
2449
- padding-inline-start:var(--t-spacing-1);
2450
- font-size:var(--tds-radio-font-size);
2451
- font-weight:var(--t-font-weight-normal);
2452
- color:var(--tds-radio-label-color);
2453
- cursor:var(--tds-radio-cursor);
2454
- }
2455
-
2456
- .tds-radio input[type="radio"]{
2457
- position:relative;
2458
- width:1em;
2459
- height:1em;
2460
- margin:calc((1lh - 1em) / 2) 0 0;
2461
- font-size:var(--tds-radio-font-size);
2462
- line-height:inherit;
2526
+ .tds-toggle-switch input[type="checkbox"]{
2527
+ position:absolute;
2528
+ width:var(--tds-toggle-switch-track-width);
2529
+ height:var(--tds-toggle-switch-track-height);
2530
+ margin:0;
2463
2531
  -webkit-appearance:none;
2464
2532
  -moz-appearance:none;
2465
2533
  appearance:none;
2466
- cursor:var(--tds-radio-cursor);
2467
- background-color:var(--tds-radio-input-background-color);
2468
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2469
- border-radius:var(--tds-radio-input-border-radius);
2470
- transition-timing-function:var(--t-ease-in-out);
2471
- transition-duration:var(--t-duration-200);
2472
- transition-property:var(--tds-radio-transition-property);
2534
+ cursor:var(--tds-toggle-switch-cursor);
2535
+ outline:var(--tds-toggle-switch-track-outline);
2536
+ outline-offset:var(--t-focus-ring-offset);
2537
+ background-color:transparent;
2538
+ border:0;
2539
+ border-radius:var(--t-border-radius-round);
2473
2540
  }
2474
2541
 
2475
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2476
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2477
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2478
- }
2479
-
2480
- :is(.tds-radio input[type="radio"]):focus-visible{
2481
- outline:var(--t-focus-ring-outline);
2482
- outline-offset:var(--t-focus-ring-offset);
2483
- }
2484
-
2485
- :is(.tds-radio input[type="radio"]):disabled{
2486
- pointer-events:none;
2542
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2543
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2487
2544
  }
2488
2545
 
2489
- @media (prefers-reduced-motion: reduce){
2490
-
2491
- .tds-radio input[type="radio"]{
2492
- --tds-radio-transition-property:none;
2546
+ .tds-toggle-switch label{
2547
+ display:inline-flex;
2548
+ grid-area:1 / 2;
2549
+ padding-inline-start:var(--t-spacing-1);
2550
+ margin-top:-.09375em;
2551
+ font-size:var(--tds-toggle-switch-font-size);
2552
+ font-weight:var(--t-font-weight-normal);
2553
+ line-height:var(--tds-toggle-switch-line-height);
2554
+ color:var(--tds-toggle-switch-label-color);
2555
+ cursor:var(--tds-toggle-switch-cursor);
2493
2556
  }
2494
- }
2495
2557
 
2496
- .tds-radio:has(input:checked){
2497
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2498
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2499
- --tds-radio-input-border-width:4px;
2558
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2559
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2500
2560
  }
2501
2561
 
2502
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2503
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2504
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2505
- }
2506
-
2507
- .tds-radio:has(input:user-invalid){
2508
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2562
+ .tds-toggle-switch:has(input:checked){
2563
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2564
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2509
2565
  }
2510
2566
 
2511
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2512
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2513
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2567
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2568
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2514
2569
  }
2515
2570
 
2516
- .tds-radio:has(input:disabled){
2517
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2518
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2519
-
2520
- --tds-radio-label-color:var(--t-form-color-disabled);
2521
- --tds-radio-description-color:var(--t-form-color-disabled);
2522
- --tds-radio-cursor:not-allowed;
2571
+ .tds-toggle-switch:has(input:disabled){
2572
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2573
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2574
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2575
+ --tds-toggle-switch-cursor:not-allowed;
2523
2576
  }
2524
2577
 
2525
- .tds-radio:has(input:disabled) input:checked{
2526
- --tds-radio-input-background-color:var(--t-form-background-color);
2527
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2528
- }
2529
-
2530
- .tds-radio-description{
2531
- display:flex;
2532
- grid-area:2 / 2;
2533
- gap:var(--t-spacing-half);
2534
- align-items:flex-start;
2535
- padding-inline-start:var(--t-spacing-1);
2536
- margin:0;
2537
- font-size:var(--tds-radio-description-font-size);
2538
- line-height:var(--tds-radio-description-line-height);
2539
- color:var(--tds-radio-description-color);
2540
- cursor:text;
2541
- }
2542
-
2543
- .tds-radio--sm{
2544
- --tds-radio-line-height:1.35;
2545
- --tds-radio-input-size:var(--t-element-size-sm);
2546
- --tds-radio-font-size:var(--t-font-size-sm);
2547
- --tds-radio-description-font-size:var(--t-font-size-xs);
2548
- --tds-radio-description-line-height:1.3;
2549
- }
2550
-
2551
- .tds-radio-group{
2552
- --tds-radio-group-font-size:var(--t-font-size-md);
2553
- --tds-radio-group-line-height:1.4;
2554
- --tds-radio-group-gap:var(--t-spacing-1);
2555
-
2556
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2557
- --tds-radio-group-description-line-height:1.35;
2558
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2559
- --tds-radio-group-description-invalid-icon-display:none;
2560
- display:flex;
2561
- flex-direction:column;
2562
- gap:0;
2563
- padding:0;
2564
- margin:0;
2565
-
2566
- font-size:var(--tds-radio-group-font-size);
2567
- line-height:var(--tds-radio-group-line-height);
2568
- border:0;
2578
+ .tds-toggle-switch-track{
2579
+ position:relative;
2580
+ flex-shrink:0;
2581
+ width:var(--tds-toggle-switch-track-width);
2582
+ height:var(--tds-toggle-switch-track-height);
2583
+ background-color:var(--tds-toggle-switch-track-background-color);
2584
+ border-radius:var(--t-border-radius-round);
2585
+ transition:var(--tds-toggle-switch-track-transition);
2569
2586
  }
2570
2587
 
2571
- .tds-radio-group legend{
2572
- float:left;
2573
- padding:0;
2574
- margin:0;
2575
- }
2576
-
2577
- .tds-radio-group[aria-invalid="true"]{
2578
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2579
- --tds-radio-group-description-invalid-icon-display:inline-block;
2588
+ .tds-toggle-switch-track::before{
2589
+ position:absolute;
2590
+ top:var(--t-spacing-fourth);
2591
+ left:var(--t-spacing-fourth);
2592
+ width:var(--tds-toggle-switch-thumb-size);
2593
+ height:var(--tds-toggle-switch-thumb-size);
2594
+ content:"";
2595
+ background-color:#fff;
2596
+ border-radius:var(--t-border-radius-round);
2597
+ transform:var(--tds-toggle-switch-thumb-transform);
2598
+ transition:var(--tds-toggle-switch-thumb-transition);
2580
2599
  }
2581
2600
 
2582
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2583
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2584
- }
2585
-
2586
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2587
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2588
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2589
- }
2590
-
2591
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2592
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2593
- }
2594
-
2595
- .tds-radio-group:has(input:required) legend::after{
2596
- margin-left:.25ch;
2597
- color:var(--t-text-color-status-error);
2598
- content:"*";
2599
- }
2601
+ @media (prefers-reduced-motion: reduce){
2600
2602
 
2601
- .tds-radio-group-fields{
2602
- display:flex;
2603
- flex-direction:column;
2604
- gap:var(--tds-radio-group-gap);
2605
- align-items:flex-start;
2606
- margin-top:var(--t-spacing-1);
2603
+ .tds-toggle-switch-track{
2604
+ --tds-toggle-switch-track-transition:none;
2605
+ --tds-toggle-switch-thumb-transition:none;
2607
2606
  }
2607
+ }
2608
2608
 
2609
- .tds-radio-group-description{
2609
+ .tds-toggle-switch-description{
2610
2610
  display:flex;
2611
- gap:var(--t-spacing-half);
2611
+ grid-area:2 / 2;
2612
2612
  align-items:flex-start;
2613
- margin:var(--t-spacing-fourth) 0 0;
2614
- font-size:var(--tds-radio-group-description-font-size);
2615
- line-height:var(--tds-radio-group-description-line-height);
2616
- color:var(--tds-radio-group-description-color);
2613
+ padding-inline-start:var(--t-spacing-1);
2614
+ margin:0;
2615
+ font-size:var(--tds-toggle-switch-description-font-size);
2616
+ line-height:var(--tds-toggle-switch-description-line-height);
2617
+ color:var(--tds-toggle-switch-description-color);
2617
2618
  cursor:text;
2618
2619
  }
2619
2620
 
2620
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2621
- display:var(--tds-radio-group-description-invalid-icon-display);
2622
- flex-shrink:0;
2623
- margin-top:calc(.5lh - .5em);
2624
- line-height:var(--tds-radio-group-description-line-height);
2625
- }
2621
+ .tds-toggle-switch--sm{
2622
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2623
+ --tds-toggle-switch-line-height:1.35;
2624
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2625
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2626
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2627
+ --tds-toggle-switch-description-line-height:1.3;
2628
+ }
2626
2629
 
2627
- .tds-radio-group--sm{
2628
- --tds-radio-group-line-height:1.35;
2629
- --tds-radio-group-font-size:var(--t-font-size-sm);
2630
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2631
- --tds-radio-group-description-line-height:1.3;
2630
+ .tds-toggle-switch--hide-label{
2631
+ --tds-toggle-switch-display:inline-flex;
2632
2632
  }
2633
2633
 
2634
2634
  .tds-loading-spinner{