@planningcenter/tapestry 4.0.0-rc.0 → 4.0.0-rc.2

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.
@@ -1350,6 +1350,188 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1350
  --tds-checkbox-description-line-height:1.3;
1351
1351
  }
1352
1352
 
1353
+ .tds-combo-box{
1354
+ --tds-combo-box-button-offset:4px;
1355
+ }
1356
+
1357
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1358
+ transform:rotate(.5turn);
1359
+ }
1360
+
1361
+ .tds-combo-box--lg{
1362
+ --tds-combo-box-button-offset:5px;
1363
+ }
1364
+
1365
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1366
+ display:none;
1367
+ }
1368
+
1369
+ .tds-combo-box-input{
1370
+ display:flex;
1371
+ flex:1;
1372
+ align-items:center;
1373
+ padding-block:var(--tds-field-padding-block);
1374
+ padding-inline:var(--tds-field-padding-inline);
1375
+ font-family:inherit;
1376
+ font-size:inherit;
1377
+ color:inherit;
1378
+ outline:0;
1379
+ background:transparent;
1380
+ border:0;
1381
+ }
1382
+
1383
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1384
+ padding-inline-end:0;
1385
+ }
1386
+
1387
+ .tds-combo-box-input::-moz-placeholder{
1388
+ color:var(--tds-field-placeholder-color);
1389
+ -moz-user-select:none;
1390
+ user-select:none;
1391
+ }
1392
+
1393
+ .tds-combo-box-input::placeholder{
1394
+ color:var(--tds-field-placeholder-color);
1395
+ -webkit-user-select:none;
1396
+ -moz-user-select:none;
1397
+ user-select:none;
1398
+ }
1399
+
1400
+ .tds-combo-box-button{
1401
+ flex-shrink:0;
1402
+ align-self:center;
1403
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1404
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1405
+ padding:0;
1406
+ margin-inline-end:var(--tds-combo-box-button-offset);
1407
+ }
1408
+
1409
+ .tds-combo-box-button > svg{
1410
+ inline-size:var(--tds-field-font-size);
1411
+ block-size:var(--tds-field-font-size);
1412
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1413
+ }
1414
+
1415
+ .tds-combo-box-popover{
1416
+ width:var(--trigger-width);
1417
+ max-block-size:inherit;
1418
+ padding:var(--t-spacing-1);
1419
+ overflow:auto;
1420
+ scroll-behavior:smooth;
1421
+ overscroll-behavior:none;
1422
+ -webkit-user-select:none;
1423
+ -moz-user-select:none;
1424
+ user-select:none;
1425
+ outline:0;
1426
+ scrollbar-color:#0004 var(--t-surface-color-card);
1427
+ scrollbar-width:thin;
1428
+ background:var(--t-surface-color-card);
1429
+ background-clip:padding-box;
1430
+ border:1px solid var(--t-border-color);
1431
+ border-radius:var(--t-border-radius);
1432
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1433
+ }
1434
+
1435
+ .tds-combo-box-popover[data-entering]{
1436
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1437
+ }
1438
+
1439
+ .tds-combo-box-popover[data-exiting]{
1440
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1441
+ }
1442
+
1443
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1444
+ will-change:opacity, transform;
1445
+ }
1446
+
1447
+ @keyframes tds-combo-box-popover{
1448
+ from{
1449
+ opacity:0;
1450
+ transform:translateY(-8px);
1451
+ }
1452
+ }
1453
+
1454
+ @media (prefers-reduced-motion: reduce){
1455
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1456
+ animation:none;
1457
+ }
1458
+
1459
+ .tds-combo-box-button > svg{
1460
+ transition:none;
1461
+ }
1462
+ }
1463
+
1464
+ .tds-combo-box-list{
1465
+ padding:0;
1466
+ margin:0;
1467
+ }
1468
+
1469
+ .tds-combo-box-list-item{
1470
+ display:block;
1471
+ padding-block:var(--t-spacing-1);
1472
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1473
+ overflow:hidden;
1474
+ text-overflow:ellipsis;
1475
+ font-size:1rem;
1476
+ color:var(--t-text-color);
1477
+ white-space:nowrap;
1478
+ cursor:default;
1479
+ border-radius:var(--t-border-radius);
1480
+ }
1481
+
1482
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1483
+ background:var(--t-fill-color-neutral-070);
1484
+ }
1485
+
1486
+ .tds-combo-box-list-item[data-selected]{
1487
+ background:var(--t-fill-color-button-interaction-ghost-active);
1488
+ }
1489
+
1490
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1491
+ background:var(--t-fill-color-neutral-060);
1492
+ }
1493
+
1494
+ .tds-combo-box-list-item[data-disabled]{
1495
+ color:var(--t-form-color-disabled);
1496
+ cursor:not-allowed;
1497
+ }
1498
+
1499
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1500
+ background:transparent;
1501
+ }
1502
+
1503
+ .tds-combo-box-empty-state{
1504
+ position:relative;
1505
+ min-block-size:var(--t-spacing-3);
1506
+ padding-block:var(--t-spacing-1);
1507
+ padding-inline:var(--t-spacing-2);
1508
+ font-size:var(--t-font-size-md);
1509
+ color:var(--t-text-color-secondary);
1510
+ }
1511
+
1512
+ .tds-combo-box-load-more{
1513
+ position:relative;
1514
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1515
+ }
1516
+
1517
+ .tds-combo-box-empty-state,
1518
+ .tds-combo-box-load-more{
1519
+ --tds-loading-spinner-visibility:visible;
1520
+ --tds-loading-spinner-animation-play-state:running;
1521
+ }
1522
+
1523
+ .tds-combo-box-list-section:not(:first-child){
1524
+ margin-block-start:var(--t-spacing-half);
1525
+ }
1526
+
1527
+ .tds-combo-box-section-header{
1528
+ padding-block:var(--t-spacing-1);
1529
+ padding-inline:var(--t-spacing-1);
1530
+ font-size:var(--t-font-size-sm);
1531
+ font-weight:var(--t-font-weight-semibold);
1532
+ color:var(--t-text-color-secondary);
1533
+ }
1534
+
1353
1535
  .tds-checkbox-group{
1354
1536
  --tds-checkbox-group-font-size:var(--t-font-size-md);
1355
1537
  --tds-checkbox-group-line-height:1.4;
@@ -1424,159 +1606,49 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1424
1606
  --tds-checkbox-group-description-line-height:1.3;
1425
1607
  }
1426
1608
 
