@planningcenter/tapestry 4.3.1-rc.2 → 4.3.1-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/components/internal/pagination/Pagination.d.ts +37 -5
  2. package/dist/components/internal/pagination/Pagination.d.ts.map +1 -1
  3. package/dist/components/internal/pagination/Pagination.js +46 -18
  4. package/dist/components/internal/pagination/Pagination.js.map +1 -1
  5. package/dist/components/page-header/index.js +1 -1
  6. package/dist/components/sidenav/index.js +1 -1
  7. package/dist/packages/tapestry-wc/dist/components/{p-BkcPquCH.js → p-BccRLdKg.js} +3 -3
  8. package/dist/packages/tapestry-wc/dist/components/p-BccRLdKg.js.map +1 -0
  9. package/dist/packages/tapestry-wc/dist/components/{p-BETHN12f.js → p-BxrysLO8.js} +3 -3
  10. package/dist/packages/tapestry-wc/dist/components/p-BxrysLO8.js.map +1 -0
  11. package/dist/packages/tapestry-wc/dist/components/{p-OeNi4FkF.js → p-CQUg8rze.js} +3 -3
  12. package/dist/packages/tapestry-wc/dist/components/p-CQUg8rze.js.map +1 -0
  13. package/dist/packages/tapestry-wc/dist/components/{p-DlXOzBfb.js → p-QhdDQyZc.js} +2 -2
  14. package/dist/packages/tapestry-wc/dist/components/p-QhdDQyZc.js.map +1 -0
  15. package/dist/packages/tapestry-wc/dist/components/{p-EYzqvkpp.js → p-d5ldoxdi.js} +2 -2
  16. package/dist/packages/tapestry-wc/dist/components/p-d5ldoxdi.js.map +1 -0
  17. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/dist/reactRender.css +213 -213
  30. package/dist/reactRender.css.map +1 -1
  31. package/dist/reactRenderLegacy.css +213 -213
  32. package/dist/reactRenderLegacy.css.map +1 -1
  33. package/package.json +4 -4
  34. package/dist/packages/tapestry-wc/dist/components/p-BETHN12f.js.map +0 -1
  35. package/dist/packages/tapestry-wc/dist/components/p-BkcPquCH.js.map +0 -1
  36. package/dist/packages/tapestry-wc/dist/components/p-DlXOzBfb.js.map +0 -1
  37. package/dist/packages/tapestry-wc/dist/components/p-EYzqvkpp.js.map +0 -1
  38. package/dist/packages/tapestry-wc/dist/components/p-OeNi4FkF.js.map +0 -1
@@ -954,48 +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
957
 
1000
958
  @media (prefers-reduced-motion: no-preference){
1001
959
 
@@ -1358,6 +1316,48 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1358
1316
  flex-direction:column;
1359
1317
  }
1360
1318
 
1319
+ .tds-button-group{
1320
+ display:inline-flex;
1321
+ }
1322
+ .tds-button-group > .tds-btn{
1323
+ --tds-button-group-item-z-index:1;
1324
+
1325
+ position:relative;
1326
+ z-index:var(--tds-button-group-item-z-index);
1327
+ border-radius:0;
1328
+ }
1329
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1330
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
+ }
1332
+ :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{
1333
+ position:absolute;
1334
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1335
+ width:var(--tds-btn-border-width);
1336
+ pointer-events:none;
1337
+ content:"";
1338
+ background-color:var(--t-border-color-white);
1339
+ }
1340
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
+ }
1343
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
+ }
1346
+ :is(.tds-button-group > .tds-btn):hover{
1347
+ --tds-button-group-item-z-index:2;
1348
+ }
1349
+ :is(.tds-button-group > .tds-btn):focus-visible{
1350
+ --tds-button-group-item-z-index:5;
1351
+ }
1352
+ .tds-button-group > .tds-btn:first-child{
1353
+ border-start-start-radius:var(--tds-btn-border-radius);
1354
+ border-end-start-radius:var(--tds-btn-border-radius);
1355
+ }
1356
+ .tds-button-group > .tds-btn:last-child{
1357
+ border-start-end-radius:var(--tds-btn-border-radius);
1358
+ border-end-end-radius:var(--tds-btn-border-radius);
1359
+ }
1360
+
1361
1361
  .tds-checkbox{
1362
1362
  --tds-checkbox-font-size:var(--t-font-size-md);
1363
1363
  --tds-checkbox-cursor:pointer;
@@ -1650,89 +1650,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1650
1650
  }
1651
1651
  }
1652
1652
 
