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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1339 -1339
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1339 -1339
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,593 +677,604 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
684
- }
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
685
 
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --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%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
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);
704
690
 
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
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);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-checkbox-label-color:var(--t-form-color);
711
697
 
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
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;
714
702
 
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
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
+ }
718
713
 
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
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);
724
721
  }
725
722
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
723
+ .tds-checkbox tds-indeterminate{
724
+ display:flex;
728
725
  }
729
726
 
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
- }
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);
735
744
  }
736
745
 
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
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%);
755
764
  }
756
- }
757
- }
758
765
 
759
- .tds-page-header{
760
- display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
766
- }
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
+ }
767
770
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
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;
770
784
  }
785
+ }
771
786
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
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;
774
792
  }
775
793
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
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");
778
801
  }
779
802
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
781
- display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
787
805
  }
788
806
 
789
- :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{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
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);
797
816
  }
798
817
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
807
- text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
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);
818
821
  }
819
822
 
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
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);
825
826
  }
826
827
 
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
832
+ }
833
833
 
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
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);
839
837
 
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
847
-
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
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
+ }
858
842
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
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);
861
845
  }
862
846
 
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
866
- }
867
-
868
- :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{
869
- position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
874
- content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
877
- }
878
-
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
883
- }
884
-
885
- .tds-page-header__title-bar{
847
+ .tds-checkbox-description{
886
848
  display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
889
851
  align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
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;
892
858
  }
893
859
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
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);
896
865
  }
897
866
 
898
- .tds-page-header__primary{
899
- width:100%;
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;
900
873
  }
901
874
 
902
- .tds-page-header__primary h1{
903
- margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
909
- }
910
-
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
917
- }
875
+ .tds-button-group{
876
+ display:inline-flex;
877
+ }
878
+ .tds-button-group > .tds-btn{
879
+ --tds-button-group-item-z-index:1;
918
880
 
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
881
+ position:relative;
882
+ z-index:var(--tds-button-group-item-z-index);
883
+ border-radius:0;
924
884
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
885
+ :is(.tds-button-group > .tds-btn):not(:first-child){
886
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
927
887
  }
928
-
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
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;
931
904
  }
932
- }
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
+ }
933
916
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
944
917
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
949
- }
918
+ @media (prefers-reduced-motion: no-preference){
950
919
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
954
- }
920
+ :root{
921
+ interpolate-size:allow-keywords;
955
922
  }
923
+ }
956
924
 
957
- .tds-checkbox{
958
- --tds-checkbox-font-size:var(--t-font-size-md);
959
- --tds-checkbox-cursor:pointer;
960
- --tds-checkbox-line-height:1.4;
961
- --tds-checkbox-transition-property:background-color, border-color;
925
+ @layer tds-component{
926
+ tds-sidenav,
927
+ .tds-sidenav{
928
+ --tds-sidenav-indent:12px;
929
+ --tds-sidenav-item-depth:0;
962
930
 
963
- --tds-checkbox-input-size:var(--t-element-size-md);
964
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
965
- --tds-checkbox-input-border-color:var(--t-form-border-color);
966
- --tds-checkbox-input-background-color:var(--t-form-background-color);
931
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
967
932
 
968
- --tds-checkbox-input-icon:none;
969
- --tds-checkbox-input-icon-visibility:hidden;
970
- --tds-checkbox-input-icon-opacity:0;
971
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
933
+ --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;
934
+ --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;
935
+ --tds-sidenav-collapse-closed-opacity:0;
936
+ --tds-sidenav-collapse-open-opacity:1;
937
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
938
+ --tds-sidenav-collapse-open-transform:translateY(0);
972
939
 
973
- --tds-checkbox-label-color:var(--t-form-color);
940
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
941
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
942
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
943
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
974
944
 
975
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
976
- --tds-checkbox-description-line-height:1.35;
977
- --tds-checkbox-description-color:var(--t-text-color-secondary);
978
- --tds-checkbox-description-invalid-icon-display:none;
945
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
946
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
947
+ --tds-sidenav-item-nested-background-selected:transparent;
979
948
 
980
- position:relative;
981
- display:inline-grid;
982
- grid-template-columns:auto;
983
- grid-auto-columns:1fr;
984
- gap:var(--t-spacing-fourth) 0;
985
- line-height:var(--tds-checkbox-line-height);
986
- -webkit-user-select:none;
987
- -moz-user-select:none;
988
- user-select:none;
989
- }
949
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
950
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
951
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
990
952
 
991
- .tds-checkbox label{
992
- grid-area:1 / 2;
993
- padding-inline-start:var(--t-spacing-1);
994
- font-size:var(--tds-checkbox-font-size);
995
- font-weight:var(--t-font-weight-normal);
996
- color:var(--tds-checkbox-label-color);
997
- cursor:var(--tds-checkbox-cursor);
953
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
954
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
998
955
  }
999
956
 
1000
- .tds-checkbox tds-indeterminate{
1001
- display:flex;
957
+ @media (prefers-reduced-motion: reduce){
958
+ tds-sidenav,
959
+ .tds-sidenav{
960
+ --tds-sidenav-collapse-transition-enter:none;
961
+ --tds-sidenav-collapse-transition-exit:none;
962
+ --tds-sidenav-collapse-closed-transform:none;
963
+ --tds-sidenav-collapse-open-transform:none;
1002
964
  }
965
+ }
1003
966
 
1004
- .tds-checkbox input[type="checkbox"]{
1005
- position:relative;
1006
- width:1em;
1007
- height:1em;
1008
- margin:calc((1lh - 1em) / 2) 0 0;
1009
- font-size:var(--tds-checkbox-font-size);
1010
- line-height:inherit;
1011
- -webkit-appearance:none;
1012
- -moz-appearance:none;
1013
- appearance:none;
1014
- cursor:var(--tds-checkbox-cursor);
1015
- background-color:var(--tds-checkbox-input-background-color);
1016
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1017
- border-radius:var(--tds-checkbox-input-border-radius);
1018
- transition-timing-function:var(--t-ease-in-out);
1019
- transition-duration:var(--t-duration-200);
1020
- transition-property:var(--tds-checkbox-transition-property);
967
+ .tds-sidenav--theme-gray{
968
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
969
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
970
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
971
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
972
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1021
973
  }
974
+ }
1022
975
 
1023
- :is(.tds-checkbox input[type="checkbox"])::before{
1024
- position:absolute;
1025
- top:50%;
1026
- left:50%;
1027
- visibility:var(--tds-checkbox-input-icon-visibility);
1028
- width:100%;
1029
- height:100%;
1030
- content:"";
1031
- background-color:var(--tds-checkbox-input-icon-fill);
1032
- border-radius:var(--tds-checkbox-input-border-radius);
1033
- opacity:var(--tds-checkbox-input-icon-opacity);
1034
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1035
- mask-image:var(--tds-checkbox-input-icon);
1036
- -webkit-mask-repeat:no-repeat;
1037
- mask-repeat:no-repeat;
1038
- -webkit-mask-size:contain;
1039
- mask-size:contain;
1040
- transform:translate(-50%, -50%);
1041
- }
1042
-
1043
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1044
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1045
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1046
- }
976
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
977
+ display:flex;
978
+ }
1047
979
 
1048
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1049
- outline:var(--t-focus-ring-outline);
1050
- outline-offset:var(--t-focus-ring-offset);
1051
- }
980
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
981
+ flex-direction:column;
982
+ gap:var(--t-spacing-half);
983
+ width:100%;
984
+ }
1052
985
 
1053
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1054
- pointer-events:none;
1055
- }
986
+ .tds-sidenav-section-list{
987
+ width:100%;
988
+ padding:0;
989
+ margin:0;
990
+ list-style:none;
991
+ }
1056
992
 
1057
- @media (prefers-reduced-motion: reduce){
993
+ .tds-sidenav-section-header{
994
+ display:flex;
995
+ align-items:baseline;
996
+ justify-content:space-between;
997
+ padding-top:var(--t-spacing-2);
998
+ }
1058
999
 
1059
- .tds-checkbox input[type="checkbox"]{
1060
- --tds-checkbox-transition-property:none;
1000
+ .tds-sidenav-section-header h2{
1001
+ margin:0;
1002
+ font-size:var(--t-font-size-sm);
1003
+ font-weight:var(--t-font-weight-semibold);
1004
+ line-height:1.35;
1005
+ color:var(--t-text-color-secondary);
1006
+ text-transform:uppercase;
1061
1007
  }
1062
- }
1063
1008
 
1064
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1065
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1066
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1067
- --tds-checkbox-input-icon-visibility:visible;
1068
- --tds-checkbox-input-icon-opacity:1;
1009
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1010
+ padding-top:0;
1069
1011
  }
