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

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 (7) hide show
  1. package/dist/reactRender.css +1125 -1125
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1125 -1125
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/tapestry-reset.css +7 -2
  6. package/dist/tapestry-reset.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,243 +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
- .tds-button-group{
876
- display:inline-flex;
877
- }
878
- .tds-button-group > .tds-btn{
879
- --tds-button-group-item-z-index:1;
880
-
881
- position:relative;
882
- z-index:var(--tds-button-group-item-z-index);
883
- border-radius:0;
884
- }
885
- :is(.tds-button-group > .tds-btn):not(:first-child){
886
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
887
- }
888
- :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{
889
- position:absolute;
890
- inset-block:calc(var(--tds-btn-border-width) * -1);
891
- width:var(--tds-btn-border-width);
892
- pointer-events:none;
893
- content:"";
894
- background-color:var(--t-border-color-white);
895
- }
896
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
897
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
898
- }
899
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
900
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
901
- }
902
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
903
- --tds-button-group-item-z-index:2;
904
- }
905
- :is(.tds-button-group > .tds-btn):focus-visible{
906
- --tds-button-group-item-z-index:5;
907
- }
908
- .tds-button-group > .tds-btn:first-child{
909
- border-start-start-radius:var(--tds-btn-border-radius);
910
- border-end-start-radius:var(--tds-btn-border-radius);
911
- }
912
- .tds-button-group > .tds-btn:last-child{
913
- border-start-end-radius:var(--tds-btn-border-radius);
914
- border-end-end-radius:var(--tds-btn-border-radius);
915
- }
916
-
917
680
 
918
681
  @media (prefers-reduced-motion: no-preference){
919
682
 
@@ -1276,1193 +1039,1430 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1276
1039
  flex-direction:column;
1277
1040
  }
1278
1041
 
1279
- .tds-currency-input-control{
1280
- display:flex;
1281
- gap:var(--t-spacing-half);
1282
- align-items:center;
1283
- inline-size:100%;
1284
- min-block-size:var(--tds-field-min-height);
1285
- padding-inline:var(--tds-field-padding-inline);
1286
- font-size:var(--tds-field-font-size);
1287
- color:var(--tds-field-color);
1288
- cursor:text;
1289
- outline:var(--t-focus-ring-width) solid transparent;
1290
- background-color:var(--tds-field-background-color);
1291
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1292
- border-radius:var(--t-form-border-radius);
1293
- transition-timing-function:var(--t-ease-in-out);
1294
- transition-duration:var(--t-duration-200);
1295
- transition-property:background-color, border-color, outline-color, outline-offset;
1296
- }
1297
-
1298
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1299
- border-color:var(--tds-field-border-color-hover);
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1300
1045
  }
1046
+ }
1301
1047
 
1302
- .tds-currency-input-control:has(input:focus){
1303
- outline-color:var(--t-focus-ring-color);
1304
- outline-offset:var(--t-focus-ring-offset);
1305
- border-color:var(--tds-field-border-color-active);
1306
- }
1048
+ @layer t-component{
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
+ --tds-page-header-color:var(--t-text-color);
1053
+ --tds-page-header-bottom-border-color:transparent;
1054
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1055
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
+ --tds-page-header-padding-x:var(--t-spacing-2);
1057
+ --tds-page-header-padding-y:var(--t-spacing-2);
1058
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1060
+ --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%);
1061
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
+ --tds-page-header-nav-item-border-width:1px;
1307
1066
 
1308
- .tds-currency-input-control input{
1309
- flex:1;
1310
- min-inline-size:0;
1311
- padding:0;
1312
- font-family:inherit;
1313
- font-size:inherit;
1314
- color:inherit;
1315
- -webkit-appearance:none;
1316
- -moz-appearance:none;
1317
- appearance:none;
1318
- outline:0;
1319
- background-color:transparent;
1320
- border:0;
1321
- }
1067
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1322
1069
 
1323
- :is(.tds-currency-input-control input)::-moz-placeholder{
1324
- color:var(--tds-field-placeholder-color);
1325
- -moz-user-select:none;
1326
- user-select:none;
1327
- }
1070
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1328
1073
 
1329
- :is(.tds-currency-input-control input)::placeholder{
1330
- color:var(--tds-field-placeholder-color);
1331
- -webkit-user-select:none;
1332
- -moz-user-select:none;
1333
- user-select:none;
1334
- }
1074
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1075
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1335
1076
 
1336
- .tds-currency-input-control .tds-currency-input-prefix{
1337
- flex-shrink:0;
1338
- color:var(--t-text-color-secondary);
1339
- pointer-events:none;
1340
- -webkit-user-select:none;
1341
- -moz-user-select:none;
1342
- user-select:none;
1343
- }
1077
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1078
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1079
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1344
1080
 
1345
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1346
- --tds-field-background-color:var(--t-form-background-color-error);
1347
- --tds-field-border-color:var(--t-form-border-color-error);
1348
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1081
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1349
1086
  }
1350
1087
 
1351
- .tds-currency-input-control:has(:disabled){
1352
- --tds-field-border-color:var(--t-form-border-color-disabled);
1353
- --tds-field-background-color:var(--t-form-background-color-disabled);
1354
- --tds-field-color:var(--t-form-color-disabled);
1355
-
1356
- cursor:not-allowed;
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1357
1090
  }
1358
1091
 
1359
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1360
- color:var(--tds-field-color);
1092
+ @supports (color: light-dark(#fff, #000)){
1093
+ .tds-page-header{
1094
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1361
1096
  }
1362
-
1363
- .tds-currency-input-control:has([readonly]){
1364
- --tds-field-border-color:var(--t-form-border-color-readonly);
1365
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1366
- --tds-field-background-color:var(--t-form-background-color-readonly);
1367
- --tds-field-color:var(--t-form-color-readonly);
1368
1097
  }
1369
1098
 
1370
- .tds-currency-input-control:has([readonly]):has(input:focus){
1371
- border-color:var(--t-form-border-color-hover);
1099
+ @media (min-width: 600px){
1100
+ .tds-page-header{
1101
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
+ --tds-page-header-color:var(--t-text-color-secondary);
1103
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1104
+ --tds-page-header-padding-x:var(--t-spacing-3);
1105
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1107
+ --tds-page-header-nav-background:transparent;
1108
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
+ --tds-page-header-nav-item-border-width:1px;
1110
+ --tds-page-header-nav-item-color:var(--t-text-color);
1111
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1372
1117
  }
1373
- .tds-currency-input-currency-name--hidden{
1374
- position:absolute;
1375
- width:1px;
1376
- height:1px;
1377
- overflow:hidden;
1378
- white-space:nowrap;
1379
- clip-path:inset(50%);
1118
+ }
1380
1119
  }
1381
1120
 
1382
- .tds-checkbox-group{
1383
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1384
- --tds-checkbox-group-line-height:1.4;
1385
- --tds-checkbox-group-gap:var(--t-spacing-1);
1386
-
1387
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1388
- --tds-checkbox-group-description-line-height:1.35;
1389
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1390
- --tds-checkbox-group-description-invalid-icon-display:none;
1121
+ .tds-page-header{
1391
1122
  display:flex;
1392
1123
  flex-direction:column;
1393
- gap:0;
1394
- padding:0;
1395
- margin:0;
1396
-
1397
- font-size:var(--tds-checkbox-group-font-size);
1398
- line-height:var(--tds-checkbox-group-line-height);
1399
- border:0;
1124
+ padding-top:var(--tds-page-header-padding-y);
1125
+ color:var(--tds-page-header-color);
1126
+ background:var(--tds-page-header-background-color);
1127
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1400
1128
  }
1401
1129
 
1402
- .tds-checkbox-group legend{
1403
- float:left;
1404
- padding:0;
1405
- margin:0;
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1406
1132
  }
1407
1133
 
1408
- .tds-checkbox-group[aria-invalid="true"]{
1409
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1410
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1411
1136
  }
1412
1137
 
1413
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1414
- margin-left:.25ch;
1415
- color:var(--t-text-color-status-error);
1416
- content:"*";
1417
- }
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1140
+ }
1418
1141
 
1419
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1420
- content:none;
1142
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1143
+ display:flex;
1144
+ flex-flow:row wrap;
1145
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1146
+ align-items:flex-start;
1147
+ justify-content:flex-start;
1148
+ min-width:0;
1149
+ }
1150
+
1151
+ :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{
1152
+ display:flex;
1153
+ gap:var(--tds-page-header-nav-gap);
1154
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
+ margin:0 0 -1px;
1156
+ overflow:auto;
1157
+ list-style:none;
1158
+ background:var(--tds-page-header-nav-background);
1421
1159
  }
1422
1160
 
1423
- .tds-checkbox-group-fields{
1424
- display:flex;
1425
- flex-direction:column;
1426
- gap:var(--tds-checkbox-group-gap);
1427
- align-items:flex-start;
1428
- margin-top:var(--t-spacing-1);
1429
- }
1161
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
+ position:relative;
1163
+ display:inline-flex;
1164
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
+ font-size:var(--t-font-size-sm);
1166
+ line-height:22px;
1167
+ color:var(--tds-page-header-nav-item-color);
1168
+ white-space:nowrap;
1169
+ text-decoration:none;
1170
+ -webkit-appearance:none;
1171
+ -moz-appearance:none;
1172
+ appearance:none;
1173
+ cursor:pointer;
1174
+ outline-offset:-2px;
1175
+ background-color:var(--tds-page-header-nav-item-background-color);
1176
+ background-clip:padding-box;
1177
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1180
+ }
1430
1181
 
