@planningcenter/tapestry 4.13.0-rc.0 → 4.13.0

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 (34) hide show
  1. package/dist/components/DataTable/SavedViewsBar.d.ts.map +1 -1
  2. package/dist/components/DataTable/SavedViewsBar.js +42 -14
  3. package/dist/components/DataTable/SavedViewsBar.js.map +1 -1
  4. package/dist/components/DataTable/useVisibleSavedViews.d.ts +31 -0
  5. package/dist/components/DataTable/useVisibleSavedViews.d.ts.map +1 -0
  6. package/dist/components/DataTable/useVisibleSavedViews.js +178 -0
  7. package/dist/components/DataTable/useVisibleSavedViews.js.map +1 -0
  8. package/dist/components/internal/reorderable-list-box/ReorderableListBox.d.ts +6 -0
  9. package/dist/components/internal/reorderable-list-box/ReorderableListBox.d.ts.map +1 -1
  10. package/dist/components/internal/reorderable-list-box/ReorderableListBox.js +9 -2
  11. package/dist/components/internal/reorderable-list-box/ReorderableListBox.js.map +1 -1
  12. package/dist/index.css +8 -7
  13. package/dist/index.css.map +1 -1
  14. package/dist/packages/tapestry-render/dist/{buildComponent-C5PfOgH9.js → buildComponent-DzY2PDMT.js} +23 -23
  15. package/dist/packages/tapestry-render/dist/buildComponent-DzY2PDMT.js.map +1 -0
  16. package/dist/packages/tapestry-render/dist/index.js +2 -2
  17. package/dist/packages/tapestry-render/dist/index.js.map +1 -1
  18. package/dist/packages/tapestry-render/dist/legacy.js +2 -2
  19. package/dist/packages/tapestry-render/dist/legacy.js.map +1 -1
  20. package/dist/product-tokens/giving.css +1 -0
  21. package/dist/reactRender.css +1269 -1244
  22. package/dist/reactRender.css.map +1 -1
  23. package/dist/reactRenderLegacy.css +1269 -1244
  24. package/dist/reactRenderLegacy.css.map +1 -1
  25. package/dist/tapestryMount.css +1269 -1244
  26. package/dist/tapestryMount.css.map +1 -1
  27. package/dist/tapestryMountLegacy.css +1269 -1244
  28. package/dist/tapestryMountLegacy.css.map +1 -1
  29. package/dist/tokens.css +8 -7
  30. package/dist/tokens.css.map +1 -1
  31. package/dist/unstable.css +33 -8
  32. package/dist/unstable.css.map +1 -1
  33. package/package.json +5 -5
  34. package/dist/packages/tapestry-render/dist/buildComponent-C5PfOgH9.js.map +0 -1
@@ -677,1384 +677,1128 @@
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 .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
781
+ .tds-sidenav-section-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
+ .tds-sidenav-section-label-actions > [slot="label-actions"],
790
+ .tds-sidenav-section-actions > [slot="section-actions"]{
791
+ display:contents;
792
+ }
779
793
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
794
+ .tds-sidenav-section-list,
795
+ .tds-sidenav-item{
796
+ width:100%;
797
+ padding:0;
798
+ margin:0;
799
+ }
800
+
801
+ .tds-sidenav-item :is(a,button){
802
+ position:relative;
781
803
  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;
804
+ gap:12px;
805
+ align-items:center;
806
+ width:100%;
807
+ padding:12px;
808
+ overflow:hidden;
809
+ font-size:var(--t-font-size-sm);
810
+ line-height:18px;
811
+ color:var(--t-text-color-headline);
812
+ white-space:nowrap;
813
+ text-decoration:none;
814
+ -webkit-appearance:none;
815
+ -moz-appearance:none;
816
+ appearance:none;
817
+ cursor:pointer;
818
+ background-color:var(--tds-sidenav-item-background, transparent);
819
+ border:0;
820
+ border-radius:var(--t-border-radius);
821
+ transition:var(--tds-sidenav-item-transition);
787
822
  }
788
823
 
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);
824
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
825
+ display:block;
826
+ flex:1;
827
+ overflow:hidden;
828
+ text-overflow:ellipsis;
829
+ text-align:left;
830
+ white-space:nowrap;
797
831
  }
798
832
 
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;
833
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
834
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
835
+ color:var(--t-text-color-headline);
807
836
  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
837
  }
819
838
 
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);
825
- }
839
+ :is(.tds-sidenav-item :is(a,button)):active{
840
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
841
+ }
826
842
 
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
- }
843
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
844
+ overflow:hidden;
845
+ color:var(--tds-sidenav-item-icon-color);
846
+ }
833
847
 
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
- }
848
+ :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{
849
+ display:block;
850
+ width:var(--tds-sidenav-item-icon-size);
851
+ height:var(--tds-sidenav-item-icon-size);
852
+ }
839
853
 
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
- }
854
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
855
+ --tds-sidenav-indent:19px;
856
+ }
847
857
 
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
- }
858
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
859
+ visibility:visible;
860
+ block-size:auto;
861
+ opacity:1;
862
+ }
858
863
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
864
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
865
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
866
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
867
+
868
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
869
+ font-weight:var(--t-font-weight-semibold);
870
+ }
871
+
872
+ .tds-sidenav-item:has(.tds-sidenav-section){
873
+ display:flex;
874
+ flex-direction:column;
875
+ gap:var(--t-spacing-half);
876
+ }
877
+
878
+ .tds-sidenav-item .tds-sidenav-section-list{
879
+ --tds-sidenav-item-depth:1;
880
+ gap:0;
881
+ }
882
+
883
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
884
+ visibility:hidden;
885
+ block-size:0;
886
+ overflow-y:clip;
887
+ opacity:0;
888
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
889
  }
862
890
 
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);
891
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
892
+ --tds-sidenav-item-depth:2;
893
+ }
894
+
895
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
896
+ min-height:var(--t-element-size-2xl);
897
+ padding-block:9px;
898
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
899
+ line-height:1;
900
+ background-color:transparent;
901
+ }
902
+
903
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
904
+ position:absolute;
905
+ top:0;
906
+ bottom:0;
907
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
908
+ width:2px;
909
+ content:"";
910
+ background-color:var(--tds-sidenav-item-nested-border-color);
911
+ transition:var(--tds-sidenav-item-transition);
866
912
  }
867
913
 
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{
914
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
915
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
916
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
917
+ z-index:-1;
918
+ height:100%;
874
919
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
920
+ background-color:var(--tds-sidenav-item-nested-background);
921
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
922
+ transition:var(--tds-sidenav-item-transition);
877
923
  }
878
924
 
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
- }
925
+ :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)){
926
+ display:block;
927
+ text-align:left;
928
+ white-space:normal;
883
929
  }
884
930
 
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
- }
931
+ :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{
932
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
934
+ }
893
935
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
936
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
937
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
938
+ }
897
939
 
898
- .tds-page-header__primary{
940
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
941
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
942
+ font-weight:var(--t-font-weight-medium);
943
+ }
944
+
945
+ .tds-sidenav-responsive-header{
946
+ display:flex;
947
+ gap:var(--t-spacing-2);
948
+ align-items:center;
899
949
  width:100%;
900
950
  }
901
951
 
902
- .tds-page-header__primary h1{
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
953
+ order:0;
954
+ }
955
+
956
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
957
+ flex:1;
958
+ order:1;
903
959
  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;
960
+ font-size:var(--t-font-size-lg);
961
+ font-weight:var(--t-font-weight-medium);
962
+ color:var(--t-text-color-headline);
909
963
  }
910
964
 
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%;
965
+ @media (max-width: 719px){
966
+ .tds-sidenav-collapse{
967
+ z-index:10001;
968
+ display:none;
969
+ max-width:min(448px, calc(100vw - 48px));
970
+ padding:0;
971
+ margin:12px 0;
972
+ position-area:bottom span-right;
973
+ overflow:hidden;
974
+ outline:0;
975
+ background:var(--t-surface-color-card);
976
+ border:0;
977
+ border-radius:6px;
978
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
979
+ opacity:var(--tds-sidenav-collapse-open-opacity);
980
+ transform:var(--tds-sidenav-collapse-open-transform);
981
+ transition:var(--tds-sidenav-collapse-transition-enter);
982
+ will-change:transform;
917
983
  }
918
984
 
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;
985
+ .tds-sidenav-scroll-container{
986
+ --webkit-overflow-scrolling:touch;
987
+ display:block;
988
+ width:100%;
989
+ height:-moz-fit-content;
990
+ height:fit-content;
991
+ padding:var(--t-spacing-2);
992
+ overflow-y:auto;
924
993
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
994
+
995
+ .tds-sidenav-item :is(a, button) :is(.prefix){
996
+ display:none;
997
+ }
998
+ @supports selector(:popover-open){
999
+ .tds-sidenav-collapse:popover-open{
1000
+ display:flex;
927
1001
  }
928
1002
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
1003
+ .tds-sidenav-collapse:not(:popover-open){
1004
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1005
+ transition:var(--tds-sidenav-collapse-transition-exit);
931
1006
  }
932
- }
933
1007
 
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
- }
1008
+ @starting-style{
1009
+ .tds-sidenav-collapse:popover-open{
1010
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1011
+ transform:var(--tds-sidenav-collapse-closed-transform);
1012
+ }
1013
+ }
1014
+ }
1015
+ @supports not selector(:popover-open){
1016
+ .tds-sidenav-collapse.\:popover-open{
1017
+ display:flex;
1018
+ }
944
1019
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1020
+ .tds-sidenav-collapse:not(.\:popover-open){
1021
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1022
+ transition:var(--tds-sidenav-collapse-transition-exit);
1023
+ }
949
1024
  }
1025
+ }
950
1026
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1027
+ @media (min-width: 720px){
1028
+ .tds-sidenav-responsive-header{
1029
+ display:none;
954
1030
  }
955
1031
  }
956
1032
 
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1034
+ display:none;
1035
+ }
957
1036
 
958
- @media (prefers-reduced-motion: no-preference){
1037
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1038
+ display:block;
1039
+ }
959
1040
 
960
- :root{
961
- interpolate-size:allow-keywords;
962
- }
1041
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1042
+ display:flex;
1043
+ flex-direction:column;
1044
+ }
1045
+
1046
+ @layer t-critical{
1047
+ tds-page-header:not(.hydrated){
1048
+ display:none;
963
1049
  }
1050
+ }
964
1051
 
