@planningcenter/tapestry 3.0.0-rc.16 → 3.0.0-rc.18

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 (29) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +504 -504
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +504 -504
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-BmShuLcI.js → p-BY6zaL3N.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/{p-BmShuLcI.js.map → p-BY6zaL3N.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-B-0BoHJk.js → p-BfWtGbNU.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-B-0BoHJk.js.map → p-BfWtGbNU.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-BIVQiCgW.js → p-Bfc7bVCa.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-BIVQiCgW.js.map → p-Bfc7bVCa.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-Bz9pLO6d.js → p-DmGaJ1sH.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-Bz9pLO6d.js.map → p-DmGaJ1sH.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-DpKQK8qS.js → p-HBXJbYlS.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/{p-DpKQK8qS.js.map → p-HBXJbYlS.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/package.json +3 -3
package/dist/reactRenderLegacy.css CHANGED
@@ -901,6 +901,17 @@
901
901
  --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
902
  }
903
903
 
904
+ :root[data-color-mode="dark"]{
905
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
906
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
907
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
908
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
909
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
910
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
911
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
912
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
913
+ }
914
+
904
915
  :root{
905
916
  --t-border-color-default-base:var(--t-border-color);
906
917
  --t-border-color-default-dark:var(--t-border-color-dark);
@@ -946,624 +957,613 @@
946
957
  --t-text-color-interaction-primary:var(--t-text-color-interaction);
947
958
  }
948
959
 
949
- :root[data-color-mode="dark"]{
950
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
951
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
952
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
953
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
954
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
955
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
956
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
957
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
958
- }
959
960
 
960
- @media (prefers-color-scheme: dark){
961
- :root[data-color-mode="system"]{
962
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
963
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
964
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
965
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
966
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
967
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
968
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
969
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
970
- }
971
- }
961
+ @media (prefers-reduced-motion: no-preference){
972
962
 
973
- @layer t-critical{
974
- tds-page-header:not(.hydrated){
975
- display:none;
976
- }
963
+ :root{
964
+ interpolate-size:allow-keywords;
977
965
  }
966
+ }
978
967
 
979
- @layer t-component{
980
- .tds-page-header{
981
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
982
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
983
- --tds-page-header-color:var(--t-text-color-default-primary);
984
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
985
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
986
- --tds-page-header-padding-x:var(--t-spacing-2);
987
- --tds-page-header-padding-y:var(--t-spacing-2);
988
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
989
- --tds-page-header-nav-gap:var(--t-spacing-1);
990
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
991
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
992
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
993
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
994
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
995
- --tds-page-header-nav-item-border-width:1px;
968
+ @layer tds-component{
969
+ tds-sidenav, .tds-sidenav{
970
+ --tds-sidenav-indent:12px;
971
+ --tds-sidenav-item-depth:0;
996
972
 
997
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
998
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
973
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
999
974
 
1000
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1001
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1002
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
975
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
976
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
977
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
978
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1003
979
 
1004
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1005
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
980
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
981
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
982
+ --tds-sidenav-item-nested-background-selected:transparent;
1006
983
 
1007
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1008
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1009
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
984
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
985
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
986
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1010
987
 
1011
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1012
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1013
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1014
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1015
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
988
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
989
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1016
990
  }
1017
991
 
1018
- .tds-page-header--profile{
1019
- --tds-page-header-padding-y:20px;
1020
- }
1021
- @media (min-width: 600px){
1022
- .tds-page-header{
1023
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1024
- --tds-page-header-color:var(--t-text-color-default-secondary);
1025
- --tds-page-header-padding-x:var(--t-spacing-3);
1026
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1027
- --tds-page-header-nav-gap:var(--t-spacing-half);
1028
- --tds-page-header-nav-background:transparent;
1029
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1030
- --tds-page-header-nav-item-border-width:1px;
1031
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1032
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1033
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1034
- }
992
+ .tds-sidenav--theme-gray{
993
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
994
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
995
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
996
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
997
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1035
998
  }
1036
999
  }
1037
1000
 
1038
- .tds-page-header{
1039
- display:flex;
1040
- flex-direction:column;
1041
- padding-top:var(--tds-page-header-padding-y);
1042
- color:var(--tds-page-header-color);
1043
- background:var(--tds-page-header-background-color);
1044
- border-bottom:1px solid var(--t-border-color-default-base);
1045
- }
1001
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1002
+ display:flex;
1003
+ }
1046
1004
 
1047
- .tds-page-header:not(.has-nav){
1048
- padding-bottom:var(--tds-page-header-padding-y);
1049
- }
1005
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1006
+ flex-direction:column;
1007
+ gap:var(--t-spacing-half);
1008
+ width:100%;
1009
+ }
1050
1010
 
1051
- .tds-page-header.inactive{
1052
- background:var(--tds-page-header-background-color-inactive);
1011
+ .tds-sidenav-section-list{
1012
+ width:100%;
1013
+ padding:0;
1014
+ margin:0;
1015
+ list-style:none;
1053
1016
  }
1054
1017
 
1055
- .tds-page-header__title-bar{
1018
+ .tds-sidenav-section-header{
1056
1019
  display:flex;
1057
- flex-direction:column;
1058
- gap:var(--t-spacing-2) var(--t-spacing-1);
1059
- align-items:flex-start;
1020
+ align-items:baseline;
1060
1021
  justify-content:space-between;
1061
- padding:0 var(--tds-page-header-padding-x);
1022
+ padding-top:var(--t-spacing-2);
1062
1023
  }
1063
1024
 
1064
- .tds-page-header--profile > .tds-page-header__title-bar{
1025
+ .tds-sidenav-section-header h2{
1026
+ margin:0;
1027
+ font-size:var(--t-font-size-sm);
1028
+ font-weight:var(--t-font-weight-semibold);
1029
+ line-height:1.35;
1030
+ color:var(--t-text-color-default-secondary);
1031
+ text-transform:uppercase;
1032
+ }
1033
+
1034
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1035
+ padding-top:0;
1036
+ }
1037
+
1038
+ .tds-sidenav-section-header [slot="label-actions"]{
1039
+ display:flex;
1040
+ gap:var(--t-spacing-half);
1041
+ align-items:center;
1042
+ }
1043
+
1044
+ .tds-sidenav-section [slot="section-actions"]{
1045
+ display:flex;
1046
+ gap:12px;
1065
1047
  align-items:center;
1048
+ min-height:42px;
1049
+ padding:var(--t-spacing-1) 0;
1066
1050
  }
1067
1051
 
1068
- .tds-page-header__primary{
1052
+ .tds-sidenav-section-list,
1053
+ .tds-sidenav-item{
1069
1054
  width:100%;
1070
- }
1071
-
1072
- .tds-page-header__primary h1{
1055
+ padding:0;
1073
1056
  margin:0;
1074
- font-size:var(--tds-page-header-headline-font-size);
1075
- font-weight:var(--t-font-weight-normal);
1076
- line-height:32px;
1077
- color:var(--tds-page-header-headline-color);
1078
- overflow-wrap:break-word;
1079
1057
  }
1080
1058
 
1081
- .tds-page-header [slot="actions"]{
1082
- width:100%;
1083
- }
1059
+ .tds-sidenav-item :is(a,button){
1060
+ position:relative;
1061
+ display:flex;
1062
+ gap:12px;
1063
+ align-items:center;
1064
+ width:100%;
1065
+ padding:12px;
1066
+ overflow:hidden;
1067
+ font-size:var(--t-font-size-sm);
1068
+ line-height:18px;
1069
+ color:var(--t-text-color-default-headline);
1070
+ white-space:nowrap;
1071
+ text-decoration:none;
1072
+ -webkit-appearance:none;
1073
+ -moz-appearance:none;
1074
+ appearance:none;
1075
+ cursor:pointer;
1076
+ background-color:var(--tds-sidenav-item-background, transparent);
1077
+ border:0;
1078
+ border-radius:var(--t-border-radius-default);
1079
+ transition:var(--tds-sidenav-item-transition);
1080
+ }
1084
1081
 
1085
- .has-multi-actions.tds-page-header [slot="actions"],
1086
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1087
- display:flex;
1088
- flex-flow:row wrap;
1089
- gap:var(--t-spacing-half) var(--t-spacing-1);
1090
- align-items:flex-start;
1091
- justify-content:flex-start;
1092
- min-width:0;
1093
- }
1082
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1083
+ display:block;
1084
+ flex:1;
1085
+ overflow:hidden;
1086
+ text-overflow:ellipsis;
1087
+ text-align:left;
1088
+ white-space:nowrap;
1089
+ }
1094
1090
 
1095
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1096
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1097
- .tds-page-header nav[slot="navigation"] ul,
1098
- .tds-page-header nav.tds-page-header__nav ul{
1099
- display:flex;
1100
- gap:var(--tds-page-header-nav-gap);
1101
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1102
- margin:0 0 -1px;
1103
- overflow:auto;
1104
- list-style:none;
1105
- background:var(--tds-page-header-nav-background);
1106
- }
1091
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1092
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1093
+ color:var(--t-text-color-default-headline);
1094
+ text-decoration:none;
1095
+ }
1107
1096
 
1108
- .tds-page-header nav[slot="navigation"] a,
1109
- .tds-page-header nav[slot="navigation"] button,
1110
- .tds-page-header nav.tds-page-header__nav a,
1111
- .tds-page-header nav.tds-page-header__nav button{
1112
- position:relative;
1113
- display:inline-flex;
1114
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1115
- font-size:var(--t-font-size-sm);
1116
- line-height:22px;
1117
- color:var(--tds-page-header-nav-item-color);
1118
- white-space:nowrap;
1119
- text-decoration:none;
1120
- -webkit-appearance:none;
1121
- -moz-appearance:none;
1122
- appearance:none;
1123
- cursor:pointer;
1124
- outline-offset:-2px;
1125
- background-color:var(--tds-page-header-nav-item-background-color);
1126
- background-clip:padding-box;
1127
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1128
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1129
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1130
- }
1131
-
1132
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1133
- position:relative;
1134
- }
1135
-
1136
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1137
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1138
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1139
- }
1140
-
1141
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1142
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1143
- position:absolute;
1144
- top:-5px;
1145
- right:-2px;
1146
- width:10px;
1147
- height:10px;
1148
- content:"";
1149
- background:var(--tds-page-header-nav-item-indicator-color);
1150
- border-radius:50%;
1151
- }
1152
-
1153
- @media (prefers-reduced-motion: no-preference){
1154
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1155
- animation:indicator-pulse 1.25s ease infinite;
1156
- }
1157
- }
1097
+ :is(.tds-sidenav-item :is(a,button)):active{
1098
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1099
+ }
1158
1100
 
