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

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 +1269 -1269
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1269 -1269
  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,1191 +1039,1428 @@ 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);
1486
- display:flex;
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
+ }
1487
1246
 
1488
- grid-row:2;
1489
- justify-content:center;
1490
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1247
+ .tds-page-header__title-bar{
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);
1491
1254
  }
1492
1255
 
1493
- .tds-modal-frame[data-entering]{
1494
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1495
- }
1496
-
1497
- .tds-modal-frame[data-exiting]{
1498
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1499
1258
  }
1500
1259
 
1501
- .tds-modal-frame--sm{
1502
- --tds-modal-width:400px;
1503
- }
1504
-
1505
- .tds-modal-frame--lg{
1506
- --tds-modal-width:800px;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1507
1262
  }
1508
1263
 
1509
- .tds-modal-frame--xl{
1510
- --tds-modal-width:1000px;
1511
- }
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;
1271
+ }
1512
1272
 
1513
- @keyframes tds-modal-zoom{
1514
- from{
1515
- opacity:0;
1516
- scale:.96;
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%;
1517
1279
  }
1518
- }
1519
1280
 
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;
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;
1526
1286
  }
1527
- }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1289
+ }
1528
1290
 
1529
- .tds-modal{
1530
- display:flex;
1531
- 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);
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1293
+ }
1294
+ }
1536
1295
 
1537
- border:0;
1538
- border-radius:var(--t-border-radius-lg);
1539
- box-shadow:0 4px 18px 0 #0003;
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;
1540
1305
  }
1541
1306
 
1542
- .tds-modal:focus{
1543
- outline:none;
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1544
1311
  }
1545
1312
 
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
- }
1554
-
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);
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1316
+ }
1563
1317
  }
1564
1318
 
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
- }
1319
+ .tds-checkbox{
1320
+ --tds-checkbox-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-cursor:pointer;
1322
+ --tds-checkbox-line-height:1.4;
1323
+ --tds-checkbox-transition-property:background-color, border-color;
1574
1324
 
1575
- .tds-modal-close{
1576
- grid-row:1;
1577
- grid-column:2;
1578
- align-self:center;
1579
- color:var(--t-icon-color-dim);
1580
- }
1325
+ --tds-checkbox-input-size:var(--t-element-size-md);
1326
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1581
1329
 
1582
- .tds-modal-body{
1583
- padding-block:var(--t-spacing-3);
1584
- padding-inline:var(--t-spacing-4);
1585
- }
1330
+ --tds-checkbox-input-icon:none;
1331
+ --tds-checkbox-input-icon-visibility:hidden;
1332
+ --tds-checkbox-input-icon-opacity:0;
1333
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1586
1334
 
1587
- .tds-modal-body--full-width{
1588
- padding-inline:0;
1589
- }
1335
+ --tds-checkbox-label-color:var(--t-form-color);
1590
1336
 
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);
1599
- }
1337
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
+ --tds-checkbox-description-line-height:1.35;
1339
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
+ --tds-checkbox-description-invalid-icon-display:none;
1600
1341
 
1601
- .tds-modal-footer > [slot="start"]{
1602
- margin-inline-end:auto;
1342
+ position:relative;
1343
+ display:inline-grid;
1344
+ grid-template-columns:auto;
1345
+ grid-auto-columns:1fr;
1346
+ gap:var(--t-spacing-fourth) 0;
1347
+ line-height:var(--tds-checkbox-line-height);
1348
+ -webkit-user-select:none;
1349
+ -moz-user-select:none;
1350
+ user-select:none;
1603
1351
  }
1604
1352
 
1605
- @media (min-width: 720px){
1606
- .tds-modal-overlay{
1607
- --tds-modal-min-margin-block:0;
1353
+ .tds-checkbox label{
1354
+ grid-area:1 / 2;
1355
+ padding-inline-start:var(--t-spacing-1);
1356
+ font-size:var(--tds-checkbox-font-size);
1357
+ font-weight:var(--t-font-weight-normal);
1358
+ color:var(--tds-checkbox-label-color);
1359
+ cursor:var(--tds-checkbox-cursor);
1608
1360
  }
1609
1361
 
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);
1362
+ .tds-checkbox tds-indeterminate{
1363
+ display:flex;
1616
1364
  }
1617
- }
1618
-
1619
1365
 
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;
1623
- }
1624
-
1625
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1626
- inline-size:1em;
1627
- block-size:2em;
1628
- }
1629
-
1630
- [type="file"]:is(.tds-input input){
1631
- padding-block:var(--t-spacing-half);
1632
- padding-inline-start:var(--t-spacing-half);
1633
- }
1634
-
1635
- [type="file"]:is(.tds-input input):not(:disabled){
1636
- color:var(--t-text-color-secondary);
1637
- }
1638
-
1639
- [type="file"]:is(.tds-input input)::file-selector-button{
1640
- --_file-btn-padding-block:3px;
1641
-
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
- }
1656
-
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
- }
1661
-
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
- }
1666
-
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);
1678
- }
1679
-
1680
- .tds-input--auto-width input{
1681
- field-sizing:content;
1682
- inline-size:auto;
1683
- }
1684
- }
1685
-
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
- }
1699
-
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
- }
1704
-
1705
- .tds-popover[data-exiting]{
1706
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1707
- }
1708
-
1709
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1710
- will-change:opacity, transform;
1711
- }
1712
-
1713
- @keyframes tds-popover{
1714
- from{
1715
- opacity:0;
1716
- transform:translateY(-8px);
1717
- }
1718
- }
1719
- }
1720
-
1721
- .tds-popover-content{
1722
- display:flex;
1723
- flex-direction:column;
1724
- padding:var(--t-spacing-1);
1725
- outline:0;
1726
- }
1727
-
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;
1733
-
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);
1739
-
1740
- --tds-radio-label-color:var(--t-form-color);
1741
-
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);
1745
-
1746
- position:relative;
1747
- display:inline-grid;
1748
- grid-template-columns:auto;
1749
- grid-auto-columns:1fr;
1750
- gap:var(--t-spacing-fourth) 0;
1751
- line-height:var(--tds-radio-line-height);
1752
- -webkit-user-select:none;
1753
- -moz-user-select:none;
1754
- user-select:none;
1755
- }
1756
-
1757
- .tds-radio label{
1758
- grid-area:1 / 2;
1759
- padding-inline-start:var(--t-spacing-1);
1760
- font-size:var(--tds-radio-font-size);
1761
- font-weight:var(--t-font-weight-normal);
1762
- color:var(--tds-radio-label-color);
1763
- cursor:var(--tds-radio-cursor);
1764
- }
1765
-
1766
- .tds-radio input[type="radio"]{
1366
+ .tds-checkbox input[type="checkbox"]{
1767
1367
  position:relative;
1768
1368
  width:1em;
1769
1369
  height:1em;
1770
1370
  margin:calc((1lh - 1em) / 2) 0 0;
1771
- font-size:var(--tds-radio-font-size);
1371
+ font-size:var(--tds-checkbox-font-size);
1772
1372
  line-height:inherit;
1773
1373
  -webkit-appearance:none;
1774
1374
  -moz-appearance:none;
1775
1375
  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);
1376
+ cursor:var(--tds-checkbox-cursor);
1377
+ background-color:var(--tds-checkbox-input-background-color);
1378
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
+ border-radius:var(--tds-checkbox-input-border-radius);
1780
1380
  transition-timing-function:var(--t-ease-in-out);
1781
1381
  transition-duration:var(--t-duration-200);
1782
- transition-property:var(--tds-radio-transition-property);
1382
+ transition-property:var(--tds-checkbox-transition-property);
1783
1383
  }