1427
- .tds-dropdown-popover{
1428
- min-inline-size:10rem;
1429
- max-inline-size:24rem;
1430
- padding:var(--t-spacing-1);
1431
- overflow:auto;
1432
- overscroll-behavior:none;
1433
- -webkit-user-select:none;
1434
- -moz-user-select:none;
1435
- user-select:none;
1436
- outline:0;
1437
- scrollbar-color:#0004 var(--t-surface-color-card);
1438
- scrollbar-width:thin;
1439
- background:var(--t-surface-color-card);
1440
- background-clip:padding-box;
1441
- border:1px solid var(--t-border-color);
1442
- border-radius:var(--t-border-radius);
1443
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1444
- }
1445
- .tds-dropdown-popover[data-entering]{
1446
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1609
+
1610
+ :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{
1611
+ -webkit-appearance:none;
1612
+ appearance:none;
1613
+ }
1614
+
1615
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1616
+ inline-size:1em;
1617
+ block-size:2em;
1618
+ }
1619
+
1620
+ @supports (field-sizing: content){
1621
+ .tds-input--auto-width{
1622
+ inline-size:-moz-fit-content;
1623
+ inline-size:fit-content;
1624
+ min-inline-size:min(100%, 122px);
1447
1625
  }
1448
- .tds-dropdown-popover[data-exiting]{
1449
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1626
+
1627
+ .tds-input--auto-width input{
1628
+ field-sizing:content;
1629
+ inline-size:auto;
1450
1630
  }
1451
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1452
- will-change:opacity, transform;
1631
+ }
1632
+
1633
+ .tds-modal-overlay{
1634
+ position:fixed;
1635
+ inset:0;
1636
+ z-index:1000;
1637
+ display:flex;
1638
+ align-items:center;
1639
+ justify-content:center;
1640
+ background:hsl(0 0% 0% / 40%);
1641
+ }
1642
+
1643
+ .tds-modal-overlay[data-entering]{
1644
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1453
1645
  }
1454
- @keyframes tds-dropdown-popover{
1455
- from{
1456
- opacity:0;
1457
- transform:translateY(-8px);
1458
- }
1459
- }
1460
- @media (prefers-reduced-motion: reduce){
1461
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1462
- animation:none;
1463
- }
1464
- }
1465
- .tds-dropdown-popover [role="menu"]{
1466
- outline:0;
1467
- }
1468
- .tds-dropdown-item{
1469
- --tds-dropdown-item-color:var(--t-text-color);
1470
- --tds-dropdown-item-row-gap:0;
1471
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1472
-
1473
- display:flex;
1474
- row-gap:var(--tds-dropdown-item-row-gap);
1475
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1476
- column-gap:var(--tds-dropdown-item-column-gap);
1477
- align-items:center;
1478
- padding-block:var(--t-spacing-1);
1479
- padding-inline:var(--t-spacing-2);
1480
- font-size:1rem;
1481
- color:var(--tds-dropdown-item-color);
1482
- text-decoration:none;
1483
- cursor:default;
1484
- outline:0;
1485
- border-radius:var(--t-border-radius);
1486
- }
1487
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1488
- background:var(--t-fill-color-neutral-070);
1489
- }
1490
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1491
- background:var(--t-fill-color-neutral-060);
1492
- }
1493
- .tds-dropdown-item[data-disabled]{
1494
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1495
-
1496
- cursor:not-allowed;
1497
- }
1498
- .tds-dropdown-item--destructive{
1499
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1500
- }
1501
- .tds-dropdown-item--staff-only{
1502
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1503
- }
1504
- a.tds-dropdown-item:is(:hover, :active){
1505
- color:var(--tds-dropdown-item-color);
1506
- }
1507
- .tds-dropdown-item [slot="prefix"],
1508
- .tds-dropdown-item [slot="suffix"]{
1509
- flex-shrink:0;
1510
- }
1511
- .tds-dropdown-item [slot="label"]{
1512
- flex:1;
1513
- min-width:0;
1514
- overflow:hidden;
1515
- text-overflow:ellipsis;
1516
- white-space:nowrap;
1517
- }
1518
- .tds-dropdown-item [slot="description"]{
1519
- font-size:var(--t-font-size-sm);
1520
- color:var(--t-text-color-secondary);
1521
- }
1522
- .tds-dropdown-item:has([slot="description"]){
1523
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1524
- --tds-dropdown-item-column-gap:0;
1525
-
1526
- display:grid;
1527
- grid-template-areas:"prefix label suffix" ". description .";
1528
- grid-template-columns:auto 1fr auto;
1529
- }
1530
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1531
- grid-area:prefix;
1532
- margin-inline-end:var(--t-spacing-1);
1533
- }
1534
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1535
- grid-area:label;
1536
- }
1537
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1538
- grid-area:description;
1539
- }
1540
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1541
- grid-area:suffix;
1542
- margin-inline-start:var(--t-spacing-1);
1543
- }
1544
- .tds-dropdown-section:not(:first-child){
1545
- margin-block-start:var(--t-spacing-half);
1546
- }
1547
- .tds-dropdown-section-label{
1548
- padding-block:var(--t-spacing-1);
1549
- padding-inline:var(--t-spacing-1);
1550
- font-size:var(--t-font-size-sm);
1551
- font-weight:var(--t-font-weight-semibold);
1552
- color:var(--t-text-color-secondary);
1553
- }
1554
- .tds-dropdown-separator{
1555
- margin-block:var(--t-spacing-half);
1556
- margin-inline:0;
1557
- border:0;
1558
- border-top:1px solid var(--t-border-color);
1559
- }
1560
-
1561
- .tds-modal-overlay{
1562
- position:fixed;
1563
- inset:0;
1564
- z-index:1000;
1565
- display:flex;
1566
- align-items:center;
1567
- justify-content:center;
1568
- background:hsl(0 0% 0% / 40%);
1569
- }
1570
-
1571
- .tds-modal-overlay[data-entering]{
1572
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1573
- }
1574
-
1575
- .tds-modal-overlay[data-exiting]{
1576
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1577
- }
1578
-
1579
- @keyframes tds-modal-overlay-fade{
1646
+
1647
+ .tds-modal-overlay[data-exiting]{
1648
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1649
+ }
1650
+
1651
+ @keyframes tds-modal-overlay-fade{
1580
1652
  from{
1581
1653
  opacity:0;
1582
1654
  }
@@ -1702,303 +1774,97 @@ a.tds-dropdown-item:is(:hover, :active){
1702
1774
  margin-inline-end:auto;
1703
1775
  }
1704
1776
 
1777
+ .tds-radio{
1778
+ --tds-radio-font-size:var(--t-font-size-md);
1779
+ --tds-radio-cursor:pointer;
1780
+ --tds-radio-line-height:1.4;
1781
+ --tds-radio-transition-property:border-width;
1705
1782
 
1706
- :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{
1707
- -webkit-appearance:none;
1708
- appearance:none;
1709
- }
1783
+ --tds-radio-input-size:var(--t-element-size-md);
1784
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1785
+ --tds-radio-input-border-color:var(--t-form-border-color);
1786
+ --tds-radio-input-border-width:var(--t-form-border-width);
1787
+ --tds-radio-input-background-color:var(--t-form-background-color);
1710
1788
 
1711
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1712
- inline-size:1em;
1713
- block-size:2em;
1714
- }
1789
+ --tds-radio-label-color:var(--t-form-color);
1715
1790
 
1716
- @supports (field-sizing: content){
1717
- .tds-input--auto-width{
1718
- inline-size:-moz-fit-content;
1719
- inline-size:fit-content;
1720
- min-inline-size:min(100%, 122px);
1721
- }
1791
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1792
+ --tds-radio-description-line-height:1.35;
1793
+ --tds-radio-description-color:var(--t-text-color-secondary);
1722
1794
 
1723
- .tds-input--auto-width input{
1724
- field-sizing:content;
1725
- inline-size:auto;
1726
- }
1795
+ position:relative;
1796
+ display:inline-grid;
1797
+ grid-template-columns:auto;
1798
+ grid-auto-columns:1fr;
1799
+ gap:var(--t-spacing-fourth) 0;
1800
+ line-height:var(--tds-radio-line-height);
1801
+ -webkit-user-select:none;
1802
+ -moz-user-select:none;
1803
+ user-select:none;
1727
1804
  }
1728
1805
 
1729
- .tds-combo-box{
1730
- --tds-combo-box-button-offset:4px;
1731
- }
1806
+ .tds-radio label{
1807
+ grid-area:1 / 2;
1808
+ padding-inline-start:var(--t-spacing-1);
1809
+ font-size:var(--tds-radio-font-size);
1810
+ font-weight:var(--t-font-weight-normal);
1811
+ color:var(--tds-radio-label-color);
1812
+ cursor:var(--tds-radio-cursor);
1813
+ }
1732
1814
 
1733
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1734
- transform:rotate(.5turn);
1815
+ .tds-radio input[type="radio"]{
1816
+ position:relative;
1817
+ width:1em;
1818
+ height:1em;
1819
+ margin:calc((1lh - 1em) / 2) 0 0;
1820
+ font-size:var(--tds-radio-font-size);
1821
+ line-height:inherit;
1822
+ -webkit-appearance:none;
1823
+ -moz-appearance:none;
1824
+ appearance:none;
1825
+ cursor:var(--tds-radio-cursor);
1826
+ background-color:var(--tds-radio-input-background-color);
1827
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1828
+ border-radius:var(--tds-radio-input-border-radius);
1829
+ transition-timing-function:var(--t-ease-in-out);
1830
+ transition-duration:var(--t-duration-200);
1831
+ transition-property:var(--tds-radio-transition-property);
1735
1832
  }
1736
1833
 
1737
- .tds-combo-box--lg{
1738
- --tds-combo-box-button-offset:5px;
1739
- }
1834
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1835
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1836
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1837
+ }
1740
1838
 
1741
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1742
- display:none;
1743
- }
1839
+ :is(.tds-radio input[type="radio"]):focus-visible{
1840
+ outline:var(--t-focus-ring-outline);
1841
+ outline-offset:var(--t-focus-ring-offset);
1842
+ }
1744
1843
 
