@planningcenter/tapestry 4.2.0-rc.4 → 4.2.0-rc.6

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 (11) hide show
  1. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  2. package/dist/components/page-header/PageHeader.js +2 -2
  3. package/dist/components/page-header/PageHeader.js.map +1 -1
  4. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts.map +1 -1
  5. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js +8 -3
  6. package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js.map +1 -1
  7. package/dist/reactRender.css +722 -722
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +722 -722
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,201 +677,6 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-checkbox{
681
- --tds-checkbox-font-size:var(--t-font-size-md);
682
- --tds-checkbox-cursor:pointer;
683
- --tds-checkbox-line-height:1.4;
684
- --tds-checkbox-transition-property:background-color, border-color;
685
-
686
- --tds-checkbox-input-size:var(--t-element-size-md);
687
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
- --tds-checkbox-input-border-color:var(--t-form-border-color);
689
- --tds-checkbox-input-background-color:var(--t-form-background-color);
690
-
691
- --tds-checkbox-input-icon:none;
692
- --tds-checkbox-input-icon-visibility:hidden;
693
- --tds-checkbox-input-icon-opacity:0;
694
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
695
-
696
- --tds-checkbox-label-color:var(--t-form-color);
697
-
698
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
- --tds-checkbox-description-line-height:1.35;
700
- --tds-checkbox-description-color:var(--t-text-color-secondary);
701
- --tds-checkbox-description-invalid-icon-display:none;
702
-
703
- position:relative;
704
- display:inline-grid;
705
- grid-template-columns:auto;
706
- grid-auto-columns:1fr;
707
- gap:var(--t-spacing-fourth) 0;
708
- line-height:var(--tds-checkbox-line-height);
709
- -webkit-user-select:none;
710
- -moz-user-select:none;
711
- user-select:none;
712
- }
713
-
714
- .tds-checkbox label{
715
- grid-area:1 / 2;
716
- padding-inline-start:var(--t-spacing-1);
717
- font-size:var(--tds-checkbox-font-size);
718
- font-weight:var(--t-font-weight-normal);
719
- color:var(--tds-checkbox-label-color);
720
- cursor:var(--tds-checkbox-cursor);
721
- }
722
-
723
- .tds-checkbox tds-indeterminate{
724
- display:flex;
725
- }
726
-
727
- .tds-checkbox input[type="checkbox"]{
728
- position:relative;
729
- width:1em;
730
- height:1em;
731
- margin:calc((1lh - 1em) / 2) 0 0;
732
- font-size:var(--tds-checkbox-font-size);
733
- line-height:inherit;
734
- -webkit-appearance:none;
735
- -moz-appearance:none;
736
- appearance:none;
737
- cursor:var(--tds-checkbox-cursor);
738
- background-color:var(--tds-checkbox-input-background-color);
739
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
- border-radius:var(--tds-checkbox-input-border-radius);
741
- transition-timing-function:var(--t-ease-in-out);
742
- transition-duration:var(--t-duration-200);
743
- transition-property:var(--tds-checkbox-transition-property);
744
- }
745
-
746
- :is(.tds-checkbox input[type="checkbox"])::before{
747
- position:absolute;
748
- top:50%;
749
- left:50%;
750
- visibility:var(--tds-checkbox-input-icon-visibility);
751
- width:100%;
752
- height:100%;
753
- content:"";
754
- background-color:var(--tds-checkbox-input-icon-fill);
755
- border-radius:var(--tds-checkbox-input-border-radius);
756
- opacity:var(--tds-checkbox-input-icon-opacity);
757
- -webkit-mask-image:var(--tds-checkbox-input-icon);
758
- mask-image:var(--tds-checkbox-input-icon);
759
- -webkit-mask-repeat:no-repeat;
760
- mask-repeat:no-repeat;
761
- -webkit-mask-size:contain;
762
- mask-size:contain;
763
- transform:translate(-50%, -50%);
764
- }
765
-
766
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
- }
770
-
771
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
- outline:var(--t-focus-ring-outline);
773
- outline-offset:var(--t-focus-ring-offset);
774
- }
775
-
776
- :is(.tds-checkbox input[type="checkbox"]):disabled{
777
- pointer-events:none;
778
- }
779
-
780
- @media (prefers-reduced-motion: reduce){
781
-
782
- .tds-checkbox input[type="checkbox"]{
783
- --tds-checkbox-transition-property:none;
784
- }
785
- }
786
-
787
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
- --tds-checkbox-input-icon-visibility:visible;
791
- --tds-checkbox-input-icon-opacity:1;
792
- }
793
-
794
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
- }
798
-
799
- .tds-checkbox:has(input:checked){
800
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
- }
802
-
803
- .tds-checkbox:has(input:indeterminate){
804
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
805
- }
806
-
807
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
- --tds-checkbox-description-color:var(--t-text-color-status-error);
810
- --tds-checkbox-description-invalid-icon-display:inline-block;
811
- }
812
-
813
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
- }
817
-
818
- :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{
819
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
821
- }
822
-
823
- :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){
824
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
- }
827
-
828
- .tds-checkbox:has(input:required) label::after{
829
- margin-left:.25ch;
830
- color:var(--t-text-color-status-error);
831
- content:"*";
832
- }
833
-
834
- .tds-checkbox:has(input:disabled){
835
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
837
-
838
- --tds-checkbox-label-color:var(--t-form-color-disabled);
839
- --tds-checkbox-description-color:var(--t-form-color-disabled);
840
- --tds-checkbox-cursor:not-allowed;
841
- }
842
-
843
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
845
- }
846
-
847
- .tds-checkbox-description{
848
- display:flex;
849
- grid-area:2 / 2;
850
- gap:var(--t-spacing-half);
851
- align-items:flex-start;
852
- padding-inline-start:var(--t-spacing-1);
853
- margin:0;
854
- font-size:var(--tds-checkbox-description-font-size);
855
- line-height:var(--tds-checkbox-description-line-height);
856
- color:var(--tds-checkbox-description-color);
857
- cursor:text;
858
- }
859
-
860
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
- display:var(--tds-checkbox-description-invalid-icon-display);
862
- flex-shrink:0;
863
- margin-top:calc(.5lh - .5em);
864
- line-height:var(--tds-checkbox-description-line-height);
865
- }
866
-
867
- .tds-checkbox--sm{
868
- --tds-checkbox-line-height:1.35;
869
- --tds-checkbox-input-size:var(--t-element-size-sm);
870
- --tds-checkbox-font-size:var(--t-font-size-sm);
871
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
- --tds-checkbox-description-line-height:1.3;
873
- }
874
-
875
680
 
