@planningcenter/tapestry 4.6.0-rc.6 → 4.6.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 (54) hide show
  1. package/dist/components/DataTable/ActiveFilters.d.ts +6 -2
  2. package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
  3. package/dist/components/DataTable/ActiveFilters.js +24 -6
  4. package/dist/components/DataTable/ActiveFilters.js.map +1 -1
  5. package/dist/components/DataTable/DataTable.d.ts +4 -3
  6. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  7. package/dist/components/DataTable/DataTable.js +2 -2
  8. package/dist/components/DataTable/DataTable.js.map +1 -1
  9. package/dist/components/DataTable/FilterTypes.d.ts +2 -2
  10. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  11. package/dist/components/DataTable/OperatorSelect.d.ts +9 -0
  12. package/dist/components/DataTable/OperatorSelect.d.ts.map +1 -0
  13. package/dist/components/DataTable/OperatorSelect.js +33 -0
  14. package/dist/components/DataTable/OperatorSelect.js.map +1 -0
  15. package/dist/components/button/Button.d.ts +12 -5
  16. package/dist/components/button/Button.d.ts.map +1 -1
  17. package/dist/components/button/Button.js +0 -1
  18. package/dist/components/button/Button.js.map +1 -1
  19. package/dist/components/field/Field.d.ts +3 -1
  20. package/dist/components/field/Field.d.ts.map +1 -1
  21. package/dist/components/field/Field.js +2 -2
  22. package/dist/components/field/Field.js.map +1 -1
  23. package/dist/components/input/Input.d.ts +12 -3
  24. package/dist/components/input/Input.d.ts.map +1 -1
  25. package/dist/components/input/Input.js +2 -2
  26. package/dist/components/input/Input.js.map +1 -1
  27. package/dist/components/input-text-base/InputTextBase.d.ts +3 -1
  28. package/dist/components/input-text-base/InputTextBase.d.ts.map +1 -1
  29. package/dist/components/input-text-base/InputTextBase.js +2 -2
  30. package/dist/components/input-text-base/InputTextBase.js.map +1 -1
  31. package/dist/components/search-input/SearchInput.d.ts +2 -0
  32. package/dist/components/search-input/SearchInput.d.ts.map +1 -1
  33. package/dist/components/search-input/SearchInput.js +2 -2
  34. package/dist/components/search-input/SearchInput.js.map +1 -1
  35. package/dist/components/select/Select.d.ts +2 -0
  36. package/dist/components/select/Select.d.ts.map +1 -1
  37. package/dist/components/select/Select.js +2 -2
  38. package/dist/components/select/Select.js.map +1 -1
  39. package/dist/index.css +1 -1
  40. package/dist/index.css.map +1 -1
  41. package/dist/packages/tapestry-render/dist/{buildComponent-DDhu-82j.js → buildComponent-C5PfOgH9.js} +343 -351
  42. package/dist/packages/tapestry-render/dist/buildComponent-C5PfOgH9.js.map +1 -0
  43. package/dist/packages/tapestry-render/dist/index.js +2 -2
  44. package/dist/packages/tapestry-render/dist/index.js.map +1 -1
  45. package/dist/packages/tapestry-render/dist/legacy.js +2 -2
  46. package/dist/packages/tapestry-render/dist/legacy.js.map +1 -1
  47. package/dist/reactRender.css +958 -958
  48. package/dist/reactRender.css.map +1 -1
  49. package/dist/reactRenderLegacy.css +958 -958
  50. package/dist/reactRenderLegacy.css.map +1 -1
  51. package/dist/unstable.css +4219 -4219
  52. package/dist/unstable.css.map +1 -1
  53. package/package.json +3 -3
  54. package/dist/packages/tapestry-render/dist/buildComponent-DDhu-82j.js.map +0 -1
package/dist/reactRenderLegacy.css CHANGED
@@ -704,7 +704,7 @@
704
704
  :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
705
  inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
706
  }
707
- :is(.tds-button-group > .tds-btn):hover{
707
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
708
708
  --tds-button-group-item-z-index:2;
709
709
  }
710
710
  :is(.tds-button-group > .tds-btn):focus-visible{
@@ -719,283 +719,368 @@
719
719
  border-end-end-radius:var(--tds-btn-border-radius);
720
720
  }
721
721
 