1745
- .tds-combo-box-input{
1746
- display:flex;
1747
- flex:1;
1748
- align-items:center;
1749
- padding-block:var(--tds-field-padding-block);
1750
- padding-inline:var(--tds-field-padding-inline);
1751
- font-family:inherit;
1752
- font-size:inherit;
1753
- color:inherit;
1754
- outline:0;
1755
- background:transparent;
1756
- border:0;
1757
- }
1844
+ :is(.tds-radio input[type="radio"]):disabled{
1845
+ pointer-events:none;
1846
+ }
1758
1847
 
1759
- .tds-combo-box-input:has( + .tds-combo-box-button){
1760
- padding-inline-end:0;
1761
- }
1848
+ @media (prefers-reduced-motion: reduce){
1762
1849
 
1763
- .tds-combo-box-input::-moz-placeholder{
1764
- color:var(--tds-field-placeholder-color);
1765
- -moz-user-select:none;
1766
- user-select:none;
1850
+ .tds-radio input[type="radio"]{
1851
+ --tds-radio-transition-property:none;
1767
1852
  }
1853
+ }
1768
1854
 
1769
- .tds-combo-box-input::placeholder{
1770
- color:var(--tds-field-placeholder-color);
1771
- -webkit-user-select:none;
1772
- -moz-user-select:none;
1773
- user-select:none;
1855
+ .tds-radio:has(input:checked){
1856
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1857
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1858
+ --tds-radio-input-border-width:4px;
1774
1859
  }
1775
1860
 
1776
- .tds-combo-box-button{
1777
- flex-shrink:0;
1778
- align-self:center;
1779
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1780
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1781
- padding:0;
1782
- margin-inline-end:var(--tds-combo-box-button-offset);
1783
- }
1861
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1862
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1863
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1864
+ }
1784
1865
 
1785
- .tds-combo-box-button > svg{
1786
- inline-size:var(--tds-field-font-size);
1787
- block-size:var(--tds-field-font-size);
1788
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1789
- }
1790
-
1791
- .tds-combo-box-popover{
1792
- width:var(--trigger-width);
1793
- max-block-size:inherit;
1794
- padding:var(--t-spacing-1);
1795
- overflow:auto;
1796
- scroll-behavior:smooth;
1797
- overscroll-behavior:none;
1798
- -webkit-user-select:none;
1799
- -moz-user-select:none;
1800
- user-select:none;
1801
- outline:0;
1802
- scrollbar-color:#0004 var(--t-surface-color-card);
1803
- scrollbar-width:thin;
1804
- background:var(--t-surface-color-card);
1805
- background-clip:padding-box;
1806
- border:1px solid var(--t-border-color);
1807
- border-radius:var(--t-border-radius);
1808
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1809
- }
1810
-
1811
- .tds-combo-box-popover[data-entering]{
1812
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1813
- }
1814
-
1815
- .tds-combo-box-popover[data-exiting]{
1816
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1817
- }
1818
-
1819
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1820
- will-change:opacity, transform;
1821
- }
1822
-
1823
- @keyframes tds-combo-box-popover{
1824
- from{
1825
- opacity:0;
1826
- transform:translateY(-8px);
1827
- }
1828
- }
1829
-
1830
- @media (prefers-reduced-motion: reduce){
1831
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1832
- animation:none;
1833
- }
1834
-
1835
- .tds-combo-box-button > svg{
1836
- transition:none;
1837
- }
1838
- }
1839
-
1840
- .tds-combo-box-list{
1841
- padding:0;
1842
- margin:0;
1843
- }
1844
-
1845
- .tds-combo-box-list-item{
1846
- display:block;
1847
- padding-block:var(--t-spacing-1);
1848
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1849
- overflow:hidden;
1850
- text-overflow:ellipsis;
1851
- font-size:1rem;
1852
- color:var(--t-text-color);
1853
- white-space:nowrap;
1854
- cursor:default;
1855
- border-radius:var(--t-border-radius);
1856
- }
1857
-
1858
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1859
- background:var(--t-fill-color-neutral-070);
1860
- }
1861
-
1862
- .tds-combo-box-list-item[data-selected]{
1863
- background:var(--t-fill-color-button-interaction-ghost-active);
1864
- }
1865
-
1866
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1867
- background:var(--t-fill-color-neutral-060);
1868
- }
1869
-
1870
- .tds-combo-box-list-item[data-disabled]{
1871
- color:var(--t-form-color-disabled);
1872
- cursor:not-allowed;
1873
- }
1874
-
1875
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1876
- background:transparent;
1877
- }
1878
-
1879
- .tds-combo-box-empty-state{
1880
- position:relative;
1881
- min-block-size:var(--t-spacing-3);
1882
- padding-block:var(--t-spacing-1);
1883
- padding-inline:var(--t-spacing-2);
1884
- font-size:var(--t-font-size-md);
1885
- color:var(--t-text-color-secondary);
1886
- }
1887
-
1888
- .tds-combo-box-load-more{
1889
- position:relative;
1890
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1891
- }
1892
-
1893
- .tds-combo-box-empty-state,
1894
- .tds-combo-box-load-more{
1895
- --tds-loading-spinner-visibility:visible;
1896
- --tds-loading-spinner-animation-play-state:running;
1897
- }
1898
-
1899
- .tds-combo-box-list-section:not(:first-child){
1900
- margin-block-start:var(--t-spacing-half);
1901
- }
1902
-
1903
- .tds-combo-box-section-header{
1904
- padding-block:var(--t-spacing-1);
1905
- padding-inline:var(--t-spacing-1);
1906
- font-size:var(--t-font-size-sm);
1907
- font-weight:var(--t-font-weight-semibold);
1908
- color:var(--t-text-color-secondary);
1909
- }
1910
-
1911
- .tds-radio{
1912
- --tds-radio-font-size:var(--t-font-size-md);
1913
- --tds-radio-cursor:pointer;
1914
- --tds-radio-line-height:1.4;
1915
- --tds-radio-transition-property:border-width;
1916
-
1917
- --tds-radio-input-size:var(--t-element-size-md);
1918
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1919
- --tds-radio-input-border-color:var(--t-form-border-color);
1920
- --tds-radio-input-border-width:var(--t-form-border-width);
1921
- --tds-radio-input-background-color:var(--t-form-background-color);
1922
-
1923
- --tds-radio-label-color:var(--t-form-color);
1924
-
1925
- --tds-radio-description-font-size:var(--t-font-size-sm);
1926
- --tds-radio-description-line-height:1.35;
1927
- --tds-radio-description-color:var(--t-text-color-secondary);
1928
-
1929
- position:relative;
1930
- display:inline-grid;
1931
- grid-template-columns:auto;
1932
- grid-auto-columns:1fr;
1933
- gap:var(--t-spacing-fourth) 0;
1934
- line-height:var(--tds-radio-line-height);
1935
- -webkit-user-select:none;
1936
- -moz-user-select:none;
1937
- user-select:none;
1938
- }
1939
-
1940
- .tds-radio label{
1941
- grid-area:1 / 2;
1942
- padding-inline-start:var(--t-spacing-1);
1943
- font-size:var(--tds-radio-font-size);
1944
- font-weight:var(--t-font-weight-normal);
1945
- color:var(--tds-radio-label-color);
1946
- cursor:var(--tds-radio-cursor);
1947
- }
1948
-
1949
- .tds-radio input[type="radio"]{
1950
- position:relative;
1951
- width:1em;
1952
- height:1em;
1953
- margin:calc((1lh - 1em) / 2) 0 0;
1954
- font-size:var(--tds-radio-font-size);
1955
- line-height:inherit;
1956
- -webkit-appearance:none;
1957
- -moz-appearance:none;
1958
- appearance:none;
1959
- cursor:var(--tds-radio-cursor);
1960
- background-color:var(--tds-radio-input-background-color);
1961
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1962
- border-radius:var(--tds-radio-input-border-radius);
1963
- transition-timing-function:var(--t-ease-in-out);
1964
- transition-duration:var(--t-duration-200);
1965
- transition-property:var(--tds-radio-transition-property);
1966
- }
1967
-
1968
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1969
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1970
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1971
- }
1972
-
1973
- :is(.tds-radio input[type="radio"]):focus-visible{
1974
- outline:var(--t-focus-ring-outline);
1975
- outline-offset:var(--t-focus-ring-offset);
1976
- }
1977
-
1978
- :is(.tds-radio input[type="radio"]):disabled{
1979
- pointer-events:none;
1980
- }
1981
-
1982
- @media (prefers-reduced-motion: reduce){
1983
-
1984
- .tds-radio input[type="radio"]{
1985
- --tds-radio-transition-property:none;
1986
- }
1987
- }
1988
-
1989
- .tds-radio:has(input:checked){
1990
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1991
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1992
- --tds-radio-input-border-width:4px;
1993
- }
1994
-
1995
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1996
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1997
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1998
- }
1999
-
2000
- .tds-radio:has(input:user-invalid){
2001
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1866
+ .tds-radio:has(input:user-invalid){
1867
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2002
1868
  }
2003
1869
 
2004
1870
  .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
@@ -2041,88 +1907,110 @@ a.tds-dropdown-item:is(:hover, :active){
2041
1907
  --tds-radio-description-line-height:1.3;
2042
1908
  }
2043
1909
 
2044
- .tds-radio-group{
2045
- --tds-radio-group-font-size:var(--t-font-size-md);
2046
- --tds-radio-group-line-height:1.4;
2047
- --tds-radio-group-gap:var(--t-spacing-1);
1910
+ .tds-input:has(textarea){
1911
+ --tds-input-padding-block:6px;
1912
+ --tds-input-resizer-size:var(--t-element-size-sm);
1913
+ --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");
1914
+ }
2048
1915
 
2049
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2050
- --tds-radio-group-description-line-height:1.35;
2051
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2052
- --tds-radio-group-description-invalid-icon-display:none;
2053
- display:flex;
2054
- flex-direction:column;
2055
- gap:0;
2056
- padding:0;
2057
- margin:0;
1916
+ @supports (x: attr(x type(*))){
2058
1917
 
2059
- font-size:var(--tds-radio-group-font-size);
2060
- line-height:var(--tds-radio-group-line-height);
2061
- border:0;
1918
+ .tds-input textarea{
1919
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2062
1920
  }
2063
-
2064
- .tds-radio-group legend{
2065
- float:left;
2066
- padding:0;
2067
- margin:0;
2068
1921
  }
2069
1922
 
2070
- .tds-radio-group[aria-invalid="true"]{
2071
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2072
- --tds-radio-group-description-invalid-icon-display:inline-block;
2073
- }
1923
+ .tds-input.tds-textarea--resize-vertical textarea{
1924
+ resize:vertical;
1925
+ }
2074
1926
 
2075
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2076
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1927
+ .tds-input.tds-textarea--resize-none textarea{
1928
+ resize:none;
2077
1929
  }
2078
1930
 
2079
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2080
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2081
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2082
- }
1931
+ .tds-input.tds-textarea--resize-auto textarea{
1932
+ resize:vertical;
1933
+ }
2083
1934
 
2084
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2085
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1935
+ @supports (field-sizing: content){
1936
+ .tds-input.tds-textarea--resize-auto textarea{
1937
+ field-sizing:content;
1938
+ resize:none;
2086
1939
  }
2087
-
2088
- .tds-radio-group:has(input:required) legend::after{
2089
- margin-left:.25ch;
2090
- color:var(--t-text-color-status-error);
2091
- content:"*";
2092
1940
  }
2093
1941
 
2094
- .tds-radio-group-fields{
2095
- display:flex;
2096
- flex-direction:column;
2097
- gap:var(--tds-radio-group-gap);
2098
- align-items:flex-start;
2099
- margin-top:var(--t-spacing-1);
1942
+ .tds-input textarea{
1943
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1944
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1945
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1946
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1947
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1948
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1949
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1950
+ --tds-input-scrollbar-thumb-border-radius:999px;
1951
+ --tds-input-scrollbar-thumb-border-width:3px;
1952
+ --tds-input-scrollbar-track-margin-block:.125rem;
1953
+ scrollbar-color:initial;
1954
+ transition-timing-function:var(--t-ease-in-out);
1955
+ transition-duration:var(--t-duration-200);
1956
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2100
1957
  }
2101
1958
 
2102
- .tds-radio-group-description{
2103
- display:flex;
2104
- gap:var(--t-spacing-half);
2105
- align-items:flex-start;
2106
- margin:var(--t-spacing-fourth) 0 0;
2107
- font-size:var(--tds-radio-group-description-font-size);
2108
- line-height:var(--tds-radio-group-description-line-height);
2109
- color:var(--tds-radio-group-description-color);
2110
- cursor:text;
2111
- }
1959
+ @media (pointer: fine){
1960
+ :is(.tds-input textarea)::-webkit-scrollbar{
1961
+ width:12px;
1962
+ height:12px;
1963
+ cursor:default;
1964
+ }
2112
1965
 
2113
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2114
- display:var(--tds-radio-group-description-invalid-icon-display);
2115
- flex-shrink:0;
2116
- margin-top:calc(.5lh - .5em);
2117
- line-height:var(--tds-radio-group-description-line-height);
2118
- }
1966
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1967
+ cursor:default;
1968
+ background:var(--tds-input-scrollbar-thumb-color);
1969
+ background-clip:content-box;
1970
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1971
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1972
+ }
2119
1973
 
2120
- .tds-radio-group--sm{
2121
- --tds-radio-group-line-height:1.35;
2122
- --tds-radio-group-font-size:var(--t-font-size-sm);
2123
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2124
- --tds-radio-group-description-line-height:1.3;
2125
- }
1974
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1975
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1976
+ }
1977
+
1978
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1979
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1980
+ }
1981
+
1982
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1983
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1984
+ }
1985
+
1986
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1987
+ background:var(--tds-input-scrollbar-surface-color);
1988
+ }
1989
+
1990
+ :is(.tds-input textarea)::-webkit-resizer{
1991
+ background:var(--tds-input-resizer-icon) no-repeat;
1992
+ background-position:right bottom;
1993
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1994
+ }
1995
+
1996
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1997
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1998
+ cursor:default;
1999
+ }
2000
+
2001
+ @supports (-moz-appearance: none){
2002
+ :is(.tds-input textarea){
2003
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2004
+ scrollbar-width:thin;
2005
+ }
2006
+
2007
+ @media (hover){
2008
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2009
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2010
+ }
2011
+ }
2012
+ }
2013
+ }
2126
2014
 
