@planningcenter/tapestry 4.9.0-rc.2 → 4.9.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 (15) hide show
  1. package/dist/components/pane/Pane.d.ts.map +1 -1
  2. package/dist/components/pane/Pane.js +24 -4
  3. package/dist/components/pane/Pane.js.map +1 -1
  4. package/dist/components/pane/PaneContext.d.ts +0 -6
  5. package/dist/components/pane/PaneContext.d.ts.map +1 -1
  6. package/dist/components/pane/PaneContext.js.map +1 -1
  7. package/dist/components/pane/PaneHeader.d.ts +6 -0
  8. package/dist/components/pane/PaneHeader.d.ts.map +1 -1
  9. package/dist/components/pane/PaneHeader.js +15 -13
  10. package/dist/components/pane/PaneHeader.js.map +1 -1
  11. package/dist/reactRender.css +1469 -1469
  12. package/dist/reactRender.css.map +1 -1
  13. package/dist/reactRenderLegacy.css +1469 -1469
  14. package/dist/reactRenderLegacy.css.map +1 -1
  15. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,476 +677,482 @@
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
- }
680
+
681
+ @media (prefers-reduced-motion: no-preference){
682
+
683
+ :root{
684
+ interpolate-size:allow-keywords;
684
685
  }
686
+ }
685
687
 
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;
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
704
693
 
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);
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
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-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;
697
+ --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;
698
+ --tds-sidenav-collapse-closed-opacity:0;
699
+ --tds-sidenav-collapse-open-opacity:1;
700
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
+ --tds-sidenav-collapse-open-transform:translateY(0);
711
702
 
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);
703
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
714
707
 
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);
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
718
711
 
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);
724
- }
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
725
715
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
728
718
  }
729
719
 
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));
720
+ @media (prefers-reduced-motion: reduce){
721
+ tds-sidenav,
722
+ .tds-sidenav{
723
+ --tds-sidenav-collapse-transition-enter:none;
724
+ --tds-sidenav-collapse-transition-exit:none;
725
+ --tds-sidenav-collapse-closed-transform:none;
726
+ --tds-sidenav-collapse-open-transform:none;
727
+ }
734
728
  }
729
+
730
+ .tds-sidenav--theme-gray{
731
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
735
736
  }
737
+ }
736
738
 
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);
755
- }
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
741
+ }
742
+
743
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
+ flex-direction:column;
745
+ gap:var(--t-spacing-half);
746
+ width:100%;
756
747
  }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
757
754
  }
758
755
 
759
- .tds-page-header{
756
+ .tds-sidenav-section-header{
760
757
  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);
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
766
761
  }
767
762
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
763
+ .tds-sidenav-section-header h2{
764
+ margin:0;
765
+ font-size:var(--t-font-size-sm);
766
+ font-weight:var(--t-font-weight-semibold);
767
+ line-height:1.35;
768
+ color:var(--t-text-color-secondary);
769
+ text-transform:uppercase;
770
770
  }
771
771
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
774
  }
775
775
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
776
+ .tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
779
781
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
782
+ .tds-sidenav-section [slot="section-actions"]{
783
+ display:flex;
784
+ gap:12px;
785
+ align-items:center;
786
+ min-height:42px;
787
+ padding:var(--t-spacing-1) 0;
788
+ }
789
+
790
+ .tds-sidenav-section-list,
791
+ .tds-sidenav-item{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ }
796
+
797
+ .tds-sidenav-item :is(a,button){
798
+ position:relative;
781
799
  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;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
810
+ -webkit-appearance:none;
811
+ -moz-appearance:none;
812
+ appearance:none;
813
+ cursor:pointer;
814
+ background-color:var(--tds-sidenav-item-background, transparent);
815
+ border:0;
816
+ border-radius:var(--t-border-radius);
817
+ transition:var(--tds-sidenav-item-transition);
787
818
  }
788
819
 
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);
820
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
+ display:block;
822
+ flex:1;
823
+ overflow:hidden;
824
+ text-overflow:ellipsis;
825
+ text-align:left;
826
+ white-space:nowrap;
797
827
  }
798
828
 
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;
829
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
+ color:var(--t-text-color-headline);
807
832
  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
833
  }
819
834
 
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);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
+ }
838
+
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
842
+ }
843
+
844
+ :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{
845
+ display:block;
846
+ width:var(--tds-sidenav-item-icon-size);
847
+ height:var(--tds-sidenav-item-icon-size);
825
848
  }
826
849
 
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
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
852
+ }
833
853
 
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
- }
854
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
+ visibility:visible;
856
+ block-size:auto;
857
+ opacity:1;
858
+ }
839
859
 
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
- }
860
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
863
 
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
- }
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
866
+ }
858
867
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
872
+ }
873
+
874
+ .tds-sidenav-item .tds-sidenav-section-list{
875
+ --tds-sidenav-item-depth:1;
876
+ gap:0;
877
+ }
878
+
879
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
+ visibility:hidden;
881
+ block-size:0;
882
+ overflow-y:clip;
883
+ opacity:0;
884
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
885
  }
862
886
 
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);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
889
+ }
890
+
891
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
+ min-height:var(--t-element-size-2xl);
893
+ padding-block:9px;
894
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
+ line-height:1;
896
+ background-color:transparent;
897
+ }
898
+
899
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
+ position:absolute;
901
+ top:0;
902
+ bottom:0;
903
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
+ width:2px;
905
+ content:"";
906
+ background-color:var(--tds-sidenav-item-nested-border-color);
907
+ transition:var(--tds-sidenav-item-transition);
866
908
  }
867
909
 
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{
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
911
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
874
915
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
877
919
  }
878
920
 
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
- }
921
+ :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)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
883
925
  }
884
926
 
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
927
+ :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{
928
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
+ }
893
931
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
932
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
+ }
897
935
 
898
- .tds-page-header__primary{
936
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
+ font-weight:var(--t-font-weight-medium);
939
+ }
940
+
941
+ .tds-sidenav-responsive-header{
942
+ display:flex;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
899
945
  width:100%;
900
946
  }
901
947
 
902
- .tds-page-header__primary h1{
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
950
+ }
951
+
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
903
955
  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;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
909
959
  }
910
960
 
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%;
961
+ @media (max-width: 719px){
962
+ .tds-sidenav-collapse{
963
+ z-index:10001;
964
+ display:none;
965
+ max-width:min(448px, calc(100vw - 48px));
966
+ padding:0;
967
+ margin:12px 0;
968
+ position-area:bottom span-right;
969
+ overflow:hidden;
970
+ outline:0;
971
+ background:var(--t-surface-color-card);
972
+ border:0;
973
+ border-radius:6px;
974
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
+ opacity:var(--tds-sidenav-collapse-open-opacity);
976
+ transform:var(--tds-sidenav-collapse-open-transform);
977
+ transition:var(--tds-sidenav-collapse-transition-enter);
978
+ will-change:transform;
917
979
  }
918
980
 
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;
981
+ .tds-sidenav-scroll-container{
982
+ --webkit-overflow-scrolling:touch;
983
+ display:block;
984
+ width:100%;
985
+ height:-moz-fit-content;
986
+ height:fit-content;
987
+ padding:var(--t-spacing-2);
988
+ overflow-y:auto;
924
989
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
990
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
991
+ .tds-sidenav-item :is(a, button) :is(.prefix){
992
+ display:none;
993
+ }
994
+ @supports selector(:popover-open){
995
+ .tds-sidenav-collapse:popover-open{
996
+ display:flex;
931
997
  }
932
- }
933
998
 
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
- }
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
944
1003
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
949
1010
  }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
950
1015
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
954
1020
  }
955
1021
  }
956
1022
 
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;
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
1027
+ }
962
1028
 
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);
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
1031
+ }
967
1032
 
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);
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
1035
+ }
972
1036
 
973
- --tds-checkbox-label-color:var(--t-form-color);
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
1040
+ }
974
1041
 
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;
979
-
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;
1042
+ .tds-button-group{
1043
+ display:inline-flex;
989
1044
  }
1045
+ .tds-button-group > .tds-btn{
1046
+ --tds-button-group-item-z-index:1;
990
1047
 
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);
998
- }
999
-
1000
- .tds-checkbox tds-indeterminate{
1001
- display:flex;
1002
- }
1003
-
1004
- .tds-checkbox input[type="checkbox"]{
1005
1048
  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);
1049
+ z-index:var(--tds-button-group-item-z-index);
1050
+ border-radius:0;
1021
1051
  }
1022
-
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);
1052
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1053
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1046
1054
  }
1047
-
1048
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1049
- outline:var(--t-focus-ring-outline);
1050
- outline-offset:var(--t-focus-ring-offset);
1055
+ :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{
1056
+ position:absolute;
1057
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1058
+ width:var(--tds-btn-border-width);
1059
+ pointer-events:none;
1060
+ content:"";
1061
+ background-color:var(--t-border-color-white);
1062
+ }
1063
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1064
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
+ }
1066
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1067
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
+ }
1069
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1070
+ --tds-button-group-item-z-index:2;
1051
1071
  }
1052
-
1053
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1054
- pointer-events:none;
1072
+ :is(.tds-button-group > .tds-btn):focus-visible{
1073
+ --tds-button-group-item-z-index:5;
1055
1074
  }
