@planningcenter/tapestry 4.10.0-rc.4 → 4.10.0-rc.5

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.
@@ -1316,225 +1316,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1316
1316
  }
1317
1317
  }
1318
1318
 
1319
- .tds-checkbox-group{
1320
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1321
- --tds-checkbox-group-line-height:1.4;
1322
- --tds-checkbox-group-gap:var(--t-spacing-1);
1323
-
1324
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1325
- --tds-checkbox-group-description-line-height:1.35;
1326
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1327
- --tds-checkbox-group-description-invalid-icon-display:none;
1328
- display:flex;
1329
- flex-direction:column;
1330
- gap:0;
1331
- padding:0;
1332
- margin:0;
1333
-
1334
- font-size:var(--tds-checkbox-group-font-size);
1335
- line-height:var(--tds-checkbox-group-line-height);
1336
- border:0;
1337
- }
1338
-
1339
- .tds-checkbox-group legend{
1340
- float:left;
1341
- padding:0;
1342
- margin:0;
1343
- }
1344
-
1345
- .tds-checkbox-group[aria-invalid="true"]{
1346
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1347
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1348
- }
1349
-
1350
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1351
- margin-left:.25ch;
1352
- color:var(--t-text-color-status-error);
1353
- content:"*";
1354
- }
1355
-
1356
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1357
- content:none;
1358
- }
1359
-
1360
- .tds-checkbox-group-fields{
1361
- display:flex;
1362
- flex-direction:column;
1363
- gap:var(--tds-checkbox-group-gap);
1364
- align-items:flex-start;
1365
- margin-top:var(--t-spacing-1);
1366
- }
1367
-
1368
- .tds-checkbox-group-description{
1369
- display:flex;
1370
- gap:var(--t-spacing-half);
1371
- align-items:flex-start;
1372
- margin:var(--t-spacing-fourth) 0 0;
1373
- font-size:var(--tds-checkbox-group-description-font-size);
1374
- line-height:var(--tds-checkbox-group-description-line-height);
1375
- color:var(--tds-checkbox-group-description-color);
1376
- cursor:text;
1377
- }
1378
-
1379
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1380
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1381
- flex-shrink:0;
1382
- margin-top:calc(.5lh - .5em);
1383
- line-height:var(--tds-checkbox-group-description-line-height);
1384
- }
1385
-
1386
- .tds-checkbox-group--sm{
1387
- --tds-checkbox-group-line-height:1.35;
1388
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1389
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1390
- --tds-checkbox-group-description-line-height:1.3;
1391
- }
1392
-
1393
- .tds-button-group{
1394
- display:inline-flex;
1395
- }
1396
- .tds-button-group > .tds-btn{
1397
- --tds-button-group-item-z-index:1;
1398
-
1399
- position:relative;
1400
- z-index:var(--tds-button-group-item-z-index);
1401
- border-radius:0;
1402
- }
1403
- :is(.tds-button-group > .tds-btn):not(:first-child){
1404
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1405
- }
1406
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1407
- position:absolute;
1408
- inset-block:calc(var(--tds-btn-border-width) * -1);
1409
- width:var(--tds-btn-border-width);
1410
- pointer-events:none;
1411
- content:"";
1412
- background-color:var(--t-border-color-white);
1413
- }
1414
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1415
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1416
- }
1417
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1418
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1419
- }
1420
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1421
- --tds-button-group-item-z-index:2;
1422
- }
1423
- :is(.tds-button-group > .tds-btn):focus-visible{
1424
- --tds-button-group-item-z-index:5;
1425
- }
1426
- .tds-button-group > .tds-btn:first-child{
1427
- border-start-start-radius:var(--tds-btn-border-radius);
1428
- border-end-start-radius:var(--tds-btn-border-radius);
1429
- }
1430
- .tds-button-group > .tds-btn:last-child{
1431
- border-start-end-radius:var(--tds-btn-border-radius);
1432
- border-end-end-radius:var(--tds-btn-border-radius);
1433
- }
1434
-
1435
- .tds-currency-input-control{
1436
- display:flex;
1437
- gap:var(--t-spacing-half);
1438
- align-items:center;
1439
- inline-size:100%;
1440
- min-block-size:var(--tds-field-min-height);
1441
- padding-inline:var(--tds-field-padding-inline);
1442
- font-size:var(--tds-field-font-size);
1443
- color:var(--tds-field-color);
1444
- cursor:text;
1445
- outline:var(--t-focus-ring-width) solid transparent;
1446
- background-color:var(--tds-field-background-color);
1447
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1448
- border-radius:var(--t-form-border-radius);
1449
- transition-timing-function:var(--t-ease-in-out);
1450
- transition-duration:var(--t-duration-200);
1451
- transition-property:background-color, border-color, outline-color, outline-offset;
1452
- }
1453
-
1454
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1455
- border-color:var(--tds-field-border-color-hover);
1456
- }
1457
-
1458
- .tds-currency-input-control:has(input:focus){
1459
- outline-color:var(--t-focus-ring-color);
1460
- outline-offset:var(--t-focus-ring-offset);
1461
- border-color:var(--tds-field-border-color-active);
1462
- }
1463
-
1464
- .tds-currency-input-control input{
1465
- flex:1;
1466
- min-inline-size:0;
1467
- padding:0;
1468
- font-family:inherit;
1469
- font-size:inherit;
1470
- color:inherit;
1471
- -webkit-appearance:none;
1472
- -moz-appearance:none;
1473
- appearance:none;
1474
- outline:0;
1475
- background-color:transparent;
1476
- border:0;
1477
- }
1478
-
1479
- :is(.tds-currency-input-control input)::-moz-placeholder{
1480
- color:var(--tds-field-placeholder-color);
1481
- -moz-user-select:none;
1482
- user-select:none;
1483
- }
1484
-
1485
- :is(.tds-currency-input-control input)::placeholder{
1486
- color:var(--tds-field-placeholder-color);
1487
- -webkit-user-select:none;
1488
- -moz-user-select:none;
1489
- user-select:none;
1490
- }
1491
-
1492
- .tds-currency-input-control .tds-currency-input-prefix{
1493
- flex-shrink:0;
1494
- color:var(--t-text-color-secondary);
1495
- pointer-events:none;
1496
- -webkit-user-select:none;
1497
- -moz-user-select:none;
1498
- user-select:none;
1499
- }
1500
-
1501
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1502
- --tds-field-background-color:var(--t-form-background-color-error);
1503
- --tds-field-border-color:var(--t-form-border-color-error);
1504
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1505
- }
1506
-
1507
- .tds-currency-input-control:has(:disabled){
1508
- --tds-field-border-color:var(--t-form-border-color-disabled);
1509
- --tds-field-background-color:var(--t-form-background-color-disabled);
1510
- --tds-field-color:var(--t-form-color-disabled);
1511
-
1512
- cursor:not-allowed;
1513
- }
1514
-
1515
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1516
- color:var(--tds-field-color);
1517
- }
1518
-
1519
- .tds-currency-input-control:has([readonly]){
1520
- --tds-field-border-color:var(--t-form-border-color-readonly);
1521
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1522
- --tds-field-background-color:var(--t-form-background-color-readonly);
1523
- --tds-field-color:var(--t-form-color-readonly);
1524
- }
1525
-
1526
- .tds-currency-input-control:has([readonly]):has(input:focus){
1527
- border-color:var(--t-form-border-color-hover);
1528
- }
1529
- .tds-currency-input-currency-name--hidden{
1530
- position:absolute;
1531
- width:1px;
1532
- height:1px;
1533
- overflow:hidden;
1534
- white-space:nowrap;
1535
- clip-path:inset(50%);
1536
- }
1537
-
1538
1319
  .tds-checkbox{
1539
1320
  --tds-checkbox-font-size:var(--t-font-size-md);
1540
1321
  --tds-checkbox-cursor:pointer;
@@ -1730,39 +1511,258 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1730
1511
  --tds-checkbox-description-line-height:1.3;
1731
1512
  }