1159
- .tds-page-header nav[slot="navigation"] a.selected,
1160
- .tds-page-header nav[slot="navigation"] button.selected,
1161
- .tds-page-header nav.tds-page-header__nav a.selected,
1162
- .tds-page-header nav.tds-page-header__nav button.selected{
1163
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1164
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1165
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1166
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1167
- }
1101
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1102
+ overflow:hidden;
1103
+ color:var(--tds-sidenav-item-icon-color);
1104
+ }
1168
1105
 
1169
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1170
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1171
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1172
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1173
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1174
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1175
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1176
- }
1106
+ :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{
1107
+ display:block;
1108
+ width:var(--tds-sidenav-item-icon-size);
1109
+ height:var(--tds-sidenav-item-icon-size);
1110
+ }
1177
1111
 
1178
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1179
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1180
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1181
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1182
- background-color:var(--tds-page-header-nav-item-background-color-active);
1183
- }
1112
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1113
+ --tds-sidenav-indent:19px;
1114
+ }
1184
1115
 
1185
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1186
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1187
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1188
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1189
- color:var(--tds-page-header-nav-item-color-disabled);
1190
- cursor:not-allowed;
1191
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1192
- opacity:1;
1193
- }
1116
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1117
+ visibility:visible;
1118
+ block-size:auto;
1119
+ opacity:1;
1120
+ }
1194
1121
 
