@planningcenter/tapestry 3.8.0 → 3.8.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1433,199 +1433,78 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1433
1433
  border-end-end-radius:var(--tds-btn-border-radius);
1434
1434
  }
1435
1435
 
1436
- .tds-checkbox{
1437
- --tds-checkbox-font-size:var(--t-font-size-md);
1438
- --tds-checkbox-cursor:pointer;
1439
- --tds-checkbox-line-height:1.4;
1440
- --tds-checkbox-transition-property:background-color, border-color;
1441
-
1442
- --tds-checkbox-input-size:var(--t-element-size-md);
1443
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1444
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1445
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1446
-
1447
- --tds-checkbox-input-icon:none;
1448
- --tds-checkbox-input-icon-visibility:hidden;
1449
- --tds-checkbox-input-icon-opacity:0;
1450
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1451
-
1452
- --tds-checkbox-label-color:var(--t-form-color);
1436
+ .tds-checkbox-group{
1437
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1438
+ --tds-checkbox-group-line-height:1.4;
1439
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1453
1440
 
1454
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1455
- --tds-checkbox-description-line-height:1.35;
1456
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1457
- --tds-checkbox-description-invalid-icon-display:none;
1441
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1442
+ --tds-checkbox-group-description-line-height:1.35;
1443
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1444
+ --tds-checkbox-group-description-invalid-icon-display:none;
1445
+ display:flex;
1446
+ flex-direction:column;
1447
+ gap:0;
1448
+ padding:0;
1449
+ margin:0;
1458
1450
 
1459
- position:relative;
1460
- display:inline-grid;
1461
- grid-template-columns:auto;
1462
- grid-auto-columns:1fr;
1463
- gap:var(--t-spacing-fourth) 0;
1464
- line-height:var(--tds-checkbox-line-height);
1465
- -webkit-user-select:none;
1466
- -moz-user-select:none;
1467
- user-select:none;
1451
+ font-size:var(--tds-checkbox-group-font-size);
1452
+ line-height:var(--tds-checkbox-group-line-height);
1453
+ border:0;
1468
1454
  }
1469
1455
 
1470
- .tds-checkbox label{
1471
- grid-area:1 / 2;
1472
- padding-inline-start:var(--t-spacing-1);
1473
- font-size:var(--tds-checkbox-font-size);
1474
- font-weight:var(--t-font-weight-normal);
1475
- color:var(--tds-checkbox-label-color);
1476
- cursor:var(--tds-checkbox-cursor);
1477
- }
1478
-
1479
- .tds-checkbox tds-indeterminate{
1480
- display:flex;
1481
- }
1482
-
1483
- .tds-checkbox input[type="checkbox"]{
1484
- position:relative;
1485
- width:1em;
1486
- height:1em;
1487
- margin:calc((1lh - 1em) / 2) 0 0;
1488
- font-size:var(--tds-checkbox-font-size);
1489
- line-height:inherit;
1490
- -webkit-appearance:none;
1491
- -moz-appearance:none;
1492
- appearance:none;
1493
- cursor:var(--tds-checkbox-cursor);
1494
- background-color:var(--tds-checkbox-input-background-color);
1495
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1496
- border-radius:var(--tds-checkbox-input-border-radius);
1497
- transition-timing-function:var(--t-ease-in-out);
1498
- transition-duration:var(--t-duration-200);
1499
- transition-property:var(--tds-checkbox-transition-property);
1500
- }
1501
-
1502
- :is(.tds-checkbox input[type="checkbox"])::before{
1503
- position:absolute;
1504
- top:50%;
1505
- left:50%;
1506
- visibility:var(--tds-checkbox-input-icon-visibility);
1507
- width:100%;
1508
- height:100%;
1509
- content:"";
1510
- background-color:var(--tds-checkbox-input-icon-fill);
1511
- border-radius:var(--tds-checkbox-input-border-radius);
1512
- opacity:var(--tds-checkbox-input-icon-opacity);
1513
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1514
- mask-image:var(--tds-checkbox-input-icon);
1515
- -webkit-mask-repeat:no-repeat;
1516
- mask-repeat:no-repeat;
1517
- -webkit-mask-size:contain;
1518
- mask-size:contain;
1519
- transform:translate(-50%, -50%);
1520
- }
1521
-
1522
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1523
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1524
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1525
- }
1526
-
1527
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1528
- outline:var(--t-focus-ring-outline);
1529
- outline-offset:var(--t-focus-ring-offset);
1530
- }
1531
-
1532
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1533
- pointer-events:none;
1534
- }
1535
-
1536
- @media (prefers-reduced-motion: reduce){
1537
-
1538
- .tds-checkbox input[type="checkbox"]{
1539
- --tds-checkbox-transition-property:none;
1540
- }
1541
- }
1542
-
1543
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1544
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1545
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1546
- --tds-checkbox-input-icon-visibility:visible;
1547
- --tds-checkbox-input-icon-opacity:1;
1548
- }
1549
-
1550
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1551
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1552
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1553
- }
1554
-
1555
- .tds-checkbox:has(input:checked){
1556
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1557
- }
1558
-
1559
- .tds-checkbox:has(input:indeterminate){
1560
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1456
+ .tds-checkbox-group legend{
1457
+ float:left;
1458
+ padding:0;
1459
+ margin:0;
1561
1460
  }
1562
1461
 
1563
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1564
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1565
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1566
- --tds-checkbox-description-invalid-icon-display:inline-block;
1462
+ .tds-checkbox-group[aria-invalid="true"]{
1463
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1464
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1567
1465
  }
1568
1466
 
1569
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1570
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1571
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1572
- }
1573
-
1574
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1575
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1576
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1577
- }
1578
-
1579
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1580
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1581
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1582
- }
1583
-
1584
- .tds-checkbox:has(input:required) label::after{
1467
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1585
1468
  margin-left:.25ch;
1586
1469
  color:var(--t-text-color-status-error);
1587
1470
  content:"*";
1588
1471
  }