1431
- .tds-checkbox-group-description{
1432
- display:flex;
1433
- gap:var(--t-spacing-half);
1434
- align-items:flex-start;
1435
- margin:var(--t-spacing-fourth) 0 0;
1436
- font-size:var(--tds-checkbox-group-description-font-size);
1437
- line-height:var(--tds-checkbox-group-description-line-height);
1438
- color:var(--tds-checkbox-group-description-color);
1439
- cursor:text;
1440
- }
1182
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1187
+ }
1441
1188
 
1442
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1443
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1444
- flex-shrink:0;
1445
- margin-top:calc(.5lh - .5em);
1446
- line-height:var(--tds-checkbox-group-description-line-height);
1447
- }
1189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
+ }
1448
1195
 
1449
- .tds-checkbox-group--sm{
1450
- --tds-checkbox-group-line-height:1.35;
1451
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1452
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1453
- --tds-checkbox-group-description-line-height:1.3;
1454
- }
1196
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1198
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1199
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ }
1455
1201
 
1456
- .tds-modal-overlay{
1457
- --tds-modal-min-margin-block:var(--t-spacing-3);
1202
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1458
1209
 
1459
- position:fixed;
1460
- inset:0;
1461
- z-index:1000;
1462
- display:grid;
1463
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1464
- justify-items:center;
1465
- overflow-y:auto;
1466
- background:hsl(0 0% 0% / 40%);
1467
- }
1210
+ @media (min-width: 600px){
1211
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
+ position:absolute;
1213
+ inset:auto -1px -1px;
1214
+ height:1px;
1215
+ pointer-events:none;
1216
+ content:"";
1217
+ background-color:var(--tds-page-header-bottom-border-color);
1218
+ }
1219
+ }
1468
1220
 
1469
- .tds-modal-overlay[data-entering]{
1470
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1471
- }
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1223
+ }
1472
1224
 
1473
- .tds-modal-overlay[data-exiting]{
1474
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1475
- }
1225
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
+ }
1476
1229
 
1477
- @keyframes tds-modal-overlay-fade{
1478
- from{
1479
- opacity:0;
1480
- }
1481
- }
1230
+ :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{
1231
+ position:absolute;
1232
+ top:-5px;
1233
+ right:-2px;
1234
+ width:10px;
1235
+ height:10px;
1236
+ content:"";
1237
+ background:var(--tds-page-header-nav-item-indicator-color);
1238
+ border-radius:50%;
1239
+ }
1482
1240
 
1483
- .tds-modal-frame{
1484
- --tds-modal-width:600px;
1485
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1241
+ @media (prefers-reduced-motion: no-preference){
1242
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
+ animation:indicator-pulse 1.25s ease infinite;
1244
+ }
1245
+ }
1246
+
1247
+ .tds-page-header__title-bar{
1486
1248
  display:flex;
1249
+ flex-direction:column;
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1251
+ align-items:flex-start;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1254
+ }
1487
1255
 
1488
- grid-row:2;
1489
- justify-content:center;
1490
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1258
+ }
1259
+
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1491
1262
  }
1492
1263
 
1493
- .tds-modal-frame[data-entering]{
1494
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1264
+ .tds-page-header__primary h1{
1265
+ margin:0;
1266
+ font-size:var(--tds-page-header-headline-font-size);
1267
+ font-weight:var(--t-font-weight-normal);
1268
+ line-height:32px;
1269
+ color:var(--tds-page-header-headline-color);
1270
+ overflow-wrap:break-word;
1495
1271
  }
1496
1272
 
1497
- .tds-modal-frame[data-exiting]{
1498
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1273
+ @media (min-width: 960px){
1274
+ .tds-page-header__primary{
1275
+ flex:1 1 max-content;
1276
+ width:auto;
1277
+ min-width:0;
1278
+ max-width:100%;
1499
1279
  }
1500
1280
 
1501
- .tds-modal-frame--sm{
1502
- --tds-modal-width:400px;
1503
- }
1281
+ .tds-page-header__title-bar,
1282
+ .tds-page-header--profile .tds-page-header__title-bar{
1283
+ flex-flow:row nowrap;
1284
+ row-gap:12px;
1285
+ align-items:flex-start;
1286
+ }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1289
+ }
1504
1290
 
1505
- .tds-modal-frame--lg{
1506
- --tds-modal-width:800px;
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1293
+ }
1507
1294
  }
1508
1295
 
1509
- .tds-modal-frame--xl{
1510
- --tds-modal-width:1000px;
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1300
+ }
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1511
1305
  }
1512
1306
 
1513
- @keyframes tds-modal-zoom{
1514
- from{
1515
- opacity:0;
1516
- scale:.96;
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1517
1311
  }
1518
- }
1519
1312
 
1520
- @media (prefers-reduced-motion: reduce){
1521
- .tds-modal-overlay[data-entering],
1522
- .tds-modal-overlay[data-exiting],
1523
- .tds-modal-frame[data-entering],
1524
- .tds-modal-frame[data-exiting]{
1525
- animation:none;
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1526
1316
  }
1527
1317
  }
1528
1318
 
1529
- .tds-modal{
1319
+ .tds-checkbox-group{
1320
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-group-line-height:1.4;
1322
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1323
+
1324
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1325
+ --tds-checkbox-group-description-line-height:1.35;
1326
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1327
+ --tds-checkbox-group-description-invalid-icon-display:none;
1530
1328
  display:flex;
1531
1329
  flex-direction:column;
1532
- width:100%;
1533
- padding-block-start:var(--t-spacing-3);
1534
- padding-inline:0;
1535
- background:var(--t-surface-color-card);
1330
+ gap:0;
1331
+ padding:0;
1332
+ margin:0;
1536
1333
 
1334
+ font-size:var(--tds-checkbox-group-font-size);
1335
+ line-height:var(--tds-checkbox-group-line-height);
1537
1336
  border:0;
1538
- border-radius:var(--t-border-radius-lg);
1539
- box-shadow:0 4px 18px 0 #0003;
1540
1337
  }
1541
1338
 
1542
- .tds-modal:focus{
1543
- outline:none;
1339
+ .tds-checkbox-group legend{
1340
+ float:left;
1341
+ padding:0;
1342
+ margin:0;
1544
1343
  }
1545
1344
 
1546
- .tds-modal-header{
1547
- display:grid;
1548
- grid-template-columns:1fr auto;
1549
- -moz-column-gap:var(--t-spacing-2);
1550
- column-gap:var(--t-spacing-2);
1551
- padding-block:0;
1552
- padding-inline:var(--t-spacing-4);
1553
- }
1345
+ .tds-checkbox-group[aria-invalid="true"]{
1346
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1347
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1348
+ }
1554
1349
 
1555
- .tds-modal-title{
1556
- grid-row:1;
1557
- grid-column:1;
1558
- margin:0;
1559
- font-size:var(--t-font-size-2xl);
1560
- font-weight:var(--t-font-weight-medium);
1561
- line-height:140%;
1562
- color:var(--t-text-color-headline);
1563
- }
1350
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1351
+ margin-left:.25ch;
1352
+ color:var(--t-text-color-status-error);
1353
+ content:"*";
1354
+ }
1564
1355
 
1565
- .tds-modal-subtitle{
1566
- grid-row:2;
1567
- grid-column:1;
1568
- margin:0;
1569
- font-size:var(--t-font-size-md);
1570
- font-weight:var(--t-font-weight-medium);
1571
- line-height:140%;
1572
- color:var(--t-text-color-secondary);
1573
- }
1356
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1357
+ content:none;
1358
+ }
1574
1359
 
1575
- .tds-modal-close{
1576
- grid-row:1;
1577
- grid-column:2;
1578
- align-self:center;
1579
- color:var(--t-icon-color-dim);
1360
+ .tds-checkbox-group-fields{
1361
+ display:flex;
1362
+ flex-direction:column;
1363
+ gap:var(--tds-checkbox-group-gap);
1364
+ align-items:flex-start;
1365
+ margin-top:var(--t-spacing-1);
1580
1366
  }
1581
1367
 
1582
- .tds-modal-body{
1583
- padding-block:var(--t-spacing-3);
1584
- padding-inline:var(--t-spacing-4);
1368
+ .tds-checkbox-group-description{
1369
+ display:flex;
1370
+ gap:var(--t-spacing-half);
1371
+ align-items:flex-start;
1372
+ margin:var(--t-spacing-fourth) 0 0;
1373
+ font-size:var(--tds-checkbox-group-description-font-size);
1374
+ line-height:var(--tds-checkbox-group-description-line-height);
1375
+ color:var(--tds-checkbox-group-description-color);
1376
+ cursor:text;
1585
1377
  }
1586
1378
 
1587
- .tds-modal-body--full-width{
1588
- padding-inline:0;
1589
- }
1379
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1380
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1381
+ flex-shrink:0;
1382
+ margin-top:calc(.5lh - .5em);
1383
+ line-height:var(--tds-checkbox-group-description-line-height);
1384
+ }
1590
1385
 
1591
- .tds-modal-footer{
1592
- display:flex;
1593
- gap:var(--t-spacing-2);
1594
- align-items:center;
1595
- justify-content:flex-end;
1596
- padding-block:var(--t-spacing-3);
1597
- padding-inline:var(--t-spacing-4);
1598
- border-top:1px solid var(--t-border-color);
1386
+ .tds-checkbox-group--sm{
1387
+ --tds-checkbox-group-line-height:1.35;
1388
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1389
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1390
+ --tds-checkbox-group-description-line-height:1.3;
1599
1391
  }
1600
1392
 
1601
- .tds-modal-footer > [slot="start"]{
1602
- margin-inline-end:auto;
1393
+ .tds-button-group{
1394
+ display:inline-flex;
1603
1395
  }
1396
+ .tds-button-group > .tds-btn{
1397
+ --tds-button-group-item-z-index:1;
1604
1398
 
1605
- @media (min-width: 720px){
1606
- .tds-modal-overlay{
1607
- --tds-modal-min-margin-block:0;
1608
- }
1609
-
1610
- .tds-modal-footer{
1611
- position:sticky;
1612
- bottom:0;
1613
- background:var(--t-surface-color-card);
1614
- border-end-start-radius:var(--t-border-radius-lg);
1615
- border-end-end-radius:var(--t-border-radius-lg);
1399
+ position:relative;
1400
+ z-index:var(--tds-button-group-item-z-index);
1401
+ border-radius:0;
1616
1402
  }
1617
- }
1618
-
1619
-
1620
- :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{
1621
- -webkit-appearance:none;
1622
- appearance:none;
1403
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1404
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1623
1405
  }
1624
-
1625
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1626
- inline-size:1em;
1627
- block-size:2em;
1406
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1407
+ position:absolute;
1408
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1409
+ width:var(--tds-btn-border-width);
1410
+ pointer-events:none;
1411
+ content:"";
1412
+ background-color:var(--t-border-color-white);
1413
+ }
1414
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1415
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1416
+ }
1417
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1418
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1419
+ }
1420
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1421
+ --tds-button-group-item-z-index:2;
1628
1422
  }