1195
- @media (min-width: 960px){
1196
- .tds-page-header__primary{
1197
- flex:1 1 max-content;
1198
- width:auto;
1199
- min-width:0;
1200
- max-width:100%;
1201
- }
1122
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1123
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1124
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1202
1125
 
1203
- .tds-page-header__title-bar,
1204
- .tds-page-header--profile .tds-page-header__title-bar{
1205
- flex-flow:row nowrap;
1206
- row-gap:12px;
1207
- align-items:flex-start;
1126
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1127
+ font-weight:var(--t-font-weight-semibold);
1208
1128
  }
1209
1129
 
1210
- .tds-page-header [slot="actions"]{
1211
- width:auto;
1130
+ .tds-sidenav-item:has(.tds-sidenav-section){
1131
+ display:flex;
1132
+ flex-direction:column;
1133
+ gap:var(--t-spacing-half);
1212
1134
  }
1213
1135
 
1214
- .has-multi-actions.tds-page-header [slot="actions"],
1215
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1216
- justify-content:flex-end;
1136
+ .tds-sidenav-item .tds-sidenav-section-list{
1137
+ --tds-sidenav-item-depth:1;
1138
+ gap:0;
1217
1139
  }
1218
- }
1219
-
1220
- .tds-page-header-phone,
1221
- .tds-page-header-email{
1222
- color:var(--tds-page-header-color);
1223
- white-space:nowrap;
1224
- }
1225
-
1226
- .tds-page-header-email{
1227
- max-width:100%;
1228
- overflow:hidden;
1229
- text-overflow:ellipsis;
1230
- }
1231
1140
 
1232
- @keyframes indicator-pulse{
1233
- 0%{
1234
- opacity:.3;
1235
- transform:scale(.9);
1236
- }
1141
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1142
+ visibility:hidden;
1143
+ block-size:0;
1144
+ overflow-y:clip;
1145
+ opacity:0;
1146
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1147
+ }
1237
1148
 
1238
- 100%{
1239
- opacity:0;
1240
- transform:scale(1.75);
1241
- }
1242
- }
1149
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1150
+ --tds-sidenav-item-depth:2;
1151
+ }
1243
1152
 