1589
1472
 
1590
- .tds-checkbox:has(input:disabled){
1591
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1592
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1593
-
1594
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1596
- --tds-checkbox-cursor:not-allowed;
1597
- }
1598
-
1599
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1600
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1473
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1474
+ content:none;
1601
1475
  }
1602
1476
 
1603
- .tds-checkbox-description{
1477
+ .tds-checkbox-group-fields{
1478
+ display:flex;
1479
+ flex-direction:column;
1480
+ gap:var(--tds-checkbox-group-gap);
1481
+ align-items:flex-start;
1482
+ margin-top:var(--t-spacing-1);
1483
+ }
1484
+
1485
+ .tds-checkbox-group-description{
1604
1486
  display:flex;
1605
- grid-area:2 / 2;
1606
1487
  gap:var(--t-spacing-half);
1607
1488
  align-items:flex-start;
1608
- padding-inline-start:var(--t-spacing-1);
1609
- margin:0;
1610
- font-size:var(--tds-checkbox-description-font-size);
1611
- line-height:var(--tds-checkbox-description-line-height);
1612
- color:var(--tds-checkbox-description-color);
1489
+ margin:var(--t-spacing-fourth) 0 0;
1490
+ font-size:var(--tds-checkbox-group-description-font-size);
1491
+ line-height:var(--tds-checkbox-group-description-line-height);
1492
+ color:var(--tds-checkbox-group-description-color);
1613
1493
  cursor:text;
1614
1494
  }
1615
1495
 
1616
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1617
- display:var(--tds-checkbox-description-invalid-icon-display);
1496
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1497
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
1498
  flex-shrink:0;
1619
1499
  margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-description-line-height);
1500
+ line-height:var(--tds-checkbox-group-description-line-height);
1621
1501
  }
1622
1502
 