1784
1384
 
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);
1385
+ :is(.tds-checkbox input[type="checkbox"])::before{
1386
+ position:absolute;
1387
+ top:50%;
1388
+ left:50%;
1389
+ visibility:var(--tds-checkbox-input-icon-visibility);
1390
+ width:100%;
1391
+ height:100%;
1392
+ content:"";
1393
+ background-color:var(--tds-checkbox-input-icon-fill);
1394
+ border-radius:var(--tds-checkbox-input-border-radius);
1395
+ opacity:var(--tds-checkbox-input-icon-opacity);
1396
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
+ mask-image:var(--tds-checkbox-input-icon);
1398
+ -webkit-mask-repeat:no-repeat;
1399
+ mask-repeat:no-repeat;
1400
+ -webkit-mask-size:contain;
1401
+ mask-size:contain;
1402
+ transform:translate(-50%, -50%);
1788
1403
  }
1789
1404
 
1790
- :is(.tds-radio input[type="radio"]):focus-visible{
1405
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1408
+ }
1409
+
1410
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1791
1411
  outline:var(--t-focus-ring-outline);
1792
1412
  outline-offset:var(--t-focus-ring-offset);
1793
1413
  }
1794
1414
 
1795
- :is(.tds-radio input[type="radio"]):disabled{
1415
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1796
1416
  pointer-events:none;
1797
1417
  }
1798
1418
 
1799
1419
  @media (prefers-reduced-motion: reduce){
1800
1420
 
1801
- .tds-radio input[type="radio"]{
1802
- --tds-radio-transition-property:none;
1421
+ .tds-checkbox input[type="checkbox"]{
1422
+ --tds-checkbox-transition-property:none;
1803
1423
  }
1804
1424
  }
1805
1425
 
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;
1426
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
+ --tds-checkbox-input-icon-visibility:visible;
1430
+ --tds-checkbox-input-icon-opacity:1;
1810
1431
  }
1811
1432
 
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);
1433
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1815
1436
  }
1816
1437
 
1817
- .tds-radio:has(input:user-invalid){
1818
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1438
+ .tds-checkbox:has(input:checked){
1439
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1819
1440
  }
1820
1441
 
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);
1824
- }
1825
-
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);
1442
+ .tds-checkbox:has(input:indeterminate){
1443
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1444
+ }
1829
1445
 
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;
1446
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1833
1450
  }
1834
1451
 
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);
1452
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1838
1455
  }
1839
1456
 
1840
- .tds-radio-description{
1841
- display:flex;
1842
- grid-area:2 / 2;
1843
- gap:var(--t-spacing-half);
1844
- align-items:flex-start;
1845
- padding-inline-start:var(--t-spacing-1);
1846
- 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);
1850
- cursor:text;
1851
- }
1457
+ :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{
1458
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1460
+ }
1852
1461
 
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;
1462
+ :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){
1463
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1465
+ }
1466
+
1467
+ .tds-checkbox:has(input:required) label::after{
1468
+ margin-left:.25ch;
1469
+ color:var(--t-text-color-status-error);
1470
+ content:"*";
1471
+ }
1472
+
1473
+ .tds-checkbox:has(input:disabled){
1474
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1476
+
1477
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
+ --tds-checkbox-cursor:not-allowed;
1480
+ }
1481
+
1482
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1484
+ }
1485
+
1486
+ .tds-checkbox-description{
1487
+ display:flex;
1488
+ grid-area:2 / 2;
1489
+ gap:var(--t-spacing-half);
1490
+ align-items:flex-start;
1491
+ padding-inline-start:var(--t-spacing-1);
1492
+ margin:0;
1493
+ font-size:var(--tds-checkbox-description-font-size);
1494
+ line-height:var(--tds-checkbox-description-line-height);
1495
+ color:var(--tds-checkbox-description-color);
1496
+ cursor:text;
1859
1497
  }
1860
1498
 
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);
1499
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
+ display:var(--tds-checkbox-description-invalid-icon-display);
1501
+ flex-shrink:0;
1502
+ margin-top:calc(.5lh - .5em);
1503
+ line-height:var(--tds-checkbox-description-line-height);
1504
+ }
1865
1505
 
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;
1506
+ .tds-checkbox--sm{
1507
+ --tds-checkbox-line-height:1.35;
1508
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1509
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1510
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
+ --tds-checkbox-description-line-height:1.3;
1512
+ }
1513
+
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1516
+ }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1519
+
1520
+ position:relative;
1521
+ z-index:var(--tds-button-group-item-z-index);
1522
+ border-radius:0;
1523
+ }
1524
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1525
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
+ }
1527
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1528
+ position:absolute;
1529
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1530
+ width:var(--tds-btn-border-width);
1531
+ pointer-events:none;
1532
+ content:"";
1533
+ background-color:var(--t-border-color-white);
1534
+ }
1535
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1537
+ }
1538
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1540
+ }
1541
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1542
+ --tds-button-group-item-z-index:2;
1543
+ }
1544
+ :is(.tds-button-group > .tds-btn):focus-visible{
1545
+ --tds-button-group-item-z-index:5;
1546
+ }
1547
+ .tds-button-group > .tds-btn:first-child{
1548
+ border-start-start-radius:var(--tds-btn-border-radius);
1549
+ border-end-start-radius:var(--tds-btn-border-radius);
1550
+ }
1551
+ .tds-button-group > .tds-btn:last-child{
1552
+ border-start-end-radius:var(--tds-btn-border-radius);
1553
+ border-end-end-radius:var(--tds-btn-border-radius);
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1870
1565
  display:flex;
1871
1566
  flex-direction:column;
1872
1567
  gap:0;
1873
1568
  padding:0;
1874
1569
  margin:0;
1875
1570
 
1876
- font-size:var(--tds-radio-group-font-size);
1877
- line-height:var(--tds-radio-group-line-height);
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1878
1573
  border:0;
1879
1574
  }
1880
1575
 