1153
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1154
+ min-height:var(--t-element-size-2xl);
1155
+ padding-block:9px;
1156
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1157
+ line-height:1;
1158
+ background-color:transparent;
1159
+ }
1244
1160
 
1245
- @media (prefers-reduced-motion: no-preference){
1161
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1162
+ position:absolute;
1163
+ top:0;
1164
+ bottom:0;
1165
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1166
+ width:2px;
1167
+ content:"";
1168
+ background-color:var(--tds-sidenav-item-nested-border-color);
1169
+ transition:var(--tds-sidenav-item-transition);
1170
+ }
1246
1171
 
1247
- :root{
1248
- interpolate-size:allow-keywords;
1249
- }
1250
- }
1172
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1173
+ position:absolute;
1174
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1175
+ z-index:-1;
1176
+ height:100%;
1177
+ content:"";
1178
+ background-color:var(--tds-sidenav-item-nested-background);
1179
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1180
+ transition:var(--tds-sidenav-item-transition);
1181
+ }
1251
1182
 
1252
- @layer tds-component{
1253
- tds-sidenav, .tds-sidenav{
1254
- --tds-sidenav-indent:12px;
1255
- --tds-sidenav-item-depth:0;
1183
+ :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)){
1184
+ display:block;
1185
+ text-align:left;
1186
+ white-space:normal;
1187
+ }
1256
1188
 
1257
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1189
+ :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{
1190
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1191
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1192
+ }
1258
1193
 
1259
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1260
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1261
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1262
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1194
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1195
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1196
+ }
1263
1197
 
1264
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1265
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1266
- --tds-sidenav-item-nested-background-selected:transparent;
1198
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1199
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1200
+ font-weight:var(--t-font-weight-medium);
1201
+ }
1267
1202
 
1268
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1269
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1270
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1203
+ .tds-sidenav-responsive-header{
1204
+ display:flex;
1205
+ gap:var(--t-spacing-2);
1206
+ align-items:center;
1207
+ width:100%;
1208
+ }
1271
1209
 
1272
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1273
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1210
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1211
+ order:0;
1274
1212
  }
1275
1213
 
1276
- .tds-sidenav--theme-gray{
1277
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1278
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1279
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1280
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1281
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1214
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1215
+ flex:1;
1216
+ order:1;
1217
+ margin:0;
1218
+ font-size:var(--t-font-size-lg);
1219
+ font-weight:var(--t-font-weight-medium);
1220
+ color:var(--t-text-color-default-headline);
1282
1221
  }
1283
- }
1284
1222
 