1623
- .tds-checkbox--sm{
1624
- --tds-checkbox-line-height:1.35;
1625
- --tds-checkbox-input-size:var(--t-element-size-sm);
1626
- --tds-checkbox-font-size:var(--t-font-size-sm);
1627
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1628
- --tds-checkbox-description-line-height:1.3;
1503
+ .tds-checkbox-group--sm{
1504
+ --tds-checkbox-group-line-height:1.35;
1505
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1506
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1507
+ --tds-checkbox-group-description-line-height:1.3;
1629
1508
  }
1630
1509
 
1631
1510
  .tds-combo-box{
@@ -1810,97 +1689,23 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1810
1689
  color:var(--t-text-color-secondary);
1811
1690
  }
1812
1691
 
1813
- .tds-checkbox-group{
1814
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1815
- --tds-checkbox-group-line-height:1.4;
1816
- --tds-checkbox-group-gap:var(--t-spacing-1);
1817
-
1818
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1819
- --tds-checkbox-group-description-line-height:1.35;
1820
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1821
- --tds-checkbox-group-description-invalid-icon-display:none;
1822
- display:flex;
1823
- flex-direction:column;
1824
- gap:0;
1825
- padding:0;
1826
- margin:0;
1827
-
1828
- font-size:var(--tds-checkbox-group-font-size);
1829
- line-height:var(--tds-checkbox-group-line-height);
1830
- border:0;
1831
- }
1832
-
1833
- .tds-checkbox-group legend{
1834
- float:left;
1835
- padding:0;
1836
- margin:0;
1837
- }
1838
-
1839
- .tds-checkbox-group[aria-invalid="true"]{
1840
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1841
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1842
- }
1843
-
1844
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1845
- margin-left:.25ch;
1846
- color:var(--t-text-color-status-error);
1847
- content:"*";
1848
- }
1849
-
1850
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1851
- content:none;
1852
- }
1853
-
1854
- .tds-checkbox-group-fields{
1855
- display:flex;
1856
- flex-direction:column;
1857
- gap:var(--tds-checkbox-group-gap);
1858
- align-items:flex-start;
1859
- margin-top:var(--t-spacing-1);
1860
- }
1861
-
1862
- .tds-checkbox-group-description{
1863
- display:flex;
1864
- gap:var(--t-spacing-half);
1865
- align-items:flex-start;
1866
- margin:var(--t-spacing-fourth) 0 0;
1867
- font-size:var(--tds-checkbox-group-description-font-size);
1868
- line-height:var(--tds-checkbox-group-description-line-height);
1869
- color:var(--tds-checkbox-group-description-color);
1870
- cursor:text;
1871
- }
1872
-
1873
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1874
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1875
- flex-shrink:0;
1876
- margin-top:calc(.5lh - .5em);
1877
- line-height:var(--tds-checkbox-group-description-line-height);
1878
- }
1879
-
1880
- .tds-checkbox-group--sm{
1881
- --tds-checkbox-group-line-height:1.35;
1882
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1883
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1884
- --tds-checkbox-group-description-line-height:1.3;
1885
- }
1886
-
1887
- .tds-dropdown-popover{
1888
- min-inline-size:10rem;
1889
- max-inline-size:24rem;
1890
- padding:var(--t-spacing-1);
1891
- overflow:auto;
1892
- overscroll-behavior:none;
1893
- -webkit-user-select:none;
1894
- -moz-user-select:none;
1895
- user-select:none;
1896
- outline:0;
1897
- scrollbar-color:#0004 var(--t-surface-color-card);
1898
- scrollbar-width:thin;
1899
- background:var(--t-surface-color-card);
1900
- background-clip:padding-box;
1901
- border:1px solid var(--t-border-color);
1902
- border-radius:var(--t-border-radius);
1903
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1692
+ .tds-dropdown-popover{
1693
+ min-inline-size:10rem;
1694
+ max-inline-size:24rem;
1695
+ padding:var(--t-spacing-1);
1696
+ overflow:auto;
1697
+ overscroll-behavior:none;
1698
+ -webkit-user-select:none;
1699
+ -moz-user-select:none;
1700
+ user-select:none;
1701
+ outline:0;
1702
+ scrollbar-color:#0004 var(--t-surface-color-card);
1703
+ scrollbar-width:thin;
1704
+ background:var(--t-surface-color-card);
1705
+ background-clip:padding-box;
1706
+ border:1px solid var(--t-border-color);
1707
+ border-radius:var(--t-border-radius);
1708
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1904
1709
  }
1905
1710
  .tds-dropdown-popover[data-entering]{
1906
1711
  animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
@@ -2009,6 +1814,201 @@ a.tds-dropdown-item:is(:hover, :active){
2009
1814
  border-top:1px solid var(--t-border-color);
2010
1815
  }
2011
1816
 
1817
+ .tds-checkbox{
1818
+ --tds-checkbox-font-size:var(--t-font-size-md);
1819
+ --tds-checkbox-cursor:pointer;
1820
+ --tds-checkbox-line-height:1.4;
1821
+ --tds-checkbox-transition-property:background-color, border-color;
1822
+
1823
+ --tds-checkbox-input-size:var(--t-element-size-md);
1824
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1825
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1826
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1827
+
1828
+ --tds-checkbox-input-icon:none;
1829
+ --tds-checkbox-input-icon-visibility:hidden;
1830
+ --tds-checkbox-input-icon-opacity:0;
1831
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1832
+
1833
+ --tds-checkbox-label-color:var(--t-form-color);
1834
+
1835
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1836
+ --tds-checkbox-description-line-height:1.35;
1837
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1838
+ --tds-checkbox-description-invalid-icon-display:none;
1839
+
1840
+ position:relative;
1841
+ display:inline-grid;
1842
+ grid-template-columns:auto;
1843
+ grid-auto-columns:1fr;
1844
+ gap:var(--t-spacing-fourth) 0;
1845
+ line-height:var(--tds-checkbox-line-height);
1846
+ -webkit-user-select:none;
1847
+ -moz-user-select:none;
1848
+ user-select:none;
1849
+ }
1850
+
1851
+ .tds-checkbox label{
1852
+ grid-area:1 / 2;
1853
+ padding-inline-start:var(--t-spacing-1);
1854
+ font-size:var(--tds-checkbox-font-size);
1855
+ font-weight:var(--t-font-weight-normal);
1856
+ color:var(--tds-checkbox-label-color);
1857
+ cursor:var(--tds-checkbox-cursor);
1858
+ }
1859
+
1860
+ .tds-checkbox tds-indeterminate{
1861
+ display:flex;
1862
+ }
1863
+
1864
+ .tds-checkbox input[type="checkbox"]{
1865
+ position:relative;
1866
+ width:1em;
1867
+ height:1em;
1868
+ margin:calc((1lh - 1em) / 2) 0 0;
1869
+ font-size:var(--tds-checkbox-font-size);
1870
+ line-height:inherit;
1871
+ -webkit-appearance:none;
1872
+ -moz-appearance:none;
1873
+ appearance:none;
1874
+ cursor:var(--tds-checkbox-cursor);
1875
+ background-color:var(--tds-checkbox-input-background-color);
1876
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1877
+ border-radius:var(--tds-checkbox-input-border-radius);
1878
+ transition-timing-function:var(--t-ease-in-out);
1879
+ transition-duration:var(--t-duration-200);
1880
+ transition-property:var(--tds-checkbox-transition-property);
1881
+ }
1882
+
1883
+ :is(.tds-checkbox input[type="checkbox"])::before{
1884
+ position:absolute;
1885
+ top:50%;
1886
+ left:50%;
1887
+ visibility:var(--tds-checkbox-input-icon-visibility);
1888
+ width:100%;
1889
+ height:100%;
1890
+ content:"";
1891
+ background-color:var(--tds-checkbox-input-icon-fill);
1892
+ border-radius:var(--tds-checkbox-input-border-radius);
1893
+ opacity:var(--tds-checkbox-input-icon-opacity);
1894
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1895
+ mask-image:var(--tds-checkbox-input-icon);
1896
+ -webkit-mask-repeat:no-repeat;
1897
+ mask-repeat:no-repeat;
1898
+ -webkit-mask-size:contain;
1899
+ mask-size:contain;
1900
+ transform:translate(-50%, -50%);
1901
+ }
1902
+
1903
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1904
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1905
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1906
+ }
1907
+
1908
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1909
+ outline:var(--t-focus-ring-outline);
1910
+ outline-offset:var(--t-focus-ring-offset);
1911
+ }
1912
+
1913
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1914
+ pointer-events:none;
1915
+ }
1916
+
1917
+ @media (prefers-reduced-motion: reduce){
1918
+
1919
+ .tds-checkbox input[type="checkbox"]{
1920
+ --tds-checkbox-transition-property:none;
1921
+ }
1922
+ }
1923
+
1924
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1925
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1926
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1927
+ --tds-checkbox-input-icon-visibility:visible;
1928
+ --tds-checkbox-input-icon-opacity:1;
1929
+ }
1930
+
1931
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1932
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1933
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1934
+ }
1935
+
1936
+ .tds-checkbox:has(input:checked){
1937
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1938
+ }
1939
+
1940
+ .tds-checkbox:has(input:indeterminate){
1941
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1942
+ }
1943
+
1944
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1945
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1946
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1947
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1948
+ }
1949
+
1950
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1951
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1952
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1953
+ }
1954
+
1955
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1956
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1957
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1958
+ }
1959
+
1960
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1961
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1962
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1963
+ }
1964
+
1965
+ .tds-checkbox:has(input:required) label::after{
1966
+ margin-left:.25ch;
1967
+ color:var(--t-text-color-status-error);
1968
+ content:"*";
1969
+ }
1970
+
1971
+ .tds-checkbox:has(input:disabled){
1972
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1973
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1974
+
1975
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1976
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1977
+ --tds-checkbox-cursor:not-allowed;
1978
+ }
1979
+
1980
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1981
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1982
+ }
1983
+
1984
+ .tds-checkbox-description{
1985
+ display:flex;
1986
+ grid-area:2 / 2;
1987
+ gap:var(--t-spacing-half);
1988
+ align-items:flex-start;
1989
+ padding-inline-start:var(--t-spacing-1);
1990
+ margin:0;
1991
+ font-size:var(--tds-checkbox-description-font-size);
1992
+ line-height:var(--tds-checkbox-description-line-height);
1993
+ color:var(--tds-checkbox-description-color);
1994
+ cursor:text;
1995
+ }
1996
+
1997
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1998
+ display:var(--tds-checkbox-description-invalid-icon-display);
1999
+ flex-shrink:0;
2000
+ margin-top:calc(.5lh - .5em);
2001
+ line-height:var(--tds-checkbox-description-line-height);
2002
+ }
2003
+
2004
+ .tds-checkbox--sm{
2005
+ --tds-checkbox-line-height:1.35;
2006
+ --tds-checkbox-input-size:var(--t-element-size-sm);
2007
+ --tds-checkbox-font-size:var(--t-font-size-sm);
2008
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2009
+ --tds-checkbox-description-line-height:1.3;
2010
+ }
2011
+
2012
2012
 