965
- @layer tds-component{
966
- tds-sidenav,
967
- .tds-sidenav{
968
- --tds-sidenav-indent:12px;
969
- --tds-sidenav-item-depth:0;
970
-
971
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
972
-
973
- --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;
974
- --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;
975
- --tds-sidenav-collapse-closed-opacity:0;
976
- --tds-sidenav-collapse-open-opacity:1;
977
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
- --tds-sidenav-collapse-open-transform:translateY(0);
1052
+ @layer t-component{
1053
+ .tds-page-header{
1054
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
+ --tds-page-header-color:var(--t-text-color);
1057
+ --tds-page-header-bottom-border-color:transparent;
1058
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1059
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
+ --tds-page-header-padding-x:var(--t-spacing-2);
1061
+ --tds-page-header-padding-y:var(--t-spacing-2);
1062
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1064
+ --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%);
1065
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
+ --tds-page-header-nav-item-border-width:1px;
979
1070
 
980
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1071
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
984
1073
 
985
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
- --tds-sidenav-item-nested-background-selected:transparent;
1074
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
988
1077
 
989
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1078
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
992
1080
 
993
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
995
- }
1081
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
996
1084
 
997
- @media (prefers-reduced-motion: reduce){
998
- tds-sidenav,
999
- .tds-sidenav{
1000
- --tds-sidenav-collapse-transition-enter:none;
1001
- --tds-sidenav-collapse-transition-exit:none;
1002
- --tds-sidenav-collapse-closed-transform:none;
1003
- --tds-sidenav-collapse-open-transform:none;
1085
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1004
1090
  }
1005
- }
1006
1091
 
1007
- .tds-sidenav--theme-gray{
1008
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1092
+ .tds-page-header--profile{
1093
+ --tds-page-header-padding-y:20px;
1013
1094
  }
1014
- }
1015
1095
 
1016
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
- display:flex;
1096
+ @supports (color: light-dark(#fff, #000)){
1097
+ .tds-page-header{
1098
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1100
+ }
1018
1101
  }
1019
1102
 
1020
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
- flex-direction:column;
1022
- gap:var(--t-spacing-half);
1023
- width:100%;
1103
+ @media (min-width: 600px){
1104
+ .tds-page-header{
1105
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
+ --tds-page-header-color:var(--t-text-color-secondary);
1107
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1108
+ --tds-page-header-padding-x:var(--t-spacing-3);
1109
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1111
+ --tds-page-header-nav-background:transparent;
1112
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
+ --tds-page-header-nav-item-border-width:1px;
1114
+ --tds-page-header-nav-item-color:var(--t-text-color);
1115
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1117
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1118
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1119
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1120
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1121
+ }
1024
1122
  }
1025
-
1026
- .tds-sidenav-section-list{
1027
- width:100%;
1028
- padding:0;
1029
- margin:0;
1030
- list-style:none;
1031
1123
  }
1032
1124
 
1033
- .tds-sidenav-section-header{
1125
+ .tds-page-header{
1034
1126
  display:flex;
1035
- align-items:baseline;
1036
- justify-content:space-between;
1037
- padding-top:var(--t-spacing-2);
1127
+ flex-direction:column;
1128
+ padding-top:var(--tds-page-header-padding-y);
1129
+ color:var(--tds-page-header-color);
1130
+ background:var(--tds-page-header-background-color);
1131
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1038
1132
  }
1039
1133
 
1040
- .tds-sidenav-section-header h2{
1041
- margin:0;
1042
- font-size:var(--t-font-size-sm);
1043
- font-weight:var(--t-font-weight-semibold);
1044
- line-height:1.35;
1045
- color:var(--t-text-color-secondary);
1046
- text-transform:uppercase;
1134
+ .tds-page-header:not(.has-nav){
1135
+ padding-bottom:var(--tds-page-header-padding-y);
1047
1136
  }
1048
1137
 
1049
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
- padding-top:0;
1138
+ .tds-page-header.inactive{
1139
+ background:var(--tds-page-header-background-color-inactive);
1051
1140
  }
1052
1141
 
1053
- .tds-sidenav-section-header .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
1054
- display:flex;
1055
- gap:var(--t-spacing-half);
1056
- align-items:center;
1142
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1143
+ width:100%;
1057
1144
  }
1058
- .tds-sidenav-section-actions,
1059
- .tds-sidenav-section [slot="section-actions"]{
1060
- display:flex;
1061
- gap:12px;
1062
- align-items:center;
1063
- min-height:42px;
1064
- padding:var(--t-spacing-1) 0;
1065
- }
1066
- .tds-sidenav-section-label-actions > [slot="label-actions"],
1067
- .tds-sidenav-section-actions > [slot="section-actions"]{
1068
- display:contents;
1069
- }
1070
-
1071
- .tds-sidenav-section-list,
1072
- .tds-sidenav-item{
1073
- width:100%;
1074
- padding:0;
1075
- margin:0;
1076
- }
1077
1145
 
1078
- .tds-sidenav-item :is(a,button){
1079
- position:relative;
1146
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1080
1147
  display:flex;
1081
- gap:12px;
1082
- align-items:center;
1083
- width:100%;
1084
- padding:12px;
1085
- overflow:hidden;
1086
- font-size:var(--t-font-size-sm);
1087
- line-height:18px;
1088
- color:var(--t-text-color-headline);
1089
- white-space:nowrap;
1090
- text-decoration:none;
1091
- -webkit-appearance:none;
1092
- -moz-appearance:none;
1093
- appearance:none;
1094
- cursor:pointer;
1095
- background-color:var(--tds-sidenav-item-background, transparent);
1096
- border:0;
1097
- border-radius:var(--t-border-radius);
1098
- transition:var(--tds-sidenav-item-transition);
1148
+ flex-flow:row wrap;
1149
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1150
+ align-items:flex-start;
1151
+ justify-content:flex-start;
1152
+ min-width:0;
1099
1153
  }
1100
1154
 
1101
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1102
- display:block;
1103
- flex:1;
1104
- overflow:hidden;
1105
- text-overflow:ellipsis;
1106
- text-align:left;
1107
- white-space:nowrap;
1155
+ :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{
1156
+ display:flex;
1157
+ gap:var(--tds-page-header-nav-gap);
1158
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1159
+ margin:0 0 -1px;
1160
+ overflow:auto;
1161
+ list-style:none;
1162
+ background:var(--tds-page-header-nav-background);
1108
1163
  }
1109
1164
 
1110
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1111
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1112
- color:var(--t-text-color-headline);
1165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1166
+ position:relative;
1167
+ display:inline-flex;
1168
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1169
+ font-size:var(--t-font-size-sm);
1170
+ line-height:22px;
1171
+ color:var(--tds-page-header-nav-item-color);
1172
+ white-space:nowrap;
1113
1173
  text-decoration:none;
1174
+ -webkit-appearance:none;
1175
+ -moz-appearance:none;
1176
+ appearance:none;
1177
+ cursor:pointer;
1178
+ outline-offset:-2px;
1179
+ background-color:var(--tds-page-header-nav-item-background-color);
1180
+ background-clip:padding-box;
1181
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1182
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1183
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1114
1184
  }
1115
1185
 
1116
- :is(.tds-sidenav-item :is(a,button)):active{
1117
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1118
- }
1119
-
1120
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1121
- overflow:hidden;
1122
- color:var(--tds-sidenav-item-icon-color);
1123
- }
1124
-
1125
- :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{
1126
- display:block;
1127
- width:var(--tds-sidenav-item-icon-size);
1128
- height:var(--tds-sidenav-item-icon-size);
1186
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1187
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1188
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1189
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1190
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1129
1191
  }
1130
1192
 
1131
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1132
- --tds-sidenav-indent:19px;
1133
- }
1134
-
1135
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1136
- visibility:visible;
1137
- block-size:auto;
1138
- opacity:1;
1139
- }
1193
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1194
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1195
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1196
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1197
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1198
+ }
1140
1199
 
1141
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1142
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1143
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1144
-
1145
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1146
- font-weight:var(--t-font-weight-semibold);
1147
- }
1148
-
1149
- .tds-sidenav-item:has(.tds-sidenav-section){
1150
- display:flex;
1151
- flex-direction:column;
1152
- gap:var(--t-spacing-half);
1153
- }
1154
-
1155
- .tds-sidenav-item .tds-sidenav-section-list{
1156
- --tds-sidenav-item-depth:1;
1157
- gap:0;
1158
- }
1200
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1201
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1202
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1203
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1204
+ }
1159
1205
 
1160
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1161
- visibility:hidden;
1162
- block-size:0;
1163
- overflow-y:clip;
1164
- opacity:0;
1165
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1166
- }
1206
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1207
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1208
+ color:var(--tds-page-header-nav-item-color-disabled);
1209
+ cursor:not-allowed;
1210
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1211
+ opacity:1;
1212
+ }
1167
1213
 
1168
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1169
- --tds-sidenav-item-depth:2;
1170
- }
1214
+ @media (min-width: 600px){
1215
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1216
+ position:absolute;
1217
+ inset:auto -1px -1px;
1218
+ height:1px;
1219
+ pointer-events:none;
1220
+ content:"";
1221
+ background-color:var(--tds-page-header-bottom-border-color);
1222
+ }
1223
+ }
1171
1224
 
1172
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1173
- min-height:var(--t-element-size-2xl);
1174
- padding-block:9px;
1175
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1176
- line-height:1;
1177
- background-color:transparent;
1225
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1226
+ position:relative;
1178
1227
  }
1179
1228
 
1180
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1181
- position:absolute;
1182
- top:0;
1183
- bottom:0;
1184
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1185
- width:2px;
1186
- content:"";
1187
- background-color:var(--tds-sidenav-item-nested-border-color);
1188
- transition:var(--tds-sidenav-item-transition);
1229
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1230
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1231
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1189
1232
  }
1190
1233
 
1191
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1234
+ :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{
1192
1235
  position:absolute;
1193
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1194
- z-index:-1;
1195
- height:100%;
1236
+ top:-5px;
1237
+ right:-2px;
1238
+ width:10px;
1239
+ height:10px;
1196
1240
  content:"";
1197
- background-color:var(--tds-sidenav-item-nested-background);
1198
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1199
- transition:var(--tds-sidenav-item-transition);
1200
- }
1201
-
1202
- :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)){
1203
- display:block;
1204
- text-align:left;
1205
- white-space:normal;
1206
- }
1207
-
1208
- :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{
1209
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1210
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1241
+ background:var(--tds-page-header-nav-item-indicator-color);
1242
+ border-radius:50%;
1211
1243
  }