1732
1513
 
1733
- .tds-modal-overlay{
1734
- --tds-modal-min-margin-block:var(--t-spacing-3);
1735
-
1736
- position:fixed;
1737
- inset:0;
1738
- z-index:1000;
1739
- display:grid;
1740
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1741
- justify-items:center;
1742
- overflow-y:auto;
1743
- background:hsl(0 0% 0% / 40%);
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1744
1516
  }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1745
1519
 
1746
- .tds-modal-overlay[data-entering]{
1747
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1748
- }
1749
-
1750
- .tds-modal-overlay[data-exiting]{
1751
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1752
- }
1753
-
1754
- @keyframes tds-modal-overlay-fade{
1755
- from{
1756
- opacity:0;
1520
+ position:relative;
1521
+ z-index:var(--tds-button-group-item-z-index);
1522
+ border-radius:0;
1757
1523
  }
1758
- }
1759
-
1760
- .tds-modal-frame{
1761
- --tds-modal-width:600px;
1762
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1763
- display:flex;
1764
-
1765
- grid-row:2;
1524
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1525
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
+ }
1527
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1528
+ position:absolute;
1529
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1530
+ width:var(--tds-btn-border-width);
1531
+ pointer-events:none;
1532
+ content:"";
1533
+ background-color:var(--t-border-color-white);
1534
+ }
1535
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1537
+ }
1538
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1540
+ }
1541
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1542
+ --tds-button-group-item-z-index:2;
1543
+ }
1544
+ :is(.tds-button-group > .tds-btn):focus-visible{
1545
+ --tds-button-group-item-z-index:5;
1546
+ }
1547
+ .tds-button-group > .tds-btn:first-child{
1548
+ border-start-start-radius:var(--tds-btn-border-radius);
1549
+ border-end-start-radius:var(--tds-btn-border-radius);
1550
+ }
1551
+ .tds-button-group > .tds-btn:last-child{
1552
+ border-start-end-radius:var(--tds-btn-border-radius);
1553
+ border-end-end-radius:var(--tds-btn-border-radius);
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1565
+ display:flex;
1566
+ flex-direction:column;
1567
+ gap:0;
1568
+ padding:0;
1569
+ margin:0;
1570
+
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1573
+ border:0;
1574
+ }
1575
+
1576
+ .tds-checkbox-group legend{
1577
+ float:left;
1578
+ padding:0;
1579
+ margin:0;
1580
+ }
1581
+
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
+ }
1586
+
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1591
+ }
1592
+
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1595
+ }
1596
+
1597
+ .tds-checkbox-group-fields{
1598
+ display:flex;
1599
+ flex-direction:column;
1600
+ gap:var(--tds-checkbox-group-gap);
1601
+ align-items:flex-start;
1602
+ margin-top:var(--t-spacing-1);
1603
+ }
1604
+
1605
+ .tds-checkbox-group-description{
1606
+ display:flex;
1607
+ gap:var(--t-spacing-half);
1608
+ align-items:flex-start;
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1614
+ }
1615
+
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1621
+ }
1622
+
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1628
+ }
1629
+
1630
+ .tds-currency-input-control{
1631
+ display:flex;
1632
+ gap:var(--t-spacing-half);
1633
+ align-items:center;
1634
+ inline-size:100%;
1635
+ min-block-size:var(--tds-field-min-height);
1636
+ padding-inline:var(--tds-field-padding-inline);
1637
+ font-size:var(--tds-field-font-size);
1638
+ color:var(--tds-field-color);
1639
+ cursor:text;
1640
+ outline:var(--t-focus-ring-width) solid transparent;
1641
+ background-color:var(--tds-field-background-color);
1642
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1643
+ border-radius:var(--t-form-border-radius);
1644
+ transition-timing-function:var(--t-ease-in-out);
1645
+ transition-duration:var(--t-duration-200);
1646
+ transition-property:background-color, border-color, outline-color, outline-offset;
1647
+ }
1648
+
1649
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1650
+ border-color:var(--tds-field-border-color-hover);
1651
+ }
1652
+
1653
+ .tds-currency-input-control:has(input:focus){
1654
+ outline-color:var(--t-focus-ring-color);
1655
+ outline-offset:var(--t-focus-ring-offset);
1656
+ border-color:var(--tds-field-border-color-active);
1657
+ }
1658
+
1659
+ .tds-currency-input-control input{
1660
+ flex:1;
1661
+ min-inline-size:0;
1662
+ padding:0;
1663
+ font-family:inherit;
1664
+ font-size:inherit;
1665
+ color:inherit;
1666
+ -webkit-appearance:none;
1667
+ -moz-appearance:none;
1668
+ appearance:none;
1669
+ outline:0;
1670
+ background-color:transparent;
1671
+ border:0;
1672
+ }
1673
+
1674
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1675
+ color:var(--tds-field-placeholder-color);
1676
+ -moz-user-select:none;
1677
+ user-select:none;
1678
+ }
1679
+
1680
+ :is(.tds-currency-input-control input)::placeholder{
1681
+ color:var(--tds-field-placeholder-color);
1682
+ -webkit-user-select:none;
1683
+ -moz-user-select:none;
1684
+ user-select:none;
1685
+ }
1686
+
1687
+ .tds-currency-input-control .tds-currency-input-prefix{
1688
+ flex-shrink:0;
1689
+ color:var(--t-text-color-secondary);
1690
+ pointer-events:none;
1691
+ -webkit-user-select:none;
1692
+ -moz-user-select:none;
1693
+ user-select:none;
1694
+ }
1695
+
1696
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1697
+ --tds-field-background-color:var(--t-form-background-color-error);
1698
+ --tds-field-border-color:var(--t-form-border-color-error);
1699
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1700
+ }
1701
+
1702
+ .tds-currency-input-control:has(:disabled){
1703
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1704
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1705
+ --tds-field-color:var(--t-form-color-disabled);
1706
+
1707
+ cursor:not-allowed;
1708
+ }
1709
+
1710
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1711
+ color:var(--tds-field-color);
1712
+ }
1713
+
1714
+ .tds-currency-input-control:has([readonly]){
1715
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1716
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1717
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1718
+ --tds-field-color:var(--t-form-color-readonly);
1719
+ }
1720
+
1721
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1722
+ border-color:var(--t-form-border-color-hover);
1723
+ }
1724
+ .tds-currency-input-currency-name--hidden{
1725
+ position:absolute;
1726
+ width:1px;
1727
+ height:1px;
1728
+ overflow:hidden;
1729
+ white-space:nowrap;
1730
+ clip-path:inset(50%);
1731
+ }
1732
+
1733
+ .tds-modal-overlay{
1734
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1735
+
1736
+ position:fixed;
1737
+ inset:0;
1738
+ z-index:1000;
1739
+ display:grid;
1740
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1741
+ justify-items:center;
1742
+ overflow-y:auto;
1743
+ background:hsl(0 0% 0% / 40%);
1744
+ }
1745
+
1746
+ .tds-modal-overlay[data-entering]{
1747
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1748
+ }
1749
+
1750
+ .tds-modal-overlay[data-exiting]{
1751
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1752
+ }
1753
+
1754
+ @keyframes tds-modal-overlay-fade{
1755
+ from{
1756
+ opacity:0;
1757
+ }
1758
+ }
1759
+
1760
+ .tds-modal-frame{
1761
+ --tds-modal-width:600px;
1762
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1763
+ display:flex;
1764
+
1765
+ grid-row:2;
1766
1766
  justify-content:center;
1767
1767
  width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1768
1768
  }