1070
1012
 
1071
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1072
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1073
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1074
- }
1075
-
1076
- .tds-checkbox:has(input:checked){
1077
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1013
+ .tds-sidenav-section-header [slot="label-actions"]{
1014
+ display:flex;
1015
+ gap:var(--t-spacing-half);
1016
+ align-items:center;
1078
1017
  }
1079
1018
 
1080
- .tds-checkbox:has(input:indeterminate){
1081
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1082
- }
1019
+ .tds-sidenav-section [slot="section-actions"]{
1020
+ display:flex;
1021
+ gap:12px;
1022
+ align-items:center;
1023
+ min-height:42px;
1024
+ padding:var(--t-spacing-1) 0;
1025
+ }
1083
1026
 
1084
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1085
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1086
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1087
- --tds-checkbox-description-invalid-icon-display:inline-block;
1027
+ .tds-sidenav-section-list,
1028
+ .tds-sidenav-item{
1029
+ width:100%;
1030
+ padding:0;
1031
+ margin:0;
1032
+ }
1033
+
1034
+ .tds-sidenav-item :is(a,button){
1035
+ position:relative;
1036
+ display:flex;
1037
+ gap:12px;
1038
+ align-items:center;
1039
+ width:100%;
1040
+ padding:12px;
1041
+ overflow:hidden;
1042
+ font-size:var(--t-font-size-sm);
1043
+ line-height:18px;
1044
+ color:var(--t-text-color-headline);
1045
+ white-space:nowrap;
1046
+ text-decoration:none;
1047
+ -webkit-appearance:none;
1048
+ -moz-appearance:none;
1049
+ appearance:none;
1050
+ cursor:pointer;
1051
+ background-color:var(--tds-sidenav-item-background, transparent);
1052
+ border:0;
1053
+ border-radius:var(--t-border-radius);
1054
+ transition:var(--tds-sidenav-item-transition);
1088
1055
  }
1089
1056
 
1090
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1091
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1092
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1057
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1058
+ display:block;
1059
+ flex:1;
1060
+ overflow:hidden;
1061
+ text-overflow:ellipsis;
1062
+ text-align:left;
1063
+ white-space:nowrap;
1093
1064
  }
1094
1065
 
1095
- :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{
1096
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1097
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1066
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1067
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1068
+ color:var(--t-text-color-headline);
1069
+ text-decoration:none;
1098
1070
  }
1099
1071
 
1100
- :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){
1101
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1102
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1103
- }
1072
+ :is(.tds-sidenav-item :is(a,button)):active{
1073
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1074
+ }
1104
1075
 
1105
- .tds-checkbox:has(input:required) label::after{
1106
- margin-left:.25ch;
1107
- color:var(--t-text-color-status-error);
1108
- content:"*";
1076
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1077
+ overflow:hidden;
1078
+ color:var(--tds-sidenav-item-icon-color);
1109
1079
  }
1110
1080
 
1111
- .tds-checkbox:has(input:disabled){
1112
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1113
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1081
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1082
+ display:block;
1083
+ width:var(--tds-sidenav-item-icon-size);
1084
+ height:var(--tds-sidenav-item-icon-size);
1085
+ }
1114
1086
 
1115
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1116
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1117
- --tds-checkbox-cursor:not-allowed;
1118
- }
1087
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1088
+ --tds-sidenav-indent:19px;
1089
+ }
1119
1090
 
1120
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1121
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1091
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1092
+ visibility:visible;
1093
+ block-size:auto;
1094
+ opacity:1;
1122
1095
  }
1123
1096
 
1124
- .tds-checkbox-description{
1125
- display:flex;
1126
- grid-area:2 / 2;
1127
- gap:var(--t-spacing-half);
1128
- align-items:flex-start;
1129
- padding-inline-start:var(--t-spacing-1);
1130
- margin:0;
1131
- font-size:var(--tds-checkbox-description-font-size);
1132
- line-height:var(--tds-checkbox-description-line-height);
1133
- color:var(--tds-checkbox-description-color);
1134
- cursor:text;
1135
- }
1097
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1098
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1099
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1136
1100
 
1137
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1138
- display:var(--tds-checkbox-description-invalid-icon-display);
1139
- flex-shrink:0;
1140
- margin-top:calc(.5lh - .5em);
1141
- line-height:var(--tds-checkbox-description-line-height);
1101
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1102
+ font-weight:var(--t-font-weight-semibold);
1142
1103
  }
1143
1104
 
1144
- .tds-checkbox--sm{
1145
- --tds-checkbox-line-height:1.35;
1146
- --tds-checkbox-input-size:var(--t-element-size-sm);
1147
- --tds-checkbox-font-size:var(--t-font-size-sm);
1148
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1149
- --tds-checkbox-description-line-height:1.3;
1150
- }
1151
-
1152
- .tds-checkbox-group{
1153
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1154
- --tds-checkbox-group-line-height:1.4;
1155
- --tds-checkbox-group-gap:var(--t-spacing-1);
1156
-
1157
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1158
- --tds-checkbox-group-description-line-height:1.35;
1159
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1160
- --tds-checkbox-group-description-invalid-icon-display:none;
1161
- display:flex;
1162
- flex-direction:column;
1163
- gap:0;
1164
- padding:0;
1165
- margin:0;
1166
-
1167
- font-size:var(--tds-checkbox-group-font-size);
1168
- line-height:var(--tds-checkbox-group-line-height);
1169
- border:0;
1170
- }
1171
-
1172
- .tds-checkbox-group legend{
1173
- float:left;
1174
- padding:0;
1175
- margin:0;
1105
+ .tds-sidenav-item:has(.tds-sidenav-section){
1106
+ display:flex;
1107
+ flex-direction:column;
1108
+ gap:var(--t-spacing-half);
1176
1109
  }
1177
1110
 
1178
- .tds-checkbox-group[aria-invalid="true"]{
1179
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1180
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1111
+ .tds-sidenav-item .tds-sidenav-section-list{
1112
+ --tds-sidenav-item-depth:1;
1113
+ gap:0;
1181
1114
  }
1182
1115
 
1183
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1184
- margin-left:.25ch;
1185
- color:var(--t-text-color-status-error);
1186
- content:"*";
1116
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1117
+ visibility:hidden;
1118
+ block-size:0;
1119
+ overflow-y:clip;
1120
+ opacity:0;
1121
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1187
1122
  }
1188
1123
 
1189
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1190
- content:none;
1124
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1125
+ --tds-sidenav-item-depth:2;
1191
1126
  }
1192
1127
 
1193
- .tds-checkbox-group-fields{
1194
- display:flex;
1195
- flex-direction:column;
1196
- gap:var(--tds-checkbox-group-gap);
1197
- align-items:flex-start;
1198
- margin-top:var(--t-spacing-1);
1199
- }
1128
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1129
+ min-height:var(--t-element-size-2xl);
1130
+ padding-block:9px;
1131
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1132
+ line-height:1;
1133
+ background-color:transparent;
1134
+ }
1200
1135
 
1201
- .tds-checkbox-group-description{
1136
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1137
+ position:absolute;
1138
+ top:0;
1139
+ bottom:0;
1140
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1141
+ width:2px;
1142
+ content:"";
1143
+ background-color:var(--tds-sidenav-item-nested-border-color);
1144
+ transition:var(--tds-sidenav-item-transition);
1145
+ }
1146
+
1147
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1148
+ position:absolute;
1149
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1150
+ z-index:-1;
1151
+ height:100%;
1152
+ content:"";
1153
+ background-color:var(--tds-sidenav-item-nested-background);
1154
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1155
+ transition:var(--tds-sidenav-item-transition);
1156
+ }
1157
+
1158
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1159
+ display:block;
1160
+ text-align:left;
1161
+ white-space:normal;
1162
+ }
1163
+
1164
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1165
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1166
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1167
+ }
1168
+
1169
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1170
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1171
+ }
1172
+
1173
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1174
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1175
+ font-weight:var(--t-font-weight-medium);
1176
+ }
1177
+
1178
+ .tds-sidenav-responsive-header{
1202
1179
  display:flex;
1203
- gap:var(--t-spacing-half);
1204
- align-items:flex-start;
1205
- margin:var(--t-spacing-fourth) 0 0;
1206
- font-size:var(--tds-checkbox-group-description-font-size);
1207
- line-height:var(--tds-checkbox-group-description-line-height);
1208
- color:var(--tds-checkbox-group-description-color);
1209
- cursor:text;
1180
+ gap:var(--t-spacing-2);
1181
+ align-items:center;
1182
+ width:100%;
1210
1183
  }
1211
1184
 