1881
- .tds-radio-group legend{
1576
+ .tds-checkbox-group legend{
1882
1577
  float:left;
1883
1578
  padding:0;
1884
1579
  margin:0;
1885
1580
  }
1886
1581
 
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;
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1890
1585
  }
1891
1586
 
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{
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1906
1588
  margin-left:.25ch;
1907
1589
  color:var(--t-text-color-status-error);
1908
1590
  content:"*";
1909
1591
  }
1910
1592
 
1911
- .tds-radio-group-fields{
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1595
+ }
1596
+
1597
+ .tds-checkbox-group-fields{
1912
1598
  display:flex;
1913
1599
  flex-direction:column;
1914
- gap:var(--tds-radio-group-gap);
1600
+ gap:var(--tds-checkbox-group-gap);
1915
1601
  align-items:flex-start;
1916
1602
  margin-top:var(--t-spacing-1);
1917
1603
  }
1918
1604
 
1919
- .tds-radio-group-description{
1605
+ .tds-checkbox-group-description{
1920
1606
  display:flex;
1921
1607
  gap:var(--t-spacing-half);
1922
1608
  align-items:flex-start;
1923
1609
  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);
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1927
1613
  cursor:text;
1928
1614
  }
1929
1615
 
1930
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1931
- display:var(--tds-radio-group-description-invalid-icon-display);
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1932
1618
  flex-shrink:0;
1933
1619
  margin-top:calc(.5lh - .5em);
1934
- line-height:var(--tds-radio-group-description-line-height);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1935
1621
  }
1936
1622
 
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;
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1942
1628
  }
1943
1629
 
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);
1630
+ .tds-currency-input-control{
1631
+ display:flex;
1632
+ gap:var(--t-spacing-half);
1633
+ align-items:center;
1634
+ inline-size:100%;
1635
+ min-block-size:var(--tds-field-min-height);
1636
+ padding-inline:var(--tds-field-padding-inline);
1637
+ font-size:var(--tds-field-font-size);
1638
+ color:var(--tds-field-color);
1639
+ cursor:text;
1640
+ outline:var(--t-focus-ring-width) solid transparent;
1641
+ background-color:var(--tds-field-background-color);
1642
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1643
+ border-radius:var(--t-form-border-radius);
1644
+ transition-timing-function:var(--t-ease-in-out);
1645
+ transition-duration:var(--t-duration-200);
1646
+ transition-property:background-color, border-color, outline-color, outline-offset;
1647
+ }
1961
1648
 
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;
1649
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1650
+ border-color:var(--tds-field-border-color-hover);
1651
+ }
1966
1652
 
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;
1974
- }
1653
+ .tds-currency-input-control:has(input:focus){
1654
+ outline-color:var(--t-focus-ring-color);
1655
+ outline-offset:var(--t-focus-ring-offset);
1656
+ border-color:var(--tds-field-border-color-active);
1657
+ }
1975
1658
 
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;
1659
+ .tds-currency-input-control input{
1660
+ flex:1;
1661
+ min-inline-size:0;
1662
+ padding:0;
1663
+ font-family:inherit;
1664
+ font-size:inherit;
1665
+ color:inherit;
1981
1666
  -webkit-appearance:none;
1982
1667
  -moz-appearance:none;
1983
1668
  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);
1669
+ outline:0;
1987
1670
  background-color:transparent;
1988
1671
  border:0;
1989
- border-radius:var(--t-border-radius-round);
1990
1672
  }
1991
1673
 
1992
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1993
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1674
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1675
+ color:var(--tds-field-placeholder-color);
1676
+ -moz-user-select:none;
1677
+ user-select:none;
1994
1678
  }
1995
1679
 
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);
1680
+ :is(.tds-currency-input-control input)::placeholder{
1681
+ color:var(--tds-field-placeholder-color);
1682
+ -webkit-user-select:none;
1683
+ -moz-user-select:none;
1684
+ user-select:none;
1685
+ }
1686
+
1687
+ .tds-currency-input-control .tds-currency-input-prefix{
1688
+ flex-shrink:0;
1689
+ color:var(--t-text-color-secondary);
1690
+ pointer-events:none;
1691
+ -webkit-user-select:none;
1692
+ -moz-user-select:none;
1693
+ user-select:none;
2006
1694
  }
2007
1695
 
2008
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2009
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1696
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1697
+ --tds-field-background-color:var(--t-form-background-color-error);
1698
+ --tds-field-border-color:var(--t-form-border-color-error);
1699
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2010
1700
  }
2011
1701
 
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)));
1702
+ .tds-currency-input-control:has(:disabled){
1703
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1704
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1705
+ --tds-field-color:var(--t-form-color-disabled);
1706
+
1707
+ cursor:not-allowed;
2015
1708
  }
2016
1709
 
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);
1710
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1711
+ color:var(--tds-field-color);
2019
1712
  }
2020
1713
 
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;
1714
+ .tds-currency-input-control:has([readonly]){
1715
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1716
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1717
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1718
+ --tds-field-color:var(--t-form-color-readonly);
2026
1719
  }
2027
1720
 
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);
1721
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1722
+ border-color:var(--t-form-border-color-hover);
1723
+ }
1724
+ .tds-currency-input-currency-name--hidden{
1725
+ position:absolute;
1726
+ width:1px;
1727
+ height:1px;
1728
+ overflow:hidden;
1729
+ white-space:nowrap;
1730
+ clip-path:inset(50%);
2036
1731
  }
2037
1732
 
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);
1733
+ .tds-modal-overlay{
1734
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1735
+
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%);
1744
+ }
1745
+
1746
+ .tds-modal-overlay[data-entering]{
1747
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2049
1748
  }
2050
1749
 
2051
- @media (prefers-reduced-motion: reduce){
1750
+ .tds-modal-overlay[data-exiting]{
1751
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1752
+ }
2052
1753
 
2053
- .tds-toggle-switch-track{
2054
- --tds-toggle-switch-track-transition:none;
2055
- --tds-toggle-switch-thumb-transition:none;
2056
- }
1754
+ @keyframes tds-modal-overlay-fade{
1755
+ from{
1756
+ opacity:0;
2057
1757
  }
1758
+ }
2058
1759
 
2059
- .tds-toggle-switch-description{
1760
+ .tds-modal-frame{
1761
+ --tds-modal-width:600px;
1762
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
2060
1763
  display:flex;
2061
- grid-area:2 / 2;
2062
- align-items:flex-start;
2063
- padding-inline-start:var(--t-spacing-1);
2064
- 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;
2069
- }
2070
1764
 
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;
1765
+ grid-row:2;
1766
+ justify-content:center;
1767
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
2078
1768
  }
2079
1769
 
2080
- .tds-toggle-switch--hide-label{
2081
- --tds-toggle-switch-display:inline-flex;
1770
+ .tds-modal-frame[data-entering]{
1771
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1772
+ }
1773
+
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;
2082
1780
  }
2083
1781
 
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");
1782
+ .tds-modal-frame--lg{
1783
+ --tds-modal-width:800px;
2088
1784
  }
2089
1785
 
2090
- @supports (x: attr(x type(*))){
1786
+ .tds-modal-frame--xl{
1787
+ --tds-modal-width:1000px;
1788
+ }
2091
1789
 
2092
- .tds-input textarea{
2093
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1790
+ @keyframes tds-modal-zoom{
1791
+ from{
1792
+ opacity:0;
1793
+ scale:.96;
1794
+ }
2094
1795
  }
1796
+
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;
2095
1803
  }
1804
+ }
2096
1805
 
2097
- .tds-input.tds-textarea--resize-vertical textarea{
2098
- resize:vertical;
2099
- }
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);
2100
1813
 