722
- @layer t-critical{
723
- tds-page-header:not(.hydrated){
724
- display:none;
725
- }
722
+
723
+ @media (prefers-reduced-motion: no-preference){
724
+
725
+ :root{
726
+ interpolate-size:allow-keywords;
726
727
  }
728
+ }
727
729
 
728
- @layer t-component{
729
- .tds-page-header{
730
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
731
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
732
- --tds-page-header-color:var(--t-text-color);
733
- --tds-page-header-bottom-border-color:transparent;
734
- --tds-page-header-headline-color:var(--t-text-color-headline);
735
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
736
- --tds-page-header-padding-x:var(--t-spacing-2);
737
- --tds-page-header-padding-y:var(--t-spacing-2);
738
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
739
- --tds-page-header-nav-gap:var(--t-spacing-1);
740
- --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%);
741
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
742
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
743
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
744
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
745
- --tds-page-header-nav-item-border-width:1px;
730
+ @layer tds-component{
731
+ tds-sidenav,
732
+ .tds-sidenav{
733
+ --tds-sidenav-indent:12px;
734
+ --tds-sidenav-item-depth:0;
746
735
 
747
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
748
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
736
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
749
737
 
750
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
751
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
752
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
738
+ --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;
739
+ --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;
740
+ --tds-sidenav-collapse-closed-opacity:0;
741
+ --tds-sidenav-collapse-open-opacity:1;
742
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
743
+ --tds-sidenav-collapse-open-transform:translateY(0);
753
744
 
754
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
755
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
745
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
746
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
747
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
748
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
756
749
 
757
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
758
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
759
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
750
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
+ --tds-sidenav-item-nested-background-selected:transparent;
760
753
 
761
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
762
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
763
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
764
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
765
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
766
- }
754
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
767
757
 
768
- .tds-page-header--profile{
769
- --tds-page-header-padding-y:20px;
758
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
770
760
  }
771
761
 
772
- @supports (color: light-dark(#fff, #000)){
773
- .tds-page-header{
774
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
775
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
762
+ @media (prefers-reduced-motion: reduce){
763
+ tds-sidenav,
764
+ .tds-sidenav{
765
+ --tds-sidenav-collapse-transition-enter:none;
766
+ --tds-sidenav-collapse-transition-exit:none;
767
+ --tds-sidenav-collapse-closed-transform:none;
768
+ --tds-sidenav-collapse-open-transform:none;
769
+ }
776
770
  }
771
+
772
+ .tds-sidenav--theme-gray{
773
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
777
778
  }
779
+ }
778
780
 
779
- @media (min-width: 600px){
780
- .tds-page-header{
781
- --tds-page-header-background-color:var(--t-surface-color-canvas);
782
- --tds-page-header-color:var(--t-text-color-secondary);
783
- --tds-page-header-bottom-border-color:var(--t-border-color);
784
- --tds-page-header-padding-x:var(--t-spacing-3);
785
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
786
- --tds-page-header-nav-gap:var(--t-spacing-half);
787
- --tds-page-header-nav-background:transparent;
788
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
789
- --tds-page-header-nav-item-border-width:1px;
790
- --tds-page-header-nav-item-color:var(--t-text-color);
791
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
792
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
793
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
794
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
795
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
796
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
797
- }
781
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
+ display:flex;
783
+ }
784
+
785
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
786
+ flex-direction:column;
787
+ gap:var(--t-spacing-half);
788
+ width:100%;
798
789
  }
790
+
791
+ .tds-sidenav-section-list{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ list-style:none;
799
796
  }
800
797
 
801
- .tds-page-header{
798
+ .tds-sidenav-section-header{
802
799
  display:flex;
803
- flex-direction:column;
804
- padding-top:var(--tds-page-header-padding-y);
805
- color:var(--tds-page-header-color);
806
- background:var(--tds-page-header-background-color);
807
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
800
+ align-items:baseline;
801
+ justify-content:space-between;
802
+ padding-top:var(--t-spacing-2);
808
803
  }
809
804
 
810
- .tds-page-header:not(.has-nav){
811
- padding-bottom:var(--tds-page-header-padding-y);
805
+ .tds-sidenav-section-header h2{
806
+ margin:0;
807
+ font-size:var(--t-font-size-sm);
808
+ font-weight:var(--t-font-weight-semibold);
809
+ line-height:1.35;
810
+ color:var(--t-text-color-secondary);
811
+ text-transform:uppercase;
812
812
  }
813
813
 
814
- .tds-page-header.inactive{
815
- background:var(--tds-page-header-background-color-inactive);
814
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
+ padding-top:0;
816
816
  }
817
817
 
818
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
819
- width:100%;
818
+ .tds-sidenav-section-header [slot="label-actions"]{
819
+ display:flex;
820
+ gap:var(--t-spacing-half);
821
+ align-items:center;
820
822
  }
821
823
 
822
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
824
+ .tds-sidenav-section [slot="section-actions"]{
825
+ display:flex;
826
+ gap:12px;
827
+ align-items:center;
828
+ min-height:42px;
829
+ padding:var(--t-spacing-1) 0;
830
+ }
831
+
832
+ .tds-sidenav-section-list,
833
+ .tds-sidenav-item{
834
+ width:100%;
835
+ padding:0;
836
+ margin:0;
837
+ }
838
+
839
+ .tds-sidenav-item :is(a,button){
840
+ position:relative;
823
841
  display:flex;
824
- flex-flow:row wrap;
825
- gap:var(--t-spacing-half) var(--t-spacing-1);
826
- align-items:flex-start;
827
- justify-content:flex-start;
828
- min-width:0;
842
+ gap:12px;
843
+ align-items:center;
844
+ width:100%;
845
+ padding:12px;
846
+ overflow:hidden;
847
+ font-size:var(--t-font-size-sm);
848
+ line-height:18px;
849
+ color:var(--t-text-color-headline);
850
+ white-space:nowrap;
851
+ text-decoration:none;
852
+ -webkit-appearance:none;
853
+ -moz-appearance:none;
854
+ appearance:none;
855
+ cursor:pointer;
856
+ background-color:var(--tds-sidenav-item-background, transparent);
857
+ border:0;
858
+ border-radius:var(--t-border-radius);
859
+ transition:var(--tds-sidenav-item-transition);
829
860
  }
830
861
 
831
- :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{
832
- display:flex;
833
- gap:var(--tds-page-header-nav-gap);
834
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
835
- margin:0 0 -1px;
836
- overflow:auto;
837
- list-style:none;
838
- background:var(--tds-page-header-nav-background);
862
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
863
+ display:block;
864
+ flex:1;
865
+ overflow:hidden;
866
+ text-overflow:ellipsis;
867
+ text-align:left;
868
+ white-space:nowrap;
839
869
  }
840
870
 
841
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
842
- position:relative;
843
- display:inline-flex;
844
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
845
- font-size:var(--t-font-size-sm);
846
- line-height:22px;
847
- color:var(--tds-page-header-nav-item-color);
848
- white-space:nowrap;
871
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
872
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
873
+ color:var(--t-text-color-headline);
849
874
  text-decoration:none;
850
- -webkit-appearance:none;
851
- -moz-appearance:none;
852
- appearance:none;
853
- cursor:pointer;
854
- outline-offset:-2px;
855
- background-color:var(--tds-page-header-nav-item-background-color);
856
- background-clip:padding-box;
857
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
858
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
859
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
860
875
  }
861
876
 
862
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
863
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
864
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
865
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
866
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
877
+ :is(.tds-sidenav-item :is(a,button)):active{
878
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
879
+ }
880
+
881
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
+ overflow:hidden;
883
+ color:var(--tds-sidenav-item-icon-color);
884
+ }
885
+
886
+ :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{
887
+ display:block;
888
+ width:var(--tds-sidenav-item-icon-size);
889
+ height:var(--tds-sidenav-item-icon-size);
867
890
  }
868
891
 
869
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
870
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
871
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
872
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
873
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
874
- }
892
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
893
+ --tds-sidenav-indent:19px;
894
+ }
875
895
 
876
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
877
- background-color:var(--tds-page-header-nav-item-background-color-active);
878
- border-color:var(--tds-page-header-nav-item-border-color-active);
879
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
880
- }
896
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
897
+ visibility:visible;
898
+ block-size:auto;
899
+ opacity:1;
900
+ }
881
901
 
882
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
883
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
884
- color:var(--tds-page-header-nav-item-color-disabled);
885
- cursor:not-allowed;
886
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
887
- opacity:1;
888
- }
902
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
903
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
904
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
889
905
 
890
- @media (min-width: 600px){
891
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
892
- position:absolute;
893
- inset:auto -1px -1px;
894
- height:1px;
895
- pointer-events:none;
896
- content:"";
897
- background-color:var(--tds-page-header-bottom-border-color);
898
- }
899
- }
906
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
+ font-weight:var(--t-font-weight-semibold);
908
+ }
900
909
 
901
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
902
- position:relative;
910
+ .tds-sidenav-item:has(.tds-sidenav-section){
911
+ display:flex;
912
+ flex-direction:column;
913
+ gap:var(--t-spacing-half);
914
+ }
915
+
916
+ .tds-sidenav-item .tds-sidenav-section-list{
917
+ --tds-sidenav-item-depth:1;
918
+ gap:0;
919
+ }
920
+
921
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
+ visibility:hidden;
923
+ block-size:0;
924
+ overflow-y:clip;
925
+ opacity:0;
926
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
903
927
  }
904
928
 
905
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
906
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
907
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
929
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
+ --tds-sidenav-item-depth:2;
931
+ }
932
+
933
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
934
+ min-height:var(--t-element-size-2xl);
935
+ padding-block:9px;
936
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
937
+ line-height:1;
938
+ background-color:transparent;
939
+ }
940
+
941
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
942
+ position:absolute;
943
+ top:0;
944
+ bottom:0;
945
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
946
+ width:2px;
947
+ content:"";
948
+ background-color:var(--tds-sidenav-item-nested-border-color);
949
+ transition:var(--tds-sidenav-item-transition);
908
950
  }
909
951
 
910
- :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{
952
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
911
953
  position:absolute;
912
- top:-5px;
913
- right:-2px;
914
- width:10px;
915
- height:10px;
954
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
+ z-index:-1;
956
+ height:100%;
916
957
  content:"";
917
- background:var(--tds-page-header-nav-item-indicator-color);
918
- border-radius:50%;
958
+ background-color:var(--tds-sidenav-item-nested-background);
959
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
960
+ transition:var(--tds-sidenav-item-transition);
919
961
  }
920
962
 
921
- @media (prefers-reduced-motion: no-preference){
922
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
923
- animation:indicator-pulse 1.25s ease infinite;
924
- }
963
+ :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)){
964
+ display:block;
965
+ text-align:left;
966
+ white-space:normal;
925
967
  }
926
968
 
927
- .tds-page-header__title-bar{
928
- display:flex;
929
- flex-direction:column;
930
- gap:var(--t-spacing-2) var(--t-spacing-1);
931
- align-items:flex-start;
932
- justify-content:space-between;
933
- padding:0 var(--tds-page-header-padding-x);
934
- }
969
+ :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{
970
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
971
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
972
+ }
935
973
 
936
- .tds-page-header--profile > .tds-page-header__title-bar{
937
- align-items:center;
938
- }
974
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
975
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
976
+ }
939
977
 
940
- .tds-page-header__primary{
978
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
979
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
980
+ font-weight:var(--t-font-weight-medium);
981
+ }
982
+
983
+ .tds-sidenav-responsive-header{
984
+ display:flex;
985
+ gap:var(--t-spacing-2);
986
+ align-items:center;
941
987
  width:100%;
942
988
  }
943
989
 
944
- .tds-page-header__primary h1{
990
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
991
+ order:0;
992
+ }
993
+
994
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
995
+ flex:1;
996
+ order:1;
945
997
  margin:0;