2127
2015
  .tds-toggle-switch{
2128
2016
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -2264,109 +2152,385 @@ a.tds-dropdown-item:is(:hover, :active){
2264
2152
  --tds-toggle-switch-display:inline-flex;
2265
2153
  }
2266
2154
 
2267
- .tds-input:has(textarea){
2268
- --tds-input-padding-block:6px;
2269
- --tds-input-resizer-size:var(--t-element-size-sm);
2270
- --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");
2155
+ .tds-dropdown-popover{
2156
+ min-inline-size:10rem;
2157
+ max-inline-size:24rem;
2158
+ padding:var(--t-spacing-1);
2159
+ overflow:auto;
2160
+ overscroll-behavior:none;
2161
+ -webkit-user-select:none;
2162
+ -moz-user-select:none;
2163
+ user-select:none;
2164
+ outline:0;
2165
+ scrollbar-color:#0004 var(--t-surface-color-card);
2166
+ scrollbar-width:thin;
2167
+ background:var(--t-surface-color-card);
2168
+ background-clip:padding-box;
2169
+ border:1px solid var(--t-border-color);
2170
+ border-radius:var(--t-border-radius);
2171
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2172
+ }
2173
+ .tds-dropdown-popover[data-entering]{
2174
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2175
+ }
2176
+ .tds-dropdown-popover[data-exiting]{
2177
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
2178
+ }
2179
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2180
+ will-change:opacity, transform;
2181
+ }
2182
+ @keyframes tds-dropdown-popover{
2183
+ from{
2184
+ opacity:0;
2185
+ transform:translateY(-8px);
2186
+ }
2271
2187
  }
2188
+ @media (prefers-reduced-motion: reduce){
2189
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2190
+ animation:none;
2191
+ }
2192
+ }
2193
+ .tds-dropdown-popover [role="menu"]{
2194
+ outline:0;
2195
+ }
2196
+ .tds-dropdown-item{
2197
+ --tds-dropdown-item-color:var(--t-text-color);
2198
+ --tds-dropdown-item-row-gap:0;
2199
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
2272
2200
 
2273
- @supports (x: attr(x type(*))){
2201
+ display:flex;
2202
+ row-gap:var(--tds-dropdown-item-row-gap);
2203
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
2204
+ column-gap:var(--tds-dropdown-item-column-gap);
2205
+ align-items:center;
2206
+ padding-block:var(--t-spacing-1);
2207
+ padding-inline:var(--t-spacing-2);
2208
+ font-size:1rem;
2209
+ color:var(--tds-dropdown-item-color);
2210
+ text-decoration:none;
2211
+ cursor:default;
2212
+ outline:0;
2213
+ border-radius:var(--t-border-radius);
2214
+ }
2215
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2216
+ background:var(--t-fill-color-neutral-070);
2217
+ }
2218
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
2219
+ background:var(--t-fill-color-neutral-060);
2220
+ }
2221
+ .tds-dropdown-item[data-disabled]{
2222
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
2274
2223
 
2275
- .tds-input textarea{
2276
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2224
+ cursor:not-allowed;
2225
+ }
2226
+ .tds-dropdown-item--destructive{
2227
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
2228
+ }
2229
+ .tds-dropdown-item--staff-only{
2230
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2231
+ }
2232
+ a.tds-dropdown-item:is(:hover, :active){
2233
+ color:var(--tds-dropdown-item-color);
2234
+ }
2235
+ .tds-dropdown-item [slot="prefix"],
2236
+ .tds-dropdown-item [slot="suffix"]{
2237
+ flex-shrink:0;
2238
+ }
2239
+ .tds-dropdown-item [slot="label"]{
2240
+ flex:1;
2241
+ min-width:0;
2242
+ overflow:hidden;
2243
+ text-overflow:ellipsis;
2244
+ white-space:nowrap;
2245
+ }
2246
+ .tds-dropdown-item [slot="description"]{
2247
+ font-size:var(--t-font-size-sm);
2248
+ color:var(--t-text-color-secondary);
2249
+ }
2250
+ .tds-dropdown-item:has([slot="description"]){
2251
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
2252
+ --tds-dropdown-item-column-gap:0;
2253
+
2254
+ display:grid;
2255
+ grid-template-areas:"prefix label suffix" ". description .";
2256
+ grid-template-columns:auto 1fr auto;
2257
+ }
2258
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2259
+ grid-area:prefix;
2260
+ margin-inline-end:var(--t-spacing-1);
2261
+ }
2262
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2263
+ grid-area:label;
2264
+ }
2265
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2266
+ grid-area:description;
2267
+ }
2268
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2269
+ grid-area:suffix;
2270
+ margin-inline-start:var(--t-spacing-1);
2271
+ }
2272
+ .tds-dropdown-section:not(:first-child){
2273
+ margin-block-start:var(--t-spacing-half);
2274
+ }
2275
+ .tds-dropdown-section-label{
2276
+ padding-block:var(--t-spacing-1);
2277
+ padding-inline:var(--t-spacing-1);
2278
+ font-size:var(--t-font-size-sm);
2279
+ font-weight:var(--t-font-weight-semibold);
2280
+ color:var(--t-text-color-secondary);
2277
2281
  }