1629
-
1630
- [type="file"]:is(.tds-input input){
1631
- padding-block:var(--t-spacing-half);
1632
- padding-inline-start:var(--t-spacing-half);
1423
+ :is(.tds-button-group > .tds-btn):focus-visible{
1424
+ --tds-button-group-item-z-index:5;
1633
1425
  }
1426
+ .tds-button-group > .tds-btn:first-child{
1427
+ border-start-start-radius:var(--tds-btn-border-radius);
1428
+ border-end-start-radius:var(--tds-btn-border-radius);
1429
+ }
1430
+ .tds-button-group > .tds-btn:last-child{
1431
+ border-start-end-radius:var(--tds-btn-border-radius);
1432
+ border-end-end-radius:var(--tds-btn-border-radius);
1433
+ }
1634
1434
 
1635
- [type="file"]:is(.tds-input input):not(:disabled){
1636
- color:var(--t-text-color-secondary);
1637
- }
1435
+ .tds-currency-input-control{
1436
+ display:flex;
1437
+ gap:var(--t-spacing-half);
1438
+ align-items:center;
1439
+ inline-size:100%;
1440
+ min-block-size:var(--tds-field-min-height);
1441
+ padding-inline:var(--tds-field-padding-inline);
1442
+ font-size:var(--tds-field-font-size);
1443
+ color:var(--tds-field-color);
1444
+ cursor:text;
1445
+ outline:var(--t-focus-ring-width) solid transparent;
1446
+ background-color:var(--tds-field-background-color);
1447
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1448
+ border-radius:var(--t-form-border-radius);
1449
+ transition-timing-function:var(--t-ease-in-out);
1450
+ transition-duration:var(--t-duration-200);
1451
+ transition-property:background-color, border-color, outline-color, outline-offset;
1452
+ }
1638
1453
 
1639
- [type="file"]:is(.tds-input input)::file-selector-button{
1640
- --_file-btn-padding-block:3px;
1454
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1455
+ border-color:var(--tds-field-border-color-hover);
1456
+ }
1641
1457
 
1642
- padding-block:var(--_file-btn-padding-block);
1643
- padding-inline:12px;
1644
- margin-inline-end:12px;
1645
- font:inherit;
1646
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1647
- color:var(--t-text-color-status-neutral);
1648
- cursor:pointer;
1649
- background-color:var(--t-fill-color-button-neutral-solid);
1650
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1651
- border-radius:var(--t-border-radius-md);
1652
- transition-timing-function:var(--t-ease-in-out);
1653
- transition-duration:var(--t-duration-200);
1654
- transition-property:color, background-color, border-color;
1655
- }
1458
+ .tds-currency-input-control:has(input:focus){
1459
+ outline-color:var(--t-focus-ring-color);
1460
+ outline-offset:var(--t-focus-ring-offset);
1461
+ border-color:var(--tds-field-border-color-active);
1462
+ }
1656
1463
 
1657
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1658
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1659
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1660
- }
1464
+ .tds-currency-input-control input{
1465
+ flex:1;
1466
+ min-inline-size:0;
1467
+ padding:0;
1468
+ font-family:inherit;
1469
+ font-size:inherit;
1470
+ color:inherit;
1471
+ -webkit-appearance:none;
1472
+ -moz-appearance:none;
1473
+ appearance:none;
1474
+ outline:0;
1475
+ background-color:transparent;
1476
+ border:0;
1477
+ }
1661
1478
 
1662
- [type="file"]:is(.tds-input input):active::file-selector-button{
1663
- background-color:var(--t-fill-color-button-neutral-solid-active);
1664
- border-color:var(--t-fill-color-button-neutral-solid-active);
1665
- }
1479
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1480
+ color:var(--tds-field-placeholder-color);
1481
+ -moz-user-select:none;
1482
+ user-select:none;
1483
+ }
1666
1484
 