2101
- .tds-input.tds-textarea--resize-none textarea{
2102
- resize:none;
2103
- }
1814
+ border:0;
1815
+ border-radius:var(--t-border-radius-lg);
1816
+ box-shadow:0 4px 18px 0 #0003;
1817
+ }
2104
1818
 
2105
- .tds-input.tds-textarea--resize-auto textarea{
2106
- resize:vertical;
2107
- }
1819
+ .tds-modal:focus{
1820
+ outline:none;
1821
+ }
2108
1822
 
2109
- @supports (field-sizing: content){
2110
- .tds-input.tds-textarea--resize-auto textarea{
2111
- field-sizing:content;
2112
- resize:none;
2113
- }
2114
- }
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
+ }
2115
1831
 
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;
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);
2131
1840
  }
2132
1841
 
2133
- @media (pointer: fine){
2134
- :is(.tds-input textarea)::-webkit-scrollbar{
2135
- width:12px;
2136
- height:12px;
2137
- cursor:default;
2138
- }
1842
+ .tds-modal-subtitle{
1843
+ grid-row:2;
1844
+ grid-column:1;
1845
+ margin:0;
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);
1850
+ }
2139
1851
 
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
- }
1852
+ .tds-modal-close{
1853
+ grid-row:1;
1854
+ grid-column:2;
1855
+ align-self:center;
1856
+ color:var(--t-icon-color-dim);
1857
+ }
2147
1858
 
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
- }
1859
+ .tds-modal-body{
1860
+ padding-block:var(--t-spacing-3);
1861
+ padding-inline:var(--t-spacing-4);
1862
+ }
2151
1863
 
2152
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2153
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2154
- }
1864
+ .tds-modal-body--full-width{
1865
+ padding-inline:0;
1866
+ }
2155
1867
 
2156
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2157
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2158
- }
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
+ }
2159
1877
 
2160
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2161
- background:var(--tds-input-scrollbar-surface-color);
2162
- }
1878
+ .tds-modal-footer > [slot="start"]{
1879
+ margin-inline-end:auto;
1880
+ }
2163
1881
 
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);
2168
- }
1882
+ @media (min-width: 720px){
1883
+ .tds-modal-overlay{
1884
+ --tds-modal-min-margin-block:0;
1885
+ }
2169
1886
 
2170
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2171
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2172
- cursor:default;
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
+ }
1895
+
1896
+ .tds-radio-group{
1897
+ --tds-radio-group-font-size:var(--t-font-size-md);
1898
+ --tds-radio-group-line-height:1.4;
1899
+ --tds-radio-group-gap:var(--t-spacing-1);
1900
+
1901
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1902
+ --tds-radio-group-description-line-height:1.35;
1903
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1904
+ --tds-radio-group-description-invalid-icon-display:none;
1905
+ display:flex;
1906
+ flex-direction:column;
1907
+ gap:0;
1908
+ padding:0;
1909
+ margin:0;
1910
+
1911
+ font-size:var(--tds-radio-group-font-size);
1912
+ line-height:var(--tds-radio-group-line-height);
1913
+ border:0;
1914
+ }
1915
+
1916
+ .tds-radio-group legend{
1917
+ float:left;
1918
+ padding:0;
1919
+ margin:0;
1920
+ }
1921
+
1922
+ .tds-radio-group[aria-invalid="true"]{
1923
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1924
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1925
+ }
1926
+
1927
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1928
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2173
1929
  }
2174
1930
 
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;
1931
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1932
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1933
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2179
1934
  }
2180
1935
 
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
- }
1936
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1937
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2185
1938
  }
1939
+
1940
+ .tds-radio-group:has(input:required) legend::after{
1941
+ margin-left:.25ch;
1942
+ color:var(--t-text-color-status-error);
1943
+ content:"*";
2186
1944
  }
2187
- }
2188
1945
 
2189
- @layer t-critical{
2190
- tds-page-header:not(.hydrated){
2191
- display:none;
1946
+ .tds-radio-group-fields{
1947
+ display:flex;
1948
+ flex-direction:column;
1949
+ gap:var(--tds-radio-group-gap);
1950
+ align-items:flex-start;
1951
+ margin-top:var(--t-spacing-1);
1952
+ }
1953
+
1954
+ .tds-radio-group-description{
1955
+ display:flex;
1956
+ gap:var(--t-spacing-half);
1957
+ align-items:flex-start;
1958
+ margin:var(--t-spacing-fourth) 0 0;
1959
+ font-size:var(--tds-radio-group-description-font-size);
1960
+ line-height:var(--tds-radio-group-description-line-height);
1961
+ color:var(--tds-radio-group-description-color);
1962
+ cursor:text;
1963
+ }
1964
+
1965
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1966
+ display:var(--tds-radio-group-description-invalid-icon-display);
1967
+ flex-shrink:0;
1968
+ margin-top:calc(.5lh - .5em);
1969
+ line-height:var(--tds-radio-group-description-line-height);
2192
1970
  }
1971
+
1972
+ .tds-radio-group--sm{
1973
+ --tds-radio-group-line-height:1.35;
1974
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1975
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1976
+ --tds-radio-group-description-line-height:1.3;
2193
1977
  }
2194
1978
 
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;
1979
+ .tds-radio{
1980
+ --tds-radio-font-size:var(--t-font-size-md);
1981
+ --tds-radio-cursor:pointer;
1982
+ --tds-radio-line-height:1.4;
1983
+ --tds-radio-transition-property:border-width;
2213
1984
 
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);
1985
+ --tds-radio-input-size:var(--t-element-size-md);
1986
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1987
+ --tds-radio-input-border-color:var(--t-form-border-color);
1988
+ --tds-radio-input-border-width:var(--t-form-border-width);
1989
+ --tds-radio-input-background-color:var(--t-form-background-color);
2216
1990
 
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);
1991
+ --tds-radio-label-color:var(--t-form-color);
2220
1992
 
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);
1993
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1994
+ --tds-radio-description-line-height:1.35;
1995
+ --tds-radio-description-color:var(--t-text-color-secondary);
2223
1996
 
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);
1997
+ position:relative;
1998
+ display:inline-grid;
1999
+ grid-template-columns:auto;
2000
+ grid-auto-columns:1fr;
2001
+ gap:var(--t-spacing-fourth) 0;
2002
+ line-height:var(--tds-radio-line-height);
2003
+ -webkit-user-select:none;
2004
+ -moz-user-select:none;
2005
+ user-select:none;
2006
+ }
2227
2007
 
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);
2008
+ .tds-radio label{
2009
+ grid-area:1 / 2;
2010
+ padding-inline-start:var(--t-spacing-1);
2011
+ font-size:var(--tds-radio-font-size);
2012
+ font-weight:var(--t-font-weight-normal);
2013
+ color:var(--tds-radio-label-color);
2014
+ cursor:var(--tds-radio-cursor);
2233
2015
  }