2282
+ .tds-dropdown-separator{
2283
+ margin-block:var(--t-spacing-half);
2284
+ margin-inline:0;
2285
+ border:0;
2286
+ border-top:1px solid var(--t-border-color);
2287
+ }
2288
+
2289
+ .tds-radio-group{
2290
+ --tds-radio-group-font-size:var(--t-font-size-md);
2291
+ --tds-radio-group-line-height:1.4;
2292
+ --tds-radio-group-gap:var(--t-spacing-1);
2293
+
2294
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2295
+ --tds-radio-group-description-line-height:1.35;
2296
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2297
+ --tds-radio-group-description-invalid-icon-display:none;
2298
+ display:flex;
2299
+ flex-direction:column;
2300
+ gap:0;
2301
+ padding:0;
2302
+ margin:0;
2303
+
2304
+ font-size:var(--tds-radio-group-font-size);
2305
+ line-height:var(--tds-radio-group-line-height);
2306
+ border:0;
2307
+ }
2308
+
2309
+ .tds-radio-group legend{
2310
+ float:left;
2311
+ padding:0;
2312
+ margin:0;
2278
2313
  }
2279
2314
 
2280
- .tds-input.tds-textarea--resize-vertical textarea{
2281
- resize:vertical;
2282
- }
2315
+ .tds-radio-group[aria-invalid="true"]{
2316
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2317
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2318
+ }
2283
2319
 
