@planningcenter/tapestry 4.0.0-rc.1 → 4.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +13 -1
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +5 -2
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/reactRender.css +739 -729
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +739 -729
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/unstable.css +10 -0
  10. package/dist/unstable.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -766,226 +766,282 @@
766
766
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
767
767
  }
768
768
 
769
- .tds-button-group{
770
- display:inline-flex;
771
- }
772
- .tds-button-group > .tds-btn{
773
- --tds-button-group-item-z-index:1;
774
-
775
- z-index:var(--tds-button-group-item-z-index);
776
- border-radius:0;
777
- }
778
- :is(.tds-button-group > .tds-btn):not(:first-child){
779
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
780
- }
781
- :is(.tds-button-group > .tds-btn):hover{
782
- --tds-button-group-item-z-index:2;
783
- }
784
- :is(.tds-button-group > .tds-btn):focus-visible{
785
- --tds-button-group-item-z-index:5;
786
- }
787
- .tds-button-group > .tds-btn:first-child{
788
- border-start-start-radius:var(--tds-btn-border-radius);
789
- border-end-start-radius:var(--tds-btn-border-radius);
790
- }
791
- .tds-button-group > .tds-btn:last-child{
792
- border-start-end-radius:var(--tds-btn-border-radius);
793
- border-end-end-radius:var(--tds-btn-border-radius);
769
+ @layer t-critical{
770
+ tds-page-header:not(.hydrated){
771
+ display:none;
794
772
  }
773
+ }
795
774
 
796
- .tds-checkbox{
797
- --tds-checkbox-font-size:var(--t-font-size-md);
798
- --tds-checkbox-cursor:pointer;
799
- --tds-checkbox-line-height:1.4;
800
- --tds-checkbox-transition-property:background-color, border-color;
801
-
802
- --tds-checkbox-input-size:var(--t-element-size-md);
803
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
804
- --tds-checkbox-input-border-color:var(--t-form-border-color);
805
- --tds-checkbox-input-background-color:var(--t-form-background-color);
806
-
807
- --tds-checkbox-input-icon:none;
808
- --tds-checkbox-input-icon-visibility:hidden;
809
- --tds-checkbox-input-icon-opacity:0;
810
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
775
+ @layer t-component{
776
+ .tds-page-header{
777
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
778
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
779
+ --tds-page-header-color:var(--t-text-color);
780
+ --tds-page-header-bottom-border-color:transparent;
781
+ --tds-page-header-headline-color:var(--t-text-color-headline);
782
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
783
+ --tds-page-header-padding-x:var(--t-spacing-2);
784
+ --tds-page-header-padding-y:var(--t-spacing-2);
785
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
786
+ --tds-page-header-nav-gap:var(--t-spacing-1);
787
+ --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%);
788
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
789
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
790
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
791
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
792
+ --tds-page-header-nav-item-border-width:1px;
811
793
 
812
- --tds-checkbox-label-color:var(--t-form-color);
794
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
795
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
813
796
 
814
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
815
- --tds-checkbox-description-line-height:1.35;
816
- --tds-checkbox-description-color:var(--t-text-color-secondary);
817
- --tds-checkbox-description-invalid-icon-display:none;
797
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
798
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
799
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
818
800
 
819
- position:relative;
820
- display:inline-grid;
821
- grid-template-columns:auto;
822
- grid-auto-columns:1fr;
823
- gap:var(--t-spacing-fourth) 0;
824
- line-height:var(--tds-checkbox-line-height);
825
- -webkit-user-select:none;
826
- -moz-user-select:none;
827
- user-select:none;
828
- }
801
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
802
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
829
803
 
830
- .tds-checkbox label{
831
- grid-area:1 / 2;
832
- padding-inline-start:var(--t-spacing-1);
833
- font-size:var(--tds-checkbox-font-size);
834
- font-weight:var(--t-font-weight-normal);
835
- color:var(--tds-checkbox-label-color);
836
- cursor:var(--tds-checkbox-cursor);
837
- }
804
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
805
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
806
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
838
807
 
839
- .tds-checkbox tds-indeterminate{
840
- display:flex;
808
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
809
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
810
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
811
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
812
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
841
813
  }
842
814
 
843
- .tds-checkbox input[type="checkbox"]{
844
- position:relative;
845
- width:1em;
846
- height:1em;
847
- margin:calc((1lh - 1em) / 2) 0 0;
848
- font-size:var(--tds-checkbox-font-size);
849
- line-height:inherit;
850
- -webkit-appearance:none;
851
- -moz-appearance:none;
852
- appearance:none;
853
- cursor:var(--tds-checkbox-cursor);
854
- background-color:var(--tds-checkbox-input-background-color);
855
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
856
- border-radius:var(--tds-checkbox-input-border-radius);
857
- transition-timing-function:var(--t-ease-in-out);
858
- transition-duration:var(--t-duration-200);
859
- transition-property:var(--tds-checkbox-transition-property);
815
+ .tds-page-header--profile{
816
+ --tds-page-header-padding-y:20px;
860
817
  }
861
818
 
862
- :is(.tds-checkbox input[type="checkbox"])::before{
863
- position:absolute;
864
- top:50%;
865
- left:50%;
866
- visibility:var(--tds-checkbox-input-icon-visibility);
867
- width:100%;
868
- height:100%;
869
- content:"";
870
- background-color:var(--tds-checkbox-input-icon-fill);
871
- border-radius:var(--tds-checkbox-input-border-radius);
872
- opacity:var(--tds-checkbox-input-icon-opacity);
873
- -webkit-mask-image:var(--tds-checkbox-input-icon);
874
- mask-image:var(--tds-checkbox-input-icon);
875
- -webkit-mask-repeat:no-repeat;
876
- mask-repeat:no-repeat;
877
- -webkit-mask-size:contain;
878
- mask-size:contain;
879
- transform:translate(-50%, -50%);
880
- }
881
-
882
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
883
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
884
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
885
- }
886
-
887
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
888
- outline:var(--t-focus-ring-outline);
889
- outline-offset:var(--t-focus-ring-offset);
819
+ @supports (color: light-dark(#fff, #000)){
820
+ .tds-page-header{
821
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
822
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
890
823
  }
824
+ }
891
825
 
892
- :is(.tds-checkbox input[type="checkbox"]):disabled{
893
- pointer-events:none;
826
+ @media (min-width: 600px){
827
+ .tds-page-header{
828
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
829
+ --tds-page-header-color:var(--t-text-color-secondary);
830
+ --tds-page-header-bottom-border-color:var(--t-border-color);
831
+ --tds-page-header-padding-x:var(--t-spacing-3);
832
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
833
+ --tds-page-header-nav-gap:var(--t-spacing-half);
834
+ --tds-page-header-nav-background:transparent;
835
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
836
+ --tds-page-header-nav-item-border-width:1px;
837
+ --tds-page-header-nav-item-color:var(--t-text-color);
838
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
839
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
840
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
841
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
842
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
843
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
894
844
  }
895
-
896
- @media (prefers-reduced-motion: reduce){
897
-
898
- .tds-checkbox input[type="checkbox"]{
899
- --tds-checkbox-transition-property:none;
900
845
  }
901
- }
846
+ }
902
847
 
903
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
904
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
905
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
906
- --tds-checkbox-input-icon-visibility:visible;
907
- --tds-checkbox-input-icon-opacity:1;
908
- }
848
+ .tds-page-header{
849
+ display:flex;
850
+ flex-direction:column;
851
+ padding-top:var(--tds-page-header-padding-y);
852
+ color:var(--tds-page-header-color);
853
+ background:var(--tds-page-header-background-color);
854
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
855
+ }
909
856
 
910
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
911
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
912
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
913
- }
857
+ .tds-page-header:not(.has-nav){
858
+ padding-bottom:var(--tds-page-header-padding-y);
859
+ }
914
860
 
915
- .tds-checkbox:has(input:checked){
916
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
861
+ .tds-page-header.inactive{
862
+ background:var(--tds-page-header-background-color-inactive);
917
863
  }
918
864
 
919
- .tds-checkbox:has(input:indeterminate){
920
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
865
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
866
+ width:100%;
921
867
  }
922
868
 
923
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
924
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
925
- --tds-checkbox-description-color:var(--t-text-color-status-error);
926
- --tds-checkbox-description-invalid-icon-display:inline-block;
869
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
870
+ display:flex;
871
+ flex-flow:row wrap;
872
+ gap:var(--t-spacing-half) var(--t-spacing-1);
873
+ align-items:flex-start;
874
+ justify-content:flex-start;
875
+ min-width:0;
927
876
  }
928
877
 
929
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
930
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
931
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
878
+ :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{
879
+ display:flex;
880
+ gap:var(--tds-page-header-nav-gap);
881
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
882
+ margin:0 0 -1px;
883
+ overflow:auto;
884
+ list-style:none;
885
+ background:var(--tds-page-header-nav-background);
932
886
  }
933
887
 
934
- :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{
935
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
936
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
888
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
889
+ position:relative;
890
+ display:inline-flex;
891
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
892
+ font-size:var(--t-font-size-sm);
893
+ line-height:22px;
894
+ color:var(--tds-page-header-nav-item-color);
895
+ white-space:nowrap;
896
+ text-decoration:none;
897
+ -webkit-appearance:none;
898
+ -moz-appearance:none;
899
+ appearance:none;
900
+ cursor:pointer;
901
+ outline-offset:-2px;
902
+ background-color:var(--tds-page-header-nav-item-background-color);
903
+ background-clip:padding-box;
904
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
905
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
906
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
937
907
  }
938
908
 
939
- :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){
940
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
941
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
909
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
910
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
911
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
912
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
913
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
942
914
  }
943
915
 
944
- .tds-checkbox:has(input:required) label::after{
945
- margin-left:.25ch;
946
- color:var(--t-text-color-status-error);
947
- content:"*";
948
- }
916
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
917
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
918
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
919
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
920
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
921
+ }
949
922
 