2234
2016
 
2235
- .tds-page-header--profile{
2236
- --tds-page-header-padding-y:20px;
2017
+ .tds-radio input[type="radio"]{
2018
+ position:relative;
2019
+ width:1em;
2020
+ height:1em;
2021
+ margin:calc((1lh - 1em) / 2) 0 0;
2022
+ font-size:var(--tds-radio-font-size);
2023
+ line-height:inherit;
2024
+ -webkit-appearance:none;
2025
+ -moz-appearance:none;
2026
+ appearance:none;
2027
+ cursor:var(--tds-radio-cursor);
2028
+ background-color:var(--tds-radio-input-background-color);
2029
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2030
+ border-radius:var(--tds-radio-input-border-radius);
2031
+ transition-timing-function:var(--t-ease-in-out);
2032
+ transition-duration:var(--t-duration-200);
2033
+ transition-property:var(--tds-radio-transition-property);
2237
2034
  }
2238
2035
 
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));
2036
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2037
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2038
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2243
2039
  }
2040
+
2041
+ :is(.tds-radio input[type="radio"]):focus-visible{
2042
+ outline:var(--t-focus-ring-outline);
2043
+ outline-offset:var(--t-focus-ring-offset);
2044
+ }
2045
+
2046
+ :is(.tds-radio input[type="radio"]):disabled{
2047
+ pointer-events:none;
2048
+ }
2049
+
2050
+ @media (prefers-reduced-motion: reduce){
2051
+
2052
+ .tds-radio input[type="radio"]{
2053
+ --tds-radio-transition-property:none;
2244
2054
  }
2055
+ }
2245
2056
 
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);
2057
+ .tds-radio:has(input:checked){
2058
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2059
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2060
+ --tds-radio-input-border-width:4px;
2061
+ }
2062
+
2063
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2064
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2065
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2264
2066
  }
2067
+
2068
+ .tds-radio:has(input:user-invalid){
2069
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2070
+ }
2071
+
2072
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2073
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2074
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2075
+ }
2076
+
2077
+ .tds-radio:has(input:disabled){
2078
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2079
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2080
+
2081
+ --tds-radio-label-color:var(--t-form-color-disabled);
2082
+ --tds-radio-description-color:var(--t-form-color-disabled);
2083
+ --tds-radio-cursor:not-allowed;
2265
2084
  }
2085
+
2086
+ .tds-radio:has(input:disabled) input:checked{
2087
+ --tds-radio-input-background-color:var(--t-form-background-color);
2088
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2089
+ }
2090
+
2091
+ .tds-radio-description{
2092
+ display:flex;
2093
+ grid-area:2 / 2;
2094
+ gap:var(--t-spacing-half);
2095
+ align-items:flex-start;
2096
+ padding-inline-start:var(--t-spacing-1);
2097
+ margin:0;
2098
+ font-size:var(--tds-radio-description-font-size);
2099
+ line-height:var(--tds-radio-description-line-height);
2100
+ color:var(--tds-radio-description-color);
2101
+ cursor:text;
2266
2102
  }
2267
2103
 
2268
- .tds-page-header{
2104
+ .tds-radio--sm{
2105
+ --tds-radio-line-height:1.35;
2106
+ --tds-radio-input-size:var(--t-element-size-sm);
2107
+ --tds-radio-font-size:var(--t-font-size-sm);
2108
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2109
+ --tds-radio-description-line-height:1.3;
2110
+ }
2111
+
2112
+ .tds-popover{
2113
+ max-inline-size:24rem;
2114
+ overflow:auto;
2115
+ overscroll-behavior:none;
2116
+ outline:0;
2117
+ scrollbar-color:#0004 var(--t-surface-color-card);
2118
+ scrollbar-width:thin;
2119
+ background:var(--t-surface-color-card);
2120
+ background-clip:padding-box;
2121
+ border:1px solid var(--t-border-color);
2122
+ border-radius:var(--t-border-radius);
2123
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2124
+ }
2125
+
2126
+ @media (prefers-reduced-motion: no-preference){
2127
+ .tds-popover[data-entering]{
2128
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2129
+ }
2130
+
2131
+ .tds-popover[data-exiting]{
2132
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2133
+ }
2134
+
2135
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2136
+ will-change:opacity, transform;
2137
+ }
2138
+
2139
+ @keyframes tds-popover{
2140
+ from{
2141
+ opacity:0;
2142
+ transform:translateY(-8px);
2143
+ }
2144
+ }
2145
+ }
2146
+
2147
+ .tds-popover-content{
2269
2148
  display:flex;
2270
2149
  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);
2150
+ padding:var(--t-spacing-1);
2151
+ outline:0;
2275
2152
  }
2276
2153
 
2277
- .tds-page-header:not(.has-nav){
2278
- padding-bottom:var(--tds-page-header-padding-y);
2279
- }
2154
+ .tds-input:has(textarea){
2155
+ --tds-input-padding-block:6px;
2156
+ --tds-input-resizer-size:var(--t-element-size-sm);
2157
+ --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");
2158
+ }
2280
2159
 
2281
- .tds-page-header.inactive{
2282
- background:var(--tds-page-header-background-color-inactive);
2283
- }
2160
+ @supports (x: attr(x type(*))){
2284
2161
 
2285
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2286
- width:100%;
2162
+ .tds-input textarea{
2163
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2164
+ }
2287
2165
  }
2288
2166
 
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;
2296
- }
2167
+ .tds-input.tds-textarea--resize-vertical textarea{
2168
+ resize:vertical;
2169
+ }
2297
2170
 
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);
2171
+ .tds-input.tds-textarea--resize-none textarea{
2172
+ resize:none;
2306
2173
  }
2307
2174
 
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;
2175
+ .tds-input.tds-textarea--resize-auto textarea{
2176
+ resize:vertical;
2327
2177
  }