876
681
  @media (prefers-reduced-motion: no-preference){
877
682
 
@@ -1350,29 +1155,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1155
  border-end-end-radius:var(--tds-btn-border-radius);
1351
1156
  }
1352
1157
 
1353
-
1354
- :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{
1355
- -webkit-appearance:none;
1356
- appearance:none;
1357
- }
1358
-
1359
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1360
- inline-size:1em;
1361
- block-size:2em;
1362
- }
1363
- @supports (field-sizing: content){
1364
- .tds-input--auto-width{
1365
- inline-size:-moz-fit-content;
1366
- inline-size:fit-content;
1367
- min-inline-size:min(100%, 122px);
1368
- }
1369
-
1370
- .tds-input--auto-width input{
1371
- field-sizing:content;
1372
- inline-size:auto;
1373
- }
1374
- }
1375
-
1376
1158
  .tds-modal-overlay{
1377
1159
  --tds-modal-min-margin-block:var(--t-spacing-3);
1378
1160
 
@@ -1536,281 +1318,438 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1536
1318
  }
1537
1319
  }
1538
1320
 
1539
- @layer t-critical{
1540
- tds-page-header:not(.hydrated){
1541
- display:none;
1542
- }
1543
- }
1321
+ .tds-radio-group{
1322
+ --tds-radio-group-font-size:var(--t-font-size-md);
1323
+ --tds-radio-group-line-height:1.4;
1324
+ --tds-radio-group-gap:var(--t-spacing-1);
1544
1325
 
1545
- @layer t-component{
1546
- .tds-page-header{
1547
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1548
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1549
- --tds-page-header-color:var(--t-text-color);
1550
- --tds-page-header-bottom-border-color:transparent;
1551
- --tds-page-header-headline-color:var(--t-text-color-headline);
1552
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1553
- --tds-page-header-padding-x:var(--t-spacing-2);
1554
- --tds-page-header-padding-y:var(--t-spacing-2);
1555
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1556
- --tds-page-header-nav-gap:var(--t-spacing-1);
1557
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1558
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1559
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1560
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1561
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1562
- --tds-page-header-nav-item-border-width:1px;
1326
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1327
+ --tds-radio-group-description-line-height:1.35;
1328
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1329
+ --tds-radio-group-description-invalid-icon-display:none;
1330
+ display:flex;
1331
+ flex-direction:column;
1332
+ gap:0;
1333
+ padding:0;
1334
+ margin:0;
1563
1335
 
1564
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1565
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1336
+ font-size:var(--tds-radio-group-font-size);
1337
+ line-height:var(--tds-radio-group-line-height);
1338
+ border:0;
1339
+ }
1566
1340
 
1567
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1568
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1569
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1341
+ .tds-radio-group legend{
1342
+ float:left;
1343
+ padding:0;
1344
+ margin:0;
1345
+ }
1570
1346
 
1571
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1572
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1347
+ .tds-radio-group[aria-invalid="true"]{
1348
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1349
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1350
+ }
1573
1351
 
1574
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1575
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1576
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1352
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1353
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1354
+ }
1577
1355
 
1578
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1579
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1580
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1581
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1582
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1356
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1357
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1358
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1359
+ }
1360
+
1361
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1362
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1363
+ }
1364
+
1365
+ .tds-radio-group:has(input:required) legend::after{
1366
+ margin-left:.25ch;
1367
+ color:var(--t-text-color-status-error);
1368
+ content:"*";
1369
+ }
1370
+
1371
+ .tds-radio-group-fields{
1372
+ display:flex;
1373
+ flex-direction:column;
1374
+ gap:var(--tds-radio-group-gap);
1375
+ align-items:flex-start;
1376
+ margin-top:var(--t-spacing-1);
1377
+ }
1378
+
1379
+ .tds-radio-group-description{
1380
+ display:flex;
1381
+ gap:var(--t-spacing-half);
1382
+ align-items:flex-start;
1383
+ margin:var(--t-spacing-fourth) 0 0;
1384
+ font-size:var(--tds-radio-group-description-font-size);
1385
+ line-height:var(--tds-radio-group-description-line-height);
1386
+ color:var(--tds-radio-group-description-color);
1387
+ cursor:text;
1388
+ }
1389
+
1390
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1391
+ display:var(--tds-radio-group-description-invalid-icon-display);
1392
+ flex-shrink:0;
1393
+ margin-top:calc(.5lh - .5em);
1394
+ line-height:var(--tds-radio-group-description-line-height);
1583
1395
  }
1584
1396
 