1653
- .tds-radio-group{
1654
- --tds-radio-group-font-size:var(--t-font-size-md);
1655
- --tds-radio-group-line-height:1.4;
1656
- --tds-radio-group-gap:var(--t-spacing-1);
1657
-
1658
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1659
- --tds-radio-group-description-line-height:1.35;
1660
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1661
- --tds-radio-group-description-invalid-icon-display:none;
1662
- display:flex;
1663
- flex-direction:column;
1664
- gap:0;
1665
- padding:0;
1666
- margin:0;
1667
-
1668
- font-size:var(--tds-radio-group-font-size);
1669
- line-height:var(--tds-radio-group-line-height);
1670
- border:0;
1671
- }
1672
-
1673
- .tds-radio-group legend{
1674
- float:left;
1675
- padding:0;
1676
- margin:0;
1677
- }
1678
-
1679
- .tds-radio-group[aria-invalid="true"]{
1680
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1681
- --tds-radio-group-description-invalid-icon-display:inline-block;
1682
- }
1683
-
1684
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1685
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1686
- }
1687
-
1688
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1689
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1690
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1691
- }
1692
-
1693
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1694
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1695
- }
1696
-
1697
- .tds-radio-group:has(input:required) legend::after{
1698
- margin-left:.25ch;
1699
- color:var(--t-text-color-status-error);
1700
- content:"*";
1701
- }
1702
-
1703
- .tds-radio-group-fields{
1704
- display:flex;
1705
- flex-direction:column;
1706
- gap:var(--tds-radio-group-gap);
1707
- align-items:flex-start;
1708
- margin-top:var(--t-spacing-1);
1709
- }
1710
-
1711
- .tds-radio-group-description{
1712
- display:flex;
1713
- gap:var(--t-spacing-half);
1714
- align-items:flex-start;
1715
- margin:var(--t-spacing-fourth) 0 0;
1716
- font-size:var(--tds-radio-group-description-font-size);
1717
- line-height:var(--tds-radio-group-description-line-height);
1718
- color:var(--tds-radio-group-description-color);
1719
- cursor:text;
1720
- }
1721
-
1722
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1723
- display:var(--tds-radio-group-description-invalid-icon-display);
1724
- flex-shrink:0;
1725
- margin-top:calc(.5lh - .5em);
1726
- line-height:var(--tds-radio-group-description-line-height);
1727
- }
1728
-
1729
- .tds-radio-group--sm{
1730
- --tds-radio-group-line-height:1.35;
1731
- --tds-radio-group-font-size:var(--t-font-size-sm);
1732
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1733
- --tds-radio-group-description-line-height:1.3;
1734
- }
1735
-
1736
1653
  .tds-modal-overlay{
1737
1654
  --tds-modal-min-margin-block:var(--t-spacing-3);
1738
1655
 
@@ -1896,6 +1813,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1896
1813
  }
1897
1814
  }
1898
1815
 
1816
+ .tds-input:has(textarea){
1817
+ --tds-input-padding-block:6px;
1818
+ --tds-input-resizer-size:var(--t-element-size-sm);
1819
+ --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");
1820
+ }
1821
+
1822
+ @supports (x: attr(x type(*))){
1823
+
1824
+ .tds-input textarea{
1825
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1826
+ }
1827
+ }
1828
+
1829
+ .tds-input.tds-textarea--resize-vertical textarea{
1830
+ resize:vertical;
1831
+ }
1832
+
1833
+ .tds-input.tds-textarea--resize-none textarea{
1834
+ resize:none;
1835
+ }
1836
+
1837
+ .tds-input.tds-textarea--resize-auto textarea{
1838
+ resize:vertical;
1839
+ }
1840
+
1841
+ @supports (field-sizing: content){
1842
+ .tds-input.tds-textarea--resize-auto textarea{
1843
+ field-sizing:content;
1844
+ resize:none;
1845
+ }
1846
+ }
1847
+
1848
+ .tds-input textarea{
1849
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1850
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1851
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1852
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1853
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1854
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1855
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1856
+ --tds-input-scrollbar-thumb-border-radius:999px;
1857
+ --tds-input-scrollbar-thumb-border-width:3px;
1858
+ --tds-input-scrollbar-track-margin-block:.125rem;
1859
+ scrollbar-color:initial;
1860
+ transition-timing-function:var(--t-ease-in-out);
1861
+ transition-duration:var(--t-duration-200);
1862
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1863
+ }
1864
+
1865
+ @media (pointer: fine){
1866
+ :is(.tds-input textarea)::-webkit-scrollbar{
1867
+ width:12px;
1868
+ height:12px;
1869
+ cursor:default;
1870
+ }
1871
+
1872
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1873
+ cursor:default;
1874
+ background:var(--tds-input-scrollbar-thumb-color);
1875
+ background-clip:content-box;
1876
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1877
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1878
+ }
1879
+
1880
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1881
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1882
+ }
1883
+
1884
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1885
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1886
+ }
1887
+
1888
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1889
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1890
+ }
1891
+
1892
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1893
+ background:var(--tds-input-scrollbar-surface-color);
1894
+ }
1895
+
1896
+ :is(.tds-input textarea)::-webkit-resizer{
1897
+ background:var(--tds-input-resizer-icon) no-repeat;
1898
+ background-position:right bottom;
1899
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1900
+ }
1901
+
1902
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1903
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1904
+ cursor:default;
1905
+ }
1906
+
1907
+ @supports (-moz-appearance: none){
1908
+ :is(.tds-input textarea){
1909
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1910
+ scrollbar-width:thin;
1911
+ }
1912
+
1913
+ @media (hover){
1914
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1915
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1916
+ }
1917
+ }
1918
+ }
1919
+ }
1920
+
1899
1921
  .tds-toggle-switch{
1900
1922
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1901
1923
  --tds-toggle-switch-cursor:pointer;
@@ -2169,111 +2191,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2169
2191
  --tds-radio-description-line-height:1.3;
2170
2192
  }
