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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +221 -221
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +221 -221
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -954,6 +954,48 @@
954
954
  }
955
955
  }
956
956
 
957
+ .tds-button-group{
958
+ display:inline-flex;
959
+ }
960
+ .tds-button-group > .tds-btn{
961
+ --tds-button-group-item-z-index:1;
962
+
963
+ position:relative;
964
+ z-index:var(--tds-button-group-item-z-index);
965
+ border-radius:0;
966
+ }
967
+ :is(.tds-button-group > .tds-btn):not(:first-child){
968
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
+ }
970
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
+ position:absolute;
972
+ inset-block:calc(var(--tds-btn-border-width) * -1);
973
+ width:var(--tds-btn-border-width);
974
+ pointer-events:none;
975
+ content:"";
976
+ background-color:var(--t-border-color-white);
977
+ }
978
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
+ }
981
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
+ }
984
+ :is(.tds-button-group > .tds-btn):hover{
985
+ --tds-button-group-item-z-index:2;
986
+ }
987
+ :is(.tds-button-group > .tds-btn):focus-visible{
988
+ --tds-button-group-item-z-index:5;
989
+ }
990
+ .tds-button-group > .tds-btn:first-child{
991
+ border-start-start-radius:var(--tds-btn-border-radius);
992
+ border-end-start-radius:var(--tds-btn-border-radius);
993
+ }
994
+ .tds-button-group > .tds-btn:last-child{
995
+ border-start-end-radius:var(--tds-btn-border-radius);
996
+ border-end-end-radius:var(--tds-btn-border-radius);
997
+ }
998
+
957
999
 
958
1000
  @media (prefers-reduced-motion: no-preference){
959
1001
 
@@ -1316,6 +1358,80 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1316
1358
  flex-direction:column;
1317
1359
  }
1318
1360
 
1361
+ .tds-checkbox-group{
1362
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1363
+ --tds-checkbox-group-line-height:1.4;
1364
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1365
+
1366
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1367
+ --tds-checkbox-group-description-line-height:1.35;
1368
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1369
+ --tds-checkbox-group-description-invalid-icon-display:none;
1370
+ display:flex;
1371
+ flex-direction:column;
1372
+ gap:0;
1373
+ padding:0;
1374
+ margin:0;
1375
+
1376
+ font-size:var(--tds-checkbox-group-font-size);
1377
+ line-height:var(--tds-checkbox-group-line-height);
1378
+ border:0;
1379
+ }
1380
+
1381
+ .tds-checkbox-group legend{
1382
+ float:left;
1383
+ padding:0;
1384
+ margin:0;
1385
+ }
1386
+
1387
+ .tds-checkbox-group[aria-invalid="true"]{
1388
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1389
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1390
+ }
1391
+
1392
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1393
+ margin-left:.25ch;
1394
+ color:var(--t-text-color-status-error);
1395
+ content:"*";
1396
+ }
1397
+
1398
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
+ content:none;
1400
+ }
1401
+
1402
+ .tds-checkbox-group-fields{
1403
+ display:flex;
1404
+ flex-direction:column;
1405
+ gap:var(--tds-checkbox-group-gap);
1406
+ align-items:flex-start;
1407
+ margin-top:var(--t-spacing-1);
1408
+ }
1409
+
1410
+ .tds-checkbox-group-description{
1411
+ display:flex;
1412
+ gap:var(--t-spacing-half);
1413
+ align-items:flex-start;
1414
+ margin:var(--t-spacing-fourth) 0 0;
1415
+ font-size:var(--tds-checkbox-group-description-font-size);
1416
+ line-height:var(--tds-checkbox-group-description-line-height);
1417
+ color:var(--tds-checkbox-group-description-color);
1418
+ cursor:text;
1419
+ }
1420
+
1421
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1422
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1423
+ flex-shrink:0;
1424
+ margin-top:calc(.5lh - .5em);
1425
+ line-height:var(--tds-checkbox-group-description-line-height);
1426
+ }
1427
+
1428
+ .tds-checkbox-group--sm{
1429
+ --tds-checkbox-group-line-height:1.35;
1430
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1431
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1432
+ --tds-checkbox-group-description-line-height:1.3;
1433
+ }
1434
+
1319
1435
  .tds-checkbox{
1320
1436
  --tds-checkbox-font-size:var(--t-font-size-md);
1321
1437
  --tds-checkbox-cursor:pointer;
@@ -1511,48 +1627,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1511
1627
  --tds-checkbox-description-line-height:1.3;
1512
1628
  }
1513
1629
 