1212
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1213
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1214
- flex-shrink:0;
1215
- margin-top:calc(.5lh - .5em);
1216
- line-height:var(--tds-checkbox-group-description-line-height);
1185
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1186
+ order:0;
1217
1187
  }
1218
1188
 
1219
- .tds-checkbox-group--sm{
1220
- --tds-checkbox-group-line-height:1.35;
1221
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1222
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1223
- --tds-checkbox-group-description-line-height:1.3;
1224
- }
1189
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1190
+ flex:1;
1191
+ order:1;
1192
+ margin:0;
1193
+ font-size:var(--t-font-size-lg);
1194
+ font-weight:var(--t-font-weight-medium);
1195
+ color:var(--t-text-color-headline);
1196
+ }
1225
1197
 
1226
- .tds-button-group{
1227
- display:inline-flex;
1228
- }
1229
- .tds-button-group > .tds-btn{
1230
- --tds-button-group-item-z-index:1;
1198
+ @media (max-width: 719px){
1199
+ .tds-sidenav-collapse{
1200
+ z-index:10001;
1201
+ display:none;
1202
+ max-width:min(448px, calc(100vw - 48px));
1203
+ padding:0;
1204
+ margin:12px 0;
1205
+ position-area:bottom span-right;
1206
+ overflow:hidden;
1207
+ outline:0;
1208
+ background:var(--t-surface-color-card);
1209
+ border:0;
1210
+ border-radius:6px;
1211
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1212
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1213
+ transform:var(--tds-sidenav-collapse-open-transform);
1214
+ transition:var(--tds-sidenav-collapse-transition-enter);
1215
+ will-change:transform;
1216
+ }
1231
1217
 
1232
- position:relative;
1233
- z-index:var(--tds-button-group-item-z-index);
1234
- border-radius:0;
1218
+ .tds-sidenav-scroll-container{
1219
+ --webkit-overflow-scrolling:touch;
1220
+ display:block;
1221
+ width:100%;
1222
+ height:-moz-fit-content;
1223
+ height:fit-content;
1224
+ padding:var(--t-spacing-2);
1225
+ overflow-y:auto;
1235
1226
  }
1236
- :is(.tds-button-group > .tds-btn):not(:first-child){
1237
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1227
+
1228
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1229
+ display:none;
1230
+ }
1231
+ @supports selector(:popover-open){
1232
+ .tds-sidenav-collapse:popover-open{
1233
+ display:flex;
1238
1234
  }
1239
- :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{
1240
- position:absolute;
1241
- inset-block:calc(var(--tds-btn-border-width) * -1);
1242
- width:var(--tds-btn-border-width);
1243
- pointer-events:none;
1244
- content:"";
1245
- background-color:var(--t-border-color-white);
1246
- }
1247
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1248
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1249
- }
1250
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1251
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1235
+
1236
+ .tds-sidenav-collapse:not(:popover-open){
1237
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1238
+ transition:var(--tds-sidenav-collapse-transition-exit);
1239
+ }
1240
+
1241
+ @starting-style{
1242
+ .tds-sidenav-collapse:popover-open{
1243
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1244
+ transform:var(--tds-sidenav-collapse-closed-transform);
1252
1245
  }
1253
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1254
- --tds-button-group-item-z-index:2;
1255
1246
  }
1256
- :is(.tds-button-group > .tds-btn):focus-visible{
1257
- --tds-button-group-item-z-index:5;
1247
+ }
1248
+ @supports not selector(:popover-open){
1249
+ .tds-sidenav-collapse.\:popover-open{
1250
+ display:flex;
1251
+ }
1252
+
1253
+ .tds-sidenav-collapse:not(.\:popover-open){
1254
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1255
+ transition:var(--tds-sidenav-collapse-transition-exit);
1258
1256
  }
1259
- .tds-button-group > .tds-btn:first-child{
1260
- border-start-start-radius:var(--tds-btn-border-radius);
1261
- border-end-start-radius:var(--tds-btn-border-radius);
1262
1257
  }
1263
- .tds-button-group > .tds-btn:last-child{
1264
- border-start-end-radius:var(--tds-btn-border-radius);
1265
- border-end-end-radius:var(--tds-btn-border-radius);
1258
+ }
1259
+
1260
+ @media (min-width: 720px){
1261
+ .tds-sidenav-responsive-header{
1262
+ display:none;
1266
1263
  }
1264
+ }
1265
+
1266
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1267
+ display:none;
1268
+ }
1269
+
1270
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1271
+ display:block;
1272
+ }
1273
+
1274
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1275
+ display:flex;
1276
+ flex-direction:column;
1277
+ }
1267
1278
 
1268
1279
  .tds-currency-input-control{
1269
1280
  display:flex;
@@ -1368,71 +1379,78 @@
1368
1379
  clip-path:inset(50%);
1369
1380
  }
1370
1381
 
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);
1371
1386
 
1372
- :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{
1373
- -webkit-appearance:none;
1374
- appearance:none;
1375
- }
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;
1391
+ display:flex;
1392
+ flex-direction:column;
1393
+ gap:0;
1394
+ padding:0;
1395
+ margin:0;
1376
1396
 
1377
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1378
- inline-size:1em;
1379
- block-size:2em;
1380
- }
1397
+ font-size:var(--tds-checkbox-group-font-size);
1398
+ line-height:var(--tds-checkbox-group-line-height);
1399
+ border:0;
1400
+ }
1381
1401
 
1382
- [type="file"]:is(.tds-input input){
1383
- padding-block:var(--t-spacing-half);
1384
- padding-inline-start:var(--t-spacing-half);
1385
- }
1402
+ .tds-checkbox-group legend{
1403
+ float:left;
1404
+ padding:0;
1405
+ margin:0;
1406
+ }
1386
1407
 
1387
- [type="file"]:is(.tds-input input):not(:disabled){
1388
- color:var(--t-text-color-secondary);
1389
- }
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;
1411
+ }
1390
1412
 
1391
- [type="file"]:is(.tds-input input)::file-selector-button{
1392
- --_file-btn-padding-block:3px;
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
+ }
1393
1418
 
1394
- padding-block:var(--_file-btn-padding-block);
1395
- padding-inline:12px;
1396
- margin-inline-end:12px;
1397
- font:inherit;
1398
- 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));
1399
- color:var(--t-text-color-status-neutral);
1400
- cursor:pointer;
1401
- background-color:var(--t-fill-color-button-neutral-solid);
1402
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1403
- border-radius:var(--t-border-radius-md);
1404
- transition-timing-function:var(--t-ease-in-out);
1405
- transition-duration:var(--t-duration-200);
1406
- transition-property:color, background-color, border-color;
1407
- }
1419
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1420
+ content:none;
1421
+ }
1408
1422
 
1409
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1410
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1411
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1412
- }
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
+ }
1413
1430
 
1414
- [type="file"]:is(.tds-input input):active::file-selector-button{
1415
- background-color:var(--t-fill-color-button-neutral-solid-active);
1416
- border-color:var(--t-fill-color-button-neutral-solid-active);
1417
- }
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
+ }
1418
1441
 
1419
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1420
- color:var(--t-text-color-disabled);
1421
- pointer-events:none;
1422
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1423
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1424
- }
1425
- @supports (field-sizing: content){
1426
- .tds-input--auto-width{
1427
- inline-size:-moz-fit-content;
1428
- inline-size:fit-content;
1429
- min-inline-size:min(100%, 122px);
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);
1430
1447
  }
1431
1448
 
1432
- .tds-input--auto-width input{
1433
- field-sizing:content;
1434
- inline-size:auto;
1435
- }
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;
1436
1454
  }
1437
1455
 
1438
1456
  .tds-modal-overlay{
@@ -1598,6 +1616,73 @@
1598
1616
  }
1599
1617
  }
1600
1618
 
1619
+
1620
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1621
+ -webkit-appearance:none;
1622
+ appearance:none;
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
+
1601
1686
  .tds-popover{
1602
1687
  max-inline-size:24rem;
1603
1688
  overflow:auto;
@@ -1640,89 +1725,6 @@
1640
1725
  outline:0;
1641
1726
  }
1642
1727
 
