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

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