1056
-
1057
- @media (prefers-reduced-motion: reduce){
1058
-
1059
- .tds-checkbox input[type="checkbox"]{
1060
- --tds-checkbox-transition-property:none;
1075
+ .tds-button-group > .tds-btn:first-child{
1076
+ border-start-start-radius:var(--tds-btn-border-radius);
1077
+ border-end-start-radius:var(--tds-btn-border-radius);
1061
1078
  }
1062
- }
1063
-
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;
1079
+ .tds-button-group > .tds-btn:last-child{
1080
+ border-start-end-radius:var(--tds-btn-border-radius);
1081
+ border-end-end-radius:var(--tds-btn-border-radius);
1069
1082
  }
1070
1083
 
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
- }
1084
+ .tds-checkbox-group{
1085
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
+ --tds-checkbox-group-line-height:1.4;
1087
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1075
1088
 
1076
- .tds-checkbox:has(input:checked){
1077
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1078
- }
1089
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
+ --tds-checkbox-group-description-line-height:1.35;
1091
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
+ --tds-checkbox-group-description-invalid-icon-display:none;
1093
+ display:flex;
1094
+ flex-direction:column;
1095
+ gap:0;
1096
+ padding:0;
1097
+ margin:0;
1079
1098
 
1080
- .tds-checkbox:has(input:indeterminate){
1081
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1082
- }
1099
+ font-size:var(--tds-checkbox-group-font-size);
1100
+ line-height:var(--tds-checkbox-group-line-height);
1101
+ border:0;
1102
+ }
1083
1103
 
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;
1104
+ .tds-checkbox-group legend{
1105
+ float:left;
1106
+ padding:0;
1107
+ margin:0;
1088
1108
  }
1089
1109
 
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);
1093
- }
1094
-
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);
1098
- }
1099
-
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
- }
1110
+ .tds-checkbox-group[aria-invalid="true"]{
1111
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1113
+ }
1104
1114
 
1105
- .tds-checkbox:has(input:required) label::after{
1115
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1106
1116
  margin-left:.25ch;
1107
1117
  color:var(--t-text-color-status-error);
1108
1118
  content:"*";
1109
1119
  }
1110
1120
 
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);
1114
-
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
- }
1119
-
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);
1121
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
+ content:none;
1122
1123
  }
1123
1124
 
1124
- .tds-checkbox-description{
1125
+ .tds-checkbox-group-fields{
1126
+ display:flex;
1127
+ flex-direction:column;
1128
+ gap:var(--tds-checkbox-group-gap);
1129
+ align-items:flex-start;
1130
+ margin-top:var(--t-spacing-1);
1131
+ }
1132
+
1133
+ .tds-checkbox-group-description{
1125
1134
  display:flex;
1126
- grid-area:2 / 2;
1127
1135
  gap:var(--t-spacing-half);
1128
1136
  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);
1137
+ margin:var(--t-spacing-fourth) 0 0;
1138
+ font-size:var(--tds-checkbox-group-description-font-size);
1139
+ line-height:var(--tds-checkbox-group-description-line-height);
1140
+ color:var(--tds-checkbox-group-description-color);
1134
1141
  cursor:text;
1135
1142
  }
1136
1143
 
1137
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1138
- display:var(--tds-checkbox-description-invalid-icon-display);
1144
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1139
1146
  flex-shrink:0;
1140
1147
  margin-top:calc(.5lh - .5em);
1141
- line-height:var(--tds-checkbox-description-line-height);
1148
+ line-height:var(--tds-checkbox-group-description-line-height);
1142
1149
  }
1143
1150
 
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;
1151
+ .tds-checkbox-group--sm{
1152
+ --tds-checkbox-group-line-height:1.35;
1153
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
+ --tds-checkbox-group-description-line-height:1.3;
1150
1156
  }
1151
1157
 
1152
1158
  .tds-currency-input-control{
@@ -1252,186 +1258,280 @@
1252
1258
  clip-path:inset(50%);
1253
1259
  }
1254
1260
 
1255
- .tds-button-group{
1256
- display:inline-flex;
1261
+ @layer t-critical{
1262
+ tds-page-header:not(.hydrated){
1263
+ display:none;
1264
+ }
1257
1265
  }
1258
- .tds-button-group > .tds-btn{
1259
- --tds-button-group-item-z-index:1;
1260
1266
 
1261
- position:relative;
1262
- z-index:var(--tds-button-group-item-z-index);
1263
- border-radius:0;
1264
- }
1265
- :is(.tds-button-group > .tds-btn):not(:first-child){
1266
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1267
- }
1268
- :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{
1269
- position:absolute;
1270
- inset-block:calc(var(--tds-btn-border-width) * -1);
1271
- width:var(--tds-btn-border-width);
1272
- pointer-events:none;
1273
- content:"";
1274
- background-color:var(--t-border-color-white);
1275
- }
1276
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1277
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1278
- }
1279
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1280
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1281
- }
1282
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1283
- --tds-button-group-item-z-index:2;
1284
- }
1285
- :is(.tds-button-group > .tds-btn):focus-visible{
1286
- --tds-button-group-item-z-index:5;
1287
- }
1288
- .tds-button-group > .tds-btn:first-child{
1289
- border-start-start-radius:var(--tds-btn-border-radius);
1290
- border-end-start-radius:var(--tds-btn-border-radius);
1291
- }
1292
- .tds-button-group > .tds-btn:last-child{
1293
- border-start-end-radius:var(--tds-btn-border-radius);
1294
- border-end-end-radius:var(--tds-btn-border-radius);
1295
- }
1267
+ @layer t-component{
1268
+ .tds-page-header{
1269
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1270
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1271
+ --tds-page-header-color:var(--t-text-color);
1272
+ --tds-page-header-bottom-border-color:transparent;
1273
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1274
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1275
+ --tds-page-header-padding-x:var(--t-spacing-2);
1276
+ --tds-page-header-padding-y:var(--t-spacing-2);
1277
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1278
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1279
+ --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%);
1280
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1281
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1282
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1283
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1284
+ --tds-page-header-nav-item-border-width:1px;
1296
1285
 
1297
- .tds-checkbox-group{
1298
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1299
- --tds-checkbox-group-line-height:1.4;
1300
- --tds-checkbox-group-gap:var(--t-spacing-1);
1286
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1287
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1301
1288
 
1302
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1303
- --tds-checkbox-group-description-line-height:1.35;
1304
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1305
- --tds-checkbox-group-description-invalid-icon-display:none;
1306
- display:flex;
1307
- flex-direction:column;
1308
- gap:0;
1309
- padding:0;
1310
- margin:0;
1289
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1290
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1291
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1311
1292
 
1312
- font-size:var(--tds-checkbox-group-font-size);
1313
- line-height:var(--tds-checkbox-group-line-height);
1314
- border:0;
1315
- }
1293
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1294
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1316
1295
 
1317
- .tds-checkbox-group legend{
1318
- float:left;
1319
- padding:0;
1320
- margin:0;
1296
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1297
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1298
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1299
+
1300
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1301
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1302
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1303
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1304
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1321
1305
  }
1322
1306
 
1323
- .tds-checkbox-group[aria-invalid="true"]{
1324
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1325
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1307
+ .tds-page-header--profile{
1308
+ --tds-page-header-padding-y:20px;
1326
1309
  }
1327
1310
 
1328
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1329
- margin-left:.25ch;
1330
- color:var(--t-text-color-status-error);
1331
- content:"*";
1311
+ @supports (color: light-dark(#fff, #000)){
1312
+ .tds-page-header{
1313
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1314
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1332
1315
  }
1316
+ }
1333
1317
 
1334
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1335
- content:none;
1318
+ @media (min-width: 600px){
1319
+ .tds-page-header{
1320
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1321
+ --tds-page-header-color:var(--t-text-color-secondary);
1322
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1323
+ --tds-page-header-padding-x:var(--t-spacing-3);
1324
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1325
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1326
+ --tds-page-header-nav-background:transparent;
1327
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1328
+ --tds-page-header-nav-item-border-width:1px;
1329
+ --tds-page-header-nav-item-color:var(--t-text-color);
1330
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1331
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1332
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1333
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1334
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1335
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1336
1336
  }
1337
+ }
1338
+ }
1337
1339
 
1338
- .tds-checkbox-group-fields{
1340
+ .tds-page-header{
1339
1341
  display:flex;
1340
1342
  flex-direction:column;
1341
- gap:var(--tds-checkbox-group-gap);
1342
- align-items:flex-start;
1343
- margin-top:var(--t-spacing-1);
1343
+ padding-top:var(--tds-page-header-padding-y);
1344
+ color:var(--tds-page-header-color);
1345
+ background:var(--tds-page-header-background-color);
1346
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1344
1347
  }
1345
1348
 
1346
- .tds-checkbox-group-description{
1347
- display:flex;
1348
- gap:var(--t-spacing-half);
1349
- align-items:flex-start;
1350
- margin:var(--t-spacing-fourth) 0 0;
1351
- font-size:var(--tds-checkbox-group-description-font-size);
1352
- line-height:var(--tds-checkbox-group-description-line-height);
1353
- color:var(--tds-checkbox-group-description-color);
1354
- cursor:text;
1355
- }
1349
+ .tds-page-header:not(.has-nav){
1350
+ padding-bottom:var(--tds-page-header-padding-y);
1351
+ }
1356
1352
 
1357
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1358
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1359
- flex-shrink:0;
1360
- margin-top:calc(.5lh - .5em);
1361
- line-height:var(--tds-checkbox-group-description-line-height);
1353
+ .tds-page-header.inactive{
1354
+ background:var(--tds-page-header-background-color-inactive);
1362
1355
  }
1363
1356
 
1364
- .tds-checkbox-group--sm{
1365
- --tds-checkbox-group-line-height:1.35;
1366
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1367
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1368
- --tds-checkbox-group-description-line-height:1.3;
1369
- }
1357
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1358
+ width:100%;
1359
+ }
1360
+
1361
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1362
+ display:flex;
1363
+ flex-flow:row wrap;
1364
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1365
+ align-items:flex-start;
1366
+ justify-content:flex-start;
1367
+ min-width:0;
1368
+ }
1370
1369
 
1370
+ :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{
1371
+ display:flex;
1372
+ gap:var(--tds-page-header-nav-gap);
1373
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1374
+ margin:0 0 -1px;
1375
+ overflow:auto;
1376
+ list-style:none;
1377
+ background:var(--tds-page-header-nav-background);
1378
+ }
1371
1379
 
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{
1380
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1381
+ position:relative;
1382
+ display:inline-flex;
1383
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1384
+ font-size:var(--t-font-size-sm);
1385
+ line-height:22px;
1386
+ color:var(--tds-page-header-nav-item-color);
1387
+ white-space:nowrap;
1388
+ text-decoration:none;
1373
1389
  -webkit-appearance:none;
1390
+ -moz-appearance:none;
1374
1391
  appearance:none;
1392
+ cursor:pointer;
1393
+ outline-offset:-2px;
1394
+ background-color:var(--tds-page-header-nav-item-background-color);
1395
+ background-clip:padding-box;
1396
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1397
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1398
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1375
1399
  }
1376
1400
 
1377
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1378
- inline-size:1em;
1379
- block-size:2em;
1380
- }
1401
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1402
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1403
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1404
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1405
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1406
+ }
1381
1407
 
