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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -677,6 +677,80 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-checkbox-group{
681
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-group-line-height:1.4;
683
+ --tds-checkbox-group-gap:var(--t-spacing-1);
684
+
685
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
686
+ --tds-checkbox-group-description-line-height:1.35;
687
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
688
+ --tds-checkbox-group-description-invalid-icon-display:none;
689
+ display:flex;
690
+ flex-direction:column;
691
+ gap:0;
692
+ padding:0;
693
+ margin:0;
694
+
695
+ font-size:var(--tds-checkbox-group-font-size);
696
+ line-height:var(--tds-checkbox-group-line-height);
697
+ border:0;
698
+ }
699
+
700
+ .tds-checkbox-group legend{
701
+ float:left;
702
+ padding:0;
703
+ margin:0;
704
+ }
705
+
706
+ .tds-checkbox-group[aria-invalid="true"]{
707
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
708
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
709
+ }
710
+
711
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
712
+ margin-left:.25ch;
713
+ color:var(--t-text-color-status-error);
714
+ content:"*";
715
+ }
716
+
717
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
718
+ content:none;
719
+ }
720
+
721
+ .tds-checkbox-group-fields{
722
+ display:flex;
723
+ flex-direction:column;
724
+ gap:var(--tds-checkbox-group-gap);
725
+ align-items:flex-start;
726
+ margin-top:var(--t-spacing-1);
727
+ }
728
+
729
+ .tds-checkbox-group-description{
730
+ display:flex;
731
+ gap:var(--t-spacing-half);
732
+ align-items:flex-start;
733
+ margin:var(--t-spacing-fourth) 0 0;
734
+ font-size:var(--tds-checkbox-group-description-font-size);
735
+ line-height:var(--tds-checkbox-group-description-line-height);
736
+ color:var(--tds-checkbox-group-description-color);
737
+ cursor:text;
738
+ }
739
+
740
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
741
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
742
+ flex-shrink:0;
743
+ margin-top:calc(.5lh - .5em);
744
+ line-height:var(--tds-checkbox-group-description-line-height);
745
+ }
746
+
747
+ .tds-checkbox-group--sm{
748
+ --tds-checkbox-group-line-height:1.35;
749
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
750
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
751
+ --tds-checkbox-group-description-line-height:1.3;
752
+ }
753
+
680
754
  @layer t-critical{
681
755
  tds-page-header:not(.hydrated){
682
756
  display:none;
@@ -1191,80 +1265,6 @@
1191
1265
  --tds-checkbox-description-line-height:1.3;
1192
1266
  }
1193
1267
 
1194
- .tds-checkbox-group{
1195
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1196
- --tds-checkbox-group-line-height:1.4;
1197
- --tds-checkbox-group-gap:var(--t-spacing-1);
1198
-
1199
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-group-description-line-height:1.35;
1201
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1202
- --tds-checkbox-group-description-invalid-icon-display:none;
1203
- display:flex;
1204
- flex-direction:column;
1205
- gap:0;
1206
- padding:0;
1207
- margin:0;
1208
-
1209
- font-size:var(--tds-checkbox-group-font-size);
1210
- line-height:var(--tds-checkbox-group-line-height);
1211
- border:0;
1212
- }
1213
-
1214
- .tds-checkbox-group legend{
1215
- float:left;
1216
- padding:0;
1217
- margin:0;
1218
- }
1219
-
1220
- .tds-checkbox-group[aria-invalid="true"]{
1221
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1222
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1223
- }
1224
-
1225
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1226
- margin-left:.25ch;
1227
- color:var(--t-text-color-status-error);
1228
- content:"*";
1229
- }
1230
-
1231
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1232
- content:none;
1233
- }
1234
-
1235
- .tds-checkbox-group-fields{
1236
- display:flex;
1237
- flex-direction:column;
1238
- gap:var(--tds-checkbox-group-gap);
1239
- align-items:flex-start;
1240
- margin-top:var(--t-spacing-1);
1241
- }
1242
-
1243
- .tds-checkbox-group-description{
1244
- display:flex;
1245
- gap:var(--t-spacing-half);
1246
- align-items:flex-start;
1247
- margin:var(--t-spacing-fourth) 0 0;
1248
- font-size:var(--tds-checkbox-group-description-font-size);
1249
- line-height:var(--tds-checkbox-group-description-line-height);
1250
- color:var(--tds-checkbox-group-description-color);
1251
- cursor:text;
1252
- }
1253
-
1254
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1255
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1256
- flex-shrink:0;
1257
- margin-top:calc(.5lh - .5em);
1258
- line-height:var(--tds-checkbox-group-description-line-height);
1259
- }
1260
-
1261
- .tds-checkbox-group--sm{
1262
- --tds-checkbox-group-line-height:1.35;
1263
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1264
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1265
- --tds-checkbox-group-description-line-height:1.3;
1266
- }
1267
-
1268
1268
  .tds-modal-overlay{
1269
1269
  --tds-modal-min-margin-block:var(--t-spacing-3);
1270
1270
 
@@ -1428,27 +1428,87 @@
1428
1428
  }