2013
2013
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2014
2014
  -webkit-appearance:none;
@@ -2020,17 +2020,233 @@ a.tds-dropdown-item:is(:hover, :active){
2020
2020
  block-size:2em;
2021
2021
  }
2022
2022
 
2023
- @supports (field-sizing: content){
2024
- .tds-input--auto-width{
2025
- inline-size:-moz-fit-content;
2026
- inline-size:fit-content;
2027
- min-inline-size:min(100%, 122px);
2023
+ @supports (field-sizing: content){
2024
+ .tds-input--auto-width{
2025
+ inline-size:-moz-fit-content;
2026
+ inline-size:fit-content;
2027
+ min-inline-size:min(100%, 122px);
2028
+ }
2029
+
2030
+ .tds-input--auto-width input{
2031
+ field-sizing:content;
2032
+ inline-size:auto;
2033
+ }
2034
+ }
2035
+
2036
+ .tds-radio{
2037
+ --tds-radio-font-size:var(--t-font-size-md);
2038
+ --tds-radio-cursor:pointer;
2039
+ --tds-radio-line-height:1.4;
2040
+ --tds-radio-transition-property:border-width;
2041
+
2042
+ --tds-radio-input-size:var(--t-element-size-md);
2043
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2044
+ --tds-radio-input-border-color:var(--t-form-border-color);
2045
+ --tds-radio-input-border-width:var(--t-form-border-width);
2046
+ --tds-radio-input-background-color:var(--t-form-background-color);
2047
+
2048
+ --tds-radio-label-color:var(--t-form-color);
2049
+
2050
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2051
+ --tds-radio-description-line-height:1.35;
2052
+ --tds-radio-description-color:var(--t-text-color-secondary);
2053
+
2054
+ position:relative;
2055
+ display:inline-grid;
2056
+ grid-template-columns:auto;
2057
+ grid-auto-columns:1fr;
2058
+ gap:var(--t-spacing-fourth) 0;
2059
+ line-height:var(--tds-radio-line-height);
2060
+ -webkit-user-select:none;
2061
+ -moz-user-select:none;
2062
+ user-select:none;
2063
+ }
2064
+
2065
+ .tds-radio label{
2066
+ grid-area:1 / 2;
2067
+ padding-inline-start:var(--t-spacing-1);
2068
+ font-size:var(--tds-radio-font-size);
2069
+ font-weight:var(--t-font-weight-normal);
2070
+ color:var(--tds-radio-label-color);
2071
+ cursor:var(--tds-radio-cursor);
2072
+ }
2073
+
2074
+ .tds-radio input[type="radio"]{
2075
+ position:relative;
2076
+ width:1em;
2077
+ height:1em;
2078
+ margin:calc((1lh - 1em) / 2) 0 0;
2079
+ font-size:var(--tds-radio-font-size);
2080
+ line-height:inherit;
2081
+ -webkit-appearance:none;
2082
+ -moz-appearance:none;
2083
+ appearance:none;
2084
+ cursor:var(--tds-radio-cursor);
2085
+ background-color:var(--tds-radio-input-background-color);
2086
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2087
+ border-radius:var(--tds-radio-input-border-radius);
2088
+ transition-timing-function:var(--t-ease-in-out);
2089
+ transition-duration:var(--t-duration-200);
2090
+ transition-property:var(--tds-radio-transition-property);
2091
+ }
2092
+
2093
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2094
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2095
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2096
+ }
2097
+
2098
+ :is(.tds-radio input[type="radio"]):focus-visible{
2099
+ outline:var(--t-focus-ring-outline);
2100
+ outline-offset:var(--t-focus-ring-offset);
2101
+ }
2102
+
2103
+ :is(.tds-radio input[type="radio"]):disabled{
2104
+ pointer-events:none;
2105
+ }
2106
+
2107
+ @media (prefers-reduced-motion: reduce){
2108
+
2109
+ .tds-radio input[type="radio"]{
2110
+ --tds-radio-transition-property:none;
2111
+ }
2112
+ }
2113
+
2114
+ .tds-radio:has(input:checked){
2115
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2116
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2117
+ --tds-radio-input-border-width:4px;
2118
+ }
2119
+
2120
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2121
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2122
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2123
+ }
2124
+
2125
+ .tds-radio:has(input:user-invalid){
2126
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2127
+ }
2128
+
2129
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2130
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2131
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2132
+ }
2133
+
2134
+ .tds-radio:has(input:disabled){
2135
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2136
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2137
+
2138
+ --tds-radio-label-color:var(--t-form-color-disabled);
2139
+ --tds-radio-description-color:var(--t-form-color-disabled);
2140
+ --tds-radio-cursor:not-allowed;
2141
+ }
2142
+
2143
+ .tds-radio:has(input:disabled) input:checked{
2144
+ --tds-radio-input-background-color:var(--t-form-background-color);
2145
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2146
+ }
2147
+
2148
+ .tds-radio-description{
2149
+ display:flex;
2150
+ grid-area:2 / 2;
2151
+ gap:var(--t-spacing-half);
2152
+ align-items:flex-start;
2153
+ padding-inline-start:var(--t-spacing-1);
2154
+ margin:0;
2155
+ font-size:var(--tds-radio-description-font-size);
2156
+ line-height:var(--tds-radio-description-line-height);
2157
+ color:var(--tds-radio-description-color);
2158
+ cursor:text;
2159
+ }
2160
+
2161
+ .tds-radio--sm{
2162
+ --tds-radio-line-height:1.35;
2163
+ --tds-radio-input-size:var(--t-element-size-sm);
2164
+ --tds-radio-font-size:var(--t-font-size-sm);
2165
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2166
+ --tds-radio-description-line-height:1.3;
2167
+ }
2168
+
2169
+ .tds-radio-group{
2170
+ --tds-radio-group-font-size:var(--t-font-size-md);
2171
+ --tds-radio-group-line-height:1.4;
2172
+ --tds-radio-group-gap:var(--t-spacing-1);
2173
+
2174
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2175
+ --tds-radio-group-description-line-height:1.35;
2176
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2177
+ --tds-radio-group-description-invalid-icon-display:none;
2178
+ display:flex;
2179
+ flex-direction:column;
2180
+ gap:0;
2181
+ padding:0;
2182
+ margin:0;
2183
+
2184
+ font-size:var(--tds-radio-group-font-size);
2185
+ line-height:var(--tds-radio-group-line-height);
2186
+ border:0;
2187
+ }
2188
+
2189
+ .tds-radio-group legend{
2190
+ float:left;
2191
+ padding:0;
2192
+ margin:0;
2193
+ }
2194
+
2195
+ .tds-radio-group[aria-invalid="true"]{
2196
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2197
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2198
+ }
2199
+
2200
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2201
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2202
+ }
2203
+
2204
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2205
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2206
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2207
+ }
2208
+
2209
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2210
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2211
+ }
2212
+
2213
+ .tds-radio-group:has(input:required) legend::after{
2214
+ margin-left:.25ch;
2215
+ color:var(--t-text-color-status-error);
2216
+ content:"*";
2217
+ }
2218
+
2219
+ .tds-radio-group-fields{
2220
+ display:flex;
2221
+ flex-direction:column;
2222
+ gap:var(--tds-radio-group-gap);
2223
+ align-items:flex-start;
2224
+ margin-top:var(--t-spacing-1);
2225
+ }
2226
+
2227
+ .tds-radio-group-description{
2228
+ display:flex;
2229
+ gap:var(--t-spacing-half);
2230
+ align-items:flex-start;
2231
+ margin:var(--t-spacing-fourth) 0 0;
2232
+ font-size:var(--tds-radio-group-description-font-size);
2233
+ line-height:var(--tds-radio-group-description-line-height);
2234
+ color:var(--tds-radio-group-description-color);
2235
+ cursor:text;
2236
+ }
2237
+
2238
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2239
+ display:var(--tds-radio-group-description-invalid-icon-display);
2240
+ flex-shrink:0;
2241
+ margin-top:calc(.5lh - .5em);
2242
+ line-height:var(--tds-radio-group-description-line-height);
2028
2243
  }