1643
- .tds-radio-group{
1644
- --tds-radio-group-font-size:var(--t-font-size-md);
1645
- --tds-radio-group-line-height:1.4;
1646
- --tds-radio-group-gap:var(--t-spacing-1);
1647
-
1648
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1649
- --tds-radio-group-description-line-height:1.35;
1650
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1651
- --tds-radio-group-description-invalid-icon-display:none;
1652
- display:flex;
1653
- flex-direction:column;
1654
- gap:0;
1655
- padding:0;
1656
- margin:0;
1657
-
1658
- font-size:var(--tds-radio-group-font-size);
1659
- line-height:var(--tds-radio-group-line-height);
1660
- border:0;
1661
- }
1662
-
1663
- .tds-radio-group legend{
1664
- float:left;
1665
- padding:0;
1666
- margin:0;
1667
- }
1668
-
1669
- .tds-radio-group[aria-invalid="true"]{
1670
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1671
- --tds-radio-group-description-invalid-icon-display:inline-block;
1672
- }
1673
-
1674
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1675
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1676
- }
1677
-
1678
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1679
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1680
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1681
- }
1682
-
1683
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1684
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1685
- }
1686
-
1687
- .tds-radio-group:has(input:required) legend::after{
1688
- margin-left:.25ch;
1689
- color:var(--t-text-color-status-error);
1690
- content:"*";
1691
- }
1692
-
1693
- .tds-radio-group-fields{
1694
- display:flex;
1695
- flex-direction:column;
1696
- gap:var(--tds-radio-group-gap);
1697
- align-items:flex-start;
1698
- margin-top:var(--t-spacing-1);
1699
- }
1700
-
1701
- .tds-radio-group-description{
1702
- display:flex;
1703
- gap:var(--t-spacing-half);
1704
- align-items:flex-start;
1705
- margin:var(--t-spacing-fourth) 0 0;
1706
- font-size:var(--tds-radio-group-description-font-size);
1707
- line-height:var(--tds-radio-group-description-line-height);
1708
- color:var(--tds-radio-group-description-color);
1709
- cursor:text;
1710
- }
1711
-
1712
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1713
- display:var(--tds-radio-group-description-invalid-icon-display);
1714
- flex-shrink:0;
1715
- margin-top:calc(.5lh - .5em);
1716
- line-height:var(--tds-radio-group-description-line-height);
1717
- }
1718
-
1719
- .tds-radio-group--sm{
1720
- --tds-radio-group-line-height:1.35;
1721
- --tds-radio-group-font-size:var(--t-font-size-sm);
1722
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1723
- --tds-radio-group-description-line-height:1.3;
1724
- }
1725
-
1726
1728
  .tds-radio{
1727
1729
  --tds-radio-font-size:var(--t-font-size-md);
1728
1730
  --tds-radio-cursor:pointer;
@@ -1856,39 +1858,122 @@
1856
1858
  --tds-radio-description-line-height:1.3;
1857
1859
  }
1858
1860
 
1859
- .tds-toggle-switch{
1860
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1861
- --tds-toggle-switch-cursor:pointer;
1862
- --tds-toggle-switch-display:inline-grid;
1863
- --tds-toggle-switch-line-height:1.4;
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);
1864
1865
 
1865
- --tds-toggle-switch-label-color:var(--t-form-color);
1866
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1867
+ --tds-radio-group-description-line-height:1.35;
1868
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1869
+ --tds-radio-group-description-invalid-icon-display:none;
1870
+ display:flex;
1871
+ flex-direction:column;
1872
+ gap:0;
1873
+ padding:0;
1874
+ margin:0;
1866
1875
 
1867
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1868
- --tds-toggle-switch-track-outline:none;
1869
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1870
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1871
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1876
+ font-size:var(--tds-radio-group-font-size);
1877
+ line-height:var(--tds-radio-group-line-height);
1878
+ border:0;
1879
+ }
1872
1880
 
1873
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1874
- --tds-toggle-switch-thumb-transform:translateX(0);
1875
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1881
+ .tds-radio-group legend{
1882
+ float:left;
1883
+ padding:0;
1884
+ margin:0;
1885
+ }
1876
1886
 
1877
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1878
- --tds-toggle-switch-description-line-height:1.35;
1879
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1880
- position:relative;
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;
1890
+ }
1881
1891
 
1882
- display:var(--tds-toggle-switch-display);
1883
- grid-template-columns:auto;
1884
- grid-auto-columns:1fr;
1885
- gap:var(--t-spacing-fourth) 0;
1886
- -webkit-user-select:none;
1887
- -moz-user-select:none;
1888
- user-select:none;
1889
- }
1892
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1893
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1894
+ }
1890
1895
 
1891
- .tds-toggle-switch input[type="checkbox"]{
1896
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1897
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1898
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1899
+ }
1900
+
1901
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1902
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1903
+ }
1904
+
1905
+ .tds-radio-group:has(input:required) legend::after{
1906
+ margin-left:.25ch;
1907
+ color:var(--t-text-color-status-error);
1908
+ content:"*";
1909
+ }
1910
+
1911
+ .tds-radio-group-fields{
1912
+ display:flex;
1913
+ flex-direction:column;
1914
+ gap:var(--tds-radio-group-gap);
1915
+ align-items:flex-start;
1916
+ margin-top:var(--t-spacing-1);
1917
+ }
1918
+
1919
+ .tds-radio-group-description{
1920
+ display:flex;
1921
+ gap:var(--t-spacing-half);
1922
+ align-items:flex-start;
1923
+ margin:var(--t-spacing-fourth) 0 0;
1924
+ font-size:var(--tds-radio-group-description-font-size);
1925
+ line-height:var(--tds-radio-group-description-line-height);
1926
+ color:var(--tds-radio-group-description-color);
1927
+ cursor:text;
1928
+ }
1929
+
1930
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1931
+ display:var(--tds-radio-group-description-invalid-icon-display);
1932
+ flex-shrink:0;
1933
+ margin-top:calc(.5lh - .5em);
1934
+ line-height:var(--tds-radio-group-description-line-height);
1935
+ }
1936
+
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;
1942
+ }
1943
+
1944
+ .tds-toggle-switch{
1945
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1946
+ --tds-toggle-switch-cursor:pointer;
1947
+ --tds-toggle-switch-display:inline-grid;
1948
+ --tds-toggle-switch-line-height:1.4;
1949
+
1950
+ --tds-toggle-switch-label-color:var(--t-form-color);
1951
+
1952
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1953
+ --tds-toggle-switch-track-outline:none;
1954
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1955
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1956
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1957
+
1958
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1959
+ --tds-toggle-switch-thumb-transform:translateX(0);
1960
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1961
+
1962
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1963
+ --tds-toggle-switch-description-line-height:1.35;
1964
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1965
+ position:relative;
1966
+
1967
+ display:var(--tds-toggle-switch-display);
1968
+ grid-template-columns:auto;
1969
+ grid-auto-columns:1fr;
1970
+ gap:var(--t-spacing-fourth) 0;
1971
+ -webkit-user-select:none;
1972
+ -moz-user-select:none;
1973
+ user-select:none;
1974
+ }
1975
+
1976
+ .tds-toggle-switch input[type="checkbox"]{
1892
1977
  position:absolute;
1893
1978
  width:var(--tds-toggle-switch-track-width);
1894
1979
  height:var(--tds-toggle-switch-track-height);
@@ -2101,368 +2186,283 @@
2101
2186
  }
2102
2187
  }
2103
2188
 
2104
-
2105
- @media (prefers-reduced-motion: no-preference){
2106
-
2107
- :root{
2108
- interpolate-size:allow-keywords;
2109
- }
2189
+ @layer t-critical{
2190
+ tds-page-header:not(.hydrated){
2191
+ display:none;
2110
2192
  }
2193
+ }
2111
2194
 
2112
- @layer tds-component{
2113
- tds-sidenav,
2114
- .tds-sidenav{
2115
- --tds-sidenav-indent:12px;
2116
- --tds-sidenav-item-depth:0;
2117
-
2118
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2119
-
2120
- --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;
2121
- --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;
2122
- --tds-sidenav-collapse-closed-opacity:0;
2123
- --tds-sidenav-collapse-open-opacity:1;
2124
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2125
- --tds-sidenav-collapse-open-transform:translateY(0);
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;
2126
2213
 
2127
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2128
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2129
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2130
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
2131
2216
 
2132
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2133
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2134
- --tds-sidenav-item-nested-background-selected:transparent;
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);
2135
2220
 
2136
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2137
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2138
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
2139
2223
 
2140
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2141
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2142
- }
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);
2143
2227
 
2144
- @media (prefers-reduced-motion: reduce){
2145
- tds-sidenav,
2146
- .tds-sidenav{
2147
- --tds-sidenav-collapse-transition-enter:none;
2148
- --tds-sidenav-collapse-transition-exit:none;
2149
- --tds-sidenav-collapse-closed-transform:none;
2150
- --tds-sidenav-collapse-open-transform:none;
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);
2151
2233
  }
2152
- }
2153
2234
 
2154
- .tds-sidenav--theme-gray{
2155
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2156
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2157
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2158
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2159
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2235
+ .tds-page-header--profile{
2236
+ --tds-page-header-padding-y:20px;
2160
2237
  }
2161
- }
2162
2238
 