1585
- .tds-page-header--profile{
1586
- --tds-page-header-padding-y:20px;
1397
+ .tds-radio-group--sm{
1398
+ --tds-radio-group-line-height:1.35;
1399
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1400
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1401
+ --tds-radio-group-description-line-height:1.3;
1402
+ }
1403
+
1404
+ .tds-checkbox{
1405
+ --tds-checkbox-font-size:var(--t-font-size-md);
1406
+ --tds-checkbox-cursor:pointer;
1407
+ --tds-checkbox-line-height:1.4;
1408
+ --tds-checkbox-transition-property:background-color, border-color;
1409
+
1410
+ --tds-checkbox-input-size:var(--t-element-size-md);
1411
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1412
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1413
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1414
+
1415
+ --tds-checkbox-input-icon:none;
1416
+ --tds-checkbox-input-icon-visibility:hidden;
1417
+ --tds-checkbox-input-icon-opacity:0;
1418
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1419
+
1420
+ --tds-checkbox-label-color:var(--t-form-color);
1421
+
1422
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1423
+ --tds-checkbox-description-line-height:1.35;
1424
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1425
+ --tds-checkbox-description-invalid-icon-display:none;
1426
+
1427
+ position:relative;
1428
+ display:inline-grid;
1429
+ grid-template-columns:auto;
1430
+ grid-auto-columns:1fr;
1431
+ gap:var(--t-spacing-fourth) 0;
1432
+ line-height:var(--tds-checkbox-line-height);
1433
+ -webkit-user-select:none;
1434
+ -moz-user-select:none;
1435
+ user-select:none;
1436
+ }
1437
+
1438
+ .tds-checkbox label{
1439
+ grid-area:1 / 2;
1440
+ padding-inline-start:var(--t-spacing-1);
1441
+ font-size:var(--tds-checkbox-font-size);
1442
+ font-weight:var(--t-font-weight-normal);
1443
+ color:var(--tds-checkbox-label-color);
1444
+ cursor:var(--tds-checkbox-cursor);
1587
1445
  }
1588
1446
 
1589
- @supports (color: light-dark(#fff, #000)){
1590
- .tds-page-header{
1591
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1592
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1593
- }
1447
+ .tds-checkbox tds-indeterminate{
1448
+ display:flex;
1594
1449
  }
1595
1450
 
1596
- @media (min-width: 600px){
1597
- .tds-page-header{
1598
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1599
- --tds-page-header-color:var(--t-text-color-secondary);
1600
- --tds-page-header-bottom-border-color:var(--t-border-color);
1601
- --tds-page-header-padding-x:var(--t-spacing-3);
1602
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1603
- --tds-page-header-nav-gap:var(--t-spacing-half);
1604
- --tds-page-header-nav-background:transparent;
1605
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1606
- --tds-page-header-nav-item-border-width:1px;
1607
- --tds-page-header-nav-item-color:var(--t-text-color);
1608
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1609
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1610
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1611
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1612
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1613
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1451
+ .tds-checkbox input[type="checkbox"]{
1452
+ position:relative;
1453
+ width:1em;
1454
+ height:1em;
1455
+ margin:calc((1lh - 1em) / 2) 0 0;
1456
+ font-size:var(--tds-checkbox-font-size);
1457
+ line-height:inherit;
1458
+ -webkit-appearance:none;
1459
+ -moz-appearance:none;
1460
+ appearance:none;
1461
+ cursor:var(--tds-checkbox-cursor);
1462
+ background-color:var(--tds-checkbox-input-background-color);
1463
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1464
+ border-radius:var(--tds-checkbox-input-border-radius);
1465
+ transition-timing-function:var(--t-ease-in-out);
1466
+ transition-duration:var(--t-duration-200);
1467
+ transition-property:var(--tds-checkbox-transition-property);
1468
+ }
1469
+
1470
+ :is(.tds-checkbox input[type="checkbox"])::before{
1471
+ position:absolute;
1472
+ top:50%;
1473
+ left:50%;
1474
+ visibility:var(--tds-checkbox-input-icon-visibility);
1475
+ width:100%;
1476
+ height:100%;
1477
+ content:"";
1478
+ background-color:var(--tds-checkbox-input-icon-fill);
1479
+ border-radius:var(--tds-checkbox-input-border-radius);
1480
+ opacity:var(--tds-checkbox-input-icon-opacity);
1481
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1482
+ mask-image:var(--tds-checkbox-input-icon);
1483
+ -webkit-mask-repeat:no-repeat;
1484
+ mask-repeat:no-repeat;
1485
+ -webkit-mask-size:contain;
1486
+ mask-size:contain;
1487
+ transform:translate(-50%, -50%);
1488
+ }
1489
+
1490
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1491
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1492
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1614
1493
  }
1494
+
1495
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1496
+ outline:var(--t-focus-ring-outline);
1497
+ outline-offset:var(--t-focus-ring-offset);
1498
+ }
1499
+
1500
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1501
+ pointer-events:none;
1502
+ }
1503
+
1504
+ @media (prefers-reduced-motion: reduce){
1505
+
1506
+ .tds-checkbox input[type="checkbox"]{
1507
+ --tds-checkbox-transition-property:none;
1615
1508
  }
1616
- }
1509
+ }
1617
1510
 
1618
- .tds-page-header{
1619
- display:flex;
1620
- flex-direction:column;
1621
- padding-top:var(--tds-page-header-padding-y);
1622
- color:var(--tds-page-header-color);
1623
- background:var(--tds-page-header-background-color);
1624
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1625
- }
1511
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1512
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1513
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1514
+ --tds-checkbox-input-icon-visibility:visible;
1515
+ --tds-checkbox-input-icon-opacity:1;
1516
+ }
1626
1517
 
1627
- .tds-page-header:not(.has-nav){
1628
- padding-bottom:var(--tds-page-header-padding-y);
1518
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1519
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1520
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1521
+ }
1522
+
1523
+ .tds-checkbox:has(input:checked){
1524
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1629
1525
  }
1630
1526
 
1631
- .tds-page-header.inactive{
1632
- background:var(--tds-page-header-background-color-inactive);
1527
+ .tds-checkbox:has(input:indeterminate){
1528
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1633
1529
  }
1634
1530
 
1635
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1636
- width:100%;
1531
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1532
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1533
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1534
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1637
1535
  }
1638
1536
 
1639
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1640
- display:flex;
1641
- flex-flow:row wrap;
1642
- gap:var(--t-spacing-half) var(--t-spacing-1);
1643
- align-items:flex-start;
1644
- justify-content:flex-start;
1645
- min-width:0;
1537
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1538
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1539
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1540
+ }
1541
+
1542
+ :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{
1543
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1544
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1545
+ }
1546
+
1547
+ :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){
1548
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1549
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1550
+ }
1551
+
1552
+ .tds-checkbox:has(input:required) label::after{
1553
+ margin-left:.25ch;
1554
+ color:var(--t-text-color-status-error);
1555
+ content:"*";
1556
+ }
1557
+
1558
+ .tds-checkbox:has(input:disabled){
1559
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1560
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1561
+
1562
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1563
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1564
+ --tds-checkbox-cursor:not-allowed;
1646
1565
  }
1647
1566
 
1648
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1649
- display:flex;
1650
- gap:var(--tds-page-header-nav-gap);
1651
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1652
- margin:0 0 -1px;
1653
- overflow:auto;
1654
- list-style:none;
1655
- background:var(--tds-page-header-nav-background);
1567
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1568
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1656
1569
  }
1657
1570
 
1658
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1659
- position:relative;
1660
- display:inline-flex;
1661
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1662
- font-size:var(--t-font-size-sm);
1663
- line-height:22px;
1664
- color:var(--tds-page-header-nav-item-color);
1665
- white-space:nowrap;
1666
- text-decoration:none;
1571
+ .tds-checkbox-description{
1572
+ display:flex;
1573
+ grid-area:2 / 2;
1574
+ gap:var(--t-spacing-half);
1575
+ align-items:flex-start;
1576
+ padding-inline-start:var(--t-spacing-1);
1577
+ margin:0;
1578
+ font-size:var(--tds-checkbox-description-font-size);
1579
+ line-height:var(--tds-checkbox-description-line-height);
1580
+ color:var(--tds-checkbox-description-color);
1581
+ cursor:text;
1582
+ }
1583
+
1584
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1585
+ display:var(--tds-checkbox-description-invalid-icon-display);
1586
+ flex-shrink:0;
1587
+ margin-top:calc(.5lh - .5em);
1588
+ line-height:var(--tds-checkbox-description-line-height);
1589
+ }
1590
+
1591
+ .tds-checkbox--sm{
1592
+ --tds-checkbox-line-height:1.35;
1593
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1594
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1595
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1596
+ --tds-checkbox-description-line-height:1.3;
1597
+ }
1598
+
1599
+
1600
+ :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{
1667
1601
  -webkit-appearance:none;
1668
- -moz-appearance:none;
1669
1602
  appearance:none;
1670
- cursor:pointer;
1671
- outline-offset:-2px;
1672
- background-color:var(--tds-page-header-nav-item-background-color);
1673
- background-clip:padding-box;
1674
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1675
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1676
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1677
1603
  }