946
- font-size:var(--tds-page-header-headline-font-size);
947
- font-weight:var(--t-font-weight-normal);
948
- line-height:32px;
949
- color:var(--tds-page-header-headline-color);
950
- overflow-wrap:break-word;
998
+ font-size:var(--t-font-size-lg);
999
+ font-weight:var(--t-font-weight-medium);
1000
+ color:var(--t-text-color-headline);
951
1001
  }
952
1002
 
953
- @media (min-width: 960px){
954
- .tds-page-header__primary{
955
- flex:1 1 max-content;
956
- width:auto;
957
- min-width:0;
958
- max-width:100%;
1003
+ @media (max-width: 719px){
1004
+ .tds-sidenav-collapse{
1005
+ z-index:10001;
1006
+ display:none;
1007
+ max-width:min(448px, calc(100vw - 48px));
1008
+ padding:0;
1009
+ margin:12px 0;
1010
+ position-area:bottom span-right;
1011
+ overflow:hidden;
1012
+ outline:0;
1013
+ background:var(--t-surface-color-card);
1014
+ border:0;
1015
+ border-radius:6px;
1016
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1017
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1018
+ transform:var(--tds-sidenav-collapse-open-transform);
1019
+ transition:var(--tds-sidenav-collapse-transition-enter);
1020
+ will-change:transform;
959
1021
  }
960
1022
 
961
- .tds-page-header__title-bar,
962
- .tds-page-header--profile .tds-page-header__title-bar{
963
- flex-flow:row nowrap;
964
- row-gap:12px;
965
- align-items:flex-start;
1023
+ .tds-sidenav-scroll-container{
1024
+ --webkit-overflow-scrolling:touch;
1025
+ display:block;
1026
+ width:100%;
1027
+ height:-moz-fit-content;
1028
+ height:fit-content;
1029
+ padding:var(--t-spacing-2);
1030
+ overflow-y:auto;
966
1031
  }
967
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
968
- width:auto;
1032
+
1033
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1034
+ display:none;
1035
+ }
1036
+ @supports selector(:popover-open){
1037
+ .tds-sidenav-collapse:popover-open{
1038
+ display:flex;
969
1039
  }
970
1040
 
971
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
972
- justify-content:flex-end;
1041
+ .tds-sidenav-collapse:not(:popover-open){
1042
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
+ transition:var(--tds-sidenav-collapse-transition-exit);
973
1044
  }
974
- }
975
1045
 
976
- .tds-page-header-phone,
977
- .tds-page-header-email{
978
- color:var(--tds-page-header-color);
979
- white-space:nowrap;
980
- }
981
- .tds-page-header-email{
982
- max-width:100%;
983
- overflow:hidden;
984
- text-overflow:ellipsis;
985
- }
1046
+ @starting-style{
1047
+ .tds-sidenav-collapse:popover-open{
1048
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
+ transform:var(--tds-sidenav-collapse-closed-transform);
1050
+ }
1051
+ }
1052
+ }
1053
+ @supports not selector(:popover-open){
1054
+ .tds-sidenav-collapse.\:popover-open{
1055
+ display:flex;
1056
+ }
986
1057
 
987
- @keyframes indicator-pulse{
988
- 0%{
989
- opacity:.3;
990
- transform:scale(.9);
1058
+ .tds-sidenav-collapse:not(.\:popover-open){
1059
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
+ transition:var(--tds-sidenav-collapse-transition-exit);
1061
+ }
991
1062
  }
1063
+ }
992
1064
 
993
- 100%{
994
- opacity:0;
995
- transform:scale(1.75);
1065
+ @media (min-width: 720px){
1066
+ .tds-sidenav-responsive-header{
1067
+ display:none;
996
1068
  }
997
1069
  }
998
1070
 
1071
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
+ display:none;
1073
+ }
1074
+
1075
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
+ display:block;
1077
+ }
1078
+
1079
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1080
+ display:flex;
1081
+ flex-direction:column;
1082
+ }
1083
+
999
1084
  .tds-checkbox{
1000
1085
  --tds-checkbox-font-size:var(--t-font-size-md);
1001
1086
  --tds-checkbox-cursor:pointer;
@@ -1265,190 +1350,87 @@
1265
1350
  --tds-checkbox-group-description-line-height:1.3;
1266
1351
  }
1267
1352
 
1353
+ .tds-radio-group{
1354
+ --tds-radio-group-font-size:var(--t-font-size-md);
1355
+ --tds-radio-group-line-height:1.4;
1356
+ --tds-radio-group-gap:var(--t-spacing-1);
1268
1357
 
1269
- :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{
1270
- -webkit-appearance:none;
1271
- appearance:none;
1272
- }
1273
-
1274
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1275
- inline-size:1em;
1276
- block-size:2em;
1277
- }
1278
- @supports (field-sizing: content){
1279
- .tds-input--auto-width{
1280
- inline-size:-moz-fit-content;
1281
- inline-size:fit-content;
1282
- min-inline-size:min(100%, 122px);
1283
- }
1284
-
1285
- .tds-input--auto-width input{
1286
- field-sizing:content;
1287
- inline-size:auto;
1288
- }
1289
- }
1290
-
1291
- .tds-modal-overlay{
1292
- --tds-modal-min-margin-block:var(--t-spacing-3);
1293
-
1294
- position:fixed;
1295
- inset:0;
1296
- z-index:1000;
1297
- display:grid;
1298
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1299
- justify-items:center;
1300
- overflow-y:auto;
1301
- background:hsl(0 0% 0% / 40%);
1302
- }
1303
-
1304
- .tds-modal-overlay[data-entering]{
1305
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1306
- }
1307
-
1308
- .tds-modal-overlay[data-exiting]{
1309
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1310
- }
1311
-
1312
- @keyframes tds-modal-overlay-fade{
1313
- from{
1314
- opacity:0;
1315
- }
1316
- }
1317
-
1318
- .tds-modal-frame{
1319
- --tds-modal-width:600px;
1320
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1358
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1359
+ --tds-radio-group-description-line-height:1.35;
1360
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1361
+ --tds-radio-group-description-invalid-icon-display:none;
1321
1362
  display:flex;
1363
+ flex-direction:column;
1364
+ gap:0;
1365
+ padding:0;
1366
+ margin:0;
1322
1367
 
1323
- grid-row:2;
1324
- justify-content:center;
1325
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1368
+ font-size:var(--tds-radio-group-font-size);
1369
+ line-height:var(--tds-radio-group-line-height);
1370
+ border:0;
1326
1371
  }
1327
1372
 
1328
- .tds-modal-frame[data-entering]{
1329
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1373
+ .tds-radio-group legend{
1374
+ float:left;
1375
+ padding:0;
1376
+ margin:0;
1330
1377
  }
1331
1378
 
1332
- .tds-modal-frame[data-exiting]{
1333
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1379
+ .tds-radio-group[aria-invalid="true"]{
1380
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1381
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1334
1382
  }
1335
1383
 
1336
- .tds-modal-frame--sm{
1337
- --tds-modal-width:400px;
1338
- }
1339
-
1340
- .tds-modal-frame--lg{
1341
- --tds-modal-width:800px;
1342
- }
1384
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1385
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1386
+ }
1343
1387
 
1344
- .tds-modal-frame--xl{
1345
- --tds-modal-width:1000px;
1346
- }
1388
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1389
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1390
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1391
+ }
1347
1392
 
1348
- @keyframes tds-modal-zoom{
1349
- from{
1350
- opacity:0;
1351
- scale:.96;
1352
- }
1353
- }
1393
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1394
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1395
+ }
1354
1396
 
1355
- @media (prefers-reduced-motion: reduce){
1356
- .tds-modal-overlay[data-entering],
1357
- .tds-modal-overlay[data-exiting],
1358
- .tds-modal-frame[data-entering],
1359
- .tds-modal-frame[data-exiting]{
1360
- animation:none;
1361
- }
1362
- }
1397
+ .tds-radio-group:has(input:required) legend::after{
1398
+ margin-left:.25ch;
1399
+ color:var(--t-text-color-status-error);
1400
+ content:"*";
1401
+ }
1363
1402
 