950
- .tds-checkbox:has(input:disabled){
951
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
952
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
923
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
924
+ background-color:var(--tds-page-header-nav-item-background-color-active);
925
+ border-color:var(--tds-page-header-nav-item-border-color-active);
926
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
927
+ }
953
928
 
954
- --tds-checkbox-label-color:var(--t-form-color-disabled);
955
- --tds-checkbox-description-color:var(--t-form-color-disabled);
956
- --tds-checkbox-cursor:not-allowed;
957
- }
929
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
930
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
931
+ color:var(--tds-page-header-nav-item-color-disabled);
932
+ cursor:not-allowed;
933
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
934
+ opacity:1;
935
+ }
958
936
 
959
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
960
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
937
+ @media (min-width: 600px){
938
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
939
+ position:absolute;
940
+ inset:auto -1px -1px;
941
+ height:1px;
942
+ pointer-events:none;
943
+ content:"";
944
+ background-color:var(--tds-page-header-bottom-border-color);
945
+ }
946
+ }
947
+
948
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
949
+ position:relative;
961
950
  }
962
951
 
963
- .tds-checkbox-description{
952
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
953
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
954
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
955
+ }
956
+
957
+ :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{
958
+ position:absolute;
959
+ top:-5px;
960
+ right:-2px;
961
+ width:10px;
962
+ height:10px;
963
+ content:"";
964
+ background:var(--tds-page-header-nav-item-indicator-color);
965
+ border-radius:50%;
966
+ }
967
+
968
+ @media (prefers-reduced-motion: no-preference){
969
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
970
+ animation:indicator-pulse 1.25s ease infinite;
971
+ }
972
+ }
973
+
974
+ .tds-page-header__title-bar{
964
975
  display:flex;
965
- grid-area:2 / 2;
966
- gap:var(--t-spacing-half);
976
+ flex-direction:column;
977
+ gap:var(--t-spacing-2) var(--t-spacing-1);
967
978
  align-items:flex-start;
968
- padding-inline-start:var(--t-spacing-1);
969
- margin:0;
970
- font-size:var(--tds-checkbox-description-font-size);
971
- line-height:var(--tds-checkbox-description-line-height);
972
- color:var(--tds-checkbox-description-color);
973
- cursor:text;
979
+ justify-content:space-between;
980
+ padding:0 var(--tds-page-header-padding-x);
974
981
  }
975
982
 
976
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
977
- display:var(--tds-checkbox-description-invalid-icon-display);
978
- flex-shrink:0;
979
- margin-top:calc(.5lh - .5em);
980
- line-height:var(--tds-checkbox-description-line-height);
983
+ .tds-page-header--profile > .tds-page-header__title-bar{
984
+ align-items:center;
981
985
  }
982
986
 