1678
1604
 
1679
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1680
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1681
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1682
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1683
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1684
- }
1605
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1606
+ inline-size:1em;
1607
+ block-size:2em;
1608
+ }
1609
+ @supports (field-sizing: content){
1610
+ .tds-input--auto-width{
1611
+ inline-size:-moz-fit-content;
1612
+ inline-size:fit-content;
1613
+ min-inline-size:min(100%, 122px);
1614
+ }
1685
1615
 
1686
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1687
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1688
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1689
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1690
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1691
- }
1616
+ .tds-input--auto-width input{
1617
+ field-sizing:content;
1618
+ inline-size:auto;
1619
+ }
1620
+ }
1692
1621
 
1693
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1694
- background-color:var(--tds-page-header-nav-item-background-color-active);
1695
- border-color:var(--tds-page-header-nav-item-border-color-active);
1696
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1697
- }
1622
+ .tds-radio{
1623
+ --tds-radio-font-size:var(--t-font-size-md);
1624
+ --tds-radio-cursor:pointer;
1625
+ --tds-radio-line-height:1.4;
1626
+ --tds-radio-transition-property:border-width;
1698
1627
 
1699
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1700
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1701
- color:var(--tds-page-header-nav-item-color-disabled);
1702
- cursor:not-allowed;
1703
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1704
- opacity:1;
1705
- }
1628
+ --tds-radio-input-size:var(--t-element-size-md);
1629
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1630
+ --tds-radio-input-border-color:var(--t-form-border-color);
1631
+ --tds-radio-input-border-width:var(--t-form-border-width);
1632
+ --tds-radio-input-background-color:var(--t-form-background-color);
1706
1633
 
1707
- @media (min-width: 600px){
1708
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1709
- position:absolute;
1710
- inset:auto -1px -1px;
1711
- height:1px;
1712
- pointer-events:none;
1713
- content:"";
1714
- background-color:var(--tds-page-header-bottom-border-color);
1715
- }
1716
- }
1634
+ --tds-radio-label-color:var(--t-form-color);
1635
+
1636
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1637
+ --tds-radio-description-line-height:1.35;
1638
+ --tds-radio-description-color:var(--t-text-color-secondary);
1639
+
1640
+ position:relative;
1641
+ display:inline-grid;
1642
+ grid-template-columns:auto;
1643
+ grid-auto-columns:1fr;
1644
+ gap:var(--t-spacing-fourth) 0;
1645
+ line-height:var(--tds-radio-line-height);
1646
+ -webkit-user-select:none;
1647
+ -moz-user-select:none;
1648
+ user-select:none;
1649
+ }
1650
+
1651
+ .tds-radio label{
1652
+ grid-area:1 / 2;
1653
+ padding-inline-start:var(--t-spacing-1);
1654
+ font-size:var(--tds-radio-font-size);
1655
+ font-weight:var(--t-font-weight-normal);
1656
+ color:var(--tds-radio-label-color);
1657
+ cursor:var(--tds-radio-cursor);
1658
+ }
1659
+
1660
+ .tds-radio input[type="radio"]{
1661
+ position:relative;
1662
+ width:1em;
1663
+ height:1em;
1664
+ margin:calc((1lh - 1em) / 2) 0 0;
1665
+ font-size:var(--tds-radio-font-size);
1666
+ line-height:inherit;
1667
+ -webkit-appearance:none;
1668
+ -moz-appearance:none;
1669
+ appearance:none;
1670
+ cursor:var(--tds-radio-cursor);
1671
+ background-color:var(--tds-radio-input-background-color);
1672
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1673
+ border-radius:var(--tds-radio-input-border-radius);
1674
+ transition-timing-function:var(--t-ease-in-out);
1675
+ transition-duration:var(--t-duration-200);
1676
+ transition-property:var(--tds-radio-transition-property);
1677
+ }
1717
1678
 
1718
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1719
- position:relative;
1679
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1680
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1681
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1720
1682
  }
1721
1683
 
1722
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1723
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1724
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1725
- }
1684
+ :is(.tds-radio input[type="radio"]):focus-visible{
1685
+ outline:var(--t-focus-ring-outline);
1686
+ outline-offset:var(--t-focus-ring-offset);
1687
+ }
1726
1688
 
1727
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1728
- position:absolute;
1729
- top:-5px;
1730
- right:-2px;
1731
- width:10px;
1732
- height:10px;
1733
- content:"";
1734
- background:var(--tds-page-header-nav-item-indicator-color);
1735
- border-radius:50%;
1736
- }
1689
+ :is(.tds-radio input[type="radio"]):disabled{
1690
+ pointer-events:none;
1691
+ }
1737
1692
 
1738
- @media (prefers-reduced-motion: no-preference){
1739
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1740
- animation:indicator-pulse 1.25s ease infinite;
1741
- }
1742
- }
1693
+ @media (prefers-reduced-motion: reduce){
1743
1694
 
1744
- .tds-page-header__title-bar{
1745
- display:flex;
1746
- flex-direction:column;
1747
- gap:var(--t-spacing-2) var(--t-spacing-1);
1748
- align-items:flex-start;
1749
- justify-content:space-between;
1750
- padding:0 var(--tds-page-header-padding-x);
1751
- }
1695
+ .tds-radio input[type="radio"]{
1696
+ --tds-radio-transition-property:none;
1697
+ }
1698
+ }
1752
1699
 
1753
- .tds-page-header--profile > .tds-page-header__title-bar{
1754
- align-items:center;
1700
+ .tds-radio:has(input:checked){
1701
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1702
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1703
+ --tds-radio-input-border-width:4px;
1755
1704
  }
1756
1705
 
1757
- .tds-page-header__primary{
1758
- width:100%;
1759
- }
1706
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1707
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1708
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1709
+ }
1760
1710
 