1364
- .tds-modal{
1403
+ .tds-radio-group-fields{
1365
1404
  display:flex;
1366
1405
  flex-direction:column;
1367
- width:100%;
1368
- padding-block-start:var(--t-spacing-3);
1369
- padding-inline:0;
1370
- background:var(--t-surface-color-card);
1371
-
1372
- border:0;
1373
- border-radius:var(--t-border-radius-lg);
1374
- box-shadow:0 4px 18px 0 #0003;
1375
- }
1376
-
1377
- .tds-modal:focus{
1378
- outline:none;
1379
- }
1380
-
1381
- .tds-modal-header{
1382
- display:grid;
1383
- grid-template-columns:1fr auto;
1384
- -moz-column-gap:var(--t-spacing-2);
1385
- column-gap:var(--t-spacing-2);
1386
- padding-block:0;
1387
- padding-inline:var(--t-spacing-4);
1388
- }
1389
-
1390
- .tds-modal-title{
1391
- grid-row:1;
1392
- grid-column:1;
1393
- margin:0;
1394
- font-size:var(--t-font-size-2xl);
1395
- font-weight:var(--t-font-weight-medium);
1396
- line-height:140%;
1397
- color:var(--t-text-color-headline);
1398
- }
1399
-
1400
- .tds-modal-subtitle{
1401
- grid-row:2;
1402
- grid-column:1;
1403
- margin:0;
1404
- font-size:var(--t-font-size-md);
1405
- font-weight:var(--t-font-weight-medium);
1406
- line-height:140%;
1407
- color:var(--t-text-color-secondary);
1408
- }
1409
-
1410
- .tds-modal-close{
1411
- grid-row:1;
1412
- grid-column:2;
1413
- align-self:center;
1414
- color:var(--t-icon-color-dim);
1415
- }
1416
-
1417
- .tds-modal-body{
1418
- padding-block:var(--t-spacing-3);
1419
- padding-inline:var(--t-spacing-4);
1420
- }
1421
-
1422
- .tds-modal-body--full-width{
1423
- padding-inline:0;
1406
+ gap:var(--tds-radio-group-gap);
1407
+ align-items:flex-start;
1408
+ margin-top:var(--t-spacing-1);
1424
1409
  }
1425
1410
 
1426
- .tds-modal-footer{
1411
+ .tds-radio-group-description{
1427
1412
  display:flex;
1428
- gap:var(--t-spacing-2);
1429
- align-items:center;
1430
- justify-content:flex-end;
1431
- padding-block:var(--t-spacing-3);
1432
- padding-inline:var(--t-spacing-4);
1433
- border-top:1px solid var(--t-border-color);
1434
- }
1435
-
1436
- .tds-modal-footer > [slot="start"]{
1437
- margin-inline-end:auto;
1413
+ gap:var(--t-spacing-half);
1414
+ align-items:flex-start;
1415
+ margin:var(--t-spacing-fourth) 0 0;
1416
+ font-size:var(--tds-radio-group-description-font-size);
1417
+ line-height:var(--tds-radio-group-description-line-height);
1418
+ color:var(--tds-radio-group-description-color);
1419
+ cursor:text;
1438
1420
  }
1439
1421
 
1440
- @media (min-width: 720px){
1441
- .tds-modal-overlay{
1442
- --tds-modal-min-margin-block:0;
1422
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1423
+ display:var(--tds-radio-group-description-invalid-icon-display);
1424
+ flex-shrink:0;
1425
+ margin-top:calc(.5lh - .5em);
1426
+ line-height:var(--tds-radio-group-description-line-height);
1443
1427
  }
1444
1428
 
1445
- .tds-modal-footer{
1446
- position:sticky;
1447
- bottom:0;
1448
- background:var(--t-surface-color-card);
1449
- border-end-start-radius:var(--t-border-radius-lg);
1450
- border-end-end-radius:var(--t-border-radius-lg);
1451
- }
1429
+ .tds-radio-group--sm{
1430
+ --tds-radio-group-line-height:1.35;
1431
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1432
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1433
+ --tds-radio-group-description-line-height:1.3;
1452
1434
  }
1453
1435
 
1454
1436
  .tds-radio{
@@ -1584,6 +1566,29 @@
1584
1566
  --tds-radio-description-line-height:1.3;
1585
1567
  }
1586
1568
 
1569
+
1570
+ :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{
1571
+ -webkit-appearance:none;
1572
+ appearance:none;
1573
+ }
1574
+
1575
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1576
+ inline-size:1em;
1577
+ block-size:2em;
1578
+ }
1579
+ @supports (field-sizing: content){
1580
+ .tds-input--auto-width{
1581
+ inline-size:-moz-fit-content;
1582
+ inline-size:fit-content;
1583
+ min-inline-size:min(100%, 122px);
1584
+ }
1585
+
1586
+ .tds-input--auto-width input{
1587
+ field-sizing:content;
1588
+ inline-size:auto;
1589
+ }
1590
+ }
1591
+
1587
1592
  .tds-input:has(textarea){
1588
1593
  --tds-input-padding-block:6px;
1589
1594
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1689,87 +1694,167 @@
1689
1694
  }
1690
1695
  }
1691
1696
 
1692
- .tds-radio-group{
1693
- --tds-radio-group-font-size:var(--t-font-size-md);
1694
- --tds-radio-group-line-height:1.4;
1695
- --tds-radio-group-gap:var(--t-spacing-1);
1697
+ .tds-modal-overlay{
1698
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1696
1699
 
1697
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1698
- --tds-radio-group-description-line-height:1.35;
1699
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1700
- --tds-radio-group-description-invalid-icon-display:none;
1701
- display:flex;
1702
- flex-direction:column;
1703
- gap:0;
1704
- padding:0;
1705
- margin:0;
1700
+ position:fixed;
1701
+ inset:0;
1702
+ z-index:1000;
1703
+ display:grid;
1704
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1705
+ justify-items:center;
1706
+ overflow-y:auto;
1707
+ background:hsl(0 0% 0% / 40%);
1708
+ }
1706
1709
 
1707
- font-size:var(--tds-radio-group-font-size);
1708
- line-height:var(--tds-radio-group-line-height);
1709
- border:0;
1710
+ .tds-modal-overlay[data-entering]{
1711
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1712
+ }
1713
+
1714
+ .tds-modal-overlay[data-exiting]{
1715
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1716
+ }
1717
+
1718
+ @keyframes tds-modal-overlay-fade{
1719
+ from{
1720
+ opacity:0;
1721
+ }
1710
1722
  }
1711
1723
 
1712
- .tds-radio-group legend{
1713
- float:left;
1714
- padding:0;
1715
- margin:0;
1724
+ .tds-modal-frame{
1725
+ --tds-modal-width:600px;
1726
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1727
+ display:flex;
1728
+
1729
+ grid-row:2;
1730
+ justify-content:center;
1731
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1732
+ }
1733
+
1734
+ .tds-modal-frame[data-entering]{
1735
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1716
1736
  }
1717
1737
 
1718
- .tds-radio-group[aria-invalid="true"]{
1719
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1720
- --tds-radio-group-description-invalid-icon-display:inline-block;
1738
+ .tds-modal-frame[data-exiting]{
1739
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1721
1740
  }
1722
1741
 
1723
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1724
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1725
- }
1742
+ .tds-modal-frame--sm{
1743
+ --tds-modal-width:400px;
1744
+ }
1726
1745
 
1727
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1728
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1729
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1730
- }
1746
+ .tds-modal-frame--lg{
1747
+ --tds-modal-width:800px;
1748
+ }
1731
1749
 
1732
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1733
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1734
- }
1750
+ .tds-modal-frame--xl{
1751
+ --tds-modal-width:1000px;
1752
+ }
1735
1753
 
1736
- .tds-radio-group:has(input:required) legend::after{
1737
- margin-left:.25ch;
1738
- color:var(--t-text-color-status-error);
1739
- content:"*";
1740
- }
1754
+ @keyframes tds-modal-zoom{
1755
+ from{
1756
+ opacity:0;
1757
+ scale:.96;
1758
+ }
1759
+ }
1741
1760
 
1742
- .tds-radio-group-fields{
1761
+ @media (prefers-reduced-motion: reduce){
1762
+ .tds-modal-overlay[data-entering],
1763
+ .tds-modal-overlay[data-exiting],
1764
+ .tds-modal-frame[data-entering],
1765
+ .tds-modal-frame[data-exiting]{
1766
+ animation:none;
1767
+ }
1768
+ }
1769
+
1770
+ .tds-modal{
1743
1771
  display:flex;
1744
1772
  flex-direction:column;
1745
- gap:var(--tds-radio-group-gap);
1746
- align-items:flex-start;
1747
- margin-top:var(--t-spacing-1);
1773
+ width:100%;
1774
+ padding-block-start:var(--t-spacing-3);
1775
+ padding-inline:0;
1776
+ background:var(--t-surface-color-card);
1777
+
1778
+ border:0;
1779
+ border-radius:var(--t-border-radius-lg);
1780
+ box-shadow:0 4px 18px 0 #0003;
1748
1781
  }
1749
1782
 
1750
- .tds-radio-group-description{
1783
+ .tds-modal:focus{
1784
+ outline:none;
1785
+ }
1786
+
1787
+ .tds-modal-header{
1788
+ display:grid;
1789
+ grid-template-columns:1fr auto;
1790
+ -moz-column-gap:var(--t-spacing-2);
1791
+ column-gap:var(--t-spacing-2);
1792
+ padding-block:0;
1793
+ padding-inline:var(--t-spacing-4);
1794
+ }
1795
+
1796
+ .tds-modal-title{
1797
+ grid-row:1;
1798
+ grid-column:1;
1799
+ margin:0;
1800
+ font-size:var(--t-font-size-2xl);
1801
+ font-weight:var(--t-font-weight-medium);
1802
+ line-height:140%;
1803
+ color:var(--t-text-color-headline);
1804
+ }
1805
+
1806
+ .tds-modal-subtitle{
1807
+ grid-row:2;
1808
+ grid-column:1;
1809
+ margin:0;
1810
+ font-size:var(--t-font-size-md);
1811
+ font-weight:var(--t-font-weight-medium);
1812
+ line-height:140%;
1813
+ color:var(--t-text-color-secondary);
1814
+ }
1815
+
1816
+ .tds-modal-close{
1817
+ grid-row:1;
1818
+ grid-column:2;
1819
+ align-self:center;
1820
+ color:var(--t-icon-color-dim);
1821
+ }
1822
+
1823
+ .tds-modal-body{
1824
+ padding-block:var(--t-spacing-3);
1825
+ padding-inline:var(--t-spacing-4);
1826
+ }
1827
+
1828
+ .tds-modal-body--full-width{
1829
+ padding-inline:0;
1830
+ }
1831
+
1832
+ .tds-modal-footer{
1751
1833
  display:flex;
1752
- gap:var(--t-spacing-half);
1753
- align-items:flex-start;
1754
- margin:var(--t-spacing-fourth) 0 0;
1755
- font-size:var(--tds-radio-group-description-font-size);
1756
- line-height:var(--tds-radio-group-description-line-height);
1757
- color:var(--tds-radio-group-description-color);
1758
- cursor:text;
1834
+ gap:var(--t-spacing-2);
1835
+ align-items:center;
1836
+ justify-content:flex-end;
1837
+ padding-block:var(--t-spacing-3);
1838
+ padding-inline:var(--t-spacing-4);
1839
+ border-top:1px solid var(--t-border-color);
1759
1840
  }
1760
1841
 
1761
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1762
- display:var(--tds-radio-group-description-invalid-icon-display);
1763
- flex-shrink:0;
1764
- margin-top:calc(.5lh - .5em);
1765
- line-height:var(--tds-radio-group-description-line-height);
1842
+ .tds-modal-footer > [slot="start"]{
1843
+ margin-inline-end:auto;
1844
+ }
1845
+
1846
+ @media (min-width: 720px){
1847
+ .tds-modal-overlay{
1848
+ --tds-modal-min-margin-block:0;
1766
1849
  }
1767
1850
 
1768
- .tds-radio-group--sm{
1769
- --tds-radio-group-line-height:1.35;
1770
- --tds-radio-group-font-size:var(--t-font-size-sm);
1771
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1772
- --tds-radio-group-description-line-height:1.3;
1851
+ .tds-modal-footer{
1852
+ position:sticky;
1853
+ bottom:0;
1854
+ background:var(--t-surface-color-card);
1855
+ border-end-start-radius:var(--t-border-radius-lg);
1856
+ border-end-end-radius:var(--t-border-radius-lg);
1857
+ }
1773
1858
  }
1774
1859
 
1775
1860
  .tds-toggle-switch{
@@ -1912,367 +1997,282 @@
1912
1997
  --tds-toggle-switch-display:inline-flex;
1913
1998
  }
1914
1999
 
1915
-
1916
- @media (prefers-reduced-motion: no-preference){
1917
-
1918
- :root{
1919
- interpolate-size:allow-keywords;
1920
- }
2000
+ @layer t-critical{
2001
+ tds-page-header:not(.hydrated){
2002
+ display:none;
1921
2003
  }
2004
+ }
1922
2005
 
1923
- @layer tds-component{
1924
- tds-sidenav,
1925
- .tds-sidenav{
1926
- --tds-sidenav-indent:12px;
1927
- --tds-sidenav-item-depth:0;
1928
-
1929
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2006
+ @layer t-component{
2007
+ .tds-page-header{
2008
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
+ --tds-page-header-color:var(--t-text-color);
2011
+ --tds-page-header-bottom-border-color:transparent;
2012
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2013
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
+ --tds-page-header-padding-x:var(--t-spacing-2);
2015
+ --tds-page-header-padding-y:var(--t-spacing-2);
2016
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2018
+ --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%);
2019
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
+ --tds-page-header-nav-item-border-width:1px;
1930
2024
 
1931
- --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;
1932
- --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;
1933
- --tds-sidenav-collapse-closed-opacity:0;
1934
- --tds-sidenav-collapse-open-opacity:1;
1935
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
- --tds-sidenav-collapse-open-transform:translateY(0);
2025
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1937
2027
 
1938
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2028
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1942
2031
 
1943
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
- --tds-sidenav-item-nested-background-selected:transparent;
2032
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1946
2034
 
1947
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2035
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1950
2038
 
1951
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2039
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1953
2044
  }
1954
2045
 
1955
- @media (prefers-reduced-motion: reduce){
1956
- tds-sidenav,
1957
- .tds-sidenav{
1958
- --tds-sidenav-collapse-transition-enter:none;
1959
- --tds-sidenav-collapse-transition-exit:none;
1960
- --tds-sidenav-collapse-closed-transform:none;
1961
- --tds-sidenav-collapse-open-transform:none;
2046
+ .tds-page-header--profile{
2047
+ --tds-page-header-padding-y:20px;
1962
2048
  }
1963
- }
1964
2049
 
1965
- .tds-sidenav--theme-gray{
1966
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
- }
1972
- }
1973
-
1974
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
- display:flex;
2050
+ @supports (color: light-dark(#fff, #000)){
2051
+ .tds-page-header{
2052
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2054
+ }
1976
2055
  }
1977
2056
 
1978
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
- flex-direction:column;
1980
- gap:var(--t-spacing-half);
1981
- width:100%;
2057
+ @media (min-width: 600px){
2058
+ .tds-page-header{
2059
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
+ --tds-page-header-color:var(--t-text-color-secondary);
2061
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2062
+ --tds-page-header-padding-x:var(--t-spacing-3);
2063
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2065
+ --tds-page-header-nav-background:transparent;
2066
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
+ --tds-page-header-nav-item-border-width:1px;
2068
+ --tds-page-header-nav-item-color:var(--t-text-color);
2069
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2075
+ }
1982
2076
  }
1983
-
1984
- .tds-sidenav-section-list{
1985
- width:100%;
1986
- padding:0;
1987
- margin:0;
1988
- list-style:none;
1989
2077
  }
1990
2078
 
1991
- .tds-sidenav-section-header{
2079
+ .tds-page-header{
1992
2080
  display:flex;
1993
- align-items:baseline;
1994
- justify-content:space-between;
1995
- padding-top:var(--t-spacing-2);
2081
+ flex-direction:column;
2082
+ padding-top:var(--tds-page-header-padding-y);
2083
+ color:var(--tds-page-header-color);
2084
+ background:var(--tds-page-header-background-color);
2085
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1996
2086
  }
1997
2087
 
1998
- .tds-sidenav-section-header h2{
1999
- margin:0;
2000
- font-size:var(--t-font-size-sm);
2001
- font-weight:var(--t-font-weight-semibold);
2002
- line-height:1.35;
2003
- color:var(--t-text-color-secondary);
2004
- text-transform:uppercase;
2088
+ .tds-page-header:not(.has-nav){
2089
+ padding-bottom:var(--tds-page-header-padding-y);
2005
2090
  }
2006
2091
 
2007
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
- padding-top:0;
2092
+ .tds-page-header.inactive{
2093
+ background:var(--tds-page-header-background-color-inactive);
2009
2094
  }
2010
2095
 
2011
- .tds-sidenav-section-header [slot="label-actions"]{
2012
- display:flex;
2013
- gap:var(--t-spacing-half);
2014
- align-items:center;
2096
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
+ width:100%;
2015
2098
  }
2016
2099
 
2017
- .tds-sidenav-section [slot="section-actions"]{
2018
- display:flex;
2019
- gap:12px;
2020
- align-items:center;
2021
- min-height:42px;
2022
- padding:var(--t-spacing-1) 0;
2023
- }
2024
-
2025
- .tds-sidenav-section-list,
2026
- .tds-sidenav-item{
2027
- width:100%;
2028
- padding:0;
2029
- margin:0;
2030
- }
2031
-
2032
- .tds-sidenav-item :is(a,button){
2033
- position:relative;
2100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2034
2101
  display:flex;
2035
- gap:12px;
2036
- align-items:center;
2037
- width:100%;
2038
- padding:12px;
2039
- overflow:hidden;
2040
- font-size:var(--t-font-size-sm);
2041
- line-height:18px;
2042
- color:var(--t-text-color-headline);
2043
- white-space:nowrap;
2044
- text-decoration:none;
2045
- -webkit-appearance:none;
2046
- -moz-appearance:none;
2047
- appearance:none;
2048
- cursor:pointer;
2049
- background-color:var(--tds-sidenav-item-background, transparent);
2050
- border:0;
2051
- border-radius:var(--t-border-radius);
2052
- transition:var(--tds-sidenav-item-transition);
2102
+ flex-flow:row wrap;
2103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2104
+ align-items:flex-start;
2105
+ justify-content:flex-start;
2106
+ min-width:0;
2053
2107
  }
2054
2108
 
2055
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
- display:block;
2057
- flex:1;
2058
- overflow:hidden;
2059
- text-overflow:ellipsis;
2060
- text-align:left;
2061
- white-space:nowrap;
2109
+ :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{
2110
+ display:flex;
2111
+ gap:var(--tds-page-header-nav-gap);
2112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
+ margin:0 0 -1px;
2114
+ overflow:auto;
2115
+ list-style:none;
2116
+ background:var(--tds-page-header-nav-background);
2062
2117
  }
2063
2118
 
2064
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
- color:var(--t-text-color-headline);
2119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
+ position:relative;
2121
+ display:inline-flex;
2122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
+ font-size:var(--t-font-size-sm);
2124
+ line-height:22px;
2125
+ color:var(--tds-page-header-nav-item-color);
2126
+ white-space:nowrap;
2067
2127
  text-decoration:none;
2128
+ -webkit-appearance:none;
2129
+ -moz-appearance:none;
2130
+ appearance:none;
2131
+ cursor:pointer;
2132
+ outline-offset:-2px;
2133
+ background-color:var(--tds-page-header-nav-item-background-color);
2134
+ background-clip:padding-box;
2135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2068
2138
  }
2069
2139
 
2070
- :is(.tds-sidenav-item :is(a,button)):active{
2071
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2072
- }
2073
-
2074
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
- overflow:hidden;
2076
- color:var(--tds-sidenav-item-icon-color);
2077
- }
2078
-
2079
- :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{
2080
- display:block;
2081
- width:var(--tds-sidenav-item-icon-size);
2082
- height:var(--tds-sidenav-item-icon-size);
2140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2083
2145
  }
2084
2146
 
2085
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
- --tds-sidenav-indent:19px;
2087
- }
2088
-
2089
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
- visibility:visible;
2091
- block-size:auto;
2092
- opacity:1;
2093
- }
2094
-
2095
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2098
-
2099
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
- font-weight:var(--t-font-weight-semibold);
2101
- }
2102
-
2103
- .tds-sidenav-item:has(.tds-sidenav-section){
2104
- display:flex;
2105
- flex-direction:column;
2106
- gap:var(--t-spacing-half);
2107
- }
2147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
+ }
2108
2153
 
2109
- .tds-sidenav-item .tds-sidenav-section-list{
2110
- --tds-sidenav-item-depth:1;
2111
- gap:0;
2112
- }
2154
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2156
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2157
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
+ }
2113
2159
 
2114
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
- visibility:hidden;
2116
- block-size:0;
2117
- overflow-y:clip;
2118
- opacity:0;
2119
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2120
- }
2160
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
+ color:var(--tds-page-header-nav-item-color-disabled);
2163
+ cursor:not-allowed;
2164
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
+ opacity:1;
2166
+ }
2121
2167
 
2122
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
- --tds-sidenav-item-depth:2;
2124
- }
2168
+ @media (min-width: 600px){
2169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
+ position:absolute;
2171
+ inset:auto -1px -1px;
2172
+ height:1px;
2173
+ pointer-events:none;
2174
+ content:"";
2175
+ background-color:var(--tds-page-header-bottom-border-color);
2176
+ }
2177
+ }
2125
2178
 