@@ -1893,113 +1893,87 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1893
1893
  }
1894
1894
  }
1895
1895
 
1896
+ .tds-radio-group{
1897
+ --tds-radio-group-font-size:var(--t-font-size-md);
1898
+ --tds-radio-group-line-height:1.4;
1899
+ --tds-radio-group-gap:var(--t-spacing-1);
1896
1900
 
1897
- :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{
1898
- -webkit-appearance:none;
1899
- appearance:none;
1900
- }
1901
-
1902
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1903
- inline-size:1em;
1904
- block-size:2em;
1905
- }
1901
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1902
+ --tds-radio-group-description-line-height:1.35;
1903
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1904
+ --tds-radio-group-description-invalid-icon-display:none;
1905
+ display:flex;
1906
+ flex-direction:column;
1907
+ gap:0;
1908
+ padding:0;
1909
+ margin:0;
1906
1910
 
1907
- [type="file"]:is(.tds-input input){
1908
- padding-block:var(--t-spacing-half);
1909
- padding-inline-start:var(--t-spacing-half);
1910
- }
1911
+ font-size:var(--tds-radio-group-font-size);
1912
+ line-height:var(--tds-radio-group-line-height);
1913
+ border:0;
1914
+ }
1911
1915
 
1912
- [type="file"]:is(.tds-input input):not(:disabled){
1913
- color:var(--t-text-color-secondary);
1914
- }
1916
+ .tds-radio-group legend{
1917
+ float:left;
1918
+ padding:0;
1919
+ margin:0;
1920
+ }
1915
1921
 