2163
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2164
- display:flex;
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));
2243
+ }
2165
2244
  }
2166
2245
 
2167
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2168
- flex-direction:column;
2169
- gap:var(--t-spacing-half);
2170
- width:100%;
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);
2264
+ }
2171
2265
  }
2172
-
2173
- .tds-sidenav-section-list{
2174
- width:100%;
2175
- padding:0;
2176
- margin:0;
2177
- list-style:none;
2178
2266
  }
2179
2267
 
2180
- .tds-sidenav-section-header{
2268
+ .tds-page-header{
2181
2269
  display:flex;
2182
- align-items:baseline;
2183
- justify-content:space-between;
2184
- padding-top:var(--t-spacing-2);
2270
+ flex-direction:column;
2271
+ padding-top:var(--tds-page-header-padding-y);
2272
+ color:var(--tds-page-header-color);
2273
+ background:var(--tds-page-header-background-color);
2274
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2185
2275
  }
2186
2276
 
2187
- .tds-sidenav-section-header h2{
2188
- margin:0;
2189
- font-size:var(--t-font-size-sm);
2190
- font-weight:var(--t-font-weight-semibold);
2191
- line-height:1.35;
2192
- color:var(--t-text-color-secondary);
2193
- text-transform:uppercase;
2277
+ .tds-page-header:not(.has-nav){
2278
+ padding-bottom:var(--tds-page-header-padding-y);
2194
2279
  }
2195
2280
 
2196
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2197
- padding-top:0;
2281
+ .tds-page-header.inactive{
2282
+ background:var(--tds-page-header-background-color-inactive);
2198
2283
  }
2199
2284
 
2200
- .tds-sidenav-section-header [slot="label-actions"]{
2285
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2286
+ width:100%;
2287
+ }
2288
+
2289
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2201
2290
  display:flex;
2202
- gap:var(--t-spacing-half);
2203
- align-items:center;
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;
2204
2296
  }
2205
2297
 
2206
- .tds-sidenav-section [slot="section-actions"]{
2207
- display:flex;
2208
- gap:12px;
2209
- align-items:center;
2210
- min-height:42px;
2211
- padding:var(--t-spacing-1) 0;
2212
- }
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);
2306
+ }
2213
2307
 
2214
- .tds-sidenav-section-list,
2215
- .tds-sidenav-item{
2216
- width:100%;
2217
- padding:0;
2218
- margin:0;
2219
- }
2220
-
2221
- .tds-sidenav-item :is(a,button){
2222
- position:relative;
2223
- display:flex;
2224
- gap:12px;
2225
- align-items:center;
2226
- width:100%;
2227
- padding:12px;
2228
- overflow:hidden;
2229
- font-size:var(--t-font-size-sm);
2230
- line-height:18px;
2231
- color:var(--t-text-color-headline);
2232
- white-space:nowrap;
2233
- text-decoration:none;
2234
- -webkit-appearance:none;
2235
- -moz-appearance:none;
2236
- appearance:none;
2237
- cursor:pointer;
2238
- background-color:var(--tds-sidenav-item-background, transparent);
2239
- border:0;
2240
- border-radius:var(--t-border-radius);
2241
- transition:var(--tds-sidenav-item-transition);
2242
- }
2243
-
2244
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2245
- display:block;
2246
- flex:1;
2247
- overflow:hidden;
2248
- text-overflow:ellipsis;
2249
- text-align:left;
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);
2250
2315
  white-space:nowrap;
2251
- }
2252
-
2253
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2254
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2255
- color:var(--t-text-color-headline);
2256
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;
2257
2327
  }
2258
2328
 
2259
- :is(.tds-sidenav-item :is(a,button)):active{
2260
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2261
- }
2262
-
2263
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2264
- overflow:hidden;
2265
- color:var(--tds-sidenav-item-icon-color);
2266
- }
2267
-
2268
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2269
- display:block;
2270
- width:var(--tds-sidenav-item-icon-size);
2271
- height:var(--tds-sidenav-item-icon-size);
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);
2272
2334
  }
2273
2335
 
2274
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2275
- --tds-sidenav-indent:19px;
2276
- }
2277
-
2278
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2279
- visibility:visible;
2280
- block-size:auto;
2281
- opacity:1;
2282
- }
2283
-
2284
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2285
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2286
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2287
-
2288
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2289
- font-weight:var(--t-font-weight-semibold);
2290
- }
2291
-
2292
- .tds-sidenav-item:has(.tds-sidenav-section){
2293
- display:flex;
2294
- flex-direction:column;
2295
- gap:var(--t-spacing-half);
2296
- }
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
+ }
2297
2342
 
2298
- .tds-sidenav-item .tds-sidenav-section-list{
2299
- --tds-sidenav-item-depth:1;
2300
- gap:0;
2301
- }
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
+ }
2302
2348
 
2303
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2304
- visibility:hidden;
2305
- block-size:0;
2306
- overflow-y:clip;
2307
- opacity:0;
2308
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2309
- }
2349
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2350
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2351
+ color:var(--tds-page-header-nav-item-color-disabled);
2352
+ cursor:not-allowed;
2353
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2354
+ opacity:1;
2355
+ }
2310
2356
 
2311
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2312
- --tds-sidenav-item-depth:2;
2313
- }
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
+ }
2314
2367
 
2315
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2316
- min-height:var(--t-element-size-2xl);
2317
- padding-block:9px;
2318
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2319
- line-height:1;
2320
- background-color:transparent;
2368
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2369
+ position:relative;
2321
2370
  }
2322
2371
 
2323
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2324
- position:absolute;
2325
- top:0;
2326
- bottom:0;
2327
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2328
- width:2px;
2329
- content:"";
2330
- background-color:var(--tds-sidenav-item-nested-border-color);
2331
- transition:var(--tds-sidenav-item-transition);
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);
2332
2375
  }
2333
2376
 
2334
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
2335
2378
  position:absolute;
2336
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2337
- z-index:-1;
2338
- height:100%;
2379
+ top:-5px;
2380
+ right:-2px;
2381
+ width:10px;
2382
+ height:10px;
2339
2383
  content:"";
2340
- background-color:var(--tds-sidenav-item-nested-background);
2341
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2342
- transition:var(--tds-sidenav-item-transition);
2343
- }
2344
-
2345
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2346
- display:block;
2347
- text-align:left;
2348
- white-space:normal;
2349
- }
2350
-
2351
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2352
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2353
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2384
+ background:var(--tds-page-header-nav-item-indicator-color);
2385
+ border-radius:50%;
2354
2386
  }
2355
2387
 
2356
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2357
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
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
+ }
2358
2392
  }
2359
2393
 
2360
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2361
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2362
- font-weight:var(--t-font-weight-medium);
2363
- }
2364
-
2365
- .tds-sidenav-responsive-header{
2394
+ .tds-page-header__title-bar{
2366
2395
  display:flex;
2367
- gap:var(--t-spacing-2);
2368
- align-items:center;
2369
- width:100%;
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);
2370
2401
  }
2371
2402
 
2372
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2373
- order:0;
2403
+ .tds-page-header--profile > .tds-page-header__title-bar{
2404
+ align-items:center;
2374
2405
  }
2375
2406
 
2376
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2377
- flex:1;
2378
- order:1;
2407
+ .tds-page-header__primary{
2408
+ width:100%;
2409
+ }
2410
+
2411
+ .tds-page-header__primary h1{
2379
2412
  margin:0;
2380
- font-size:var(--t-font-size-lg);
2381
- font-weight:var(--t-font-weight-medium);
2382
- color:var(--t-text-color-headline);
2413
+ font-size:var(--tds-page-header-headline-font-size);
2414
+ font-weight:var(--t-font-weight-normal);
2415
+ line-height:32px;
2416
+ color:var(--tds-page-header-headline-color);
2417
+ overflow-wrap:break-word;
2383
2418
  }
2384
2419
 