2284
- .tds-input.tds-textarea--resize-none textarea{
2285
- resize:none;
2320
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2321
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2286
2322
  }
2287
2323
 
2288
- .tds-input.tds-textarea--resize-auto textarea{
2289
- resize:vertical;
2290
- }
2324
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2325
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2326
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2327
+ }
2291
2328
 
2292
- @supports (field-sizing: content){
2293
- .tds-input.tds-textarea--resize-auto textarea{
2294
- field-sizing:content;
2295
- resize:none;
2329
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2330
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2296
2331
  }
2332
+
2333
+ .tds-radio-group:has(input:required) legend::after{
2334
+ margin-left:.25ch;
2335
+ color:var(--t-text-color-status-error);
2336
+ content:"*";
2297
2337
  }
2298
2338
 
2299
- .tds-input textarea{
2300
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2301
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2302
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2303
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2304
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2305
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2306
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2307
- --tds-input-scrollbar-thumb-border-radius:999px;
2308
- --tds-input-scrollbar-thumb-border-width:3px;
2309
- --tds-input-scrollbar-track-margin-block:.125rem;
2310
- scrollbar-color:initial;
2311
- transition-timing-function:var(--t-ease-in-out);
2312
- transition-duration:var(--t-duration-200);
2313
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2339
+ .tds-radio-group-fields{
2340
+ display:flex;
2341
+ flex-direction:column;
2342
+ gap:var(--tds-radio-group-gap);
2343
+ align-items:flex-start;
2344
+ margin-top:var(--t-spacing-1);
2314
2345
  }
2315
2346
 
2316
- @media (pointer: fine){
2317
- :is(.tds-input textarea)::-webkit-scrollbar{
2318
- width:12px;
2319
- height:12px;
2320
- cursor:default;
2347
+ .tds-radio-group-description{
2348
+ display:flex;
2349
+ gap:var(--t-spacing-half);
2350
+ align-items:flex-start;
2351
+ margin:var(--t-spacing-fourth) 0 0;
2352
+ font-size:var(--tds-radio-group-description-font-size);
2353
+ line-height:var(--tds-radio-group-description-line-height);
2354
+ color:var(--tds-radio-group-description-color);
2355
+ cursor:text;
2356
+ }
2357
+
2358
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2359
+ display:var(--tds-radio-group-description-invalid-icon-display);
2360
+ flex-shrink:0;
2361
+ margin-top:calc(.5lh - .5em);
2362
+ line-height:var(--tds-radio-group-description-line-height);
2363
+ }
2364
+
2365
+ .tds-radio-group--sm{
2366
+ --tds-radio-group-line-height:1.35;
2367
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2368
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2369
+ --tds-radio-group-description-line-height:1.3;
2370
+ }
2371
+
2372
+ .tds-loading-spinner{
2373
+ position:absolute;
2374
+ right:0;
2375
+ left:0;
2376
+ visibility:var(--tds-loading-spinner-visibility, hidden);
2377
+ width:var(--tds-loading-spinner-size, 1.25em);
2378
+ height:var(--tds-loading-spinner-size, 1.25em);
2379
+ margin:auto;
2380
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2381
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
2382
+ border-radius:50%;
2383
+ animation:spinner-rotate 500ms infinite linear;
2384
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2385
+ }
2386
+
2387
+ @keyframes spinner-rotate{
2388
+ to{
2389
+ transform:rotate(360deg);
2390
+ }
2391
+ }
2392
+
2393
+ @media (prefers-reduced-motion: reduce){
2394
+ [class*="--loading"] .tds-loading-spinner{
2395
+ --tds-loading-spinner-animation-play-state:paused;
2396
+ }
2397
+ }
2398
+
2399
+ .tds-input{
2400
+ --tds-input-border-color:var(--t-form-border-color);
2401
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2402
+ --tds-input-background-color:var(--t-form-background-color);
2403
+ --tds-input-color:var(--t-form-color);
2404
+ --tds-input-font-size:var(--t-font-size-md);
2405
+ --tds-input-description-color:var(--t-text-color-secondary);
2406
+ --tds-input-description-invalid-icon-display:none;
2407
+ --tds-input-min-height:var(--t-container-size-md);
2408
+ --tds-input-padding-inline:var(--t-spacing-1);
2409
+
2410
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2411
+
2412
+ display:flex;
2413
+ flex-direction:column;
2414
+ gap:var(--t-spacing-half);
2415
+ }
2416
+
2417
+ .tds-input label{
2418
+ font-size:var(--t-font-size-md);
2419
+ font-weight:var(--t-font-weight-normal);
2420
+ color:var(--t-text-color);
2421
+ }
2422
+
2423
+ .tds-input :is(input,textarea){
2424
+ inline-size:100%;
2425
+ block-size:auto;
2426
+ min-block-size:var(--tds-input-min-height);
2427
+ padding-block:var(--tds-input-padding-block);
2428
+ padding-inline:var(--tds-input-padding-inline);
2429
+ font-family:inherit;
2430
+ font-size:var(--tds-input-font-size);
2431
+ color:var(--tds-input-color);
2432
+ -webkit-appearance:none;
2433
+ -moz-appearance:none;
2434
+ appearance:none;
2435
+ outline:var(--t-focus-ring-width) solid transparent;
2436
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2437
+ outline-offset:0;
2438
+ background-color:var(--tds-input-background-color);
2439
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2440
+ border-radius:var(--t-form-border-radius);
2441
+ transition-timing-function:var(--t-ease-in-out);
2442
+ transition-duration:var(--t-duration-200);
2443
+ transition-property:var(--tds-input-transition-property);
2444
+ }
2445
+
2446
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2447
+ border-color:var(--tds-input-border-color-hover);
2321
2448
  }
2322
2449
 
2323
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2324
- cursor:default;
2325
- background:var(--tds-input-scrollbar-thumb-color);
2326
- background-clip:content-box;
2327
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2328
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2450
+ :is(.tds-input :is(input,textarea)):focus{
2451
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2329
2452
  }
2330
2453
 
2331
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2332
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2454
+ :is(.tds-input :is(input,textarea)):focus-visible{
2455
+ outline-color:var(--t-focus-ring-color);
2456
+ outline-offset:var(--t-focus-ring-offset);
2457
+ border-color:var(--t-form-border-color-focus);
2458
+ }
2459
+
2460
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2461
+ color:var(--t-form-placeholder-color);
2462
+ -moz-user-select:none;
2463
+ user-select:none;
2464
+ }
2465
+
2466
+ :is(.tds-input :is(input,textarea))::placeholder{
2467
+ color:var(--t-form-placeholder-color);
2468
+ -webkit-user-select:none;
2469
+ -moz-user-select:none;
2470
+ user-select:none;
2333
2471
  }
2334
2472
 
2335
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2336
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2473
+ @media (prefers-reduced-motion: reduce){
2474
+
2475
+ .tds-input :is(input,textarea){
2476
+ --tds-input-transition-property:none;
2477
+ }
2478
+ }
2479
+
2480
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2481
+ --tds-input-background-color:var(--t-form-background-color-error);
2482
+ --tds-input-border-color:var(--t-form-border-color-error);
2483
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2484
+ --tds-input-description-color:var(--t-text-color-status-error);
2485
+ --tds-input-description-invalid-icon-display:inline-block;
2486
+ }
2487
+
2488
+ .tds-input:has(:is(input,textarea):required) label::after{
2489
+ margin-left:.25ch;
2490
+ color:var(--t-text-color-status-error);
2491
+ content:"*";
2337
2492
  }