1916
- [type="file"]:is(.tds-input input)::file-selector-button{
1917
- --_file-btn-padding-block:3px;
1922
+ .tds-radio-group[aria-invalid="true"]{
1923
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1924
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1925
+ }
1918
1926
 
1919
- padding-block:var(--_file-btn-padding-block);
1920
- padding-inline:12px;
1921
- margin-inline-end:12px;
1922
- font:inherit;
1923
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1924
- color:var(--t-text-color-status-neutral);
1925
- cursor:pointer;
1926
- background-color:var(--t-fill-color-button-neutral-solid);
1927
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1928
- border-radius:var(--t-border-radius-md);
1929
- transition-timing-function:var(--t-ease-in-out);
1930
- transition-duration:var(--t-duration-200);
1931
- transition-property:color, background-color, border-color;
1932
- }
1927
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1928
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1929
+ }
1933
1930
 
1934
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1935
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1936
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1931
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1932
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1933
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1937
1934
  }
1938
1935
 
1939
- [type="file"]:is(.tds-input input):active::file-selector-button{
1940
- background-color:var(--t-fill-color-button-neutral-solid-active);
1941
- border-color:var(--t-fill-color-button-neutral-solid-active);
1936
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1937
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1942
1938
  }
1943
1939
 
1944
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1945
- color:var(--t-text-color-disabled);
1946
- pointer-events:none;
1947
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1948
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1949
- }
1950
- @supports (field-sizing: content){
1951
- .tds-input--auto-width{
1952
- inline-size:-moz-fit-content;
1953
- inline-size:fit-content;
1954
- min-inline-size:min(100%, 122px);
1955
- }
1940
+ .tds-radio-group:has(input:required) legend::after{
1941
+ margin-left:.25ch;
1942
+ color:var(--t-text-color-status-error);
1943
+ content:"*";
1944
+ }
1956
1945
 
1957
- .tds-input--auto-width input{
1958
- field-sizing:content;
1959
- inline-size:auto;
1960
- }
1946
+ .tds-radio-group-fields{
1947
+ display:flex;
1948
+ flex-direction:column;
1949
+ gap:var(--tds-radio-group-gap);
1950
+ align-items:flex-start;
1951
+ margin-top:var(--t-spacing-1);
1961
1952
  }
1962
1953
 
1963
- .tds-popover{
1964
- max-inline-size:24rem;
1965
- overflow:auto;
1966
- overscroll-behavior:none;
1967
- outline:0;
1968
- scrollbar-color:#0004 var(--t-surface-color-card);
1969
- scrollbar-width:thin;
1970
- background:var(--t-surface-color-card);
1971
- background-clip:padding-box;
1972
- border:1px solid var(--t-border-color);
1973
- border-radius:var(--t-border-radius);
1974
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1954
+ .tds-radio-group-description{
1955
+ display:flex;
1956
+ gap:var(--t-spacing-half);
1957
+ align-items:flex-start;
1958
+ margin:var(--t-spacing-fourth) 0 0;
1959
+ font-size:var(--tds-radio-group-description-font-size);
1960
+ line-height:var(--tds-radio-group-description-line-height);
1961
+ color:var(--tds-radio-group-description-color);
1962
+ cursor:text;
1975
1963
  }
1976
1964
 
1977
- @media (prefers-reduced-motion: no-preference){
1978
- .tds-popover[data-entering]{
1979
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1980
- }
1981
-
1982
- .tds-popover[data-exiting]{
1983
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1984
- }
1985
-
1986
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1987
- will-change:opacity, transform;
1988
- }
1989
-
1990
- @keyframes tds-popover{
1991
- from{
1992
- opacity:0;
1993
- transform:translateY(-8px);
1994
- }
1965
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1966
+ display:var(--tds-radio-group-description-invalid-icon-display);
1967
+ flex-shrink:0;
1968
+ margin-top:calc(.5lh - .5em);
1969
+ line-height:var(--tds-radio-group-description-line-height);
1995
1970
  }
1996
- }
1997
1971
 
1998
- .tds-popover-content{
1999
- display:flex;
2000
- flex-direction:column;
2001
- padding:var(--t-spacing-1);
2002
- outline:0;
1972
+ .tds-radio-group--sm{
1973
+ --tds-radio-group-line-height:1.35;
1974
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1975
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1976
+ --tds-radio-group-description-line-height:1.3;
2003
1977
  }
2004
1978
 
2005
1979
  .tds-radio{
@@ -2135,87 +2109,218 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2135
2109
  --tds-radio-description-line-height:1.3;
2136
2110
  }
2137
2111
 
2138
- .tds-radio-group{
2139
- --tds-radio-group-font-size:var(--t-font-size-md);
2140
- --tds-radio-group-line-height:1.4;
2141
- --tds-radio-group-gap:var(--t-spacing-1);
2112
+ .tds-popover{
2113
+ max-inline-size:24rem;
2114
+ overflow:auto;
2115
+ overscroll-behavior:none;
2116
+ outline:0;
2117
+ scrollbar-color:#0004 var(--t-surface-color-card);
2118
+ scrollbar-width:thin;
2119
+ background:var(--t-surface-color-card);
2120
+ background-clip:padding-box;
2121
+ border:1px solid var(--t-border-color);
2122
+ border-radius:var(--t-border-radius);
2123
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2124
+ }
2125
+
2126
+ @media (prefers-reduced-motion: no-preference){
2127
+ .tds-popover[data-entering]{
2128
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2129
+ }
2130
+
2131
+ .tds-popover[data-exiting]{
2132
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2133
+ }
2134
+
2135
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2136
+ will-change:opacity, transform;
2137
+ }
2138
+
2139
+ @keyframes tds-popover{
2140
+ from{
2141
+ opacity:0;
2142
+ transform:translateY(-8px);
2143
+ }
2144
+ }
2145
+ }
2146
+
2147
+ .tds-popover-content{
2148
+ display:flex;
2149
+ flex-direction:column;
2150
+ padding:var(--t-spacing-1);
2151
+ outline:0;
2152
+ }
2153
+
2154
+ .tds-input:has(textarea){
2155
+ --tds-input-padding-block:6px;
2156
+ --tds-input-resizer-size:var(--t-element-size-sm);
2157
+ --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");
2158
+ }
2159
+
2160
+ @supports (x: attr(x type(*))){
2161
+
2162
+ .tds-input textarea{
2163
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2164
+ }
2165
+ }
2166
+
2167
+ .tds-input.tds-textarea--resize-vertical textarea{
2168
+ resize:vertical;
2169
+ }
2170
+
2171
+ .tds-input.tds-textarea--resize-none textarea{
2172
+ resize:none;
2173
+ }
2174
+
2175
+ .tds-input.tds-textarea--resize-auto textarea{
2176
+ resize:vertical;
2177
+ }
2178
+
2179
+ @supports (field-sizing: content){
2180
+ .tds-input.tds-textarea--resize-auto textarea{
2181
+ field-sizing:content;
2182
+ resize:none;
2183
+ }
2184
+ }
2185
+
2186
+ .tds-input textarea{
2187
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2188
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2189
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2190
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2191
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2192
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2193
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2194
+ --tds-input-scrollbar-thumb-border-radius:999px;
2195
+ --tds-input-scrollbar-thumb-border-width:3px;
2196
+ --tds-input-scrollbar-track-margin-block:.125rem;
2197
+ scrollbar-color:initial;
2198
+ transition-timing-function:var(--t-ease-in-out);
2199
+ transition-duration:var(--t-duration-200);
2200
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2201
+ }
2202
+
2203
+ @media (pointer: fine){
2204
+ :is(.tds-input textarea)::-webkit-scrollbar{
2205
+ width:12px;
2206
+ height:12px;
2207
+ cursor:default;
2208
+ }
2209
+
2210
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2211
+ cursor:default;
2212
+ background:var(--tds-input-scrollbar-thumb-color);
2213
+ background-clip:content-box;
2214
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2215
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2216
+ }
2217
+
2218
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2219
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2220
+ }
2142
2221
 
2143
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2144
- --tds-radio-group-description-line-height:1.35;
2145
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2146
- --tds-radio-group-description-invalid-icon-display:none;
2147
- display:flex;
2148
- flex-direction:column;
2149
- gap:0;
2150
- padding:0;
2151
- margin:0;
2222
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2223
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2224
+ }
2152
2225
 