2328
2178
 
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);
2179
+ @supports (field-sizing: content){
2180
+ .tds-input.tds-textarea--resize-auto textarea{
2181
+ field-sizing:content;
2182
+ resize:none;
2334
2183
  }
2184
+ }
2335
2185
 
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
- }
2186
+ .tds-input textarea{
2187
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2188
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2189
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2190
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2191
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2192
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2193
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2194
+ --tds-input-scrollbar-thumb-border-radius:999px;
2195
+ --tds-input-scrollbar-thumb-border-width:3px;
2196
+ --tds-input-scrollbar-track-margin-block:.125rem;
2197
+ scrollbar-color:initial;
2198
+ transition-timing-function:var(--t-ease-in-out);
2199
+ transition-duration:var(--t-duration-200);
2200
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2201
+ }
2342
2202
 
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
- }
2203
+ @media (pointer: fine){
2204
+ :is(.tds-input textarea)::-webkit-scrollbar{
2205
+ width:12px;
2206
+ height:12px;
2207
+ cursor:default;
2208
+ }
2209
+
2210
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2211
+ cursor:default;
2212
+ background:var(--tds-input-scrollbar-thumb-color);
2213
+ background-clip:content-box;
2214
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2215
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2216
+ }
2217
+
2218
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2219
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2220
+ }
2221
+
2222
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2223
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2224
+ }
2225
+
2226
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2227
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2228
+ }
2229
+
2230
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2231
+ background:var(--tds-input-scrollbar-surface-color);
2232
+ }
2233
+
2234
+ :is(.tds-input textarea)::-webkit-resizer{
2235
+ background:var(--tds-input-resizer-icon) no-repeat;
2236
+ background-position:right bottom;
2237
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2238
+ }
2239
+
2240
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2241
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2242
+ cursor:default;
2243
+ }
2244
+
2245
+ @supports (-moz-appearance: none){
2246
+ :is(.tds-input textarea){
2247
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2248
+ scrollbar-width:thin;
2249
+ }
2348
2250
 
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;
2251
+ @media (hover){
2252
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2253
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2355
2254
  }
2255
+ }
2256
+ }
2257
+ }
2356
2258
 
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
- }
2367
2259
 
2368
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2369
- position:relative;
2260
+ :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{
2261
+ -webkit-appearance:none;
2262
+ appearance:none;
2370
2263
  }
2371
2264
 
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);
2265
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2266
+ inline-size:1em;
2267
+ block-size:2em;
2268
+ }
2269
+
2270
+ [type="file"]:is(.tds-input input){
2271
+ padding-block:var(--t-spacing-half);
2272
+ padding-inline-start:var(--t-spacing-half);
2273
+ }
2274
+
2275
+ [type="file"]:is(.tds-input input):not(:disabled){
2276
+ color:var(--t-text-color-secondary);
2375
2277
  }
2376
2278
 
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%;
2279
+ [type="file"]:is(.tds-input input)::file-selector-button{
2280
+ --_file-btn-padding-block:3px;
2281
+
2282
+ padding-block:var(--_file-btn-padding-block);
2283
+ padding-inline:12px;
2284
+ margin-inline-end:12px;
2285
+ font:inherit;
2286
+ 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));
2287
+ color:var(--t-text-color-status-neutral);
2288
+ cursor:pointer;
2289
+ background-color:var(--t-fill-color-button-neutral-solid);
2290
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
2291
+ border-radius:var(--t-border-radius-md);
2292
+ transition-timing-function:var(--t-ease-in-out);
2293
+ transition-duration:var(--t-duration-200);
2294
+ transition-property:color, background-color, border-color;
2386
2295
  }
2387
2296
 
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
- }
2297
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
2298
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
2299
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
2392
2300
  }
2393
2301
 
2394
- .tds-page-header__title-bar{
2395
- display:flex;
2396
- flex-direction:column;
2397
- gap:var(--t-spacing-2) var(--t-spacing-1);
2398
- align-items:flex-start;
2399
- justify-content:space-between;
2400
- padding:0 var(--tds-page-header-padding-x);
2401
- }
2302
+ [type="file"]:is(.tds-input input):active::file-selector-button{
2303
+ background-color:var(--t-fill-color-button-neutral-solid-active);
2304
+ border-color:var(--t-fill-color-button-neutral-solid-active);
2305
+ }
2402
2306
 
2403
- .tds-page-header--profile > .tds-page-header__title-bar{
2404
- align-items:center;
2307
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
2308
+ color:var(--t-text-color-disabled);
2309
+ pointer-events:none;
2310
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
2311
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
2312
+ }
2313
+ @supports (field-sizing: content){
2314
+ .tds-input--auto-width{
2315
+ inline-size:-moz-fit-content;
2316
+ inline-size:fit-content;
2317
+ min-inline-size:min(100%, 122px);
2405
2318
  }
2406
2319
 
2407
- .tds-page-header__primary{
2408
- width:100%;
2320
+ .tds-input--auto-width input{
2321
+ field-sizing:content;
2322
+ inline-size:auto;
2323
+ }
2409
2324
  }
2410
2325
 
2411
- .tds-page-header__primary h1{
2326
+ .tds-toggle-switch{
2327
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2328
+ --tds-toggle-switch-cursor:pointer;
2329
+ --tds-toggle-switch-display:inline-grid;
2330
+ --tds-toggle-switch-line-height:1.4;
2331
+
2332
+ --tds-toggle-switch-label-color:var(--t-form-color);
2333
+
2334
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2335
+ --tds-toggle-switch-track-outline:none;
2336
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2337
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2338
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2339
+
2340
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2341
+ --tds-toggle-switch-thumb-transform:translateX(0);
2342
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2343
+
2344
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2345
+ --tds-toggle-switch-description-line-height:1.35;
2346
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2347
+ position:relative;
2348
+
2349
+ display:var(--tds-toggle-switch-display);
2350
+ grid-template-columns:auto;
2351
+ grid-auto-columns:1fr;
2352
+ gap:var(--t-spacing-fourth) 0;
2353
+ -webkit-user-select:none;
2354
+ -moz-user-select:none;
2355
+ user-select:none;
2356
+ }
2357
+
2358
+ .tds-toggle-switch input[type="checkbox"]{
2359
+ position:absolute;
2360
+ width:var(--tds-toggle-switch-track-width);
2361
+ height:var(--tds-toggle-switch-track-height);
2412
2362
  margin:0;
2413
- font-size:var(--tds-page-header-headline-font-size);
2363
+ -webkit-appearance:none;
2364
+ -moz-appearance:none;
2365
+ appearance:none;
2366
+ cursor:var(--tds-toggle-switch-cursor);
2367
+ outline:var(--tds-toggle-switch-track-outline);
2368
+ outline-offset:var(--t-focus-ring-offset);
2369
+ background-color:transparent;
2370
+ border:0;
2371
+ border-radius:var(--t-border-radius-round);
2372
+ }
2373
+
2374
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2375
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2376
+ }
2377
+
2378
+ .tds-toggle-switch label{
2379
+ display:inline-flex;
2380
+ grid-area:1 / 2;
2381
+ padding-inline-start:var(--t-spacing-1);
2382
+ margin-top:-.09375em;
2383
+ font-size:var(--tds-toggle-switch-font-size);
2414
2384
  font-weight:var(--t-font-weight-normal);
2415
- line-height:32px;
2416
- color:var(--tds-page-header-headline-color);
2417
- overflow-wrap:break-word;
2385
+ line-height:var(--tds-toggle-switch-line-height);
2386
+ color:var(--tds-toggle-switch-label-color);
2387
+ cursor:var(--tds-toggle-switch-cursor);
2418
2388
  }
2419
2389
 
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%;
2390
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2391
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2426
2392
  }