2338
2493
 
2339
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2340
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2341
- }
2494
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2495
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2496
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2497
+ --tds-input-color:var(--t-form-color-disabled);
2498
+ }
2342
2499
 
2343
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2344
- background:var(--tds-input-scrollbar-surface-color);
2500
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2501
+ cursor:not-allowed;
2345
2502
  }
2346
2503
 
2347
- :is(.tds-input textarea)::-webkit-resizer{
2348
- background:var(--tds-input-resizer-icon) no-repeat;
2349
- background-position:right bottom;
2350
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2351
- }
2504
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2505
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2506
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2507
+ }
2352
2508
 
2353
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2354
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2355
- cursor:default;
2509
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2510
+ border-color:var(--tds-input-border-color-hover);
2356
2511
  }
2357
2512
 
2358
- @supports (-moz-appearance: none){
2359
- :is(.tds-input textarea){
2360
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2361
- scrollbar-width:thin;
2362
- }
2513
+ .tds-input.tds-input--lg{
2514
+ --tds-input-min-height:var(--t-container-size-lg);
2515
+ --tds-input-font-size:var(--t-font-size-lg);
2516
+ }
2363
2517
 
2364
- @media (hover){
2365
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2366
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2367
- }
2368
- }
2369
- }
2518
+ .tds-input-description{
2519
+ display:flex;
2520
+ gap:var(--t-spacing-half);
2521
+ align-items:flex-start;
2522
+ margin:0;
2523
+ font-size:var(--t-font-size-sm);
2524
+ line-height:1.35;
2525
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2526
+ cursor:text;
2527
+ }
2528
+
2529
+ .tds-input-description .tds-input-description-invalid-icon{
2530
+ display:var(--tds-input-description-invalid-icon-display, none);
2531
+ flex-shrink:0;
2532
+ margin-block-start:calc(.5lh - .5em);
2533
+ line-height:1.35;
2370
2534
  }
2371
2535
 
2372
2536
  @layer t-critical{
@@ -2647,170 +2811,6 @@ a.tds-dropdown-item:is(:hover, :active){
2647
2811
  }
2648
2812
  }
2649
2813
 