1382
- [type="file"]:is(.tds-input input){
1383
- padding-block:var(--t-spacing-half);
1384
- padding-inline-start:var(--t-spacing-half);
1385
- }
1408
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1409
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1410
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1411
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1412
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1413
+ }
1386
1414
 
1387
- [type="file"]:is(.tds-input input):not(:disabled){
1388
- color:var(--t-text-color-secondary);
1389
- }
1415
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1416
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1417
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1418
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1419
+ }
1390
1420
 
1391
- [type="file"]:is(.tds-input input)::file-selector-button{
1392
- --_file-btn-padding-block:3px;
1421
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1422
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1423
+ color:var(--tds-page-header-nav-item-color-disabled);
1424
+ cursor:not-allowed;
1425
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1426
+ opacity:1;
1427
+ }
1393
1428
 
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
- }
1429
+ @media (min-width: 600px){
1430
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1431
+ position:absolute;
1432
+ inset:auto -1px -1px;
1433
+ height:1px;
1434
+ pointer-events:none;
1435
+ content:"";
1436
+ background-color:var(--tds-page-header-bottom-border-color);
1437
+ }
1438
+ }
1408
1439
 
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
- }
1440
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1441
+ position:relative;
1442
+ }
1413
1443
 
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);
1444
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1445
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1446
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1417
1447
  }
1418
1448
 
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);
1449
+ :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{
1450
+ position:absolute;
1451
+ top:-5px;
1452
+ right:-2px;
1453
+ width:10px;
1454
+ height:10px;
1455
+ content:"";
1456
+ background:var(--tds-page-header-nav-item-indicator-color);
1457
+ border-radius:50%;
1458
+ }
1459
+
1460
+ @media (prefers-reduced-motion: no-preference){
1461
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1462
+ animation:indicator-pulse 1.25s ease infinite;
1463
+ }
1464
+ }
1465
+
1466
+ .tds-page-header__title-bar{
1467
+ display:flex;
1468
+ flex-direction:column;
1469
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1470
+ align-items:flex-start;
1471
+ justify-content:space-between;
1472
+ padding:0 var(--tds-page-header-padding-x);
1473
+ }
1474
+
1475
+ .tds-page-header--profile > .tds-page-header__title-bar{
1476
+ align-items:center;
1430
1477
  }
1431
1478
 
1432
- .tds-input--auto-width input{
1433
- field-sizing:content;
1434
- inline-size:auto;
1479
+ .tds-page-header__primary{
1480
+ width:100%;
1481
+ }
1482
+
1483
+ .tds-page-header__primary h1{
1484
+ margin:0;
1485
+ font-size:var(--tds-page-header-headline-font-size);
1486
+ font-weight:var(--t-font-weight-normal);
1487
+ line-height:32px;
1488
+ color:var(--tds-page-header-headline-color);
1489
+ overflow-wrap:break-word;
1490
+ }
1491
+
1492
+ @media (min-width: 960px){
1493
+ .tds-page-header__primary{
1494
+ flex:1 1 max-content;
1495
+ width:auto;
1496
+ min-width:0;
1497
+ max-width:100%;
1498
+ }
1499
+
1500
+ .tds-page-header__title-bar,
1501
+ .tds-page-header--profile .tds-page-header__title-bar{
1502
+ flex-flow:row nowrap;
1503
+ row-gap:12px;
1504
+ align-items:flex-start;
1505
+ }
1506
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1507
+ width:auto;
1508
+ }
1509
+
1510
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1511
+ justify-content:flex-end;
1512
+ }
1513
+ }
1514
+
1515
+ .tds-page-header-phone,
1516
+ .tds-page-header-email{
1517
+ color:var(--tds-page-header-color);
1518
+ white-space:nowrap;
1519
+ }
1520
+ .tds-page-header-email{
1521
+ max-width:100%;
1522
+ overflow:hidden;
1523
+ text-overflow:ellipsis;
1524
+ }
1525
+
1526
+ @keyframes indicator-pulse{
1527
+ 0%{
1528
+ opacity:.3;
1529
+ transform:scale(.9);
1530
+ }
1531
+
1532
+ 100%{
1533
+ opacity:0;
1534
+ transform:scale(1.75);
1435
1535
  }
1436
1536
  }
1437
1537
 
@@ -1598,89 +1698,6 @@
1598
1698
  }
1599
1699
  }
1600
1700
 
1601
- .tds-radio-group{
1602
- --tds-radio-group-font-size:var(--t-font-size-md);
1603
- --tds-radio-group-line-height:1.4;
1604
- --tds-radio-group-gap:var(--t-spacing-1);
1605
-
1606
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1607
- --tds-radio-group-description-line-height:1.35;
1608
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1609
- --tds-radio-group-description-invalid-icon-display:none;
1610
- display:flex;
1611
- flex-direction:column;
1612
- gap:0;
1613
- padding:0;
1614
- margin:0;
1615
-
1616
- font-size:var(--tds-radio-group-font-size);
1617
- line-height:var(--tds-radio-group-line-height);
1618
- border:0;
1619
- }
1620
-
1621
- .tds-radio-group legend{
1622
- float:left;
1623
- padding:0;
1624
- margin:0;
1625
- }
1626
-
1627
- .tds-radio-group[aria-invalid="true"]{
1628
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1629
- --tds-radio-group-description-invalid-icon-display:inline-block;
1630
- }
1631
-
1632
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1633
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1634
- }
1635
-
1636
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1637
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1638
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1639
- }
1640
-
1641
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1642
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1643
- }
1644
-
1645
- .tds-radio-group:has(input:required) legend::after{
1646
- margin-left:.25ch;
1647
- color:var(--t-text-color-status-error);
1648
- content:"*";
1649
- }
1650
-
1651
- .tds-radio-group-fields{
1652
- display:flex;
1653
- flex-direction:column;
1654
- gap:var(--tds-radio-group-gap);
1655
- align-items:flex-start;
1656
- margin-top:var(--t-spacing-1);
1657
- }
1658
-
1659
- .tds-radio-group-description{
1660
- display:flex;
1661
- gap:var(--t-spacing-half);
1662
- align-items:flex-start;
1663
- margin:var(--t-spacing-fourth) 0 0;
1664
- font-size:var(--tds-radio-group-description-font-size);
1665
- line-height:var(--tds-radio-group-description-line-height);
1666
- color:var(--tds-radio-group-description-color);
1667
- cursor:text;
1668
- }
1669
-
1670
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1671
- display:var(--tds-radio-group-description-invalid-icon-display);
1672
- flex-shrink:0;
1673
- margin-top:calc(.5lh - .5em);
1674
- line-height:var(--tds-radio-group-description-line-height);
1675
- }
1676
-
1677
- .tds-radio-group--sm{
1678
- --tds-radio-group-line-height:1.35;
1679
- --tds-radio-group-font-size:var(--t-font-size-sm);
1680
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1681
- --tds-radio-group-description-line-height:1.3;
1682
- }
1683
-
1684
1701
  .tds-popover{
1685
1702
  max-inline-size:24rem;
1686
1703
  overflow:auto;
@@ -1723,277 +1740,71 @@
1723
1740
  outline:0;
1724
1741
  }
1725
1742
 
1726
- .tds-radio{
1727
- --tds-radio-font-size:var(--t-font-size-md);
1728
- --tds-radio-cursor:pointer;
1729
- --tds-radio-line-height:1.4;
1730
- --tds-radio-transition-property:border-width;
1731
-
1732
- --tds-radio-input-size:var(--t-element-size-md);
1733
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1734
- --tds-radio-input-border-color:var(--t-form-border-color);
1735
- --tds-radio-input-border-width:var(--t-form-border-width);
1736
- --tds-radio-input-background-color:var(--t-form-background-color);
1737
-
1738
- --tds-radio-label-color:var(--t-form-color);
1739
-
1740
- --tds-radio-description-font-size:var(--t-font-size-sm);
1741
- --tds-radio-description-line-height:1.35;
1742
- --tds-radio-description-color:var(--t-text-color-secondary);
1743
-
1744
- position:relative;
1745
- display:inline-grid;
1746
- grid-template-columns:auto;
1747
- grid-auto-columns:1fr;
1748
- gap:var(--t-spacing-fourth) 0;
1749
- line-height:var(--tds-radio-line-height);
1750
- -webkit-user-select:none;
1751
- -moz-user-select:none;
1752
- user-select:none;
1753
- }
1754
-
1755
- .tds-radio label{
1756
- grid-area:1 / 2;
1757
- padding-inline-start:var(--t-spacing-1);
1758
- font-size:var(--tds-radio-font-size);
1759
- font-weight:var(--t-font-weight-normal);
1760
- color:var(--tds-radio-label-color);
1761
- cursor:var(--tds-radio-cursor);
1762
- }
1763
-
1764
- .tds-radio input[type="radio"]{
1765
- position:relative;
1766
- width:1em;
1767
- height:1em;
1768
- margin:calc((1lh - 1em) / 2) 0 0;
1769
- font-size:var(--tds-radio-font-size);
1770
- line-height:inherit;
1771
- -webkit-appearance:none;
1772
- -moz-appearance:none;
1773
- appearance:none;
1774
- cursor:var(--tds-radio-cursor);
1775
- background-color:var(--tds-radio-input-background-color);
1776
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1777
- border-radius:var(--tds-radio-input-border-radius);
1778
- transition-timing-function:var(--t-ease-in-out);
1779
- transition-duration:var(--t-duration-200);
1780
- transition-property:var(--tds-radio-transition-property);
1781
- }
1782
1743
 