1429
1429
  }
1430
1430
 
1431
+ .tds-radio-group{
1432
+ --tds-radio-group-font-size:var(--t-font-size-md);
1433
+ --tds-radio-group-line-height:1.4;
1434
+ --tds-radio-group-gap:var(--t-spacing-1);
1431
1435
 
1432
- :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{
1433
- -webkit-appearance:none;
1434
- appearance:none;
1436
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1437
+ --tds-radio-group-description-line-height:1.35;
1438
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1439
+ --tds-radio-group-description-invalid-icon-display:none;
1440
+ display:flex;
1441
+ flex-direction:column;
1442
+ gap:0;
1443
+ padding:0;
1444
+ margin:0;
1445
+
1446
+ font-size:var(--tds-radio-group-font-size);
1447
+ line-height:var(--tds-radio-group-line-height);
1448
+ border:0;
1449
+ }
1450
+
1451
+ .tds-radio-group legend{
1452
+ float:left;
1453
+ padding:0;
1454
+ margin:0;
1455
+ }
1456
+
1457
+ .tds-radio-group[aria-invalid="true"]{
1458
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1459
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1460
+ }
1461
+
1462
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1463
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1435
1464
  }
1436
1465
 
1437
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1438
- inline-size:1em;
1439
- block-size:2em;
1466
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1467
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1468
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1469
+ }
1470
+
1471
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1472
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1473
+ }
1474
+
1475
+ .tds-radio-group:has(input:required) legend::after{
1476
+ margin-left:.25ch;
1477
+ color:var(--t-text-color-status-error);
1478
+ content:"*";
1440
1479
  }