2029
2244
 
2030
- .tds-input--auto-width input{
2031
- field-sizing:content;
2032
- inline-size:auto;
2033
- }
2245
+ .tds-radio-group--sm{
2246
+ --tds-radio-group-line-height:1.35;
2247
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2248
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2249
+ --tds-radio-group-description-line-height:1.3;
2034
2250
  }
2035
2251
 
2036
2252
  .tds-modal{
@@ -2163,13 +2379,6 @@ a.tds-dropdown-item:is(:hover, :active){
2163
2379
  margin-inline-end:auto;
2164
2380
  }
2165
2381
 
2166
- .tds-time-field-input{
2167
- --tds-field-date-segment-padding-inline:1px;
2168
- padding-block:var(--tds-field-padding-block);
2169
- padding-inline:var(--tds-field-padding-inline);
2170
- font-variant-numeric:tabular-nums;
2171
- }
2172
-
2173
2382
  .tds-toggle-switch{
2174
2383
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2175
2384
  --tds-toggle-switch-cursor:pointer;
@@ -2415,222 +2624,6 @@ a.tds-dropdown-item:is(:hover, :active){
2415
2624
  }
2416
2625
  }
2417
2626
 
2418
- .tds-radio{
2419
- --tds-radio-font-size:var(--t-font-size-md);
2420
- --tds-radio-cursor:pointer;
2421
- --tds-radio-line-height:1.4;
2422
- --tds-radio-transition-property:border-width;
2423
-
2424
- --tds-radio-input-size:var(--t-element-size-md);
2425
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2426
- --tds-radio-input-border-color:var(--t-form-border-color);
2427
- --tds-radio-input-border-width:var(--t-form-border-width);
2428
- --tds-radio-input-background-color:var(--t-form-background-color);
2429
-
2430
- --tds-radio-label-color:var(--t-form-color);
2431
-
2432
- --tds-radio-description-font-size:var(--t-font-size-sm);
2433
- --tds-radio-description-line-height:1.35;
2434
- --tds-radio-description-color:var(--t-text-color-secondary);
2435
-
2436
- position:relative;
2437
- display:inline-grid;
2438
- grid-template-columns:auto;
2439
- grid-auto-columns:1fr;
2440
- gap:var(--t-spacing-fourth) 0;
2441
- line-height:var(--tds-radio-line-height);
2442
- -webkit-user-select:none;
2443
- -moz-user-select:none;
2444
- user-select:none;
2445
- }
2446
-
2447
- .tds-radio label{
2448
- grid-area:1 / 2;
2449
- padding-inline-start:var(--t-spacing-1);
2450
- font-size:var(--tds-radio-font-size);
2451
- font-weight:var(--t-font-weight-normal);
2452
- color:var(--tds-radio-label-color);
2453
- cursor:var(--tds-radio-cursor);
2454
- }
2455
-
2456
- .tds-radio input[type="radio"]{
2457
- position:relative;
2458
- width:1em;
2459
- height:1em;
2460
- margin:calc((1lh - 1em) / 2) 0 0;
2461
- font-size:var(--tds-radio-font-size);
2462
- line-height:inherit;
2463
- -webkit-appearance:none;
2464
- -moz-appearance:none;
2465
- appearance:none;
2466
- cursor:var(--tds-radio-cursor);
2467
- background-color:var(--tds-radio-input-background-color);
2468
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2469
- border-radius:var(--tds-radio-input-border-radius);
2470
- transition-timing-function:var(--t-ease-in-out);
2471
- transition-duration:var(--t-duration-200);
2472
- transition-property:var(--tds-radio-transition-property);
2473
- }
2474
-
2475
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2476
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2477
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2478
- }
2479
-
2480
- :is(.tds-radio input[type="radio"]):focus-visible{
2481
- outline:var(--t-focus-ring-outline);
2482
- outline-offset:var(--t-focus-ring-offset);
2483
- }
2484
-
2485
- :is(.tds-radio input[type="radio"]):disabled{
2486
- pointer-events:none;
2487
- }
2488
-
2489
- @media (prefers-reduced-motion: reduce){
2490
-
2491
- .tds-radio input[type="radio"]{
2492
- --tds-radio-transition-property:none;
2493
- }
2494
- }
2495
-
2496
- .tds-radio:has(input:checked){
2497
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2498
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2499
- --tds-radio-input-border-width:4px;
2500
- }
2501
-
2502
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2503
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2504
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2505
- }
2506
-
2507
- .tds-radio:has(input:user-invalid){
2508
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2509
- }
2510
-
2511
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2512
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2513
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2514
- }
2515
-
2516
- .tds-radio:has(input:disabled){
2517
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2518
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2519
-
2520
- --tds-radio-label-color:var(--t-form-color-disabled);
2521
- --tds-radio-description-color:var(--t-form-color-disabled);
2522
- --tds-radio-cursor:not-allowed;
2523
- }
2524
-
2525
- .tds-radio:has(input:disabled) input:checked{
2526
- --tds-radio-input-background-color:var(--t-form-background-color);
2527
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2528
- }
2529
-
2530
- .tds-radio-description{
2531
- display:flex;
2532
- grid-area:2 / 2;
2533
- gap:var(--t-spacing-half);
2534
- align-items:flex-start;
2535
- padding-inline-start:var(--t-spacing-1);
2536
- margin:0;
2537
- font-size:var(--tds-radio-description-font-size);
2538
- line-height:var(--tds-radio-description-line-height);
2539
- color:var(--tds-radio-description-color);
2540
- cursor:text;
2541
- }
2542
-
2543
- .tds-radio--sm{
2544
- --tds-radio-line-height:1.35;
2545
- --tds-radio-input-size:var(--t-element-size-sm);
2546
- --tds-radio-font-size:var(--t-font-size-sm);
2547
- --tds-radio-description-font-size:var(--t-font-size-xs);
2548
- --tds-radio-description-line-height:1.3;
2549
- }
2550
-
2551
- .tds-radio-group{
2552
- --tds-radio-group-font-size:var(--t-font-size-md);
2553
- --tds-radio-group-line-height:1.4;
2554
- --tds-radio-group-gap:var(--t-spacing-1);
2555
-
2556
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2557
- --tds-radio-group-description-line-height:1.35;
2558
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2559
- --tds-radio-group-description-invalid-icon-display:none;
2560
- display:flex;
2561
- flex-direction:column;
2562
- gap:0;
2563
- padding:0;
2564
- margin:0;
2565
-
2566
- font-size:var(--tds-radio-group-font-size);
2567
- line-height:var(--tds-radio-group-line-height);
2568
- border:0;
2569
- }
2570
-
2571
- .tds-radio-group legend{
2572
- float:left;
2573
- padding:0;
2574
- margin:0;
2575
- }
2576
-
2577
- .tds-radio-group[aria-invalid="true"]{
2578
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2579
- --tds-radio-group-description-invalid-icon-display:inline-block;
2580
- }
2581
-
2582
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2583
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2584
- }
2585
-
2586
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2587
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2588
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2589
- }
2590
-
2591
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2592
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2593
- }
2594
-
2595
- .tds-radio-group:has(input:required) legend::after{
2596
- margin-left:.25ch;
2597
- color:var(--t-text-color-status-error);
2598
- content:"*";
2599
- }
2600
-
2601
- .tds-radio-group-fields{
2602
- display:flex;
2603
- flex-direction:column;
2604
- gap:var(--tds-radio-group-gap);
2605
- align-items:flex-start;
2606
- margin-top:var(--t-spacing-1);
2607
- }
2608
-
2609
- .tds-radio-group-description{
2610
- display:flex;
2611
- gap:var(--t-spacing-half);
2612
- align-items:flex-start;
2613
- margin:var(--t-spacing-fourth) 0 0;
2614
- font-size:var(--tds-radio-group-description-font-size);
2615
- line-height:var(--tds-radio-group-description-line-height);
2616
- color:var(--tds-radio-group-description-color);
2617
- cursor:text;
2618
- }
2619
-
2620
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2621
- display:var(--tds-radio-group-description-invalid-icon-display);
2622
- flex-shrink:0;
2623
- margin-top:calc(.5lh - .5em);
2624
- line-height:var(--tds-radio-group-description-line-height);
2625
- }
2626
-
2627
- .tds-radio-group--sm{
2628
- --tds-radio-group-line-height:1.35;
2629
- --tds-radio-group-font-size:var(--t-font-size-sm);
2630
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2631
- --tds-radio-group-description-line-height:1.3;
2632
- }
2633
-
2634
2627
  .tds-loading-spinner{
2635
2628
  position:absolute;
2636
2629
  right:0;
@@ -6356,4 +6349,11 @@ a.tds-dropdown-item:is(:hover, :active){
6356
6349
  }
6357
6350
  }
6358
6351
 
6352
+ .tds-time-field-input{
6353
+ --tds-field-date-segment-padding-inline:1px;
6354
+ padding-block:var(--tds-field-padding-block);
6355
+ padding-inline:var(--tds-field-padding-inline);
6356
+ font-variant-numeric:tabular-nums;
6357
+ }
6358
+
6359
6359
  /*# sourceMappingURL=reactRender.css.map */