1783
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1784
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1785
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1744
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1745
+ -webkit-appearance:none;
1746
+ appearance:none;
1786
1747
  }
1787
1748
 
1788
- :is(.tds-radio input[type="radio"]):focus-visible{
1789
- outline:var(--t-focus-ring-outline);
1790
- outline-offset:var(--t-focus-ring-offset);
1749
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1750
+ inline-size:1em;
1751
+ block-size:2em;
1791
1752
  }
1792
1753
 
1793
- :is(.tds-radio input[type="radio"]):disabled{
1794
- pointer-events:none;
1754
+ [type="file"]:is(.tds-input input){
1755
+ padding-block:var(--t-spacing-half);
1756
+ padding-inline-start:var(--t-spacing-half);
1795
1757
  }
1796
1758
 
1797
- @media (prefers-reduced-motion: reduce){
1759
+ [type="file"]:is(.tds-input input):not(:disabled){
1760
+ color:var(--t-text-color-secondary);
1761
+ }
1798
1762
 
1799
- .tds-radio input[type="radio"]{
1800
- --tds-radio-transition-property:none;
1801
- }
1802
- }
1763
+ [type="file"]:is(.tds-input input)::file-selector-button{
1764
+ --_file-btn-padding-block:3px;
1803
1765
 
1804
- .tds-radio:has(input:checked){
1805
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1806
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1807
- --tds-radio-input-border-width:4px;
1808
- }
1809
-
1810
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1811
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1812
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1813
- }
1814
-
1815
- .tds-radio:has(input:user-invalid){
1816
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1817
- }
1818
-
1819
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1820
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1821
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1822
- }
1823
-
1824
- .tds-radio:has(input:disabled){
1825
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1826
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1827
-
1828
- --tds-radio-label-color:var(--t-form-color-disabled);
1829
- --tds-radio-description-color:var(--t-form-color-disabled);
1830
- --tds-radio-cursor:not-allowed;
1831
- }
1832
-
1833
- .tds-radio:has(input:disabled) input:checked{
1834
- --tds-radio-input-background-color:var(--t-form-background-color);
1835
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1836
- }
1837
-
1838
- .tds-radio-description{
1839
- display:flex;
1840
- grid-area:2 / 2;
1841
- gap:var(--t-spacing-half);
1842
- align-items:flex-start;
1843
- padding-inline-start:var(--t-spacing-1);
1844
- margin:0;
1845
- font-size:var(--tds-radio-description-font-size);
1846
- line-height:var(--tds-radio-description-line-height);
1847
- color:var(--tds-radio-description-color);
1848
- cursor:text;
1849
- }
1850
-
1851
- .tds-radio--sm{
1852
- --tds-radio-line-height:1.35;
1853
- --tds-radio-input-size:var(--t-element-size-sm);
1854
- --tds-radio-font-size:var(--t-font-size-sm);
1855
- --tds-radio-description-font-size:var(--t-font-size-xs);
1856
- --tds-radio-description-line-height:1.3;
1857
- }
1858
-
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;
1864
-
1865
- --tds-toggle-switch-label-color:var(--t-form-color);
1866
-
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);
1872
-
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);
1876
-
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;
1881
-
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
- }
1890
-
1891
- .tds-toggle-switch input[type="checkbox"]{
1892
- position:absolute;
1893
- width:var(--tds-toggle-switch-track-width);
1894
- height:var(--tds-toggle-switch-track-height);
1895
- margin:0;
1896
- -webkit-appearance:none;
1897
- -moz-appearance:none;
1898
- appearance:none;
1899
- cursor:var(--tds-toggle-switch-cursor);
1900
- outline:var(--tds-toggle-switch-track-outline);
1901
- outline-offset:var(--t-focus-ring-offset);
1902
- background-color:transparent;
1903
- border:0;
1904
- border-radius:var(--t-border-radius-round);
1905
- }
1906
-
1907
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1908
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1909
- }
1910
-
1911
- .tds-toggle-switch label{
1912
- display:inline-flex;
1913
- grid-area:1 / 2;
1914
- padding-inline-start:var(--t-spacing-1);
1915
- margin-top:-.09375em;
1916
- font-size:var(--tds-toggle-switch-font-size);
1917
- font-weight:var(--t-font-weight-normal);
1918
- line-height:var(--tds-toggle-switch-line-height);
1919
- color:var(--tds-toggle-switch-label-color);
1920
- cursor:var(--tds-toggle-switch-cursor);
1921
- }
1922
-
1923
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1924
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1925
- }
1926
-
1927
- .tds-toggle-switch:has(input:checked){
1928
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1929
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1930
- }
1931
-
1932
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1933
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1934
- }
1766
+ padding-block:var(--_file-btn-padding-block);
1767
+ padding-inline:12px;
1768
+ margin-inline-end:12px;
1769
+ font:inherit;
1770
+ 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));
1771
+ color:var(--t-text-color-status-neutral);
1772
+ cursor:pointer;
1773
+ background-color:var(--t-fill-color-button-neutral-solid);
1774
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1775
+ border-radius:var(--t-border-radius-md);
1776
+ transition-timing-function:var(--t-ease-in-out);
1777
+ transition-duration:var(--t-duration-200);
1778
+ transition-property:color, background-color, border-color;
1779
+ }
1935
1780
 
1936
- .tds-toggle-switch:has(input:disabled){
1937
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1938
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1939
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1940
- --tds-toggle-switch-cursor:not-allowed;
1941
- }
1781
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1782
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1783
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1784
+ }
1942
1785
 
1943
- .tds-toggle-switch-track{
1944
- position:relative;
1945
- flex-shrink:0;
1946
- width:var(--tds-toggle-switch-track-width);
1947
- height:var(--tds-toggle-switch-track-height);
1948
- background-color:var(--tds-toggle-switch-track-background-color);
1949
- border-radius:var(--t-border-radius-round);
1950
- transition:var(--tds-toggle-switch-track-transition);
1951
- }
1786
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1787
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1788
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1789
+ }
1952
1790
 
1953
- .tds-toggle-switch-track::before{
1954
- position:absolute;
1955
- top:var(--t-spacing-fourth);
1956
- left:var(--t-spacing-fourth);
1957
- width:var(--tds-toggle-switch-thumb-size);
1958
- height:var(--tds-toggle-switch-thumb-size);
1959
- content:"";
1960
- background-color:#fff;
1961
- border-radius:var(--t-border-radius-round);
1962
- transform:var(--tds-toggle-switch-thumb-transform);
1963
- transition:var(--tds-toggle-switch-thumb-transition);
1791
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1792
+ color:var(--t-text-color-disabled);
1793
+ pointer-events:none;
1794
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1795
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1796
+ }
1797
+ @supports (field-sizing: content){
1798
+ .tds-input--auto-width{
1799
+ inline-size:-moz-fit-content;
1800
+ inline-size:fit-content;
1801
+ min-inline-size:min(100%, 122px);
1964
1802
  }
1965
1803
 
1966
- @media (prefers-reduced-motion: reduce){
1967
-
1968
- .tds-toggle-switch-track{
1969
- --tds-toggle-switch-track-transition:none;
1970
- --tds-toggle-switch-thumb-transition:none;
1971
- }
1804
+ .tds-input--auto-width input{
1805
+ field-sizing:content;
1806
+ inline-size:auto;
1972
1807
  }
1973
-
1974
- .tds-toggle-switch-description{
1975
- display:flex;
1976
- grid-area:2 / 2;
1977
- align-items:flex-start;
1978
- padding-inline-start:var(--t-spacing-1);
1979
- margin:0;
1980
- font-size:var(--tds-toggle-switch-description-font-size);
1981
- line-height:var(--tds-toggle-switch-description-line-height);
1982
- color:var(--tds-toggle-switch-description-color);
1983
- cursor:text;
1984
- }
1985
-
1986
- .tds-toggle-switch--sm{
1987
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1988
- --tds-toggle-switch-line-height:1.35;
1989
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1990
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1991
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1992
- --tds-toggle-switch-description-line-height:1.3;
1993
- }
1994
-
1995
- .tds-toggle-switch--hide-label{
1996
- --tds-toggle-switch-display:inline-flex;
1997
1808
  }
1998
1809
 
1999
1810
  .tds-input:has(textarea){
@@ -2101,367 +1912,556 @@
2101
1912
  }
2102
1913
  }
2103
1914
 
1915
+ .tds-radio{
1916
+ --tds-radio-font-size:var(--t-font-size-md);
1917
+ --tds-radio-cursor:pointer;
1918
+ --tds-radio-line-height:1.4;
1919
+ --tds-radio-transition-property:border-width;
2104
1920
 
2105
- @media (prefers-reduced-motion: no-preference){
2106
-
2107
- :root{
2108
- interpolate-size:allow-keywords;
2109
- }
2110
- }
2111
-
2112
- @layer tds-component{
2113
- tds-sidenav,
2114
- .tds-sidenav{
2115
- --tds-sidenav-indent:12px;
2116
- --tds-sidenav-item-depth:0;
1921
+ --tds-radio-input-size:var(--t-element-size-md);
1922
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1923
+ --tds-radio-input-border-color:var(--t-form-border-color);
1924
+ --tds-radio-input-border-width:var(--t-form-border-width);
1925
+ --tds-radio-input-background-color:var(--t-form-background-color);
2117
1926
 
2118
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1927
+ --tds-radio-label-color:var(--t-form-color);
2119
1928
 
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);
1929
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1930
+ --tds-radio-description-line-height:1.35;
1931
+ --tds-radio-description-color:var(--t-text-color-secondary);
2126
1932
 
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);
2131
-
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;
2135
-
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);
1933
+ position:relative;
1934
+ display:inline-grid;
1935
+ grid-template-columns:auto;
1936
+ grid-auto-columns:1fr;
1937
+ gap:var(--t-spacing-fourth) 0;
1938
+ line-height:var(--tds-radio-line-height);
1939
+ -webkit-user-select:none;
1940
+ -moz-user-select:none;
1941
+ user-select:none;
1942
+ }
2139
1943
 