1285
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1286
- display:flex;
1223
+ @media (max-width: 719px){
1224
+ .tds-sidenav-collapse{
1225
+ z-index:10001;
1226
+ display:none;
1227
+ max-width:min(448px, calc(100vw - 48px));
1228
+ padding:0;
1229
+ margin:12px 0;
1230
+ overflow:hidden;
1231
+ outline:0;
1232
+ background:var(--t-surface-color-card);
1233
+ border:0;
1234
+ border-radius:6px;
1235
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1236
+ will-change:transform;
1237
+ position-area:bottom span-right;
1287
1238
  }
1288
1239
 
1289
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1290
- flex-direction:column;
1291
- gap:var(--t-spacing-half);
1240
+ .tds-sidenav-scroll-container{
1241
+ --webkit-overflow-scrolling:touch;
1242
+ display:block;
1292
1243
  width:100%;
1244
+ height:-moz-fit-content;
1245
+ height:fit-content;
1246
+ padding:var(--t-spacing-2);
1247
+ overflow-y:auto;
1293
1248
  }
1294
1249
 
1295
- .tds-sidenav-section-list{
1296
- width:100%;
1297
- padding:0;
1298
- margin:0;
1299
- list-style:none;
1300
- }
1301
-
1302
- .tds-sidenav-section-header{
1303
- display:flex;
1304
- align-items:baseline;
1305
- justify-content:space-between;
1306
- padding-top:var(--t-spacing-2);
1307
- }
1308
-
1309
- .tds-sidenav-section-header h2{
1310
- margin:0;
1311
- font-size:var(--t-font-size-sm);
1312
- font-weight:var(--t-font-weight-semibold);
1313
- line-height:1.35;
1314
- color:var(--t-text-color-default-secondary);
1315
- text-transform:uppercase;
1250
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1251
+ display:none;
1316
1252
  }
1317
-
1318
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1319
- padding-top:0;
1253
+ @supports selector(:popover-open){
1254
+ .tds-sidenav-collapse:popover-open{
1255
+ display:flex;
1256
+ }
1320
1257
  }
1321
-
1322
- .tds-sidenav-section-header [slot="label-actions"]{
1323
- display:flex;
1324
- gap:var(--t-spacing-half);
1325
- align-items:center;
1258
+ @supports not selector(:popover-open){
1259
+ .tds-sidenav-collapse.\:popover-open{
1260
+ display:flex;
1261
+ }
1326
1262
  }
1327
-
1328
- .tds-sidenav-section [slot="section-actions"]{
1329
- display:flex;
1330
- gap:12px;
1331
- align-items:center;
1332
- min-height:42px;
1333
- padding:var(--t-spacing-1) 0;
1334
1263
  }
1335
1264
 
1336
- .tds-sidenav-section-list,
1337
- .tds-sidenav-item{
1338
- width:100%;
1339
- padding:0;
1340
- margin:0;
1265
+ @media (min-width: 720px){
1266
+ .tds-sidenav-responsive-header{
1267
+ display:none;
1268
+ }
1341
1269
  }
1342
1270
 
1343
- .tds-sidenav-item :is(a,button){
1344
- position:relative;
1345
- display:flex;
1346
- gap:12px;
1347
- align-items:center;
1348
- width:100%;
1349
- padding:12px;
1350
- overflow:hidden;
1351
- font-size:var(--t-font-size-sm);
1352
- line-height:18px;
1353
- color:var(--t-text-color-default-headline);
1354
- white-space:nowrap;
1355
- text-decoration:none;
1356
- -webkit-appearance:none;
1357
- -moz-appearance:none;
1358
- appearance:none;
1359
- cursor:pointer;
1360
- background-color:var(--tds-sidenav-item-background, transparent);
1361
- border:0;
1362
- border-radius:var(--t-border-radius-default);
1363
- transition:var(--tds-sidenav-item-transition);
1364
- }
1271
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1272
+ display:none;
1273
+ }
1365
1274
 
1366
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1275
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1367
1276
  display:block;
1368
- flex:1;
1369
- overflow:hidden;
1370
- text-overflow:ellipsis;
1371
- text-align:left;
1372
- white-space:nowrap;
1373
1277
  }
1374
1278
 
1375
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1376
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1377
- color:var(--t-text-color-default-headline);
1378
- text-decoration:none;
1279
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1280
+ display:flex;
1281
+ flex-direction:column;
1379
1282
  }