1667
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1668
- color:var(--t-text-color-disabled);
1669
- pointer-events:none;
1670
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1671
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1672
- }
1673
- @supports (field-sizing: content){
1674
- .tds-input--auto-width{
1675
- inline-size:-moz-fit-content;
1676
- inline-size:fit-content;
1677
- min-inline-size:min(100%, 122px);
1485
+ :is(.tds-currency-input-control input)::placeholder{
1486
+ color:var(--tds-field-placeholder-color);
1487
+ -webkit-user-select:none;
1488
+ -moz-user-select:none;
1489
+ user-select:none;
1490
+ }
1491
+
1492
+ .tds-currency-input-control .tds-currency-input-prefix{
1493
+ flex-shrink:0;
1494
+ color:var(--t-text-color-secondary);
1495
+ pointer-events:none;
1496
+ -webkit-user-select:none;
1497
+ -moz-user-select:none;
1498
+ user-select:none;
1678
1499
  }
1679
1500
 
1680
- .tds-input--auto-width input{
1681
- field-sizing:content;
1682
- inline-size:auto;
1501
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1502
+ --tds-field-background-color:var(--t-form-background-color-error);
1503
+ --tds-field-border-color:var(--t-form-border-color-error);
1504
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1683
1505
  }
1684
- }
1685
1506
 
1686
- .tds-popover{
1687
- max-inline-size:24rem;
1688
- overflow:auto;
1689
- overscroll-behavior:none;
1690
- outline:0;
1691
- scrollbar-color:#0004 var(--t-surface-color-card);
1692
- scrollbar-width:thin;
1693
- background:var(--t-surface-color-card);
1694
- background-clip:padding-box;
1695
- border:1px solid var(--t-border-color);
1696
- border-radius:var(--t-border-radius);
1697
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1698
- }
1507
+ .tds-currency-input-control:has(:disabled){
1508
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1509
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1510
+ --tds-field-color:var(--t-form-color-disabled);
1699
1511
 
1700
- @media (prefers-reduced-motion: no-preference){
1701
- .tds-popover[data-entering]{
1702
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1703
- }
1512
+ cursor:not-allowed;
1513
+ }
1704
1514
 
1705
- .tds-popover[data-exiting]{
1706
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1515
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1516
+ color:var(--tds-field-color);
1707
1517
  }
1708
1518
 
1709
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1710
- will-change:opacity, transform;
1711
- }
1519
+ .tds-currency-input-control:has([readonly]){
1520
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1521
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1522
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1523
+ --tds-field-color:var(--t-form-color-readonly);
1524
+ }
1712
1525
 
1713
- @keyframes tds-popover{
1714
- from{
1715
- opacity:0;
1716
- transform:translateY(-8px);
1526
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1527
+ border-color:var(--t-form-border-color-hover);
1717
1528
  }
1718
- }
1529
+ .tds-currency-input-currency-name--hidden{
1530
+ position:absolute;
1531
+ width:1px;
1532
+ height:1px;
1533
+ overflow:hidden;
1534
+ white-space:nowrap;
1535
+ clip-path:inset(50%);
1719
1536
  }
1720
1537
 
1721
- .tds-popover-content{
1722
- display:flex;
1723
- flex-direction:column;
1724
- padding:var(--t-spacing-1);
1725
- outline:0;
1726
- }
1538
+ .tds-checkbox{
1539
+ --tds-checkbox-font-size:var(--t-font-size-md);
1540
+ --tds-checkbox-cursor:pointer;
1541
+ --tds-checkbox-line-height:1.4;
1542
+ --tds-checkbox-transition-property:background-color, border-color;
1727
1543
 
1728
- .tds-radio{
1729
- --tds-radio-font-size:var(--t-font-size-md);
1730
- --tds-radio-cursor:pointer;
1731
- --tds-radio-line-height:1.4;
1732
- --tds-radio-transition-property:border-width;
1544
+ --tds-checkbox-input-size:var(--t-element-size-md);
1545
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1546
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1547
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1733
1548
 
1734
- --tds-radio-input-size:var(--t-element-size-md);
1735
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1736
- --tds-radio-input-border-color:var(--t-form-border-color);
1737
- --tds-radio-input-border-width:var(--t-form-border-width);
1738
- --tds-radio-input-background-color:var(--t-form-background-color);
1549
+ --tds-checkbox-input-icon:none;
1550
+ --tds-checkbox-input-icon-visibility:hidden;
1551
+ --tds-checkbox-input-icon-opacity:0;
1552
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1739
1553
 
1740
- --tds-radio-label-color:var(--t-form-color);
1554
+ --tds-checkbox-label-color:var(--t-form-color);
1741
1555
 
1742
- --tds-radio-description-font-size:var(--t-font-size-sm);
1743
- --tds-radio-description-line-height:1.35;
1744
- --tds-radio-description-color:var(--t-text-color-secondary);
1556
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1557
+ --tds-checkbox-description-line-height:1.35;
1558
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1559
+ --tds-checkbox-description-invalid-icon-display:none;
1745
1560
 
1746
1561
  position:relative;
1747
1562
  display:inline-grid;
1748
1563
  grid-template-columns:auto;
1749
1564
  grid-auto-columns:1fr;
1750
1565
  gap:var(--t-spacing-fourth) 0;
1751
- line-height:var(--tds-radio-line-height);
1566
+ line-height:var(--tds-checkbox-line-height);
1752
1567
  -webkit-user-select:none;
1753
1568
  -moz-user-select:none;
1754
1569
  user-select:none;
1755
1570
  }
1756
1571
 
1757
- .tds-radio label{
1572
+ .tds-checkbox label{
1758
1573
  grid-area:1 / 2;
1759
1574
  padding-inline-start:var(--t-spacing-1);
1760
- font-size:var(--tds-radio-font-size);
1575
+ font-size:var(--tds-checkbox-font-size);
1761
1576
  font-weight:var(--t-font-weight-normal);
1762
- color:var(--tds-radio-label-color);
1763
- cursor:var(--tds-radio-cursor);
1577
+ color:var(--tds-checkbox-label-color);
1578
+ cursor:var(--tds-checkbox-cursor);
1764
1579
  }
1765
1580
 
1766
- .tds-radio input[type="radio"]{
1581
+ .tds-checkbox tds-indeterminate{
1582
+ display:flex;
1583
+ }
1584
+
1585
+ .tds-checkbox input[type="checkbox"]{
1767
1586
  position:relative;
1768
1587
  width:1em;
1769
1588
  height:1em;
1770
1589
  margin:calc((1lh - 1em) / 2) 0 0;
1771
- font-size:var(--tds-radio-font-size);
1590
+ font-size:var(--tds-checkbox-font-size);
1772
1591
  line-height:inherit;
1773
1592
  -webkit-appearance:none;
1774
1593
  -moz-appearance:none;
1775
1594
  appearance:none;
1776
- cursor:var(--tds-radio-cursor);
1777
- background-color:var(--tds-radio-input-background-color);
1778
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1779
- border-radius:var(--tds-radio-input-border-radius);
1595
+ cursor:var(--tds-checkbox-cursor);
1596
+ background-color:var(--tds-checkbox-input-background-color);
1597
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1598
+ border-radius:var(--tds-checkbox-input-border-radius);
1780
1599
  transition-timing-function:var(--t-ease-in-out);
1781
1600
  transition-duration:var(--t-duration-200);
1782
- transition-property:var(--tds-radio-transition-property);
1601
+ transition-property:var(--tds-checkbox-transition-property);
1783
1602
  }
1784
1603
 
1785
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1786
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1787
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1604
+ :is(.tds-checkbox input[type="checkbox"])::before{
1605
+ position:absolute;
1606
+ top:50%;
1607
+ left:50%;
1608
+ visibility:var(--tds-checkbox-input-icon-visibility);
1609
+ width:100%;
1610
+ height:100%;
1611
+ content:"";
1612
+ background-color:var(--tds-checkbox-input-icon-fill);
1613
+ border-radius:var(--tds-checkbox-input-border-radius);
1614
+ opacity:var(--tds-checkbox-input-icon-opacity);
1615
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1616
+ mask-image:var(--tds-checkbox-input-icon);
1617
+ -webkit-mask-repeat:no-repeat;
1618
+ mask-repeat:no-repeat;
1619
+ -webkit-mask-size:contain;
1620
+ mask-size:contain;
1621
+ transform:translate(-50%, -50%);
1788
1622
  }
1789
1623
 
1790
- :is(.tds-radio input[type="radio"]):focus-visible{
1624
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1625
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1626
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1627
+ }
1628
+
1629
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1791
1630
  outline:var(--t-focus-ring-outline);
1792
1631
  outline-offset:var(--t-focus-ring-offset);
1793
1632
  }
1794
1633
 
1795
- :is(.tds-radio input[type="radio"]):disabled{
1634
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1796
1635
  pointer-events:none;
1797
1636
  }
1798
1637
 
1799
1638
  @media (prefers-reduced-motion: reduce){
1800
1639
 
1801
- .tds-radio input[type="radio"]{
1802
- --tds-radio-transition-property:none;
1640
+ .tds-checkbox input[type="checkbox"]{
1641
+ --tds-checkbox-transition-property:none;
1803
1642
  }
1804
1643
  }
1805
1644
 
1806
- .tds-radio:has(input:checked){
1807
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1808
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1809
- --tds-radio-input-border-width:4px;
1645
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1646
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1647
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1648
+ --tds-checkbox-input-icon-visibility:visible;
1649
+ --tds-checkbox-input-icon-opacity:1;
1810
1650
  }
1811
1651
 
1812
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1813
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1814
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1652
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1653
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1654
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1815
1655
  }
1816
1656
 
1817
- .tds-radio:has(input:user-invalid){
1818
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1657
+ .tds-checkbox:has(input:checked){
1658
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1819
1659
  }
1820
1660
 
1821
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1822
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1823
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1661
+ .tds-checkbox:has(input:indeterminate){
1662
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1663
+ }
1664
+
1665
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1666
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1667
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1668
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1669
+ }
1670
+
1671
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1672
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1673
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1824
1674
  }
1825
1675
 
1826
- .tds-radio:has(input:disabled){
1827
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1828
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1676
+ :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{
1677
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1678
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1679
+ }
1829
1680
 
1830
- --tds-radio-label-color:var(--t-form-color-disabled);
1831
- --tds-radio-description-color:var(--t-form-color-disabled);
1832
- --tds-radio-cursor:not-allowed;
1681
+ :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){
1682
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1683
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1684
+ }
1685
+
1686
+ .tds-checkbox:has(input:required) label::after{
1687
+ margin-left:.25ch;
1688
+ color:var(--t-text-color-status-error);
1689
+ content:"*";
1690
+ }
1691
+
1692
+ .tds-checkbox:has(input:disabled){
1693
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1694
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1695
+
1696
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1697
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1698
+ --tds-checkbox-cursor:not-allowed;
1833
1699
  }
1834
1700
 
1835
- .tds-radio:has(input:disabled) input:checked{
1836
- --tds-radio-input-background-color:var(--t-form-background-color);
1837
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1701
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1702
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1838
1703
  }
1839
1704
 
1840
- .tds-radio-description{
1705
+ .tds-checkbox-description{
1841
1706
  display:flex;
1842
1707
  grid-area:2 / 2;
1843
1708
  gap:var(--t-spacing-half);
1844
1709
  align-items:flex-start;
1845
1710
  padding-inline-start:var(--t-spacing-1);
1846
1711
  margin:0;
1847
- font-size:var(--tds-radio-description-font-size);
1848
- line-height:var(--tds-radio-description-line-height);
1849
- color:var(--tds-radio-description-color);
1712
+ font-size:var(--tds-checkbox-description-font-size);
1713
+ line-height:var(--tds-checkbox-description-line-height);
1714
+ color:var(--tds-checkbox-description-color);
1850
1715
  cursor:text;
1851
1716
  }
1852
1717
 
1853
- .tds-radio--sm{
1854
- --tds-radio-line-height:1.35;
1855
- --tds-radio-input-size:var(--t-element-size-sm);
1856
- --tds-radio-font-size:var(--t-font-size-sm);
1857
- --tds-radio-description-font-size:var(--t-font-size-xs);
1858
- --tds-radio-description-line-height:1.3;
1859
- }
1718
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1719
+ display:var(--tds-checkbox-description-invalid-icon-display);
1720
+ flex-shrink:0;
1721
+ margin-top:calc(.5lh - .5em);
1722
+ line-height:var(--tds-checkbox-description-line-height);
1723
+ }
1860
1724
 
1861
- .tds-radio-group{
1862
- --tds-radio-group-font-size:var(--t-font-size-md);
1863
- --tds-radio-group-line-height:1.4;
1864
- --tds-radio-group-gap:var(--t-spacing-1);
1725
+ .tds-checkbox--sm{
1726
+ --tds-checkbox-line-height:1.35;
1727
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1728
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1729
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1730
+ --tds-checkbox-description-line-height:1.3;
1731
+ }
1865
1732
 
1866
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1867
- --tds-radio-group-description-line-height:1.35;
1868
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1869
- --tds-radio-group-description-invalid-icon-display:none;
1870
- display:flex;
1871
- flex-direction:column;
1872
- gap:0;
1873
- padding:0;
1874
- margin:0;
1733
+ .tds-modal-overlay{
1734
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1875
1735
 
1876
- font-size:var(--tds-radio-group-font-size);
1877
- line-height:var(--tds-radio-group-line-height);
1878
- border:0;
1736
+ position:fixed;
1737
+ inset:0;
1738
+ z-index:1000;
1739
+ display:grid;
1740
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1741
+ justify-items:center;
1742
+ overflow-y:auto;
1743
+ background:hsl(0 0% 0% / 40%);
1879
1744
  }
1880
1745
 
1881
- .tds-radio-group legend{
1882
- float:left;
1883
- padding:0;
1884
- margin:0;
1746
+ .tds-modal-overlay[data-entering]{
1747
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1885
1748
  }
1886
1749
 
1887
- .tds-radio-group[aria-invalid="true"]{
1888
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1889
- --tds-radio-group-description-invalid-icon-display:inline-block;
1750
+ .tds-modal-overlay[data-exiting]{
1751
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1890
1752
  }
1891
1753
 
1892
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1893
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1894
- }
1895
-
1896
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1897
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1898
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1899
- }
1900
-
1901
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1902
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1903
- }
1904
-
1905
- .tds-radio-group:has(input:required) legend::after{
1906
- margin-left:.25ch;
1907
- color:var(--t-text-color-status-error);
1908
- content:"*";
1909
- }
1910
-
1911
- .tds-radio-group-fields{
1912
- display:flex;
1913
- flex-direction:column;
1914
- gap:var(--tds-radio-group-gap);
1915
- align-items:flex-start;
1916
- margin-top:var(--t-spacing-1);
1754
+ @keyframes tds-modal-overlay-fade{
1755
+ from{
1756
+ opacity:0;
1757
+ }
1917
1758
  }
1918
1759
 
1919
- .tds-radio-group-description{
1760
+ .tds-modal-frame{
1761
+ --tds-modal-width:600px;
1762
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1920
1763
  display:flex;
1921
- gap:var(--t-spacing-half);
1922
- align-items:flex-start;
1923
- margin:var(--t-spacing-fourth) 0 0;
1924
- font-size:var(--tds-radio-group-description-font-size);
1925
- line-height:var(--tds-radio-group-description-line-height);
1926
- color:var(--tds-radio-group-description-color);
1927
- cursor:text;
1764
+
1765
+ grid-row:2;
1766
+ justify-content:center;
1767
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1928
1768
  }
1929
1769
 
1930
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1931
- display:var(--tds-radio-group-description-invalid-icon-display);
1932
- flex-shrink:0;
1933
- margin-top:calc(.5lh - .5em);
1934
- line-height:var(--tds-radio-group-description-line-height);
1770
+ .tds-modal-frame[data-entering]{
1771
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1935
1772
  }
1936
1773
 
1937
- .tds-radio-group--sm{
1938
- --tds-radio-group-line-height:1.35;
1939
- --tds-radio-group-font-size:var(--t-font-size-sm);
1940
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1941
- --tds-radio-group-description-line-height:1.3;
1774
+ .tds-modal-frame[data-exiting]{
1775
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1776
+ }
1777
+
1778
+ .tds-modal-frame--sm{
1779
+ --tds-modal-width:400px;
1942
1780
  }
1943
1781
 
1944
- .tds-toggle-switch{
1945
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1946
- --tds-toggle-switch-cursor:pointer;
1947
- --tds-toggle-switch-display:inline-grid;
1948
- --tds-toggle-switch-line-height:1.4;
1949
-
1950
- --tds-toggle-switch-label-color:var(--t-form-color);
1951
-
1952
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1953
- --tds-toggle-switch-track-outline:none;
1954
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1955
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1956
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1957
-
1958
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1959
- --tds-toggle-switch-thumb-transform:translateX(0);
1960
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1961
-
1962
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1963
- --tds-toggle-switch-description-line-height:1.35;
1964
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1965
- position:relative;
1966
-
1967
- display:var(--tds-toggle-switch-display);
1968
- grid-template-columns:auto;
1969
- grid-auto-columns:1fr;
1970
- gap:var(--t-spacing-fourth) 0;
1971
- -webkit-user-select:none;
1972
- -moz-user-select:none;
1973
- user-select:none;
1782
+ .tds-modal-frame--lg{
1783
+ --tds-modal-width:800px;
1974
1784
  }
1975
1785
 
1976
- .tds-toggle-switch input[type="checkbox"]{
1977
- position:absolute;
1978
- width:var(--tds-toggle-switch-track-width);
1979
- height:var(--tds-toggle-switch-track-height);
1980
- margin:0;
1981
- -webkit-appearance:none;
1982
- -moz-appearance:none;
1983
- appearance:none;
1984
- cursor:var(--tds-toggle-switch-cursor);
1985
- outline:var(--tds-toggle-switch-track-outline);
1986
- outline-offset:var(--t-focus-ring-offset);
1987
- background-color:transparent;
1988
- border:0;
1989
- border-radius:var(--t-border-radius-round);
1990
- }
1991
-
1992
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1993
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1994
- }
1995
-
1996
- .tds-toggle-switch label{
1997
- display:inline-flex;
1998
- grid-area:1 / 2;
1999
- padding-inline-start:var(--t-spacing-1);
2000
- margin-top:-.09375em;
2001
- font-size:var(--tds-toggle-switch-font-size);
2002
- font-weight:var(--t-font-weight-normal);
2003
- line-height:var(--tds-toggle-switch-line-height);
2004
- color:var(--tds-toggle-switch-label-color);
2005
- cursor:var(--tds-toggle-switch-cursor);
2006
- }
1786
+ .tds-modal-frame--xl{
1787
+ --tds-modal-width:1000px;
1788
+ }
2007
1789
 
2008
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2009
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1790
+ @keyframes tds-modal-zoom{
1791
+ from{
1792
+ opacity:0;
1793
+ scale:.96;
2010
1794
  }
1795
+ }
2011
1796
 
2012
- .tds-toggle-switch:has(input:checked){
2013
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2014
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1797
+ @media (prefers-reduced-motion: reduce){
1798
+ .tds-modal-overlay[data-entering],
1799
+ .tds-modal-overlay[data-exiting],
1800
+ .tds-modal-frame[data-entering],
1801
+ .tds-modal-frame[data-exiting]{
1802
+ animation:none;
2015
1803
  }
1804
+ }
2016
1805
 
2017
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2018
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2019
- }
2020
-
2021
- .tds-toggle-switch:has(input:disabled){
2022
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2023
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2024
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2025
- --tds-toggle-switch-cursor:not-allowed;
2026
- }
1806
+ .tds-modal{
1807
+ display:flex;
1808
+ flex-direction:column;
1809
+ width:100%;
1810
+ padding-block-start:var(--t-spacing-3);
1811
+ padding-inline:0;
1812
+ background:var(--t-surface-color-card);
2027
1813
 
2028
- .tds-toggle-switch-track{
2029
- position:relative;
2030
- flex-shrink:0;
2031
- width:var(--tds-toggle-switch-track-width);
2032
- height:var(--tds-toggle-switch-track-height);
2033
- background-color:var(--tds-toggle-switch-track-background-color);
2034
- border-radius:var(--t-border-radius-round);
2035
- transition:var(--tds-toggle-switch-track-transition);
1814
+ border:0;
1815
+ border-radius:var(--t-border-radius-lg);
1816
+ box-shadow:0 4px 18px 0 #0003;
2036
1817
  }
2037
1818
 
2038
- .tds-toggle-switch-track::before{
2039
- position:absolute;
2040
- top:var(--t-spacing-fourth);
2041
- left:var(--t-spacing-fourth);
2042
- width:var(--tds-toggle-switch-thumb-size);
2043
- height:var(--tds-toggle-switch-thumb-size);
2044
- content:"";
2045
- background-color:#fff;
2046
- border-radius:var(--t-border-radius-round);
2047
- transform:var(--tds-toggle-switch-thumb-transform);
2048
- transition:var(--tds-toggle-switch-thumb-transition);
1819
+ .tds-modal:focus{
1820
+ outline:none;
2049
1821
  }
2050
1822
 
2051
- @media (prefers-reduced-motion: reduce){
1823
+ .tds-modal-header{
1824
+ display:grid;
1825
+ grid-template-columns:1fr auto;
1826
+ -moz-column-gap:var(--t-spacing-2);
1827
+ column-gap:var(--t-spacing-2);
1828
+ padding-block:0;
1829
+ padding-inline:var(--t-spacing-4);
1830
+ }
2052
1831
 
2053
- .tds-toggle-switch-track{
2054
- --tds-toggle-switch-track-transition:none;
2055
- --tds-toggle-switch-thumb-transition:none;
1832
+ .tds-modal-title{
1833
+ grid-row:1;
1834
+ grid-column:1;
1835
+ margin:0;
1836
+ font-size:var(--t-font-size-2xl);
1837
+ font-weight:var(--t-font-weight-medium);
1838
+ line-height:140%;
1839
+ color:var(--t-text-color-headline);
2056
1840
  }
2057
- }
2058
1841
 
2059
- .tds-toggle-switch-description{
2060
- display:flex;
2061
- grid-area:2 / 2;
2062
- align-items:flex-start;
2063
- padding-inline-start:var(--t-spacing-1);
1842
+ .tds-modal-subtitle{
1843
+ grid-row:2;
1844
+ grid-column:1;
2064
1845
  margin:0;
2065
- font-size:var(--tds-toggle-switch-description-font-size);
2066
- line-height:var(--tds-toggle-switch-description-line-height);
2067
- color:var(--tds-toggle-switch-description-color);
2068
- cursor:text;
1846
+ font-size:var(--t-font-size-md);
1847
+ font-weight:var(--t-font-weight-medium);
1848
+ line-height:140%;
1849
+ color:var(--t-text-color-secondary);
2069
1850
  }
2070
1851
 
2071
- .tds-toggle-switch--sm{
2072
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2073
- --tds-toggle-switch-line-height:1.35;
2074
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2075
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2076
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2077
- --tds-toggle-switch-description-line-height:1.3;
1852
+ .tds-modal-close{
1853
+ grid-row:1;
1854
+ grid-column:2;
1855
+ align-self:center;
1856
+ color:var(--t-icon-color-dim);
2078
1857
  }
2079
1858
 
2080
- .tds-toggle-switch--hide-label{
2081
- --tds-toggle-switch-display:inline-flex;
1859
+ .tds-modal-body{
1860
+ padding-block:var(--t-spacing-3);
1861
+ padding-inline:var(--t-spacing-4);
2082
1862
  }
2083
1863
 
2084
- .tds-input:has(textarea){
2085
- --tds-input-padding-block:6px;
2086
- --tds-input-resizer-size:var(--t-element-size-sm);
2087
- --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");
1864
+ .tds-modal-body--full-width{
1865
+ padding-inline:0;
2088
1866
  }
2089
1867
 
2090
- @supports (x: attr(x type(*))){
1868
+ .tds-modal-footer{
1869
+ display:flex;
1870
+ gap:var(--t-spacing-2);
1871
+ align-items:center;
1872
+ justify-content:flex-end;
1873
+ padding-block:var(--t-spacing-3);
1874
+ padding-inline:var(--t-spacing-4);
1875
+ border-top:1px solid var(--t-border-color);
1876
+ }
2091
1877
 
2092
- .tds-input textarea{
2093
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1878
+ .tds-modal-footer > [slot="start"]{
1879
+ margin-inline-end:auto;
2094
1880
  }
1881
+
1882
+ @media (min-width: 720px){
1883
+ .tds-modal-overlay{
1884
+ --tds-modal-min-margin-block:0;
2095
1885
  }
2096
1886
 
2097
- .tds-input.tds-textarea--resize-vertical textarea{
2098
- resize:vertical;
2099
- }
1887
+ .tds-modal-footer{
1888
+ position:sticky;
1889
+ bottom:0;
1890
+ background:var(--t-surface-color-card);
1891
+ border-end-start-radius:var(--t-border-radius-lg);
1892
+ border-end-end-radius:var(--t-border-radius-lg);
1893
+ }
1894
+ }
2100
1895
 
2101
- .tds-input.tds-textarea--resize-none textarea{
2102
- resize:none;
1896
+
1897
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1898
+ -webkit-appearance:none;
1899
+ appearance:none;
2103
1900
  }
2104
1901
 
2105
- .tds-input.tds-textarea--resize-auto textarea{
2106
- resize:vertical;
1902
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1903
+ inline-size:1em;
1904
+ block-size:2em;
2107
1905
  }
2108
1906
 
2109
- @supports (field-sizing: content){
2110
- .tds-input.tds-textarea--resize-auto textarea{
2111
- field-sizing:content;
2112
- resize:none;
2113
- }
1907
+ [type="file"]:is(.tds-input input){
1908
+ padding-block:var(--t-spacing-half);
1909
+ padding-inline-start:var(--t-spacing-half);
2114
1910
  }
2115
1911
 
2116
- .tds-input textarea{
2117
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2118
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2119
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2120
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2121
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2122
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2123
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2124
- --tds-input-scrollbar-thumb-border-radius:999px;
2125
- --tds-input-scrollbar-thumb-border-width:3px;
2126
- --tds-input-scrollbar-track-margin-block:.125rem;
2127
- scrollbar-color:initial;
2128
- transition-timing-function:var(--t-ease-in-out);
2129
- transition-duration:var(--t-duration-200);
2130
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2131
- }
1912
+ [type="file"]:is(.tds-input input):not(:disabled){
1913
+ color:var(--t-text-color-secondary);
1914
+ }
2132
1915
 
2133
- @media (pointer: fine){
2134
- :is(.tds-input textarea)::-webkit-scrollbar{
2135
- width:12px;
2136
- height:12px;
2137
- cursor:default;
2138
- }
1916
+ [type="file"]:is(.tds-input input)::file-selector-button{
1917
+ --_file-btn-padding-block:3px;
2139
1918
 
2140
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2141
- cursor:default;
2142
- background:var(--tds-input-scrollbar-thumb-color);
2143
- background-clip:content-box;
2144
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2145
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2146
- }
1919
+ padding-block:var(--_file-btn-padding-block);
1920
+ padding-inline:12px;
1921
+ margin-inline-end:12px;
1922
+ font:inherit;
1923
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1924
+ color:var(--t-text-color-status-neutral);
1925
+ cursor:pointer;
1926
+ background-color:var(--t-fill-color-button-neutral-solid);
1927
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1928
+ border-radius:var(--t-border-radius-md);
1929
+ transition-timing-function:var(--t-ease-in-out);
1930
+ transition-duration:var(--t-duration-200);
1931
+ transition-property:color, background-color, border-color;
1932
+ }
2147
1933
 
2148
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2149
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2150
- }
1934
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1935
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1936
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1937
+ }
2151
1938
 
2152
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2153
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2154
- }
1939
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1940
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1941
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1942
+ }
2155
1943
 
2156
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2157
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2158
- }
1944
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1945
+ color:var(--t-text-color-disabled);
1946
+ pointer-events:none;
1947
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1948
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1949
+ }
1950
+ @supports (field-sizing: content){
1951
+ .tds-input--auto-width{
1952
+ inline-size:-moz-fit-content;
1953
+ inline-size:fit-content;
1954
+ min-inline-size:min(100%, 122px);
1955
+ }
2159
1956
 
2160
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2161
- background:var(--tds-input-scrollbar-surface-color);
2162
- }
1957
+ .tds-input--auto-width input{
1958
+ field-sizing:content;
1959
+ inline-size:auto;
1960
+ }
1961
+ }
2163
1962
 
2164
- :is(.tds-input textarea)::-webkit-resizer{
2165
- background:var(--tds-input-resizer-icon) no-repeat;
2166
- background-position:right bottom;
2167
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1963
+ .tds-popover{
1964
+ max-inline-size:24rem;
1965
+ overflow:auto;
1966
+ overscroll-behavior:none;
1967
+ outline:0;
1968
+ scrollbar-color:#0004 var(--t-surface-color-card);
1969
+ scrollbar-width:thin;
1970
+ background:var(--t-surface-color-card);
1971
+ background-clip:padding-box;
1972
+ border:1px solid var(--t-border-color);
1973
+ border-radius:var(--t-border-radius);
1974
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1975
+ }
1976
+
1977
+ @media (prefers-reduced-motion: no-preference){
1978
+ .tds-popover[data-entering]{
1979
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2168
1980
  }
2169
1981
 
2170
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2171
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2172
- cursor:default;
1982
+ .tds-popover[data-exiting]{
1983
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2173
1984
  }
2174
1985
 
2175
- @supports (-moz-appearance: none){
2176
- :is(.tds-input textarea){
2177
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2178
- scrollbar-width:thin;
2179
- }
1986
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1987
+ will-change:opacity, transform;
1988
+ }
2180
1989
 
2181
- @media (hover){
2182
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2183
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2184
- }
2185
- }
1990
+ @keyframes tds-popover{
1991
+ from{
1992
+ opacity:0;
1993
+ transform:translateY(-8px);
2186
1994
  }
2187
1995
  }
1996
+ }
2188
1997
 
2189
- @layer t-critical{
2190
- tds-page-header:not(.hydrated){
2191
- display:none;
2192
- }
1998
+ .tds-popover-content{
1999
+ display:flex;
2000
+ flex-direction:column;
2001
+ padding:var(--t-spacing-1);
2002
+ outline:0;
2193
2003
  }
2194
2004
 
2195
- @layer t-component{
2196
- .tds-page-header{
2197
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2198
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2199
- --tds-page-header-color:var(--t-text-color);
2200
- --tds-page-header-bottom-border-color:transparent;
2201
- --tds-page-header-headline-color:var(--t-text-color-headline);
2202
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2203
- --tds-page-header-padding-x:var(--t-spacing-2);
2204
- --tds-page-header-padding-y:var(--t-spacing-2);
2205
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2206
- --tds-page-header-nav-gap:var(--t-spacing-1);
2207
- --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%);
2208
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2209
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2210
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2211
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2212
- --tds-page-header-nav-item-border-width:1px;
2005
+ .tds-radio{
2006
+ --tds-radio-font-size:var(--t-font-size-md);
2007
+ --tds-radio-cursor:pointer;
2008
+ --tds-radio-line-height:1.4;
2009
+ --tds-radio-transition-property:border-width;
2213
2010
 
2214
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2215
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2011
+ --tds-radio-input-size:var(--t-element-size-md);
2012
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2013
+ --tds-radio-input-border-color:var(--t-form-border-color);
2014
+ --tds-radio-input-border-width:var(--t-form-border-width);
2015
+ --tds-radio-input-background-color:var(--t-form-background-color);
2216
2016
 
2217
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2218
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2219
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2017
+ --tds-radio-label-color:var(--t-form-color);
2220
2018
 
2221
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2222
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2019
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2020
+ --tds-radio-description-line-height:1.35;
2021
+ --tds-radio-description-color:var(--t-text-color-secondary);
2223
2022
 
2224
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2225
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2226
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2023
+ position:relative;
2024
+ display:inline-grid;
2025
+ grid-template-columns:auto;
2026
+ grid-auto-columns:1fr;
2027
+ gap:var(--t-spacing-fourth) 0;
2028
+ line-height:var(--tds-radio-line-height);
2029
+ -webkit-user-select:none;
2030
+ -moz-user-select:none;
2031
+ user-select:none;
2032
+ }
2227
2033
 
2228
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2229
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2230
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2231
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2232
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2034
+ .tds-radio label{
2035
+ grid-area:1 / 2;
2036
+ padding-inline-start:var(--t-spacing-1);
2037
+ font-size:var(--tds-radio-font-size);
2038
+ font-weight:var(--t-font-weight-normal);
2039
+ color:var(--tds-radio-label-color);
2040
+ cursor:var(--tds-radio-cursor);
2233
2041
  }
2234
2042
 
2235
- .tds-page-header--profile{
2236
- --tds-page-header-padding-y:20px;
2043
+ .tds-radio input[type="radio"]{
2044
+ position:relative;
2045
+ width:1em;
2046
+ height:1em;
2047
+ margin:calc((1lh - 1em) / 2) 0 0;
2048
+ font-size:var(--tds-radio-font-size);
2049
+ line-height:inherit;
2050
+ -webkit-appearance:none;
2051
+ -moz-appearance:none;
2052
+ appearance:none;
2053
+ cursor:var(--tds-radio-cursor);
2054
+ background-color:var(--tds-radio-input-background-color);
2055
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2056
+ border-radius:var(--tds-radio-input-border-radius);
2057
+ transition-timing-function:var(--t-ease-in-out);
2058
+ transition-duration:var(--t-duration-200);
2059
+ transition-property:var(--tds-radio-transition-property);
2237
2060
  }
2238
2061
 
2239
- @supports (color: light-dark(#fff, #000)){
2240
- .tds-page-header{
2241
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2242
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2062
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2063
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2064
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2243
2065
  }
2244
- }
2245
2066
 
2246
- @media (min-width: 600px){
2247
- .tds-page-header{
2248
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2249
- --tds-page-header-color:var(--t-text-color-secondary);
2250
- --tds-page-header-bottom-border-color:var(--t-border-color);
2251
- --tds-page-header-padding-x:var(--t-spacing-3);
2252
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2253
- --tds-page-header-nav-gap:var(--t-spacing-half);
2254
- --tds-page-header-nav-background:transparent;
2255
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2256
- --tds-page-header-nav-item-border-width:1px;
2257
- --tds-page-header-nav-item-color:var(--t-text-color);
2258
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2259
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2260
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2261
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2262
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2263
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2067
+ :is(.tds-radio input[type="radio"]):focus-visible{
2068
+ outline:var(--t-focus-ring-outline);
2069
+ outline-offset:var(--t-focus-ring-offset);
2264
2070
  }
2265
- }
2266
- }
2267
2071
 
2268
- .tds-page-header{
2269
- display:flex;
2270
- flex-direction:column;
2271
- padding-top:var(--tds-page-header-padding-y);
2272
- color:var(--tds-page-header-color);
2273
- background:var(--tds-page-header-background-color);
2274
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2275
- }
2072
+ :is(.tds-radio input[type="radio"]):disabled{
2073
+ pointer-events:none;
2074
+ }
2276
2075
 
2277
- .tds-page-header:not(.has-nav){
2278
- padding-bottom:var(--tds-page-header-padding-y);
2279
- }
2076
+ @media (prefers-reduced-motion: reduce){
2280
2077
 
2281
- .tds-page-header.inactive{
2282
- background:var(--tds-page-header-background-color-inactive);
2078
+ .tds-radio input[type="radio"]{
2079
+ --tds-radio-transition-property:none;
2283
2080
  }
2081
+ }
2284
2082
 
2285
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2286
- width:100%;
2083
+ .tds-radio:has(input:checked){
2084
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2085
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2086
+ --tds-radio-input-border-width:4px;
2287
2087
  }
2288
2088
 
2289
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2290
- display:flex;
2291
- flex-flow:row wrap;
2292
- gap:var(--t-spacing-half) var(--t-spacing-1);
2293
- align-items:flex-start;
2294
- justify-content:flex-start;
2295
- min-width:0;
2089
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2090
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2091
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2092
+ }
2093
+
2094
+ .tds-radio:has(input:user-invalid){
2095
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2296
2096
  }
2297
2097
 
2298
- :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{
2299
- display:flex;
2300
- gap:var(--tds-page-header-nav-gap);
2301
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2302
- margin:0 0 -1px;
2303
- overflow:auto;
2304
- list-style:none;
2305
- background:var(--tds-page-header-nav-background);
2098
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2099
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2100
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2306
2101
  }
2307
2102
 
2308
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2309
- position:relative;
2310
- display:inline-flex;
2311
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2312
- font-size:var(--t-font-size-sm);
2313
- line-height:22px;
2314
- color:var(--tds-page-header-nav-item-color);
2315
- white-space:nowrap;
2316
- text-decoration:none;
2317
- -webkit-appearance:none;
2318
- -moz-appearance:none;
2319
- appearance:none;
2320
- cursor:pointer;
2321
- outline-offset:-2px;
2322
- background-color:var(--tds-page-header-nav-item-background-color);
2323
- background-clip:padding-box;
2324
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2325
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2326
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2103
+ .tds-radio:has(input:disabled){
2104
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2105
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2106
+
2107
+ --tds-radio-label-color:var(--t-form-color-disabled);
2108
+ --tds-radio-description-color:var(--t-form-color-disabled);
2109
+ --tds-radio-cursor:not-allowed;
2110
+ }
2111
+
2112
+ .tds-radio:has(input:disabled) input:checked{
2113
+ --tds-radio-input-background-color:var(--t-form-background-color);
2114
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2327
2115
  }
2328
2116
 
2329
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2330
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2331
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2332
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2333
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2334
- }
2117
+ .tds-radio-description{
2118
+ display:flex;
2119
+ grid-area:2 / 2;
2120
+ gap:var(--t-spacing-half);
2121
+ align-items:flex-start;
2122
+ padding-inline-start:var(--t-spacing-1);
2123
+ margin:0;
2124
+ font-size:var(--tds-radio-description-font-size);
2125
+ line-height:var(--tds-radio-description-line-height);
2126
+ color:var(--tds-radio-description-color);
2127
+ cursor:text;
2128
+ }
2335
2129
 
2336
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2337
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2338
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2339
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2340
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2341
- }
2130
+ .tds-radio--sm{
2131
+ --tds-radio-line-height:1.35;
2132
+ --tds-radio-input-size:var(--t-element-size-sm);
2133
+ --tds-radio-font-size:var(--t-font-size-sm);
2134
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2135
+ --tds-radio-description-line-height:1.3;
2136
+ }
2342
2137
 
2343
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2344
- background-color:var(--tds-page-header-nav-item-background-color-active);
2345
- border-color:var(--tds-page-header-nav-item-border-color-active);
2346
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2347
- }
2138
+ .tds-radio-group{
2139
+ --tds-radio-group-font-size:var(--t-font-size-md);
2140
+ --tds-radio-group-line-height:1.4;
2141
+ --tds-radio-group-gap:var(--t-spacing-1);
2348
2142
 
2349
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2350
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2351
- color:var(--tds-page-header-nav-item-color-disabled);
2352
- cursor:not-allowed;
2353
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2354
- opacity:1;
2355
- }
2143
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2144
+ --tds-radio-group-description-line-height:1.35;
2145
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2146
+ --tds-radio-group-description-invalid-icon-display:none;
2147
+ display:flex;
2148
+ flex-direction:column;
2149
+ gap:0;
2150
+ padding:0;
2151
+ margin:0;
2356
2152
 
2357
- @media (min-width: 600px){
2358
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2359
- position:absolute;
2360
- inset:auto -1px -1px;
2361
- height:1px;
2362
- pointer-events:none;
2363
- content:"";
2364
- background-color:var(--tds-page-header-bottom-border-color);
2365
- }
2366
- }
2153
+ font-size:var(--tds-radio-group-font-size);
2154
+ line-height:var(--tds-radio-group-line-height);
2155
+ border:0;
2156
+ }
2367
2157
 
2368
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2369
- position:relative;
2158
+ .tds-radio-group legend{
2159
+ float:left;
2160
+ padding:0;
2161
+ margin:0;
2162
+ }
2163
+
2164
+ .tds-radio-group[aria-invalid="true"]{
2165
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2166
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2167
+ }
2168
+
2169
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2170
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2370
2171
  }
2371
2172
 
2372
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2373
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2374
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2173
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2174
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2175
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2375
2176
  }
2376
2177
 
2377
- :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{
2378
- position:absolute;
2379
- top:-5px;
2380
- right:-2px;
2381
- width:10px;
2382
- height:10px;
2383
- content:"";
2384
- background:var(--tds-page-header-nav-item-indicator-color);
2385
- border-radius:50%;
2178
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2179
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2386
2180
  }
2387
2181
 
2388
- @media (prefers-reduced-motion: no-preference){
2389
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2390
- animation:indicator-pulse 1.25s ease infinite;
2391
- }
2392
- }
2182
+ .tds-radio-group:has(input:required) legend::after{
2183
+ margin-left:.25ch;
2184
+ color:var(--t-text-color-status-error);
2185
+ content:"*";
2186
+ }
2393
2187
 
2394
- .tds-page-header__title-bar{
2188
+ .tds-radio-group-fields{
2395
2189
  display:flex;
2396
2190
  flex-direction:column;
2397
- gap:var(--t-spacing-2) var(--t-spacing-1);
2191
+ gap:var(--tds-radio-group-gap);
2398
2192
  align-items:flex-start;
2399
- justify-content:space-between;
2400
- padding:0 var(--tds-page-header-padding-x);
2193
+ margin-top:var(--t-spacing-1);
2401
2194
  }
2402
2195
 
2403
- .tds-page-header--profile > .tds-page-header__title-bar{
2404
- align-items:center;
2196
+ .tds-radio-group-description{
2197
+ display:flex;
2198
+ gap:var(--t-spacing-half);
2199
+ align-items:flex-start;
2200
+ margin:var(--t-spacing-fourth) 0 0;
2201
+ font-size:var(--tds-radio-group-description-font-size);
2202
+ line-height:var(--tds-radio-group-description-line-height);
2203
+ color:var(--tds-radio-group-description-color);
2204
+ cursor:text;
2205
+ }
2206
+
2207
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2208
+ display:var(--tds-radio-group-description-invalid-icon-display);
2209
+ flex-shrink:0;
2210
+ margin-top:calc(.5lh - .5em);
2211
+ line-height:var(--tds-radio-group-description-line-height);
2405
2212
  }
2406
2213
 
2407
- .tds-page-header__primary{
2408
- width:100%;
2214
+ .tds-radio-group--sm{
2215
+ --tds-radio-group-line-height:1.35;
2216
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2217
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2218
+ --tds-radio-group-description-line-height:1.3;
2409
2219
  }
2410
2220
 
2411
- .tds-page-header__primary h1{
2221
+ .tds-toggle-switch{
2222
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2223
+ --tds-toggle-switch-cursor:pointer;
2224
+ --tds-toggle-switch-display:inline-grid;
2225
+ --tds-toggle-switch-line-height:1.4;
2226
+
2227
+ --tds-toggle-switch-label-color:var(--t-form-color);
2228
+
2229
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2230
+ --tds-toggle-switch-track-outline:none;
2231
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2232
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2233
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2234
+
2235
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2236
+ --tds-toggle-switch-thumb-transform:translateX(0);
2237
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2238
+
2239
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2240
+ --tds-toggle-switch-description-line-height:1.35;
2241
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2242
+ position:relative;
2243
+
2244
+ display:var(--tds-toggle-switch-display);
2245
+ grid-template-columns:auto;
2246
+ grid-auto-columns:1fr;
2247
+ gap:var(--t-spacing-fourth) 0;
2248
+ -webkit-user-select:none;
2249
+ -moz-user-select:none;
2250
+ user-select:none;
2251
+ }
2252
+
2253
+ .tds-toggle-switch input[type="checkbox"]{
2254
+ position:absolute;
2255
+ width:var(--tds-toggle-switch-track-width);
2256
+ height:var(--tds-toggle-switch-track-height);
2412
2257
  margin:0;
2413
- font-size:var(--tds-page-header-headline-font-size);
2258
+ -webkit-appearance:none;
2259
+ -moz-appearance:none;
2260
+ appearance:none;
2261
+ cursor:var(--tds-toggle-switch-cursor);
2262
+ outline:var(--tds-toggle-switch-track-outline);
2263
+ outline-offset:var(--t-focus-ring-offset);
2264
+ background-color:transparent;
2265
+ border:0;
2266
+ border-radius:var(--t-border-radius-round);
2267
+ }
2268
+
2269
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2270
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2271
+ }
2272
+
2273
+ .tds-toggle-switch label{
2274
+ display:inline-flex;
2275
+ grid-area:1 / 2;
2276
+ padding-inline-start:var(--t-spacing-1);
2277
+ margin-top:-.09375em;
2278
+ font-size:var(--tds-toggle-switch-font-size);
2414
2279
  font-weight:var(--t-font-weight-normal);
2415
- line-height:32px;
2416
- color:var(--tds-page-header-headline-color);
2417
- overflow-wrap:break-word;
2280
+ line-height:var(--tds-toggle-switch-line-height);
2281
+ color:var(--tds-toggle-switch-label-color);
2282
+ cursor:var(--tds-toggle-switch-cursor);
2418
2283
  }
2419
2284
 
2420
- @media (min-width: 960px){
2421
- .tds-page-header__primary{
2422
- flex:1 1 max-content;
2423
- width:auto;
2424
- min-width:0;
2425
- max-width:100%;
2285
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2286
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2426
2287
  }
2427
2288
 
2428
- .tds-page-header__title-bar,
2429
- .tds-page-header--profile .tds-page-header__title-bar{
2430
- flex-flow:row nowrap;
2431
- row-gap:12px;
2432
- align-items:flex-start;
2289
+ .tds-toggle-switch:has(input:checked){
2290
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2291
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2433
2292
  }
2434
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2435
- width:auto;
2436
- }
2437
2293
 
2438
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2439
- justify-content:flex-end;
2294
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2295
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2440
2296
  }
2297
+
2298
+ .tds-toggle-switch:has(input:disabled){
2299
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2300
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2301
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2302
+ --tds-toggle-switch-cursor:not-allowed;
2303
+ }
2304
+
2305
+ .tds-toggle-switch-track{
2306
+ position:relative;
2307
+ flex-shrink:0;
2308
+ width:var(--tds-toggle-switch-track-width);
2309
+ height:var(--tds-toggle-switch-track-height);
2310
+ background-color:var(--tds-toggle-switch-track-background-color);
2311
+ border-radius:var(--t-border-radius-round);
2312
+ transition:var(--tds-toggle-switch-track-transition);
2441
2313
  }
2442
2314
 
2443
- .tds-page-header-phone,
2444
- .tds-page-header-email{
2445
- color:var(--tds-page-header-color);
2446
- white-space:nowrap;
2315
+ .tds-toggle-switch-track::before{
2316
+ position:absolute;
2317
+ top:var(--t-spacing-fourth);
2318
+ left:var(--t-spacing-fourth);
2319
+ width:var(--tds-toggle-switch-thumb-size);
2320
+ height:var(--tds-toggle-switch-thumb-size);
2321
+ content:"";
2322
+ background-color:#fff;
2323
+ border-radius:var(--t-border-radius-round);
2324
+ transform:var(--tds-toggle-switch-thumb-transform);
2325
+ transition:var(--tds-toggle-switch-thumb-transition);
2326
+ }
2327
+
2328
+ @media (prefers-reduced-motion: reduce){
2329
+
2330
+ .tds-toggle-switch-track{
2331
+ --tds-toggle-switch-track-transition:none;
2332
+ --tds-toggle-switch-thumb-transition:none;
2447
2333
  }
2448
- .tds-page-header-email{
2449
- max-width:100%;
2450
- overflow:hidden;
2451
- text-overflow:ellipsis;
2334
+ }
2335
+
2336
+ .tds-toggle-switch-description{
2337
+ display:flex;
2338
+ grid-area:2 / 2;
2339
+ align-items:flex-start;
2340
+ padding-inline-start:var(--t-spacing-1);
2341
+ margin:0;
2342
+ font-size:var(--tds-toggle-switch-description-font-size);
2343
+ line-height:var(--tds-toggle-switch-description-line-height);
2344
+ color:var(--tds-toggle-switch-description-color);
2345
+ cursor:text;
2452
2346
  }
2453
2347
 
2454
- @keyframes indicator-pulse{
2455
- 0%{
2456
- opacity:.3;
2457
- transform:scale(.9);
2458
- }
2348
+ .tds-toggle-switch--sm{
2349
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2350
+ --tds-toggle-switch-line-height:1.35;
2351
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2352
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2353
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2354
+ --tds-toggle-switch-description-line-height:1.3;
2355
+ }
2459
2356
 
2460
- 100%{
2461
- opacity:0;
2462
- transform:scale(1.75);
2357
+ .tds-toggle-switch--hide-label{
2358
+ --tds-toggle-switch-display:inline-flex;
2359
+ }
2360
+
2361
+ .tds-input:has(textarea){
2362
+ --tds-input-padding-block:6px;
2363
+ --tds-input-resizer-size:var(--t-element-size-sm);
2364
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2365
+ }
2366
+
2367
+ @supports (x: attr(x type(*))){
2368
+
2369
+ .tds-input textarea{
2370
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2371
+ }
2463
2372
  }
2373
+
2374
+ .tds-input.tds-textarea--resize-vertical textarea{
2375
+ resize:vertical;
2376
+ }
2377
+
2378
+ .tds-input.tds-textarea--resize-none textarea{
2379
+ resize:none;
2380
+ }
2381
+
2382
+ .tds-input.tds-textarea--resize-auto textarea{
2383
+ resize:vertical;
2384
+ }
2385
+
2386
+ @supports (field-sizing: content){
2387
+ .tds-input.tds-textarea--resize-auto textarea{
2388
+ field-sizing:content;
2389
+ resize:none;
2390
+ }
2391
+ }
2392
+
2393
+ .tds-input textarea{
2394
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2395
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2396
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2397
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2398
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2399
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2400
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2401
+ --tds-input-scrollbar-thumb-border-radius:999px;
2402
+ --tds-input-scrollbar-thumb-border-width:3px;
2403
+ --tds-input-scrollbar-track-margin-block:.125rem;
2404
+ scrollbar-color:initial;
2405
+ transition-timing-function:var(--t-ease-in-out);
2406
+ transition-duration:var(--t-duration-200);
2407
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2464
2408
  }
2465
2409
 
2410
+ @media (pointer: fine){
2411
+ :is(.tds-input textarea)::-webkit-scrollbar{
2412
+ width:12px;
2413
+ height:12px;
2414
+ cursor:default;
2415
+ }
2416
+
2417
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2418
+ cursor:default;
2419
+ background:var(--tds-input-scrollbar-thumb-color);
2420
+ background-clip:content-box;
2421
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2422
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2423
+ }
2424
+
2425
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2426
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2427
+ }
2428
+
2429
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2430
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2431
+ }
2432
+
2433
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2434
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2435
+ }
2436
+
2437
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2438
+ background:var(--tds-input-scrollbar-surface-color);
2439
+ }
2440
+
2441
+ :is(.tds-input textarea)::-webkit-resizer{
2442
+ background:var(--tds-input-resizer-icon) no-repeat;
2443
+ background-position:right bottom;
2444
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2445
+ }
2446
+
2447
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2448
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2449
+ cursor:default;
2450
+ }
2451
+
2452
+ @supports (-moz-appearance: none){
2453
+ :is(.tds-input textarea){
2454
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2455
+ scrollbar-width:thin;
2456
+ }
2457
+
2458
+ @media (hover){
2459
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2460
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2461
+ }
2462
+ }
2463
+ }
2464
+ }
2465
+
2466
2466
  .tds-input{
2467
2467
  --tds-input-border-color:var(--t-form-border-color);
2468
2468
  --tds-input-border-color-hover:var(--t-form-border-color-hover);