2140
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2141
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1944
+ .tds-radio label{
1945
+ grid-area:1 / 2;
1946
+ padding-inline-start:var(--t-spacing-1);
1947
+ font-size:var(--tds-radio-font-size);
1948
+ font-weight:var(--t-font-weight-normal);
1949
+ color:var(--tds-radio-label-color);
1950
+ cursor:var(--tds-radio-cursor);
2142
1951
  }
2143
1952
 
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;
1953
+ .tds-radio input[type="radio"]{
1954
+ position:relative;
1955
+ width:1em;
1956
+ height:1em;
1957
+ margin:calc((1lh - 1em) / 2) 0 0;
1958
+ font-size:var(--tds-radio-font-size);
1959
+ line-height:inherit;
1960
+ -webkit-appearance:none;
1961
+ -moz-appearance:none;
1962
+ appearance:none;
1963
+ cursor:var(--tds-radio-cursor);
1964
+ background-color:var(--tds-radio-input-background-color);
1965
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1966
+ border-radius:var(--tds-radio-input-border-radius);
1967
+ transition-timing-function:var(--t-ease-in-out);
1968
+ transition-duration:var(--t-duration-200);
1969
+ transition-property:var(--tds-radio-transition-property);
2151
1970
  }
1971
+
1972
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1973
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1974
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2152
1975
  }
2153
1976
 
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);
2160
- }
2161
- }
1977
+ :is(.tds-radio input[type="radio"]):focus-visible{
1978
+ outline:var(--t-focus-ring-outline);
1979
+ outline-offset:var(--t-focus-ring-offset);
1980
+ }
2162
1981
 
2163
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2164
- display:flex;
2165
- }
1982
+ :is(.tds-radio input[type="radio"]):disabled{
1983
+ pointer-events:none;
1984
+ }
2166
1985
 
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%;
1986
+ @media (prefers-reduced-motion: reduce){
1987
+
1988
+ .tds-radio input[type="radio"]{
1989
+ --tds-radio-transition-property:none;
2171
1990
  }
1991
+ }
2172
1992
 
2173
- .tds-sidenav-section-list{
2174
- width:100%;
2175
- padding:0;
2176
- margin:0;
2177
- list-style:none;
2178
- }
1993
+ .tds-radio:has(input:checked){
1994
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1995
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1996
+ --tds-radio-input-border-width:4px;
1997
+ }
2179
1998
 
2180
- .tds-sidenav-section-header{
2181
- display:flex;
2182
- align-items:baseline;
2183
- justify-content:space-between;
2184
- padding-top:var(--t-spacing-2);
2185
- }
1999
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2000
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2001
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2002
+ }
2186
2003
 
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;
2004
+ .tds-radio:has(input:user-invalid){
2005
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2194
2006
  }
2195
2007
 
2196
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2197
- padding-top:0;
2198
- }
2008
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2009
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2010
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2011
+ }
2199
2012
 
2200
- .tds-sidenav-section-header [slot="label-actions"]{
2201
- display:flex;
2202
- gap:var(--t-spacing-half);
2203
- align-items:center;
2013
+ .tds-radio:has(input:disabled){
2014
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2015
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2016
+
2017
+ --tds-radio-label-color:var(--t-form-color-disabled);
2018
+ --tds-radio-description-color:var(--t-form-color-disabled);
2019
+ --tds-radio-cursor:not-allowed;
2204
2020
  }
2205
2021
 
2206
- .tds-sidenav-section [slot="section-actions"]{
2022
+ .tds-radio:has(input:disabled) input:checked{
2023
+ --tds-radio-input-background-color:var(--t-form-background-color);
2024
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2025
+ }
2026
+
2027
+ .tds-radio-description{
2207
2028
  display:flex;
2208
- gap:12px;
2209
- align-items:center;
2210
- min-height:42px;
2211
- padding:var(--t-spacing-1) 0;
2029
+ grid-area:2 / 2;
2030
+ gap:var(--t-spacing-half);
2031
+ align-items:flex-start;
2032
+ padding-inline-start:var(--t-spacing-1);
2033
+ margin:0;
2034
+ font-size:var(--tds-radio-description-font-size);
2035
+ line-height:var(--tds-radio-description-line-height);
2036
+ color:var(--tds-radio-description-color);
2037
+ cursor:text;
2212
2038
  }
2213
2039
 
2214
- .tds-sidenav-section-list,
2215
- .tds-sidenav-item{
2216
- width:100%;
2040
+ .tds-radio--sm{
2041
+ --tds-radio-line-height:1.35;
2042
+ --tds-radio-input-size:var(--t-element-size-sm);
2043
+ --tds-radio-font-size:var(--t-font-size-sm);
2044
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2045
+ --tds-radio-description-line-height:1.3;
2046
+ }
2047
+
2048
+ .tds-radio-group{
2049
+ --tds-radio-group-font-size:var(--t-font-size-md);
2050
+ --tds-radio-group-line-height:1.4;
2051
+ --tds-radio-group-gap:var(--t-spacing-1);
2052
+
2053
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2054
+ --tds-radio-group-description-line-height:1.35;
2055
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2056
+ --tds-radio-group-description-invalid-icon-display:none;
2057
+ display:flex;
2058
+ flex-direction:column;
2059
+ gap:0;
2217
2060
  padding:0;
2218
2061
  margin:0;
2062
+
2063
+ font-size:var(--tds-radio-group-font-size);
2064
+ line-height:var(--tds-radio-group-line-height);
2065
+ border:0;
2219
2066
  }
2220
2067
 
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);
2068
+ .tds-radio-group legend{
2069
+ float:left;
2070
+ padding:0;
2071
+ margin:0;
2242
2072
  }
2243
2073
 
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;
2250
- 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
- text-decoration:none;
2257
- }
2258
-
2259
- :is(.tds-sidenav-item :is(a,button)):active{
2260
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2261
- }
2074
+ .tds-radio-group[aria-invalid="true"]{
2075
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2076
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2077
+ }
2262
2078
 
2263
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2264
- overflow:hidden;
2265
- color:var(--tds-sidenav-item-icon-color);
2079
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2080
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2266
2081
  }
2267
2082
 
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);
2083
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2084
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2085
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2272
2086
  }
2273
2087
 
2274
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2275
- --tds-sidenav-indent:19px;
2276
- }
2088
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2089
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2090
+ }
2277
2091
 
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;
2092
+ .tds-radio-group:has(input:required) legend::after{
2093
+ margin-left:.25ch;
2094
+ color:var(--t-text-color-status-error);
2095
+ content:"*";
2282
2096
  }
2283
2097
 
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);
2098
+ .tds-radio-group-fields{
2099
+ display:flex;
2100
+ flex-direction:column;
2101
+ gap:var(--tds-radio-group-gap);
2102
+ align-items:flex-start;
2103
+ margin-top:var(--t-spacing-1);
2104
+ }
2287
2105
 
2288
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2289
- font-weight:var(--t-font-weight-semibold);
2290
- }
2106
+ .tds-radio-group-description{
2107
+ display:flex;
2108
+ gap:var(--t-spacing-half);
2109
+ align-items:flex-start;
2110
+ margin:var(--t-spacing-fourth) 0 0;
2111
+ font-size:var(--tds-radio-group-description-font-size);
2112
+ line-height:var(--tds-radio-group-description-line-height);
2113
+ color:var(--tds-radio-group-description-color);
2114
+ cursor:text;
2115
+ }
2291
2116
 
2292
- .tds-sidenav-item:has(.tds-sidenav-section){
2293
- display:flex;
2294
- flex-direction:column;
2295
- gap:var(--t-spacing-half);
2117
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2118
+ display:var(--tds-radio-group-description-invalid-icon-display);
2119
+ flex-shrink:0;
2120
+ margin-top:calc(.5lh - .5em);
2121
+ line-height:var(--tds-radio-group-description-line-height);
2296
2122
  }
2297
2123
 
2298
- .tds-sidenav-item .tds-sidenav-section-list{
2299
- --tds-sidenav-item-depth:1;
2300
- gap:0;
2124
+ .tds-radio-group--sm{
2125
+ --tds-radio-group-line-height:1.35;
2126
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2127
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2128
+ --tds-radio-group-description-line-height:1.3;
2129
+ }
2130
+
2131
+ .tds-toggle-switch{
2132
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2133
+ --tds-toggle-switch-cursor:pointer;
2134
+ --tds-toggle-switch-display:inline-grid;
2135
+ --tds-toggle-switch-line-height:1.4;
2136
+
2137
+ --tds-toggle-switch-label-color:var(--t-form-color);
2138
+
2139
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2140
+ --tds-toggle-switch-track-outline:none;
2141
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2142
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2143
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2144
+
2145
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2146
+ --tds-toggle-switch-thumb-transform:translateX(0);
2147
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2148
+
2149
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2150
+ --tds-toggle-switch-description-line-height:1.35;
2151
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2152
+ position:relative;
2153
+
2154
+ display:var(--tds-toggle-switch-display);
2155
+ grid-template-columns:auto;
2156
+ grid-auto-columns:1fr;
2157
+ gap:var(--t-spacing-fourth) 0;
2158
+ -webkit-user-select:none;
2159
+ -moz-user-select:none;
2160
+ user-select:none;
2161
+ }
2162
+
2163
+ .tds-toggle-switch input[type="checkbox"]{
2164
+ position:absolute;
2165
+ width:var(--tds-toggle-switch-track-width);
2166
+ height:var(--tds-toggle-switch-track-height);
2167
+ margin:0;
2168
+ -webkit-appearance:none;
2169
+ -moz-appearance:none;
2170
+ appearance:none;
2171
+ cursor:var(--tds-toggle-switch-cursor);
2172
+ outline:var(--tds-toggle-switch-track-outline);
2173
+ outline-offset:var(--t-focus-ring-offset);
2174
+ background-color:transparent;
2175
+ border:0;
2176
+ border-radius:var(--t-border-radius-round);
2301
2177
  }
2302
2178
 
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);
2179
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2180
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2309
2181
  }
2310
2182
 