1212
1244
 
1213
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1214
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1245
+ @media (prefers-reduced-motion: no-preference){
1246
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1247
+ animation:indicator-pulse 1.25s ease infinite;
1248
+ }
1215
1249
  }
1216
1250
 
1217
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1218
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1219
- font-weight:var(--t-font-weight-medium);
1220
- }
1221
-
1222
- .tds-sidenav-responsive-header{
1223
- display:flex;
1224
- gap:var(--t-spacing-2);
1225
- align-items:center;
1226
- width:100%;
1227
- }
1228
-
1229
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1230
- order:0;
1231
- }
1232
-
1233
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1234
- flex:1;
1235
- order:1;
1236
- margin:0;
1237
- font-size:var(--t-font-size-lg);
1238
- font-weight:var(--t-font-weight-medium);
1239
- color:var(--t-text-color-headline);
1240
- }
1241
-
1242
- @media (max-width: 719px){
1243
- .tds-sidenav-collapse{
1244
- z-index:10001;
1245
- display:none;
1246
- max-width:min(448px, calc(100vw - 48px));
1247
- padding:0;
1248
- margin:12px 0;
1249
- position-area:bottom span-right;
1250
- overflow:hidden;
1251
- outline:0;
1252
- background:var(--t-surface-color-card);
1253
- border:0;
1254
- border-radius:6px;
1255
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1256
- opacity:var(--tds-sidenav-collapse-open-opacity);
1257
- transform:var(--tds-sidenav-collapse-open-transform);
1258
- transition:var(--tds-sidenav-collapse-transition-enter);
1259
- will-change:transform;
1260
- }
1261
-
1262
- .tds-sidenav-scroll-container{
1263
- --webkit-overflow-scrolling:touch;
1264
- display:block;
1265
- width:100%;
1266
- height:-moz-fit-content;
1267
- height:fit-content;
1268
- padding:var(--t-spacing-2);
1269
- overflow-y:auto;
1270
- }
1271
-
1272
- .tds-sidenav-item :is(a, button) :is(.prefix){
1273
- display:none;
1274
- }
1275
- @supports selector(:popover-open){
1276
- .tds-sidenav-collapse:popover-open{
1277
- display:flex;
1278
- }
1279
-
1280
- .tds-sidenav-collapse:not(:popover-open){
1281
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1282
- transition:var(--tds-sidenav-collapse-transition-exit);
1283
- }
1284
-
1285
- @starting-style{
1286
- .tds-sidenav-collapse:popover-open{
1287
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1288
- transform:var(--tds-sidenav-collapse-closed-transform);
1289
- }
1290
- }
1291
- }
1292
- @supports not selector(:popover-open){
1293
- .tds-sidenav-collapse.\:popover-open{
1294
- display:flex;
1295
- }
1296
-
1297
- .tds-sidenav-collapse:not(.\:popover-open){
1298
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1299
- transition:var(--tds-sidenav-collapse-transition-exit);
1300
- }
1301
- }
1302
- }
1303
-
1304
- @media (min-width: 720px){
1305
- .tds-sidenav-responsive-header{
1306
- display:none;
1307
- }
1308
- }
1309
-
1310
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1311
- display:none;
1312
- }
1313
-
1314
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1315
- display:block;
1316
- }
1317
-
1318
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1319
- display:flex;
1320
- flex-direction:column;
1321
- }
1322
-
1323
- .tds-button-group{
1324
- display:inline-flex;
1325
- }
1326
- .tds-button-group > .tds-btn{
1327
- --tds-button-group-item-z-index:1;
1328
-
1329
- position:relative;
1330
- z-index:var(--tds-button-group-item-z-index);
1331
- border-radius:0;
1332
- }
1333
- :is(.tds-button-group > .tds-btn):not(:first-child){
1334
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1335
- }
1336
- :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{
1337
- position:absolute;
1338
- inset-block:calc(var(--tds-btn-border-width) * -1);
1339
- width:var(--tds-btn-border-width);
1340
- pointer-events:none;
1341
- content:"";
1342
- background-color:var(--t-border-color-white);
1343
- }
1344
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1345
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1346
- }
1347
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1348
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1349
- }
1350
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1351
- --tds-button-group-item-z-index:2;
1352
- }
1353
- :is(.tds-button-group > .tds-btn):focus-visible{
1354
- --tds-button-group-item-z-index:5;
1355
- }
1356
- .tds-button-group > .tds-btn:first-child{
1357
- border-start-start-radius:var(--tds-btn-border-radius);
1358
- border-end-start-radius:var(--tds-btn-border-radius);
1359
- }
1360
- .tds-button-group > .tds-btn:last-child{
1361
- border-start-end-radius:var(--tds-btn-border-radius);
1362
- border-end-end-radius:var(--tds-btn-border-radius);
1363
- }
1364
-
1365
- .tds-checkbox{
1366
- --tds-checkbox-font-size:var(--t-font-size-md);
1367
- --tds-checkbox-cursor:pointer;
1368
- --tds-checkbox-line-height:1.4;
1369
- --tds-checkbox-transition-property:background-color, border-color;
1370
-
1371
- --tds-checkbox-input-size:var(--t-element-size-md);
1372
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1373
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1374
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1375
-
1376
- --tds-checkbox-input-icon:none;
1377
- --tds-checkbox-input-icon-visibility:hidden;
1378
- --tds-checkbox-input-icon-opacity:0;
1379
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1380
-
1381
- --tds-checkbox-label-color:var(--t-form-color);
1382
-
1383
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1384
- --tds-checkbox-description-line-height:1.35;
1385
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1386
- --tds-checkbox-description-invalid-icon-display:none;
1387
-
1388
- position:relative;
1389
- display:inline-grid;
1390
- grid-template-columns:auto;
1391
- grid-auto-columns:1fr;
1392
- gap:var(--t-spacing-fourth) 0;
1393
- line-height:var(--tds-checkbox-line-height);
1394
- -webkit-user-select:none;
1395
- -moz-user-select:none;
1396
- user-select:none;
1397
- }
1398
-
1399
- .tds-checkbox label{
1400
- grid-area:1 / 2;
1401
- padding-inline-start:var(--t-spacing-1);
1402
- font-size:var(--tds-checkbox-font-size);
1403
- font-weight:var(--t-font-weight-normal);
1404
- color:var(--tds-checkbox-label-color);
1405
- cursor:var(--tds-checkbox-cursor);
1406
- }
1407
-
1408
- .tds-checkbox tds-indeterminate{
1409
- display:flex;
1410
- }
1411
-
1412
- .tds-checkbox input[type="checkbox"]{
1413
- position:relative;
1414
- width:1em;
1415
- height:1em;
1416
- margin:calc((1lh - 1em) / 2) 0 0;
1417
- font-size:var(--tds-checkbox-font-size);
1418
- line-height:inherit;
1419
- -webkit-appearance:none;
1420
- -moz-appearance:none;
1421
- appearance:none;
1422
- cursor:var(--tds-checkbox-cursor);
1423
- background-color:var(--tds-checkbox-input-background-color);
1424
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1425
- border-radius:var(--tds-checkbox-input-border-radius);
1426
- transition-timing-function:var(--t-ease-in-out);
1427
- transition-duration:var(--t-duration-200);
1428
- transition-property:var(--tds-checkbox-transition-property);
1429
- }
1430
-
1431
- :is(.tds-checkbox input[type="checkbox"])::before{
1432
- position:absolute;
1433
- top:50%;
1434
- left:50%;
1435
- visibility:var(--tds-checkbox-input-icon-visibility);
1436
- width:100%;
1437
- height:100%;
1438
- content:"";
1439
- background-color:var(--tds-checkbox-input-icon-fill);
1440
- border-radius:var(--tds-checkbox-input-border-radius);
1441
- opacity:var(--tds-checkbox-input-icon-opacity);
1442
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1443
- mask-image:var(--tds-checkbox-input-icon);
1444
- -webkit-mask-repeat:no-repeat;
1445
- mask-repeat:no-repeat;
1446
- -webkit-mask-size:contain;
1447
- mask-size:contain;
1448
- transform:translate(-50%, -50%);
1449
- }
1450
-
1451
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1452
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1453
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1454
- }
1455
-
1456
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1457
- outline:var(--t-focus-ring-outline);
1458
- outline-offset:var(--t-focus-ring-offset);
1459
- }
1460
-
1461
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1462
- pointer-events:none;
1463
- }
1464
-
1465
- @media (prefers-reduced-motion: reduce){
1466
-
1467
- .tds-checkbox input[type="checkbox"]{
1468
- --tds-checkbox-transition-property:none;
1469
- }
1470
- }
1471
-
1472
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1473
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1474
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1475
- --tds-checkbox-input-icon-visibility:visible;
1476
- --tds-checkbox-input-icon-opacity:1;
1477
- }
1478
-
1479
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1480
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1481
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1482
- }
1483
-
1484
- .tds-checkbox:has(input:checked){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
- }
1487
-
1488
- .tds-checkbox:has(input:indeterminate){
1489
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1490
- }
1491
-
1492
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1493
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1494
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1495
- --tds-checkbox-description-invalid-icon-display:inline-block;
1496
- }
1497
-
1498
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1499
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1500
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1501
- }
1502
-
1503
- :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{
1504
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1505
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1506
- }
1507
-
1508
- :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){
1509
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1510
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1511
- }
1512
-
1513
- .tds-checkbox:has(input:required) label::after{
1514
- margin-left:.25ch;
1515
- color:var(--t-text-color-status-error);
1516
- content:"*";
1517
- }
1518
-
1519
- .tds-checkbox:has(input:disabled){
1520
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1521
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1522
-
1523
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1524
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1525
- --tds-checkbox-cursor:not-allowed;
1526
- }
1527
-
1528
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1529
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1530
- }
1531
-
1532
- .tds-checkbox-description{
1533
- display:flex;
1534
- grid-area:2 / 2;
1535
- gap:var(--t-spacing-half);
1536
- align-items:flex-start;
1537
- padding-inline-start:var(--t-spacing-1);
1538
- margin:0;
1539
- font-size:var(--tds-checkbox-description-font-size);
1540
- line-height:var(--tds-checkbox-description-line-height);
1541
- color:var(--tds-checkbox-description-color);
1542
- cursor:text;
1543
- }
1544
-
1545
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1546
- display:var(--tds-checkbox-description-invalid-icon-display);
1547
- flex-shrink:0;
1548
- margin-top:calc(.5lh - .5em);
1549
- line-height:var(--tds-checkbox-description-line-height);
1550
- }
1551
-
1552
- .tds-checkbox--sm{
1553
- --tds-checkbox-line-height:1.35;
1554
- --tds-checkbox-input-size:var(--t-element-size-sm);
1555
- --tds-checkbox-font-size:var(--t-font-size-sm);
1556
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1557
- --tds-checkbox-description-line-height:1.3;
1558
- }
1559
-
1560
- .tds-checkbox-group{
1561
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1562
- --tds-checkbox-group-line-height:1.4;
1563
- --tds-checkbox-group-gap:var(--t-spacing-1);
1564
-
1565
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1566
- --tds-checkbox-group-description-line-height:1.35;
1567
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1568
- --tds-checkbox-group-description-invalid-icon-display:none;
1251
+ .tds-page-header__title-bar{
1569
1252
  display:flex;
1570
1253
  flex-direction:column;
1571
- gap:0;
1572
- padding:0;
1573
- margin:0;
1574
-
1575
- font-size:var(--tds-checkbox-group-font-size);
1576
- line-height:var(--tds-checkbox-group-line-height);
1577
- border:0;
1578
- }
1579
-
1580
- .tds-checkbox-group legend{
1581
- float:left;
1582
- padding:0;
1583
- margin:0;
1584
- }
1585
-
1586
- .tds-checkbox-group[aria-invalid="true"]{
1587
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1588
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1589
- }
1590
-
1591
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1592
- margin-left:.25ch;
1593
- color:var(--t-text-color-status-error);
1594
- content:"*";
1595
- }
1596
-
1597
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1598
- content:none;
1599
- }
1600
-
1601
- .tds-checkbox-group-fields{
1602
- display:flex;
1603
- flex-direction:column;
1604
- gap:var(--tds-checkbox-group-gap);
1605
- align-items:flex-start;
1606
- margin-top:var(--t-spacing-1);
1607
- }
1608
-
1609
- .tds-checkbox-group-description{
1610
- display:flex;
1611
- gap:var(--t-spacing-half);
1254
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1612
1255
  align-items:flex-start;
1613
- margin:var(--t-spacing-fourth) 0 0;
1614
- font-size:var(--tds-checkbox-group-description-font-size);
1615
- line-height:var(--tds-checkbox-group-description-line-height);
1616
- color:var(--tds-checkbox-group-description-color);
1617
- cursor:text;
1618
- }
1619
-
1620
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1621
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1622
- flex-shrink:0;
1623
- margin-top:calc(.5lh - .5em);
1624
- line-height:var(--tds-checkbox-group-description-line-height);
1625
- }
1626
-
1627
- .tds-checkbox-group--sm{
1628
- --tds-checkbox-group-line-height:1.35;
1629
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1630
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1631
- --tds-checkbox-group-description-line-height:1.3;
1632
- }
1633
-
1634
- .tds-currency-input-control{
1635
- display:flex;
1636
- gap:var(--t-spacing-half);
1637
- align-items:center;
1638
- inline-size:100%;
1639
- min-block-size:var(--tds-field-min-height);
1640
- padding-inline:var(--tds-field-padding-inline);
1641
- font-size:var(--tds-field-font-size);
1642
- color:var(--tds-field-color);
1643
- cursor:text;
1644
- outline:var(--t-focus-ring-width) solid transparent;
1645
- background-color:var(--tds-field-background-color);
1646
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1647
- border-radius:var(--t-form-border-radius);
1648
- transition-timing-function:var(--t-ease-in-out);
1649
- transition-duration:var(--t-duration-200);
1650
- transition-property:background-color, border-color, outline-color, outline-offset;
1651
- }
1652
-
1653
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1654
- border-color:var(--tds-field-border-color-hover);
1655
- }
1656
-
1657
- .tds-currency-input-control:has(input:focus){
1658
- outline-color:var(--t-focus-ring-color);
1659
- outline-offset:var(--t-focus-ring-offset);
1660
- border-color:var(--tds-field-border-color-active);
1661
- }
1662
-
1663
- .tds-currency-input-control input{
1664
- flex:1;
1665
- min-inline-size:0;
1666
- padding:0;
1667
- font-family:inherit;
1668
- font-size:inherit;
1669
- color:inherit;
1670
- -webkit-appearance:none;
1671
- -moz-appearance:none;
1672
- appearance:none;
1673
- outline:0;
1674
- background-color:transparent;
1675
- border:0;
1676
- }
1677
-
1678
- :is(.tds-currency-input-control input)::-moz-placeholder{
1679
- color:var(--tds-field-placeholder-color);
1680
- -moz-user-select:none;
1681
- user-select:none;
1682
- }
1683
-
1684
- :is(.tds-currency-input-control input)::placeholder{
1685
- color:var(--tds-field-placeholder-color);
1686
- -webkit-user-select:none;
1687
- -moz-user-select:none;
1688
- user-select:none;
1689
- }
1690
-
1691
- .tds-currency-input-control .tds-currency-input-prefix{
1692
- flex-shrink:0;
1693
- color:var(--t-text-color-secondary);
1694
- pointer-events:none;
1695
- -webkit-user-select:none;
1696
- -moz-user-select:none;
1697
- user-select:none;
1698
- }
1699
-
1700
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1701
- --tds-field-background-color:var(--t-form-background-color-error);
1702
- --tds-field-border-color:var(--t-form-border-color-error);
1703
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1704
- }
1705
-
1706
- .tds-currency-input-control:has(:disabled){
1707
- --tds-field-border-color:var(--t-form-border-color-disabled);
1708
- --tds-field-background-color:var(--t-form-background-color-disabled);
1709
- --tds-field-color:var(--t-form-color-disabled);
1710
-
1711
- cursor:not-allowed;
1712
- }
1713
-
1714
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1715
- color:var(--tds-field-color);
1716
- }
1717
-
1718
- .tds-currency-input-control:has([readonly]){
1719
- --tds-field-border-color:var(--t-form-border-color-readonly);
1720
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1721
- --tds-field-background-color:var(--t-form-background-color-readonly);
1722
- --tds-field-color:var(--t-form-color-readonly);
1723
- }
1724
-
1725
- .tds-currency-input-control:has([readonly]):has(input:focus){
1726
- border-color:var(--t-form-border-color-hover);
1727
- }
1728
- .tds-currency-input-currency-name--hidden{
1729
- position:absolute;
1730
- width:1px;
1731
- height:1px;
1732
- overflow:hidden;
1733
- white-space:nowrap;
1734
- clip-path:inset(50%);
1735
- }
1736
-
1737
-
1738
- :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{
1739
- -webkit-appearance:none;
1740
- appearance:none;
1741
- }
1742
-
1743
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1744
- inline-size:1em;
1745
- block-size:2em;
1746
- }
1747
-
1748
- [type="file"]:is(.tds-input input){
1749
- padding-block:var(--t-spacing-half);
1750
- padding-inline-start:var(--t-spacing-half);
1751
- }
1752
-
1753
- [type="file"]:is(.tds-input input):not(:disabled){
1754
- color:var(--t-text-color-secondary);
1755
- }
1756
-
1757
- [type="file"]:is(.tds-input input)::file-selector-button{
1758
- --_file-btn-padding-block:3px;
1759
-
1760
- padding-block:var(--_file-btn-padding-block);
1761
- padding-inline:12px;
1762
- margin-inline-end:12px;
1763
- font:inherit;
1764
- 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));
1765
- color:var(--t-text-color-status-neutral);
1766
- cursor:pointer;
1767
- background-color:var(--t-fill-color-button-neutral-solid);
1768
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1769
- border-radius:var(--t-border-radius-md);
1770
- transition-timing-function:var(--t-ease-in-out);
1771
- transition-duration:var(--t-duration-200);
1772
- transition-property:color, background-color, border-color;
1773
- }
1774
-
1775
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1776
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1777
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1778
- }
1779
-
1780
- [type="file"]:is(.tds-input input):active::file-selector-button{
1781
- background-color:var(--t-fill-color-button-neutral-solid-active);
1782
- border-color:var(--t-fill-color-button-neutral-solid-active);
1783
- }
1784
-
1785
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1786
- color:var(--t-text-color-disabled);
1787
- pointer-events:none;
1788
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1789
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1790
- }
1791
- @supports (field-sizing: content){
1792
- .tds-input--auto-width{
1793
- inline-size:-moz-fit-content;
1794
- inline-size:fit-content;
1795
- min-inline-size:min(100%, 122px);
1796
- }
1797
-
1798
- .tds-input--auto-width input{
1799
- field-sizing:content;
1800
- inline-size:auto;
1801
- }
1802
- }
1803
-
1804
- .tds-popover{
1805
- max-inline-size:24rem;
1806
- overflow:auto;
1807
- overscroll-behavior:none;
1808
- outline:0;
1809
- scrollbar-color:#0004 var(--t-surface-color-card);
1810
- scrollbar-width:thin;
1811
- background:var(--t-surface-color-card);
1812
- background-clip:padding-box;
1813
- border:1px solid var(--t-border-color);
1814
- border-radius:var(--t-border-radius);
1815
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1256
+ justify-content:space-between;
1257
+ padding:0 var(--tds-page-header-padding-x);
1816
1258
  }