1380
1283
 
1381
- :is(.tds-sidenav-item :is(a,button)):active{
1382
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1383
- }
1284
+ @layer t-critical{
1285
+ tds-page-header:not(.hydrated){
1286
+ display:none;
1287
+ }
1288
+ }
1384
1289
 
1385
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1386
- overflow:hidden;
1387
- color:var(--tds-sidenav-item-icon-color);
1388
- }
1290
+ @layer t-component{
1291
+ .tds-page-header{
1292
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1293
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1294
+ --tds-page-header-color:var(--t-text-color-default-primary);
1295
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
1296
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1297
+ --tds-page-header-padding-x:var(--t-spacing-2);
1298
+ --tds-page-header-padding-y:var(--t-spacing-2);
1299
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1300
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1301
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1302
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1303
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1304
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1305
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1306
+ --tds-page-header-nav-item-border-width:1px;
1389
1307
 
1390
- :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{
1391
- display:block;
1392
- width:var(--tds-sidenav-item-icon-size);
1393
- height:var(--tds-sidenav-item-icon-size);
1394
- }
1308
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1309
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1395
1310
 
1396
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1397
- --tds-sidenav-indent:19px;
1398
- }
1311
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1312
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1313
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1399
1314
 
1400
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1401
- visibility:visible;
1402
- block-size:auto;
1403
- opacity:1;
1404
- }
1315
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1316
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1405
1317
 
1406
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1407
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1408
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1318
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1319
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1320
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1409
1321
 
1410
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1411
- font-weight:var(--t-font-weight-semibold);
1322
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1323
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1324
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1325
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1326
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1412
1327
  }
1413
1328
 
1414
- .tds-sidenav-item:has(.tds-sidenav-section){
1415
- display:flex;
1416
- flex-direction:column;
1417
- gap:var(--t-spacing-half);
1329
+ .tds-page-header--profile{
1330
+ --tds-page-header-padding-y:20px;
1418
1331
  }
1419
-
1420
- .tds-sidenav-item .tds-sidenav-section-list{
1421
- --tds-sidenav-item-depth:1;
1422
- gap:0;
1332
+ @media (min-width: 600px){
1333
+ .tds-page-header{
1334
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1335
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1336
+ --tds-page-header-padding-x:var(--t-spacing-3);
1337
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1338
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1339
+ --tds-page-header-nav-background:transparent;
1340
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1341
+ --tds-page-header-nav-item-border-width:1px;
1342
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1343
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1344
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1345
+ }
1423
1346
  }
1347
+ }
1424
1348
 
1425
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1426
- visibility:hidden;
1427
- block-size:0;
1428
- overflow-y:clip;
1429
- opacity:0;
1430
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1431
- }
1349
+ .tds-page-header{
1350
+ display:flex;
1351
+ flex-direction:column;
1352
+ padding-top:var(--tds-page-header-padding-y);
1353
+ color:var(--tds-page-header-color);
1354
+ background:var(--tds-page-header-background-color);
1355
+ border-bottom:1px solid var(--t-border-color-default-base);
1356
+ }
1432
1357
 
1433
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1434
- --tds-sidenav-item-depth:2;
1435
- }
1358
+ .tds-page-header:not(.has-nav){
1359
+ padding-bottom:var(--tds-page-header-padding-y);
1360
+ }
1436
1361
 
1437
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1438
- min-height:var(--t-element-size-2xl);
1439
- padding-block:9px;
1440
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1441
- line-height:1;
1442
- background-color:transparent;
1443
- }
1362
+ .tds-page-header.inactive{
1363
+ background:var(--tds-page-header-background-color-inactive);
1364
+ }
1444
1365
 
1445
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1446
- position:absolute;
1447
- top:0;
1448
- bottom:0;
1449
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1450
- width:2px;
1451
- content:"";
1452
- background-color:var(--tds-sidenav-item-nested-border-color);
1453
- transition:var(--tds-sidenav-item-transition);
1454
- }
1366
+ .tds-page-header__title-bar{
1367
+ display:flex;
1368
+ flex-direction:column;
1369
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1370
+ align-items:flex-start;
1371
+ justify-content:space-between;
1372
+ padding:0 var(--tds-page-header-padding-x);
1373
+ }
1455
1374
 