1761
- .tds-page-header__primary h1{
1762
- margin:0;
1763
- font-size:var(--tds-page-header-headline-font-size);
1764
- font-weight:var(--t-font-weight-normal);
1765
- line-height:32px;
1766
- color:var(--tds-page-header-headline-color);
1767
- overflow-wrap:break-word;
1711
+ .tds-radio:has(input:user-invalid){
1712
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1768
1713
  }
1769
1714
 
1770
- @media (min-width: 960px){
1771
- .tds-page-header__primary{
1772
- flex:1 1 max-content;
1773
- width:auto;
1774
- min-width:0;
1775
- max-width:100%;
1776
- }
1715
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1716
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1717
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1718
+ }
1777
1719
 
1778
- .tds-page-header__title-bar,
1779
- .tds-page-header--profile .tds-page-header__title-bar{
1780
- flex-flow:row nowrap;
1781
- row-gap:12px;
1782
- align-items:flex-start;
1720
+ .tds-radio:has(input:disabled){
1721
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1722
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1723
+
1724
+ --tds-radio-label-color:var(--t-form-color-disabled);
1725
+ --tds-radio-description-color:var(--t-form-color-disabled);
1726
+ --tds-radio-cursor:not-allowed;
1783
1727
  }
1784
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1785
- width:auto;
1786
- }
1787
1728
 
1788
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1789
- justify-content:flex-end;
1729
+ .tds-radio:has(input:disabled) input:checked{
1730
+ --tds-radio-input-background-color:var(--t-form-background-color);
1731
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1790
1732
  }
1791
- }
1792
1733
 
1793
- .tds-page-header-phone,
1794
- .tds-page-header-email{
1795
- color:var(--tds-page-header-color);
1796
- white-space:nowrap;
1797
- }
1798
- .tds-page-header-email{
1799
- max-width:100%;
1800
- overflow:hidden;
1801
- text-overflow:ellipsis;
1734
+ .tds-radio-description{
1735
+ display:flex;
1736
+ grid-area:2 / 2;
1737
+ gap:var(--t-spacing-half);
1738
+ align-items:flex-start;
1739
+ padding-inline-start:var(--t-spacing-1);
1740
+ margin:0;
1741
+ font-size:var(--tds-radio-description-font-size);
1742
+ line-height:var(--tds-radio-description-line-height);
1743
+ color:var(--tds-radio-description-color);
1744
+ cursor:text;
1802
1745
  }
1803
1746
 
1804
- @keyframes indicator-pulse{
1805
- 0%{
1806
- opacity:.3;
1807
- transform:scale(.9);
1808
- }
1809
-
1810
- 100%{
1811
- opacity:0;
1812
- transform:scale(1.75);
1813
- }
1747
+ .tds-radio--sm{
1748
+ --tds-radio-line-height:1.35;
1749
+ --tds-radio-input-size:var(--t-element-size-sm);
1750
+ --tds-radio-font-size:var(--t-font-size-sm);
1751
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1752
+ --tds-radio-description-line-height:1.3;
1814
1753
  }
1815
1754
 
1816
1755
  .tds-input:has(textarea){
@@ -1918,360 +1857,421 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1918
1857
  }
1919
1858
  }
1920
1859
 
1921
- .tds-radio-group{
1922
- --tds-radio-group-font-size:var(--t-font-size-md);
1923
- --tds-radio-group-line-height:1.4;
1924
- --tds-radio-group-gap:var(--t-spacing-1);
1860
+ .tds-toggle-switch{
1861
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1862
+ --tds-toggle-switch-cursor:pointer;
1863
+ --tds-toggle-switch-display:inline-grid;
1864
+ --tds-toggle-switch-line-height:1.4;
1925
1865
 
1926
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1927
- --tds-radio-group-description-line-height:1.35;
1928
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1929
- --tds-radio-group-description-invalid-icon-display:none;
1930
- display:flex;
1931
- flex-direction:column;
1932
- gap:0;
1933
- padding:0;
1934
- margin:0;
1866
+ --tds-toggle-switch-label-color:var(--t-form-color);
1935
1867
 
1936
- font-size:var(--tds-radio-group-font-size);
1937
- line-height:var(--tds-radio-group-line-height);
1938
- border:0;
1868
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1869
+ --tds-toggle-switch-track-outline:none;
1870
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1871
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1872
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1873
+
1874
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1875
+ --tds-toggle-switch-thumb-transform:translateX(0);
1876
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1877
+
1878
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1879
+ --tds-toggle-switch-description-line-height:1.35;
1880
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1881
+ position:relative;
1882
+
1883
+ display:var(--tds-toggle-switch-display);
1884
+ grid-template-columns:auto;
1885
+ grid-auto-columns:1fr;
1886
+ gap:var(--t-spacing-fourth) 0;
1887
+ -webkit-user-select:none;
1888
+ -moz-user-select:none;
1889
+ user-select:none;
1939
1890
  }
1940
1891
 
1941
- .tds-radio-group legend{
1942
- float:left;
1943
- padding:0;
1892
+ .tds-toggle-switch input[type="checkbox"]{
1893
+ position:absolute;
1894
+ width:var(--tds-toggle-switch-track-width);
1895
+ height:var(--tds-toggle-switch-track-height);
1944
1896
  margin:0;
1897
+ -webkit-appearance:none;
1898
+ -moz-appearance:none;
1899
+ appearance:none;
1900
+ cursor:var(--tds-toggle-switch-cursor);
1901
+ outline:var(--tds-toggle-switch-track-outline);
1902
+ outline-offset:var(--t-focus-ring-offset);
1903
+ background-color:transparent;
1904
+ border:0;
1905
+ border-radius:var(--t-border-radius-round);
1945
1906
  }
1946
1907
 
1947
- .tds-radio-group[aria-invalid="true"]{
1948
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1949
- --tds-radio-group-description-invalid-icon-display:inline-block;
1908
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1909
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1910
+ }
1911
+
1912
+ .tds-toggle-switch label{
1913
+ display:inline-flex;
1914
+ grid-area:1 / 2;
1915
+ padding-inline-start:var(--t-spacing-1);
1916
+ margin-top:-.09375em;
1917
+ font-size:var(--tds-toggle-switch-font-size);
1918
+ font-weight:var(--t-font-weight-normal);
1919
+ line-height:var(--tds-toggle-switch-line-height);
1920
+ color:var(--tds-toggle-switch-label-color);
1921
+ cursor:var(--tds-toggle-switch-cursor);
1950
1922
  }
1951
1923
 
1952
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1953
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1924
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1926
+ }
1927
+
1928
+ .tds-toggle-switch:has(input:checked){
1929
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1930
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1931
+ }
1932
+
1933
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1934
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1954
1935
  }
1955
1936
 
1956
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1957
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1958
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1959
- }
1937
+ .tds-toggle-switch:has(input:disabled){
1938
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1939
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1940
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1941
+ --tds-toggle-switch-cursor:not-allowed;
1942
+ }
1960
1943
 