1514
- .tds-button-group{
1515
- display:inline-flex;
1516
- }
1517
- .tds-button-group > .tds-btn{
1518
- --tds-button-group-item-z-index:1;
1519
-
1520
- position:relative;
1521
- z-index:var(--tds-button-group-item-z-index);
1522
- border-radius:0;
1523
- }
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{
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
1630
 
1557
1631
  :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{
1558
1632
  -webkit-appearance:none;
@@ -1709,80 +1783,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1709
1783
  --tds-radio-description-line-height:1.3;
1710
1784
  }
1711
1785
 
1712
- .tds-checkbox-group{
1713
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1714
- --tds-checkbox-group-line-height:1.4;
1715
- --tds-checkbox-group-gap:var(--t-spacing-1);
1716
-
1717
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1718
- --tds-checkbox-group-description-line-height:1.35;
1719
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1720
- --tds-checkbox-group-description-invalid-icon-display:none;
1721
- display:flex;
1722
- flex-direction:column;
1723
- gap:0;
1724
- padding:0;
1725
- margin:0;
1726
-
1727
- font-size:var(--tds-checkbox-group-font-size);
1728
- line-height:var(--tds-checkbox-group-line-height);
1729
- border:0;
1730
- }
1731
-
1732
- .tds-checkbox-group legend{
1733
- float:left;
1734
- padding:0;
1735
- margin:0;
1736
- }
1737
-
1738
- .tds-checkbox-group[aria-invalid="true"]{
1739
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1740
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1741
- }
1742
-
1743
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1744
- margin-left:.25ch;
1745
- color:var(--t-text-color-status-error);
1746
- content:"*";
1747
- }
1748
-
1749
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1750
- content:none;
1751
- }
1752
-
1753
- .tds-checkbox-group-fields{
1754
- display:flex;
1755
- flex-direction:column;
1756
- gap:var(--tds-checkbox-group-gap);
1757
- align-items:flex-start;
1758
- margin-top:var(--t-spacing-1);
1759
- }
1760
-
1761
- .tds-checkbox-group-description{
1762
- display:flex;
1763
- gap:var(--t-spacing-half);
1764
- align-items:flex-start;
1765
- margin:var(--t-spacing-fourth) 0 0;
1766
- font-size:var(--tds-checkbox-group-description-font-size);
1767
- line-height:var(--tds-checkbox-group-description-line-height);
1768
- color:var(--tds-checkbox-group-description-color);
1769
- cursor:text;
1770
- }
1771
-
1772
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1773
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1774
- flex-shrink:0;
1775
- margin-top:calc(.5lh - .5em);
1776
- line-height:var(--tds-checkbox-group-description-line-height);
1777
- }
1778
-
1779
- .tds-checkbox-group--sm{
1780
- --tds-checkbox-group-line-height:1.35;
1781
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1782
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1783
- --tds-checkbox-group-description-line-height:1.3;
1784
- }
1785
-
1786
1786
  .tds-modal-overlay{
1787
1787
  --tds-modal-min-margin-block:var(--t-spacing-3);
1788
1788
 
@@ -2027,111 +2027,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2027
2027
  --tds-radio-group-description-line-height:1.3;
2028
2028
  }
2029
2029
 