1456
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1457
- position:absolute;
1458
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1459
- z-index:-1;
1460
- height:100%;
1461
- content:"";
1462
- background-color:var(--tds-sidenav-item-nested-background);
1463
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1464
- transition:var(--tds-sidenav-item-transition);
1465
- }
1375
+ .tds-page-header--profile > .tds-page-header__title-bar{
1376
+ align-items:center;
1377
+ }
1466
1378
 
1467
- :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)){
1468
- display:block;
1469
- text-align:left;
1470
- white-space:normal;
1471
- }
1379
+ .tds-page-header__primary{
1380
+ width:100%;
1381
+ }
1472
1382
 
1473
- :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{
1474
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1475
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1476
- }
1383
+ .tds-page-header__primary h1{
1384
+ margin:0;
1385
+ font-size:var(--tds-page-header-headline-font-size);
1386
+ font-weight:var(--t-font-weight-normal);
1387
+ line-height:32px;
1388
+ color:var(--tds-page-header-headline-color);
1389
+ overflow-wrap:break-word;
1390
+ }
1477
1391
 
1478
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1479
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1480
- }
1392
+ .tds-page-header [slot="actions"]{
1393
+ width:100%;
1394
+ }
1481
1395
 
1482
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1483
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1484
- font-weight:var(--t-font-weight-medium);
1485
- }
1396
+ .has-multi-actions.tds-page-header [slot="actions"],
1397
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1398
+ display:flex;
1399
+ flex-flow:row wrap;
1400
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1401
+ align-items:flex-start;
1402
+ justify-content:flex-start;
1403
+ min-width:0;
1404
+ }
1486
1405
 
1487
- .tds-sidenav-responsive-header{
1406
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1407
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1408
+ .tds-page-header nav[slot="navigation"] ul,
1409
+ .tds-page-header nav.tds-page-header__nav ul{
1488
1410
  display:flex;
1489
- gap:var(--t-spacing-2);
1490
- align-items:center;
1491
- width:100%;
1411
+ gap:var(--tds-page-header-nav-gap);
1412
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1413
+ margin:0 0 -1px;
1414
+ overflow:auto;
1415
+ list-style:none;
1416
+ background:var(--tds-page-header-nav-background);
1492
1417
  }
1493
1418
 
1494
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1495
- order:0;
1496
- }
1419
+ .tds-page-header nav[slot="navigation"] a,
1420
+ .tds-page-header nav[slot="navigation"] button,
1421
+ .tds-page-header nav.tds-page-header__nav a,
1422
+ .tds-page-header nav.tds-page-header__nav button{
1423
+ position:relative;
1424
+ display:inline-flex;
1425
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1426
+ font-size:var(--t-font-size-sm);
1427
+ line-height:22px;
1428
+ color:var(--tds-page-header-nav-item-color);
1429
+ white-space:nowrap;
1430
+ text-decoration:none;
1431
+ -webkit-appearance:none;
1432
+ -moz-appearance:none;
1433
+ appearance:none;
1434
+ cursor:pointer;
1435
+ outline-offset:-2px;
1436
+ background-color:var(--tds-page-header-nav-item-background-color);
1437
+ background-clip:padding-box;
1438
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1439
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1440
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1441
+ }
1497
1442
 
1498
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1499
- flex:1;
1500
- order:1;
1501
- margin:0;
1502
- font-size:var(--t-font-size-lg);
1503
- font-weight:var(--t-font-weight-medium);
1504
- color:var(--t-text-color-default-headline);
1505
- }
1443
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1444
+ position:relative;
1445
+ }
1506
1446
 
1507
- @media (max-width: 719px){
1508
- .tds-sidenav-collapse{
1509
- z-index:10001;
1510
- display:none;
1511
- max-width:min(448px, calc(100vw - 48px));
1512
- padding:0;
1513
- margin:12px 0;
1514
- overflow:hidden;
1515
- outline:0;
1516
- background:var(--t-surface-color-card);
1517
- border:0;
1518
- border-radius:6px;
1519
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1520
- will-change:transform;
1521
- position-area:bottom span-right;
1447
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1448
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1449
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1450
+ }
1451
+
1452
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1453
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1454
+ position:absolute;
1455
+ top:-5px;
1456
+ right:-2px;
1457
+ width:10px;
1458
+ height:10px;
1459
+ content:"";
1460
+ background:var(--tds-page-header-nav-item-indicator-color);
1461
+ border-radius:50%;
1462
+ }
1463
+
1464
+ @media (prefers-reduced-motion: no-preference){
1465
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1466
+ animation:indicator-pulse 1.25s ease infinite;
1522
1467
  }