1961
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1962
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1963
- }
1944
+ .tds-toggle-switch-track{
1945
+ position:relative;
1946
+ flex-shrink:0;
1947
+ width:var(--tds-toggle-switch-track-width);
1948
+ height:var(--tds-toggle-switch-track-height);
1949
+ background-color:var(--tds-toggle-switch-track-background-color);
1950
+ border-radius:var(--t-border-radius-round);
1951
+ transition:var(--tds-toggle-switch-track-transition);
1952
+ }
1953
+
1954
+ .tds-toggle-switch-track::before{
1955
+ position:absolute;
1956
+ top:var(--t-spacing-fourth);
1957
+ left:var(--t-spacing-fourth);
1958
+ width:var(--tds-toggle-switch-thumb-size);
1959
+ height:var(--tds-toggle-switch-thumb-size);
1960
+ content:"";
1961
+ background-color:#fff;
1962
+ border-radius:var(--t-border-radius-round);
1963
+ transform:var(--tds-toggle-switch-thumb-transform);
1964
+ transition:var(--tds-toggle-switch-thumb-transition);
1965
+ }
1964
1966
 
1965
- .tds-radio-group:has(input:required) legend::after{
1966
- margin-left:.25ch;
1967
- color:var(--t-text-color-status-error);
1968
- content:"*";
1969
- }
1967
+ @media (prefers-reduced-motion: reduce){
1970
1968
 
1971
- .tds-radio-group-fields{
1972
- display:flex;
1973
- flex-direction:column;
1974
- gap:var(--tds-radio-group-gap);
1975
- align-items:flex-start;
1976
- margin-top:var(--t-spacing-1);
1969
+ .tds-toggle-switch-track{
1970
+ --tds-toggle-switch-track-transition:none;
1971
+ --tds-toggle-switch-thumb-transition:none;
1977
1972
  }
1973
+ }
1978
1974
 
1979
- .tds-radio-group-description{
1975
+ .tds-toggle-switch-description{
1980
1976
  display:flex;
1981
- gap:var(--t-spacing-half);
1977
+ grid-area:2 / 2;
1982
1978
  align-items:flex-start;
1983
- margin:var(--t-spacing-fourth) 0 0;
1984
- font-size:var(--tds-radio-group-description-font-size);
1985
- line-height:var(--tds-radio-group-description-line-height);
1986
- color:var(--tds-radio-group-description-color);
1979
+ padding-inline-start:var(--t-spacing-1);
1980
+ margin:0;
1981
+ font-size:var(--tds-toggle-switch-description-font-size);
1982
+ line-height:var(--tds-toggle-switch-description-line-height);
1983
+ color:var(--tds-toggle-switch-description-color);
1987
1984
  cursor:text;
1988
1985
  }
1989
1986
 
1990
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1991
- display:var(--tds-radio-group-description-invalid-icon-display);
1992
- flex-shrink:0;
1993
- margin-top:calc(.5lh - .5em);
1994
- line-height:var(--tds-radio-group-description-line-height);
1995
- }
1987
+ .tds-toggle-switch--sm{
1988
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1989
+ --tds-toggle-switch-line-height:1.35;
1990
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1991
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1992
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1993
+ --tds-toggle-switch-description-line-height:1.3;
1994
+ }
1996
1995
 
1997
- .tds-radio-group--sm{
1998
- --tds-radio-group-line-height:1.35;
1999
- --tds-radio-group-font-size:var(--t-font-size-sm);
2000
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2001
- --tds-radio-group-description-line-height:1.3;
1996
+ .tds-toggle-switch--hide-label{
1997
+ --tds-toggle-switch-display:inline-flex;
2002
1998
  }
2003
1999
 
2004
- .tds-radio{
2005
- --tds-radio-font-size:var(--t-font-size-md);
2006
- --tds-radio-cursor:pointer;
2007
- --tds-radio-line-height:1.4;
2008
- --tds-radio-transition-property:border-width;
2000
+ @layer t-critical{
2001
+ tds-page-header:not(.hydrated){
2002
+ display:none;
2003
+ }
2004
+ }
2009
2005
 
2010
- --tds-radio-input-size:var(--t-element-size-md);
2011
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2012
- --tds-radio-input-border-color:var(--t-form-border-color);
2013
- --tds-radio-input-border-width:var(--t-form-border-width);
2014
- --tds-radio-input-background-color:var(--t-form-background-color);
2006
+ @layer t-component{
2007
+ .tds-page-header{
2008
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
+ --tds-page-header-color:var(--t-text-color);
2011
+ --tds-page-header-bottom-border-color:transparent;
2012
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2013
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
+ --tds-page-header-padding-x:var(--t-spacing-2);
2015
+ --tds-page-header-padding-y:var(--t-spacing-2);
2016
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2018
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2019
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
+ --tds-page-header-nav-item-border-width:1px;
2015
2024
 
2016
- --tds-radio-label-color:var(--t-form-color);
2025
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2017
2027
 
2018
- --tds-radio-description-font-size:var(--t-font-size-sm);
2019
- --tds-radio-description-line-height:1.35;
2020
- --tds-radio-description-color:var(--t-text-color-secondary);
2028
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2021
2031
 
2022
- position:relative;
2023
- display:inline-grid;
2024
- grid-template-columns:auto;
2025
- grid-auto-columns:1fr;
2026
- gap:var(--t-spacing-fourth) 0;
2027
- line-height:var(--tds-radio-line-height);
2028
- -webkit-user-select:none;
2029
- -moz-user-select:none;
2030
- user-select:none;
2031
- }
2032
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2032
2034
 
2033
- .tds-radio label{
2034
- grid-area:1 / 2;
2035
- padding-inline-start:var(--t-spacing-1);
2036
- font-size:var(--tds-radio-font-size);
2037
- font-weight:var(--t-font-weight-normal);
2038
- color:var(--tds-radio-label-color);
2039
- cursor:var(--tds-radio-cursor);
2035
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2038
+
2039
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2040
2044
  }
2041
2045
 
2042
- .tds-radio input[type="radio"]{
2043
- position:relative;
2044
- width:1em;
2045
- height:1em;
2046
- margin:calc((1lh - 1em) / 2) 0 0;
2047
- font-size:var(--tds-radio-font-size);
2048
- line-height:inherit;
2049
- -webkit-appearance:none;
2050
- -moz-appearance:none;
2051
- appearance:none;
2052
- cursor:var(--tds-radio-cursor);
2053
- background-color:var(--tds-radio-input-background-color);
2054
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2055
- border-radius:var(--tds-radio-input-border-radius);
2056
- transition-timing-function:var(--t-ease-in-out);
2057
- transition-duration:var(--t-duration-200);
2058
- transition-property:var(--tds-radio-transition-property);
2046
+ .tds-page-header--profile{
2047
+ --tds-page-header-padding-y:20px;
2059
2048
  }
2060
2049
 
2061
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2062
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2063
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2050
+ @supports (color: light-dark(#fff, #000)){
2051
+ .tds-page-header{
2052
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2064
2054
  }
2055
+ }
2065
2056
 
2066
- :is(.tds-radio input[type="radio"]):focus-visible{
2067
- outline:var(--t-focus-ring-outline);
2068
- outline-offset:var(--t-focus-ring-offset);
2057
+ @media (min-width: 600px){
2058
+ .tds-page-header{
2059
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
+ --tds-page-header-color:var(--t-text-color-secondary);
2061
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2062
+ --tds-page-header-padding-x:var(--t-spacing-3);
2063
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2065
+ --tds-page-header-nav-background:transparent;
2066
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
+ --tds-page-header-nav-item-border-width:1px;
2068
+ --tds-page-header-nav-item-color:var(--t-text-color);
2069
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2069
2075
  }
2076
+ }
2077
+ }
2070
2078
 
2071
- :is(.tds-radio input[type="radio"]):disabled{
2072
- pointer-events:none;
2073
- }
2079
+ .tds-page-header{
2080
+ display:flex;
2081
+ flex-direction:column;
2082
+ padding-top:var(--tds-page-header-padding-y);
2083
+ color:var(--tds-page-header-color);
2084
+ background:var(--tds-page-header-background-color);
2085
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2086
+ }
2074
2087
 
2075
- @media (prefers-reduced-motion: reduce){
2088
+ .tds-page-header:not(.has-nav){
2089
+ padding-bottom:var(--tds-page-header-padding-y);
2090
+ }
2076
2091
 
2077
- .tds-radio input[type="radio"]{
2078
- --tds-radio-transition-property:none;
2092
+ .tds-page-header.inactive{
2093
+ background:var(--tds-page-header-background-color-inactive);
2094
+ }
2095
+
2096
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
+ width:100%;
2098
+ }
2099
+
2100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
+ display:flex;
2102
+ flex-flow:row wrap;
2103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2104
+ align-items:flex-start;
2105
+ justify-content:flex-start;
2106
+ min-width:0;
2079
2107
  }
2108
+
2109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2110
+ display:flex;
2111
+ gap:var(--tds-page-header-nav-gap);
2112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
+ margin:0 0 -1px;
2114
+ overflow:auto;
2115
+ list-style:none;
2116
+ background:var(--tds-page-header-nav-background);
2117
+ }
2118
+
2119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
+ position:relative;
2121
+ display:inline-flex;
2122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
+ font-size:var(--t-font-size-sm);
2124
+ line-height:22px;
2125
+ color:var(--tds-page-header-nav-item-color);
2126
+ white-space:nowrap;
2127
+ text-decoration:none;
2128
+ -webkit-appearance:none;
2129
+ -moz-appearance:none;
2130
+ appearance:none;
2131
+ cursor:pointer;
2132
+ outline-offset:-2px;
2133
+ background-color:var(--tds-page-header-nav-item-background-color);
2134
+ background-clip:padding-box;
2135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2080
2138
  }
2081
2139
 
2082
- .tds-radio:has(input:checked){
2083
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2084
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2085
- --tds-radio-input-border-width:4px;
2086
- }
2140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2145
+ }
2146
+
2147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
+ }
2153
+
2154
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2156
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2157
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
+ }
2087
2159
 
2088
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2089
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2090
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2091
- }
2160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
+ color:var(--tds-page-header-nav-item-color-disabled);
2163
+ cursor:not-allowed;
2164
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
+ opacity:1;
2166
+ }
2092
2167
 