2311
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2312
- --tds-sidenav-item-depth:2;
2313
- }
2183
+ .tds-toggle-switch label{
2184
+ display:inline-flex;
2185
+ grid-area:1 / 2;
2186
+ padding-inline-start:var(--t-spacing-1);
2187
+ margin-top:-.09375em;
2188
+ font-size:var(--tds-toggle-switch-font-size);
2189
+ font-weight:var(--t-font-weight-normal);
2190
+ line-height:var(--tds-toggle-switch-line-height);
2191
+ color:var(--tds-toggle-switch-label-color);
2192
+ cursor:var(--tds-toggle-switch-cursor);
2193
+ }
2314
2194
 
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;
2321
- }
2195
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2196
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2197
+ }
2322
2198
 
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);
2332
- }
2199
+ .tds-toggle-switch:has(input:checked){
2200
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2201
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2202
+ }
2333
2203
 
2334
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2335
- position:absolute;
2336
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2337
- z-index:-1;
2338
- height:100%;
2339
- 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
- }
2204
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2205
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2206
+ }
2344
2207
 
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
- }
2208
+ .tds-toggle-switch:has(input:disabled){
2209
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2210
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2211
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2212
+ --tds-toggle-switch-cursor:not-allowed;
2213
+ }
2350
2214
 
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);
2354
- }
2215
+ .tds-toggle-switch-track{
2216
+ position:relative;
2217
+ flex-shrink:0;
2218
+ width:var(--tds-toggle-switch-track-width);
2219
+ height:var(--tds-toggle-switch-track-height);
2220
+ background-color:var(--tds-toggle-switch-track-background-color);
2221
+ border-radius:var(--t-border-radius-round);
2222
+ transition:var(--tds-toggle-switch-track-transition);
2223
+ }
2355
2224
 
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);
2358
- }
2225
+ .tds-toggle-switch-track::before{
2226
+ position:absolute;
2227
+ top:var(--t-spacing-fourth);
2228
+ left:var(--t-spacing-fourth);
2229
+ width:var(--tds-toggle-switch-thumb-size);
2230
+ height:var(--tds-toggle-switch-thumb-size);
2231
+ content:"";
2232
+ background-color:#fff;
2233
+ border-radius:var(--t-border-radius-round);
2234
+ transform:var(--tds-toggle-switch-thumb-transform);
2235
+ transition:var(--tds-toggle-switch-thumb-transition);
2236
+ }
2359
2237
 
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
- }
2238
+ @media (prefers-reduced-motion: reduce){
2364
2239
 
2365
- .tds-sidenav-responsive-header{
2240
+ .tds-toggle-switch-track{
2241
+ --tds-toggle-switch-track-transition:none;
2242
+ --tds-toggle-switch-thumb-transition:none;
2243
+ }
2244
+ }
2245
+
2246
+ .tds-toggle-switch-description{
2366
2247
  display:flex;
2367
- gap:var(--t-spacing-2);
2368
- align-items:center;
2369
- width:100%;
2248
+ grid-area:2 / 2;
2249
+ align-items:flex-start;
2250
+ padding-inline-start:var(--t-spacing-1);
2251
+ margin:0;
2252
+ font-size:var(--tds-toggle-switch-description-font-size);
2253
+ line-height:var(--tds-toggle-switch-description-line-height);
2254
+ color:var(--tds-toggle-switch-description-color);
2255
+ cursor:text;
2370
2256
  }
2371
2257
 
2372
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2373
- order:0;
2258
+ .tds-toggle-switch--sm{
2259
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2260
+ --tds-toggle-switch-line-height:1.35;
2261
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2262
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2263
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2264
+ --tds-toggle-switch-description-line-height:1.3;
2265
+ }
2266
+
2267
+ .tds-toggle-switch--hide-label{
2268
+ --tds-toggle-switch-display:inline-flex;
2269
+ }
2270
+
2271
+ .tds-checkbox{
2272
+ --tds-checkbox-font-size:var(--t-font-size-md);
2273
+ --tds-checkbox-cursor:pointer;
2274
+ --tds-checkbox-line-height:1.4;
2275
+ --tds-checkbox-transition-property:background-color, border-color;
2276
+
2277
+ --tds-checkbox-input-size:var(--t-element-size-md);
2278
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2279
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
2280
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
2281
+
2282
+ --tds-checkbox-input-icon:none;
2283
+ --tds-checkbox-input-icon-visibility:hidden;
2284
+ --tds-checkbox-input-icon-opacity:0;
2285
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2286
+
2287
+ --tds-checkbox-label-color:var(--t-form-color);
2288
+
2289
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
2290
+ --tds-checkbox-description-line-height:1.35;
2291
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
2292
+ --tds-checkbox-description-invalid-icon-display:none;
2293
+
2294
+ position:relative;
2295
+ display:inline-grid;
2296
+ grid-template-columns:auto;
2297
+ grid-auto-columns:1fr;
2298
+ gap:var(--t-spacing-fourth) 0;
2299
+ line-height:var(--tds-checkbox-line-height);
2300
+ -webkit-user-select:none;
2301
+ -moz-user-select:none;
2302
+ user-select:none;
2303
+ }
2304
+
2305
+ .tds-checkbox label{
2306
+ grid-area:1 / 2;
2307
+ padding-inline-start:var(--t-spacing-1);
2308
+ font-size:var(--tds-checkbox-font-size);
2309
+ font-weight:var(--t-font-weight-normal);
2310
+ color:var(--tds-checkbox-label-color);
2311
+ cursor:var(--tds-checkbox-cursor);
2374
2312
  }
2375
2313
 
2376
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2377
- flex:1;
2378
- order:1;
2379
- 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);
2314
+ .tds-checkbox tds-indeterminate{
2315
+ display:flex;
2383
2316
  }
2384
2317
 
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;
2318
+ .tds-checkbox input[type="checkbox"]{
2319
+ position:relative;
2320
+ width:1em;
2321
+ height:1em;
2322
+ margin:calc((1lh - 1em) / 2) 0 0;
2323
+ font-size:var(--tds-checkbox-font-size);
2324
+ line-height:inherit;
2325
+ -webkit-appearance:none;
2326
+ -moz-appearance:none;
2327
+ appearance:none;
2328
+ cursor:var(--tds-checkbox-cursor);
2329
+ background-color:var(--tds-checkbox-input-background-color);
2330
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2331
+ border-radius:var(--tds-checkbox-input-border-radius);
2332
+ transition-timing-function:var(--t-ease-in-out);
2333
+ transition-duration:var(--t-duration-200);
2334
+ transition-property:var(--tds-checkbox-transition-property);
2403
2335
  }
2404
2336
 
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;
2337
+ :is(.tds-checkbox input[type="checkbox"])::before{
2338
+ position:absolute;
2339
+ top:50%;
2340
+ left:50%;
2341
+ visibility:var(--tds-checkbox-input-icon-visibility);
2342
+ width:100%;
2343
+ height:100%;
2344
+ content:"";
2345
+ background-color:var(--tds-checkbox-input-icon-fill);
2346
+ border-radius:var(--tds-checkbox-input-border-radius);
2347
+ opacity:var(--tds-checkbox-input-icon-opacity);
2348
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
2349
+ mask-image:var(--tds-checkbox-input-icon);
2350
+ -webkit-mask-repeat:no-repeat;
2351
+ mask-repeat:no-repeat;
2352
+ -webkit-mask-size:contain;
2353
+ mask-size:contain;
2354
+ transform:translate(-50%, -50%);
2355
+ }
2356
+
2357
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2358
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2359
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2360
+ }
2361
+
2362
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2363
+ outline:var(--t-focus-ring-outline);
2364
+ outline-offset:var(--t-focus-ring-offset);
2365
+ }
2366
+
2367
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
2368
+ pointer-events:none;
2369
+ }
2370
+
2371
+ @media (prefers-reduced-motion: reduce){
2372
+
2373
+ .tds-checkbox input[type="checkbox"]{
2374
+ --tds-checkbox-transition-property:none;
2375
+ }
2376
+ }
2377
+
2378
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2379
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
2380
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2381
+ --tds-checkbox-input-icon-visibility:visible;
2382
+ --tds-checkbox-input-icon-opacity:1;
2383
+ }
2384
+
2385
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2386
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2387
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2388
+ }
2389
+
2390
+ .tds-checkbox:has(input:checked){
2391
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2392
+ }
2393
+
2394
+ .tds-checkbox:has(input:indeterminate){
2395
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2396
+ }
2397
+
2398
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2399
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2400
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
2401
+ --tds-checkbox-description-invalid-icon-display:inline-block;
2413
2402
  }
2414
2403
 
2415
- .tds-sidenav-item :is(a, button) :is(.prefix){
2416
- display:none;
2417
- }
2418
- @supports selector(:popover-open){
2419
- .tds-sidenav-collapse:popover-open{
2420
- display:flex;
2404
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2405
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2406
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2421
2407
  }
2422
2408
 
2423
- .tds-sidenav-collapse:not(:popover-open){
2424
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2425
- transition:var(--tds-sidenav-collapse-transition-exit);
2409
+ :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{
2410
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2411
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2426
2412
  }
2427
2413
 
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);
2414
+ :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){
2415
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2416
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2432
2417
  }
2433
- }
2434
- }
2435
- @supports not selector(:popover-open){
2436
- .tds-sidenav-collapse.\:popover-open{
2437
- display:flex;
2438
- }
2439
2418
 
2440
- .tds-sidenav-collapse:not(.\:popover-open){
2441
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2442
- transition:var(--tds-sidenav-collapse-transition-exit);
2419
+ .tds-checkbox:has(input:required) label::after{
2420
+ margin-left:.25ch;
2421
+ color:var(--t-text-color-status-error);
2422
+ content:"*";
2443
2423
  }
2444
- }
2445
- }
2446
2424
 
2447
- @media (min-width: 720px){
2448
- .tds-sidenav-responsive-header{
2449
- display:none;
2425
+ .tds-checkbox:has(input:disabled){
2426
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2427
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2428
+
2429
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
2430
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
2431
+ --tds-checkbox-cursor:not-allowed;
2450
2432
  }
2451
- }
2452
2433
 
2453
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2454
- display:none;
2434
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2435
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2455
2436
  }