2650
- .tds-loading-spinner{
2651
- position:absolute;
2652
- right:0;
2653
- left:0;
2654
- visibility:var(--tds-loading-spinner-visibility, hidden);
2655
- width:var(--tds-loading-spinner-size, 1.25em);
2656
- height:var(--tds-loading-spinner-size, 1.25em);
2657
- margin:auto;
2658
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2659
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2660
- border-radius:50%;
2661
- animation:spinner-rotate 500ms infinite linear;
2662
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2663
- }
2664
-
2665
- @keyframes spinner-rotate{
2666
- to{
2667
- transform:rotate(360deg);
2668
- }
2669
- }
2670
-
2671
- @media (prefers-reduced-motion: reduce){
2672
- [class*="--loading"] .tds-loading-spinner{
2673
- --tds-loading-spinner-animation-play-state:paused;
2674
- }
2675
- }
2676
-
2677
- .tds-input{
2678
- --tds-input-border-color:var(--t-form-border-color);
2679
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2680
- --tds-input-background-color:var(--t-form-background-color);
2681
- --tds-input-color:var(--t-form-color);
2682
- --tds-input-font-size:var(--t-font-size-md);
2683
- --tds-input-description-color:var(--t-text-color-secondary);
2684
- --tds-input-description-invalid-icon-display:none;
2685
- --tds-input-min-height:var(--t-container-size-md);
2686
- --tds-input-padding-inline:var(--t-spacing-1);
2687
-
2688
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2689
-
2690
- display:flex;
2691
- flex-direction:column;
2692
- gap:var(--t-spacing-half);
2693
- }
2694
-
2695
- .tds-input label{
2696
- font-size:var(--t-font-size-md);
2697
- font-weight:var(--t-font-weight-normal);
2698
- color:var(--t-text-color);
2699
- }
2700
-
2701
- .tds-input :is(input,textarea){
2702
- inline-size:100%;
2703
- block-size:auto;
2704
- min-block-size:var(--tds-input-min-height);
2705
- padding-block:var(--tds-input-padding-block);
2706
- padding-inline:var(--tds-input-padding-inline);
2707
- font-family:inherit;
2708
- font-size:var(--tds-input-font-size);
2709
- color:var(--tds-input-color);
2710
- -webkit-appearance:none;
2711
- -moz-appearance:none;
2712
- appearance:none;
2713
- outline:var(--t-focus-ring-width) solid transparent;
2714
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2715
- outline-offset:0;
2716
- background-color:var(--tds-input-background-color);
2717
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2718
- border-radius:var(--t-form-border-radius);
2719
- transition-timing-function:var(--t-ease-in-out);
2720
- transition-duration:var(--t-duration-200);
2721
- transition-property:var(--tds-input-transition-property);
2722
- }
2723
-
2724
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2725
- border-color:var(--tds-input-border-color-hover);
2726
- }
2727
-
2728
- :is(.tds-input :is(input,textarea)):focus{
2729
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2730
- }
2731
-
2732
- :is(.tds-input :is(input,textarea)):focus-visible{
2733
- outline-color:var(--t-focus-ring-color);
2734
- outline-offset:var(--t-focus-ring-offset);
2735
- border-color:var(--t-form-border-color-focus);
2736
- }
2737
-
2738
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2739
- color:var(--t-form-placeholder-color);
2740
- -moz-user-select:none;
2741
- user-select:none;
2742
- }
2743
-
2744
- :is(.tds-input :is(input,textarea))::placeholder{
2745
- color:var(--t-form-placeholder-color);
2746
- -webkit-user-select:none;
2747
- -moz-user-select:none;
2748
- user-select:none;
2749
- }
2750
-
2751
- @media (prefers-reduced-motion: reduce){
2752
-
2753
- .tds-input :is(input,textarea){
2754
- --tds-input-transition-property:none;
2755
- }
2756
- }
2757
-
2758
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2759
- --tds-input-background-color:var(--t-form-background-color-error);
2760
- --tds-input-border-color:var(--t-form-border-color-error);
2761
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2762
- --tds-input-description-color:var(--t-text-color-status-error);
2763
- --tds-input-description-invalid-icon-display:inline-block;
2764
- }
2765
-
2766
- .tds-input:has(:is(input,textarea):required) label::after{
2767
- margin-left:.25ch;
2768
- color:var(--t-text-color-status-error);
2769
- content:"*";
2770
- }
2771
-
2772
- .tds-input:where(:has(:is(input,textarea):disabled)){
2773
- --tds-input-border-color:var(--t-form-border-color-disabled);
2774
- --tds-input-background-color:var(--t-form-background-color-disabled);
2775
- --tds-input-color:var(--t-form-color-disabled);
2776
- }
2777
-
2778
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2779
- cursor:not-allowed;
2780
- }
2781
-
2782
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2783
- --tds-input-border-color:var(--t-form-border-color-readonly);
2784
- --tds-input-background-color:var(--t-form-background-color-readonly);
2785
- }
2786
-
2787
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2788
- border-color:var(--tds-input-border-color-hover);
2789
- }
2790
-
2791
- .tds-input.tds-input--lg{
2792
- --tds-input-min-height:var(--t-container-size-lg);
2793
- --tds-input-font-size:var(--t-font-size-lg);
2794
- }
2795
-
2796
- .tds-input-description{
2797
- display:flex;
2798
- gap:var(--t-spacing-half);
2799
- align-items:flex-start;
2800
- margin:0;
2801
- font-size:var(--t-font-size-sm);
2802
- line-height:1.35;
2803
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2804
- cursor:text;
2805
- }
2806
-
2807
- .tds-input-description .tds-input-description-invalid-icon{
2808
- display:var(--tds-input-description-invalid-icon-display, none);
2809
- flex-shrink:0;
2810
- margin-block-start:calc(.5lh - .5em);
2811
- line-height:1.35;
2812
- }
2813
-
2814
2814
  @layer t-critical, t-component;
2815
2815
 
2816
2816
  :root{
@@ -4633,6 +4633,16 @@ a.tds-dropdown-item:is(:hover, :active){
4633
4633
  .tds-data-table-row:last-of-type .tds-data-table-cell{
4634
4634
  border-bottom-width:0;
4635
4635
  }
4636
+ .tds-data-table-row--interactive{
4637
+ --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4638
+ }
4639
+ .tds-data-table-row--interactive[data-hovered]{
4640
+ background-color:var(--tds-data-table-row-background-hover);
4641
+ }
4642
+ .tds-data-table-row--interactive[data-focus-visible]{
4643
+ outline:var(--t-focus-ring-outline);
4644
+ outline-offset:calc(-1 * var(--t-focus-ring-width));
4645
+ }
4636
4646
  .tds-data-table-empty{
4637
4647
  padding:var(--tds-data-table-cell-padding-block);
4638
4648
  padding-inline:var(--tds-data-table-cell-padding-inline);
@@ -4698,6 +4708,40 @@ a.tds-dropdown-item:is(:hover, :active){
4698
4708
  .tds-data-table-cell--numeric{
4699
4709
  font-variant-numeric:tabular-nums;
4700
4710
  }
4711
+ .tds-data-table-selectable-checkbox{
4712
+ position:relative;
4713
+ display:inline-block;
4714
+ width:1em;
4715
+ height:1em;
4716
+ vertical-align:middle;
4717
+ cursor:pointer;
4718
+ border:var(--t-form-border-width) solid var(--t-form-border-color);
4719
+ border-radius:var(--t-border-radius-sm);
4720
+ }
4721
+ .tds-data-table-selectable-checkbox::before{
4722
+ position:absolute;
4723
+ inset:0;
4724
+ display:flex;
4725
+ visibility:hidden;
4726
+ align-items:center;
4727
+ justify-content:center;
4728
+ content:"";
4729
+ opacity:0;
4730
+ }
4731
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
4732
+ outline:var(--t-focus-ring-outline);
4733
+ outline-offset:var(--t-focus-ring-offset);
4734
+ }
4735
+ :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4736
+ visibility:visible;
4737
+ opacity:1;
4738
+ }
4739
+ .tds-data-table-selectable-checkbox[data-selected]::before{
4740
+ content:"✅";
4741
+ }
4742
+ .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4743
+ content:"➖";
4744
+ }
4701
4745
 
4702
4746
  .t-banner{
4703
4747
  --t-banner-font-size:var(--t-font-size-md);