2153
- font-size:var(--tds-radio-group-font-size);
2154
- line-height:var(--tds-radio-group-line-height);
2155
- border:0;
2156
- }
2226
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2227
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2228
+ }
2157
2229
 
2158
- .tds-radio-group legend{
2159
- float:left;
2160
- padding:0;
2161
- margin:0;
2162
- }
2230
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2231
+ background:var(--tds-input-scrollbar-surface-color);
2232
+ }
2163
2233
 
2164
- .tds-radio-group[aria-invalid="true"]{
2165
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2166
- --tds-radio-group-description-invalid-icon-display:inline-block;
2167
- }
2234
+ :is(.tds-input textarea)::-webkit-resizer{
2235
+ background:var(--tds-input-resizer-icon) no-repeat;
2236
+ background-position:right bottom;
2237
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2238
+ }
2168
2239
 
2169
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2170
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2240
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2241
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2242
+ cursor:default;
2171
2243
  }
2172
2244
 
2173
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2174
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2175
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2245
+ @supports (-moz-appearance: none){
2246
+ :is(.tds-input textarea){
2247
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2248
+ scrollbar-width:thin;
2176
2249
  }
2177
2250
 
2178
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2179
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2251
+ @media (hover){
2252
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2253
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2254
+ }
2180
2255
  }
2256
+ }
2257
+ }
2181
2258
 