2456
2437
 
2457
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2458
- display:block;
2459
- }
2438
+ .tds-checkbox-description{
2439
+ display:flex;
2440
+ grid-area:2 / 2;
2441
+ gap:var(--t-spacing-half);
2442
+ align-items:flex-start;
2443
+ padding-inline-start:var(--t-spacing-1);
2444
+ margin:0;
2445
+ font-size:var(--tds-checkbox-description-font-size);
2446
+ line-height:var(--tds-checkbox-description-line-height);
2447
+ color:var(--tds-checkbox-description-color);
2448
+ cursor:text;
2449
+ }
2460
2450
 
2461
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2462
- display:flex;
2463
- flex-direction:column;
2464
- }
2451
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2452
+ display:var(--tds-checkbox-description-invalid-icon-display);
2453
+ flex-shrink:0;
2454
+ margin-top:calc(.5lh - .5em);
2455
+ line-height:var(--tds-checkbox-description-line-height);
2456
+ }
2457
+
2458
+ .tds-checkbox--sm{
2459
+ --tds-checkbox-line-height:1.35;
2460
+ --tds-checkbox-input-size:var(--t-element-size-sm);
2461
+ --tds-checkbox-font-size:var(--t-font-size-sm);
2462
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2463
+ --tds-checkbox-description-line-height:1.3;
2464
+ }
2465
2465
 
2466
2466
  .tds-input{
2467
2467
  --tds-input-border-color:var(--t-form-border-color);
@@ -4183,6 +4183,186 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4183
4183
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
4184
  }
4185
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 button{
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 button) svg{
4262
+ color:var(--_chip-icon-color);
4263
+ transform:scale(.75);
4264
+ }
4265
+
4266
+ :is(.tds-btn-group--data-table-filters-chip button) 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 button) span{
4277
+ transition:none;
4278
+ }
4279
+ }
4280
+
4281
+ :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4282
+ padding-inline-start:0;
4283
+ }
4284
+
4285
+ :is(.tds-btn-group--data-table-filters-chip button) 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 button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip 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 button{
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 button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive 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 button{
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 button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4318
+ color:var(--t-text-color-status-error);
4319
+ background-color:var(--t-fill-color-status-error-ghost);
4320
+ }
4321
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4322
+ gap:var(--t-spacing-1);
4323
+ align-items:start;
4324
+ padding:var(--t-spacing-2);
4325
+ }
4326
+
4327
+ @media (prefers-reduced-motion: no-preference){
4328
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4329
+ animation-name:tds-data-table-filters-popover;
4330
+ }
4331
+
4332
+ @keyframes tds-data-table-filters-popover{
4333
+ from{
4334
+ opacity:0;
4335
+ }
4336
+ }
4337
+ }
4338
+
4339
+ .tds-data-table-filters-popover-label{
4340
+ font-size:var(--t-font-size-md);
4341
+ font-weight:var(--t-font-weight-medium);
4342
+ margin-block:0;
4343
+ }
4344
+
4345
+ .tds-data-table-filters-popover-label-operator{
4346
+ font-weight:var(--t-font-weight-normal);
4347
+ }
4348
+
4349
+ .tds-data-table-filters-popover-description{
4350
+ font-size:var(--t-font-size-sm);
4351
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4352
+ margin-block-end:0;
4353
+ color:var(--t-text-color-secondary);
4354
+ }
4355
+
4356
+ .tds-data-table-filter-controls-badge{
4357
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4358
+ padding-inline:var(--t-spacing-half);
4359
+ font-size:var(--t-font-size-sm);
4360
+ color:var(--t-text-color-status-info);
4361
+ background-color:var(--t-fill-color-status-info-dim);
4362
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4363
+ border-radius:var(--t-border-radius-round);
4364
+ }
4365
+
4186
4366
  .tds-data-table{
4187
4367
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4188
4368
  --tds-data-table-border-color:var(--t-border-color);
@@ -4636,388 +4816,151 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4636
4816
  border-radius:var(--t-form-border-radius);
4637
4817
  transition-timing-function:var(--t-ease-in-out);
4638
4818
  transition-duration:var(--t-duration-200);
4639
- transition-property:background-color, border-color, outline-color, outline-offset;
4640
- }
4641
-
4642
- .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4643
- border-color:var(--t-form-border-color-hover);
4644
- }
4645
-
4646
- .tds-data-table-filter-controls-search-input-control:has(input:focus){
4647
- --_search-input-outline-color:var(--t-focus-ring-color);
4648
- --_search-input-outline-offset:var(--t-focus-ring-offset);
4649
-
4650
- border-color:var(--t-form-border-color-focus);
4651
- }
4652
-
4653
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4654
- flex-shrink:0;
4655
- inline-size:1em;
4656
- color:var(--t-icon-color-dim);
4657
- }
4658
-
4659
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4660
- flex:1;
4661
- min-inline-size:0;
4662
- padding:0;
4663
- overflow:hidden;
4664
- text-overflow:ellipsis;
4665
- font-family:inherit;
4666
- font-size:inherit;
4667
- color:inherit;
4668
- white-space:nowrap;
4669
- -webkit-appearance:none;
4670
- -moz-appearance:none;
4671
- appearance:none;
4672
- outline:0;
4673
- background-color:transparent;
4674
- border:0;
4675
- }
4676
-
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
-
4785
- .tds-pane{
4786
- --tds-pane-background-color:var(--t-surface-color-card);
4787
- --tds-pane-border-radius:var(--t-border-radius-lg);
4788
- --tds-pane-border-color:var(--t-border-color);
4789
-
4790
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4791
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4792
-
4793
- --tds-pane-title-color:var(--t-text-color-headline);
4794
- --tds-pane-title-font-size:var(--t-font-size-lg);
4795
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4796
- --tds-pane-title-line-height:1.4;
4797
-
4798
- --tds-pane-body-padding:var(--t-spacing-3);
4799
-
4800
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4801
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4802
-
4803
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4804
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4805
-
4806
- background:var(--tds-pane-background-color);
4807
- border-radius:var(--tds-pane-border-radius);
4808
- border:var(--t-border-width) solid var(--tds-pane-border-color);
4809
- display:flex;
4810
- flex-direction:column;
4811
- }
4812
-
4813
- .tds-pane-header{
4814
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4815
- padding-block:var(--tds-pane-header-padding-block);
4816
- padding-inline:var(--tds-pane-header-padding-inline);
4817
- }
4818
-
4819
- .tds-pane-title{
4820
- color:var(--tds-pane-title-color);
4821
- font-size:var(--tds-pane-title-font-size);
4822
- font-weight:var(--tds-pane-title-font-weight);
4823
- line-height:var(--tds-pane-title-line-height);
4824
- margin:0;
4825
- }
4826
-
4827
- .tds-pane-body{
4828
- padding:var(--tds-pane-body-padding);
4829
- }
4830
-
4831
- .tds-pane-footer{
4832
- padding-block-end:var(--tds-pane-footer-padding-block);
4833
- padding-inline:var(--tds-pane-footer-padding-inline);
4834
- }
4835
-
4836
- .tds-pane-divider{
4837
- border:0;
4838
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4839
- margin-block:var(--tds-pane-divider-margin-block);
4840
- margin-inline:var(--tds-pane-divider-margin-inline);
4841
- }
4842
- .tds-data-table-filters-shelf{
4843
- height:auto;
4844
- overflow:hidden;
4845
- transition:height var(--t-duration-300) var(--t-ease-out);
4846
- }
4847
-
4848
- @media (prefers-reduced-motion: reduce){
4849
-
4850
- .tds-data-table-filters-shelf{
4851
- transition:none;
4852
- }
4853
- }
4854
-
4855
- .tds-data-table-filters-shelf--collapsed{
4856
- height:0;
4857
- transition-timing-function:var(--t-ease-in);
4858
- }
4859
-
4860
- @supports (interpolate-size: allow-keywords){
4861
- .tds-data-table-filters-shelf{
4862
- interpolate-size:allow-keywords;
4863
- }
4864
- }
4865
-
4866
- .tds-data-table-filters{
4867
- padding-block:var(--tds-data-table-cell-padding-block);
4868
- padding-inline:var(--tds-data-table-cell-padding-inline);
4869
- border-top:1px solid var(--tds-data-table-border-color);
4870
- }
4871
-
4872
- .tds-data-table-filters-active{
4873
- display:flex;
4874
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4875
- column-gap:var(--tds-data-table-cell-padding-inline);
4876
- justify-content:space-between;
4877
- }
4878
-
4879
- .tds-data-table-filters-active-list{
4880
- display:flex;
4881
- flex-wrap:wrap;
4882
- gap:var(--t-spacing-half);
4819
+ transition-property:background-color, border-color, outline-color, outline-offset;
4883
4820
  }
4884
4821
 
4885
- .tds-data-table-filters-active-actions{
4886
- flex-shrink:0;
4887
- }
4822
+ .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4823
+ border-color:var(--t-form-border-color-hover);
4824
+ }
4888
4825
 
4889
- :root{
4826
+ .tds-data-table-filter-controls-search-input-control:has(input:focus){
4827
+ --_search-input-outline-color:var(--t-focus-ring-color);
4828
+ --_search-input-outline-offset:var(--t-focus-ring-offset);
4890
4829
 
4891
- --_data-table-filter-border-info:hsl(204 96% 89%);
4892
- --_data-table-filter-border-error:hsl(8 60% 85%);
4893
- }
4830
+ border-color:var(--t-form-border-color-focus);
4831
+ }
4894
4832
 
4895
- :root[data-color-mode="dark"]{
4896
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4897
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4898
- }
4833
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4834
+ flex-shrink:0;
4835
+ inline-size:1em;
4836
+ color:var(--t-icon-color-dim);
4837
+ }
4899
4838
 