2093
- .tds-radio:has(input:user-invalid){
2094
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2095
- }
2168
+ @media (min-width: 600px){
2169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
+ position:absolute;
2171
+ inset:auto -1px -1px;
2172
+ height:1px;
2173
+ pointer-events:none;
2174
+ content:"";
2175
+ background-color:var(--tds-page-header-bottom-border-color);
2176
+ }
2177
+ }
2096
2178
 
2097
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2098
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2099
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2179
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
+ position:relative;
2100
2181
  }
2101
2182
 
2102
- .tds-radio:has(input:disabled){
2103
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2104
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2183
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2186
+ }
2105
2187
 
2106
- --tds-radio-label-color:var(--t-form-color-disabled);
2107
- --tds-radio-description-color:var(--t-form-color-disabled);
2108
- --tds-radio-cursor:not-allowed;
2109
- }
2188
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2189
+ position:absolute;
2190
+ top:-5px;
2191
+ right:-2px;
2192
+ width:10px;
2193
+ height:10px;
2194
+ content:"";
2195
+ background:var(--tds-page-header-nav-item-indicator-color);
2196
+ border-radius:50%;
2197
+ }
2110
2198
 
2111
- .tds-radio:has(input:disabled) input:checked{
2112
- --tds-radio-input-background-color:var(--t-form-background-color);
2113
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2114
- }
2199
+ @media (prefers-reduced-motion: no-preference){
2200
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
+ animation:indicator-pulse 1.25s ease infinite;
2202
+ }
2203
+ }
2115
2204
 