2182
- .tds-radio-group:has(input:required) legend::after{
2183
- margin-left:.25ch;
2184
- color:var(--t-text-color-status-error);
2185
- content:"*";
2259
+
2260
+ :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{
2261
+ -webkit-appearance:none;
2262
+ appearance:none;
2186
2263
  }
2187
2264
 
2188
- .tds-radio-group-fields{
2189
- display:flex;
2190
- flex-direction:column;
2191
- gap:var(--tds-radio-group-gap);
2192
- align-items:flex-start;
2193
- margin-top:var(--t-spacing-1);
2194
- }
2265
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2266
+ inline-size:1em;
2267
+ block-size:2em;
2268
+ }
2195
2269
 
2196
- .tds-radio-group-description{
2197
- display:flex;
2198
- gap:var(--t-spacing-half);
2199
- align-items:flex-start;
2200
- margin:var(--t-spacing-fourth) 0 0;
2201
- font-size:var(--tds-radio-group-description-font-size);
2202
- line-height:var(--tds-radio-group-description-line-height);
2203
- color:var(--tds-radio-group-description-color);
2204
- cursor:text;
2205
- }
2270
+ [type="file"]:is(.tds-input input){
2271
+ padding-block:var(--t-spacing-half);
2272
+ padding-inline-start:var(--t-spacing-half);
2273
+ }
2206
2274
 
2207
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2208
- display:var(--tds-radio-group-description-invalid-icon-display);
2209
- flex-shrink:0;
2210
- margin-top:calc(.5lh - .5em);
2211
- line-height:var(--tds-radio-group-description-line-height);
2275
+ [type="file"]:is(.tds-input input):not(:disabled){
2276
+ color:var(--t-text-color-secondary);
2277
+ }
2278
+
2279
+ [type="file"]:is(.tds-input input)::file-selector-button{
2280
+ --_file-btn-padding-block:3px;
2281
+
2282
+ padding-block:var(--_file-btn-padding-block);
2283
+ padding-inline:12px;
2284
+ margin-inline-end:12px;
2285
+ font:inherit;
2286
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
2287
+ color:var(--t-text-color-status-neutral);
2288
+ cursor:pointer;
2289
+ background-color:var(--t-fill-color-button-neutral-solid);
2290
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
2291
+ border-radius:var(--t-border-radius-md);
2292
+ transition-timing-function:var(--t-ease-in-out);
2293
+ transition-duration:var(--t-duration-200);
2294
+ transition-property:color, background-color, border-color;
2295
+ }
2296
+
2297
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
2298
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
2299
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
2300
+ }
2301
+
2302
+ [type="file"]:is(.tds-input input):active::file-selector-button{
2303
+ background-color:var(--t-fill-color-button-neutral-solid-active);
2304
+ border-color:var(--t-fill-color-button-neutral-solid-active);
2305
+ }
2306
+
2307
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
2308
+ color:var(--t-text-color-disabled);
2309
+ pointer-events:none;
2310
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
2311
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
2312
+ }
2313
+ @supports (field-sizing: content){
2314
+ .tds-input--auto-width{
2315
+ inline-size:-moz-fit-content;
2316
+ inline-size:fit-content;
2317
+ min-inline-size:min(100%, 122px);
2212
2318
  }
2213
2319
 
2214
- .tds-radio-group--sm{
2215
- --tds-radio-group-line-height:1.35;
2216
- --tds-radio-group-font-size:var(--t-font-size-sm);
2217
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2218
- --tds-radio-group-description-line-height:1.3;
2320
+ .tds-input--auto-width input{
2321
+ field-sizing:content;
2322
+ inline-size:auto;
2323
+ }
2219
2324
  }
2220
2325
 
2221
2326
  .tds-toggle-switch{
@@ -2354,114 +2459,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2354
2459
  --tds-toggle-switch-description-line-height:1.3;
2355
2460
  }
2356
2461
 
2357
- .tds-toggle-switch--hide-label{
2358
- --tds-toggle-switch-display:inline-flex;
2359
- }
2360
-
2361
- .tds-input:has(textarea){
2362
- --tds-input-padding-block:6px;
2363
- --tds-input-resizer-size:var(--t-element-size-sm);
2364
- --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");
2365
- }
2366
-
2367
- @supports (x: attr(x type(*))){
2368
-
2369
- .tds-input textarea{
2370
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2371
- }
2372
- }
2373
-
2374
- .tds-input.tds-textarea--resize-vertical textarea{
2375
- resize:vertical;
2376
- }
2377
-
2378
- .tds-input.tds-textarea--resize-none textarea{
2379
- resize:none;
2380
- }
2381
-
2382
- .tds-input.tds-textarea--resize-auto textarea{
2383
- resize:vertical;
2384
- }
2385
-
2386
- @supports (field-sizing: content){
2387
- .tds-input.tds-textarea--resize-auto textarea{
2388
- field-sizing:content;
2389
- resize:none;
2390
- }
2391
- }
2392
-
2393
- .tds-input textarea{
2394
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2395
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2396
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2397
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2398
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2399
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2400
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2401
- --tds-input-scrollbar-thumb-border-radius:999px;
2402
- --tds-input-scrollbar-thumb-border-width:3px;
2403
- --tds-input-scrollbar-track-margin-block:.125rem;
2404
- scrollbar-color:initial;
2405
- transition-timing-function:var(--t-ease-in-out);
2406
- transition-duration:var(--t-duration-200);
2407
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2408
- }
2409
-
2410
- @media (pointer: fine){
2411
- :is(.tds-input textarea)::-webkit-scrollbar{
2412
- width:12px;
2413
- height:12px;
2414
- cursor:default;
2415
- }
2416
-
2417
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2418
- cursor:default;
2419
- background:var(--tds-input-scrollbar-thumb-color);
2420
- background-clip:content-box;
2421
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2422
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2423
- }
2424
-
2425
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2426
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2427
- }
2428
-
2429
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2430
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2431
- }
2432
-
2433
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2434
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2435
- }
2436
-
2437
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2438
- background:var(--tds-input-scrollbar-surface-color);
2439
- }
2440
-
2441
- :is(.tds-input textarea)::-webkit-resizer{
2442
- background:var(--tds-input-resizer-icon) no-repeat;
2443
- background-position:right bottom;
2444
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2445
- }
2446
-
2447
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2448
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2449
- cursor:default;
2450
- }
2451
-
2452
- @supports (-moz-appearance: none){
2453
- :is(.tds-input textarea){
2454
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2455
- scrollbar-width:thin;
2456
- }
2457
-
2458
- @media (hover){
2459
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2460
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2461
- }
2462
- }
2463
- }
2464
- }
2462
+ .tds-toggle-switch--hide-label{
2463
+ --tds-toggle-switch-display:inline-flex;
2464
+ }
2465
2465
 