2126
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
- min-height:var(--t-element-size-2xl);
2128
- padding-block:9px;
2129
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
- line-height:1;
2131
- background-color:transparent;
2179
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
+ position:relative;
2132
2181
  }
2133
2182
 
2134
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
- position:absolute;
2136
- top:0;
2137
- bottom:0;
2138
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
- width:2px;
2140
- content:"";
2141
- background-color:var(--tds-sidenav-item-nested-border-color);
2142
- transition:var(--tds-sidenav-item-transition);
2183
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2143
2186
  }
2144
2187
 
2145
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2188
+ :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{
2146
2189
  position:absolute;
2147
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
- z-index:-1;
2149
- height:100%;
2190
+ top:-5px;
2191
+ right:-2px;
2192
+ width:10px;
2193
+ height:10px;
2150
2194
  content:"";
2151
- background-color:var(--tds-sidenav-item-nested-background);
2152
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
- transition:var(--tds-sidenav-item-transition);
2154
- }
2155
-
2156
- :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)){
2157
- display:block;
2158
- text-align:left;
2159
- white-space:normal;
2160
- }
2161
-
2162
- :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{
2163
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2195
+ background:var(--tds-page-header-nav-item-indicator-color);
2196
+ border-radius:50%;
2165
2197
  }
2166
2198
 