1817
1259
 
1818
- @media (prefers-reduced-motion: no-preference){
1819
- .tds-popover[data-entering]{
1820
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1821
- }
1260
+ .tds-page-header--profile > .tds-page-header__title-bar{
1261
+ align-items:center;
1262
+ }
1822
1263
 
1823
- .tds-popover[data-exiting]{
1824
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1825
- }
1264
+ .tds-page-header__primary{
1265
+ width:100%;
1266
+ }
1826
1267
 
1827
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1828
- will-change:opacity, transform;
1268
+ .tds-page-header__primary h1{
1269
+ margin:0;
1270
+ font-size:var(--tds-page-header-headline-font-size);
1271
+ font-weight:var(--t-font-weight-normal);
1272
+ line-height:32px;
1273
+ color:var(--tds-page-header-headline-color);
1274
+ overflow-wrap:break-word;
1275
+ }
1276
+
1277
+ @media (min-width: 960px){
1278
+ .tds-page-header__primary{
1279
+ flex:1 1 max-content;
1280
+ width:auto;
1281
+ min-width:0;
1282
+ max-width:100%;
1283
+ }
1284
+
1285
+ .tds-page-header__title-bar,
1286
+ .tds-page-header--profile .tds-page-header__title-bar{
1287
+ flex-flow:row nowrap;
1288
+ row-gap:12px;
1289
+ align-items:flex-start;
1290
+ }
1291
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1292
+ width:auto;
1829
1293
  }
1830
1294
 
1831
- @keyframes tds-popover{
1832
- from{
1833
- opacity:0;
1834
- transform:translateY(-8px);
1295
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1296
+ justify-content:flex-end;
1835
1297
  }
1836
- }
1837
1298
  }