2427
2393
 
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;
2394
+ .tds-toggle-switch:has(input:checked){
2395
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2396
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2433
2397
  }
2434
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2435
- width:auto;
2436
- }
2437
2398
 
2438
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2439
- justify-content:flex-end;
2399
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2400
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2440
2401
  }
2402
+
2403
+ .tds-toggle-switch:has(input:disabled){
2404
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2405
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2406
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2407
+ --tds-toggle-switch-cursor:not-allowed;
2408
+ }
2409
+
2410
+ .tds-toggle-switch-track{
2411
+ position:relative;
2412
+ flex-shrink:0;
2413
+ width:var(--tds-toggle-switch-track-width);
2414
+ height:var(--tds-toggle-switch-track-height);
2415
+ background-color:var(--tds-toggle-switch-track-background-color);
2416
+ border-radius:var(--t-border-radius-round);
2417
+ transition:var(--tds-toggle-switch-track-transition);
2441
2418
  }
2442
2419
 
2443
- .tds-page-header-phone,
2444
- .tds-page-header-email{
2445
- color:var(--tds-page-header-color);
2446
- white-space:nowrap;
2420
+ .tds-toggle-switch-track::before{
2421
+ position:absolute;
2422
+ top:var(--t-spacing-fourth);
2423
+ left:var(--t-spacing-fourth);
2424
+ width:var(--tds-toggle-switch-thumb-size);
2425
+ height:var(--tds-toggle-switch-thumb-size);
2426
+ content:"";
2427
+ background-color:#fff;
2428
+ border-radius:var(--t-border-radius-round);
2429
+ transform:var(--tds-toggle-switch-thumb-transform);
2430
+ transition:var(--tds-toggle-switch-thumb-transition);
2431
+ }
2432
+
2433
+ @media (prefers-reduced-motion: reduce){
2434
+
2435
+ .tds-toggle-switch-track{
2436
+ --tds-toggle-switch-track-transition:none;
2437
+ --tds-toggle-switch-thumb-transition:none;
2447
2438
  }
2448
- .tds-page-header-email{
2449
- max-width:100%;
2450
- overflow:hidden;
2451
- text-overflow:ellipsis;
2439
+ }
2440
+
2441
+ .tds-toggle-switch-description{
2442
+ display:flex;
2443
+ grid-area:2 / 2;
2444
+ align-items:flex-start;
2445
+ padding-inline-start:var(--t-spacing-1);
2446
+ margin:0;
2447
+ font-size:var(--tds-toggle-switch-description-font-size);
2448
+ line-height:var(--tds-toggle-switch-description-line-height);
2449
+ color:var(--tds-toggle-switch-description-color);
2450
+ cursor:text;
2452
2451
  }
2453
2452
 
2454
- @keyframes indicator-pulse{
2455
- 0%{
2456
- opacity:.3;
2457
- transform:scale(.9);
2458
- }
2453
+ .tds-toggle-switch--sm{
2454
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2455
+ --tds-toggle-switch-line-height:1.35;
2456
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2457
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2458
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2459
+ --tds-toggle-switch-description-line-height:1.3;
2460
+ }
2459
2461
 
2460
- 100%{
2461
- opacity:0;
2462
- transform:scale(1.75);
2463
- }
2462
+ .tds-toggle-switch--hide-label{
2463
+ --tds-toggle-switch-display:inline-flex;
2464
2464
  }
2465
2465
 
2466
2466
  .tds-input{
@@ -4787,6 +4787,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4787
4787
  padding-inline-start:var(--t-spacing-half);
4788
4788
  }
4789
4789
 
4790
+ .tds-pane{
4791
+ --tds-pane-background-color:var(--t-surface-color-card);
4792
+ --tds-pane-border-radius:var(--t-border-radius-lg);
4793
+ --tds-pane-border-color:var(--t-border-color);
4794
+
4795
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
4796
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4797
+
4798
+ --tds-pane-title-color:var(--t-text-color-headline);
4799
+ --tds-pane-title-font-size:var(--t-font-size-lg);
4800
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
4801
+ --tds-pane-title-line-height:1.4;
4802
+
4803
+ --tds-pane-body-padding:var(--t-spacing-3);
4804
+
4805
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
4806
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4807
+
4808
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4809
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4810
+
4811
+ background:var(--tds-pane-background-color);
4812
+ border-radius:var(--tds-pane-border-radius);
4813
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
4814
+ display:flex;
4815
+ flex-direction:column;
4816
+ }
4817
+
4818
+ .tds-pane-header{
4819
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4820
+ padding-block:var(--tds-pane-header-padding-block);
4821
+ padding-inline:var(--tds-pane-header-padding-inline);
4822
+ }
4823
+
4824
+ .tds-pane-header > .tds-helper-shelf-trigger{
4825
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4826
+ }
4827
+
4828
+ .tds-pane-header > .tds-helper-shelf{
4829
+ flex-basis:100%;
4830
+ order:1;
4831
+ }
4832
+
4833
+ .tds-pane-header:has( > .tds-helper-shelf){
4834
+ row-gap:var(--tds-pane-header-padding-block);
4835
+ padding-block-end:0;
4836
+ }
4837
+
4838
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4839
+ font-size:var(--t-font-size-md);
4840
+ margin-block-end:var(--tds-pane-header-padding-block);
4841
+ }
4842
+
4843
+ .tds-pane-title{
4844
+ color:var(--tds-pane-title-color);
4845
+ font-size:var(--tds-pane-title-font-size);
4846
+ font-weight:var(--tds-pane-title-font-weight);
4847
+ line-height:var(--tds-pane-title-line-height);
4848
+ margin:0;
4849
+ }
4850
+
4851
+ .tds-pane-body{
4852
+ padding:var(--tds-pane-body-padding);
4853
+ }
4854
+
4855
+ .tds-pane-footer{
4856
+ padding-block-end:var(--tds-pane-footer-padding-block);
4857
+ padding-inline:var(--tds-pane-footer-padding-inline);
4858
+ }
4859
+
4860
+ .tds-pane-divider{
4861
+ border:0;
4862
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4863
+ margin-block:var(--tds-pane-divider-margin-block);
4864
+ margin-inline:var(--tds-pane-divider-margin-inline);
4865
+ }
4866
+
4790
4867
  .tds-data-table-filters-shelf{
4791
4868
  height:auto;
4792
4869
  overflow:hidden;
@@ -5095,83 +5172,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5095
5172
  --tds-segmented-control-background-color-disabled:transparent;
5096
5173
  }
5097
5174
 
5098
- .tds-pane{
5099
- --tds-pane-background-color:var(--t-surface-color-card);
5100
- --tds-pane-border-radius:var(--t-border-radius-lg);
5101
- --tds-pane-border-color:var(--t-border-color);
5102
-
5103
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
5104
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5105
-
5106
- --tds-pane-title-color:var(--t-text-color-headline);
5107
- --tds-pane-title-font-size:var(--t-font-size-lg);
5108
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
5109
- --tds-pane-title-line-height:1.4;
5110
-
5111
- --tds-pane-body-padding:var(--t-spacing-3);
5112
-
5113
- --tds-pane-footer-padding-block:var(--t-spacing-2);
5114
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5115
-
5116
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5117
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5118
-
5119
- background:var(--tds-pane-background-color);
5120
- border-radius:var(--tds-pane-border-radius);
5121
- border:var(--t-border-width) solid var(--tds-pane-border-color);
5122
- display:flex;
5123
- flex-direction:column;
5124
- }
5125
-
5126
- .tds-pane-header{
5127
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5128
- padding-block:var(--tds-pane-header-padding-block);
5129
- padding-inline:var(--tds-pane-header-padding-inline);
5130
- }
5131
-
5132
- .tds-pane-header > .tds-helper-shelf-trigger{
5133
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5134
- }
5135
-
5136
- .tds-pane-header > .tds-helper-shelf{
5137
- flex-basis:100%;
5138
- order:1;
5139
- }
5140
-
5141
- .tds-pane-header:has( > .tds-helper-shelf){
5142
- row-gap:var(--tds-pane-header-padding-block);
5143
- padding-block-end:0;
5144
- }
5145
-
5146
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5147
- font-size:var(--t-font-size-md);
5148
- margin-block-end:var(--tds-pane-header-padding-block);
5149
- }
5150
-
5151
- .tds-pane-title{
5152
- color:var(--tds-pane-title-color);
5153
- font-size:var(--tds-pane-title-font-size);
5154
- font-weight:var(--tds-pane-title-font-weight);
5155
- line-height:var(--tds-pane-title-line-height);
5156
- margin:0;
5157
- }
5158
-
5159
- .tds-pane-body{
5160
- padding:var(--tds-pane-body-padding);
5161
- }
5162
-
5163
- .tds-pane-footer{
5164
- padding-block-end:var(--tds-pane-footer-padding-block);
5165
- padding-inline:var(--tds-pane-footer-padding-inline);
5166
- }
5167
-
5168
- .tds-pane-divider{
5169
- border:0;
5170
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5171
- margin-block:var(--tds-pane-divider-margin-block);
5172
- margin-inline:var(--tds-pane-divider-margin-inline);
5173
- }
5174
-
5175
5175
  .has-instance-badge-NNA9P{
5176
5176
  inline-size:6px;
5177
5177
  block-size:6px;
@@ -5239,6 +5239,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5239
5239
  color:var(--t-text-color-status-error);
5240
5240
  }
5241
5241
 
5242
+ .tds-helper-shelf{
5243
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5244
+ --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5245
+ --tds-helper-shelf-color:var(--t-text-color);
5246
+ --tds-helper-shelf-font-size:var(--t-font-size-sm);
5247
+ --tds-helper-shelf-padding:var(--t-spacing-1);
5248
+
5249
+ height:0;
5250
+ overflow:hidden;
5251
+ transition:height var(--t-duration-300) var(--t-ease-in);
5252
+ }
5253
+
5254
+ @media (prefers-reduced-motion: reduce){
5255
+
5256
+ .tds-helper-shelf{
5257
+ transition:none;
5258
+ }
5259
+ }
5260
+
5261
+ .tds-helper-shelf--expanded{
5262
+ height:auto;
5263
+ transition-timing-function:var(--t-ease-out);
5264
+ }
5265
+
5266
+ @supports (interpolate-size: allow-keywords){
5267
+ .tds-helper-shelf{
5268
+ interpolate-size:allow-keywords;
5269
+ }
5270
+ }
5271
+
5272
+ .tds-helper-shelf-content{
5273
+ padding:var(--tds-helper-shelf-padding);
5274
+ font-size:var(--tds-helper-shelf-font-size);
5275
+ color:var(--tds-helper-shelf-color);
5276
+ background:var(--tds-helper-shelf-background-color);
5277
+ border-radius:var(--tds-helper-shelf-border-radius);
5278
+ }
5279
+
5280
+ .tds-helper-shelf-trigger{
5281
+ --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5282
+ }
5283
+
5284
+ .tds-helper-shelf-trigger[aria-expanded="true"]{
5285
+ --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5286
+ }
5287
+
5242
5288
  .tds-pagination{
5243
5289
  --tds-pagination-background-color:var(--t-surface-color-canvas);
5244
5290
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);
@@ -5342,52 +5388,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5342
5388
  }