2385
- @media (max-width: 719px){
2386
- .tds-sidenav-collapse{
2387
- z-index:10001;
2388
- display:none;
2389
- max-width:min(448px, calc(100vw - 48px));
2390
- padding:0;
2391
- margin:12px 0;
2392
- position-area:bottom span-right;
2393
- overflow:hidden;
2394
- outline:0;
2395
- background:var(--t-surface-color-card);
2396
- border:0;
2397
- border-radius:6px;
2398
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2399
- opacity:var(--tds-sidenav-collapse-open-opacity);
2400
- transform:var(--tds-sidenav-collapse-open-transform);
2401
- transition:var(--tds-sidenav-collapse-transition-enter);
2402
- will-change:transform;
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%;
2403
2426
  }
2404
2427
 
2405
- .tds-sidenav-scroll-container{
2406
- --webkit-overflow-scrolling:touch;
2407
- display:block;
2408
- width:100%;
2409
- height:-moz-fit-content;
2410
- height:fit-content;
2411
- padding:var(--t-spacing-2);
2412
- overflow-y:auto;
2413
- }
2414
-
2415
- .tds-sidenav-item :is(a, button) :is(.prefix){
2416
- display:none;
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;
2417
2433
  }
2418
- @supports selector(:popover-open){
2419
- .tds-sidenav-collapse:popover-open{
2420
- display:flex;
2434
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2435
+ width:auto;
2421
2436
  }
2422
2437
 
2423
- .tds-sidenav-collapse:not(:popover-open){
2424
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2425
- transition:var(--tds-sidenav-collapse-transition-exit);
2438
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2439
+ justify-content:flex-end;
2426
2440
  }
2441
+ }
2427
2442
 
2428
- @starting-style{
2429
- .tds-sidenav-collapse:popover-open{
2430
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2431
- transform:var(--tds-sidenav-collapse-closed-transform);
2432
- }
2433
- }
2434
- }
2435
- @supports not selector(:popover-open){
2436
- .tds-sidenav-collapse.\:popover-open{
2437
- display:flex;
2438
- }
2443
+ .tds-page-header-phone,
2444
+ .tds-page-header-email{
2445
+ color:var(--tds-page-header-color);
2446
+ white-space:nowrap;
2447
+ }
2448
+ .tds-page-header-email{
2449
+ max-width:100%;
2450
+ overflow:hidden;
2451
+ text-overflow:ellipsis;
2452
+ }
2439
2453
 
2440
- .tds-sidenav-collapse:not(.\:popover-open){
2441
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2442
- transition:var(--tds-sidenav-collapse-transition-exit);
2443
- }
2454
+ @keyframes indicator-pulse{
2455
+ 0%{
2456
+ opacity:.3;
2457
+ transform:scale(.9);
2444
2458
  }
2445
- }
2446
2459
 
2447
- @media (min-width: 720px){
2448
- .tds-sidenav-responsive-header{
2449
- display:none;
2460
+ 100%{
2461
+ opacity:0;
2462
+ transform:scale(1.75);
2450
2463
  }
2451
2464
  }
2452
2465
 
2453
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2454
- display:none;
2455
- }
2456
-
2457
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2458
- display:block;
2459
- }
2460
-
2461
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2462
- display:flex;
2463
- flex-direction:column;
2464
- }
2465
-
2466
2466
  .tds-input{
2467
2467
  --tds-input-border-color:var(--t-form-border-color);
2468
2468
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -4103,345 +4103,84 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4103
4103
  [data-flex-grow-xl="0"]{ flex-grow:0; }
4104
4104
  [data-flex-grow-xl="1"]{ flex-grow:1; }
4105
4105
 
4106
- [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4107
- [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4108
-
4109
- [data-flex-gap-xl="0"]{ gap:0; }
4110
- [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4111
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4112
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4113
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4114
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4115
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4116
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4117
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4118
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4119
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4120
-
4121
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
4122
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4123
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4124
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4125
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4126
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4127
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4128
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4129
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4130
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4131
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4132
-
4133
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4134
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4135
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4136
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4137
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4138
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4139
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4140
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4141
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4142
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4143
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4144
-
4145
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4146
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4147
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4148
-
4149
- [data-padding-xl="0"]{ padding:0; }
4150
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4151
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4152
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4153
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4154
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4155
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4156
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4160
-
4161
- [data-padding-block-xl="0"]{ padding-block:0; }
4162
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
-
4173
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
- }
4185
-
4186
- .tds-data-table-filters-shelf{
4187
- height:auto;
4188
- overflow:hidden;
4189
- transition:height var(--t-duration-300) var(--t-ease-out);
4190
- }
4191
-
4192
- @media (prefers-reduced-motion: reduce){
4193
-
4194
- .tds-data-table-filters-shelf{
4195
- transition:none;
4196
- }
4197
- }
4198
-
4199
- .tds-data-table-filters-shelf--collapsed{
4200
- height:0;
4201
- transition-timing-function:var(--t-ease-in);
4202
- }
4203
-
4204
- @supports (interpolate-size: allow-keywords){
4205
- .tds-data-table-filters-shelf{
4206
- interpolate-size:allow-keywords;
4207
- }
4208
- }
4209
-
4210
- .tds-data-table-filters{
4211
- padding-block:var(--tds-data-table-cell-padding-block);
4212
- padding-inline:var(--tds-data-table-cell-padding-inline);
4213
- border-top:1px solid var(--tds-data-table-border-color);
4214
- }
4215
-
4216
- .tds-data-table-filters-active{
4217
- display:flex;
4218
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4219
- column-gap:var(--tds-data-table-cell-padding-inline);
4220
- justify-content:space-between;
4221
- }
4222
-
4223
- .tds-data-table-filters-active-list{
4224
- display:flex;
4225
- flex-wrap:wrap;
4226
- gap:var(--t-spacing-half);
4227
- }
4228
-
4229
- .tds-data-table-filters-active-actions{
4230
- flex-shrink:0;
4231
- }
4232
-
4233
- :root{
4234
-
4235
- --_data-table-filter-border-info:hsl(204 96% 89%);
4236
- --_data-table-filter-border-error:hsl(8 60% 85%);
4237
- }
4238
-
4239
- :root[data-color-mode="dark"]{
4240
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4241
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4242
- }
4243
-
4244
- @media (prefers-color-scheme: dark){
4245
- :root[data-color-mode="system"]{
4246
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4247
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4248
- }
4249
- }
4250
-
4251
- .tds-btn-group--data-table-filters-chip .tds-btn{
4252
- --_chip-border-color:var(--_data-table-filter-border-info);
4253
- --_chip-icon-color:var(--t-icon-color-status-info);
4254
-
4255
- gap:0;
4256
- color:var(--t-text-color-status-info);
4257
- background-color:var(--t-fill-color-status-info-dim);
4258
- border-color:var(--_chip-border-color);
4259
- }
4260
-
4261
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4262
- color:var(--_chip-icon-color);
4263
- transform:scale(.75);
4264
- }
4265
-
4266
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4267
- padding-inline:var(--tds-btn-padding-x);
4268
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4269
- transition-timing-function:var(--t-ease-in-out);
4270
- transition-duration:var(--t-duration-200);
4271
- transition-property:border-color;
4272
- }
4273
-
4274
- @media (prefers-reduced-motion: reduce){
4275
-
4276
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4277
- transition:none;
4278
- }
4279
- }
4280
-
4281
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4282
- padding-inline-start:0;
4283
- }
4284
-
4285
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4286
- padding-inline-end:0;
4287
- border-inline-end-color:transparent;
4288
- }
4289
-
4290
- :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4291
- color:var(--t-text-color-interaction);
4292
- background-color:var(--t-fill-color-status-info-ghost);
4293
- border-color:var(--_chip-border-color);
4294
- }
4295
-
4296
- .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4297
- --_chip-border-color:var(--t-border-color-button-neutral);
4298
- --_chip-icon-color:var(--t-icon-color-status-neutral);
4299
-
4300
- color:var(--t-text-color);
4301
- background-color:var(--t-fill-color-status-neutral-dim);
4302
- }
4303
-
4304
- :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4305
- color:var(--t-text-color);
4306
- background-color:var(--t-fill-color-status-neutral-ghost);
4307
- }
4308
-
4309
- .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4310
- --_chip-border-color:var(--_data-table-filter-border-error);
4311
- --_chip-icon-color:var(--t-icon-color-status-error);
4312
-
4313
- color:var(--t-text-color-status-error);
4314
- background-color:var(--t-fill-color-status-error-dim);
4315
- }
4316
-
4317
- :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4318
- color:var(--t-text-color-status-error);
4319
- background-color:var(--t-fill-color-status-error-ghost);
4320
- }
4321
-
4322
- .tds-data-table-filters-chip-static{
4323
- cursor:default;
4324
- }
4325
- .tds-popover--data-table-filters-popover .tds-popover-content{
4326
- gap:var(--t-spacing-1);
4327
- align-items:start;
4328
- padding:var(--t-spacing-2);
4329
- }
4330
-
4331
- @media (prefers-reduced-motion: no-preference){
4332
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4333
- animation-name:tds-data-table-filters-popover;
4334
- }
4335
-
4336
- @keyframes tds-data-table-filters-popover{
4337
- from{
4338
- opacity:0;
4339
- }
4340
- }
4341
- }
4342
-
4343
- .tds-data-table-filters-popover-label{
4344
- margin-block:0;
4345
- font-size:var(--t-font-size-md);
4346
- font-weight:var(--t-font-weight-medium);
4347
- }
4348
-
4349
- .tds-data-table-filters-popover-label-operator{
4350
- font-weight:var(--t-font-weight-normal);
4351
- }
4352
-
4353
- .tds-data-table-filters-popover-description{
4354
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
4355
- margin-block-end:0;
4356
- font-size:var(--t-font-size-sm);
4357
- color:var(--t-text-color-secondary);
4358
- }
4359
-
4360
- .tds-data-table-filter-controls-badge{
4361
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4362
- padding-inline:var(--t-spacing-half);
4363
- font-size:var(--t-font-size-sm);
4364
- color:var(--t-text-color-status-info);
4365
- background-color:var(--t-fill-color-status-info-dim);
4366
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4367
- border-radius:var(--t-border-radius-round);
4368
- }
4369
-
4370
- .tds-pane{
4371
- --tds-pane-background-color:var(--t-surface-color-card);
4372
- --tds-pane-border-radius:var(--t-border-radius-lg);
4373
- --tds-pane-border-color:var(--t-border-color);
4374
-
4375
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4376
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4377
-
4378
- --tds-pane-title-color:var(--t-text-color-headline);
4379
- --tds-pane-title-font-size:var(--t-font-size-lg);
4380
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4381
- --tds-pane-title-line-height:1.4;
4382
-
4383
- --tds-pane-body-padding:var(--t-spacing-3);
4384
-
4385
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4386
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4387
-
4388
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4389
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4390
-
4391
- background:var(--tds-pane-background-color);
4392
- border-radius:var(--tds-pane-border-radius);
4393
- border:var(--t-border-width) solid var(--tds-pane-border-color);
4394
- display:flex;
4395
- flex-direction:column;
4396
- }
4397
-
4398
- .tds-pane-header{
4399
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4400
- padding-block:var(--tds-pane-header-padding-block);
4401
- padding-inline:var(--tds-pane-header-padding-inline);
4402
- }
4403
-
4404
- .tds-pane-header > .tds-helper-shelf-trigger{
4405
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4406
- }
4407
-
4408
- .tds-pane-header > .tds-helper-shelf{
4409
- flex-basis:100%;
4410
- order:1;
4411
- }
4106
+ [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4107
+ [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4412
4108
 
4413
- .tds-pane-header:has( > .tds-helper-shelf){
4414
- row-gap:var(--tds-pane-header-padding-block);
4415
- padding-block-end:0;
4416
- }
4109
+ [data-flex-gap-xl="0"]{ gap:0; }
4110
+ [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4111
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4112
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4113
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4114
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4115
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4116
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4117
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4118
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4119
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4417
4120
 
4418
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4419
- font-size:var(--t-font-size-md);
4420
- margin-block-end:var(--tds-pane-header-padding-block);
4421
- }
4121
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
4122
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4123
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4124
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4125
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4126
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4127
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4128
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4129
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4130
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4131
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4422
4132
 
4423
- .tds-pane-title{
4424
- color:var(--tds-pane-title-color);
4425
- font-size:var(--tds-pane-title-font-size);
4426
- font-weight:var(--tds-pane-title-font-weight);
4427
- line-height:var(--tds-pane-title-line-height);
4428
- margin:0;
4429
- }
4133
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4134
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4135
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4136
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4137
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4138
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4139
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4140
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4141
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4142
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4143
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4430
4144
 
4431
- .tds-pane-body{
4432
- padding:var(--tds-pane-body-padding);
4433
- }
4145
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4146
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4147
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4434
4148
 
4435
- .tds-pane-footer{
4436
- padding-block-end:var(--tds-pane-footer-padding-block);
4437
- padding-inline:var(--tds-pane-footer-padding-inline);
4438
- }
4149
+ [data-padding-xl="0"]{ padding:0; }
4150
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4151
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4152
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4153
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4154
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4155
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4156
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4439
4160
 
4440
- .tds-pane-divider{
4441
- border:0;
4442
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4443
- margin-block:var(--tds-pane-divider-margin-block);
4444
- margin-inline:var(--tds-pane-divider-margin-inline);
4161
+ [data-padding-block-xl="0"]{ padding-block:0; }
4162
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
+
4173
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4445
4184
  }
4446
4185
 
4447
4186
  .tds-data-table{
@@ -4935,117 +4674,301 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4935
4674
  border:0;
4936
4675
  }
4937
4676
 
4938
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4939
- color:var(--t-form-placeholder-color);
4940
- }
4677
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4678
+ color:var(--t-form-placeholder-color);
4679
+ }
4680
+
4681
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4682
+ color:var(--t-form-placeholder-color);
4683
+ }
4684
+
4685
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4686
+ -webkit-appearance:none;
4687
+ appearance:none;
4688
+ }
4689
+
4690
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4691
+ inline-size:calc(var(--t-font-size-md) * .8);
4692
+ block-size:calc(var(--t-font-size-md) * .8);
4693
+ }
4694
+
4695
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4696
+ --tds-btn-color:var(--t-icon-color-dim);
4697
+ --tds-btn-padding-truncated-x:0;
4698
+ --_search-input-clear-button-visibility:hidden;
4699
+
4700
+ visibility:var(--_search-input-clear-button-visibility);
4701
+ flex-shrink:0;
4702
+ }
4703
+
4704
+ @media (prefers-reduced-motion: reduce){
4705
+
4706
+ .tds-data-table-filter-controls-search-input-control{
4707
+ transition-property:none;
4708
+ }
4709
+ }
4710
+
4711
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4712
+ --_search-input-clear-button-visibility:visible;
4713
+ }
4714
+
4715
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4716
+ position:sticky;
4717
+ inset-block-start:var(--_label-sticky-block-start);
4718
+ background-color:var(--t-surface-color-card);
4719
+ }
4720
+
4721
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4722
+ scroll-margin-block-start:var(--t-spacing-4);
4723
+ }
4724
+
4725
+ .tds-data-table-filter-controls-list{
4726
+ --_label-sticky-block-start:var(--t-spacing-6);
4727
+
4728
+ margin-block-start:var(--t-spacing-1);
4729
+ }
4730
+
4731
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4732
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4733
+ }
4734
+
4735
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4736
+ scroll-margin-block-start:var(--t-spacing-6);
4737
+ }
4738
+
4739
+ .tds-data-table-filter-controls-submenu-list{
4740
+ --_label-sticky-block-start:0;
4741
+ }
4742
+
4743
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4744
+ position:absolute;
4745
+ inset-block-start:calc(-1 * var(--t-spacing-1));
4746
+ inset-inline-start:0;
4747
+ inline-size:100%;
4748
+ block-size:var(--t-spacing-1);
4749
+ content:"";
4750
+ background-color:var(--t-surface-color-card);
4751
+ }
4752
+
4753
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4754
+ background:var(--t-fill-color-neutral-070);
4755
+ }
4756
+
4757
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4758
+ inline-size:16rem;
4759
+ }
4760
+
4761
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4762
+ max-block-size:20rem;
4763
+ }
4764
+
4765
+ .tds-data-table-filter-controls-submenu-chevron{
4766
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4767
+
4768
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4769
+ transform:scale(.8);
4770
+ }
4771
+
4772
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
4773
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4774
+ }
4775
+
4776
+ @media (prefers-reduced-motion: no-preference){
4777
+
4778
+ .tds-data-table-filter-controls-submenu-chevron{
4779
+ transition-timing-function:var(--t-ease-in-out);
4780
+ transition-duration:var(--t-duration-200);
4781
+ transition-property:color;
4782
+ }
4783
+ }
4784
+ .tds-data-table-filter-controls-drill-back{
4785
+ --tds-dropdown-item-column-gap:var(--t-spacing-half);
4786
+
4787
+ padding-inline-start:var(--t-spacing-half);
4788
+ }
4789
+
4790
+ .tds-data-table-filters-shelf{
4791
+ height:auto;
4792
+ overflow:hidden;
4793
+ transition:height var(--t-duration-300) var(--t-ease-out);
4794
+ }
4795
+
4796
+ @media (prefers-reduced-motion: reduce){
4797
+
4798
+ .tds-data-table-filters-shelf{
4799
+ transition:none;
4800
+ }
4801
+ }
4802
+
4803
+ .tds-data-table-filters-shelf--collapsed{
4804
+ height:0;
4805
+ transition-timing-function:var(--t-ease-in);
4806
+ }
4807
+
4808
+ @supports (interpolate-size: allow-keywords){
4809
+ .tds-data-table-filters-shelf{
4810
+ interpolate-size:allow-keywords;
4811
+ }
4812
+ }
4813
+
4814
+ .tds-data-table-filters{
4815
+ padding-block:var(--tds-data-table-cell-padding-block);
4816
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4817
+ border-top:1px solid var(--tds-data-table-border-color);
4818
+ }
4819
+
4820
+ .tds-data-table-filters-active{
4821
+ display:flex;
4822
+ -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4823
+ column-gap:var(--tds-data-table-cell-padding-inline);
4824
+ justify-content:space-between;
4825
+ }
4826
+
4827
+ .tds-data-table-filters-active-list{
4828
+ display:flex;
4829
+ flex-wrap:wrap;
4830
+ gap:var(--t-spacing-half);
4831
+ }
4832
+
4833
+ .tds-data-table-filters-active-actions{
4834
+ flex-shrink:0;
4835
+ }
4941
4836
 