1838
1299
 
1839
- .tds-popover-content{
1840
- display:flex;
1841
- flex-direction:column;
1842
- padding:var(--t-spacing-1);
1843
- outline:0;
1300
+ .tds-page-header-phone,
1301
+ .tds-page-header-email{
1302
+ color:var(--tds-page-header-color);
1303
+ white-space:nowrap;
1304
+ }
1305
+ .tds-page-header-email{
1306
+ max-width:100%;
1307
+ overflow:hidden;
1308
+ text-overflow:ellipsis;
1844
1309
  }
1845
1310
 
1846
- .tds-pane{
1847
- --tds-pane-background-color:var(--t-surface-color-card);
1848
- --tds-pane-border-radius:var(--t-border-radius-lg);
1849
- --tds-pane-border-color:var(--t-border-color);
1850
-
1851
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
1852
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1311
+ @keyframes indicator-pulse{
1312
+ 0%{
1313
+ opacity:.3;
1314
+ transform:scale(.9);
1315
+ }
1853
1316
 
1854
- --tds-pane-title-color:var(--t-text-color-headline);
1855
- --tds-pane-title-font-size:var(--t-font-size-lg);
1856
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
1857
- --tds-pane-title-line-height:1.4;
1317
+ 100%{
1318
+ opacity:0;
1319
+ transform:scale(1.75);
1320
+ }
1321
+ }
1858
1322
 
1859
- --tds-pane-body-padding:var(--t-spacing-3);
1323
+ .tds-button-group{
1324
+ display:inline-flex;
1325
+ }
1326
+ .tds-button-group > .tds-btn{
1327
+ --tds-button-group-item-z-index:1;
1860
1328
 
1861
- --tds-pane-footer-padding-block:var(--t-spacing-2);
1862
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1329
+ position:relative;
1330
+ z-index:var(--tds-button-group-item-z-index);
1331
+ border-radius:0;
1332
+ }
1333
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1334
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1335
+ }
1336
+ :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{
1337
+ position:absolute;
1338
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1339
+ width:var(--tds-btn-border-width);
1340
+ pointer-events:none;
1341
+ content:"";
1342
+ background-color:var(--t-border-color-white);
1343
+ }
1344
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1345
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1346
+ }
1347
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1348
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1349
+ }
1350
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1351
+ --tds-button-group-item-z-index:2;
1352
+ }
1353
+ :is(.tds-button-group > .tds-btn):focus-visible{
1354
+ --tds-button-group-item-z-index:5;
1355
+ }
1356
+ .tds-button-group > .tds-btn:first-child{
1357
+ border-start-start-radius:var(--tds-btn-border-radius);
1358
+ border-end-start-radius:var(--tds-btn-border-radius);
1359
+ }
1360
+ .tds-button-group > .tds-btn:last-child{
1361
+ border-start-end-radius:var(--tds-btn-border-radius);
1362
+ border-end-end-radius:var(--tds-btn-border-radius);
1363
+ }
1863
1364
 
1864
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1865
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1365
+ .tds-checkbox-group{
1366
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1367
+ --tds-checkbox-group-line-height:1.4;
1368
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1866
1369
 
1867
- background:var(--tds-pane-background-color);
1868
- border-radius:var(--tds-pane-border-radius);
1869
- border:var(--t-border-width) solid var(--tds-pane-border-color);
1370
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1371
+ --tds-checkbox-group-description-line-height:1.35;
1372
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1373
+ --tds-checkbox-group-description-invalid-icon-display:none;
1870
1374
  display:flex;
1871
1375
  flex-direction:column;
1872
- }
1376
+ gap:0;
1377
+ padding:0;
1378
+ margin:0;
1873
1379
 
1874
- .tds-pane-header{
1875
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1876
- padding-block:var(--tds-pane-header-padding-block);
1877
- padding-inline:var(--tds-pane-header-padding-inline);
1380
+ font-size:var(--tds-checkbox-group-font-size);
1381
+ line-height:var(--tds-checkbox-group-line-height);
1382
+ border:0;
1878
1383
  }
1879
1384
 
1880
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
1881
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
1385
+ .tds-checkbox-group legend{
1386
+ float:left;
1387
+ padding:0;
1388
+ margin:0;
1882
1389
  }
1883
1390
 
1884
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
1885
- flex-basis:100%;
1886
- order:1;
1391
+ .tds-checkbox-group[aria-invalid="true"]{
1392
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1393
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1887
1394
  }
1888
1395
 
1889
- .tds-pane-header:has( > tds-helper-shelf){
1890
- row-gap:var(--tds-pane-header-padding-block);
1891
- padding-block-end:0;
1892
- }
1396
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1397
+ margin-left:.25ch;
1398
+ color:var(--t-text-color-status-error);
1399
+ content:"*";
1400
+ }
1893
1401
 
1894
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
1895
- font-size:var(--t-font-size-md);
1896
- margin-block-end:var(--tds-pane-header-padding-block);
1897
- }
1402
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1403
+ content:none;
1404
+ }
1898
1405
 