983
- .tds-checkbox--sm{
984
- --tds-checkbox-line-height:1.35;
985
- --tds-checkbox-input-size:var(--t-element-size-sm);
986
- --tds-checkbox-font-size:var(--t-font-size-sm);
987
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
988
- --tds-checkbox-description-line-height:1.3;
987
+ .tds-page-header__primary{
988
+ width:100%;
989
+ }
990
+
991
+ .tds-page-header__primary h1{
992
+ margin:0;
993
+ font-size:var(--tds-page-header-headline-font-size);
994
+ font-weight:var(--t-font-weight-normal);
995
+ line-height:32px;
996
+ color:var(--tds-page-header-headline-color);
997
+ overflow-wrap:break-word;
998
+ }
999
+
1000
+ @media (min-width: 960px){
1001
+ .tds-page-header__primary{
1002
+ flex:1 1 max-content;
1003
+ width:auto;
1004
+ min-width:0;
1005
+ max-width:100%;
1006
+ }
1007
+
1008
+ .tds-page-header__title-bar,
1009
+ .tds-page-header--profile .tds-page-header__title-bar{
1010
+ flex-flow:row nowrap;
1011
+ row-gap:12px;
1012
+ align-items:flex-start;
1013
+ }
1014
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1015
+ width:auto;
1016
+ }
1017
+
1018
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1019
+ justify-content:flex-end;
1020
+ }
1021
+ }
1022
+
1023
+ .tds-page-header-phone,
1024
+ .tds-page-header-email{
1025
+ color:var(--tds-page-header-color);
1026
+ white-space:nowrap;
1027
+ }
1028
+
1029
+ .tds-page-header-email{
1030
+ max-width:100%;
1031
+ overflow:hidden;
1032
+ text-overflow:ellipsis;
1033
+ }
1034
+
1035
+ @keyframes indicator-pulse{
1036
+ 0%{
1037
+ opacity:.3;
1038
+ transform:scale(.9);
1039
+ }
1040
+
1041
+ 100%{
1042
+ opacity:0;
1043
+ transform:scale(1.75);
1044
+ }
989
1045
  }
990
1046
 
991
1047
  .tds-combo-box{
@@ -1170,55 +1226,156 @@
1170
1226
  color:var(--t-text-color-secondary);
1171
1227
  }
1172
1228
 
1229
+ .tds-checkbox-group{
1230
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1231
+ --tds-checkbox-group-line-height:1.4;
1232
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1173
1233
 
1174
- @media (prefers-reduced-motion: no-preference){
1234
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1235
+ --tds-checkbox-group-description-line-height:1.35;
1236
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1237
+ --tds-checkbox-group-description-invalid-icon-display:none;
1238
+ display:flex;
1239
+ flex-direction:column;
1240
+ gap:0;
1241
+ padding:0;
1242
+ margin:0;
1175
1243
 
1176
- :root{
1177
- interpolate-size:allow-keywords;
1244
+ font-size:var(--tds-checkbox-group-font-size);
1245
+ line-height:var(--tds-checkbox-group-line-height);
1246
+ border:0;
1178
1247
  }
1179
- }
1180
1248
 
1181
- @layer tds-component{
1182
- tds-sidenav,
1183
- .tds-sidenav{
1184
- --tds-sidenav-indent:12px;
1185
- --tds-sidenav-item-depth:0;
1249
+ .tds-checkbox-group legend{
1250
+ float:left;
1251
+ padding:0;
1252
+ margin:0;
1253
+ }
1186
1254
 
1187
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1255
+ .tds-checkbox-group[aria-invalid="true"]{
1256
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1257
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1258
+ }
1188
1259
 
1189
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1190
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1191
- --tds-sidenav-collapse-closed-opacity:0;
1192
- --tds-sidenav-collapse-open-opacity:1;
1193
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1194
- --tds-sidenav-collapse-open-transform:translateY(0);
1260
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1261
+ margin-left:.25ch;
1262
+ color:var(--t-text-color-status-error);
1263
+ content:"*";
1264
+ }
1195
1265
 
1196
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1197
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1198
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1199
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1266
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1267
+ content:none;
1268
+ }
1200
1269
 
1201
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1202
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1203
- --tds-sidenav-item-nested-background-selected:transparent;
1270
+ .tds-checkbox-group-fields{
1271
+ display:flex;
1272
+ flex-direction:column;
1273
+ gap:var(--tds-checkbox-group-gap);
1274
+ align-items:flex-start;
1275
+ margin-top:var(--t-spacing-1);
1276
+ }
1204
1277
 
1205
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1206
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1207
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1278
+ .tds-checkbox-group-description{
1279
+ display:flex;
1280
+ gap:var(--t-spacing-half);
1281
+ align-items:flex-start;
1282
+ margin:var(--t-spacing-fourth) 0 0;
1283
+ font-size:var(--tds-checkbox-group-description-font-size);
1284
+ line-height:var(--tds-checkbox-group-description-line-height);
1285
+ color:var(--tds-checkbox-group-description-color);
1286
+ cursor:text;
1287
+ }
1208
1288
 
1209
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1210
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1289
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1290
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1291
+ flex-shrink:0;
1292
+ margin-top:calc(.5lh - .5em);
1293
+ line-height:var(--tds-checkbox-group-description-line-height);
1211
1294
  }
1212
1295
 