4900
- @media (prefers-color-scheme: dark){
4901
- :root[data-color-mode="system"]{
4902
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4903
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4839
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4840
+ flex:1;
4841
+ min-inline-size:0;
4842
+ padding:0;
4843
+ overflow:hidden;
4844
+ text-overflow:ellipsis;
4845
+ font-family:inherit;
4846
+ font-size:inherit;
4847
+ color:inherit;
4848
+ white-space:nowrap;
4849
+ -webkit-appearance:none;
4850
+ -moz-appearance:none;
4851
+ appearance:none;
4852
+ outline:0;
4853
+ background-color:transparent;
4854
+ border:0;
4904
4855
  }
4905
- }
4906
4856
 
4907
- .tds-btn-group--data-table-filters-chip button{
4908
- --_chip-border-color:var(--_data-table-filter-border-info);
4909
- --_chip-icon-color:var(--t-icon-color-status-info);
4857
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4858
+ color:var(--t-form-placeholder-color);
4859
+ }
4910
4860
 
4911
- gap:0;
4912
- color:var(--t-text-color-status-info);
4913
- background-color:var(--t-fill-color-status-info-dim);
4914
- border-color:var(--_chip-border-color);
4915
- }
4861
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4862
+ color:var(--t-form-placeholder-color);
4863
+ }
4916
4864
 
4917
- :is(.tds-btn-group--data-table-filters-chip button) svg{
4918
- color:var(--_chip-icon-color);
4919
- transform:scale(.75);
4865
+ :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{
4866
+ -webkit-appearance:none;
4867
+ appearance:none;
4868
+ }
4869
+
4870
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4871
+ inline-size:calc(var(--t-font-size-md) * .8);
4872
+ block-size:calc(var(--t-font-size-md) * .8);
4920
4873
  }
4921
4874
 
4922
- :is(.tds-btn-group--data-table-filters-chip button) span{
4923
- padding-inline:var(--tds-btn-padding-x);
4924
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4925
- transition-timing-function:var(--t-ease-in-out);
4926
- transition-duration:var(--t-duration-200);
4927
- transition-property:border-color;
4875
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4876
+ --tds-btn-color:var(--t-icon-color-dim);
4877
+ --tds-btn-padding-truncated-x:0;
4878
+ --_search-input-clear-button-visibility:hidden;
4879
+
4880
+ visibility:var(--_search-input-clear-button-visibility);
4881
+ flex-shrink:0;
4928
4882
  }
4929
4883
 
4930
4884
  @media (prefers-reduced-motion: reduce){
4931
4885
 
4932
- :is(.tds-btn-group--data-table-filters-chip button) span{
4933
- transition:none;
4886
+ .tds-data-table-filter-controls-search-input-control{
4887
+ transition-property:none;
4888
+ }
4934
4889
  }
4935
- }
4936
4890
 
4937
- :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4938
- padding-inline-start:0;
4939
- }
4891
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4892
+ --_search-input-clear-button-visibility:visible;
4893
+ }
4940
4894
 
4941
- :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4942
- padding-inline-end:0;
4943
- border-inline-end-color:transparent;
4895
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4896
+ position:sticky;
4897
+ inset-block-start:var(--_label-sticky-block-start);
4898
+ background-color:var(--t-surface-color-card);
4944
4899
  }
4945
4900
 
4946
- :is(.tds-btn-group--data-table-filters-chip button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip button):focus{
4947
- color:var(--t-text-color-interaction);
4948
- background-color:var(--t-fill-color-status-info-ghost);
4949
- border-color:var(--_chip-border-color);
4901
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4902
+ scroll-margin-block-start:var(--t-spacing-4);
4950
4903
  }
4951
4904
 
4952
- .tds-btn-group--data-table-filters-chip-inactive button{
4953
- --_chip-border-color:var(--t-border-color-button-neutral);
4954
- --_chip-icon-color:var(--t-icon-color-status-neutral);
4905
+ .tds-data-table-filter-controls-list{
4906
+ --_label-sticky-block-start:var(--t-spacing-6);
4955
4907
 
4956
- color:var(--t-text-color);
4957
- background-color:var(--t-fill-color-status-neutral-dim);
4908
+ margin-block-start:var(--t-spacing-1);
4958
4909
  }
4959
4910
 
4960
- :is(.tds-btn-group--data-table-filters-chip-inactive button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive button):focus{
4961
- color:var(--t-text-color);
4962
- background-color:var(--t-fill-color-status-neutral-ghost);
4911
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4912
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4963
4913
  }
4964
4914
 
4965
- .tds-btn-group--data-table-filters-chip-invalid button{
4966
- --_chip-border-color:var(--_data-table-filter-border-error);
4967
- --_chip-icon-color:var(--t-icon-color-status-error);
4915
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4916
+ scroll-margin-block-start:var(--t-spacing-6);
4917
+ }
4968
4918
 
4969
- color:var(--t-text-color-status-error);
4970
- background-color:var(--t-fill-color-status-error-dim);
4919
+ .tds-data-table-filter-controls-submenu-list{
4920
+ --_label-sticky-block-start:0;
4971
4921
  }
4972
4922
 
4973
- :is(.tds-btn-group--data-table-filters-chip-invalid button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4974
- color:var(--t-text-color-status-error);
4975
- background-color:var(--t-fill-color-status-error-ghost);
4976
- }
4977
- .tds-popover--data-table-filters-popover .tds-popover-content{
4978
- gap:var(--t-spacing-1);
4979
- align-items:start;
4980
- padding:var(--t-spacing-2);
4923
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4924
+ position:absolute;
4925
+ inset-block-start:calc(-1 * var(--t-spacing-1));
4926
+ inset-inline-start:0;
4927
+ inline-size:100%;
4928
+ block-size:var(--t-spacing-1);
4929
+ content:"";
4930
+ background-color:var(--t-surface-color-card);
4981
4931
  }
4982
4932
 
4983
- @media (prefers-reduced-motion: no-preference){
4984
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4985
- animation-name:tds-data-table-filters-popover;
4986
- }
4987
-
4988
- @keyframes tds-data-table-filters-popover{
4989
- from{
4990
- opacity:0;
4991
- }
4992
- }
4933
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4934
+ background:var(--t-fill-color-neutral-070);
4993
4935
  }
4994
4936
 
4995
- .tds-data-table-filters-popover-label{
4996
- font-size:var(--t-font-size-md);
4997
- font-weight:var(--t-font-weight-medium);
4998
- margin-block:0;
4937
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4938
+ inline-size:16rem;
4999
4939
  }
5000
4940
 
5001
- .tds-data-table-filters-popover-label-operator{
5002
- font-weight:var(--t-font-weight-normal);
4941
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4942
+ max-block-size:20rem;
5003
4943
  }
5004
4944
 
5005
- .tds-data-table-filters-popover-description{
5006
- font-size:var(--t-font-size-sm);
5007
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
5008
- margin-block-end:0;
5009
- color:var(--t-text-color-secondary);
4945
+ .tds-data-table-filter-controls-submenu-chevron{
4946
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4947
+
4948
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4949
+ transform:scale(.8);
5010
4950
  }
5011
4951
 
5012
- .tds-data-table-filter-controls-badge{
5013
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
5014
- padding-inline:var(--t-spacing-half);
5015
- font-size:var(--t-font-size-sm);
5016
- color:var(--t-text-color-status-info);
5017
- background-color:var(--t-fill-color-status-info-dim);
5018
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
5019
- border-radius:var(--t-border-radius-round);
4952
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
4953
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4954
+ }
4955
+
4956
+ @media (prefers-reduced-motion: no-preference){
4957
+
4958
+ .tds-data-table-filter-controls-submenu-chevron{
4959
+ transition-timing-function:var(--t-ease-in-out);
4960
+ transition-duration:var(--t-duration-200);
4961
+ transition-property:color;
5020
4962
  }
4963
+ }
5021
4964
 
5022
4965
  .tds-segmented-control{
5023
4966
  --tds-segmented-control-font-size:var(--t-font-size-md);
@@ -5143,6 +5086,63 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5143
5086
  --tds-segmented-control-background-color-disabled:transparent;
5144
5087
  }
5145
5088
 
5089
+ .tds-pane{
5090
+ --tds-pane-background-color:var(--t-surface-color-card);
5091
+ --tds-pane-border-radius:var(--t-border-radius-lg);
5092
+ --tds-pane-border-color:var(--t-border-color);
5093
+
5094
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
5095
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5096
+
5097
+ --tds-pane-title-color:var(--t-text-color-headline);
5098
+ --tds-pane-title-font-size:var(--t-font-size-lg);
5099
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
5100
+ --tds-pane-title-line-height:1.4;
5101
+
5102
+ --tds-pane-body-padding:var(--t-spacing-3);
5103
+
5104
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
5105
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5106
+
5107
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5108
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5109
+
5110
+ background:var(--tds-pane-background-color);
5111
+ border-radius:var(--tds-pane-border-radius);
5112
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
5113
+ display:flex;
5114
+ flex-direction:column;
5115
+ }
5116
+
5117
+ .tds-pane-header{
5118
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5119
+ padding-block:var(--tds-pane-header-padding-block);
5120
+ padding-inline:var(--tds-pane-header-padding-inline);
5121
+ }
5122
+
5123
+ .tds-pane-title{
5124
+ color:var(--tds-pane-title-color);
5125
+ font-size:var(--tds-pane-title-font-size);
5126
+ font-weight:var(--tds-pane-title-font-weight);
5127
+ line-height:var(--tds-pane-title-line-height);
5128
+ margin:0;
5129
+ }
5130
+
5131
+ .tds-pane-body{
5132
+ padding:var(--tds-pane-body-padding);
5133
+ }
5134
+
5135
+ .tds-pane-footer{
5136
+ padding-block-end:var(--tds-pane-footer-padding-block);
5137
+ padding-inline:var(--tds-pane-footer-padding-inline);
5138
+ }
5139
+
5140
+ .tds-pane-divider{
5141
+ border:0;
5142
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5143
+ margin-block:var(--tds-pane-divider-margin-block);
5144
+ margin-inline:var(--tds-pane-divider-margin-inline);
5145
+ }
5146
5146
  .search-result-grouping-4F5Lx{
5147
5147
  color:var(--t-text-color-secondary);
5148
5148
  }