1899
- .tds-pane-title{
1900
- color:var(--tds-pane-title-color);
1901
- font-size:var(--tds-pane-title-font-size);
1902
- font-weight:var(--tds-pane-title-font-weight);
1903
- line-height:var(--tds-pane-title-line-height);
1904
- margin:0;
1406
+ .tds-checkbox-group-fields{
1407
+ display:flex;
1408
+ flex-direction:column;
1409
+ gap:var(--tds-checkbox-group-gap);
1410
+ align-items:flex-start;
1411
+ margin-top:var(--t-spacing-1);
1905
1412
  }
1906
1413
 
1907
- .tds-pane-body{
1908
- padding:var(--tds-pane-body-padding);
1414
+ .tds-checkbox-group-description{
1415
+ display:flex;
1416
+ gap:var(--t-spacing-half);
1417
+ align-items:flex-start;
1418
+ margin:var(--t-spacing-fourth) 0 0;
1419
+ font-size:var(--tds-checkbox-group-description-font-size);
1420
+ line-height:var(--tds-checkbox-group-description-line-height);
1421
+ color:var(--tds-checkbox-group-description-color);
1422
+ cursor:text;
1909
1423
  }
1910
1424
 
1911
- .tds-pane-footer{
1912
- padding-block-end:var(--tds-pane-footer-padding-block);
1913
- padding-inline:var(--tds-pane-footer-padding-inline);
1914
- }
1425
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1426
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1427
+ flex-shrink:0;
1428
+ margin-top:calc(.5lh - .5em);
1429
+ line-height:var(--tds-checkbox-group-description-line-height);
1430
+ }
1915
1431
 
1916
- .tds-pane-divider{
1917
- border:0;
1918
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
1919
- margin-block:var(--tds-pane-divider-margin-block);
1920
- margin-inline:var(--tds-pane-divider-margin-inline);
1432
+ .tds-checkbox-group--sm{
1433
+ --tds-checkbox-group-line-height:1.35;
1434
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1435
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1436
+ --tds-checkbox-group-description-line-height:1.3;
1921
1437
  }
1922
1438
 
1923
- .tds-pane-divider.tds-pane-divider--inset{
1924
- margin-inline:0;
1925
- }
1439
+ .tds-checkbox{
1440
+ --tds-checkbox-font-size:var(--t-font-size-md);
1441
+ --tds-checkbox-cursor:pointer;
1442
+ --tds-checkbox-line-height:1.4;
1443
+ --tds-checkbox-transition-property:background-color, border-color;
1926
1444
 
1927
- .tds-radio{
1928
- --tds-radio-font-size:var(--t-font-size-md);
1929
- --tds-radio-cursor:pointer;
1930
- --tds-radio-line-height:1.4;
1931
- --tds-radio-transition-property:border-width;
1445
+ --tds-checkbox-input-size:var(--t-element-size-md);
1446
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1448
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1932
1449
 
1933
- --tds-radio-input-size:var(--t-element-size-md);
1934
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1935
- --tds-radio-input-border-color:var(--t-form-border-color);
1936
- --tds-radio-input-border-width:var(--t-form-border-width);
1937
- --tds-radio-input-background-color:var(--t-form-background-color);
1450
+ --tds-checkbox-input-icon:none;
1451
+ --tds-checkbox-input-icon-visibility:hidden;
1452
+ --tds-checkbox-input-icon-opacity:0;
1453
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1938
1454
 
1939
- --tds-radio-label-color:var(--t-form-color);
1455
+ --tds-checkbox-label-color:var(--t-form-color);
1940
1456
 
1941
- --tds-radio-description-font-size:var(--t-font-size-sm);
1942
- --tds-radio-description-line-height:1.35;
1943
- --tds-radio-description-color:var(--t-text-color-secondary);
1457
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1458
+ --tds-checkbox-description-line-height:1.35;
1459
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1460
+ --tds-checkbox-description-invalid-icon-display:none;
1944
1461
 
1945
1462
  position:relative;
1946
1463
  display:inline-grid;
1947
1464
  grid-template-columns:auto;
1948
1465
  grid-auto-columns:1fr;
1949
1466
  gap:var(--t-spacing-fourth) 0;
1950
- line-height:var(--tds-radio-line-height);
1467
+ line-height:var(--tds-checkbox-line-height);
1951
1468
  -webkit-user-select:none;
1952
1469
  -moz-user-select:none;
1953
1470
  user-select:none;
1954
1471
  }
1955
1472
 
1956
- .tds-radio label{
1473
+ .tds-checkbox label{
1957
1474
  grid-area:1 / 2;
1958
1475
  padding-inline-start:var(--t-spacing-1);
1959
- font-size:var(--tds-radio-font-size);
1476
+ font-size:var(--tds-checkbox-font-size);
1960
1477
  font-weight:var(--t-font-weight-normal);
1961
- color:var(--tds-radio-label-color);
1962
- cursor:var(--tds-radio-cursor);
1478
+ color:var(--tds-checkbox-label-color);
1479
+ cursor:var(--tds-checkbox-cursor);
1963
1480
  }
1964
1481
 
1965
- .tds-radio input[type="radio"]{
1482
+ .tds-checkbox tds-indeterminate{
1483
+ display:flex;
1484
+ }
1485
+
1486
+ .tds-checkbox input[type="checkbox"]{
1966
1487
  position:relative;
1967
1488
  width:1em;
1968
1489
  height:1em;
1969
1490
  margin:calc((1lh - 1em) / 2) 0 0;
1970
- font-size:var(--tds-radio-font-size);
1491
+ font-size:var(--tds-checkbox-font-size);
1971
1492
  line-height:inherit;
1972
1493
  -webkit-appearance:none;
1973
1494
  -moz-appearance:none;
1974
1495
  appearance:none;
1975
- cursor:var(--tds-radio-cursor);
1976
- background-color:var(--tds-radio-input-background-color);
1977
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1978
- border-radius:var(--tds-radio-input-border-radius);
1496
+ cursor:var(--tds-checkbox-cursor);
1497
+ background-color:var(--tds-checkbox-input-background-color);
1498
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1499
+ border-radius:var(--tds-checkbox-input-border-radius);
1979
1500
  transition-timing-function:var(--t-ease-in-out);
1980
1501
  transition-duration:var(--t-duration-200);
1981
- transition-property:var(--tds-radio-transition-property);
1502
+ transition-property:var(--tds-checkbox-transition-property);
1982
1503
  }
1983
1504
 
1984
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1985
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1986
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1505
+ :is(.tds-checkbox input[type="checkbox"])::before{
1506
+ position:absolute;
1507
+ top:50%;
1508
+ left:50%;
1509
+ visibility:var(--tds-checkbox-input-icon-visibility);
1510
+ width:100%;
1511
+ height:100%;
1512
+ content:"";
1513
+ background-color:var(--tds-checkbox-input-icon-fill);
1514
+ border-radius:var(--tds-checkbox-input-border-radius);
1515
+ opacity:var(--tds-checkbox-input-icon-opacity);
1516
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1517
+ mask-image:var(--tds-checkbox-input-icon);
1518
+ -webkit-mask-repeat:no-repeat;
1519
+ mask-repeat:no-repeat;
1520
+ -webkit-mask-size:contain;
1521
+ mask-size:contain;
1522
+ transform:translate(-50%, -50%);
1987
1523
  }
1988
1524
 
1989
- :is(.tds-radio input[type="radio"]):focus-visible{
1525
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1526
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1527
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1528
+ }
1529
+
1530
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1990
1531
  outline:var(--t-focus-ring-outline);
1991
1532
  outline-offset:var(--t-focus-ring-offset);
1992
1533
  }
1993
1534
 
1994
- :is(.tds-radio input[type="radio"]):disabled{
1535
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1995
1536
  pointer-events:none;
1996
1537
  }
1997
1538
 
1998
1539
  @media (prefers-reduced-motion: reduce){
1999
1540
 
2000
- .tds-radio input[type="radio"]{
2001
- --tds-radio-transition-property:none;
1541
+ .tds-checkbox input[type="checkbox"]{
1542
+ --tds-checkbox-transition-property:none;
2002
1543
  }
2003
1544
  }
2004
1545
 
2005
- .tds-radio:has(input:checked){
2006
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2007
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2008
- --tds-radio-input-border-width:4px;
1546
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1547
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1548
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1549
+ --tds-checkbox-input-icon-visibility:visible;
1550
+ --tds-checkbox-input-icon-opacity:1;
1551
+ }
1552
+
1553
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1554
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1555
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1556
+ }
1557
+
1558
+ .tds-checkbox:has(input:checked){
1559
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
+ }
1561
+
1562
+ .tds-checkbox:has(input:indeterminate){
1563
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1564
+ }
1565
+
1566
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1567
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1568
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1569
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1570
+ }
1571
+
1572
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1573
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1574
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1575
+ }
1576
+
1577
+ :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{
1578
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1579
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1580
+ }
1581
+
1582
+ :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){
1583
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1584
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1585
+ }
1586
+
1587
+ .tds-checkbox:has(input:required) label::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1591
+ }
1592
+
1593
+ .tds-checkbox:has(input:disabled){
1594
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1595
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1596
+
1597
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1598
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1599
+ --tds-checkbox-cursor:not-allowed;
1600
+ }
1601
+
1602
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1603
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1604
+ }
1605
+
1606
+ .tds-checkbox-description{
1607
+ display:flex;
1608
+ grid-area:2 / 2;
1609
+ gap:var(--t-spacing-half);
1610
+ align-items:flex-start;
1611
+ padding-inline-start:var(--t-spacing-1);
1612
+ margin:0;
1613
+ font-size:var(--tds-checkbox-description-font-size);
1614
+ line-height:var(--tds-checkbox-description-line-height);
1615
+ color:var(--tds-checkbox-description-color);
1616
+ cursor:text;
1617
+ }
1618
+
1619
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1620
+ display:var(--tds-checkbox-description-invalid-icon-display);
1621
+ flex-shrink:0;
1622
+ margin-top:calc(.5lh - .5em);
1623
+ line-height:var(--tds-checkbox-description-line-height);
1624
+ }
1625
+
1626
+ .tds-checkbox--sm{
1627
+ --tds-checkbox-line-height:1.35;
1628
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1629
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1630
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1631
+ --tds-checkbox-description-line-height:1.3;
1632
+ }
1633
+
1634
+ .tds-currency-input-control{
1635
+ display:flex;
1636
+ gap:var(--t-spacing-half);
1637
+ align-items:center;
1638
+ inline-size:100%;
1639
+ min-block-size:var(--tds-field-min-height);
1640
+ padding-inline:var(--tds-field-padding-inline);
1641
+ font-size:var(--tds-field-font-size);
1642
+ color:var(--tds-field-color);
1643
+ cursor:text;
1644
+ outline:var(--t-focus-ring-width) solid transparent;
1645
+ background-color:var(--tds-field-background-color);
1646
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1647
+ border-radius:var(--t-form-border-radius);
1648
+ transition-timing-function:var(--t-ease-in-out);
1649
+ transition-duration:var(--t-duration-200);
1650
+ transition-property:background-color, border-color, outline-color, outline-offset;
1651
+ }
1652
+
1653
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1654
+ border-color:var(--tds-field-border-color-hover);
1655
+ }
1656
+
1657
+ .tds-currency-input-control:has(input:focus){
1658
+ outline-color:var(--t-focus-ring-color);
1659
+ outline-offset:var(--t-focus-ring-offset);
1660
+ border-color:var(--tds-field-border-color-active);
1661
+ }
1662
+
1663
+ .tds-currency-input-control input{
1664
+ flex:1;
1665
+ min-inline-size:0;
1666
+ padding:0;
1667
+ font-family:inherit;
1668
+ font-size:inherit;
1669
+ color:inherit;
1670
+ -webkit-appearance:none;
1671
+ -moz-appearance:none;
1672
+ appearance:none;
1673
+ outline:0;
1674
+ background-color:transparent;
1675
+ border:0;
1676
+ }
1677
+
1678
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1679
+ color:var(--tds-field-placeholder-color);
1680
+ -moz-user-select:none;
1681
+ user-select:none;
1682
+ }
1683
+
1684
+ :is(.tds-currency-input-control input)::placeholder{
1685
+ color:var(--tds-field-placeholder-color);
1686
+ -webkit-user-select:none;
1687
+ -moz-user-select:none;
1688
+ user-select:none;
1689
+ }
1690
+
1691
+ .tds-currency-input-control .tds-currency-input-prefix{
1692
+ flex-shrink:0;
1693
+ color:var(--t-text-color-secondary);
1694
+ pointer-events:none;
1695
+ -webkit-user-select:none;
1696
+ -moz-user-select:none;
1697
+ user-select:none;
1698
+ }
1699
+
1700
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1701
+ --tds-field-background-color:var(--t-form-background-color-error);
1702
+ --tds-field-border-color:var(--t-form-border-color-error);
1703
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2009
1704
  }
2010
1705
 
2011
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2012
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2013
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1706
+ .tds-currency-input-control:has(:disabled){
1707
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1708
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1709
+ --tds-field-color:var(--t-form-color-disabled);
1710
+
1711
+ cursor:not-allowed;
1712
+ }
1713
+
1714
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1715
+ color:var(--tds-field-color);
1716
+ }
1717
+
1718
+ .tds-currency-input-control:has([readonly]){
1719
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1720
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1721
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1722
+ --tds-field-color:var(--t-form-color-readonly);
1723
+ }
1724
+
1725
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1726
+ border-color:var(--t-form-border-color-hover);
1727
+ }
1728
+ .tds-currency-input-currency-name--hidden{
1729
+ position:absolute;
1730
+ width:1px;
1731
+ height:1px;
1732
+ overflow:hidden;
1733
+ white-space:nowrap;
1734
+ clip-path:inset(50%);
1735
+ }
1736
+
1737
+
1738
+ :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{
1739
+ -webkit-appearance:none;
1740
+ appearance:none;
2014
1741
  }
2015
1742
 
2016
- .tds-radio:has(input:user-invalid){
2017
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2018
- }
1743
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1744
+ inline-size:1em;
1745
+ block-size:2em;
1746
+ }
2019
1747
 
2020
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2021
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2022
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1748
+ [type="file"]:is(.tds-input input){
1749
+ padding-block:var(--t-spacing-half);
1750
+ padding-inline-start:var(--t-spacing-half);
2023
1751
  }
2024
1752
 