1468
+ }
1523
1469
 
1524
- .tds-sidenav-scroll-container{
1525
- --webkit-overflow-scrolling:touch;
1526
- display:block;
1527
- width:100%;
1528
- height:-moz-fit-content;
1529
- height:fit-content;
1530
- padding:var(--t-spacing-2);
1531
- overflow-y:auto;
1470
+ .tds-page-header nav[slot="navigation"] a.selected,
1471
+ .tds-page-header nav[slot="navigation"] button.selected,
1472
+ .tds-page-header nav.tds-page-header__nav a.selected,
1473
+ .tds-page-header nav.tds-page-header__nav button.selected{
1474
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1475
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1476
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1477
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1478
+ }
1479
+
1480
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1481
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1482
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1483
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1484
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1485
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1486
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1487
+ }
1488
+
1489
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1490
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1491
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1492
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1493
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1494
+ }
1495
+
1496
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1497
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1498
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1499
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1500
+ color:var(--tds-page-header-nav-item-color-disabled);
1501
+ cursor:not-allowed;
1502
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1503
+ opacity:1;
1504
+ }
1505
+
1506
+ @media (min-width: 960px){
1507
+ .tds-page-header__primary{
1508
+ flex:1 1 max-content;
1509
+ width:auto;
1510
+ min-width:0;
1511
+ max-width:100%;
1532
1512
  }
1533
1513
 
1534
- .tds-sidenav-item :is(a, button) :is(.prefix){
1535
- display:none;
1514
+ .tds-page-header__title-bar,
1515
+ .tds-page-header--profile .tds-page-header__title-bar{
1516
+ flex-flow:row nowrap;
1517
+ row-gap:12px;
1518
+ align-items:flex-start;
1536
1519
  }
1537
- @supports selector(:popover-open){
1538
- .tds-sidenav-collapse:popover-open{
1539
- display:flex;
1540
- }
1520
+
1521
+ .tds-page-header [slot="actions"]{
1522
+ width:auto;
1541
1523
  }
1542
- @supports not selector(:popover-open){
1543
- .tds-sidenav-collapse.\:popover-open{
1544
- display:flex;
1545
- }
1524
+
1525
+ .has-multi-actions.tds-page-header [slot="actions"],
1526
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1527
+ justify-content:flex-end;
1546
1528
  }
1547
1529
  }
1548
1530
 
1549
- @media (min-width: 720px){
1550
- .tds-sidenav-responsive-header{
1551
- display:none;
1552
- }
1531
+ .tds-page-header-phone,
1532
+ .tds-page-header-email{
1533
+ color:var(--tds-page-header-color);
1534
+ white-space:nowrap;
1553
1535
  }
1554
1536
 
1555
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1556
- display:none;
1557
- }
1537
+ .tds-page-header-email{
1538
+ max-width:100%;
1539
+ overflow:hidden;
1540
+ text-overflow:ellipsis;
1541
+ }
1558
1542
 
1559
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1560
- display:block;
1561
- }
1543
+ @keyframes indicator-pulse{
1544
+ 0%{
1545
+ opacity:.3;
1546
+ transform:scale(.9);
1547
+ }
1562
1548
 
1563
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1564
- display:flex;
1565
- flex-direction:column;
1566
- }
1549
+ 100%{
1550
+ opacity:0;
1551
+ transform:scale(1.75);
1552
+ }
1553
+ }
1554
+
1555
+ @media (prefers-color-scheme: dark){
1556
+ :root[data-color-mode="system"]{
1557
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1558
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1559
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1560
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1561
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1562
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1563
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1564
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1565
+ }
1566
+ }
1567
1567
 
1568
1568
  .tds-loading-spinner{
1569
1569
  --tds-loading-spinner-size:1.25em;