2167
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2199
+ @media (prefers-reduced-motion: no-preference){
2200
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
+ animation:indicator-pulse 1.25s ease infinite;
2202
+ }
2169
2203
  }
2170
2204
 
2171
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
- font-weight:var(--t-font-weight-medium);
2174
- }
2175
-
2176
- .tds-sidenav-responsive-header{
2205
+ .tds-page-header__title-bar{
2177
2206
  display:flex;
2178
- gap:var(--t-spacing-2);
2179
- align-items:center;
2180
- width:100%;
2207
+ flex-direction:column;
2208
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2209
+ align-items:flex-start;
2210
+ justify-content:space-between;
2211
+ padding:0 var(--tds-page-header-padding-x);
2181
2212
  }
2182
2213
 
2183
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
- order:0;
2185
- }
2186
-
2187
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
- flex:1;
2189
- order:1;
2190
- margin:0;
2191
- font-size:var(--t-font-size-lg);
2192
- font-weight:var(--t-font-weight-medium);
2193
- color:var(--t-text-color-headline);
2214
+ .tds-page-header--profile > .tds-page-header__title-bar{
2215
+ align-items:center;
2194
2216
  }
2195
2217
 
2196
- @media (max-width: 719px){
2197
- .tds-sidenav-collapse{
2198
- z-index:10001;
2199
- display:none;
2200
- max-width:min(448px, calc(100vw - 48px));
2201
- padding:0;
2202
- margin:12px 0;
2203
- position-area:bottom span-right;
2204
- overflow:hidden;
2205
- outline:0;
2206
- background:var(--t-surface-color-card);
2207
- border:0;
2208
- border-radius:6px;
2209
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
- opacity:var(--tds-sidenav-collapse-open-opacity);
2211
- transform:var(--tds-sidenav-collapse-open-transform);
2212
- transition:var(--tds-sidenav-collapse-transition-enter);
2213
- will-change:transform;
2214
- }
2218
+ .tds-page-header__primary{
2219
+ width:100%;
2220
+ }
2215
2221
 
2216
- .tds-sidenav-scroll-container{
2217
- --webkit-overflow-scrolling:touch;
2218
- display:block;
2219
- width:100%;
2220
- height:-moz-fit-content;
2221
- height:fit-content;
2222
- padding:var(--t-spacing-2);
2223
- overflow-y:auto;
2222
+ .tds-page-header__primary h1{
2223
+ margin:0;
2224
+ font-size:var(--tds-page-header-headline-font-size);
2225
+ font-weight:var(--t-font-weight-normal);
2226
+ line-height:32px;
2227
+ color:var(--tds-page-header-headline-color);
2228
+ overflow-wrap:break-word;
2224
2229
  }
2225
2230
 
2226
- .tds-sidenav-item :is(a, button) :is(.prefix){
2227
- display:none;
2231
+ @media (min-width: 960px){
2232
+ .tds-page-header__primary{
2233
+ flex:1 1 max-content;
2234
+ width:auto;
2235
+ min-width:0;
2236
+ max-width:100%;
2228
2237
  }
2229
- @supports selector(:popover-open){
2230
- .tds-sidenav-collapse:popover-open{
2231
- display:flex;
2232
- }
2233
-
2234
- .tds-sidenav-collapse:not(:popover-open){
2235
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
- transition:var(--tds-sidenav-collapse-transition-exit);
2237
- }
2238
2238
 
2239
- @starting-style{
2240
- .tds-sidenav-collapse:popover-open{
2241
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
- transform:var(--tds-sidenav-collapse-closed-transform);
2243
- }
2244
- }
2245
- }
2246
- @supports not selector(:popover-open){
2247
- .tds-sidenav-collapse.\:popover-open{
2248
- display:flex;
2239
+ .tds-page-header__title-bar,
2240
+ .tds-page-header--profile .tds-page-header__title-bar{
2241
+ flex-flow:row nowrap;
2242
+ row-gap:12px;
2243
+ align-items:flex-start;
2244
+ }
2245
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
+ width:auto;
2249
2247
  }
2250
2248
 
2251
- .tds-sidenav-collapse:not(.\:popover-open){
2252
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
- transition:var(--tds-sidenav-collapse-transition-exit);
2249
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
+ justify-content:flex-end;
2254
2251
  }
2255
- }
2256
2252
  }
2257
2253
 
2258
- @media (min-width: 720px){
2259
- .tds-sidenav-responsive-header{
2260
- display:none;
2261
- }
2254
+ .tds-page-header-phone,
2255
+ .tds-page-header-email{
2256
+ color:var(--tds-page-header-color);
2257
+ white-space:nowrap;
2258
+ }
2259
+ .tds-page-header-email{
2260
+ max-width:100%;
2261
+ overflow:hidden;
2262
+ text-overflow:ellipsis;
2262
2263
  }
2263
2264
 
2264
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
- display:none;
2266
- }
2267
-
2268
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
- display:block;
2270
- }
2265
+ @keyframes indicator-pulse{
2266
+ 0%{
2267
+ opacity:.3;
2268
+ transform:scale(.9);
2269
+ }
2271
2270
 
2272
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
- display:flex;
2274
- flex-direction:column;
2275
- }
2271
+ 100%{
2272
+ opacity:0;
2273
+ transform:scale(1.75);
2274
+ }
2275
+ }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
@@ -3919,245 +3919,79 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3919
3919
 
3920
3920
  [data-flex-gap-xl="0"]{ gap:0; }
3921
3921
  [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
3922
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
3923
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
3924
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
3925
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
3926
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
3927
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
3928
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
3929
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
3931
-
3932
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3943
-
3944
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3955
-
3956
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
- [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
3959
-
3960
- [data-padding-xl="0"]{ padding:0; }
3961
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
3971
-
3972
- [data-padding-block-xl="0"]{ padding-block:0; }
3973
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
-
3984
- [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
- }
3996
-
3997
- .tds-segmented-control{
3998
- --tds-segmented-control-font-size:var(--t-font-size-md);
3999
- --tds-segmented-control-padding:var(--t-spacing-half);
4000
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4001
- --tds-segmented-control-icon-size:.66666667lh;
4002
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4003
- --tds-segmented-control-max-width:280px;
4004
- --tds-segmented-control-min-height:var(--t-container-size-md);
4005
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4006
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4007
- --tds-segmented-control-width:fit-content;
4008
-
4009
- display:flex;
4010
- flex-direction:column;
4011
- gap:var(--t-spacing-half);
4012
- align-items:flex-start;
4013
- width:var(--tds-segmented-control-width);
4014
- }
4015
-
4016
- .tds-segmented-control--sm{
4017
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4018
- --tds-segmented-control-padding-inline:7px;
4019
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4020
- }
4021
-
4022
- .tds-segmented-control--full-width{
4023
- --tds-segmented-control-width:100%;
4024
- --tds-segmented-control-max-width:none;
4025
- }
4026
-
4027
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4028
- flex:1 1 0;
4029
- }
4030
-
4031
- .tds-segmented-control-label{
4032
- font-size:var(--tds-segmented-control-font-size);
4033
- font-weight:var(--t-font-weight-normal);
4034
- color:var(--t-text-color-headline);
4035
- }
4036
-
4037
- .tds-segmented-control-label--hidden{
4038
- position:absolute;
4039
- width:1px;
4040
- height:1px;
4041
- overflow:hidden;
4042
- white-space:nowrap;
4043
- clip-path:inset(50%);
4044
- }
4045
-
4046
- .tds-segmented-control-track{
4047
- display:inline-flex;
4048
- gap:var(--tds-segmented-control-track-gap);
4049
- width:var(--tds-segmented-control-width);
4050
- padding:var(--tds-segmented-control-padding);
4051
- background-color:var(--t-form-background-color);
4052
- border:1px solid var(--t-border-color);
4053
- border-radius:var(--tds-segmented-control-border-radius);
4054
- }
4055
-
4056
- .tds-segmented-control-segment{
4057
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4058
- --tds-segmented-control-background-color:transparent;
4059
-
4060
- display:inline-flex;
4061
- gap:var(--t-spacing-1);
4062
- align-items:center;
4063
- justify-content:center;
4064
- max-width:var(--tds-segmented-control-max-width);
4065
- min-height:var(--tds-segmented-control-min-height);
4066
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4067
- padding-inline:var(--tds-segmented-control-padding-inline);
4068
- font:inherit;
4069
- font-size:var(--tds-segmented-control-font-size);
4070
- color:var(--tds-segmented-control-color);
4071
- text-align:center;
4072
- cursor:pointer;
4073
- -webkit-user-select:none;
4074
- -moz-user-select:none;
4075
- user-select:none;
4076
- background-color:var(--tds-segmented-control-background-color);
4077
- border:0;
4078
- border-radius:var(--t-border-radius-sm);
4079
- transition-timing-function:var(--t-ease-in-out);
4080
- transition-duration:var(--t-duration-200);
4081
- transition-property:color, background-color;
4082
- }
4083
-
4084
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4085
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4086
- }
4087
-
4088
- .tds-segmented-control-segment .symbol{
4089
- display:block;
4090
- flex-shrink:0;
4091
- width:var(--tds-segmented-control-icon-size);
4092
- height:var(--tds-segmented-control-icon-size);
4093
- }
4094
-
4095
- .tds-segmented-control-segment:focus-visible{
4096
- outline:var(--t-focus-ring-outline);
4097
- outline-offset:var(--t-focus-ring-offset);
4098
- }
4099
-
4100
- .tds-segmented-control-segment[aria-checked="true"]{
4101
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4102
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4103
-
4104
- cursor:default;
4105
- }
4106
-
4107
- .tds-segmented-control-segment:disabled{
4108
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4109
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4110
-
4111
- pointer-events:none;
4112
- }
4113
-
4114
- .tds-segmented-control-segment--interaction-subtle{
4115
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4116
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4117
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4118
- --tds-segmented-control-background-color-disabled:transparent;
4119
- }
4120
-
4121
- .tds-popover{
4122
- max-inline-size:24rem;
4123
- overflow:auto;
4124
- overscroll-behavior:none;
4125
- outline:0;
4126
- scrollbar-color:#0004 var(--t-surface-color-card);
4127
- scrollbar-width:thin;
4128
- background:var(--t-surface-color-card);
4129
- background-clip:padding-box;
4130
- border:1px solid var(--t-border-color);
4131
- border-radius:var(--t-border-radius);
4132
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4133
- }
3922
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
3923
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
3924
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
3925
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
3926
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
3927
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
3928
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
3929
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4134
3931
 
4135
- @media (prefers-reduced-motion: no-preference){
4136
- .tds-popover[data-entering]{
4137
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4138
- }
3932
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4139
3943
 
4140
- .tds-popover[data-exiting]{
4141
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4142
- }
3944
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4143
3955
 
4144
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4145
- will-change:opacity, transform;
4146
- }
3956
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4147
3959
 
4148
- @keyframes tds-popover{
4149
- from{
4150
- opacity:0;
4151
- transform:translateY(-8px);
4152
- }
4153
- }
4154
- }
3960
+ [data-padding-xl="0"]{ padding:0; }
3961
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4155
3971
 