2025
- .tds-radio:has(input:disabled){
2026
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2027
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1753
+ [type="file"]:is(.tds-input input):not(:disabled){
1754
+ color:var(--t-text-color-secondary);
1755
+ }
2028
1756
 
2029
- --tds-radio-label-color:var(--t-form-color-disabled);
2030
- --tds-radio-description-color:var(--t-form-color-disabled);
2031
- --tds-radio-cursor:not-allowed;
2032
- }
1757
+ [type="file"]:is(.tds-input input)::file-selector-button{
1758
+ --_file-btn-padding-block:3px;
2033
1759
 
2034
- .tds-radio:has(input:disabled) input:checked{
2035
- --tds-radio-input-background-color:var(--t-form-background-color);
2036
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2037
- }
1760
+ padding-block:var(--_file-btn-padding-block);
1761
+ padding-inline:12px;
1762
+ margin-inline-end:12px;
1763
+ font:inherit;
1764
+ 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));
1765
+ color:var(--t-text-color-status-neutral);
1766
+ cursor:pointer;
1767
+ background-color:var(--t-fill-color-button-neutral-solid);
1768
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1769
+ border-radius:var(--t-border-radius-md);
1770
+ transition-timing-function:var(--t-ease-in-out);
1771
+ transition-duration:var(--t-duration-200);
1772
+ transition-property:color, background-color, border-color;
1773
+ }
2038
1774
 
2039
- .tds-radio-description{
2040
- display:flex;
2041
- grid-area:2 / 2;
2042
- gap:var(--t-spacing-half);
2043
- align-items:flex-start;
2044
- padding-inline-start:var(--t-spacing-1);
2045
- margin:0;
2046
- font-size:var(--tds-radio-description-font-size);
2047
- line-height:var(--tds-radio-description-line-height);
2048
- color:var(--tds-radio-description-color);
2049
- cursor:text;
2050
- }
1775
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1776
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1777
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1778
+ }
2051
1779
 
2052
- .tds-radio--sm{
2053
- --tds-radio-line-height:1.35;
2054
- --tds-radio-input-size:var(--t-element-size-sm);
2055
- --tds-radio-font-size:var(--t-font-size-sm);
2056
- --tds-radio-description-font-size:var(--t-font-size-xs);
2057
- --tds-radio-description-line-height:1.3;
1780
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1781
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1782
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1783
+ }
1784
+
1785
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1786
+ color:var(--t-text-color-disabled);
1787
+ pointer-events:none;
1788
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1789
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1790
+ }
1791
+ @supports (field-sizing: content){
1792
+ .tds-input--auto-width{
1793
+ inline-size:-moz-fit-content;
1794
+ inline-size:fit-content;
1795
+ min-inline-size:min(100%, 122px);
1796
+ }
1797
+
1798
+ .tds-input--auto-width input{
1799
+ field-sizing:content;
1800
+ inline-size:auto;
1801
+ }
2058
1802
  }
2059
1803
 
2060
1804
  .tds-modal-overlay{
@@ -2206,101 +1950,274 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2206
1950
  margin-inline-end:auto;
2207
1951
  }
2208
1952
 
2209
- @media (min-width: 720px){
2210
- .tds-modal-overlay{
2211
- --tds-modal-min-margin-block:0;
1953
+ @media (min-width: 720px){
1954
+ .tds-modal-overlay{
1955
+ --tds-modal-min-margin-block:0;
1956
+ }
1957
+
1958
+ .tds-modal-footer{
1959
+ position:sticky;
1960
+ bottom:0;
1961
+ background:var(--t-surface-color-card);
1962
+ border-end-start-radius:var(--t-border-radius-lg);
1963
+ border-end-end-radius:var(--t-border-radius-lg);
1964
+ }
1965
+ }
1966
+
1967
+ .tds-pane{
1968
+ --tds-pane-background-color:var(--t-surface-color-card);
1969
+ --tds-pane-border-radius:var(--t-border-radius-lg);
1970
+ --tds-pane-border-color:var(--t-border-color);
1971
+
1972
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
1973
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1974
+
1975
+ --tds-pane-title-color:var(--t-text-color-headline);
1976
+ --tds-pane-title-font-size:var(--t-font-size-lg);
1977
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
1978
+ --tds-pane-title-line-height:1.4;
1979
+
1980
+ --tds-pane-body-padding:var(--t-spacing-3);
1981
+
1982
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
1983
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1984
+
1985
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1986
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1987
+
1988
+ background:var(--tds-pane-background-color);
1989
+ border-radius:var(--tds-pane-border-radius);
1990
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
1991
+ display:flex;
1992
+ flex-direction:column;
1993
+ }
1994
+
1995
+ .tds-pane-header{
1996
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1997
+ padding-block:var(--tds-pane-header-padding-block);
1998
+ padding-inline:var(--tds-pane-header-padding-inline);
1999
+ }
2000
+
2001
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
2002
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
2003
+ }
2004
+
2005
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
2006
+ flex-basis:100%;
2007
+ order:1;
2008
+ }
2009
+
2010
+ .tds-pane-header:has( > tds-helper-shelf){
2011
+ row-gap:var(--tds-pane-header-padding-block);
2012
+ padding-block-end:0;
2013
+ }
2014
+
2015
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
2016
+ font-size:var(--t-font-size-md);
2017
+ margin-block-end:var(--tds-pane-header-padding-block);
2018
+ }
2019
+
2020
+ .tds-pane-title{
2021
+ color:var(--tds-pane-title-color);
2022
+ font-size:var(--tds-pane-title-font-size);
2023
+ font-weight:var(--tds-pane-title-font-weight);
2024
+ line-height:var(--tds-pane-title-line-height);
2025
+ margin:0;
2026
+ }
2027
+
2028
+ .tds-pane-body{
2029
+ padding:var(--tds-pane-body-padding);
2030
+ }
2031
+
2032
+ .tds-pane-footer{
2033
+ padding-block-end:var(--tds-pane-footer-padding-block);
2034
+ padding-inline:var(--tds-pane-footer-padding-inline);
2035
+ }
2036
+
2037
+ .tds-pane-divider{
2038
+ border:0;
2039
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
2040
+ margin-block:var(--tds-pane-divider-margin-block);
2041
+ margin-inline:var(--tds-pane-divider-margin-inline);
2042
+ }
2043
+
2044
+ .tds-pane-divider.tds-pane-divider--inset{
2045
+ margin-inline:0;
2046
+ }
2047
+
2048
+ .tds-popover{
2049
+ max-inline-size:24rem;
2050
+ overflow:auto;
2051
+ overscroll-behavior:none;
2052
+ outline:0;
2053
+ scrollbar-color:#0004 var(--t-surface-color-card);
2054
+ scrollbar-width:thin;
2055
+ background:var(--t-surface-color-card);
2056
+ background-clip:padding-box;
2057
+ border:1px solid var(--t-border-color);
2058
+ border-radius:var(--t-border-radius);
2059
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2060
+ }
2061
+
2062
+ @media (prefers-reduced-motion: no-preference){
2063
+ .tds-popover[data-entering]{
2064
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2065
+ }
2066
+
2067
+ .tds-popover[data-exiting]{
2068
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2069
+ }
2070
+
2071
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2072
+ will-change:opacity, transform;
2073
+ }
2074
+
2075
+ @keyframes tds-popover{
2076
+ from{
2077
+ opacity:0;
2078
+ transform:translateY(-8px);
2079
+ }
2080
+ }
2081
+ }
2082
+
2083
+ .tds-popover-content{
2084
+ display:flex;
2085
+ flex-direction:column;
2086
+ padding:var(--t-spacing-1);
2087
+ outline:0;
2088
+ }
2089
+
2090
+ .tds-radio{
2091
+ --tds-radio-font-size:var(--t-font-size-md);
2092
+ --tds-radio-cursor:pointer;
2093
+ --tds-radio-line-height:1.4;
2094
+ --tds-radio-transition-property:border-width;
2095
+
2096
+ --tds-radio-input-size:var(--t-element-size-md);
2097
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2098
+ --tds-radio-input-border-color:var(--t-form-border-color);
2099
+ --tds-radio-input-border-width:var(--t-form-border-width);
2100
+ --tds-radio-input-background-color:var(--t-form-background-color);
2101
+
2102
+ --tds-radio-label-color:var(--t-form-color);
2103
+
2104
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2105
+ --tds-radio-description-line-height:1.35;
2106
+ --tds-radio-description-color:var(--t-text-color-secondary);
2107
+
2108
+ position:relative;
2109
+ display:inline-grid;
2110
+ grid-template-columns:auto;
2111
+ grid-auto-columns:1fr;
2112
+ gap:var(--t-spacing-fourth) 0;
2113
+ line-height:var(--tds-radio-line-height);
2114
+ -webkit-user-select:none;
2115
+ -moz-user-select:none;
2116
+ user-select:none;
2117
+ }
2118
+
2119
+ .tds-radio label{
2120
+ grid-area:1 / 2;
2121
+ padding-inline-start:var(--t-spacing-1);
2122
+ font-size:var(--tds-radio-font-size);
2123
+ font-weight:var(--t-font-weight-normal);
2124
+ color:var(--tds-radio-label-color);
2125
+ cursor:var(--tds-radio-cursor);
2212
2126
  }
2213
2127
 
2214
- .tds-modal-footer{
2215
- position:sticky;
2216
- bottom:0;
2217
- background:var(--t-surface-color-card);
2218
- border-end-start-radius:var(--t-border-radius-lg);
2219
- border-end-end-radius:var(--t-border-radius-lg);
2128
+ .tds-radio input[type="radio"]{
2129
+ position:relative;
2130
+ width:1em;
2131
+ height:1em;
2132
+ margin:calc((1lh - 1em) / 2) 0 0;
2133
+ font-size:var(--tds-radio-font-size);
2134
+ line-height:inherit;
2135
+ -webkit-appearance:none;
2136
+ -moz-appearance:none;
2137
+ appearance:none;
2138
+ cursor:var(--tds-radio-cursor);
2139
+ background-color:var(--tds-radio-input-background-color);
2140
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2141
+ border-radius:var(--tds-radio-input-border-radius);
2142
+ transition-timing-function:var(--t-ease-in-out);
2143
+ transition-duration:var(--t-duration-200);
2144
+ transition-property:var(--tds-radio-transition-property);
2220
2145
  }
2221
- }
2222
2146
 
2223
- .tds-radio-group{
2224
- --tds-radio-group-font-size:var(--t-font-size-md);
2225
- --tds-radio-group-line-height:1.4;
2226
- --tds-radio-group-gap:var(--t-spacing-1);
2147
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2148
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2149
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2150
+ }
2227
2151
 