1441
- @supports (field-sizing: content){
1442
- .tds-input--auto-width{
1443
- inline-size:-moz-fit-content;
1444
- inline-size:fit-content;
1445
- min-inline-size:min(100%, 122px);
1446
- }
1447
1480
 
1448
- .tds-input--auto-width input{
1449
- field-sizing:content;
1450
- inline-size:auto;
1481
+ .tds-radio-group-fields{
1482
+ display:flex;
1483
+ flex-direction:column;
1484
+ gap:var(--tds-radio-group-gap);
1485
+ align-items:flex-start;
1486
+ margin-top:var(--t-spacing-1);
1487
+ }
1488
+
1489
+ .tds-radio-group-description{
1490
+ display:flex;
1491
+ gap:var(--t-spacing-half);
1492
+ align-items:flex-start;
1493
+ margin:var(--t-spacing-fourth) 0 0;
1494
+ font-size:var(--tds-radio-group-description-font-size);
1495
+ line-height:var(--tds-radio-group-description-line-height);
1496
+ color:var(--tds-radio-group-description-color);
1497
+ cursor:text;
1498
+ }
1499
+
1500
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1501
+ display:var(--tds-radio-group-description-invalid-icon-display);
1502
+ flex-shrink:0;
1503
+ margin-top:calc(.5lh - .5em);
1504
+ line-height:var(--tds-radio-group-description-line-height);
1451
1505
  }
1506
+
1507
+ .tds-radio-group--sm{
1508
+ --tds-radio-group-line-height:1.35;
1509
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1510
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1511
+ --tds-radio-group-description-line-height:1.3;
1452
1512
  }
1453
1513
 
1454
1514
  .tds-radio{
@@ -1584,87 +1644,27 @@
1584
1644
  --tds-radio-description-line-height:1.3;
1585
1645
  }
1586
1646
 
1587
- .tds-radio-group{
1588
- --tds-radio-group-font-size:var(--t-font-size-md);
1589
- --tds-radio-group-line-height:1.4;
1590
- --tds-radio-group-gap:var(--t-spacing-1);
1591
-
1592
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1593
- --tds-radio-group-description-line-height:1.35;
1594
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1595
- --tds-radio-group-description-invalid-icon-display:none;
1596
- display:flex;
1597
- flex-direction:column;
1598
- gap:0;
1599
- padding:0;
1600
- margin:0;
1601
-
1602
- font-size:var(--tds-radio-group-font-size);
1603
- line-height:var(--tds-radio-group-line-height);
1604
- border:0;
1605
- }
1606
-
1607
- .tds-radio-group legend{
1608
- float:left;
1609
- padding:0;
1610
- margin:0;
1611
- }
1612
1647
 
1613
- .tds-radio-group[aria-invalid="true"]{
1614
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1615
- --tds-radio-group-description-invalid-icon-display:inline-block;
1616
- }
1617
-
1618
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1619
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1648
+ :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{
1649
+ -webkit-appearance:none;
1650
+ appearance:none;
1620
1651
  }
1621
1652
 
1622
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1623
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1624
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1625
- }
1626
-
1627
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1628
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1629
- }
1630
-
1631
- .tds-radio-group:has(input:required) legend::after{
1632
- margin-left:.25ch;
1633
- color:var(--t-text-color-status-error);
1634
- content:"*";
1653
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1654
+ inline-size:1em;
1655
+ block-size:2em;
1635
1656
  }
1636
-
1637
- .tds-radio-group-fields{
1638
- display:flex;
1639
- flex-direction:column;
1640
- gap:var(--tds-radio-group-gap);
1641
- align-items:flex-start;
1642
- margin-top:var(--t-spacing-1);
1643
- }
1644
-
1645
- .tds-radio-group-description{
1646
- display:flex;
1647
- gap:var(--t-spacing-half);
1648
- align-items:flex-start;
1649
- margin:var(--t-spacing-fourth) 0 0;
1650
- font-size:var(--tds-radio-group-description-font-size);
1651
- line-height:var(--tds-radio-group-description-line-height);
1652
- color:var(--tds-radio-group-description-color);
1653
- cursor:text;
1654
- }
1655
-
1656
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1657
- display:var(--tds-radio-group-description-invalid-icon-display);
1658
- flex-shrink:0;
1659
- margin-top:calc(.5lh - .5em);
1660
- line-height:var(--tds-radio-group-description-line-height);
1657
+ @supports (field-sizing: content){
1658
+ .tds-input--auto-width{
1659
+ inline-size:-moz-fit-content;
1660
+ inline-size:fit-content;
1661
+ min-inline-size:min(100%, 122px);
1661
1662
  }
1662
1663
 
1663
- .tds-radio-group--sm{
1664
- --tds-radio-group-line-height:1.35;
1665
- --tds-radio-group-font-size:var(--t-font-size-sm);
1666
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1667
- --tds-radio-group-description-line-height:1.3;
1664
+ .tds-input--auto-width input{
1665
+ field-sizing:content;
1666
+ inline-size:auto;
1667
+ }
1668
1668
  }
1669
1669
 
1670
1670
  .tds-toggle-switch{