1213
- @media (prefers-reduced-motion: reduce){
1214
- tds-sidenav,
1215
- .tds-sidenav{
1216
- --tds-sidenav-collapse-transition-enter:none;
1217
- --tds-sidenav-collapse-transition-exit:none;
1218
- --tds-sidenav-collapse-closed-transform:none;
1219
- --tds-sidenav-collapse-open-transform:none;
1220
- }
1221
- }
1296
+ .tds-checkbox-group--sm{
1297
+ --tds-checkbox-group-line-height:1.35;
1298
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1299
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1300
+ --tds-checkbox-group-description-line-height:1.3;
1301
+ }
1302
+
1303
+ .tds-button-group{
1304
+ display:inline-flex;
1305
+ }
1306
+ .tds-button-group > .tds-btn{
1307
+ --tds-button-group-item-z-index:1;
1308
+
1309
+ z-index:var(--tds-button-group-item-z-index);
1310
+ border-radius:0;
1311
+ }
1312
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1313
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1314
+ }
1315
+ :is(.tds-button-group > .tds-btn):hover{
1316
+ --tds-button-group-item-z-index:2;
1317
+ }
1318
+ :is(.tds-button-group > .tds-btn):focus-visible{
1319
+ --tds-button-group-item-z-index:5;
1320
+ }
1321
+ .tds-button-group > .tds-btn:first-child{
1322
+ border-start-start-radius:var(--tds-btn-border-radius);
1323
+ border-end-start-radius:var(--tds-btn-border-radius);
1324
+ }
1325
+ .tds-button-group > .tds-btn:last-child{
1326
+ border-start-end-radius:var(--tds-btn-border-radius);
1327
+ border-end-end-radius:var(--tds-btn-border-radius);
1328
+ }
1329
+
1330
+
1331
+ @media (prefers-reduced-motion: no-preference){
1332
+
1333
+ :root{
1334
+ interpolate-size:allow-keywords;
1335
+ }
1336
+ }
1337
+
1338
+ @layer tds-component{
1339
+ tds-sidenav,
1340
+ .tds-sidenav{
1341
+ --tds-sidenav-indent:12px;
1342
+ --tds-sidenav-item-depth:0;
1343
+
1344
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1345
+
1346
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1347
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1348
+ --tds-sidenav-collapse-closed-opacity:0;
1349
+ --tds-sidenav-collapse-open-opacity:1;
1350
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1351
+ --tds-sidenav-collapse-open-transform:translateY(0);
1352
+
1353
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1354
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1355
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1356
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1357
+
1358
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1359
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1360
+ --tds-sidenav-item-nested-background-selected:transparent;
1361
+
1362
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1363
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1364
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1365
+
1366
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1367
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1368
+ }
1369
+
1370
+ @media (prefers-reduced-motion: reduce){
1371
+ tds-sidenav,
1372
+ .tds-sidenav{
1373
+ --tds-sidenav-collapse-transition-enter:none;
1374
+ --tds-sidenav-collapse-transition-exit:none;
1375
+ --tds-sidenav-collapse-closed-transform:none;
1376
+ --tds-sidenav-collapse-open-transform:none;
1377
+ }
1378
+ }
1222
1379
 
1223
1380
  .tds-sidenav--theme-gray{
1224
1381
  --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
@@ -1666,524 +1823,172 @@ a.tds-dropdown-item:is(:hover, :active){
1666
1823
  border-top:1px solid var(--t-border-color);
1667
1824
  }
1668
1825
 
1669
- .tds-checkbox-group{
1670
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1671
- --tds-checkbox-group-line-height:1.4;
1672
- --tds-checkbox-group-gap:var(--t-spacing-1);
1673
-
1674
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1675
- --tds-checkbox-group-description-line-height:1.35;
1676
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1677
- --tds-checkbox-group-description-invalid-icon-display:none;
1678
- display:flex;
1679
- flex-direction:column;
1680
- gap:0;
1681
- padding:0;
1682
- margin:0;
1683
-
1684
- font-size:var(--tds-checkbox-group-font-size);
1685
- line-height:var(--tds-checkbox-group-line-height);
1686
- border:0;
1687
- }
1688
-
1689
- .tds-checkbox-group legend{
1690
- float:left;
1691
- padding:0;
1692
- margin:0;
1693
- }
1694
-
1695
- .tds-checkbox-group[aria-invalid="true"]{
1696
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1697
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1698
- }
1699
-
1700
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1701
- margin-left:.25ch;
1702
- color:var(--t-text-color-status-error);
1703
- content:"*";
1704
- }
1705
-
1706
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1707
- content:none;
1708
- }
1709
-
1710
- .tds-checkbox-group-fields{
1711
- display:flex;
1712
- flex-direction:column;
1713
- gap:var(--tds-checkbox-group-gap);
1714
- align-items:flex-start;
1715
- margin-top:var(--t-spacing-1);
1716
- }
1717
-
1718
- .tds-checkbox-group-description{
1719
- display:flex;
1720
- gap:var(--t-spacing-half);
1721
- align-items:flex-start;
1722
- margin:var(--t-spacing-fourth) 0 0;
1723
- font-size:var(--tds-checkbox-group-description-font-size);
1724
- line-height:var(--tds-checkbox-group-description-line-height);
1725
- color:var(--tds-checkbox-group-description-color);
1726
- cursor:text;
1727
- }
1728
-
1729
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1730
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1731
- flex-shrink:0;
1732
- margin-top:calc(.5lh - .5em);
1733
- line-height:var(--tds-checkbox-group-description-line-height);
1734
- }
1735
-
1736
- .tds-checkbox-group--sm{
1737
- --tds-checkbox-group-line-height:1.35;
1738
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1739
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1740
- --tds-checkbox-group-description-line-height:1.3;
1741
- }
1742
-
1743
-
1744
- :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{
1745
- -webkit-appearance:none;
1746
- appearance:none;
1747
- }
1748
-
1749
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1750
- inline-size:1em;
1751
- block-size:2em;
1752
- }
1753
-
1754
- @supports (field-sizing: content){
1755
- .tds-input--auto-width{
1756
- inline-size:-moz-fit-content;
1757
- inline-size:fit-content;
1758
- min-inline-size:min(100%, 122px);
1759
- }
1760
-
1761
- .tds-input--auto-width input{
1762
- field-sizing:content;
1763
- inline-size:auto;
1764
- }
1765
- }
1766
-
1767
- .tds-modal-overlay{
1768
- position:fixed;
1769
- inset:0;
1770
- z-index:1000;
1771
- display:flex;
1772
- align-items:center;
1773
- justify-content:center;
1774
- background:hsl(0 0% 0% / 40%);
1775
- }
1776
-
1777
- .tds-modal-overlay[data-entering]{
1778
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1779
- }
1780
-
1781
- .tds-modal-overlay[data-exiting]{
1782
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1783
- }
1784
-
1785
- @keyframes tds-modal-overlay-fade{
1786
- from{
1787
- opacity:0;
1788
- }
1789
- }
1790
-
1791
- .tds-modal-frame{
1792
- --tds-modal-width:600px;
1793
-
1794
- display:flex;
1795
- justify-content:center;
1796
- width:min(var(--tds-modal-width), calc(100% - 48px));
1797
- }
1798
-
1799
- .tds-modal-frame[data-entering]{
1800
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1801
- }
1802
-
1803
- .tds-modal-frame[data-exiting]{
1804
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1805
- }
1806
-
1807
- .tds-modal-frame--sm{
1808
- --tds-modal-width:400px;
1809
- }
1810
-
1811
- .tds-modal-frame--lg{
1812
- --tds-modal-width:800px;
1813
- }
1814
-
1815
- .tds-modal-frame--xl{
1816
- --tds-modal-width:1000px;
1817
- }
1818
-
1819
- @keyframes tds-modal-zoom{
1820
- from{
1821
- opacity:0;
1822
- scale:.96;
1823
- }
1824
- }
1825
-
1826
- @media (prefers-reduced-motion: reduce){
1827
- .tds-modal-overlay[data-entering],
1828
- .tds-modal-overlay[data-exiting],
1829
- .tds-modal-frame[data-entering],
1830
- .tds-modal-frame[data-exiting]{
1831
- animation:none;
1832
- }
1833
- }
1834
-
1835
- .tds-modal{
1836
- display:flex;
1837
- flex-direction:column;
1838
- width:100%;
1839
- padding-block:var(--t-spacing-3);
1840
- padding-inline:0;
1841
- background:var(--t-surface-color-card);
1842
-
1843
- border:0;
1844
- border-radius:var(--t-border-radius-lg);
1845
- box-shadow:0 4px 18px 0 #0003;
1846
- }
1847
-
1848
- .tds-modal:focus{
1849
- outline:none;
1850
- }
1851
-
1852
- .tds-modal-header{
1853
- display:grid;
1854
- grid-template-columns:1fr auto;
1855
- -moz-column-gap:var(--t-spacing-2);
1856
- column-gap:var(--t-spacing-2);
1857
- padding-block:0;
1858
- padding-inline:var(--t-spacing-4);
1859
- }
1860
-
1861
- .tds-modal-title{
1862
- grid-row:1;
1863
- grid-column:1;
1864
- margin:0;
1865
- font-size:var(--t-font-size-2xl);
1866
- font-weight:var(--t-font-weight-medium);
1867
- line-height:140%;
1868
- color:var(--t-text-color-headline);
1869
- }
1870
-
1871
- .tds-modal-subtitle{
1872
- grid-row:2;
1873
- grid-column:1;
1874
- margin:0;
1875
- font-size:var(--t-font-size-md);
1876
- font-weight:var(--t-font-weight-medium);
1877
- line-height:140%;
1878
- color:var(--t-text-color-secondary);
1879
- }
1880
-
1881
- .tds-modal-close{
1882
- grid-row:1;
1883
- grid-column:2;
1884
- align-self:center;
1885
- color:var(--t-icon-color-dim);
1886
- }
1887
-
1888
- .tds-modal-body{
1889
- padding-block:var(--t-spacing-3);
1890
- padding-inline:var(--t-spacing-4);
1891
- }
1892
-
1893
- .tds-modal-body--full-width{
1894
- padding-inline:0;
1895
- }
1896
-
1897
- .tds-modal-footer{
1898
- display:flex;
1899
- gap:var(--t-spacing-2);
1900
- align-items:center;
1901
- justify-content:flex-end;
1902
- padding-block-start:var(--t-spacing-3);
1903
- padding-inline:var(--t-spacing-4);
1904
- border-top:1px solid var(--t-border-color);
1905
- }
1906
-
1907
- .tds-modal-footer > [slot="start"]{
1908
- margin-inline-end:auto;
1909
- }
1910
-
1911
- @layer t-critical{
1912
- tds-page-header:not(.hydrated){
1913
- display:none;
1914
- }
1915
- }
1916
-
1917
- @layer t-component{
1918
- .tds-page-header{
1919
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1920
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1921
- --tds-page-header-color:var(--t-text-color);
1922
- --tds-page-header-bottom-border-color:transparent;
1923
- --tds-page-header-headline-color:var(--t-text-color-headline);
1924
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1925
- --tds-page-header-padding-x:var(--t-spacing-2);
1926
- --tds-page-header-padding-y:var(--t-spacing-2);
1927
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1928
- --tds-page-header-nav-gap:var(--t-spacing-1);
1929
- --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%);
1930
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1931
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1932
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1933
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1934
- --tds-page-header-nav-item-border-width:1px;
1935
-
1936
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1937
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1938
-
1939
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1940
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1941
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1942
-
1943
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1944
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1945
-
1946
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1947
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1948
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1949
-
1950
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1951
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1952
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1953
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1954
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1955
- }
1956
-
1957
- .tds-page-header--profile{
1958
- --tds-page-header-padding-y:20px;
1959
- }
1960
-
1961
- @supports (color: light-dark(#fff, #000)){
1962
- .tds-page-header{
1963
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1964
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1965
- }
1966
- }
1967
-
1968
- @media (min-width: 600px){
1969
- .tds-page-header{
1970
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1971
- --tds-page-header-color:var(--t-text-color-secondary);
1972
- --tds-page-header-bottom-border-color:var(--t-border-color);
1973
- --tds-page-header-padding-x:var(--t-spacing-3);
1974
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1975
- --tds-page-header-nav-gap:var(--t-spacing-half);
1976
- --tds-page-header-nav-background:transparent;
1977
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1978
- --tds-page-header-nav-item-border-width:1px;
1979
- --tds-page-header-nav-item-color:var(--t-text-color);
1980
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1981
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1982
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1983
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1984
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1985
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1986
- }
1987
- }
1988
- }
1989
-
1990
- .tds-page-header{
1991
- display:flex;
1992
- flex-direction:column;
1993
- padding-top:var(--tds-page-header-padding-y);
1994
- color:var(--tds-page-header-color);
1995
- background:var(--tds-page-header-background-color);
1996
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1997
- }
1998
-
1999
- .tds-page-header:not(.has-nav){
2000
- padding-bottom:var(--tds-page-header-padding-y);
2001
- }
2002
-
2003
- .tds-page-header.inactive{
2004
- background:var(--tds-page-header-background-color-inactive);
2005
- }
2006
-
2007
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2008
- width:100%;
2009
- }
2010
-
2011
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2012
- display:flex;
2013
- flex-flow:row wrap;
2014
- gap:var(--t-spacing-half) var(--t-spacing-1);
2015
- align-items:flex-start;
2016
- justify-content:flex-start;
2017
- min-width:0;
2018
- }
2019
-
2020
- :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{
2021
- display:flex;
2022
- gap:var(--tds-page-header-nav-gap);
2023
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2024
- margin:0 0 -1px;
2025
- overflow:auto;
2026
- list-style:none;
2027
- background:var(--tds-page-header-nav-background);
2028
- }
2029
-
2030
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2031
- position:relative;
2032
- display:inline-flex;
2033
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2034
- font-size:var(--t-font-size-sm);
2035
- line-height:22px;
2036
- color:var(--tds-page-header-nav-item-color);
2037
- white-space:nowrap;
2038
- text-decoration:none;
1826
+
1827
+ :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{
2039
1828
  -webkit-appearance:none;
2040
- -moz-appearance:none;
2041
1829
  appearance:none;
2042
- cursor:pointer;
2043
- outline-offset:-2px;
2044
- background-color:var(--tds-page-header-nav-item-background-color);
2045
- background-clip:padding-box;
2046
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2047
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2048
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2049
1830
  }