2466
2466
  .tds-input{
2467
2467
  --tds-input-border-color:var(--t-form-border-color);
@@ -4787,6 +4787,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4787
4787
  padding-inline-start:var(--t-spacing-half);
4788
4788
  }
4789
4789
 
4790
+ .tds-pane{
4791
+ --tds-pane-background-color:var(--t-surface-color-card);
4792
+ --tds-pane-border-radius:var(--t-border-radius-lg);
4793
+ --tds-pane-border-color:var(--t-border-color);
4794
+
4795
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
4796
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4797
+
4798
+ --tds-pane-title-color:var(--t-text-color-headline);
4799
+ --tds-pane-title-font-size:var(--t-font-size-lg);
4800
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
4801
+ --tds-pane-title-line-height:1.4;
4802
+
4803
+ --tds-pane-body-padding:var(--t-spacing-3);
4804
+
4805
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
4806
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4807
+
4808
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4809
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4810
+
4811
+ background:var(--tds-pane-background-color);
4812
+ border-radius:var(--tds-pane-border-radius);
4813
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
4814
+ display:flex;
4815
+ flex-direction:column;
4816
+ }
4817
+
4818
+ .tds-pane-header{
4819
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4820
+ padding-block:var(--tds-pane-header-padding-block);
4821
+ padding-inline:var(--tds-pane-header-padding-inline);
4822
+ }
4823
+
4824
+ .tds-pane-header > .tds-helper-shelf-trigger{
4825
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4826
+ }
4827
+
4828
+ .tds-pane-header > .tds-helper-shelf{
4829
+ flex-basis:100%;
4830
+ order:1;
4831
+ }
4832
+
4833
+ .tds-pane-header:has( > .tds-helper-shelf){
4834
+ row-gap:var(--tds-pane-header-padding-block);
4835
+ padding-block-end:0;
4836
+ }
4837
+
4838
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4839
+ font-size:var(--t-font-size-md);
4840
+ margin-block-end:var(--tds-pane-header-padding-block);
4841
+ }
4842
+
4843
+ .tds-pane-title{
4844
+ color:var(--tds-pane-title-color);
4845
+ font-size:var(--tds-pane-title-font-size);
4846
+ font-weight:var(--tds-pane-title-font-weight);
4847
+ line-height:var(--tds-pane-title-line-height);
4848
+ margin:0;
4849
+ }
4850
+
4851
+ .tds-pane-body{
4852
+ padding:var(--tds-pane-body-padding);
4853
+ }
4854
+
4855
+ .tds-pane-footer{
4856
+ padding-block-end:var(--tds-pane-footer-padding-block);
4857
+ padding-inline:var(--tds-pane-footer-padding-inline);
4858
+ }
4859
+
4860
+ .tds-pane-divider{
4861
+ border:0;
4862
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4863
+ margin-block:var(--tds-pane-divider-margin-block);
4864
+ margin-inline:var(--tds-pane-divider-margin-inline);
4865
+ }
4866
+
4790
4867
  .tds-data-table-filters-shelf{
4791
4868
  height:auto;
4792
4869
  overflow:hidden;
@@ -5095,83 +5172,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5095
5172
  --tds-segmented-control-background-color-disabled:transparent;
5096
5173
  }
5097
5174
 