2228
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2229
- --tds-radio-group-description-line-height:1.35;
2230
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2231
- --tds-radio-group-description-invalid-icon-display:none;
2232
- display:flex;
2233
- flex-direction:column;
2234
- gap:0;
2235
- padding:0;
2236
- margin:0;
2152
+ :is(.tds-radio input[type="radio"]):focus-visible{
2153
+ outline:var(--t-focus-ring-outline);
2154
+ outline-offset:var(--t-focus-ring-offset);
2155
+ }
2237
2156
 
2238
- font-size:var(--tds-radio-group-font-size);
2239
- line-height:var(--tds-radio-group-line-height);
2240
- border:0;
2241
- }
2157
+ :is(.tds-radio input[type="radio"]):disabled{
2158
+ pointer-events:none;
2159
+ }
2242
2160
 
2243
- .tds-radio-group legend{
2244
- float:left;
2245
- padding:0;
2246
- margin:0;
2161
+ @media (prefers-reduced-motion: reduce){
2162
+
2163
+ .tds-radio input[type="radio"]{
2164
+ --tds-radio-transition-property:none;
2247
2165
  }
2166
+ }
2248
2167
 
2249
- .tds-radio-group[aria-invalid="true"]{
2250
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2251
- --tds-radio-group-description-invalid-icon-display:inline-block;
2168
+ .tds-radio:has(input:checked){
2169
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2170
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2171
+ --tds-radio-input-border-width:4px;
2252
2172
  }
2253
2173
 
2254
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2255
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2174
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2175
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2176
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2256
2177
  }
2257
2178
 
2258
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2259
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2260
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2261
- }
2262
-
2263
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2264
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2265
- }
2179
+ .tds-radio:has(input:user-invalid){
2180
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2181
+ }
2266
2182
 
2267
- .tds-radio-group:has(input:required) legend::after{
2268
- margin-left:.25ch;
2269
- color:var(--t-text-color-status-error);
2270
- content:"*";
2183
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2184
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2185
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2271
2186
  }
2272
2187
 
2273
- .tds-radio-group-fields{
2274
- display:flex;
2275
- flex-direction:column;
2276
- gap:var(--tds-radio-group-gap);
2277
- align-items:flex-start;
2278
- margin-top:var(--t-spacing-1);
2279
- }
2188
+ .tds-radio:has(input:disabled){
2189
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2190
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2280
2191
 
2281
- .tds-radio-group-description{
2192
+ --tds-radio-label-color:var(--t-form-color-disabled);
2193
+ --tds-radio-description-color:var(--t-form-color-disabled);
2194
+ --tds-radio-cursor:not-allowed;
2195
+ }
2196
+
2197
+ .tds-radio:has(input:disabled) input:checked{
2198
+ --tds-radio-input-background-color:var(--t-form-background-color);
2199
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2200
+ }
2201
+
2202
+ .tds-radio-description{
2282
2203
  display:flex;
2204
+ grid-area:2 / 2;
2283
2205
  gap:var(--t-spacing-half);
2284
2206
  align-items:flex-start;
2285
- margin:var(--t-spacing-fourth) 0 0;
2286
- font-size:var(--tds-radio-group-description-font-size);
2287
- line-height:var(--tds-radio-group-description-line-height);
2288
- color:var(--tds-radio-group-description-color);
2207
+ padding-inline-start:var(--t-spacing-1);
2208
+ margin:0;
2209
+ font-size:var(--tds-radio-description-font-size);
2210
+ line-height:var(--tds-radio-description-line-height);
2211
+ color:var(--tds-radio-description-color);
2289
2212
  cursor:text;
2290
2213
  }
2291
2214
 
2292
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2293
- display:var(--tds-radio-group-description-invalid-icon-display);
2294
- flex-shrink:0;
2295
- margin-top:calc(.5lh - .5em);
2296
- line-height:var(--tds-radio-group-description-line-height);
2297
- }
2298
-
2299
- .tds-radio-group--sm{
2300
- --tds-radio-group-line-height:1.35;
2301
- --tds-radio-group-font-size:var(--t-font-size-sm);
2302
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2303
- --tds-radio-group-description-line-height:1.3;
2215
+ .tds-radio--sm{
2216
+ --tds-radio-line-height:1.35;
2217
+ --tds-radio-input-size:var(--t-element-size-sm);
2218
+ --tds-radio-font-size:var(--t-font-size-sm);
2219
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2220
+ --tds-radio-description-line-height:1.3;
2304
2221
  }
2305
2222
 
2306
2223
  .tds-segmented-control{
@@ -2458,6 +2375,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2458
2375
  --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2459
2376
  }
2460
2377
 
2378
+ .tds-radio-group{
2379
+ --tds-radio-group-font-size:var(--t-font-size-md);
2380
+ --tds-radio-group-line-height:1.4;
2381
+ --tds-radio-group-gap:var(--t-spacing-1);
2382
+
2383
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2384
+ --tds-radio-group-description-line-height:1.35;
2385
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2386
+ --tds-radio-group-description-invalid-icon-display:none;
2387
+ display:flex;
2388
+ flex-direction:column;
2389
+ gap:0;
2390
+ padding:0;
2391
+ margin:0;
2392
+
2393
+ font-size:var(--tds-radio-group-font-size);
2394
+ line-height:var(--tds-radio-group-line-height);
2395
+ border:0;
2396
+ }
2397
+
2398
+ .tds-radio-group legend{
2399
+ float:left;
2400
+ padding:0;
2401
+ margin:0;
2402
+ }
2403
+
2404
+ .tds-radio-group[aria-invalid="true"]{
2405
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2406
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2407
+ }
2408
+
2409
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2410
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2411
+ }
2412
+
2413
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2414
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2415
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2416
+ }
2417
+
2418
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2419
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2420
+ }
2421
+
2422
+ .tds-radio-group:has(input:required) legend::after{
2423
+ margin-left:.25ch;
2424
+ color:var(--t-text-color-status-error);
2425
+ content:"*";
2426
+ }
2427
+
2428
+ .tds-radio-group-fields{
2429
+ display:flex;
2430
+ flex-direction:column;
2431
+ gap:var(--tds-radio-group-gap);
2432
+ align-items:flex-start;
2433
+ margin-top:var(--t-spacing-1);
2434
+ }
2435
+
2436
+ .tds-radio-group-description{
2437
+ display:flex;
2438
+ gap:var(--t-spacing-half);
2439
+ align-items:flex-start;
2440
+ margin:var(--t-spacing-fourth) 0 0;
2441
+ font-size:var(--tds-radio-group-description-font-size);
2442
+ line-height:var(--tds-radio-group-description-line-height);
2443
+ color:var(--tds-radio-group-description-color);
2444
+ cursor:text;
2445
+ }
2446
+
2447
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2448
+ display:var(--tds-radio-group-description-invalid-icon-display);
2449
+ flex-shrink:0;
2450
+ margin-top:calc(.5lh - .5em);
2451
+ line-height:var(--tds-radio-group-description-line-height);
2452
+ }
2453
+
2454
+ .tds-radio-group--sm{
2455
+ --tds-radio-group-line-height:1.35;
2456
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2457
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2458
+ --tds-radio-group-description-line-height:1.3;
2459
+ }
2460
+
2461
2461
  .tds-input:has(textarea){
2462
2462
  --tds-input-padding-block:6px;
2463
2463
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -3062,14 +3062,15 @@ tds-helper-shelf{
3062
3062
  --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
3063
3063
  --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
3064
3064
  --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
3065
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
3066
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
3067
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
3068
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
3065
+ --t-fill-color-product-giving-010:hsl(42, 81%, 94%);
3066
+ --t-fill-color-product-giving-020:hsl(41, 75%, 83%);
3067
+ --t-fill-color-product-giving-030:hsl(41, 80%, 76%);
3068
+ --t-fill-color-product-giving-040:hsl(42, 87%, 70%);
3069
3069
  --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
3070
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
3071
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
3072
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
3070
+ --t-fill-color-product-giving-060:hsl(46, 100%, 29%);
3071
+ --t-fill-color-product-giving-070:hsl(45, 100%, 22%);
3072
+ --t-fill-color-product-giving-080:hsl(44, 100%, 17%);
3073
+ --t-fill-color-product-giving-090:hsl(41, 25%, 13%);
3073
3074
  --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
3074
3075
  --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
3075
3076
  --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
@@ -4746,13 +4747,35 @@ tds-helper-shelf{
4746
4747
  .tds-data-table-saved-views-list{
4747
4748
  display:flex;
4748
4749
  flex-grow:1;
4749
- flex-wrap:wrap;
4750
4750
  gap:var(--t-spacing-1);
4751
+ min-width:0;
4752
+ }
4753
+
4754
+ .tds-btn--data-table-saved-views-overflow{
4755
+ flex-shrink:0;
4751
4756
  }
4757
+ .tds-data-table-saved-views-list--collapsed .tds-data-table-saved-view-list-item{
4758
+ flex-shrink:1;
4759
+ min-width:0;
4760
+ }
4761
+ .tds-data-table-saved-views-list--collapsed .tds-data-table-saved-view-name{
4762
+ overflow:hidden;
4763
+ text-overflow:ellipsis;
4764
+ }
4752
4765
 
4753
4766
  .tds-btn--data-table-saved-views-manage-views{
4754
4767
  flex-shrink:0;
4755
4768
  }
4769
+
4770
+ .tds-data-table-saved-views-new-view{
4771
+ display:flex;
4772
+ flex-shrink:0;
4773
+ gap:inherit;
4774
+ }
4775
+
4776
+ .tds-data-table-saved-views-new-view:empty{
4777
+ display:none;
4778
+ }
4756
4779
  .tds-btn--data-table-saved-views-new-view .symbol{
4757
4780
  transform:scale(.75);
4758
4781
  }
@@ -5454,11 +5477,13 @@ tds-helper-shelf{
5454
5477
  --_saved-view-list-item-background-color:var(--t-fill-color-neutral-080);
5455
5478
 
5456
5479
  display:flex;
5480
+ flex-shrink:0;
5457
5481
  align-items:center;
5458
5482
  min-height:var(--t-container-size-md);
5459
5483
 
5460
5484
  padding:var(--t-spacing-half) var(--t-spacing-1-half);
5461
5485
  color:var(--t-text-color);
5486
+ white-space:nowrap;
5462
5487
  background-color:var(--_saved-view-list-item-background-color);
5463
5488
  border-radius:999px;
5464
5489
  }