5343
5389
  }
5344
5390
 
5345
- .tds-helper-shelf{
5346
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5347
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5348
- --tds-helper-shelf-color:var(--t-text-color);
5349
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5350
- --tds-helper-shelf-padding:var(--t-spacing-1);
5351
-
5352
- height:0;
5353
- overflow:hidden;
5354
- transition:height var(--t-duration-300) var(--t-ease-in);
5355
- }
5356
-
5357
- @media (prefers-reduced-motion: reduce){
5358
-
5359
- .tds-helper-shelf{
5360
- transition:none;
5361
- }
5362
- }
5363
-
5364
- .tds-helper-shelf--expanded{
5365
- height:auto;
5366
- transition-timing-function:var(--t-ease-out);
5367
- }
5368
-
5369
- @supports (interpolate-size: allow-keywords){
5370
- .tds-helper-shelf{
5371
- interpolate-size:allow-keywords;
5372
- }
5373
- }
5374
-
5375
- .tds-helper-shelf-content{
5376
- padding:var(--tds-helper-shelf-padding);
5377
- font-size:var(--tds-helper-shelf-font-size);
5378
- color:var(--tds-helper-shelf-color);
5379
- background:var(--tds-helper-shelf-background-color);
5380
- border-radius:var(--tds-helper-shelf-border-radius);
5381
- }
5382
-
5383
- .tds-helper-shelf-trigger{
5384
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5385
- }
5386
-
5387
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5388
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5389
- }
5390
-
5391
5391
  .tds-filterable-list-box:has(input:disabled){
5392
5392
  --tds-filterable-list-box-cursor:not-allowed;
5393
5393
  }