2116
- .tds-radio-description{
2205
+ .tds-page-header__title-bar{
2117
2206
  display:flex;
2118
- grid-area:2 / 2;
2119
- gap:var(--t-spacing-half);
2207
+ flex-direction:column;
2208
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2120
2209
  align-items:flex-start;
2121
- padding-inline-start:var(--t-spacing-1);
2122
- margin:0;
2123
- font-size:var(--tds-radio-description-font-size);
2124
- line-height:var(--tds-radio-description-line-height);
2125
- color:var(--tds-radio-description-color);
2126
- cursor:text;
2127
- }
2128
-
2129
- .tds-radio--sm{
2130
- --tds-radio-line-height:1.35;
2131
- --tds-radio-input-size:var(--t-element-size-sm);
2132
- --tds-radio-font-size:var(--t-font-size-sm);
2133
- --tds-radio-description-font-size:var(--t-font-size-xs);
2134
- --tds-radio-description-line-height:1.3;
2210
+ justify-content:space-between;
2211
+ padding:0 var(--tds-page-header-padding-x);
2135
2212
  }
2136
2213
 
2137
- .tds-toggle-switch{
2138
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2139
- --tds-toggle-switch-cursor:pointer;
2140
- --tds-toggle-switch-display:inline-grid;
2141
- --tds-toggle-switch-line-height:1.4;
2142
-
2143
- --tds-toggle-switch-label-color:var(--t-form-color);
2144
-
2145
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2146
- --tds-toggle-switch-track-outline:none;
2147
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2148
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2149
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2150
-
2151
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2152
- --tds-toggle-switch-thumb-transform:translateX(0);
2153
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2154
-
2155
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2156
- --tds-toggle-switch-description-line-height:1.35;
2157
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2158
- position:relative;
2214
+ .tds-page-header--profile > .tds-page-header__title-bar{
2215
+ align-items:center;
2216
+ }
2159
2217
 
2160
- display:var(--tds-toggle-switch-display);
2161
- grid-template-columns:auto;
2162
- grid-auto-columns:1fr;
2163
- gap:var(--t-spacing-fourth) 0;
2164
- -webkit-user-select:none;
2165
- -moz-user-select:none;
2166
- user-select:none;
2218
+ .tds-page-header__primary{
2219
+ width:100%;
2167
2220
  }
2168
2221
 
2169
- .tds-toggle-switch input[type="checkbox"]{
2170
- position:absolute;
2171
- width:var(--tds-toggle-switch-track-width);
2172
- height:var(--tds-toggle-switch-track-height);
2222
+ .tds-page-header__primary h1{
2173
2223
  margin:0;
2174
- -webkit-appearance:none;
2175
- -moz-appearance:none;
2176
- appearance:none;
2177
- cursor:var(--tds-toggle-switch-cursor);
2178
- outline:var(--tds-toggle-switch-track-outline);
2179
- outline-offset:var(--t-focus-ring-offset);
2180
- background-color:transparent;
2181
- border:0;
2182
- border-radius:var(--t-border-radius-round);
2183
- }
2184
-
2185
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2186
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2187
- }
2188
-
2189
- .tds-toggle-switch label{
2190
- display:inline-flex;
2191
- grid-area:1 / 2;
2192
- padding-inline-start:var(--t-spacing-1);
2193
- margin-top:-.09375em;
2194
- font-size:var(--tds-toggle-switch-font-size);
2224
+ font-size:var(--tds-page-header-headline-font-size);
2195
2225
  font-weight:var(--t-font-weight-normal);
2196
- line-height:var(--tds-toggle-switch-line-height);
2197
- color:var(--tds-toggle-switch-label-color);
2198
- cursor:var(--tds-toggle-switch-cursor);
2226
+ line-height:32px;
2227
+ color:var(--tds-page-header-headline-color);
2228
+ overflow-wrap:break-word;
2199
2229
  }
2200
2230
 
2201
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2202
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2231
+ @media (min-width: 960px){
2232
+ .tds-page-header__primary{
2233
+ flex:1 1 max-content;
2234
+ width:auto;
2235
+ min-width:0;
2236
+ max-width:100%;
2203
2237
  }
2204
2238
 
2205
- .tds-toggle-switch:has(input:checked){
2206
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2207
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2239
+ .tds-page-header__title-bar,
2240
+ .tds-page-header--profile .tds-page-header__title-bar{
2241
+ flex-flow:row nowrap;
2242
+ row-gap:12px;
2243
+ align-items:flex-start;
2208
2244
  }
2209
-
2210
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2211
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2245
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
+ width:auto;
2212
2247
  }
2213
2248
 
2214
- .tds-toggle-switch:has(input:disabled){
2215
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2216
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2217
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2218
- --tds-toggle-switch-cursor:not-allowed;
2219
- }
2220
-
2221
- .tds-toggle-switch-track{
2222
- position:relative;
2223
- flex-shrink:0;
2224
- width:var(--tds-toggle-switch-track-width);
2225
- height:var(--tds-toggle-switch-track-height);
2226
- background-color:var(--tds-toggle-switch-track-background-color);
2227
- border-radius:var(--t-border-radius-round);
2228
- transition:var(--tds-toggle-switch-track-transition);
2249
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
+ justify-content:flex-end;
2251
+ }
2229
2252
  }
2230
2253
 
2231
- .tds-toggle-switch-track::before{
2232
- position:absolute;
2233
- top:var(--t-spacing-fourth);
2234
- left:var(--t-spacing-fourth);
2235
- width:var(--tds-toggle-switch-thumb-size);
2236
- height:var(--tds-toggle-switch-thumb-size);
2237
- content:"";
2238
- background-color:#fff;
2239
- border-radius:var(--t-border-radius-round);
2240
- transform:var(--tds-toggle-switch-thumb-transform);
2241
- transition:var(--tds-toggle-switch-thumb-transition);
2242
- }
2243
-
2244
- @media (prefers-reduced-motion: reduce){
2245
-
2246
- .tds-toggle-switch-track{
2247
- --tds-toggle-switch-track-transition:none;
2248
- --tds-toggle-switch-thumb-transition:none;
2254
+ .tds-page-header-phone,
2255
+ .tds-page-header-email{
2256
+ color:var(--tds-page-header-color);
2257
+ white-space:nowrap;
2249
2258
  }
2250
- }
2251
-
2252
- .tds-toggle-switch-description{
2253
- display:flex;
2254
- grid-area:2 / 2;
2255
- align-items:flex-start;
2256
- padding-inline-start:var(--t-spacing-1);
2257
- margin:0;
2258
- font-size:var(--tds-toggle-switch-description-font-size);
2259
- line-height:var(--tds-toggle-switch-description-line-height);
2260
- color:var(--tds-toggle-switch-description-color);
2261
- cursor:text;
2259
+ .tds-page-header-email{
2260
+ max-width:100%;
2261
+ overflow:hidden;
2262
+ text-overflow:ellipsis;
2262
2263
  }
2263
2264
 
2264
- .tds-toggle-switch--sm{
2265
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2266
- --tds-toggle-switch-line-height:1.35;
2267
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2268
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2269
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2270
- --tds-toggle-switch-description-line-height:1.3;
2271
- }
2265
+ @keyframes indicator-pulse{
2266
+ 0%{
2267
+ opacity:.3;
2268
+ transform:scale(.9);
2269
+ }
2272
2270
 
2273
- .tds-toggle-switch--hide-label{
2274
- --tds-toggle-switch-display:inline-flex;
2271
+ 100%{
2272
+ opacity:0;
2273
+ transform:scale(1.75);
2274
+ }
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{