4156
- .tds-popover-content{
4157
- display:flex;
4158
- flex-direction:column;
4159
- padding:var(--t-spacing-1);
4160
- outline:0;
3972
+ [data-padding-block-xl="0"]{ padding-block:0; }
3973
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
+
3984
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4161
3995
  }
4162
3996
 
4163
3997
  .tds-data-table{
@@ -4637,6 +4471,172 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4637
4471
  }
4638
4472
  }
4639
4473
 
4474
+ .tds-segmented-control{
4475
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4476
+ --tds-segmented-control-padding:var(--t-spacing-half);
4477
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4478
+ --tds-segmented-control-icon-size:.66666667lh;
4479
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4480
+ --tds-segmented-control-max-width:280px;
4481
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4482
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4483
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4484
+ --tds-segmented-control-width:fit-content;
4485
+
4486
+ display:flex;
4487
+ flex-direction:column;
4488
+ gap:var(--t-spacing-half);
4489
+ align-items:flex-start;
4490
+ width:var(--tds-segmented-control-width);
4491
+ }
4492
+
4493
+ .tds-segmented-control--sm{
4494
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4495
+ --tds-segmented-control-padding-inline:7px;
4496
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4497
+ }
4498
+
4499
+ .tds-segmented-control--full-width{
4500
+ --tds-segmented-control-width:100%;
4501
+ --tds-segmented-control-max-width:none;
4502
+ }
4503
+
4504
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4505
+ flex:1 1 0;
4506
+ }
4507
+
4508
+ .tds-segmented-control-label{
4509
+ font-size:var(--tds-segmented-control-font-size);
4510
+ font-weight:var(--t-font-weight-normal);
4511
+ color:var(--t-text-color-headline);
4512
+ }
4513
+
4514
+ .tds-segmented-control-label--hidden{
4515
+ position:absolute;
4516
+ width:1px;
4517
+ height:1px;
4518
+ overflow:hidden;
4519
+ white-space:nowrap;
4520
+ clip-path:inset(50%);
4521
+ }
4522
+
4523
+ .tds-segmented-control-track{
4524
+ display:inline-flex;
4525
+ gap:var(--tds-segmented-control-track-gap);
4526
+ width:var(--tds-segmented-control-width);
4527
+ padding:var(--tds-segmented-control-padding);
4528
+ background-color:var(--t-form-background-color);
4529
+ border:1px solid var(--t-border-color);
4530
+ border-radius:var(--tds-segmented-control-border-radius);
4531
+ }
4532
+
4533
+ .tds-segmented-control-segment{
4534
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4535
+ --tds-segmented-control-background-color:transparent;
4536
+
4537
+ display:inline-flex;
4538
+ gap:var(--t-spacing-1);
4539
+ align-items:center;
4540
+ justify-content:center;
4541
+ max-width:var(--tds-segmented-control-max-width);
4542
+ min-height:var(--tds-segmented-control-min-height);
4543
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4544
+ padding-inline:var(--tds-segmented-control-padding-inline);
4545
+ font:inherit;
4546
+ font-size:var(--tds-segmented-control-font-size);
4547
+ color:var(--tds-segmented-control-color);
4548
+ text-align:center;
4549
+ cursor:pointer;
4550
+ -webkit-user-select:none;
4551
+ -moz-user-select:none;
4552
+ user-select:none;
4553
+ background-color:var(--tds-segmented-control-background-color);
4554
+ border:0;
4555
+ border-radius:var(--t-border-radius-sm);
4556
+ transition-timing-function:var(--t-ease-in-out);
4557
+ transition-duration:var(--t-duration-200);
4558
+ transition-property:color, background-color;
4559
+ }
4560
+
4561
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4562
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4563
+ }
4564
+
4565
+ .tds-segmented-control-segment .symbol{
4566
+ display:block;
4567
+ flex-shrink:0;
4568
+ width:var(--tds-segmented-control-icon-size);
4569
+ height:var(--tds-segmented-control-icon-size);
4570
+ }
4571
+
4572
+ .tds-segmented-control-segment:focus-visible{
4573
+ outline:var(--t-focus-ring-outline);
4574
+ outline-offset:var(--t-focus-ring-offset);
4575
+ }
4576
+
4577
+ .tds-segmented-control-segment[aria-checked="true"]{
4578
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4579
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4580
+
4581
+ cursor:default;
4582
+ }
4583
+
4584
+ .tds-segmented-control-segment:disabled{
4585
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4586
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4587
+
4588
+ pointer-events:none;
4589
+ }
4590
+
4591
+ .tds-segmented-control-segment--interaction-subtle{
4592
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4593
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4594
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4595
+ --tds-segmented-control-background-color-disabled:transparent;
4596
+ }
4597
+
4598
+ .tds-popover{
4599
+ max-inline-size:24rem;
4600
+ overflow:auto;
4601
+ overscroll-behavior:none;
4602
+ outline:0;
4603
+ scrollbar-color:#0004 var(--t-surface-color-card);
4604
+ scrollbar-width:thin;
4605
+ background:var(--t-surface-color-card);
4606
+ background-clip:padding-box;
4607
+ border:1px solid var(--t-border-color);
4608
+ border-radius:var(--t-border-radius);
4609
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4610
+ }
4611
+
4612
+ @media (prefers-reduced-motion: no-preference){
4613
+ .tds-popover[data-entering]{
4614
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4615
+ }
4616
+
4617
+ .tds-popover[data-exiting]{
4618
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4619
+ }
4620
+
4621
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4622
+ will-change:opacity, transform;
4623
+ }
4624
+
4625
+ @keyframes tds-popover{
4626
+ from{
4627
+ opacity:0;
4628
+ transform:translateY(-8px);
4629
+ }
4630
+ }
4631
+ }
4632
+
4633
+ .tds-popover-content{
4634
+ display:flex;
4635
+ flex-direction:column;
4636
+ padding:var(--t-spacing-1);
4637
+ outline:0;
4638
+ }
4639
+
4640
4640
  .tds-pagination{
4641
4641
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4642
4642
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);