2030
- .tds-input:has(textarea){
2031
- --tds-input-padding-block:6px;
2032
- --tds-input-resizer-size:var(--t-element-size-sm);
2033
- --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");
2034
- }
2035
-
2036
- @supports (x: attr(x type(*))){
2037
-
2038
- .tds-input textarea{
2039
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2040
- }
2041
- }
2042
-
2043
- .tds-input.tds-textarea--resize-vertical textarea{
2044
- resize:vertical;
2045
- }
2046
-
2047
- .tds-input.tds-textarea--resize-none textarea{
2048
- resize:none;
2049
- }
2050
-
2051
- .tds-input.tds-textarea--resize-auto textarea{
2052
- resize:vertical;
2053
- }
2054
-
2055
- @supports (field-sizing: content){
2056
- .tds-input.tds-textarea--resize-auto textarea{
2057
- field-sizing:content;
2058
- resize:none;
2059
- }
2060
- }
2061
-
2062
- .tds-input textarea{
2063
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2064
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2065
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2066
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2067
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2068
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2069
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2070
- --tds-input-scrollbar-thumb-border-radius:999px;
2071
- --tds-input-scrollbar-thumb-border-width:3px;
2072
- --tds-input-scrollbar-track-margin-block:.125rem;
2073
- scrollbar-color:initial;
2074
- transition-timing-function:var(--t-ease-in-out);
2075
- transition-duration:var(--t-duration-200);
2076
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2077
- }
2078
-
2079
- @media (pointer: fine){
2080
- :is(.tds-input textarea)::-webkit-scrollbar{
2081
- width:12px;
2082
- height:12px;
2083
- cursor:default;
2084
- }
2085
-
2086
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2087
- cursor:default;
2088
- background:var(--tds-input-scrollbar-thumb-color);
2089
- background-clip:content-box;
2090
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2091
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2092
- }
2093
-
2094
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2095
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2096
- }
2097
-
2098
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2099
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2100
- }
2101
-
2102
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2103
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2104
- }
2105
-
2106
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2107
- background:var(--tds-input-scrollbar-surface-color);
2108
- }
2109
-
2110
- :is(.tds-input textarea)::-webkit-resizer{
2111
- background:var(--tds-input-resizer-icon) no-repeat;
2112
- background-position:right bottom;
2113
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2114
- }
2115
-
2116
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2117
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2118
- cursor:default;
2119
- }
2120
-
2121
- @supports (-moz-appearance: none){
2122
- :is(.tds-input textarea){
2123
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2124
- scrollbar-width:thin;
2125
- }
2126
-
2127
- @media (hover){
2128
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2129
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2130
- }
2131
- }
2132
- }
2133
- }
2134
-
2135
2030
  .tds-toggle-switch{
2136
2031
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
2032
  --tds-toggle-switch-cursor:pointer;
@@ -2272,6 +2167,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2272
2167
  --tds-toggle-switch-display:inline-flex;
2273
2168
  }
2274
2169
 
2170
+ .tds-input:has(textarea){
2171
+ --tds-input-padding-block:6px;
2172
+ --tds-input-resizer-size:var(--t-element-size-sm);
2173
+ --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");
2174
+ }
2175
+
2176
+ @supports (x: attr(x type(*))){
2177
+
2178
+ .tds-input textarea{
2179
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2180
+ }
2181
+ }
2182
+
2183
+ .tds-input.tds-textarea--resize-vertical textarea{
2184
+ resize:vertical;
2185
+ }
2186
+
2187
+ .tds-input.tds-textarea--resize-none textarea{
2188
+ resize:none;
2189
+ }
2190
+
2191
+ .tds-input.tds-textarea--resize-auto textarea{
2192
+ resize:vertical;
2193
+ }
2194
+
2195
+ @supports (field-sizing: content){
2196
+ .tds-input.tds-textarea--resize-auto textarea{
2197
+ field-sizing:content;
2198
+ resize:none;
2199
+ }
2200
+ }
2201
+
2202
+ .tds-input textarea{
2203
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2204
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2205
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2206
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2207
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2208
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2209
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2210
+ --tds-input-scrollbar-thumb-border-radius:999px;
2211
+ --tds-input-scrollbar-thumb-border-width:3px;
2212
+ --tds-input-scrollbar-track-margin-block:.125rem;
2213
+ scrollbar-color:initial;
2214
+ transition-timing-function:var(--t-ease-in-out);
2215
+ transition-duration:var(--t-duration-200);
2216
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2217
+ }
2218
+
2219
+ @media (pointer: fine){
2220
+ :is(.tds-input textarea)::-webkit-scrollbar{
2221
+ width:12px;
2222
+ height:12px;
2223
+ cursor:default;
2224
+ }
2225
+
2226
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2227
+ cursor:default;
2228
+ background:var(--tds-input-scrollbar-thumb-color);
2229
+ background-clip:content-box;
2230
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2231
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2232
+ }
2233
+
2234
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2235
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2236
+ }
2237
+
2238
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2239
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2240
+ }
2241
+
2242
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2243
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2244
+ }
2245
+
2246
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2247
+ background:var(--tds-input-scrollbar-surface-color);
2248
+ }
2249
+
2250
+ :is(.tds-input textarea)::-webkit-resizer{
2251
+ background:var(--tds-input-resizer-icon) no-repeat;
2252
+ background-position:right bottom;
2253
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2254
+ }
2255
+
2256
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2257
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2258
+ cursor:default;
2259
+ }
2260
+
2261
+ @supports (-moz-appearance: none){
2262
+ :is(.tds-input textarea){
2263
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2264
+ scrollbar-width:thin;
2265
+ }
2266
+
2267
+ @media (hover){
2268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2269
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2270
+ }
2271
+ }
2272
+ }
2273
+ }
2274
+
2275
2275
  .tds-input{
2276
2276
  --tds-input-border-color:var(--t-form-border-color);
2277
2277
  --tds-input-border-color-hover:var(--t-form-border-color-hover);