2171
2193
 
2172
- .tds-input:has(textarea){
2173
- --tds-input-padding-block:6px;
2174
- --tds-input-resizer-size:var(--t-element-size-sm);
2175
- --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");
2176
- }
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);
2177
2198
 
2178
- @supports (x: attr(x type(*))){
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;
2179
2208
 
2180
- .tds-input textarea{
2181
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2209
+ font-size:var(--tds-radio-group-font-size);
2210
+ line-height:var(--tds-radio-group-line-height);
2211
+ border:0;
2182
2212
  }
2183
- }
2184
2213
 
2185
- .tds-input.tds-textarea--resize-vertical textarea{
2186
- resize:vertical;
2187
- }
2214
+ .tds-radio-group legend{
2215
+ float:left;
2216
+ padding:0;
2217
+ margin:0;
2218
+ }
2188
2219
 
2189
- .tds-input.tds-textarea--resize-none textarea{
2190
- resize:none;
2191
- }
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
+ }
2192
2224
 
2193
- .tds-input.tds-textarea--resize-auto textarea{
2194
- resize:vertical;
2225
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2195
2227
  }
2196
2228
 
2197
- @supports (field-sizing: content){
2198
- .tds-input.tds-textarea--resize-auto textarea{
2199
- field-sizing:content;
2200
- resize:none;
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);
2201
2232
  }
2202
- }
2203
2233
 
2204
- .tds-input textarea{
2205
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2206
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2207
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2208
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2209
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2210
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2211
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2212
- --tds-input-scrollbar-thumb-border-radius:999px;
2213
- --tds-input-scrollbar-thumb-border-width:3px;
2214
- --tds-input-scrollbar-track-margin-block:.125rem;
2215
- scrollbar-color:initial;
2216
- transition-timing-function:var(--t-ease-in-out);
2217
- transition-duration:var(--t-duration-200);
2218
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2219
- }
2220
-
2221
- @media (pointer: fine){
2222
- :is(.tds-input textarea)::-webkit-scrollbar{
2223
- width:12px;
2224
- height:12px;
2225
- cursor:default;
2226
- }
2227
-
2228
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2229
- cursor:default;
2230
- background:var(--tds-input-scrollbar-thumb-color);
2231
- background-clip:content-box;
2232
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2233
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2234
- }
2235
-
2236
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2237
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2238
- }
2239
-
2240
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2241
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2242
- }
2243
-
2244
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2245
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2246
- }
2247
-
2248
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2249
- background:var(--tds-input-scrollbar-surface-color);
2250
- }
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
+ }
2251
2237
 
2252
- :is(.tds-input textarea)::-webkit-resizer{
2253
- background:var(--tds-input-resizer-icon) no-repeat;
2254
- background-position:right bottom;
2255
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2238
+ .tds-radio-group:has(input:required) legend::after{
2239
+ margin-left:.25ch;
2240
+ color:var(--t-text-color-status-error);
2241
+ content:"*";
2256
2242
  }
2257
2243
 
2258
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2259
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2260
- cursor:default;
2261
- }
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
+ }
2262
2251
 
2263
- @supports (-moz-appearance: none){
2264
- :is(.tds-input textarea){
2265
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2266
- scrollbar-width:thin;
2267
- }
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
+ }
2268
2262
 
2269
- @media (hover){
2270
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2271
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2272
- }
2273
- }
2274
- }
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);
2275
2268
  }
2276
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);