2050
1831
 
2051
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2052
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2053
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2054
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2055
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2056
- }
2057
-
2058
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2059
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2060
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2061
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2062
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2063
- }
1832
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1833
+ inline-size:1em;
1834
+ block-size:2em;
1835
+ }
2064
1836
 
2065
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2066
- background-color:var(--tds-page-header-nav-item-background-color-active);
2067
- border-color:var(--tds-page-header-nav-item-border-color-active);
2068
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2069
- }
1837
+ @supports (field-sizing: content){
1838
+ .tds-input--auto-width{
1839
+ inline-size:-moz-fit-content;
1840
+ inline-size:fit-content;
1841
+ min-inline-size:min(100%, 122px);
1842
+ }
2070
1843
 
2071
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2072
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2073
- color:var(--tds-page-header-nav-item-color-disabled);
2074
- cursor:not-allowed;
2075
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2076
- opacity:1;
2077
- }
1844
+ .tds-input--auto-width input{
1845
+ field-sizing:content;
1846
+ inline-size:auto;
1847
+ }
1848
+ }
2078
1849
 
2079
- @media (min-width: 600px){
2080
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2081
- position:absolute;
2082
- inset:auto -1px -1px;
2083
- height:1px;
2084
- pointer-events:none;
2085
- content:"";
2086
- background-color:var(--tds-page-header-bottom-border-color);
2087
- }
2088
- }
1850
+ .tds-modal-overlay{
1851
+ position:fixed;
1852
+ inset:0;
1853
+ z-index:1000;
1854
+ display:flex;
1855
+ align-items:center;
1856
+ justify-content:center;
1857
+ background:hsl(0 0% 0% / 40%);
1858
+ }
2089
1859
 