4942
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4943
- color:var(--t-form-placeholder-color);
4944
- }
4837
+ :root{
4945
4838
 
4946
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4947
- -webkit-appearance:none;
4948
- appearance:none;
4949
- }
4839
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4840
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4841
+ }
4950
4842
 
4951
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4952
- inline-size:calc(var(--t-font-size-md) * .8);
4953
- block-size:calc(var(--t-font-size-md) * .8);
4843
+ :root[data-color-mode="dark"]{
4844
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4845
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4846
+ }
4847
+
4848
+ @media (prefers-color-scheme: dark){
4849
+ :root[data-color-mode="system"]{
4850
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4851
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4954
4852
  }
4853
+ }
4955
4854
 
4956
- .tds-data-table-filter-controls-search-input-control .tds-btn{
4957
- --tds-btn-color:var(--t-icon-color-dim);
4958
- --tds-btn-padding-truncated-x:0;
4959
- --_search-input-clear-button-visibility:hidden;
4855
+ .tds-btn-group--data-table-filters-chip .tds-btn{
4856
+ --_chip-border-color:var(--_data-table-filter-border-info);
4857
+ --_chip-icon-color:var(--t-icon-color-status-info);
4960
4858
 
4961
- visibility:var(--_search-input-clear-button-visibility);
4962
- flex-shrink:0;
4859
+ gap:0;
4860
+ color:var(--t-text-color-status-info);
4861
+ background-color:var(--t-fill-color-status-info-dim);
4862
+ border-color:var(--_chip-border-color);
4863
+ }
4864
+
4865
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4866
+ color:var(--_chip-icon-color);
4867
+ transform:scale(.75);
4868
+ }
4869
+
4870
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4871
+ padding-inline:var(--tds-btn-padding-x);
4872
+ border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4873
+ transition-timing-function:var(--t-ease-in-out);
4874
+ transition-duration:var(--t-duration-200);
4875
+ transition-property:border-color;
4963
4876
  }