5098
- .tds-pane{
5099
- --tds-pane-background-color:var(--t-surface-color-card);
5100
- --tds-pane-border-radius:var(--t-border-radius-lg);
5101
- --tds-pane-border-color:var(--t-border-color);
5102
-
5103
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
5104
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5105
-
5106
- --tds-pane-title-color:var(--t-text-color-headline);
5107
- --tds-pane-title-font-size:var(--t-font-size-lg);
5108
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
5109
- --tds-pane-title-line-height:1.4;
5110
-
5111
- --tds-pane-body-padding:var(--t-spacing-3);
5112
-
5113
- --tds-pane-footer-padding-block:var(--t-spacing-2);
5114
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5115
-
5116
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5117
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5118
-
5119
- background:var(--tds-pane-background-color);
5120
- border-radius:var(--tds-pane-border-radius);
5121
- border:var(--t-border-width) solid var(--tds-pane-border-color);
5122
- display:flex;
5123
- flex-direction:column;
5124
- }
5125
-
5126
- .tds-pane-header{
5127
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5128
- padding-block:var(--tds-pane-header-padding-block);
5129
- padding-inline:var(--tds-pane-header-padding-inline);
5130
- }
5131
-
5132
- .tds-pane-header > .tds-helper-shelf-trigger{
5133
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5134
- }
5135
-
5136
- .tds-pane-header > .tds-helper-shelf{
5137
- flex-basis:100%;
5138
- order:1;
5139
- }
5140
-
5141
- .tds-pane-header:has( > .tds-helper-shelf){
5142
- row-gap:var(--tds-pane-header-padding-block);
5143
- padding-block-end:0;
5144
- }
5145
-
5146
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5147
- font-size:var(--t-font-size-md);
5148
- margin-block-end:var(--tds-pane-header-padding-block);
5149
- }
5150
-
5151
- .tds-pane-title{
5152
- color:var(--tds-pane-title-color);
5153
- font-size:var(--tds-pane-title-font-size);
5154
- font-weight:var(--tds-pane-title-font-weight);
5155
- line-height:var(--tds-pane-title-line-height);
5156
- margin:0;
5157
- }
5158
-
5159
- .tds-pane-body{
5160
- padding:var(--tds-pane-body-padding);
5161
- }
5162
-
5163
- .tds-pane-footer{
5164
- padding-block-end:var(--tds-pane-footer-padding-block);
5165
- padding-inline:var(--tds-pane-footer-padding-inline);
5166
- }
5167
-
5168
- .tds-pane-divider{
5169
- border:0;
5170
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5171
- margin-block:var(--tds-pane-divider-margin-block);
5172
- margin-inline:var(--tds-pane-divider-margin-inline);
5173
- }
5174
-
5175
5175
  .has-instance-badge-NNA9P{
5176
5176
  inline-size:6px;
5177
5177
  block-size:6px;
@@ -5239,6 +5239,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5239
5239
  color:var(--t-text-color-status-error);
5240
5240
  }
5241
5241
 
5242
+ .tds-helper-shelf{
5243
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5244
+ --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5245
+ --tds-helper-shelf-color:var(--t-text-color);
5246
+ --tds-helper-shelf-font-size:var(--t-font-size-sm);
5247
+ --tds-helper-shelf-padding:var(--t-spacing-1);
5248
+
5249
+ height:0;
5250
+ overflow:hidden;
5251
+ transition:height var(--t-duration-300) var(--t-ease-in);
5252
+ }
5253
+
5254
+ @media (prefers-reduced-motion: reduce){
5255
+
5256
+ .tds-helper-shelf{
5257
+ transition:none;
5258
+ }
5259
+ }
5260
+
5261
+ .tds-helper-shelf--expanded{
5262
+ height:auto;
5263
+ transition-timing-function:var(--t-ease-out);
5264
+ }
5265
+
5266
+ @supports (interpolate-size: allow-keywords){
5267
+ .tds-helper-shelf{
5268
+ interpolate-size:allow-keywords;
5269
+ }
5270
+ }
5271
+
5272
+ .tds-helper-shelf-content{
5273
+ padding:var(--tds-helper-shelf-padding);
5274
+ font-size:var(--tds-helper-shelf-font-size);
5275
+ color:var(--tds-helper-shelf-color);
5276
+ background:var(--tds-helper-shelf-background-color);
5277
+ border-radius:var(--tds-helper-shelf-border-radius);
5278
+ }
5279
+
5280
+ .tds-helper-shelf-trigger{
5281
+ --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5282
+ }
5283
+
5284
+ .tds-helper-shelf-trigger[aria-expanded="true"]{
5285
+ --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5286
+ }
5287
+
5242
5288
  .tds-pagination{
5243
5289
  --tds-pagination-background-color:var(--t-surface-color-canvas);
5244
5290
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);
@@ -5342,52 +5388,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5342
5388
  }
5343
5389
  }
5344
5390
 
5345
- .tds-helper-shelf{
5346
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5347
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5348
- --tds-helper-shelf-color:var(--t-text-color);
5349
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5350
- --tds-helper-shelf-padding:var(--t-spacing-1);
5351
-
5352
- height:0;
5353
- overflow:hidden;
5354
- transition:height var(--t-duration-300) var(--t-ease-in);
5355
- }
5356
-
5357
- @media (prefers-reduced-motion: reduce){
5358
-
5359
- .tds-helper-shelf{
5360
- transition:none;
5361
- }
5362
- }
5363
-
5364
- .tds-helper-shelf--expanded{
5365
- height:auto;
5366
- transition-timing-function:var(--t-ease-out);
5367
- }
5368
-
5369
- @supports (interpolate-size: allow-keywords){
5370
- .tds-helper-shelf{
5371
- interpolate-size:allow-keywords;
5372
- }
5373
- }
5374
-
5375
- .tds-helper-shelf-content{
5376
- padding:var(--tds-helper-shelf-padding);
5377
- font-size:var(--tds-helper-shelf-font-size);
5378
- color:var(--tds-helper-shelf-color);
5379
- background:var(--tds-helper-shelf-background-color);
5380
- border-radius:var(--tds-helper-shelf-border-radius);
5381
- }
5382
-
5383
- .tds-helper-shelf-trigger{
5384
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5385
- }
5386
-
5387
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5388
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5389
- }
5390
-
5391
5391
  .tds-filterable-list-box:has(input:disabled){
5392
5392
  --tds-filterable-list-box-cursor:not-allowed;
5393
5393
  }