2090
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2091
- position:relative;
2092
- }
1860
+ .tds-modal-overlay[data-entering]{
1861
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1862
+ }
2093
1863
 
2094
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2095
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2096
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2097
- }
1864
+ .tds-modal-overlay[data-exiting]{
1865
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1866
+ }
2098
1867
 
2099
- :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{
2100
- position:absolute;
2101
- top:-5px;
2102
- right:-2px;
2103
- width:10px;
2104
- height:10px;
2105
- content:"";
2106
- background:var(--tds-page-header-nav-item-indicator-color);
2107
- border-radius:50%;
2108
- }
1868
+ @keyframes tds-modal-overlay-fade{
1869
+ from{
1870
+ opacity:0;
1871
+ }
1872
+ }
2109
1873
 
2110
- @media (prefers-reduced-motion: no-preference){
2111
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2112
- animation:indicator-pulse 1.25s ease infinite;
2113
- }
2114
- }
1874
+ .tds-modal-frame{
1875
+ --tds-modal-width:600px;
2115
1876
 
2116
- .tds-page-header__title-bar{
2117
1877
  display:flex;
2118
- flex-direction:column;
2119
- gap:var(--t-spacing-2) var(--t-spacing-1);
2120
- align-items:flex-start;
2121
- justify-content:space-between;
2122
- padding:0 var(--tds-page-header-padding-x);
1878
+ justify-content:center;
1879
+ width:min(var(--tds-modal-width), calc(100% - 48px));
2123
1880
  }
2124
1881
 
2125
- .tds-page-header--profile > .tds-page-header__title-bar{
2126
- align-items:center;
1882
+ .tds-modal-frame[data-entering]{
1883
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2127
1884
  }
2128
1885
 
2129
- .tds-page-header__primary{
2130
- width:100%;
1886
+ .tds-modal-frame[data-exiting]{
1887
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1888
+ }
1889
+
1890
+ .tds-modal-frame--sm{
1891
+ --tds-modal-width:400px;
2131
1892
  }
2132
1893
 
2133
- .tds-page-header__primary h1{
2134
- margin:0;
2135
- font-size:var(--tds-page-header-headline-font-size);
2136
- font-weight:var(--t-font-weight-normal);
2137
- line-height:32px;
2138
- color:var(--tds-page-header-headline-color);
2139
- overflow-wrap:break-word;
1894
+ .tds-modal-frame--lg{
1895
+ --tds-modal-width:800px;
1896
+ }
1897
+
1898
+ .tds-modal-frame--xl{
1899
+ --tds-modal-width:1000px;
1900
+ }
1901
+
1902
+ @keyframes tds-modal-zoom{
1903
+ from{
1904
+ opacity:0;
1905
+ scale:.96;
2140
1906
  }
1907
+ }
2141
1908
 
2142
- @media (min-width: 960px){
2143
- .tds-page-header__primary{
2144
- flex:1 1 max-content;
2145
- width:auto;
2146
- min-width:0;
2147
- max-width:100%;
1909
+ @media (prefers-reduced-motion: reduce){
1910
+ .tds-modal-overlay[data-entering],
1911
+ .tds-modal-overlay[data-exiting],
1912
+ .tds-modal-frame[data-entering],
1913
+ .tds-modal-frame[data-exiting]{
1914
+ animation:none;
2148
1915
  }
1916
+ }
2149
1917
 
2150
- .tds-page-header__title-bar,
2151
- .tds-page-header--profile .tds-page-header__title-bar{
2152
- flex-flow:row nowrap;
2153
- row-gap:12px;
2154
- align-items:flex-start;
1918
+ .tds-modal{
1919
+ display:flex;
1920
+ flex-direction:column;
1921
+ width:100%;
1922
+ padding-block:var(--t-spacing-3);
1923
+ padding-inline:0;
1924
+ background:var(--t-surface-color-card);
1925
+
1926
+ border:0;
1927
+ border-radius:var(--t-border-radius-lg);
1928
+ box-shadow:0 4px 18px 0 #0003;
1929
+ }
1930
+
1931
+ .tds-modal:focus{
1932
+ outline:none;
2155
1933
  }
2156
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2157
- width:auto;
2158
- }
2159
1934
 
2160
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2161
- justify-content:flex-end;
2162
- }
1935
+ .tds-modal-header{
1936
+ display:grid;
1937
+ grid-template-columns:1fr auto;
1938
+ -moz-column-gap:var(--t-spacing-2);
1939
+ column-gap:var(--t-spacing-2);
1940
+ padding-block:0;
1941
+ padding-inline:var(--t-spacing-4);
2163
1942
  }
2164
1943
 
2165
- .tds-page-header-phone,
2166
- .tds-page-header-email{
2167
- color:var(--tds-page-header-color);
2168
- white-space:nowrap;
1944
+ .tds-modal-title{
1945
+ grid-row:1;
1946
+ grid-column:1;
1947
+ margin:0;
1948
+ font-size:var(--t-font-size-2xl);
1949
+ font-weight:var(--t-font-weight-medium);
1950
+ line-height:140%;
1951
+ color:var(--t-text-color-headline);
2169
1952
  }
2170
1953
 
2171
- .tds-page-header-email{
2172
- max-width:100%;
2173
- overflow:hidden;
2174
- text-overflow:ellipsis;
1954
+ .tds-modal-subtitle{
1955
+ grid-row:2;
1956
+ grid-column:1;
1957
+ margin:0;
1958
+ font-size:var(--t-font-size-md);
1959
+ font-weight:var(--t-font-weight-medium);
1960
+ line-height:140%;
1961
+ color:var(--t-text-color-secondary);
2175
1962
  }
2176
1963
 
2177
- @keyframes indicator-pulse{
2178
- 0%{
2179
- opacity:.3;
2180
- transform:scale(.9);
2181
- }
1964
+ .tds-modal-close{
1965
+ grid-row:1;
1966
+ grid-column:2;
1967
+ align-self:center;
1968
+ color:var(--t-icon-color-dim);
1969
+ }
2182
1970
 
2183
- 100%{
2184
- opacity:0;
2185
- transform:scale(1.75);
2186
- }
1971
+ .tds-modal-body{
1972
+ padding-block:var(--t-spacing-3);
1973
+ padding-inline:var(--t-spacing-4);
1974
+ }
1975
+
1976
+ .tds-modal-body--full-width{
1977
+ padding-inline:0;
1978
+ }
1979
+
1980
+ .tds-modal-footer{
1981
+ display:flex;
1982
+ gap:var(--t-spacing-2);
1983
+ align-items:center;
1984
+ justify-content:flex-end;
1985
+ padding-block-start:var(--t-spacing-3);
1986
+ padding-inline:var(--t-spacing-4);
1987
+ border-top:1px solid var(--t-border-color);
1988
+ }
1989
+
1990
+ .tds-modal-footer > [slot="start"]{
1991
+ margin-inline-end:auto;
2187
1992
  }
2188
1993
 
2189
1994
  .tds-radio{
@@ -2507,6 +2312,201 @@ a.tds-dropdown-item:is(:hover, :active){
2507
2312
  --tds-radio-group-description-line-height:1.3;
2508
2313
  }
2509
2314
 
2315
+ .tds-checkbox{
2316
+ --tds-checkbox-font-size:var(--t-font-size-md);
2317
+ --tds-checkbox-cursor:pointer;
2318
+ --tds-checkbox-line-height:1.4;
2319
+ --tds-checkbox-transition-property:background-color, border-color;
2320
+
2321
+ --tds-checkbox-input-size:var(--t-element-size-md);
2322
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2323
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
2324
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
2325
+
2326
+ --tds-checkbox-input-icon:none;
2327
+ --tds-checkbox-input-icon-visibility:hidden;
2328
+ --tds-checkbox-input-icon-opacity:0;
2329
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2330
+
2331
+ --tds-checkbox-label-color:var(--t-form-color);
2332
+
2333
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
2334
+ --tds-checkbox-description-line-height:1.35;
2335
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
2336
+ --tds-checkbox-description-invalid-icon-display:none;
2337
+
2338
+ position:relative;
2339
+ display:inline-grid;
2340
+ grid-template-columns:auto;
2341
+ grid-auto-columns:1fr;
2342
+ gap:var(--t-spacing-fourth) 0;
2343
+ line-height:var(--tds-checkbox-line-height);
2344
+ -webkit-user-select:none;
2345
+ -moz-user-select:none;
2346
+ user-select:none;
2347
+ }
2348
+
2349
+ .tds-checkbox label{
2350
+ grid-area:1 / 2;
2351
+ padding-inline-start:var(--t-spacing-1);
2352
+ font-size:var(--tds-checkbox-font-size);
2353
+ font-weight:var(--t-font-weight-normal);
2354
+ color:var(--tds-checkbox-label-color);
2355
+ cursor:var(--tds-checkbox-cursor);
2356
+ }
2357
+
2358
+ .tds-checkbox tds-indeterminate{
2359
+ display:flex;
2360
+ }
2361
+
2362
+ .tds-checkbox input[type="checkbox"]{
2363
+ position:relative;
2364
+ width:1em;
2365
+ height:1em;
2366
+ margin:calc((1lh - 1em) / 2) 0 0;
2367
+ font-size:var(--tds-checkbox-font-size);
2368
+ line-height:inherit;
2369
+ -webkit-appearance:none;
2370
+ -moz-appearance:none;
2371
+ appearance:none;
2372
+ cursor:var(--tds-checkbox-cursor);
2373
+ background-color:var(--tds-checkbox-input-background-color);
2374
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2375
+ border-radius:var(--tds-checkbox-input-border-radius);
2376
+ transition-timing-function:var(--t-ease-in-out);
2377
+ transition-duration:var(--t-duration-200);
2378
+ transition-property:var(--tds-checkbox-transition-property);
2379
+ }
2380
+
2381
+ :is(.tds-checkbox input[type="checkbox"])::before{
2382
+ position:absolute;
2383
+ top:50%;
2384
+ left:50%;
2385
+ visibility:var(--tds-checkbox-input-icon-visibility);
2386
+ width:100%;
2387
+ height:100%;
2388
+ content:"";
2389
+ background-color:var(--tds-checkbox-input-icon-fill);
2390
+ border-radius:var(--tds-checkbox-input-border-radius);
2391
+ opacity:var(--tds-checkbox-input-icon-opacity);
2392
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
2393
+ mask-image:var(--tds-checkbox-input-icon);
2394
+ -webkit-mask-repeat:no-repeat;
2395
+ mask-repeat:no-repeat;
2396
+ -webkit-mask-size:contain;
2397
+ mask-size:contain;
2398
+ transform:translate(-50%, -50%);
2399
+ }
2400
+
2401
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2402
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2403
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2404
+ }
2405
+
2406
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2407
+ outline:var(--t-focus-ring-outline);
2408
+ outline-offset:var(--t-focus-ring-offset);
2409
+ }
2410
+
2411
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
2412
+ pointer-events:none;
2413
+ }
2414
+
2415
+ @media (prefers-reduced-motion: reduce){
2416
+
2417
+ .tds-checkbox input[type="checkbox"]{
2418
+ --tds-checkbox-transition-property:none;
2419
+ }
2420
+ }
2421
+
2422
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2423
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
2424
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2425
+ --tds-checkbox-input-icon-visibility:visible;
2426
+ --tds-checkbox-input-icon-opacity:1;
2427
+ }
2428
+
2429
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2430
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2431
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2432
+ }
2433
+
2434
+ .tds-checkbox:has(input:checked){
2435
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2436
+ }
2437
+
2438
+ .tds-checkbox:has(input:indeterminate){
2439
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2440
+ }
2441
+
2442
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2443
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2444
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
2445
+ --tds-checkbox-description-invalid-icon-display:inline-block;
2446
+ }
2447
+
2448
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2449
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2450
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2451
+ }
2452
+
2453
+ :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{
2454
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2455
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2456
+ }
2457
+
2458
+ :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){
2459
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2460
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2461
+ }
2462
+
2463
+ .tds-checkbox:has(input:required) label::after{
2464
+ margin-left:.25ch;
2465
+ color:var(--t-text-color-status-error);
2466
+ content:"*";
2467
+ }
2468
+
2469
+ .tds-checkbox:has(input:disabled){
2470
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2471
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2472
+
2473
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
2474
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
2475
+ --tds-checkbox-cursor:not-allowed;
2476
+ }
2477
+
2478
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2479
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2480
+ }
2481
+
2482
+ .tds-checkbox-description{
2483
+ display:flex;
2484
+ grid-area:2 / 2;
2485
+ gap:var(--t-spacing-half);
2486
+ align-items:flex-start;
2487
+ padding-inline-start:var(--t-spacing-1);
2488
+ margin:0;
2489
+ font-size:var(--tds-checkbox-description-font-size);
2490
+ line-height:var(--tds-checkbox-description-line-height);
2491
+ color:var(--tds-checkbox-description-color);
2492
+ cursor:text;
2493
+ }
2494
+
2495
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2496
+ display:var(--tds-checkbox-description-invalid-icon-display);
2497
+ flex-shrink:0;
2498
+ margin-top:calc(.5lh - .5em);
2499
+ line-height:var(--tds-checkbox-description-line-height);
2500
+ }
2501
+
2502
+ .tds-checkbox--sm{
2503
+ --tds-checkbox-line-height:1.35;
2504
+ --tds-checkbox-input-size:var(--t-element-size-sm);
2505
+ --tds-checkbox-font-size:var(--t-font-size-sm);
2506
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2507
+ --tds-checkbox-description-line-height:1.3;
2508
+ }
2509
+
2510
2510
  .tds-toggle-switch{
2511
2511
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2512
2512
  --tds-toggle-switch-cursor:pointer;
@@ -2647,6 +2647,33 @@ a.tds-dropdown-item:is(:hover, :active){
2647
2647
  --tds-toggle-switch-display:inline-flex;
2648
2648
  }
2649
2649
 
2650
+ .tds-loading-spinner{
2651
+ position:absolute;
2652
+ right:0;
2653
+ left:0;
2654
+ visibility:var(--tds-loading-spinner-visibility, hidden);
2655
+ width:var(--tds-loading-spinner-size, 1.25em);
2656
+ height:var(--tds-loading-spinner-size, 1.25em);
2657
+ margin:auto;
2658
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2659
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
2660
+ border-radius:50%;
2661
+ animation:spinner-rotate 500ms infinite linear;
2662
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2663
+ }
2664
+
2665
+ @keyframes spinner-rotate{
2666
+ to{
2667
+ transform:rotate(360deg);
2668
+ }
2669
+ }
2670
+
2671
+ @media (prefers-reduced-motion: reduce){
2672
+ [class*="--loading"] .tds-loading-spinner{
2673
+ --tds-loading-spinner-animation-play-state:paused;
2674
+ }
2675
+ }
2676
+
2650
2677
  .tds-input{
2651
2678
  --tds-input-border-color:var(--t-form-border-color);
2652
2679
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -2784,33 +2811,6 @@ a.tds-dropdown-item:is(:hover, :active){
2784
2811
  line-height:1.35;
2785
2812
  }
2786
2813
 
2787
- .tds-loading-spinner{
2788
- position:absolute;
2789
- right:0;
2790
- left:0;
2791
- visibility:var(--tds-loading-spinner-visibility, hidden);
2792
- width:var(--tds-loading-spinner-size, 1.25em);
2793
- height:var(--tds-loading-spinner-size, 1.25em);
2794
- margin:auto;
2795
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2796
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2797
- border-radius:50%;
2798
- animation:spinner-rotate 500ms infinite linear;
2799
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2800
- }
2801
-
2802
- @keyframes spinner-rotate{
2803
- to{
2804
- transform:rotate(360deg);
2805
- }
2806
- }
2807
-
2808
- @media (prefers-reduced-motion: reduce){
2809
- [class*="--loading"] .tds-loading-spinner{
2810
- --tds-loading-spinner-animation-play-state:paused;
2811
- }
2812
- }
2813
-
2814
2814
  @layer t-critical, t-component;
2815
2815
 
2816
2816
  :root{
@@ -4633,6 +4633,16 @@ a.tds-dropdown-item:is(:hover, :active){
4633
4633
  .tds-data-table-row:last-of-type .tds-data-table-cell{
4634
4634
  border-bottom-width:0;
4635
4635
  }
4636
+ .tds-data-table-row--interactive{
4637
+ --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4638
+ }
4639
+ .tds-data-table-row--interactive[data-hovered]{
4640
+ background-color:var(--tds-data-table-row-background-hover);
4641
+ }
4642
+ .tds-data-table-row--interactive[data-focus-visible]{
4643
+ outline:var(--t-focus-ring-outline);
4644
+ outline-offset:calc(-1 * var(--t-focus-ring-width));
4645
+ }
4636
4646
  .tds-data-table-empty{
4637
4647
  padding:var(--tds-data-table-cell-padding-block);
4638
4648
  padding-inline:var(--tds-data-table-cell-padding-inline);