4964
4877
 
4965
4878
  @media (prefers-reduced-motion: reduce){
4966
4879
 
4967
- .tds-data-table-filter-controls-search-input-control{
4968
- transition-property:none;
4969
- }
4880
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4881
+ transition:none;
4970
4882
  }
4883
+ }
4971
4884
 
4972
- .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4973
- --_search-input-clear-button-visibility:visible;
4974
- }
4885
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4886
+ padding-inline-start:0;
4887
+ }
4975
4888
 
4976
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4977
- position:sticky;
4978
- inset-block-start:var(--_label-sticky-block-start);
4979
- background-color:var(--t-surface-color-card);
4889
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4890
+ padding-inline-end:0;
4891
+ border-inline-end-color:transparent;
4980
4892
  }
4981
4893
 
4982
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4983
- scroll-margin-block-start:var(--t-spacing-4);
4894
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4895
+ color:var(--t-text-color-interaction);
4896
+ background-color:var(--t-fill-color-status-info-ghost);
4897
+ border-color:var(--_chip-border-color);
4984
4898
  }
4985
4899
 
4986
- .tds-data-table-filter-controls-list{
4987
- --_label-sticky-block-start:var(--t-spacing-6);
4900
+ .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4901
+ --_chip-border-color:var(--t-border-color-button-neutral);
4902
+ --_chip-icon-color:var(--t-icon-color-status-neutral);
4988
4903
 
4989
- margin-block-start:var(--t-spacing-1);
4904
+ color:var(--t-text-color);
4905
+ background-color:var(--t-fill-color-status-neutral-dim);
4990
4906
  }
4991
4907
 
4992
- .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4993
- --tds-dropdown-item-color:var(--t-text-color-secondary);
4908
+ :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4909
+ color:var(--t-text-color);
4910
+ background-color:var(--t-fill-color-status-neutral-ghost);
4994
4911
  }
4995
4912
 
4996
- .tds-data-table-filter-controls-list .tds-dropdown-item{
4997
- scroll-margin-block-start:var(--t-spacing-6);
4998
- }
4913
+ .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4914
+ --_chip-border-color:var(--_data-table-filter-border-error);
4915
+ --_chip-icon-color:var(--t-icon-color-status-error);
4999
4916
 
5000
- .tds-data-table-filter-controls-submenu-list{
5001
- --_label-sticky-block-start:0;
4917
+ color:var(--t-text-color-status-error);
4918
+ background-color:var(--t-fill-color-status-error-dim);
5002
4919
  }
5003
4920
 
5004
- .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
5005
- position:absolute;
5006
- inset-block-start:calc(-1 * var(--t-spacing-1));
5007
- inset-inline-start:0;
5008
- inline-size:100%;
5009
- block-size:var(--t-spacing-1);
5010
- content:"";
5011
- background-color:var(--t-surface-color-card);
4921
+ :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4922
+ color:var(--t-text-color-status-error);
4923
+ background-color:var(--t-fill-color-status-error-ghost);
5012
4924
  }
5013
4925
 
5014
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
5015
- background:var(--t-fill-color-neutral-070);
4926
+ .tds-data-table-filters-chip-static{
4927
+ cursor:default;
5016
4928
  }
4929
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4930
+ gap:var(--t-spacing-1);
4931
+ align-items:start;
4932
+ padding:var(--t-spacing-2);
4933
+ }
5017
4934
 
5018
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
5019
- inline-size:16rem;
5020
- }
4935
+ @media (prefers-reduced-motion: no-preference){
4936
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4937
+ animation-name:tds-data-table-filters-popover;
4938
+ }
5021
4939
 
5022
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
5023
- max-block-size:20rem;
4940
+ @keyframes tds-data-table-filters-popover{
4941
+ from{
4942
+ opacity:0;
4943
+ }
4944
+ }
5024
4945
  }
5025
4946
 
5026
- .tds-data-table-filter-controls-submenu-chevron{
5027
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
5028
-
5029
- color:var(--tds-data-table-filter-controls-submenu-chevron-color);
5030
- transform:scale(.8);
4947
+ .tds-data-table-filters-popover-label{
4948
+ margin-block:0;
4949
+ font-size:var(--t-font-size-md);
4950
+ font-weight:var(--t-font-weight-medium);
5031
4951
  }
5032
4952
 
5033
- [data-open] .tds-data-table-filter-controls-submenu-chevron{
5034
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
5035
- }
5036
-
5037
- @media (prefers-reduced-motion: no-preference){
4953
+ .tds-data-table-filters-popover-label-operator{
4954
+ font-weight:var(--t-font-weight-normal);
4955
+ }
5038
4956
 
5039
- .tds-data-table-filter-controls-submenu-chevron{
5040
- transition-timing-function:var(--t-ease-in-out);
5041
- transition-duration:var(--t-duration-200);
5042
- transition-property:color;
4957
+ .tds-data-table-filters-popover-description{
4958
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4959
+ margin-block-end:0;
4960
+ font-size:var(--t-font-size-sm);
4961
+ color:var(--t-text-color-secondary);
5043
4962
  }
5044
- }
5045
- .tds-data-table-filter-controls-drill-back{
5046
- --tds-dropdown-item-column-gap:var(--t-spacing-half);
5047
4963
 
5048
- padding-inline-start:var(--t-spacing-half);
4964
+ .tds-data-table-filter-controls-badge{
4965
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4966
+ padding-inline:var(--t-spacing-half);
4967
+ font-size:var(--t-font-size-sm);
4968
+ color:var(--t-text-color-status-info);
4969
+ background-color:var(--t-fill-color-status-info-dim);
4970
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4971
+ border-radius:var(--t-border-radius-round);
5049
4972
  }
5050
4973
 
5051
4974
  .tds-segmented-control{
@@ -5172,6 +5095,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5172
5095
  --tds-segmented-control-background-color-disabled:transparent;
5173
5096
  }
5174
5097
 
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;